updte role management: replace permissions by privileges

src/app/app.module.ts

@@ -310,6 +310,7 @@ import { NodesMenuConfirmationDialogComponent } from './components/project-map/n
 import { ConfirmationDeleteAllProjectsComponent } from './components/projects/confirmation-delete-all-projects/confirmation-delete-all-projects.component';
 import { ProjectMapLockConfirmationDialogComponent } from './components/project-map/project-map-menu/project-map-lock-confirmation-dialog/project-map-lock-confirmation-dialog.component';
 import { PrivilegeComponent } from './components/role-management/role-detail/privilege/privilege.component';
+import { GroupPrivilegesPipe } from './components/role-management/role-detail/privilege/group-privileges.pipe';
 
 @NgModule({
     declarations: [
@@ -533,6 +534,7 @@ import { PrivilegeComponent } from './components/role-management/role-detail/pri
         ConfirmationDeleteAllProjectsComponent,
         ProjectMapLockConfirmationDialogComponent,
         PrivilegeComponent,
+        GroupPrivilegesPipe,
     ],
     imports: [
         BrowserModule,

src/app/components/role-management/role-detail/privilege/group-privileges.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { GroupPrivilegesPipe } from './group-privileges.pipe';
+
+describe('GroupPrivilegesPipe', () => {
+  it('create an instance', () => {
+    const pipe = new GroupPrivilegesPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/components/role-management/role-detail/privilege/group-privileges.pipe.ts

@@ -0,0 +1,31 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {Privilege} from "@models/api/Privilege";
+
+@Pipe({
+  name: 'groupPrivileges'
+})
+export class GroupPrivilegesPipe implements PipeTransform {
+
+  transform(privileges: Privilege[]) {
+    if(privileges) {
+      const groups: { [index: string]: {verb: string, privilege: Privilege}[]} = {}
+      privileges.forEach((privilege) => {
+        const [name, verb] = privilege.name.split(".");
+        if(!groups.hasOwnProperty(name)) {
+          groups[name] = [{verb, privilege}];
+        } else {
+          groups[name].push({verb, privilege});
+        }
+      });
+
+      const output: {key: string; values: {verb: string; privilege: Privilege}[]}[] = [];
+      for(const [ key, values] of Object.entries(groups)) {
+        output.push({key, values});
+      }
+
+      return output;
+    }
+
+  }
+
+}

src/app/components/role-management/role-detail/privilege/privilege.component.html

@@ -10,21 +10,33 @@
       <button *ngIf="editMode" mat-raised-button color="primary" (click)="close()">Update</button>
     </div>
   </div>
-  <div *ngFor="let privilege of privileges">
+  <div *ngFor="let privilegeName of privileges | groupPrivileges">
-    <div class="privilege">
+    <div *ngIf="editMode; else normalMode">
-      <mat-checkbox
+      <div class="privilege">
-        *ngIf="editMode"
+        <div class="key">{{privilegeName.key}}:</div>
-        [checked]="ownedPrivilegesList.includes(privilege.privilege_id)"
+        <div class="values">
-        (change)="onPrivilegeChange($event.checked, privilege)"></mat-checkbox>
+          <div class="box" *ngFor="let privilegeVerb of privilegeName.values">
-      <div *ngIf="editMode; else actualPrivileges">
+            <mat-checkbox
-        <div
+              (change)="onPrivilegeChange($event.checked, privilegeVerb.privilege)"
-          [ngClass]="{add: changer.isAdded(privilege.privilege_id), delete: changer.isDeleted(privilege.privilege_id)}">
+              [checked]="ownedPrivilegesList.includes(privilegeVerb.privilege.privilege_id)"></mat-checkbox>
-          {{privilege.name}}</div>
+            <div
+              [ngClass]="{add: changer.isAdded(privilegeVerb.privilege.privilege_id), delete: changer.isDeleted(privilegeVerb.privilege.privilege_id)}">
+              {{privilegeVerb.verb}}</div>
+          </div>
+        </div>
       </div>
-      <ng-template #actualPrivileges>
-        <div *ngIf="ownedPrivilegesList.includes(privilege.privilege_id)">{{privilege.name}}</div>
-      </ng-template>
     </div>
+    <ng-template #normalMode>
+      <div class="privilege" *ngIf="ownedPrivilegesName.includes(privilegeName.key)">
+        <div class="key">{{privilegeName.key}}:</div>
+        <div class="values">
+          <div *ngFor="let privilegeVerb of privilegeName.values">
+            <div [ngClass]="{box: ownedPrivilegesList.includes(privilegeVerb.privilege.privilege_id)}"
+                 *ngIf="ownedPrivilegesList.includes(privilegeVerb.privilege.privilege_id)">{{privilegeVerb.verb}}</div>
+          </div>
+        </div>
+      </div>
+    </ng-template>
   </div>
 </div>
 

src/app/components/role-management/role-detail/privilege/privilege.component.scss

@@ -7,6 +7,14 @@
   padding-left: 10px;
 }
 
+.privileges {
+  padding-left: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+}
+
 .title {
   justify-content: center;
 }
@@ -15,11 +23,40 @@
   margin: 10px;
 }
 
-.privilege {
+.box > mat-checkbox {
+  margin-right: 10px;
+}
+
+.box {
+  margin: 10px;
   display: flex;
   flex-direction: row;
-  padding-left: 10px;
+}
-  justify-content: space-between;
+
+.privilege {
+  width: 32vw;
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 10px;
+  justify-content: center;
+  border: solid white 1px;
+}
+
+.key {
+  color: gray;
+  display: flex;
+  width: 15%;
+  margin-left: 10px;
+}
+
+.values {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.values > div {
+  width: 20%;
 }
 
 .add {

src/app/components/role-management/role-detail/privilege/privilege.component.ts

@@ -12,9 +12,16 @@ export class PrivilegeComponent implements OnInit {
 
   @Input() disable = true;
   @Input() privileges: Privilege[] = [];
-  @Input() ownedPrivilegesList: string[] = []
+  @Input() set ownedPrivilege(privileges: Privilege[]) {
+    if(privileges) {
+      this.ownedPrivilegesName = privileges.map((p: Privilege) => p.name.split(".")[0])
+      this.ownedPrivilegesList = privileges.map((p: Privilege) => p.privilege_id);
+    }
+  }
   @Output() update: EventEmitter<IPrivilegesChange> = new EventEmitter<IPrivilegesChange>();
 
+  ownedPrivilegesName: string[] = [];
+  ownedPrivilegesList: string[] = [];
   changer = new PrivilegeChange(this.ownedPrivilegesList);
   private editModeState = false;
 

src/app/components/role-management/role-detail/role-detail.component.html

@@ -40,7 +40,7 @@
       <mat-divider [vertical]="true"></mat-divider>
       <app-privilege
         [disable]="($role | async)?.is_builtin"
-        [ownedPrivilegesList]="$ownedPrivilegesId | async"
+        [ownedPrivilege]="$ownedPrivilegesId | async"
       [privileges]="privileges | async"
       (update)="onPrivilegesUpdate($event)"></app-privilege>
     </div>

src/app/components/role-management/role-detail/role-detail.component.scss

@@ -10,13 +10,7 @@
   justify-content: center;
 }
 
-.privileges {
-  width: 35vw;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
 
-}
 .clickable {
   cursor: pointer;
 }
@@ -45,6 +39,7 @@
   justify-content: space-between;
   padding-bottom: 20px;
   padding-left: 10px;
+
 }
 .header > div {
   font-size: 2em;

src/app/components/role-management/role-detail/role-detail.component.ts

@@ -33,8 +33,8 @@ export class RoleDetailComponent implements OnInit {
   controller: Controller;
   $role: ReplaySubject<Role> = new ReplaySubject<Role>(1);
   editRoleForm: UntypedFormGroup;
-  $ownedPrivilegesId: Observable<string[]> =  this.$role.pipe(map((role: Role) => {
+  $ownedPrivilegesId: Observable<Privilege[]> =  this.$role.pipe(map((role: Role) => {
-    return role.privileges.map((p: Privilege) => p.privilege_id);
+    return role.privileges
   }));
 
   privileges: Observable<Privilege[]>;