From 0f77fa52e90f1ba55a4c344ea5f79f6d127bec99 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Thu, 11 Oct 2018 15:45:39 +0200
Subject: [PATCH] Fixes for nested array.

---
 NuGet.Config                                  |  6 ++
 .../app/features/content/declarations.ts      |  1 +
 src/Squidex/app/features/content/module.ts    |  2 +
 .../pages/content/content-field.component.ts  |  2 +-
 .../shared/array-editor.component.html        | 27 ++++-----
 .../shared/array-editor.component.scss        | 37 ++++--------
 .../content/shared/array-editor.component.ts  |  5 +-
 .../content/shared/array-item.component.html  | 15 +++++
 .../content/shared/array-item.component.scss  | 21 +++++++
 .../content/shared/array-item.component.ts    | 59 +++++++++++++++++++
 10 files changed, 129 insertions(+), 46 deletions(-)
 create mode 100644 NuGet.Config
 create mode 100644 src/Squidex/app/features/content/shared/array-item.component.html
 create mode 100644 src/Squidex/app/features/content/shared/array-item.component.scss
 create mode 100644 src/Squidex/app/features/content/shared/array-item.component.ts

diff --git a/NuGet.Config b/NuGet.Config
new file mode 100644
index 0000000000..3f0e003403
--- /dev/null
+++ b/NuGet.Config
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <packageSources>
+    <add key="nuget.org" value="https://api.nuget.org/v3/index.json" protocolVersion="3" />
+  </packageSources>
+</configuration>
\ No newline at end of file
diff --git a/src/Squidex/app/features/content/declarations.ts b/src/Squidex/app/features/content/declarations.ts
index 55c77b7bd3..0b8105b8d6 100644
--- a/src/Squidex/app/features/content/declarations.ts
+++ b/src/Squidex/app/features/content/declarations.ts
@@ -13,6 +13,7 @@ export * from './pages/schemas/schemas-page.component';
 
 export * from './shared/array-editor.component';
 export * from './shared/assets-editor.component';
+export * from './shared/array-item.component';
 export * from './shared/content-item.component';
 export * from './shared/content-status.component';
 export * from './shared/contents-selector.component';
diff --git a/src/Squidex/app/features/content/module.ts b/src/Squidex/app/features/content/module.ts
index f08988fc93..814715a54a 100644
--- a/src/Squidex/app/features/content/module.ts
+++ b/src/Squidex/app/features/content/module.ts
@@ -23,6 +23,7 @@ import {
 
 import {
     ArrayEditorComponent,
+    ArrayItemComponent,
     AssetsEditorComponent,
     ContentFieldComponent,
     ContentHistoryComponent,
@@ -92,6 +93,7 @@ const routes: Routes = [
     ],
     declarations: [
         ArrayEditorComponent,
+        ArrayItemComponent,
         AssetsEditorComponent,
         ContentFieldComponent,
         ContentHistoryComponent,
diff --git a/src/Squidex/app/features/content/pages/content/content-field.component.ts b/src/Squidex/app/features/content/pages/content/content-field.component.ts
index 0b69698e89..203ac26d15 100644
--- a/src/Squidex/app/features/content/pages/content/content-field.component.ts
+++ b/src/Squidex/app/features/content/pages/content/content-field.component.ts
@@ -8,6 +8,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { AbstractControl, FormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
 
 import {
     AppLanguageDto,
@@ -17,7 +18,6 @@ import {
     RootFieldDto,
     Types
 } from '@app/shared';
-import { map, startWith } from 'rxjs/operators';
 
 @Component({
     selector: 'sqx-content-field',
diff --git a/src/Squidex/app/features/content/shared/array-editor.component.html b/src/Squidex/app/features/content/shared/array-editor.component.html
index aa44bdf7a4..784aed591b 100644
--- a/src/Squidex/app/features/content/shared/array-editor.component.html
+++ b/src/Squidex/app/features/content/shared/array-editor.component.html
@@ -1,20 +1,13 @@
-<div class="array-container" *ngIf="arrayControl.controls.length > 0">
-    <div class="array-item" *ngFor="let nestedForm of arrayControl.controls; let i = index" [class.invalid]="nestedForm.invalid">
-        <button type="button" class="btn btn-link btn-danger array-item-remove" (click)="removeItem(i); $event.preventDefault()">
-            <i class="icon-bin2"></i>
-        </button>
-        
-        <div class="form-group" *ngFor="let nestedField of field.nested">
-            <ng-container *ngIf="nestedForm.get(nestedField.name); let nestedFieldForm">
-                <sqx-field-editor
-                    [form]="form"
-                    [field]="nestedField"
-                    [language]="language"
-                    [languages]="languages"
-                    [control]="nestedFieldForm">
-                </sqx-field-editor>
-            </ng-container>
-        </div>
+<div class="container" *ngIf="arrayControl.controls.length > 0">
+    <div class="item" *ngFor="let itemForm of arrayControl.controls; let i = index">
+        <sqx-array-item
+            [form]="form"
+            [field]="field"
+            [itemForm]="itemForm"
+            [language]="language"
+            [languages]="languages"
+            (removing)="removeItem(i)">
+        </sqx-array-item>
     </div>
 </div>
 
diff --git a/src/Squidex/app/features/content/shared/array-editor.component.scss b/src/Squidex/app/features/content/shared/array-editor.component.scss
index 0a2a3f80b5..33a1c1ebed 100644
--- a/src/Squidex/app/features/content/shared/array-editor.component.scss
+++ b/src/Squidex/app/features/content/shared/array-editor.component.scss
@@ -1,34 +1,19 @@
 @import '_vars';
 @import '_mixins';
 
-.array {
-    &-container {
-        background: $color-border;
-        padding: 1rem;
-        position: relative;
-        margin-bottom: 1rem;
-    }
-
-    &-item {
-        & {
-            background: $panel-light-background;
-            border: 1px solid darken($color-border, 5%);
-            border-left-width: 4px;
-            padding: 1rem;
-            position: relative;
-            margin-bottom: 1rem;
-        }
+.container {
+    background: $color-border;
+    padding: 1rem;
+    position: relative;
+    margin-bottom: 1rem;
+}
 
-        &:last-child {
-            margin-bottom: 0;
-        }
+.item {
+    & {
+        margin-bottom: 1rem;
     }
 
-    &-item-remove {
-        @include absolute(.5rem, .5rem, auto, auto);
+    &:last-child {
+        margin-bottom: 0;
     }
-}
-
-.invalid {
-    border-left-color: $color-theme-error;
 }
\ No newline at end of file
diff --git a/src/Squidex/app/features/content/shared/array-editor.component.ts b/src/Squidex/app/features/content/shared/array-editor.component.ts
index 08686a4264..1c27ebdff6 100644
--- a/src/Squidex/app/features/content/shared/array-editor.component.ts
+++ b/src/Squidex/app/features/content/shared/array-editor.component.ts
@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { FormArray } from '@angular/forms';
 
 import {
@@ -18,7 +18,8 @@ import {
 @Component({
     selector: 'sqx-array-editor',
     styleUrls: ['./array-editor.component.scss'],
-    templateUrl: './array-editor.component.html'
+    templateUrl: './array-editor.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ArrayEditorComponent {
     @Input()
diff --git a/src/Squidex/app/features/content/shared/array-item.component.html b/src/Squidex/app/features/content/shared/array-item.component.html
new file mode 100644
index 0000000000..a6a1ff10b7
--- /dev/null
+++ b/src/Squidex/app/features/content/shared/array-item.component.html
@@ -0,0 +1,15 @@
+<div class="item" [class.invalid]="isInvalid | async">
+    <button type="button" class="btn btn-link btn-danger item-remove" (click)="removing.emit(); $event.preventDefault()">
+        <i class="icon-bin2"></i>
+    </button>
+    
+    <div class="form-group" *ngFor="let fieldControl of fieldControls">
+        <sqx-field-editor
+            [form]="form"
+            [field]="fieldControl.field"
+            [language]="language"
+            [languages]="languages"
+            [control]="fieldControl.control">
+        </sqx-field-editor>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Squidex/app/features/content/shared/array-item.component.scss b/src/Squidex/app/features/content/shared/array-item.component.scss
new file mode 100644
index 0000000000..3ac01f20c5
--- /dev/null
+++ b/src/Squidex/app/features/content/shared/array-item.component.scss
@@ -0,0 +1,21 @@
+@import '_vars';
+@import '_mixins';
+
+
+.item {
+    & {
+        background: $panel-light-background;
+        border: 1px solid darken($color-border, 5%);
+        border-left-width: 4px;
+        padding: 1rem;
+        position: relative;
+    }
+
+    &-remove {
+        @include absolute(.5rem, .5rem, auto, auto);
+    }
+}
+
+.invalid {
+    border-left-color: $color-theme-error;
+}
\ No newline at end of file
diff --git a/src/Squidex/app/features/content/shared/array-item.component.ts b/src/Squidex/app/features/content/shared/array-item.component.ts
new file mode 100644
index 0000000000..c7d0c126fe
--- /dev/null
+++ b/src/Squidex/app/features/content/shared/array-item.component.ts
@@ -0,0 +1,59 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { AbstractControl, FormGroup } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+
+import {
+    AppLanguageDto,
+    EditContentForm,
+    FieldDto,
+    ImmutableArray,
+    RootFieldDto
+} from '@app/shared';
+
+@Component({
+    selector: 'sqx-array-item',
+    styleUrls: ['./array-item.component.scss'],
+    templateUrl: './array-item.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ArrayItemComponent implements OnChanges {
+    @Output()
+    public removing = new EventEmitter();
+
+    @Input()
+    public form: EditContentForm;
+
+    @Input()
+    public field: RootFieldDto;
+
+    @Input()
+    public itemForm: FormGroup;
+
+    @Input()
+    public language: AppLanguageDto;
+
+    @Input()
+    public languages: ImmutableArray<AppLanguageDto>;
+
+    public isInvalid: Observable<boolean>;
+
+    public fieldControls: { field: FieldDto, control: AbstractControl }[];
+
+    public ngOnChanges(changes: SimpleChanges) {
+        if (changes['itemForm']) {
+            this.isInvalid = this.itemForm.statusChanges.pipe(startWith(this.itemForm.invalid), map(x => this.itemForm.invalid));
+        }
+
+        if (changes['itemForm'] || changes['field']) {
+            this.fieldControls = this.field.nested.map(field => ({ field, control: this.itemForm.get(field.name)! })).filter(x => !!x.control);
+        }
+    }
+}
\ No newline at end of file