From 0d18b88d6d7728946b93aab774d4f83e4b72e3cb Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Sun, 18 Sep 2022 20:32:21 +0200
Subject: [PATCH] Disable component field when field disabled.

---
 .../content/shared/forms/array-editor.component.html      | 8 ++++----
 .../content/shared/forms/array-editor.component.ts        | 6 ++----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/features/content/shared/forms/array-editor.component.html b/frontend/src/app/features/content/shared/forms/array-editor.component.html
index 6ae26c21a..699f7950c 100644
--- a/frontend/src/app/features/content/shared/forms/array-editor.component.html
+++ b/frontend/src/app/features/content/shared/forms/array-editor.component.html
@@ -63,7 +63,7 @@
         <div class="col-auto">
             <ng-container *ngIf="isArray; else component">
                 <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 }}
                     </button>
                 </ng-container>
@@ -76,7 +76,7 @@
             
             <ng-template #component>
                 <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}}
                     </button>
                     
@@ -89,7 +89,7 @@
                     </ng-container>
                 </ng-container>
                 <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}}
                     </button>
                 </ng-container>
@@ -102,7 +102,7 @@
         </div>
 
         <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()"
                 confirmTitle="i18n:contents.arrayClearConfirmTitle"
                 confirmText="i18n:contents.arrayClearConfirmText"
diff --git a/frontend/src/app/features/content/shared/forms/array-editor.component.ts b/frontend/src/app/features/content/shared/forms/array-editor.component.ts
index aabbb8a4d..22e878416 100644
--- a/frontend/src/app/features/content/shared/forms/array-editor.component.ts
+++ b/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 schemasList: ReadonlyArray<SchemaDto> = [];
 
+    public isDisabledOrFull?: Observable<boolean>;
     public isDisabled?: Observable<boolean>;
     public isCollapsedInitial = false;
 
-    public isFull?: Observable<boolean>;
-
     public get hasField() {
         return this.formModel.field['nested']?.length > 0;
     }
@@ -83,8 +82,7 @@ export class ArrayEditorComponent implements OnChanges {
             }
 
             this.isDisabled = disabled$(this.formModel.form);
-
-            this.isFull = combineLatest([
+            this.isDisabledOrFull = combineLatest([
                 this.isDisabled,
                 this.formModel.itemChanges,
             ]).pipe(map(([disabled, items]) => {