frontend permissions dialogs

src-ui/src/app/components/common/permissions-select/permissions-select.component.html

@@ -1,18 +1,27 @@
 <form [formGroup]="form">
-  <label>{{title}}</label>
+  <label class="form-label">{{title}}</label>
   <ul class="list-group">
-    <li class="list-group-item" *ngFor="let type of PermissionType | keyvalue" [formGroupName]="type.key">
-      {{type.key}}:
+    <li class="list-group-item d-flex">
+      <div class="col-3" i18n>Type</div>
+      <div class="col" i18n>All</div>
+      <div class="col" i18n>Add</div>
+      <div class="col" i18n>Change</div>
+      <div class="col" i18n>Delete</div>
+      <div class="col" i18n>View</div>
+    </li>
+    <li class="list-group-item d-flex" *ngFor="let type of PermissionType | keyvalue" [formGroupName]="type.key">
+      <div class="col-3">{{type.key}}:</div>
 
-      <div class="form-check form-check-inline form-switch">
-        <input type="checkbox" class="form-check-input" id="{{type.key}}_all" formControlName="all">
-        <label class="form-check-label" for="{{type.key}}_all" i18n>All</label>
+      <div class="col form-check form-check-inline form-switch">
+        <input type="checkbox" class="form-check-input" id="{{type.key}}_all" (change)="toggleAll($event, type.key)" [checked]="typesWithAllActions.has(type.key)">
+        <label class="form-check-label visually-hidden" for="{{type.key}}_all" i18n>All</label>
       </div>
 
-      <div *ngFor="let action of PermissionAction | keyvalue" class="form-check form-check-inline" [disabled]="isAll(type.key)">
-        <input type="checkbox" class="form-check-input" id="{{type.key}}_{{action.key}}" formControlName="{{action.key}}">
-        <label class="form-check-label" for="{{type.key}}_{{action.key}}" i18n>{{action.key}}</label>
+      <div *ngFor="let action of PermissionAction | keyvalue" class="col form-check form-check-inline">
+        <input type="checkbox" class="form-check-input" id="{{type.key}}_{{action.key}}" formControlName="{{action.key}}" [attr.disabled]="typesWithAllActions.has(type.key) ? true : null">
+        <label class="form-check-label visually-hidden" for="{{type.key}}_{{action.key}}" i18n>{{action.key}}</label>
       </div>
     </li>
+    <div *ngIf="error" class="invalid-feedback d-block">{{error}}</div>
   </ul>
 </form>

src-ui/src/app/components/common/permissions-select/permissions-select.component.ts

@@ -10,7 +10,6 @@ import {
   PermissionsService,
   PermissionType,
 } from 'src/app/services/permissions.service'
-import { AbstractInputComponent } from '../input/abstract-input'
 
 @Component({
   providers: [
@@ -33,14 +32,18 @@ export class PermissionsSelectComponent
   @Input()
   title: string = 'Permissions'
 
+  @Input()
+  error: string
+
   permissions: string[]
 
   form = new FormGroup({})
 
+  typesWithAllActions: Set<string> = new Set()
+
   constructor(private readonly permissionsService: PermissionsService) {
     for (const type in PermissionType) {
       const control = new FormGroup({})
-      control.addControl('all', new FormControl(null))
       for (const action in PermissionAction) {
         control.addControl(action, new FormControl(null))
       }
@@ -50,7 +53,7 @@ export class PermissionsSelectComponent
 
   writeValue(permissions: string[]): void {
     this.permissions = permissions
-    this.permissions.forEach((permissionStr) => {
+    this.permissions?.forEach((permissionStr) => {
       const { actionKey, typeKey } =
         this.permissionsService.getPermissionKeys(permissionStr)
 
@@ -60,20 +63,70 @@ export class PermissionsSelectComponent
         }
       }
     })
+    Object.keys(PermissionType).forEach((type) => {
+      if (Object.values(this.form.get(type).value).every((val) => val)) {
+        this.typesWithAllActions.add(type)
+      } else {
+        this.typesWithAllActions.delete(type)
+      }
+    })
   }
+
+  onChange = (newValue: string[]) => {}
+
+  onTouched = () => {}
+
+  disabled: boolean = false
+
   registerOnChange(fn: any): void {
-    throw new Error('Method not implemented.')
+    this.onChange = fn
   }
+
   registerOnTouched(fn: any): void {
-    throw new Error('Method not implemented.')
+    this.onTouched = fn
   }
+
   setDisabledState?(isDisabled: boolean): void {
-    throw new Error('Method not implemented.')
+    this.disabled = isDisabled
   }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.form.valueChanges.subscribe((newValue) => {
+      let permissions = []
+      Object.entries(newValue).forEach(([typeKey, typeValue]) => {
+        // e.g. [Document, { Add: true, View: true ... }]
+        const selectedActions = Object.entries(typeValue).filter(
+          ([actionKey, actionValue]) => actionValue
+        )
 
-  isAll(key: string): boolean {
-    return this.form.get(key).get('all').value == true
+        selectedActions.forEach(([actionKey, actionValue]) => {
+          permissions.push(
+            (PermissionType[typeKey] as string).replace(
+              '%s',
+              PermissionAction[actionKey]
+            )
+          )
+        })
+
+        if (selectedActions.length == Object.entries(typeValue).length) {
+          this.typesWithAllActions.add(typeKey)
+        } else {
+          this.typesWithAllActions.delete(typeKey)
+        }
+      })
+      this.onChange(permissions)
+    })
+  }
+
+  toggleAll(event, type) {
+    const typeGroup = this.form.get(type)
+    if (event.target.checked) {
+      Object.keys(PermissionAction).forEach((action) => {
+        typeGroup.get(action).patchValue(true)
+      })
+      this.typesWithAllActions.add(type)
+    } else {
+      this.typesWithAllActions.delete(type)
+    }
   }
 }