UI for tags editor

src/Squidex/app/features/content/pages/content/content-field.component.html

@@ -98,6 +98,9 @@
                     <div *ngSwitchCase="'Assets'">
                         <sqx-assets-editor [formControlName]="partition"></sqx-assets-editor>
                     </div>
+                    <div *ngSwitchCase="'Tags'">
+                        <sqx-tag-editor [formControlName]="partition"></sqx-tag-editor>
+                    </div>
                     <div *ngSwitchCase="'References'">
                         <sqx-references-editor [formControlName]="partition" [languageCode]="selectFieldLanguage(partition)" [schemaId]="field.properties.schemaId"></sqx-references-editor>
                     </div>

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

@@ -21,9 +21,13 @@ export * from './pages/schema/types/references-ui.component';
 export * from './pages/schema/types/references-validation.component';
 export * from './pages/schema/types/string-ui.component';
 export * from './pages/schema/types/string-validation.component';
+export * from './pages/schema/types/tags-ui.component';
+export * from './pages/schema/types/tags-validation.component';
+
 export * from './pages/schema/field.component';
 export * from './pages/schema/schema-edit-form.component';
 export * from './pages/schema/schema-page.component';
 export * from './pages/schema/schema-scripts-form.component';
+
 export * from './pages/schemas/schema-form.component';
 export * from './pages/schemas/schemas-page.component';

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

@@ -39,7 +39,9 @@ import {
     SchemasPageComponent,
     SchemaScriptsFormComponent,
     StringUIComponent,
-    StringValidationComponent
+    StringValidationComponent,
+    TagsUIComponent,
+    TagsValidationComponent
 } from './declarations';
 
 const routes: Routes = [
@@ -105,7 +107,9 @@ const routes: Routes = [
         SchemaScriptsFormComponent,
         SchemasPageComponent,
         StringUIComponent,
-        StringValidationComponent
+        StringValidationComponent,
+        TagsUIComponent,
+        TagsValidationComponent
     ]
 })
 export class SqxFeatureSchemasModule { }

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

@@ -159,6 +159,9 @@
                     <div *ngSwitchCase="'References'">
                         <sqx-references-validation [editForm]="editForm" [properties]="field.properties" [schemas]="schemas"></sqx-references-validation>
                     </div>
+                    <div *ngSwitchCase="'Tags'">
+                        <sqx-tags-validation [editForm]="editForm" [properties]="field.properties"></sqx-tags-validation>
+                    </div>
                 </div>
             </div>
 
@@ -188,6 +191,9 @@
                     <div *ngSwitchCase="'References'">
                         <sqx-references-ui [editForm]="editForm" [properties]="field.properties"></sqx-references-ui>
                     </div>
+                    <div *ngSwitchCase="'Tags'">
+                        <sqx-tags-ui [editForm]="editForm" [properties]="field.properties"></sqx-tags-ui>
+                    </div>
                 </div>
             </div>
         </form> 

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

@@ -0,0 +1,3 @@
+<div [formGroup]="editForm">
+    <span>Nothing to setup</span>    
+<div>

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

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

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

@@ -0,0 +1,25 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { AssetsFieldPropertiesDto } from 'shared';
+
+@Component({
+    selector: 'sqx-tags-ui',
+    styleUrls: ['tags-ui.component.scss'],
+    templateUrl: 'tags-ui.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TagsUIComponent {
+    @Input()
+    public editForm: FormGroup;
+
+    @Input()
+    public properties: AssetsFieldPropertiesDto;
+}

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

@@ -0,0 +1,22 @@
+<div [formGroup]="editForm">
+    <div class="form-group row">
+        <label class="col col-3 col-form-checkbox-label" for="field-required">Required</label>
+
+        <div class="col col-6">
+            <input type="checkbox" class="form-check-input" id="field-required" formControlName="isRequired" />
+        </div>
+    </div>
+
+    <div class="form-group row">
+        <label class="col col-3 col-form-label">Items</label>
+
+        <div class="col col-3 minlength-col">
+            <input type="number" class="form-control" id="field-min-items" formControlName="minItems" placeholder="Min Items" />
+            
+            <label class="col-form-label minitems-label">-</label>
+        </div>
+        <div class="col col-3">
+            <input type="number" class="form-control" id="field-max-items" formControlName="maxItems" placeholder="Max Items" />
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,20 @@
+@import '_vars';
+@import '_mixins';
+
+.minitems {
+    &-col {
+        position: relative;
+    }
+
+    &-label {
+        @include absolute(0, -.2rem, auto, auto);
+    }
+}
+
+.form-check-input {
+    margin: 0;
+}
+
+.form-group {
+    margin-top: .5rem;
+}

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

@@ -0,0 +1,33 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+import { AssetsFieldPropertiesDto } from 'shared';
+
+@Component({
+    selector: 'sqx-tags-validation',
+    styleUrls: ['tags-validation.component.scss'],
+    templateUrl: 'tags-validation.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TagsValidationComponent implements OnInit {
+    @Input()
+    public editForm: FormGroup;
+
+    @Input()
+    public properties: AssetsFieldPropertiesDto;
+
+    public ngOnInit() {
+        this.editForm.setControl('maxItems',
+            new FormControl(this.properties.maxItems));
+
+        this.editForm.setControl('minItems',
+            new FormControl(this.properties.minItems));
+    }
+}

src/Squidex/app/shared/services/schemas.fields.spec.ts

@@ -16,7 +16,8 @@ import {
     JsonFieldPropertiesDto,
     NumberFieldPropertiesDto,
     ReferencesFieldPropertiesDto,
-    StringFieldPropertiesDto
+    StringFieldPropertiesDto,
+    TagsFieldPropertiesDto
 } from './../';
 
 describe('FieldDto', () => {
@@ -85,6 +86,26 @@ describe('AssetsField', () => {
     });
 });
 
+describe('TagsField', () => {
+    const field = createField(new TagsFieldPropertiesDto(null, null, null, true, false, 1, 1));
+
+    it('should create validators', () => {
+        expect(field.createValidators(false).length).toBe(3);
+    });
+
+    it('should format to empty string if null', () => {
+        expect(field.formatValue(null)).toBe('');
+    });
+
+    it('should format to asset count', () => {
+        expect(field.formatValue(['hello', 'squidex', 'cms'])).toBe('hello, squidex, cms');
+    });
+
+    it('should return zero formatting if other type', () => {
+        expect(field.formatValue(1)).toBe('');
+    });
+});
+
 describe('BooleanField', () => {
     const field = createField(new BooleanFieldPropertiesDto(null, null, null, true, false, 'Checkbox'));
 

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

@@ -386,6 +386,17 @@ describe('SchemasService', () => {
                     properties: {
                         fieldType: 'References'
                     }
+                },
+                {
+                    fieldId: 9,
+                    name: 'field9',
+                    isLocked: true,
+                    isHidden: true,
+                    isDisabled: true,
+                    partitioning: 'language',
+                    properties: {
+                        fieldType: 'Tags'
+                    }
                 }
             ],
             scriptQuery: '<script-query>',
@@ -412,7 +423,8 @@ describe('SchemasService', () => {
                     new FieldDto(5, 'field5', true, true, true, 'language', createProperties('Json')),
                     new FieldDto(6, 'field6', true, true, true, 'language', createProperties('Geolocation')),
                     new FieldDto(7, 'field7', true, true, true, 'language', createProperties('Assets')),
-                    new FieldDto(8, 'field8', true, true, true, 'language', createProperties('References'))
+                    new FieldDto(8, 'field8', true, true, true, 'language', createProperties('References')),
+                    new FieldDto(9, 'field9', true, true, true, 'language', createProperties('Tags'))
                 ],
                 '<script-query>',
                 '<script-create>',

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

@@ -31,7 +31,8 @@ export const fieldTypes: string[] = [
     'Json',
     'Number',
     'References',
-    'String'
+    'String',
+    'Tags'
 ];
 
 export function createProperties(fieldType: string, values: Object | null = null): FieldPropertiesDto {
@@ -62,6 +63,9 @@ export function createProperties(fieldType: string, values: Object | null = null
         case 'Assets':
             properties = new AssetsFieldPropertiesDto(null, null, null, false, false);
             break;
+        case 'Tags':
+            properties = new TagsFieldPropertiesDto(null, null, null, false, false);
+            break;
         default:
             throw 'Invalid properties type';
     }
@@ -607,6 +611,47 @@ export class AssetsFieldPropertiesDto extends FieldPropertiesDto {
     }
 }
 
+export class TagsFieldPropertiesDto extends FieldPropertiesDto {
+    constructor(label: string | null, hints: string | null, placeholder: string | null,
+        isRequired: boolean,
+        isListField: boolean,
+        public readonly minItems?: number,
+        public readonly maxItems?: number
+    ) {
+        super('Tags', label, hints, placeholder, isRequired, isListField);
+    }
+
+    public formatValue(value: any): string {
+        if (!value) {
+            return '';
+        }
+
+        if (value.length) {
+            return value.join(', ');
+        } else {
+            return '';
+        }
+    }
+
+    public createValidators(isOptional: boolean): ValidatorFn[] {
+        const validators: ValidatorFn[] = [];
+
+        if (this.isRequired && !isOptional) {
+            validators.push(Validators.required);
+        }
+
+        if (this.minItems) {
+            validators.push(Validators.minLength(this.minItems));
+        }
+
+        if (this.maxItems) {
+            validators.push(Validators.maxLength(this.maxItems));
+        }
+
+        return validators;
+    }
+}
+
 export class JsonFieldPropertiesDto extends FieldPropertiesDto {
     constructor(label: string | null, hints: string | null, placeholder: string | null,
         isRequired: boolean,