LPXXX Angular Permission group tree admin UI

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/server/perm-group-tree.component.html b/Open-ILS/src/eg2/src/app/staff/admin/server/perm-group-tree.component.html
index 8e2de54..c3c6ec8 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/server/perm-group-tree.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/admin/server/perm-group-tree.component.html
@@ -43,6 +43,13 @@
       <div class="alert alert-info font-italic" i18n>
         Select a permission group from the tree on the left.
       </div>
+      <ng-container *ngIf="loading">
+          <div class="row">
+            <div class="col-lg-6">
+              <eg-progress-inline></eg-progress-inline>
+            </div>
+          </div>
+        </ng-container>
     </ng-container>
     <div *ngIf="selected" class="common-form striped-even">
       <ngb-tabset>

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/server/perm-group-tree.component.ts b/Open-ILS/src/eg2/src/app/staff/admin/server/perm-group-tree.component.ts
index cef9da4..4a3d795 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/server/perm-group-tree.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/admin/server/perm-group-tree.component.ts
@@ -1,4 +1,5 @@
 import {Component, ViewChild, OnInit} from '@angular/core';
+import {map} from 'rxjs/operators';
 import {Tree, TreeNode} from '@eg/share/tree/tree';
 import {IdlService, IdlObject} from '@eg/core/idl.service';
 import {OrgService} from '@eg/core/org.service';
@@ -26,6 +27,9 @@ export class PermGroupTreeComponent implements OnInit {
     permMaps: IdlObject[];
     orgDepths: ComboboxEntry[];
 
+    // Have to fetch quite a bit of data for this UI.
+    loading: boolean;
+
     @ViewChild('editDialog') editDialog: FmRecordEditorComponent;
     @ViewChild('delConfirm') delConfirm: ConfirmDialogComponent;
     @ViewChild('successString') successString: StringComponent;
@@ -50,10 +54,14 @@ export class PermGroupTreeComponent implements OnInit {
     }
 
 
-    ngOnInit() {
-        this.loadPgtTree();
-        this.loadPermMaps();
+    async ngOnInit() {
+        this.loading = true;
+        await this.loadPgtTree();
+        await this.loadPermissions();
+        await this.loadPermMaps();
         this.setOrgDepths();
+        this.loading = false;
+        return Promise.resolve();
     }
 
     setOrgDepths() {
@@ -65,7 +73,7 @@ export class PermGroupTreeComponent implements OnInit {
             }
         });
 
-        this.orgDepths = depths2.sort().map(d => ({id: d, label: d}));
+        this.orgDepths = depths2.sort().map(d => ({id: d, label: '' + d}));
     }
 
     groupPermMaps(): IdlObject[] {
@@ -79,29 +87,31 @@ export class PermGroupTreeComponent implements OnInit {
             m1.perm().code() < m2.perm().code() ? -1 : 1);
     }
 
-    loadPgtTree() {
+    async loadPgtTree(): Promise<any> {
 
-        this.pcrud.search('pgt', {parent: null},
+        return this.pcrud.search('pgt', {parent: null},
             {flesh: -1, flesh_fields: {pgt: ['children']}}
-        ).subscribe(pgtTree => this.ingestPgtTree(pgtTree));
+        ).pipe(map(pgtTree => this.ingestPgtTree(pgtTree))).toPromise();
+    }
 
+    async loadPermissions(): Promise<any> {
         // ComboboxEntry's for perms uses code() for id instead of
         // the database ID, because the application_perm field on
         // "pgt" is text instead of a link.  So the value it expects
         // is the code, not the ID.
-        this.pcrud.retrieveAll('ppl', {order_by: {ppl: ['name']}})
-        .subscribe(perm => {
+        return this.pcrud.retrieveAll('ppl', {order_by: {ppl: ['name']}})
+        .pipe(map(perm => {
             this.permissions.push(perm);
             this.permEntries.push({id: perm.code(), label: perm.code()})
             this.permissions.forEach(perm => this.permIdMap[+perm.id()] = perm)
-        });
+        })).toPromise();
     }
 
-    loadPermMaps() {
+    async loadPermMaps(): Promise<any> {
         this.permMaps = [];
-        this.pcrud.retrieveAll('pgpm', {},
+        return this.pcrud.retrieveAll('pgpm', {},
             {fleshSelectors: true, authoritative: true})
-        .subscribe(map => this.permMaps.push(map));
+        .pipe(map((map => this.permMaps.push(map)))).toPromise();
     }
 
     fmEditorOptions(): {[fieldName: string]: FmFieldOptions} {
@@ -167,9 +177,17 @@ export class PermGroupTreeComponent implements OnInit {
     }
 
 
-
     nodeClicked($event: any) {
         this.selected = $event;
+
+        // When the user selects a different perm tree node,
+        // reset the edit state for our perm maps.
+
+        this.permMaps.forEach(m => {
+            m.isnew(false);
+            m.ischanged(false);
+            m.isdeleted(false);
+        })
     }
 
     edit() {