From 31c4a3d6553ad09a6d04426939b7ffff4b494385 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Tue, 6 Aug 2019 11:34:51 -0400
Subject: [PATCH] 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>
---
.../admin/server/perm-group-tree.component.html | 20 ++++++++++----------
.../staff/admin/server/perm-group-tree.component.ts | 14 ++++++++++++--
2 files changed, 22 insertions(+), 12 deletions(-)
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 8a68159a9c..6e1770abe3 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
@@ -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 bd3aab29b3..242f93bebc 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
@@ -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} {
--
2.11.0