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 197c59c..f552f6f 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
@@ -137,18 +137,24 @@
               <div class="col-lg-1" i18n>Delete?</div>
             </div>
 
-            <div class="row" *ngFor="let map of groupPermMaps()">
+            <div class="row" *ngFor="let map of groupPermMaps()"
+                [ngClass]="{'bg-danger': map.isdeleted()}">
               <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-4">
+                  <a href="javascript:;" (click)="selectGroup(map.grp().id())">
+                    {{map.grp().name()}}
+                  </a>
+                </div>
                 <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-4">{{map.grp().name()}}</div>
                 <div class="col-lg-1">
                   <eg-combobox [entries]="orgDepths" [startId]="map.depth()"
                     (onChange)="map.depth($event ? $event.id : null); map.ischanged(true)">
@@ -172,6 +178,12 @@
                 </div>
               </ng-template>
             </div>
+            <div class="row d-flex m-2 mb-3">
+              <button class="btn btn-success" (click)="applyChanges()" i18n
+                [disabled]='!changesPending()'>
+                Apply Changes
+              </button>
+            </div>
           </ng-template>
         </ngb-tab>
       </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 4a3d795..16428a9 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
@@ -12,6 +12,7 @@ import {FmRecordEditorComponent, FmFieldOptions} from '@eg/share/fm-editor/fm-ed
 import {ComboboxEntry} from '@eg/share/combobox/combobox.component';
 import {PermGroupMapDialogComponent} from './perm-group-map-dialog.component'
 
+/** Manage permission groups and group permissions */
 
 @Component({
     templateUrl: './perm-group-tree.component.html'
@@ -134,7 +135,9 @@ export class PermGroupTreeComponent implements OnInit {
                 callerData: pgtNode
             });
 
-            pgtNode.children().forEach(childNode =>
+            pgtNode.children()
+                .sort((c1, c2) => c1.name() < c2.name() ? -1 : 1)
+                .forEach(childNode =>
                 treeNode.children.push(handleNode(childNode))
             );
 
@@ -308,5 +311,11 @@ export class PermGroupTreeComponent implements OnInit {
             err => {}
         )
     }
+
+    selectGroup(id: number) {
+        const node: TreeNode = this.tree.findNode(id);
+        this.tree.selectNode(node);
+        this.nodeClicked(node);
+    }
 }