UI to manage inline editing.

src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.html

@@ -30,4 +30,14 @@
             </label>
         </div>
     </div>
+    <div class="form-group row">
+        <div class="col col-9 offset-3">
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="fieldInlineEditable" formControlName="inlineEditable" />
+                <label class="form-check-label" for="fieldInlineEditable">
+                    Inline Editable
+                </label>
+            </div>
+        </div>
+    </div>
 </div>

src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.ts

@@ -23,13 +23,17 @@ export class BooleanUIComponent implements OnInit {
     public properties: BooleanFieldPropertiesDto;
 
     public ngOnInit() {
-        this.editForm.addControl('editor',
+        this.editForm.setControl('editor',
             new FormControl(this.properties.editor, [
                 Validators.required
             ]));
-        this.editForm.addControl('placeholder',
+
+        this.editForm.setControl('placeholder',
             new FormControl(this.properties.placeholder, [
                 Validators.maxLength(100)
             ]));
+
+        this.editForm.setControl('inlineEditable',
+            new FormControl(this.properties.inlineEditable));
     }
 }

src/Squidex/app/features/schemas/pages/schema/types/boolean-validation.component.html

@@ -10,11 +10,14 @@
         </div>
     </div>
 
-    <div class="form-group row" *ngIf="showDefaultValue | async">
-        <label class="col col-3 col-form-checkbox-label" for="fieldDefaultValue">Default Value</label>
-
-        <div class="col col-6">
-            <input class="form-check-input" type="checkbox" id="fieldDefaultValue" formControlName="defaultValue" sqxIndeterminateValue />
+    <div class="form-group row">
+        <div class="col col-9 offset-3">
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="fieldDefaultValue" formControlName="defaultValue" sqxIndeterminateValue />
+                <label class="form-check-label" for="fieldDefaultValue">
+                    Default Value
+                </label>
+            </div>
         </div>
     </div>
 </div>

src/Squidex/app/features/schemas/pages/schema/types/boolean-validation.component.ts

@@ -26,9 +26,12 @@ export class BooleanValidationComponent implements OnInit {
     public showDefaultValue: Observable<boolean>;
 
     public ngOnInit() {
-        this.editForm.addControl('defaultValue',
+        this.editForm.setControl('defaultValue',
             new FormControl(this.properties.defaultValue));
 
+        this.editForm.setControl('inlineEditable',
+            new FormControl(this.properties.inlineEditable));
+
         this.showDefaultValue =
             this.editForm.controls['isRequired'].valueChanges
                 .startWith(this.properties.isRequired)

src/Squidex/app/features/schemas/pages/schema/types/date-time-ui.component.ts

@@ -28,11 +28,12 @@ export class DateTimeUIComponent implements OnInit {
     public hideAllowedValues: Observable<boolean>;
 
     public ngOnInit() {
-        this.editForm.addControl('editor',
+        this.editForm.setControl('editor',
             new FormControl(this.properties.editor, [
                 Validators.required
             ]));
-        this.editForm.addControl('placeholder',
+
+        this.editForm.setControl('placeholder',
             new FormControl(this.properties.placeholder, [
                 Validators.maxLength(100)
             ]));

src/Squidex/app/features/schemas/pages/schema/types/date-time-validation.component.ts

@@ -29,20 +29,20 @@ export class DateTimeValidationComponent implements OnInit {
     public calculatedDefaultValues = ['Now', 'Today'];
 
     public ngOnInit() {
-        this.editForm.addControl('calculatedDefaultValue',
+        this.editForm.setControl('calculatedDefaultValue',
             new FormControl(this.properties.calculatedDefaultValue));
 
-        this.editForm.addControl('maxValue',
+        this.editForm.setControl('maxValue',
             new FormControl(this.properties.maxValue, [
                 ValidatorsEx.validDateTime()
             ]));
 
-        this.editForm.addControl('minValue',
+        this.editForm.setControl('minValue',
             new FormControl(this.properties.minValue, [
                 ValidatorsEx.validDateTime()
             ]));
 
-        this.editForm.addControl('defaultValue',
+        this.editForm.setControl('defaultValue',
             new FormControl(this.properties.defaultValue, [
                 ValidatorsEx.validDateTime()
             ]));

src/Squidex/app/features/schemas/pages/schema/types/geolocation-ui.component.ts

@@ -23,7 +23,7 @@ export class GeolocationUIComponent implements OnInit {
     public properties: GeolocationFieldPropertiesDto;
 
     public ngOnInit() {
-        this.editForm.addControl('editor',
+        this.editForm.setControl('editor',
             new FormControl(this.properties.editor, [
                 Validators.required
             ]));

src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.html

@@ -51,4 +51,14 @@
             <sqx-tag-editor formControlName="allowedValues" [converter]="converter"></sqx-tag-editor>
         </div>
     </div>
+    <div class="form-group row" [class.hidden]="hideInlineEditable | async">
+        <div class="col col-9 offset-3">
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="fieldInlineEditable" formControlName="inlineEditable" />
+                <label class="form-check-label" for="fieldInlineEditable">
+                    Inline Editable
+                </label>
+            </div>
+        </div>
+    </div>
 </div>

src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.ts

@@ -17,7 +17,8 @@ import { FloatConverter, NumberFieldPropertiesDto } from 'shared';
     templateUrl: 'number-ui.component.html'
 })
 export class NumberUIComponent implements OnDestroy, OnInit {
-    private editorSubscription: Subscription;
+    private hideAllowedValuesSubscription: Subscription;
+    private hideInlineEditableSubscription: Subscription;
 
     @Input()
     public editForm: FormGroup;
@@ -28,33 +29,52 @@ export class NumberUIComponent implements OnDestroy, OnInit {
     public converter = new FloatConverter();
 
     public hideAllowedValues: Observable<boolean>;
+    public hideInlineEditable: Observable<boolean>;
 
     public ngOnDestroy() {
-        this.editorSubscription.unsubscribe();
+        this.hideAllowedValuesSubscription.unsubscribe();
+        this.hideInlineEditableSubscription.unsubscribe();
     }
 
     public ngOnInit() {
-        this.editForm.addControl('editor',
+        this.editForm.setControl('editor',
             new FormControl(this.properties.editor, [
                 Validators.required
             ]));
-        this.editForm.addControl('placeholder',
+
+        this.editForm.setControl('placeholder',
             new FormControl(this.properties.placeholder, [
                 Validators.maxLength(100)
             ]));
-        this.editForm.addControl('allowedValues',
+
+        this.editForm.setControl('allowedValues',
             new FormControl(this.properties.allowedValues, []));
 
+        this.editForm.setControl('inlineEditable',
+            new FormControl(this.properties.inlineEditable));
+
         this.hideAllowedValues =
             this.editForm.controls['editor'].valueChanges
                 .startWith(this.properties.editor)
-                .map(x => !x || x === 'Input' || x === 'Textarea');
+                .map(x => !(x && (x === 'Radio' || x === 'Dropdown')));
+
+        this.hideInlineEditable =
+            this.editForm.controls['editor'].valueChanges
+                .startWith(this.properties.editor)
+                .map(x => !(x && (x === 'Input' || x === 'Dropdown')));
 
-        this.editorSubscription =
+        this.hideAllowedValuesSubscription =
             this.hideAllowedValues.subscribe(isSelection => {
                 if (isSelection) {
                     this.editForm.controls['allowedValues'].setValue(undefined);
                 }
             });
+
+        this.hideInlineEditableSubscription =
+            this.hideInlineEditable.subscribe(isSelection => {
+                if (isSelection) {
+                    this.editForm.controls['inlineEditable'].setValue(false);
+                }
+            });
     }
 }

src/Squidex/app/features/schemas/pages/schema/types/number-validation.component.ts

@@ -26,13 +26,13 @@ export class NumberValidationComponent implements OnInit {
     public showDefaultValue: Observable<boolean>;
 
     public ngOnInit() {
-        this.editForm.addControl('maxValue',
+        this.editForm.setControl('maxValue',
             new FormControl(this.properties.maxValue));
 
-        this.editForm.addControl('minValue',
+        this.editForm.setControl('minValue',
             new FormControl(this.properties.minValue));
 
-        this.editForm.addControl('defaultValue',
+        this.editForm.setControl('defaultValue',
             new FormControl(this.properties.defaultValue));
 
         this.showDefaultValue =

src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html

@@ -72,4 +72,14 @@
             <sqx-tag-editor formControlName="allowedValues"></sqx-tag-editor>
         </div>
     </div>
+    <div class="form-group row" [class.hidden]="hideInlineEditable | async">
+        <div class="col col-9 offset-3">
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="fieldInlineEditable" formControlName="inlineEditable" />
+                <label class="form-check-label" for="fieldInlineEditable">
+                    Inline Editable
+                </label>
+            </div>
+        </div>
+    </div>
 </div>

src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.ts

@@ -17,7 +17,8 @@ import { StringFieldPropertiesDto } from 'shared';
     templateUrl: 'string-ui.component.html'
 })
 export class StringUIComponent implements OnDestroy, OnInit {
-    private editorSubscription: Subscription;
+    private hideAllowedValuesSubscription: Subscription;
+    private hideInlineEditableSubscription: Subscription;
 
     @Input()
     public editForm: FormGroup;
@@ -26,9 +27,11 @@ export class StringUIComponent implements OnDestroy, OnInit {
     public properties: StringFieldPropertiesDto;
 
     public hideAllowedValues: Observable<boolean>;
+    public hideInlineEditable: Observable<boolean>;
 
     public ngOnDestroy() {
-        this.editorSubscription.unsubscribe();
+        this.hideAllowedValuesSubscription.unsubscribe();
+        this.hideInlineEditableSubscription.unsubscribe();
     }
 
     public ngOnInit() {
@@ -45,17 +48,31 @@ export class StringUIComponent implements OnDestroy, OnInit {
         this.editForm.setControl('allowedValues',
             new FormControl(this.properties.allowedValues));
 
+        this.editForm.setControl('inlineEditable',
+            new FormControl(this.properties.inlineEditable));
+
         this.hideAllowedValues =
             this.editForm.controls['editor'].valueChanges
                 .startWith(this.properties.editor)
-                .map(x => !x || x === 'Input' || x === 'TextArea' || x === 'RichText' || x === 'Markdown');
-
-        this.editorSubscription =
-            this.hideAllowedValues
-                .subscribe(isSelection => {
-                    if (isSelection) {
-                        this.editForm.controls['allowedValues'].setValue(undefined);
-                    }
-                });
+                .map(x => !(x && (x === 'Radio' || x === 'Dropdown')));
+
+        this.hideInlineEditable =
+            this.editForm.controls['editor'].valueChanges
+                .startWith(this.properties.editor)
+                .map(x => !(x && (x === 'Input' || x === 'Dropdown' || x === 'Slug')));
+
+        this.hideAllowedValuesSubscription =
+            this.hideAllowedValues.subscribe(isSelection => {
+                if (isSelection) {
+                    this.editForm.controls['allowedValues'].setValue(undefined);
+                }
+            });
+
+        this.hideInlineEditableSubscription =
+            this.hideInlineEditable.subscribe(isSelection => {
+                if (isSelection) {
+                    this.editForm.controls['inlineEditable'].setValue(false);
+                }
+            });
     }
 }

src/Squidex/app/features/schemas/pages/schema/types/string-validation.component.ts

@@ -64,14 +64,14 @@ export class StringValidationComponent implements OnDestroy, OnInit {
                 .startWith(this.properties.isRequired)
                 .map(x => !x);
 
-        this.showPatternMessage =
-            this.editForm.controls['pattern'].value && this.editForm.controls['pattern'].value.trim().length > 0;
-
         this.showPatternSuggestions =
             this.editForm.controls['pattern'].valueChanges
                 .startWith('')
                 .map(x => !x || x.trim().length === 0);
 
+        this.showPatternMessage =
+            this.editForm.controls['pattern'].value && this.editForm.controls['pattern'].value.trim().length > 0;
+
         this.patternSubscription =
             this.editForm.controls['pattern'].valueChanges
                 .subscribe((value: string) => {

src/Squidex/app/shared/services/schemas.service.ts

@@ -355,7 +355,7 @@ export class StringFieldPropertiesDto extends FieldPropertiesDto {
     constructor(label: string | null, hints: string | null, placeholder: string | null,
         isRequired: boolean,
         isListField: boolean,
-        public readonly isInlineEditable: boolean,
+        public readonly inlineEditable: boolean,
         public readonly editor: string,
         public readonly defaultValue?: string,
         public readonly pattern?: string,
@@ -416,7 +416,7 @@ export class NumberFieldPropertiesDto extends FieldPropertiesDto {
     constructor(label: string | null, hints: string | null, placeholder: string | null,
         isRequired: boolean,
         isListField: boolean,
-        public readonly isInlineEditable: boolean,
+        public readonly inlineEditable: boolean,
         public readonly editor: string,
         public readonly defaultValue?: number,
         public readonly maxValue?: number,
@@ -525,7 +525,7 @@ export class BooleanFieldPropertiesDto extends FieldPropertiesDto {
     constructor(label: string | null, hints: string | null, placeholder: string | null,
         isRequired: boolean,
         isListField: boolean,
-        public readonly isInlineEditable: boolean,
+        public readonly inlineEditable: boolean,
         public readonly editor: string,
         public readonly defaultValue?: boolean
     ) {