From 1e41b9261f0897ce6aef6266db1aac8a7c81c501 Mon Sep 17 00:00:00 2001
From: Michael Bromley <michael@michaelbromley.co.uk>
Date: Tue, 24 Sep 2019 14:44:22 +0200
Subject: [PATCH] fix(admin-ui): Correctly disable selects/toggles based on
 permissions

---
 .../collection-detail.component.html          |  2 +-
 .../facet-detail/facet-detail.component.html  |  2 +-
 .../product-variants-list.component.html      |  2 +-
 .../product-variants-table.component.html     |  2 +-
 .../channel-detail.component.html             |  8 +++----
 .../country-detail.component.html             |  2 +-
 .../global-settings.component.html            |  2 +-
 .../payment-method-detail.component.html      |  4 ++--
 .../tax-rate-detail.component.html            |  6 ++---
 .../configurable-input.component.html         |  4 ++--
 .../shared/directives/disabled.directive.ts   | 24 +++++++++++++++++++
 .../admin-ui/src/app/shared/shared.module.ts  |  6 +++--
 12 files changed, 45 insertions(+), 19 deletions(-)
 create mode 100644 packages/admin-ui/src/app/shared/directives/disabled.directive.ts

diff --git a/packages/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html b/packages/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html
index ea8dec5f9d..e3f0a7da63 100644
--- a/packages/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html
+++ b/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">
                         {{
diff --git a/packages/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html b/packages/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html
index 8afd0a56d3..a30429ab44 100644
--- a/packages/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html
+++ b/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"
                 />
diff --git a/packages/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html b/packages/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html
index cd0b3f5f48..f680dcc4b1 100644
--- a/packages/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html
+++ b/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>
diff --git a/packages/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.html b/packages/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.html
index 9348140390..b45f39326c 100644
--- a/packages/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.html
+++ b/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>
diff --git a/packages/admin-ui/src/app/settings/components/channel-detail/channel-detail.component.html b/packages/admin-ui/src/app/settings/components/channel-detail/channel-detail.component.html
index c1970ab4b9..c73e6661fa 100644
--- a/packages/admin-ui/src/app/settings/components/channel-detail/channel-detail.component.html
+++ b/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>
diff --git a/packages/admin-ui/src/app/settings/components/country-detail/country-detail.component.html b/packages/admin-ui/src/app/settings/components/country-detail/country-detail.component.html
index 67a2342a5f..58e74acf0d 100644
--- a/packages/admin-ui/src/app/settings/components/country-detail/country-detail.component.html
+++ b/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>
diff --git a/packages/admin-ui/src/app/settings/components/global-settings/global-settings.component.html b/packages/admin-ui/src/app/settings/components/global-settings/global-settings.component.html
index 7dd25956bc..5efc089a88 100644
--- a/packages/admin-ui/src/app/settings/components/global-settings/global-settings.component.html
+++ b/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>
diff --git a/packages/admin-ui/src/app/settings/components/payment-method-detail/payment-method-detail.component.html b/packages/admin-ui/src/app/settings/components/payment-method-detail/payment-method-detail.component.html
index 64c6391d39..f94d435979 100644
--- a/packages/admin-ui/src/app/settings/components/payment-method-detail/payment-method-detail.component.html
+++ b/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
                     />
diff --git a/packages/admin-ui/src/app/settings/components/tax-rate-detail/tax-rate-detail.component.html b/packages/admin-ui/src/app/settings/components/tax-rate-detail/tax-rate-detail.component.html
index e4b9e0e218..4f4d099b09 100644
--- a/packages/admin-ui/src/app/settings/components/tax-rate-detail/tax-rate-detail.component.html
+++ b/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>
diff --git a/packages/admin-ui/src/app/shared/components/configurable-input/configurable-input.component.html b/packages/admin-ui/src/app/shared/components/configurable-input/configurable-input.component.html
index 2003c92517..3c339810e2 100644
--- a/packages/admin-ui/src/app/shared/components/configurable-input/configurable-input.component.html
+++ b/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>
diff --git a/packages/admin-ui/src/app/shared/directives/disabled.directive.ts b/packages/admin-ui/src/app/shared/directives/disabled.directive.ts
new file mode 100644
index 0000000000..372ee11df2
--- /dev/null
+++ b/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) {}
+}
diff --git a/packages/admin-ui/src/app/shared/shared.module.ts b/packages/admin-ui/src/app/shared/shared.module.ts
index 4f9b5bb2e4..763e22d5df 100644
--- a/packages/admin-ui/src/app/shared/shared.module.ts
+++ b/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({