Boolean management

src/Squidex/app/features/schemas/declarations.ts

@@ -5,6 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
+export * from './pages/schema/types/boolean-ui.component';
+export * from './pages/schema/types/boolean-validation.component';
 export * from './pages/schema/types/number-ui.component';
 export * from './pages/schema/types/number-validation.component';
 export * from './pages/schema/types/string-ui.component';

src/Squidex/app/features/schemas/module.ts

@@ -16,6 +16,8 @@ import {
 
 import {
     FieldComponent,
+    BooleanUIComponent,
+    BooleanValidationComponent,
     NumberUIComponent,
     NumberValidationComponent,
     SchemaFormComponent,
@@ -57,6 +59,8 @@ const routes: Routes = [
     ],
     declarations: [
         FieldComponent,
+        BooleanUIComponent,
+        BooleanValidationComponent,
         NumberUIComponent,
         NumberValidationComponent,
         SchemaFormComponent,

src/Squidex/app/features/schemas/pages/schema/field.component.html

@@ -119,6 +119,9 @@
                     <div *ngSwitchCase="'string'">
                         <sqx-string-validation [editForm]="editForm" [properties]="field.properties"></sqx-string-validation>
                     </div>
+                    <div *ngSwitchCase="'boolean'">
+                        <sqx-boolean-validation [editForm]="editForm" [properties]="field.properties"></sqx-boolean-validation>
+                    </div>
                 </div>
             </div>
 
@@ -130,6 +133,9 @@
                     <div *ngSwitchCase="'string'">
                         <sqx-string-ui [editForm]="editForm" [properties]="field.properties"></sqx-string-ui>
                     </div>
+                    <div *ngSwitchCase="'boolean'">
+                        <sqx-boolean-ui [editForm]="editForm" [properties]="field.properties"></sqx-boolean-ui>
+                    </div>
                 </div>
             </div>
         </form> 

src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts

@@ -35,7 +35,8 @@ export class SchemaPageComponent extends AppComponentBase implements OnDestroy,
 
     public fieldTypes: string[] = [
         'string',
-        'number'
+        'number',
+        'boolean'
     ];
 
     public schemaName: string;

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

@@ -0,0 +1,41 @@
+<div [formGroup]="editForm">
+    <div class="form-group row">
+        <label for="field-placeholder" class="col-xs-3 col-form-label">Placeholder</label>
+
+        <div class="col-xs-6">
+            <div class="errors-box" *ngIf="editForm.controls.placeholder.invalid && editForm.controls.placeholder.touched" [@fade]>
+                <div class="errors">
+                    <span *ngIf="editForm.controls.placeholder.hasError('maxlength')">
+                        Placeholder can not have more than 100 characters.
+                    </span>
+                </div>
+            </div>
+
+            <input type="text" class="form-control" id="field-placeholder" maxlength="100" formControlName="placeholder" />
+
+            <span class="form-hint">
+                Define the placeholder for the input control.
+            </span>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="field-editor" class="col-xs-3 col-form-label">Editor</label>
+
+        <div class="col-xs-9">
+            <label class="btn btn-radio" [class.active]="editForm.controls.editor.value === 'Checkbox'">
+                <input type="radio" class="radio-input" formControlName="editor" value="Checkbox" />
+
+                <i class="icon-control-checkbox"></i>
+
+                <span class="radio-label">Checkbox</span>
+            </label>
+            <label class="btn btn-radio" [class.active]="editForm.controls.editor.value === 'Toggle'">
+                <input type="radio" class="radio-input" formControlName="editor" value="Toggle" />
+
+                <i class="icon-control-toggle"></i>
+
+                <span class="radio-label" clas>Toggle</span>
+            </label>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,2 @@
+@import '_vars';
+@import '_mixins';

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

@@ -0,0 +1,47 @@
+/*
+ * Squidex Headless CMS
+ * 
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Observable } from 'rxjs';
+
+import {
+    fadeAnimation,
+    FloatConverter,
+    BooleanFieldPropertiesDto
+} from 'shared';
+
+@Component({
+    selector: 'sqx-boolean-ui',
+    styleUrls: ['boolean-ui.component.scss'],
+    templateUrl: 'boolean-ui.component.html',
+    animations: [
+        fadeAnimation
+    ]
+})
+export class BooleanUIComponent implements OnInit {
+    @Input()
+    public editForm: FormGroup;
+
+    @Input()
+    public properties: BooleanFieldPropertiesDto;
+
+    public converter = new FloatConverter();
+
+    public hideAllowedValues: Observable<boolean>;
+
+    public ngOnInit() {
+        this.editForm.addControl('editor',
+            new FormControl(this.properties.editor, [
+                Validators.required
+            ]));
+        this.editForm.addControl('placeholder',
+            new FormControl(this.properties.placeholder, [
+                Validators.maxLength(100)
+            ]));
+    }
+}

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

@@ -0,0 +1,17 @@
+<div [formGroup]="editForm">
+    <div class="form-group row">
+        <label class="col-xs-3 col-form-checkbox-label" for="field-required">Required</label>
+
+        <div class="col-xs-6">
+            <input type="checkbox" class="form-check-input" id="field-required" formControlName="isRequired" />
+        </div>
+    </div>
+
+    <div class="form-group row" [class.hide]="(hideDefaultValue | async)">
+        <label class="col-xs-3 col-form-label" for="field-default-value">Default Value</label>
+
+        <div class="col-xs-6">
+            <input type="number" class="form-control" id="field-default-value" formControlName="defaultValue" />
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,16 @@
+@import '_vars';
+@import '_mixins';
+
+.minlength {
+    &-col {
+        position: relative;
+    }
+
+    &-label {
+        @include absolute(0, -4px, auto, auto);
+    }
+}
+
+.form-check-input {
+    margin: 0;
+}

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

@@ -0,0 +1,37 @@
+/*
+ * Squidex Headless CMS
+ * 
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { Observable } from 'rxjs';
+
+import { BooleanFieldPropertiesDto } from 'shared';
+
+@Component({
+    selector: 'sqx-boolean-validation',
+    styleUrls: ['boolean-validation.component.scss'],
+    templateUrl: 'boolean-validation.component.html'
+})
+export class BooleanValidationComponent implements OnInit {
+    @Input()
+    public editForm: FormGroup;
+
+    @Input()
+    public properties: BooleanFieldPropertiesDto;
+
+    public hideDefaultValue: Observable<boolean>;
+
+    public ngOnInit() {
+        this.editForm.addControl('defaultValue',
+            new FormControl(this.properties.defaultValue));
+
+        this.hideDefaultValue =
+            Observable.of(this.properties.isRequired)
+                .merge(this.editForm.get('isRequired').valueChanges)
+                .map(x => !!x);
+    }
+}

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

@@ -24,20 +24,20 @@ export function createProperties(fieldType: string, values: {} | null = null): F
         case 'number':
             properties =
                 new NumberFieldPropertiesDto(
-                    undefined, undefined, undefined, false,
+                    undefined, undefined, undefined, false, 'Input',
-                    undefined, undefined, undefined, undefined, undefined);
+                    undefined, undefined, undefined, undefined);
             break;
         case 'string':
             properties =
                 new StringFieldPropertiesDto(
-                    undefined, undefined, undefined, false,
+                    undefined, undefined, undefined, false, 'Input',
-                    undefined, undefined, undefined, undefined, undefined, undefined, undefined);
+                    undefined, undefined, undefined, undefined, undefined, undefined);
             break;
         case 'boolean':
             properties =
                 new BooleanFieldPropertiesDto(
-                    undefined, undefined, undefined, false,
+                    undefined, undefined, undefined, false, 'Checkbox',
-                    undefined, undefined);
+                    undefined);
             break;
         default:
             throw 'Invalid properties type';