LP1823981 Angular perm group admin UX improvements

* Loading progress now increments as data arrives.
* Application perm list is now sorted
* Deleted map now use warning background instead of danger as it appears
  to have better contrast.
* Inherited perms display the label 'Inherited' in the delete colum.
* Remove border boxes around non-actionable inherited values.
* Use Bootstrap button links instead of <a> for links to perm groups to
  improve contrast and consistency.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

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 8a68159..6e1770a 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
@@ -11,7 +11,7 @@
 <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>
 <eg-string #errorMapString i18n-text text="Permission Group Mapping Update Failed">
 </eg-string>
 
@@ -46,7 +46,7 @@
       <ng-container *ngIf="loading">
           <div class="row">
             <div class="col-lg-6">
-              <eg-progress-inline></eg-progress-inline>
+              <eg-progress-inline #loadProgress></eg-progress-inline>
             </div>
           </div>
         </ng-container>
@@ -146,24 +146,24 @@
             </div>
 
             <div class="row" *ngFor="let map of groupPermMaps()"
-                [ngClass]="{'bg-danger': map.isdeleted()}">
+                [ngClass]="{'bg-warning': map.isdeleted()}">
               <div class="col-lg-5">
                 <span title="{{map.perm().description()}}">{{map.perm().code()}}</span>
               </div>
               <ng-container *ngIf="permIsInherited(map); else nativeMap">
                 <div class="col-lg-4">
-                  <a href="javascript:;" (click)="selectGroup(map.grp().id())">
+                  <button class="btn btn-link m-0 p-0"
+                    (click)="selectGroup(map.grp().id())">
                     {{map.grp().name()}}
-                  </a>
+                  </button>
                 </div>
                 <div class="col-lg-1 text-center">{{map.depth()}}</div>
-                <!-- TODO migrate to <eg-bool/> once merged-->
                 <div class="col-lg-1 d-flex flex-column justify-content-center">
-                  <div class="d-flex justify-content-center p-3 rounded border border-secondary">
+                  <div class="d-flex justify-content-center p-1 rounded">
                     <eg-bool [value]="map.grantable() == 't'"></eg-bool>
                   </div>
                 </div>
-                <div class="col-lg-1"> </div>
+                <div class="col-lg-1 font-italic" i18n>Inherited</div>
               </ng-container>
               <ng-template #nativeMap>
                 <div class="col-lg-4">{{map.grp().name()}}</div>
@@ -174,7 +174,7 @@
                   </select>
                 </div>
                 <div class="col-lg-1 d-flex flex-column justify-content-center">
-                  <div class="d-flex justify-content-center p-3 rounded border border-info">                
+                  <div class="d-flex justify-content-center p-1 rounded border border-info">                
                     <input type="checkbox" class="align-middle"
                       i18n-title title="Grantable?"
                       [ngModel]="map.grantable() == 't'"
@@ -182,7 +182,7 @@
                   </div>
                 </div>
                 <div class="col-lg-1 d-flex flex-column justify-content-center">
-                  <div class="d-flex justify-content-center p-3 rounded border border-danger">
+                  <div class="d-flex justify-content-center p-1 rounded border border-danger">
                     <input type="checkbox" class="align-middle"
                       i18n-title title="Delete Mapping"
                       [ngModel]="map.isdeleted()"

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 bd3aab2..242f93b 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
@@ -11,6 +11,7 @@ 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 {PermGroupMapDialogComponent} from './perm-group-map-dialog.component';
+import {ProgressInlineComponent} from '@eg/share/dialog/progress-inline.component';
 
 /** Manage permission groups and group permissions */
 
@@ -41,6 +42,7 @@ export class PermGroupTreeComponent implements OnInit {
     @ViewChild('createMapString') createMapString: StringComponent;
     @ViewChild('errorMapString') errorMapString: StringComponent;
     @ViewChild('addMappingDialog') addMappingDialog: PermGroupMapDialogComponent;
+    @ViewChild('loadProgress') loadProgress: ProgressInlineComponent;
 
     constructor(
         private idl: IdlService,
@@ -59,9 +61,13 @@ export class PermGroupTreeComponent implements OnInit {
     async ngOnInit() {
         this.loading = true;
         await this.loadPgtTree();
+        this.loadProgress.increment();
         await this.loadPermissions();
+        this.loadProgress.increment();
         await this.loadPermMaps();
+        this.loadProgress.increment();
         this.setOrgDepths();
+        this.loadProgress.increment();
         this.loading = false;
         return Promise.resolve();
     }
@@ -126,8 +132,9 @@ export class PermGroupTreeComponent implements OnInit {
         // 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.
-        return this.pcrud.retrieveAll('ppl', {order_by: {ppl: ['name']}})
+        return this.pcrud.retrieveAll('ppl', {order_by: {ppl: 'code'}})
         .pipe(map(perm => {
+            this.loadProgress.increment();
             this.permissions.push(perm);
             this.permEntries.push({id: perm.code(), label: perm.code()});
             this.permissions.forEach(p => this.permIdMap[+p.id()] = p);
@@ -138,7 +145,10 @@ export class PermGroupTreeComponent implements OnInit {
         this.permMaps = [];
         return this.pcrud.retrieveAll('pgpm', {},
             {fleshSelectors: true, authoritative: true})
-        .pipe(map((m => this.permMaps.push(m)))).toPromise();
+        .pipe(map(m => {
+            this.loadProgress.increment();
+            this.permMaps.push(m);
+        })).toPromise();
     }
 
     fmEditorOptions(): {[fieldName: string]: FmFieldOptions} {