Implemented the search method for the production version of the PeopleService.

Also added a scripts for running the webpack dev server in production mode, and copying the results to the src/main/webapp/publc/resources/app folder, which is handy when running a local instance of PWM from the command:
$ mvn tomcat7:run -P developer.

Also hooked up the people search table and cards pages, so they properly display the results of the PeopleService search.

pom.xml

@@ -117,6 +117,9 @@
                 <groupId>org.apache.tomcat.maven</groupId>
                 <artifactId>tomcat7-maven-plugin</artifactId>
                 <version>2.2</version>
+                <configuration>
+                    <port>8081</port>
+                </configuration>
             </plugin>
             <plugin>
                 <groupId>org.apache.maven.plugins</groupId>

src/main/angular/package.json

@@ -8,11 +8,12 @@
     "npm": ">=3.9"
   },
   "scripts": {
-    "build": "node_modules/webpack/bin/webpack.js --config=webpack.build.js --NODE_ENV=production",
-    "clean": "node_modules/rimraf/bin.js dist/",
-    "test": "node_modules/karma/bin/karma start --NODE_ENV=test",
-    "test-single-run": "node_modules/karma/bin/karma start --NODE_ENV=test --singleRun --no-auto-watch",
-    "start": "node_modules/webpack-dev-server/bin/webpack-dev-server.js --config=webpack.dev.js --NODE_ENV=dev"
+    "build": "webpack --config=webpack.build.js --NODE_ENV=production",
+    "clean": "rimraf dist/",
+    "test": "karma start --NODE_ENV=test",
+    "test-single-run": "karma start --NODE_ENV=test --singleRun --no-auto-watch",
+    "start": "webpack-dev-server --config=webpack.dev.js --NODE_ENV=dev",
+    "sync": "concurrently \"webpack-dev-server --config=webpack.build.js --NODE_ENV=production\" \"cpx ./dist/*.js* ../webapp/public/resources/app -w -v\""
   },
   "author": "",
   "license": "ISC",
@@ -26,7 +27,9 @@
     "@types/node": "6.0.45",
     "angular": "1.5.8",
     "angular-mocks": "1.5.8",
+    "concurrently": "3.1.0",
     "copy-webpack-plugin": "3.0.1",
+    "cpx": "1.5.0",
     "css-loader": "0.25.0",
     "html-loader": "0.4.4",
     "html-webpack-plugin": "2.22.0",

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

@@ -4,6 +4,11 @@ export default class Person {
     orgChartParentKey: string;
     photoURL: string;
     userKey: string;
+    givenName: string;
+    sn: string;
+    title: string;
+    mail: string;
+    telephoneNumber: string;
 
     constructor(options: any) {
         this.detail = options.detail;
@@ -11,5 +16,10 @@ export default class Person {
         this.orgChartParentKey = options.orgChartParentKey;
         this.photoURL = options.photoURL;
         this.userKey = options.userKey;
+        this.givenName = options.givenName;
+        this.sn = options.sn;
+        this.title = options.title;
+        this.mail = options.mail;
+        this.telephoneNumber = options.telephoneNumber;
     }
 }

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

@@ -2,10 +2,10 @@
     <div class="person-card" ng-repeat="person in $ctrl.people" ng-click="$ctrl.selectPerson(person.userKey)">
         <div class="person-card-image"></div>
         <div class="person-card-details">
-            <div class="person-card-row-1">{{ person.detail.givenName.values[0] }} {{ person.detail.sn.values[0]  }}</div>
-            <div class="person-card-row-2">{{ person.detail.title.values[0] }}</div>
-            <div class="person-card-row-3">{{ person.detail.telephoneNumber.values[0] }}</div>
-            <div class="person-card-row-4">{{ person.detail.mail.values[0] }}</div>
+            <div class="person-card-row-1">{{ person.givenName }} {{ person.sn }}</div>
+            <div class="person-card-row-2">{{ person.title }}</div>
+            <div class="person-card-row-3">{{ person.telephoneNumber }}</div>
+            <div class="person-card-row-4">{{ person.mail }}</div>
         </div>
     </div>
 </div>

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

@@ -3,6 +3,7 @@ import { IScope } from 'angular';
 import PeopleSearchService from './peoplesearch.service';
 import Person from '../models/person.model';
 
+declare var PWM_PS: any;
 
 @Component({
     stylesheetUrl: require('peoplesearch/peoplesearch-cards.component.scss'),
@@ -34,4 +35,11 @@ export default class PeopleSearchCardsComponent {
     getPeople() {
         this.people = this.peopleSearchService.people;
     }
+
+    selectPerson(id: string) {
+        // this.$state.go('orgchart', { personId: id });
+
+        // TODO: This is here to temporarily pull up the old modal dialog:
+        PWM_PS.showUserDetail(id);
+    }
 }

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

@@ -10,11 +10,11 @@
     </thead>
     <tbody>
         <tr ng-repeat="person in $ctrl.people" ng-click="$ctrl.selectPerson(person.userKey)">
-            <td>{{ person.detail.givenName.values[0] }}</td>
-            <td>{{ person.detail.sn.values[0] }}</td>
-            <td>{{ person.detail.title.values[0] }}</td>
-            <td>{{ person.detail.mail.values[0] }}</td>
-            <td>{{ person.detail.telephoneNumber.values[0] }}</td>
+            <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

@@ -3,6 +3,7 @@ import { IScope } from 'angular';
 import PeopleSearchService from './peoplesearch.service';
 import Person from '../models/person.model';
 
+declare var PWM_PS: any;
 
 @Component({
     stylesheetUrl: require('peoplesearch/peoplesearch-table.component.scss'),
@@ -37,6 +38,9 @@ export default class PeopleSearchTableComponent {
     }
 
     selectPerson(id: string) {
-        this.$state.go('orgchart', { personId: id });
+        // this.$state.go('orgchart', { personId: id });
+
+        // TODO: This is here to temporarily pull up the old modal dialog:
+        PWM_PS.showUserDetail(id);
     }
 }

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

@@ -1,7 +1,9 @@
-import { IHttpPromise, IHttpService, IPromise } from 'angular';
+import { IHttpPromise, IHttpService, IPromise, IQService } from 'angular';
 import Person from '../models/person.model';
 
-// declare var PWM_GLOBAL: any; // Comes from PWM
+// These come from legacy PWM:
+declare var PWM_GLOBAL: any;
+declare var PWM_MAIN: any;
 
 export interface IPeopleService {
     getDirectReports(personId: string): IPromise<Person[]>;
@@ -12,13 +14,14 @@ export interface IPeopleService {
 }
 
 export default class PeopleService implements IPeopleService {
-    static $inject = ['$http'];
-    constructor(private $http: IHttpService) {
+    static $inject = ['$http', '$q'];
+    constructor(private $http: IHttpService, private $q: IQService) {
     }
 
     getDirectReports(id: string): angular.IPromise<Person[]> {
         return undefined;
     }
+
     getManagementChain(id: string): angular.IPromise<Person[]> {
         return undefined;
     }
@@ -32,6 +35,25 @@ export default class PeopleService implements IPeopleService {
     }
 
     search(query: string): angular.IPromise<Person[]> {
-        return undefined;
+        let deferred = this.$q.defer();
+
+        let url: string = PWM_GLOBAL['url-context'] + '/private/peoplesearch?processAction=search';
+        url = PWM_MAIN.addPwmFormIDtoURL(url);
+
+        this.$http.post(url, {
+            username: query
+        }).then((response) => {
+            let people: Person[] = [];
+
+            for (let searchResult of response['data']['data']['searchResults']) {
+                people.push(new Person(searchResult));
+            }
+
+            deferred.resolve(people);
+        }).catch((result) => {
+            deferred.reject(result);
+        });
+
+        return deferred.promise;
     }
 }

src/main/angular/webpack.common.js

@@ -1,5 +1,6 @@
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
+var WriteFileWebpackPlugin = require('write-file-webpack-plugin');
 var autoPrefixer = require('autoprefixer');
 var path = require('path');
 var webpack = require('webpack');
@@ -65,7 +66,11 @@ module.exports = {
         new HtmlWebpackPlugin({
             template: 'index.html',
             inject: 'body'
-        })
+        }),
+
+        // Because we copy the output to another directory, we need file system watch support.
+        // Webpack-dev-server does not do this without the plugin.
+        new WriteFileWebpackPlugin()
     ],
     postcss: function() {
         return [

src/main/angular/webpack.dev.js

@@ -12,10 +12,5 @@ module.exports = webpackMerge(commonConfig, {
     },
     entry: {
         'peoplesearch.ng': './src/main.dev'
-    },
-    plugins: [
-        // Because we copy the output to another directory, we need file system watch support.
-        // Webpack-dev-server does not do this without the plugin.
-        new WriteFileWebpackPlugin()
-    ]
+    }
 });

src/main/webapp/public/resources/js/peoplesearch.js

@@ -107,12 +107,12 @@ PWM_PS.convertDetailResultToHtml = function(data) {
 
     htmlBody += '<div id="peopleSearch-userDetailWrapper">';
 
-    if (data['hasOrgChart']) {
+//    if (data['hasOrgChart']) {
         htmlBody += '<div style="text-align: center"><button class="btn" id="button-peoplesearch-orgChart">'
             + '<span class="btn-icon pwm-icon pwm-icon-sitemap"></span>'
             + PWM_MAIN.showString('Title_OrgChart')
             + '</div>';
-    }
+//    }
 
     htmlBody += '<table class="peopleSearch-userDetails">';
     for (var iter in data['detail']) {
@@ -169,13 +169,14 @@ PWM_PS.applyEventHandlersToDetailView = function(data) {
         PWM_PS.loadPicture(photoDiv,photoURL,'img-peoplesearch-userDetailPhoto');
     }
 
-    if (data['hasOrgChart']) {
+//  TODO: need to get this setting from: /peoplesearch?processAction=clientData, see line 426
+//    if (data['hasOrgChart']) {
         PWM_MAIN.addEventHandler('button-peoplesearch-orgChart', 'click', function () {
             PWM_MAIN.goto(PWM_GLOBAL['url-context'] + '/private/peoplesearch#/orgchart/' + data['userKey']);
             PWM_MAIN.clearDijitWidget('dialogPopup');
 //            PWM_PS.showOrgChartView(data['userKey']);
         });
-    }
+//    }
 
 
     for (var iter in data['detail']) {
@@ -441,21 +442,21 @@ PWM_PS.initPeopleSearchPage = function() {
                     console.log('error reading username field from sessionStorage: ' + e);
                 }
 
-                PWM_MAIN.addEventHandler('username', "keyup, input", function () {
-                    try {
-                        var fieldUsername = PWM_MAIN.getObject('username').value;
-                        PWM_MAIN.Preferences.writeSessionStorage("peoplesearch_field_username", fieldUsername);
-                    } catch (e) {
-                        console.log('error writing username field from sessionStorage: ' + e);
-                    }
-
-                    PWM_PS.processPeopleSearch();
-                });
-                if (PWM_MAIN.getObject('username')) {
-                    if (PWM_MAIN.getObject('username').value && PWM_MAIN.getObject('username').value.length > 0) {
-                        PWM_PS.processPeopleSearch();
-                    }
-                }
+//                PWM_MAIN.addEventHandler('username', "keyup, input", function () {
+//                    try {
+//                        var fieldUsername = PWM_MAIN.getObject('username').value;
+//                        PWM_MAIN.Preferences.writeSessionStorage("peoplesearch_field_username", fieldUsername);
+//                    } catch (e) {
+//                        console.log('error writing username field from sessionStorage: ' + e);
+//                    }
+//
+//                    PWM_PS.processPeopleSearch();
+//                });
+//                if (PWM_MAIN.getObject('username')) {
+//                    if (PWM_MAIN.getObject('username').value && PWM_MAIN.getObject('username').value.length > 0) {
+//                        PWM_PS.processPeopleSearch();
+//                    }
+//                }
             });
         },{method:"GET"});
     }