fix(admin-ui): Correctly disable selects/toggles based on permissions

packages/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html

@@ -41,7 +41,7 @@
                         clrToggle
                         formControlName="visible"
                         id="visibility"
-                        [attr.disabled]="!('UpdateCatalog' | hasPermission)"
+                        [vdrDisabled]="!('UpdateCatalog' | hasPermission)"
                     />
                     <label class="visible-toggle">
                         {{

packages/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html

@@ -38,7 +38,7 @@
                 <input
                     type="checkbox"
                     clrToggle
-                    [attr.disabled]="!('UpdateCatalog' | hasPermission)"
+                    [vdrDisabled]="!('UpdateCatalog' | hasPermission)"
                     formControlName="visible"
                     id="visibility"
                 />

packages/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html

@@ -106,7 +106,7 @@
                                         name="trackInventory"
 
                                         formControlName="trackInventory"
-                                        [attr.disabled]="!('UpdateCatalog' | hasPermission)"
+                                        [vdrDisabled]="!('UpdateCatalog' | hasPermission)"
                                     />
                                     <label>{{ 'catalog.track-inventory' | translate }}</label>
                                 </clr-checkbox-wrapper>

packages/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.html

@@ -83,7 +83,7 @@
                         clrToggle
                         name="enabled"
                         formControlName="enabled"
-                        [attr.disabled]="!('UpdateCatalog' | hasPermission)"
+                        [vdrDisabled]="!('UpdateCatalog' | hasPermission)"
                     />
                 </clr-toggle-wrapper>
             </td>

packages/admin-ui/src/app/settings/components/channel-detail/channel-detail.component.html

@@ -36,7 +36,7 @@
             clrSelect
             name="currencyCode"
             formControlName="currencyCode"
-            [attr.disabled]="!('SuperAdmin' | hasPermission)"
+            [vdrDisabled]="!('SuperAdmin' | hasPermission)"
         >
             <option *ngFor="let code of currencyCodes" [value]="code">{{ code | currencyName }}</option>
         </select>
@@ -48,7 +48,7 @@
                 clrToggle
                 id="pricesIncludeTax"
                 formControlName="pricesIncludeTax"
-                [attr.disabled]="!('SuperAdmin' | hasPermission)"
+                [vdrDisabled]="!('SuperAdmin' | hasPermission)"
             />
         </clr-toggle-wrapper>
     </vdr-form-field>
@@ -57,7 +57,7 @@
             clrSelect
             name="defaultTaxZoneId"
             formControlName="defaultTaxZoneId"
-            [attr.disabled]="!('SuperAdmin' | hasPermission)"
+            [vdrDisabled]="!('SuperAdmin' | hasPermission)"
         >
             <option *ngFor="let zone of zones$ | async" [value]="zone.id">{{ zone.name }}</option>
         </select>
@@ -67,7 +67,7 @@
             clrSelect
             name="defaultShippingZoneId"
             formControlName="defaultShippingZoneId"
-            [attr.disabled]="!('SuperAdmin' | hasPermission)"
+            [vdrDisabled]="!('SuperAdmin' | hasPermission)"
         >
             <option *ngFor="let zone of zones$ | async" [value]="zone.id">{{ zone.name }}</option>
         </select>

packages/admin-ui/src/app/settings/components/country-detail/country-detail.component.html

@@ -54,7 +54,7 @@
                 clrToggle
                 id="enabled"
                 formControlName="enabled"
-                [attr.disabled]="!('UpdateSettings' | hasPermission)"
+                [vdrDisabled]="!('UpdateSettings' | hasPermission)"
             />
         </clr-toggle-wrapper>
     </vdr-form-field>

packages/admin-ui/src/app/settings/components/global-settings/global-settings.component.html

@@ -39,7 +39,7 @@
             clrToggle
             name="enabled"
             formControlName="trackInventory"
-            [attr.disabled]="!('UpdateSettings' | hasPermission)"
+            [vdrDisabled]="!('UpdateSettings' | hasPermission)"
         />
         <label>{{ 'settings.track-inventory-default' | translate }}</label>
     </clr-toggle-wrapper>

packages/admin-ui/src/app/settings/components/payment-method-detail/payment-method-detail.component.html

@@ -38,7 +38,7 @@
                 type="checkbox"
                 clrToggle
                 id="enabled"
-                [attr.disabled]="!('UpdateSettings' | hasPermission)"
+                [vdrDisabled]="!('UpdateSettings' | hasPermission)"
                 formControlName="enabled"
             />
         </clr-toggle-wrapper>
@@ -68,7 +68,7 @@
                     <input
                         type="checkbox"
                         [id]="arg.name"
-                        [attr.disabled]="!('UpdateSettings' | hasPermission)"
+                        [vdrDisabled]="!('UpdateSettings' | hasPermission)"
                         [formControlName]="arg.name"
                         clrCheckbox
                     />

packages/admin-ui/src/app/settings/components/tax-rate-detail/tax-rate-detail.component.html

@@ -40,7 +40,7 @@
                 clrToggle
                 id="enabled"
                 formControlName="enabled"
-                [attr.disabled]="!('UpdateSettings' | hasPermission)"
+                [vdrDisabled]="!('UpdateSettings' | hasPermission)"
             />
         </clr-toggle-wrapper>
     </vdr-form-field>
@@ -60,7 +60,7 @@
             clrSelect
             name="taxCategoryId"
             formControlName="taxCategoryId"
-            [attr.disabled]="!('UpdateSettings' | hasPermission)"
+            [vdrDisabled]="!('UpdateSettings' | hasPermission)"
         >
             <option *ngFor="let taxCategory of taxCategories$ | async" [value]="taxCategory.id">
                 {{ taxCategory.name }}
@@ -72,7 +72,7 @@
             clrSelect
             name="zoneId"
             formControlName="zoneId"
-            [attr.disabled]="!('UpdateSettings' | hasPermission)"
+            [vdrDisabled]="!('UpdateSettings' | hasPermission)"
         >
             <option *ngFor="let zone of zones$ | async" [value]="zone.id">{{ zone.name }}</option>
         </select>

packages/admin-ui/src/app/shared/components/configurable-input/configurable-input.component.html

@@ -10,7 +10,7 @@
                         clrCheckbox
                         [formControlName]="arg.name"
                         [id]="arg.name"
-                        [attr.disabled]="readonly"
+                        [vdrDisabled]="readonly"
                     />
                 </clr-checkbox-wrapper>
                 <input
@@ -52,7 +52,7 @@
                     [formControlName]="arg.name"
                     *ngIf="getArgType(arg) === 'facetValueIds' && facets"
                 ></vdr-facet-value-selector>
-                <select clrSelect [formControlName]="arg.name" *ngIf="isStringWithOptions(arg)" [attr.disabled]="readonly">
+                <select clrSelect [formControlName]="arg.name" *ngIf="isStringWithOptions(arg)" [vdrDisabled]="readonly">
                     <option *ngFor="let option of getStringOptions(arg)" [value]="option.value">
                         {{ option.label || option.value }}
                     </option>

packages/admin-ui/src/app/shared/directives/disabled.directive.ts

@@ -0,0 +1,24 @@
+import { Directive, Input, Optional } from '@angular/core';
+import { FormControl, FormControlName } from '@angular/forms';
+
+/**
+ * Allows declarative binding to the "disabled" property of a reactive form
+ * control.
+ */
+@Directive({
+    selector: '[vdrDisabled]',
+})
+export class DisabledDirective {
+    @Input('vdrDisabled') set disabled(val: boolean) {
+        if (!this.formControlName) {
+            return;
+        }
+        if (val === false) {
+            this.formControlName.control.enable();
+        } else {
+            this.formControlName.control.disable();
+        }
+    }
+
+    constructor(@Optional() private formControlName: FormControlName) {}
+}

packages/admin-ui/src/app/shared/shared.module.ts

@@ -14,11 +14,11 @@ import {
     ActionBarLeftComponent,
     ActionBarRightComponent,
 } from './components/action-bar/action-bar.component';
+import { DisabledDirective } from './directives/disabled.directive';
 import { IfPermissionsDirective } from './directives/if-permissions.directive';
 import { HasPermissionPipe } from './pipes/has-permission.pipe';
 import { ModalService } from './providers/modal/modal.service';
 import { CanDeactivateDetailGuard } from './providers/routing/can-deactivate-detail-guard';
-import { PercentageSuffixInputComponent } from './shared-declarations';
 import { ChipComponent } from './shared-declarations';
 import { ConfigurableInputComponent } from './shared-declarations';
 import { CurrencyInputComponent } from './shared-declarations';
@@ -36,7 +36,7 @@ import { FormFieldControlDirective } from './shared-declarations';
 import { FormFieldComponent } from './shared-declarations';
 import { FormItemComponent } from './shared-declarations';
 import { AffixedInputComponent } from './shared-declarations';
-import { ItemsPerPageControlsComponent } from './shared-declarations';
+import { PercentageSuffixInputComponent } from './shared-declarations';
 import { LabeledDataComponent } from './shared-declarations';
 import { LanguageSelectorComponent } from './shared-declarations';
 import { DialogButtonsDirective } from './shared-declarations';
@@ -57,6 +57,7 @@ import { SentenceCasePipe } from './shared-declarations';
 import { SortPipe } from './shared-declarations';
 import { StringToColorPipe } from './shared-declarations';
 import { FormattedAddressComponent } from './shared-declarations';
+import { ItemsPerPageControlsComponent } from './shared-declarations';
 
 const IMPORTS = [
     ClarityModule,
@@ -116,6 +117,7 @@ const DECLARATIONS = [
     IfPermissionsDirective,
     HasPermissionPipe,
     ActionBarItemsComponent,
+    DisabledDirective,
 ];
 
 @NgModule({