OrgChart reintroduced autocomplete search results in OrgChart search. Updated tabs to use latest ng-ias code and ux-ias style.

client/package.json

@@ -19,6 +19,9 @@
     "license": "ISC",
     "dependencies": {},
     "devDependencies": {
+        "@microfocus/ias-icons": "^1.0.0-alpha",
+        "@microfocus/ux-ias": "^1.0.0-alpha.1",
+        "@microfocus/ng-ias": "^1.0.0-alpha.2",
         "@types/angular": "1.6.42",
         "@types/angular-mocks": "1.5.11",
         "@types/angular-translate": "2.15.1",

client/src/helpdesk/helpdesk-detail.component.html

@@ -28,80 +28,86 @@
 
 <div class="help-desk-content">
     <div>
-        <ias-tabset>
-            <ias-tab id="Field_Profile" label="Profile">
-                <table class="details-table">
-                    <tbody>
-                    <tr ng-repeat="item in $ctrl.person.profileData">
-                        <td ng-bind="item.label"></td>
-                        <td ng-bind="item.value | dateFilter" ng-if="item.type==='timestamp'"></td>
-                        <td ng-bind="item.value" ng-if="item.type==='string' || item.type==='number'"></td>
-                        <td ng-bind="value" ng-if="item.type==='multiString'" ng-repeat="value in item.values"></td>
-                    </tr>
-                    </tbody>
-                </table>
-            </ias-tab>
-            <ias-tab id="Title_Status" label="Status">
-                <table class="details-table">
-                    <tbody>
-                    <tr ng-repeat="item in $ctrl.person.statusData">
-                        <td ng-bind="item.label"></td>
-                        <td ng-bind="item.value | dateFilter" ng-if="item.type==='timestamp'"></td>
-                        <td ng-bind="item.value" ng-if="item.type==='string' || item.type==='number'"></td>
-                        <td ng-bind="value" ng-if="item.type==='multiString'" ng-repeat="value in item.values"></td>
-                    </tr>
-                    </tbody>
-                </table>
-            </ias-tab>
-            <ias-tab ng-if="!!$ctrl.person.userHistory" id="Title_UserEventHistory" label="Password History">
-                <table class="details-table">
-                    <tbody>
-                    <tr ng-repeat="item in $ctrl.person.userHistory">
-                        <td ng-bind="item.timestamp | dateFilter"></td>
-                        <td ng-bind="item.label"></td>
-                    </tr>
-                    </tbody>
-                </table>
-            </ias-tab>
-            <ias-tab id="Title_PasswordPolicy" label="Password Policy">
-                <table class="details-table">
-                    <tbody>
-                    <tr>
-                        <td ng-bind="'Field_Policy' | translate"></td>
-                        <td ng-bind="$ctrl.person.passwordPolicyDN"></td>
-                    </tr>
-                    <tr>
-                        <td ng-bind="'Field_Profile' | translate"></td>
-                        <td ng-bind="$ctrl.person.passwordPolicyID"></td>
-                    </tr>
-                    <tr class="bottom-border">
-                        <td ng-bind="'Field_Display' | translate"></td>
-                        <td>
-                            <ul>
-                                <li ng-repeat="item in $ctrl.person.passwordRequirements" ng-bind="item"></li>
-                            </ul>
-                        </td>
-                    </tr>
-                    <tr ng-repeat="(key, item) in $ctrl.person.passwordPolicyRules">
-                        <td ng-bind="key"></td>
-                        <td ng-bind="item"></td>
-                    </tr>
-                    </tbody>
-                </table>
-            </ias-tab>
-            <ias-tab id="Title_SecurityResponses" label="Security Responses">
-                <table class="details-table">
-                    <tbody>
-                    <tr ng-repeat="item in $ctrl.person.helpdeskResponses">
-                        <td ng-bind="item.label"></td>
-                        <td ng-bind="item.value | dateFilter" ng-if="item.type==='timestamp'"></td>
-                        <td ng-bind="item.value" ng-if="item.type==='string' || item.type==='number'"></td>
-                        <td ng-bind="value" ng-if="item.type==='multiString'" ng-repeat="value in item.values"></td>
-                    </tr>
-                    </tbody>
-                </table>
-            </ias-tab>
-        </ias-tabset>
+        <div class="ias-tabset">
+            <div class="ias-tab" ias-toggle-active="ias-active" ias-toggle="profileTab">{{'Field_Profile' | translate}}</div>
+            <div class="ias-tab" ias-toggle-active="ias-active" ias-toggle="statusTab">{{'Title_Status' | translate}}</div>
+            <div class="ias-tab" ias-toggle-active="ias-active" ias-toggle="historyTab">{{'Title_UserEventHistory' | translate}}</div>
+            <div class="ias-tab" ias-toggle-active="ias-active" ias-toggle="passwordTab">{{'Title_PasswordPolicy' | translate}}</div>
+            <div class="ias-tab" ias-toggle-active="ias-active" ias-toggle="securityTab">{{'Title_SecurityResponses' | translate}}</div>
+        </div>
+
+        <ias-tab-pane toggle-group="detailsTabGroup" name="profileTab">
+            <table class="details-table">
+                <tbody>
+                <tr ng-repeat="item in $ctrl.person.profileData">
+                    <td ng-bind="item.label"></td>
+                    <td ng-bind="item.value | dateFilter" ng-if="item.type==='timestamp'"></td>
+                    <td ng-bind="item.value" ng-if="item.type==='string' || item.type==='number'"></td>
+                    <td ng-bind="value" ng-if="item.type==='multiString'" ng-repeat="value in item.values"></td>
+                </tr>
+                </tbody>
+            </table>
+        </ias-tab-pane>
+        <ias-tab-pane toggle-group="detailsTabGroup" name="statusTab">
+            <table class="details-table">
+                <tbody>
+                <tr ng-repeat="item in $ctrl.person.statusData">
+                    <td ng-bind="item.label"></td>
+                    <td ng-bind="item.value | dateFilter" ng-if="item.type==='timestamp'"></td>
+                    <td ng-bind="item.value" ng-if="item.type==='string' || item.type==='number'"></td>
+                    <td ng-bind="value" ng-if="item.type==='multiString'" ng-repeat="value in item.values"></td>
+                </tr>
+                </tbody>
+            </table>
+        </ias-tab-pane>
+        <ias-tab-pane toggle-group="detailsTabGroup" name="historyTab" ng-if="!!$ctrl.person.userHistory">
+            <table class="details-table">
+                <tbody>
+                <tr ng-repeat="item in $ctrl.person.userHistory">
+                    <td ng-bind="item.timestamp | dateFilter"></td>
+                    <td ng-bind="item.label"></td>
+                </tr>
+                </tbody>
+            </table>
+        </ias-tab-pane>
+        <ias-tab-pane toggle-group="detailsTabGroup" name="passwordTab">
+            <table class="details-table">
+                <tbody>
+                <tr>
+                    <td ng-bind="'Field_Policy' | translate"></td>
+                    <td ng-bind="$ctrl.person.passwordPolicyDN"></td>
+                </tr>
+                <tr>
+                    <td ng-bind="'Field_Profile' | translate"></td>
+                    <td ng-bind="$ctrl.person.passwordPolicyID"></td>
+                </tr>
+                <tr class="bottom-border">
+                    <td ng-bind="'Field_Display' | translate"></td>
+                    <td>
+                        <ul>
+                            <li ng-repeat="item in $ctrl.person.passwordRequirements" ng-bind="item"></li>
+                        </ul>
+                    </td>
+                </tr>
+                <tr ng-repeat="(key, item) in $ctrl.person.passwordPolicyRules">
+                    <td ng-bind="key"></td>
+                    <td ng-bind="item"></td>
+                </tr>
+                </tbody>
+            </table>
+        </ias-tab-pane>
+        <ias-tab-pane toggle-group="detailsTabGroup" name="securityTab">
+            <table class="details-table">
+                <tbody>
+                <tr ng-repeat="item in $ctrl.person.helpdeskResponses">
+                    <td ng-bind="item.label"></td>
+                    <td ng-bind="item.value | dateFilter" ng-if="item.type==='timestamp'"></td>
+                    <td ng-bind="item.value" ng-if="item.type==='string' || item.type==='number'"></td>
+                    <td ng-bind="value" ng-if="item.type==='multiString'" ng-repeat="value in item.values"></td>
+                </tr>
+                </tbody>
+            </table>
+        </ias-tab-pane>
     </div>
 
     <div class="help-desk-buttons">

client/src/i18n/translations_en.json

@@ -49,6 +49,7 @@
   "Title_Management": "Management",
   "Title_Organization": "Organization",
   "Title_OrgChart": "Organizational Chart",
+  "Title_PasswordPolicy": "Password Policy",
   "Title_PeopleSearch": "People Search",
   "Title_PeopleSearchCard": "People Search Cards",
   "Title_PeopleSearchTable": "People Search Table",

client/src/peoplesearch/orgchart-search.component.html

@@ -22,19 +22,13 @@
 
 <div class="ias-header">
     <h2 id="page-content-title" translate="Title_Organization">Organization</h2>
-    <ias-search-box id="input" ng-model="$ctrl.query" ng-model-options="{debounce: $ctrl.inputDebounce}"
-                    placeholder="{{'Placeholder_Search' | translate}}" auto-focus>
-    </ias-search-box>
-    <!--<mf-auto-complete search-text="$ctrl.query"-->
-                      <!--on-search-text-change="$ctrl.onSearchTextChange(value)"-->
-                      <!--search="$ctrl.autoCompleteSearch(query)"-->
-                      <!--input-debounce="$ctrl.inputDebounce"-->
-                      <!--item-selected="$ctrl.onAutoCompleteItemSelected(person)"-->
-                      <!--item="person">-->
-        <!--<content-template>-->
-            <!--<span ng-bind="person._displayName"></span>-->
-        <!--</content-template>-->
-    <!--</mf-auto-complete>-->
+    <ias-autocomplete placeholder="{{'Placeholder_Search' | translate}}"
+                      ias-debounce="$ctrl.inputDebounce"
+                      ias-items="person in $ctrl.autoCompleteSearch($query)"
+                      ias-on-item-selected="$ctrl.onAutoCompleteItemSelected($item)"
+                      ias-search-text="$ctrl.query">
+        <template><span ng-bind="person._displayName" class="single-line"></span></template>
+    </ias-autocomplete>
 
     <span class="ias-fill"></span>
 

client/src/peoplesearch/orgchart-search.component.ts

@@ -44,8 +44,7 @@ export default class OrgChartSearchComponent {
     query: string;
     searchTextLocalStorageKey: string;
 
-    static $inject = [ '$q',
-        '$scope',
+    static $inject = [
         '$state',
         '$stateParams',
         'ConfigService',
@@ -53,9 +52,7 @@ export default class OrgChartSearchComponent {
         'PeopleService',
         'PwmService'
     ];
-    constructor(private $q: IQService,
-                private $scope: IScope,
-                private $state: angular.ui.IStateService,
+    constructor(private $state: angular.ui.IStateService,
                 private $stateParams: angular.ui.IStateParamsService,
                 private configService: IPeopleSearchConfigService,
                 private localStorageService: LocalStorageService,
@@ -63,10 +60,6 @@ export default class OrgChartSearchComponent {
                 private pwmService: IPwmService) {
         this.searchTextLocalStorageKey = this.localStorageService.keys.SEARCH_TEXT;
         this.inputDebounce = this.pwmService.ajaxTypingWait;
-
-        $scope.$watch('$ctrl.query', () => {
-            this.onSearchTextChange();
-        });
     }
 
     $onInit(): void {
@@ -124,6 +117,7 @@ export default class OrgChartSearchComponent {
     }
 
     autoCompleteSearch(query: string): IPromise<IPerson[]> {
+        this.storeSearchText(query);
         return this.peopleService.autoComplete(query);
     }
 
@@ -132,14 +126,10 @@ export default class OrgChartSearchComponent {
     }
 
     onAutoCompleteItemSelected(person: IPerson): void {
+        this.storeSearchText(null);
         this.$state.go('orgchart.search', { personId: person.userKey, query: null });
     }
 
-    onSearchTextChange(): void {
-        // this.query = value;
-        this.storeSearchText();
-    }
-
     private fetchOrgChartData(personId): IPromise<IOrgChartData> {
         return this.peopleService.getOrgChartData(personId, true);
     }
@@ -157,7 +147,7 @@ export default class OrgChartSearchComponent {
         return param || this.localStorageService.getItem(this.searchTextLocalStorageKey);
     }
 
-    protected storeSearchText(): void {
-        this.localStorageService.setItem(this.searchTextLocalStorageKey, this.query || '');
+    protected storeSearchText(query): void {
+        this.localStorageService.setItem(this.searchTextLocalStorageKey, query || '');
     }
 }

client/src/peoplesearch/peoplesearch.scss

@@ -100,3 +100,9 @@ body {
     width: 1px;
   }
 }
+
+.single-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}