Browse Source

Disable component field when field disabled.

pull/922/head
Sebastian 3 years ago
parent
commit
0d18b88d6d
  1. 8
      frontend/src/app/features/content/shared/forms/array-editor.component.html
  2. 6
      frontend/src/app/features/content/shared/forms/array-editor.component.ts

8
frontend/src/app/features/content/shared/forms/array-editor.component.html

@ -63,7 +63,7 @@
<div class="col-auto"> <div class="col-auto">
<ng-container *ngIf="isArray; else component"> <ng-container *ngIf="isArray; else component">
<ng-container *ngIf="hasField"> <ng-container *ngIf="hasField">
<button type="button" class="btn btn-outline-success" [disabled]="isFull | async" (click)="addItem()"> <button type="button" class="btn btn-outline-success" [disabled]="isDisabledOrFull | async" (click)="addItem()">
{{ 'contents.arrayAddItem' | sqxTranslate }} {{ 'contents.arrayAddItem' | sqxTranslate }}
</button> </button>
</ng-container> </ng-container>
@ -76,7 +76,7 @@
<ng-template #component> <ng-template #component>
<ng-container *ngIf="schemasList.length > 1"> <ng-container *ngIf="schemasList.length > 1">
<button type="button" class="btn btn-outline-success dropdown-toggle" [disabled]="isFull | async" (click)="schemasDropdown.show()" #buttonSelect> <button type="button" class="btn btn-outline-success dropdown-toggle" [disabled]="isDisabledOrFull | async" (click)="schemasDropdown.show()" #buttonSelect>
{{ 'contents.addComponent' | sqxTranslate}} {{ 'contents.addComponent' | sqxTranslate}}
</button> </button>
@ -89,7 +89,7 @@
</ng-container> </ng-container>
</ng-container> </ng-container>
<ng-container *ngIf="schemasList.length === 1"> <ng-container *ngIf="schemasList.length === 1">
<button type="button" class="btn btn-outline-success" [disabled]="isFull | async" (click)="addComponent(schemasList[0])"> <button type="button" class="btn btn-outline-success" [disabled]="isDisabledOrFull | async" (click)="addComponent(schemasList[0])">
{{ 'contents.addComponent' | sqxTranslate}} {{ 'contents.addComponent' | sqxTranslate}}
</button> </button>
</ng-container> </ng-container>
@ -102,7 +102,7 @@
</div> </div>
<div class="col"> <div class="col">
<button type="button" class="btn btn-text-danger ms-2" *ngIf="items.length > 0" <button type="button" class="btn btn-text-danger ms-2" *ngIf="items.length > 0" [disabled]="isDisabled | async"
(sqxConfirmClick)="clear()" (sqxConfirmClick)="clear()"
confirmTitle="i18n:contents.arrayClearConfirmTitle" confirmTitle="i18n:contents.arrayClearConfirmTitle"
confirmText="i18n:contents.arrayClearConfirmText" confirmText="i18n:contents.arrayClearConfirmText"

6
frontend/src/app/features/content/shared/forms/array-editor.component.ts

@ -58,11 +58,10 @@ export class ArrayEditorComponent implements OnChanges {
public schemasDropdown = new ModalModel(); public schemasDropdown = new ModalModel();
public schemasList: ReadonlyArray<SchemaDto> = []; public schemasList: ReadonlyArray<SchemaDto> = [];
public isDisabledOrFull?: Observable<boolean>;
public isDisabled?: Observable<boolean>; public isDisabled?: Observable<boolean>;
public isCollapsedInitial = false; public isCollapsedInitial = false;
public isFull?: Observable<boolean>;
public get hasField() { public get hasField() {
return this.formModel.field['nested']?.length > 0; return this.formModel.field['nested']?.length > 0;
} }
@ -83,8 +82,7 @@ export class ArrayEditorComponent implements OnChanges {
} }
this.isDisabled = disabled$(this.formModel.form); this.isDisabled = disabled$(this.formModel.form);
this.isDisabledOrFull = combineLatest([
this.isFull = combineLatest([
this.isDisabled, this.isDisabled,
this.formModel.itemChanges, this.formModel.itemChanges,
]).pipe(map(([disabled, items]) => { ]).pipe(map(([disabled, items]) => {

Loading…
Cancel
Save