Skip to content

Commit

Permalink
fix(admin-ui): Correctly disable selects/toggles based on permissions
Browse files Browse the repository at this point in the history
  • Loading branch information
michaelbromley committed Sep 25, 2019
1 parent ef47c62 commit 1e41b92
Show file tree
Hide file tree
Showing 12 changed files with 45 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
clrToggle
formControlName="visible"
id="visibility"
[attr.disabled]="!('UpdateCatalog' | hasPermission)"
[vdrDisabled]="!('UpdateCatalog' | hasPermission)"
/>
<label class="visible-toggle">
{{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
<input
type="checkbox"
clrToggle
[attr.disabled]="!('UpdateCatalog' | hasPermission)"
[vdrDisabled]="!('UpdateCatalog' | hasPermission)"
formControlName="visible"
id="visibility"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
name="trackInventory"

formControlName="trackInventory"
[attr.disabled]="!('UpdateCatalog' | hasPermission)"
[vdrDisabled]="!('UpdateCatalog' | hasPermission)"
/>
<label>{{ 'catalog.track-inventory' | translate }}</label>
</clr-checkbox-wrapper>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
clrToggle
name="enabled"
formControlName="enabled"
[attr.disabled]="!('UpdateCatalog' | hasPermission)"
[vdrDisabled]="!('UpdateCatalog' | hasPermission)"
/>
</clr-toggle-wrapper>
</td>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -48,7 +48,7 @@
clrToggle
id="pricesIncludeTax"
formControlName="pricesIncludeTax"
[attr.disabled]="!('SuperAdmin' | hasPermission)"
[vdrDisabled]="!('SuperAdmin' | hasPermission)"
/>
</clr-toggle-wrapper>
</vdr-form-field>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
clrToggle
id="enabled"
formControlName="enabled"
[attr.disabled]="!('UpdateSettings' | hasPermission)"
[vdrDisabled]="!('UpdateSettings' | hasPermission)"
/>
</clr-toggle-wrapper>
</vdr-form-field>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
type="checkbox"
clrToggle
id="enabled"
[attr.disabled]="!('UpdateSettings' | hasPermission)"
[vdrDisabled]="!('UpdateSettings' | hasPermission)"
formControlName="enabled"
/>
</clr-toggle-wrapper>
Expand Down Expand Up @@ -68,7 +68,7 @@
<input
type="checkbox"
[id]="arg.name"
[attr.disabled]="!('UpdateSettings' | hasPermission)"
[vdrDisabled]="!('UpdateSettings' | hasPermission)"
[formControlName]="arg.name"
clrCheckbox
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
clrToggle
id="enabled"
formControlName="enabled"
[attr.disabled]="!('UpdateSettings' | hasPermission)"
[vdrDisabled]="!('UpdateSettings' | hasPermission)"
/>
</clr-toggle-wrapper>
</vdr-form-field>
Expand All @@ -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 }}
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
clrCheckbox
[formControlName]="arg.name"
[id]="arg.name"
[attr.disabled]="readonly"
[vdrDisabled]="readonly"
/>
</clr-checkbox-wrapper>
<input
Expand Down Expand Up @@ -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>
Expand Down
24 changes: 24 additions & 0 deletions packages/admin-ui/src/app/shared/directives/disabled.directive.ts
Original file line number Diff line number Diff line change
@@ -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) {}
}
6 changes: 4 additions & 2 deletions packages/admin-ui/src/app/shared/shared.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -116,6 +117,7 @@ const DECLARATIONS = [
IfPermissionsDirective,
HasPermissionPipe,
ActionBarItemsComponent,
DisabledDirective,
];

@NgModule({
Expand Down

0 comments on commit 1e41b92

Please sign in to comment.