From 09600011c9458d098a944a9a79745723bebb9bb5 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Mon, 8 Apr 2019 16:07:15 -0400
Subject: [PATCH] LPXXX Angular Permission group tree admin UI

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../app/staff/admin/server/admin-server.module.ts  | 10 ++-
 .../admin/server/perm-group-tree.component.html    | 77 +++++++++++++++-------
 .../admin/server/perm-group-tree.component.ts      | 75 +++++++++++++++++----
 3 files changed, 126 insertions(+), 36 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/server/admin-server.module.ts b/Open-ILS/src/eg2/src/app/staff/admin/server/admin-server.module.ts
index db8767d8d1..c3ed21997f 100644
--- a/Open-ILS/src/eg2/src/app/staff/admin/server/admin-server.module.ts
+++ b/Open-ILS/src/eg2/src/app/staff/admin/server/admin-server.module.ts
@@ -1,17 +1,23 @@
 import {NgModule} from '@angular/core';
 import {TreeModule} from '@eg/share/tree/tree.module';
-import {StaffCommonModule} from '@eg/staff/common.module';
 import {AdminServerRoutingModule} from './routing.module';
 import {AdminCommonModule} from '@eg/staff/admin/common.module';
 import {AdminServerSplashComponent} from './admin-server-splash.component';
 import {OrgUnitTypeComponent} from './org-unit-type.component';
 import {PermGroupTreeComponent} from './perm-group-tree.component';
+import {PermGroupMapDialogComponent} from './perm-group-map-dialog.component'
+
+/* As it stands, all components defined under admin/server are
+imported / declared in the admin/server base module.  This could
+cause the module to baloon in size.  Consider moving non-auto-
+generated UI's into lazy-loadable sub-mobules. */
 
 @NgModule({
   declarations: [
       AdminServerSplashComponent,
       OrgUnitTypeComponent,
-      PermGroupTreeComponent
+      PermGroupTreeComponent,
+      PermGroupMapDialogComponent
   ],
   imports: [
     AdminCommonModule,
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 fad125628f..8e2de548fe 100644
--- 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
@@ -1,25 +1,37 @@
 <eg-staff-banner bannerText="Permission Group Configuration" i18n-bannerText>
 </eg-staff-banner>
 
-<ng-template #editStrTmpl i18n>Permission Group Update Succeeded</ng-template>
-<eg-string #editString [template]="editStrTmpl"></eg-string>
+<eg-string #createString i18n-text text="Permission Group Mapping Added">
+</eg-string>
+<eg-string #successString i18n-text text="Permission Group Update Succeeded">
+</eg-string>
+<eg-string #errorString i18n-text text="Permission Group Update Failed">
+</eg-string>
 
-<ng-template #createStrTmpl i18n>Permission Group Succeessfully Created</ng-template>
-<eg-string #createString [template]="createStrTmpl"></eg-string>
-
-<ng-template #errorStrTmpl i18n>Permission Group Update Failed</ng-template>
-<eg-string #errorString [template]="errorStrTmpl"></eg-string>
-
-<eg-confirm-dialog #delConfirm 
-  i18n-dialogTitle i18n-dialogBody
-  dialogTitle="Confirm Delete"
-  dialogBody="Delete Permission Group {{selected ? selected.label : ''}}?">
-</eg-confirm-dialog>
+<eg-string #createMapString i18n-text text="Permission Group Mapping Added">
+</eg-string>
+<eg-string #successMapString i18n-text text="Permission Group Mapping Update Succeeded">
+  </eg-string>
+<eg-string #errorMapString i18n-text text="Permission Group Mapping Update Failed">
+</eg-string>
 
 <eg-fm-record-editor #editDialog idlClass="pgt" readonlyFields="parent"
    [fieldOptions]="fmEditorOptions()">
 </eg-fm-record-editor>
 
+<eg-confirm-dialog #delConfirm                                                 
+  i18n-dialogTitle i18n-dialogBody                                             
+  dialogTitle="Confirm Delete"                                                 
+  dialogBody="Delete Permission Group {{selected ? selected.label : ''}}?">    
+</eg-confirm-dialog>
+
+
+<eg-perm-group-map-dialog #addMappingDialog 
+  [permGroup]="selected ? selected.callerData : null"
+  [orgDepths]="orgDepths"
+  [permMaps]="groupPermMaps()" [permissions]="permissions">
+</eg-perm-group-map-dialog>
+
 <div class="row">
   <div class="col-lg-3">
     <h3 i18n>Permission Groups</h3>
@@ -99,22 +111,35 @@
         </ngb-tab>
         <ngb-tab title="Group Permissions" i18n-title id="perm">
           <ng-template ngbTabContent>
+
+            <div class="row d-flex m-2 mb-3">
+              <button class="btn btn-success" (click)="applyChanges()" i18n
+                [disabled]='!changesPending()'>
+                Apply Changes
+              </button>
+              <button class="btn btn-info ml-3" (click)="openAddDialog()" i18n>
+                Add New Mapping
+              </button>
+            </div>
             
             <div class="row font-weight-bold">
               <div class="col-lg-5" i18n>Permissions</div>
               <div class="col-lg-4" i18n>Group</div>
               <div class="col-lg-1" i18n>Depth</div>
               <div class="col-lg-1" i18n>Grantable?</div>
-              <div class="col-lg-1" i18n>Select</div>
+              <div class="col-lg-1" i18n>Delete?</div>
             </div>
 
             <div class="row" *ngFor="let map of groupPermMaps()">
-              <div class="col-lg-5">{{map.perm().code()}}</div>
+              <div class="col-lg-5">
+                <span title="{{map.perm().description()}}">{{map.perm().code()}}</span>
+              </div>
               <div class="col-lg-4">{{map.grp().name()}}</div>
               <ng-container *ngIf="permIsInherited(map); else nativeMap">
                 <div class="col-lg-1 text-center">{{map.depth()}}</div>
                 <!-- TODO migrate to <eg-bool/> once merged-->
                 <div class="col-lg-1">{{map.grantable() == 't'}}</div>
+                <div class="col-lg-1"> </div>
               </ng-container>
               <ng-template #nativeMap>
                 <div class="col-lg-1">
@@ -122,15 +147,21 @@
                     (onChange)="map.depth($event ? $event.id : null); map.ischanged(true)">
                   </eg-combobox>
                 </div>
-                <div class="col-lg-1">
-                  <input type="checkbox"
-                    [ngModel]="map.grantable() == 't'"
-                    (ngModelChange)="map.grantable($event ? 't' : 'f')"/>
+                <div class="col-lg-1 d-flex flex-column justify-content-center">
+                  <div class="d-flex justify-content-center p-3 rounded bg-info">                
+                    <input type="checkbox" class="align-middle"
+                      i18n-title title="Grantable?"
+                      [ngModel]="map.grantable() == 't'"
+                      (ngModelChange)="map.grantable($event ? 't' : 'f'); map.ischanged(true)"/>
+                  </div>
                 </div>
-                <div class="col-lg-1">
-                  <button class="btn btn-warning" (click)="deleteMap(map)" i18n>
-                    Delete
-                  </button>
+                <div class="col-lg-1 d-flex flex-column justify-content-center">
+                  <div class="d-flex justify-content-center p-3 rounded bg-danger">
+                    <input type="checkbox" class="align-middle"
+                      i18n-title title="Delete Mapping"
+                      [ngModel]="map.isdeleted()"
+                      (ngModelChange)="map.isdeleted($event)"/>
+                  </div>
                 </div>
               </ng-template>
             </div>
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 4151d8a6cd..cef9da49f2 100644
--- 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,5 +1,4 @@
-import {Component, Input, ViewChild, OnInit} from '@angular/core';
-import {Observable, from} from 'rxjs';
+import {Component, ViewChild, OnInit} from '@angular/core';
 import {Tree, TreeNode} from '@eg/share/tree/tree';
 import {IdlService, IdlObject} from '@eg/core/idl.service';
 import {OrgService} from '@eg/core/org.service';
@@ -10,7 +9,8 @@ import {StringComponent} from '@eg/share/string/string.component';
 import {ConfirmDialogComponent} from '@eg/share/dialog/confirm.component';
 import {FmRecordEditorComponent, FmFieldOptions} from '@eg/share/fm-editor/fm-editor.component';
 import {ComboboxEntry} from '@eg/share/combobox/combobox.component';
-import {Pager} from '@eg/share/util/pager';
+import {PermGroupMapDialogComponent} from './perm-group-map-dialog.component'
+
 
 @Component({
     templateUrl: './perm-group-tree.component.html'
@@ -27,10 +27,14 @@ export class PermGroupTreeComponent implements OnInit {
     orgDepths: ComboboxEntry[];
 
     @ViewChild('editDialog') editDialog: FmRecordEditorComponent;
-    @ViewChild('editString') editString: StringComponent;
+    @ViewChild('delConfirm') delConfirm: ConfirmDialogComponent;
+    @ViewChild('successString') successString: StringComponent;
     @ViewChild('createString') createString: StringComponent;
     @ViewChild('errorString') errorString: StringComponent;
-    @ViewChild('delConfirm') delConfirm: ConfirmDialogComponent;
+    @ViewChild('successMapString') successMapString: StringComponent;
+    @ViewChild('createMapString') createMapString: StringComponent;
+    @ViewChild('errorMapString') errorMapString: StringComponent;
+    @ViewChild('addMappingDialog') addMappingDialog: PermGroupMapDialogComponent;
 
     constructor(
         private idl: IdlService,
@@ -48,6 +52,7 @@ export class PermGroupTreeComponent implements OnInit {
 
     ngOnInit() {
         this.loadPgtTree();
+        this.loadPermMaps();
         this.setOrgDepths();
     }
 
@@ -64,6 +69,8 @@ export class PermGroupTreeComponent implements OnInit {
     }
 
     groupPermMaps(): IdlObject[] {
+        if (!this.selected) { return []; }
+
         let maps = this.inheritedPermissions();
         maps = maps.concat(
             this.permMaps.filter(m => +m.grp().id() === +this.selected.id));
@@ -88,10 +95,13 @@ export class PermGroupTreeComponent implements OnInit {
             this.permEntries.push({id: perm.code(), label: perm.code()})
             this.permissions.forEach(perm => this.permIdMap[+perm.id()] = perm)
         });
+    }
 
-        // Perm-group maps
-        this.pcrud.retrieveAll('pgpm', {}, {fleshSelectors: true})
-            .subscribe(map => this.permMaps.push(map));
+    loadPermMaps() {
+        this.permMaps = [];
+        this.pcrud.retrieveAll('pgpm', {},
+            {fleshSelectors: true, authoritative: true})
+        .subscribe(map => this.permMaps.push(map));
     }
 
     fmEditorOptions(): {[fieldName: string]: FmFieldOptions} {
@@ -156,6 +166,8 @@ export class PermGroupTreeComponent implements OnInit {
         return maps;
     }
 
+
+
     nodeClicked($event: any) {
         this.selected = $event;
     }
@@ -166,7 +178,7 @@ export class PermGroupTreeComponent implements OnInit {
 
         this.editDialog.open({size: 'lg'}).then(
             success => {
-                this.editString.current().then(str => this.toast.success(str));
+                this.successString.current().then(str => this.toast.success(str));
             },
             rejected => {
                 if (rejected && rejected.dismissed) {
@@ -193,7 +205,7 @@ export class PermGroupTreeComponent implements OnInit {
                         // pcrud action/transaction completed.
                         this.tree.removeNode(this.selected);
                         this.selected = null;
-                        this.editString.current().then(str => this.toast.success(str));
+                        this.successString.current().then(str => this.toast.success(str));
                     }
                 );
             },
@@ -234,8 +246,49 @@ export class PermGroupTreeComponent implements OnInit {
         );
     }
 
-    deleteMap(map: IdlObject) {
+    changesPending(): boolean {
+        return this.modifiedMaps().length > 0;
+    }
+
+    modifiedMaps(): IdlObject[] {
+        return this.permMaps.filter(
+            m => m.isnew() || m.ischanged() || m.isdeleted()
+        );
+    }
+
+    applyChanges() {
+
+        const maps: IdlObject[] = this.modifiedMaps()
+            .map(m => this.idl.clone(m)); // Clone for de-fleshing
 
+        maps.forEach(m => {
+            m.grp(m.grp().id());
+            m.perm(m.perm().id());
+        });
+
+        this.pcrud.autoApply(maps).subscribe(
+            one => console.debug('Modified one mapping: ', one),
+            err => {
+                console.error(err);
+                this.errorMapString.current().then(msg => this.toast.danger(msg));
+            },
+            ()  => {
+                this.successMapString.current().then(msg => this.toast.success(msg));
+                this.loadPermMaps();
+            }
+        )
+    }
+
+    openAddDialog() {
+        this.addMappingDialog.open().then(
+            modified => {
+                if (modified) {
+                    this.createMapString.current().then(msg => this.toast.success(msg));
+                    this.loadPermMaps();
+                }
+            },
+            err => {}
+        )
     }
 }
 
-- 
2.11.0