-
-
-
-
-
-
-
-
+
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 0a2a3f80b..33a1c1ebe 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 08686a426..1c27ebdff 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 000000000..a6a1ff10b
--- /dev/null
+++ b/src/Squidex/app/features/content/shared/array-item.component.html
@@ -0,0 +1,15 @@
+
\ 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 000000000..3ac01f20c
--- /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 000000000..c7d0c126f
--- /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
;
+
+ public isInvalid: Observable;
+
+ 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