Added code to display the management chain

src/main/angular/src/orgchart/orgchart.component.html

@@ -1,48 +1,40 @@
-<div id="page-content-title">Organizational Chart</div>
+<div id="page-content-title">Organization</div>
 <div id="orgchart-close" ng-click="$ctrl.close()"></div>
 
 <div id="orgchart-content" class="ng-cloak">
     <div class="orgchart-primary-person-connector" class="ng-cloak"></div>
 
     <div class="orgchart-management-title orgchart-title">Management</div>
-    <div class="orgchart-management" >
-        <div class="orgchart-manager" ng-repeat="manager in $ctrl.person.managementChain">
+    <div class="orgchart-management" ng-if="$ctrl.managementChain.length" >
+        <div class="orgchart-manager" ng-repeat="manager in $ctrl.managementChain">
             <div class="orgchart-separator" ng-class="{first:$first,last:$last}"></div>
             <div class="orgchart-picture">
-                <img ng-src="{{ manager.pictureUrl }}" />
+                <img ng-src="{{ manager.photoUrl }}" />
             </div>
             <div class="orgchart-manager-fields">
-                <div class="orgchart-field orgchart-field-0">{{ manager.fields[0].value }}</div>
-                <div class="orgchart-field orgchart-field-1">{{ manager.fields[1].value }}</div>
+                <div class="orgchart-field orgchart-field-0">{{ manager.displayFields[0] }}</div>
+                <div class="orgchart-field orgchart-field-1">{{ manager.displayFields[1] }}</div>
             </div>
         </div>
     </div>
 
     <div class="orgchart-primary-person">
-        <img class="orgchart-picture" ng-src="{{ $ctrl.person.pictureUrl }}" />
-        <div class="orgchart-num-reports">{{ $ctrl.person.directReports.length }}</div>
+        <img class="orgchart-picture" ng-src="{{ $ctrl.primaryPerson.photoUrl }}" />
+        <div class="orgchart-num-reports" ng-if="$ctrl.directReports.length">{{ $ctrl.directReports.length }}</div>
 
-        <div class="orgchart-primary-field orgchart-field-0">{{ $ctrl.person.fields[0].value }}</div>
-        <div class="orgchart-primary-field orgchart-field orgchart-field-1">{{ $ctrl.person.fields[1].value }}</div>
-        <div class="orgchart-primary-field orgchart-field orgchart-field-2 link">{{ $ctrl.person.fields[2].value }}</div>
-        <div class="orgchart-secondary-field orgchart-field orgchart-field-3">
-            <div class="orgchard-field-name">{{ $ctrl.person.fields[3].name }}</div>
-            <div class="orgchard-field-value">{{ $ctrl.person.fields[3].value }}</div>
-        </div>
-        <div class="orgchart-secondary-field orgchart-field orgchart-field-4">
-            <div class="orgchard-field-name">{{ $ctrl.person.fields[4].name }}</div>
-            <div class="orgchard-field-value">{{ $ctrl.person.fields[4].value }}</div>
-        </div>
-        <div class="orgchart-secondary-field orgchart-field orgchart-field-5">
-            <div class="orgchard-field-name">{{ $ctrl.person.fields[5].name }}</div>
-            <div class="orgchard-field-value link">{{ $ctrl.person.fields[5].value }}</div>
-        </div>
+        <div class="orgchart-primary-field orgchart-field-0">{{ $ctrl.primaryPerson.displayFields[0] }}</div>
+        <div class="orgchart-primary-field orgchart-field orgchart-field-1">{{ $ctrl.primaryPerson.displayFields[1] }}</div>
+        <div class="orgchart-primary-field orgchart-field orgchart-field-2">{{ $ctrl.primaryPerson.displayFields[2] }}</div>
+        <div class="orgchart-primary-field orgchart-field orgchart-field-3">{{ $ctrl.primaryPerson.displayFields[3] }}</div>
+        <div class="orgchart-primary-field orgchart-field orgchart-field-4">{{ $ctrl.primaryPerson.displayFields[4] }}</div>
+        <div class="orgchart-primary-field orgchart-field orgchart-field-5">{{ $ctrl.primaryPerson.displayFields[5] }}</div>
+        <div class="orgchart-primary-field orgchart-field orgchart-field-6">{{ $ctrl.primaryPerson.displayFields[6] }}</div>
     </div>
 
     <div class="orgchart-direct-reports-title orgchart-title">Direct Reports</div>
-    <div class="orgchart-direct-reports person-card-list">
-        <div class="person-card" ng-repeat="directReport in $ctrl.person.directReports">
-            <div class="person-card-image"></div>
+    <div class="orgchart-direct-reports person-card-list" ng-if="$ctrl.directReports.length">
+        <div class="person-card" ng-repeat="directReport in $ctrl.directReports">
+            <div class="person-card-image"><img ng-src="{{ directReport.photoUrl }}" /></div>
             <div class="orgchart-num-reports" ng-if="directReport.numOfReports">{{ directReport.numOfReports }}</div>
             <div class="person-card-details">
                 <div class="person-card-row-1">{{ directReport.fields[0].value }}</div>
@@ -52,4 +44,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

src/main/angular/src/orgchart/orgchart.component.ts

@@ -1,25 +1,83 @@
+import { OrgChartService } from './orgchart.service';
+
 declare var PWM_GLOBAL: any; // Comes from PWM
 
+interface PersonInfo {
+    userKey: string;
+    photoUrl?: string;
+    displayFields?: string[];
+}
+
 export class OrgChartComponent {
     public templateUrl = PWM_GLOBAL['url-context'] + '/public/resources/app/orgchart/orgchart.component.html';
 
     public controller = class {
-        private person: any;
+        private primaryPerson: PersonInfo;
+        private managementChain: PersonInfo[] = [];
+        private directReports: PersonInfo[] = [];
 
-        static $inject = ['$state', 'orgChartService'];
-        public constructor(private $state, private orgChartService) {
+        static $inject = ['$state', '$stateParams', 'orgChartService'];
+        public constructor(private $state, private $stateParams, private orgChartService: OrgChartService) {
         }
 
         // Available controller life cycle methods are: $onInit, $onDestroy, $onChanges, $postLink
         public $onInit() {
-            this.orgChartService.getOrgChartData().then((response) => {
-                this.person = response.data.person;
+            console.log("Org chart person user key: " + this.$stateParams.userKey);
+
+            if (this.$stateParams.userKey) {
+                this.fetchPersonInfo(this.$stateParams.userKey, (data) => {
+                    this.setPrimaryPerson(data);
+                });
+            }
+        }
+
+        public $onDestroy() {
+        }
+
+        private setPrimaryPerson(data: any): void {
+            this.primaryPerson = {
+                userKey: data.userKey,
+                photoUrl: data.photoURL,
+                displayFields: data.displayNames
+            };
+
+            this.addManagerRecursive(data.orgChartParentKey);
+            this.addDirectReports(data.userKey);
+        }
+
+        private addManagerRecursive(managerKey: string) {
+            if (managerKey) {
+                let manager: PersonInfo = {
+                    userKey: managerKey
+                };
+
+                this.managementChain.push(manager);
+
+                this.fetchPersonInfo(managerKey, (data) => {
+                    manager.photoUrl = data.photoURL;
+                    manager.displayFields = data.displayNames;
+
+                    this.addManagerRecursive(data.orgChartParentKey);
+                });
+            }
+        }
+
+        private addDirectReports(userKey) {
+            console.log("Adding direct reports...");
+
+            this.orgChartService.getOrgChartData(userKey).then((response) => {
+                console.log("Fetched direct reports: " + response.data);
             }, (response => {
                 console.log(response.data);
             }));
         }
 
-        public $onDestroy() {
+        private fetchPersonInfo(userKey, callback) {
+            this.orgChartService.getUserData(userKey).then((response) => {
+                callback(response.data['data']);
+            }, (response => {
+                console.log(response.data);
+            }));
         }
 
         public close() {

src/main/angular/src/orgchart/orgchart.service.ts

@@ -1,11 +1,22 @@
+/// <reference types="angular" />
+
 declare var PWM_GLOBAL: any; // Comes from PWM
+declare var PWM_MAIN: any;
 
 export class OrgChartService {
     static $inject = ['$http'];
-    public constructor(private $http) {
+    public constructor(private $http: ng.IHttpService) {
+    }
+
+    public getOrgChartData(userKey: string) {
+        let url: string = PWM_GLOBAL['url-context'] + '/private/peoplesearch?processAction=orgChartData';
+        url = PWM_MAIN.addPwmFormIDtoURL(url);
+        return this.$http.post(url, { userKey: userKey, asParent: false });
     }
 
-    public getOrgChartData() {
-        return this.$http.get(PWM_GLOBAL['url-context'] + '/public/resources/app/orgchart/orgchart.data.json');
+    public getUserData(userKey: string) {
+        let url: string = PWM_GLOBAL['url-context'] + '/private/peoplesearch?processAction=detail';
+        url = PWM_MAIN.addPwmFormIDtoURL(url);
+        return this.$http.post(url, { userKey: userKey });
     }
 }

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

@@ -34,7 +34,7 @@ angular.module('PeopleSearchApp', ['ui.router'])
         $stateProvider.state({ name: 'search', url: '/search', component: 'peopleSearch' });
         $stateProvider.state({ name: 'search.table', url: '/table', component: 'peopleSearchTable' });
         $stateProvider.state({ name: 'search.cards', url: '/cards', component: 'peopleSearchCards' });
-        $stateProvider.state({ name: 'orgchart', url: '/orgchart', component: 'orgChart' });
+        $stateProvider.state({ name: 'orgchart', url: '/orgchart/{userKey}', component: 'orgChart' });
     }]);
 
 // Attach to the page document

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

@@ -3,8 +3,8 @@
         <div class="person-card-image"></div>
         <div class="person-card-details">
             <div class="person-card-row-1">{{ person.givenName }} {{ person.sn }}</div>
-            <div class="person-card-row-2">Data Analyst</div>
-            <div class="person-card-row-3">(123) 456-7890</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>

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

@@ -15,7 +15,7 @@
         <td>{{ person.sn }}</td>
         <td>{{ person.title }}</td>
         <td>{{ person.mail }}</td>
-        <td>{{ person.telephone }}</td>
+        <td>{{ person.telephoneNumber }}</td>
     </tr>
     </tbody>
 </table>

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

@@ -171,7 +171,7 @@ PWM_PS.applyEventHandlersToDetailView = function(data) {
 
     if (data['hasOrgChart']) {
         PWM_MAIN.addEventHandler('button-peoplesearch-orgChart', 'click', function () {
-            PWM_MAIN.goto(PWM_GLOBAL['url-context'] + '/private/peoplesearch#/orgchart');
+            PWM_MAIN.goto(PWM_GLOBAL['url-context'] + '/private/peoplesearch#/orgchart/' + data['userKey']);
             PWM_MAIN.clearDijitWidget('dialogPopup');
 //            PWM_PS.showOrgChartView(data['userKey']);
         });

src/main/webapp/public/resources/style.css

@@ -1220,6 +1220,7 @@ org-chart {
 }
 
 .orgchart-primary-person .orgchart-picture {
+    background: rgba(0, 0, 0, 0) url("UserPhoto.png") repeat scroll 0 0 / 65px 65px;
     height: 65px;
     left: 10px;
     position: absolute;