People search components integrated with PeopleService

src/main/angular/src/component.ts

@@ -1,6 +1,7 @@
 import * as angular from 'angular';
 
 export function Component(options: {
+    bindings?: any,
     controllerAs?: string,
     template?: string,
     templateUrl?: string,

src/main/angular/src/models/person.model.ts

@@ -1,29 +1,13 @@
 export default class Person {
-    directReports: Person[];
-    fields: string[];
-    givenName: string;
-    mail: string;
-    managementChain: Person[];
-    numOfReports: number;
-    orgChartParentKey: string;
-    photoUrl: string;
-    sn: string;
-    telephoneNumber: string;
-    title: string;
     userKey: string;
+    photoUrl: string;
+    orgChartParentKey: string;
+    fields: any[];
 
     constructor(options: any) {
-        this.directReports = options.directReports;
         this.fields = options.fields;
-        this.givenName = options.givenName;
-        this.mail = options.mail;
-        this.managementChain = options.managementChain;
-        this.numOfReports = options.numOfReports;
         this.orgChartParentKey = options.orgChartParentKey;
         this.photoUrl = options.photoUrl;
-        this.sn = options.sn;
-        this.telephoneNumber = options.telephoneNumber;
-        this.title = options.title;
         this.userKey = options.userKey;
     }
 }

src/main/angular/src/peoplesearch/peoplesearch-cards.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '../component';
+import { IScope } from 'angular';
 import PeopleSearchService from './peoplesearch.service';
 import Person from '../models/person.model';
 
@@ -8,23 +9,29 @@ var templateUrl = require('peoplesearch/peoplesearch-cards.component.html');
     templateUrl: templateUrl
 })
 export default class PeopleSearchCardsComponent {
+    private deregistrationCallback: () => void;
     people: Person[];
 
-    static $inject = ['$scope', 'peopleSearchService'];
-    public constructor(
-        private $scope: angular.IScope,
+    static $inject = [ '$scope', 'PeopleSearchService' ];
+    constructor(
+        private $scope: IScope,
         private peopleSearchService: PeopleSearchService) {
     }
 
-    public $onInit() {
-        // this.peopleSearchService.subscribe(this.$scope, (event, data) => this.dataChanged(data) );
+    $onInit() {
+        this.getPeople();
+
+        var self = this;
+        this.deregistrationCallback = this.$scope.$on('people-updated', () => {
+            self.getPeople();
+        });
     }
 
-    // public dataChanged(data) {
-    //     this.people = data;
-    // }
+    $onDestroy() {
+        this.deregistrationCallback();
+    }
 
-    // public selectPerson(id: string) {
-    //     // PWM_PS.showUserDetail(userKey);
-    // }
+    getPeople() {
+        this.people = this.peopleSearchService.people;
+    }
 }

src/main/angular/src/peoplesearch/peoplesearch-table.component.html

@@ -1,21 +1,20 @@
 <table st-table="rowCollection" class="table table-striped">
     <thead>
-    <tr>
-        <th>First Name</th>
-        <th>Last Name</th>
-        <th>Title</th>
-        <th>Email</th>
-        <th>Telephone</th>
-    </tr>
+        <tr>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Title</th>
+            <th>Email</th>
+            <th>Telephone</th>
+        </tr>
     </thead>
-
     <tbody>
-    <tr ng-repeat="person in $ctrl.data" ng-click="$ctrl.selectPerson(person.id)">
-        <td>{{ person.givenName }}</td>
-        <td>{{ person.sn }}</td>
-        <td>{{ person.title }}</td>
-        <td>{{ person.mail }}</td>
-        <td>{{ person.telephoneNumber }}</td>
-    </tr>
+        <tr ng-repeat="person in $ctrl.people" ng-click="$ctrl.selectPerson(person.id)">
+            <td>{{ person.givenName }}</td>
+            <td>{{ person.sn }}</td>
+            <td>{{ person.title }}</td>
+            <td>{{ person.mail }}</td>
+            <td>{{ person.telephoneNumber }}</td>
+        </tr>
     </tbody>
 </table>

src/main/angular/src/peoplesearch/peoplesearch-table.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '../component';
+import { IScope } from 'angular';
 import PeopleSearchService from './peoplesearch.service';
 import Person from '../models/person.model';
 
@@ -8,23 +9,29 @@ var templateUrl = require('peoplesearch/peoplesearch-table.component.html');
     templateUrl: templateUrl
 })
 export default class PeopleSearchTableComponent {
+    private deregistrationCallback: () => void;
     people: Person[];
 
-    static $inject = ['$scope', 'peopleSearchService'];
-    public constructor(
-        private $scope: angular.IScope,
+    static $inject = [ '$scope', 'PeopleSearchService' ];
+    constructor(
+        private $scope: IScope,
         private peopleSearchService: PeopleSearchService) {
     }
 
-    public $onInit() {
-        // this.peopleSearchService.subscribe(this.$scope, (event, data) => this.dataChanged(data));
+    $onInit() {
+        this.getPeople();
+
+        var self = this;
+        this.deregistrationCallback = this.$scope.$on('people-updated', () => {
+            self.getPeople();
+        });
+    }
+
+    $onDestroy() {
+        this.deregistrationCallback();
     }
 
-    // private dataChanged(data) {
-    //     this.people = data;
-    // }
-    //
-    // public selectPerson(id: string) {
-    //     // PWM_PS.showUserDetail(userKey);
-    // }
+    getPeople() {
+        this.people = this.peopleSearchService.people;
+    }
 }

src/main/angular/src/peoplesearch/peoplesearch.component.html

@@ -1,7 +1,8 @@
 <div id="page-content-title">People Search</div>
 
 <div id="panel-searchbar" class="searchbar">
-    <input id="username" name="username" placeholder="Search" class="peoplesearch-input-username" autocomplete="off" /> <!-- Auto focus this control -->
+    <input id="username" name="username" placeholder="Search" class="peoplesearch-input-username"
+           autocomplete="off" ng-model="$ctrl.query" /> <!-- Auto focus this control -->
     <div class="searchbar-extras">
         <div id="searchIndicator" style="display: none">
             <span style="" class="pwm-icon pwm-icon-lg pwm-icon-spin pwm-icon-spinner"></span>

src/main/angular/src/peoplesearch/peoplesearch.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '../component';
+import { IScope } from 'angular';
+import PeopleSearchService from './peoplesearch.service';
 
 var templateUrl = require('peoplesearch/peoplesearch.component.html');
 var stylesheetUrl = require('peoplesearch/peoplesearch.component.scss');
@@ -8,27 +10,36 @@ var stylesheetUrl = require('peoplesearch/peoplesearch.component.scss');
     stylesheetUrl: stylesheetUrl
 })
 export default class PeopleSearchComponent {
+    query: string;
     viewToggleClass: string;
 
-    static $inject = ['$state'];
-    public constructor(private $state: angular.ui.IStateService) {
+    static $inject = ['$scope', '$state', 'PeopleSearchService'];
+    constructor(
+        private $scope: IScope,
+        private $state: angular.ui.IStateService,
+        private peopleSearchService: PeopleSearchService) {
     }
 
-    public $onInit() {
-        if (this.$state.is('search.table')) {
-            this.viewToggleClass = 'fa fa-th-large';
-        } else {
-            this.viewToggleClass = 'fa fa-list-alt';
-        }
+    $onInit() {
+        this.setViewToggleClass();
+
+        this.$scope.$watch('$ctrl.query', (newValue: string, oldValue: string) => {
+            this.peopleSearchService.search(newValue);
+        });
+    }
+
+    private setViewToggleClass() {
+        this.viewToggleClass = this.$state.is('search.table') ? 'fa fa-th-large' : 'fa fa-list-alt';
     }
 
     private viewToggleClicked() {
+        this.setViewToggleClass();
+
         if (this.$state.is('search.table')) {
             this.$state.go('search.cards');
-            this.viewToggleClass = 'fa fa-list-alt';
-        } else {
+        }
+        else {
             this.$state.go('search.table');
-            this.viewToggleClass = 'fa fa-th-large';
         }
     }
 }

src/main/angular/src/peoplesearch/peoplesearch.module.ts

@@ -7,7 +7,7 @@ import PeopleSearchCardsComponent from './peoplesearch-cards.component';
 var moduleName = 'people-search';
 
 module(moduleName, [ ])
-    .service('peopleSearchService', PeopleSearchService)
+    .service('PeopleSearchService', PeopleSearchService)
     .component('peopleSearch', PeopleSearchComponent)
     .component('peopleSearchTable', PeopleSearchTableComponent)
     .component('peopleSearchCards', PeopleSearchCardsComponent);

src/main/angular/src/peoplesearch/peoplesearch.service.ts

@@ -1,28 +1,37 @@
 import Person from '../models/person.model';
+import { IPeopleService } from '../services/people.service';
+import { IRootScopeService } from 'angular';
+import * as angular from 'angular';
 
 export default class PeopleSearchService {
-    private people: Person[];
+    people: Person[];
 
-    static $inject = ['$rootScope', '$timeout'];
-    public constructor(private $rootScope, private $timeout) {
+    static $inject = ['$rootScope', 'PeopleService'];
+    public constructor(private $rootScope: IRootScopeService, private peopleService: IPeopleService) {
+        this.people = [];
     }
 
-    // public subscribe(subscribersScope, callback) {
-    //     var deregistrationCallback = this.$rootScope.$on('peoplesearch-data-changed', callback);
-    //     subscribersScope.$on('$destroy', deregistrationCallback);
-    //
-    //     if (this.people) {
-    //         this.$timeout(() => this.notifyPeoplesearchDataChangedListeners(this.people));
-    //     }
-    // }
-    //
-    // private notifyPeoplesearchDataChangedListeners(data: any) {
-    //     this.$rootScope.$emit('peoplesearch-data-changed', data);
-    //     this.$rootScope.$apply();
-    // }
-    //
-    // public updateData(data: any) {
-    //     this.people = data;
-    //     this.notifyPeoplesearchDataChangedListeners(data);
-    // }
+    search(query: string) {
+        if (angular.isString(query)) {
+            this.peopleService.search(query)
+                .then((people: Person[]) => {
+                    this.setPeople(people);
+                })
+                .catch((result) => {
+                    console.log(result);
+                });
+        }
+        else {
+            this.setPeople([]);
+        }
+    }
+
+    notify() {
+        this.$rootScope.$broadcast('people-updated');
+    }
+
+    setPeople(people: Person[]) {
+        this.people = people;
+        this.notify();
+    }
 }

src/main/angular/src/services/people.data.json

@@ -1,6 +1,6 @@
 [
   {
-    "userKey": 1,
+    "userKey": "1",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 3,
     "fields": [
@@ -37,13 +37,13 @@
         "value": "Debra McCarthy",
         "type": "person-link",
         "typeMetaData": {
-          "userKey": 3
+          "userKey": "3"
         }
       }
     ]
   },
   {
-    "userKey": 3,
+    "userKey": "3",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": null,
     "fields": [
@@ -59,7 +59,7 @@
     ]
   },
   {
-    "userKey": 4,
+    "userKey": "4",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 3,
     "fields": [
@@ -75,7 +75,7 @@
     ]
   },
   {
-    "userKey": 5,
+    "userKey": "5",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 3,
     "fields": [
@@ -91,7 +91,7 @@
     ]
   },
   {
-    "userKey": 6,
+    "userKey": "6",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 3,
     "fields": [
@@ -107,7 +107,7 @@
     ]
   },
   {
-    "userKey": 7,
+    "userKey": "7",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 3,
     "fields": [
@@ -123,7 +123,7 @@
     ]
   },
   {
-    "userKey": 8,
+    "userKey": "8",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 3,
     "fields": [
@@ -149,7 +149,7 @@
     ]
   },
   {
-    "userKey": 9,
+    "userKey": "9",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 3,
     "fields": [
@@ -175,7 +175,7 @@
     ]
   },
   {
-    "userKey": 10,
+    "userKey": "10",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 3,
     "fields": [
@@ -201,7 +201,7 @@
     ]
   },
   {
-    "userKey": 11,
+    "userKey": "11",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 1,
     "fields": [
@@ -227,7 +227,7 @@
     ]
   },
   {
-    "userKey": 12,
+    "userKey": "12",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 1,
     "fields": [
@@ -253,7 +253,7 @@
     ]
   },
   {
-    "userKey": 13,
+    "userKey": "13",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 1,
     "fields": [
@@ -279,7 +279,7 @@
     ]
   },
   {
-    "userKey": 14,
+    "userKey": "14",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 1,
     "fields": [
@@ -305,7 +305,7 @@
     ]
   },
   {
-    "userKey": 15,
+    "userKey": "15",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 1,
     "fields": [
@@ -331,7 +331,7 @@
     ]
   },
   {
-    "userKey": 16,
+    "userKey": "16",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 1,
     "fields": [
@@ -357,7 +357,7 @@
     ]
   },
   {
-    "userKey": 17,
+    "userKey": "17",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 12,
     "fields": [
@@ -383,7 +383,7 @@
     ]
   },
   {
-    "userKey": 18,
+    "userKey": "18",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 12,
     "fields": [
@@ -409,7 +409,7 @@
     ]
   },
   {
-    "userKey": 19,
+    "userKey": "19",
     "photoUrl": "http://localhost:8080/pwm/public/resources/UserPhoto.png",
     "orgChartParentKey": 12,
     "fields": [

src/main/angular/src/services/people.service.dev.ts

@@ -64,6 +64,18 @@ export default class PeopleService implements IPeopleService {
         return deferred.promise;
     }
 
+    search(query: string): angular.IPromise<Person[]> {
+        var deferred = this.$q.defer<Person[]>();
+        var self = this;
+        this.$timeout(() => {
+            var people = self.people.filter((person: Person) => person.userKey.toLowerCase().indexOf(query) === 0 );
+
+            deferred.resolve(people);
+        });
+
+        return deferred.promise;
+    }
+
     private findPerson(id: string): Person {
         var people = this.people.filter((person: Person) => person.userKey == id);
 

src/main/angular/src/services/people.service.ts

@@ -7,13 +7,13 @@ export interface IPeopleService {
     getDirectReports(personId: string): IPromise<Person[]>;
     getManagementChain(personId: string): IPromise<Person[]>;
     getPerson(id: string): IPromise<Person>;
+    search(query: string): IPromise<Person[]>;
 }
 
 export default class PeopleService implements IPeopleService {
     static $inject = ['$http'];
     constructor(private $http: IHttpService) {
     }
-
     getDirectReports(id: string): angular.IPromise<Person[]> {
         return undefined;
     }
@@ -25,4 +25,8 @@ export default class PeopleService implements IPeopleService {
     getPerson(id: string): IHttpPromise<Person> {
         return undefined;
     }
+
+    search(query: string): angular.IPromise<Person[]> {
+        return undefined;
+    }
 }