Fix dyanmic disabling checkboxes in permissions select

diff --git a/src-ui/src/app/components/common/permissions-select/permissions-select.component.html b/src-ui/src/app/components/common/permissions-select/permissions-select.component.html
index 1907f4e3fea8e45495978a7ab7d745fe3064d876..f3e85a5439890865ded275d4347c1a03a903b07b 100644 (file)
--- a/src-ui/src/app/components/common/permissions-select/permissions-select.component.html
+++ b/src-ui/src/app/components/common/permissions-select/permissions-select.component.html
@@ -18,7 +18,7 @@
       </div>
 
       <div *ngFor="let action of PermissionAction | keyvalue" class="col form-check form-check-inline" [ngbPopover]="inheritedWarning" [disablePopover]="!isInherited(type.key, action.key)" placement="left" triggers="mouseenter:mouseleave">
-        <input type="checkbox" class="form-check-input" id="{{type.key}}_{{action.key}}" formControlName="{{action.key}}" [attr.disabled]="isDisabled(type.key, action.key)">
+        <input type="checkbox" class="form-check-input" id="{{type.key}}_{{action.key}}" formControlName="{{action.key}}">
         <label class="form-check-label visually-hidden" for="{{type.key}}_{{action.key}}" i18n>{{action.key}}</label>
       </div>
     </li>

diff --git a/src-ui/src/app/components/common/permissions-select/permissions-select.component.ts b/src-ui/src/app/components/common/permissions-select/permissions-select.component.ts
index fa97a3b55884683689d4c9b5402719e531f7f2d8..4b968f6e58c40f145c0200a5b143b8de53015085 100644 (file)
--- a/src-ui/src/app/components/common/permissions-select/permissions-select.component.ts
+++ b/src-ui/src/app/components/common/permissions-select/permissions-select.component.ts
@@ -1,5 +1,6 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import {
+  AbstractControl,
   ControlValueAccessor,
   FormControl,
   FormGroup,
@@ -54,6 +55,8 @@ export class PermissionsSelectComponent
       this._inheritedPermissions = newInheritedPermissions
       this.writeValue(this.permissions) // updates visual checks etc.
     }
+
+    this.updateDisabledStates()
   }
 
   inheritedWarning: string = $localize`Inerhited from group`
@@ -98,6 +101,8 @@ export class PermissionsSelectComponent
         this.typesWithAllActions.delete(type)
       }
     })
+
+    this.updateDisabledStates()
   }
 
   onChange = (newValue: string[]) => {}
@@ -185,12 +190,16 @@ export class PermissionsSelectComponent
     }
   }
 
-  // if checkbox is disabled either because "All", inhereted or entire component disabled
-  isDisabled(typeKey: string, actionKey: string) {
-    return this.typesWithAllActions.has(typeKey) ||
-      this.isInherited(typeKey, actionKey) ||
-      this.disabled
-      ? true
-      : null
+  updateDisabledStates() {
+    for (const type in PermissionType) {
+      const control = this.form.get(type)
+      let actionControl: AbstractControl
+      for (const action in PermissionAction) {
+        actionControl = control.get(action)
+        this.isInherited(type, action) || this.disabled
+          ? actionControl.disable()
+          : actionControl.enable()
+      }
+    }
   }
 }