From 33244550bb9899bb2d19f6a86123a6c0a8a95f2c Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Mon, 18 Nov 2019 17:54:28 +0100
Subject: [PATCH] Added tags to query editor.

---
 .../queries/filter-comparison.component.html  | 118 +++++++++---------
 frontend/app/shared/state/query.ts            |  12 +-
 2 files changed, 67 insertions(+), 63 deletions(-)

diff --git a/frontend/app/shared/components/queries/filter-comparison.component.html b/frontend/app/shared/components/queries/filter-comparison.component.html
index 163587209..9013fc71e 100644
--- a/frontend/app/shared/components/queries/filter-comparison.component.html
+++ b/frontend/app/shared/components/queries/filter-comparison.component.html
@@ -1,64 +1,60 @@
-<div class="row">
-    <div class="col">
-        <div class="form-inline">
-            <select class="form-control path mb-1 mr-2" [ngModel]="filter.path" (ngModelChange)="changePath($event)">
-                <option *ngFor="let fieldName of model.fields | sqxKeys" [ngValue]="fieldName">{{fieldName}}</option>
-            </select>
-
-            <ng-container *ngIf="fieldModel">
-                <select class="form-control mb-1 mr-2" [ngModel]="filter.op" (ngModelChange)="changeOp($event)">
-                    <option *ngFor="let operator of fieldModel.operators" [ngValue]="operator.value">{{operator.name || operator.value}}</option>
-                </select>
-
-                <div class="mb-1" *ngIf="!noValue" [ngSwitch]="fieldModel.type">
-                    <ng-container *ngSwitchCase="'boolean'">
-                        <input type="checkbox" class="form-control"
-                            [ngModel]="filter.value"
-                            (ngModelChange)="changeValue($event)" />
-                    </ng-container>
-                    <ng-container *ngSwitchCase="'date'">
-                        <sqx-date-time-editor mode="Date"
-                            [ngModel]="filter.value"
-                            (ngModelChange)="changeValue($event)">
-                        </sqx-date-time-editor>
-                    </ng-container>
-                    <ng-container *ngSwitchCase="'datetime'">
-                        <sqx-date-time-editor mode="DateTime"
-                            [ngModel]="filter.value"
-                            (ngModelChange)="changeValue($event)">
-                        </sqx-date-time-editor>
-                    </ng-container>
-                    <ng-container *ngSwitchCase="'number'">
-                        <input type="number" class="form-control"
-                            [ngModel]="filter.value"
-                            (ngModelChange)="changeValue($event)" />
-                    </ng-container>
-                    <ng-container *ngSwitchCase="'reference'">
-                        <sqx-references-dropdown [schemaId]="fieldModel.extra"
-                            mode="Single"
-                            [ngModel]="filter.value"
-                            (ngModelChange)="changeValue($event)"
-                            [language]="language">
-                        </sqx-references-dropdown>
-                    </ng-container>
-                    <ng-container *ngSwitchCase="'status'">
-                        <sqx-dropdown [items]="fieldModel.extra"
-                            [ngModel]="getStatus(fieldModel.extra)"
-                            (ngModelChange)="changeStatus($event)"
-                            [canSearch]="false">
-                            <ng-template let-target="$implicit">
-                                <i class="icon-circle" [style.color]="target.color"></i> {{target.status}}
-                            </ng-template>
-                        </sqx-dropdown>
-                    </ng-container>
-                    <ng-container *ngSwitchCase="'string'">
-                        <input type="text" class="form-control" *ngIf="!fieldModel.extra"
-                            [ngModel]="filter.value"
-                            (ngModelChange)="changeValue($event)" />
-                    </ng-container>
-                </div>
-            </ng-container>
-        </div>
+<div class="row no-gutters mb-1" *ngIf="fieldModel">
+    <div class="col-auto path">
+        <select class="form-control" [ngModel]="filter.path" (ngModelChange)="changePath($event)">
+            <option *ngFor="let fieldName of model.fields | sqxKeys" [ngValue]="fieldName">{{fieldName}}</option>
+        </select>
+    </div>
+    <div class="col-auto pl-2">
+        <select class="form-control" [ngModel]="filter.op" (ngModelChange)="changeOp($event)">
+            <option *ngFor="let operator of fieldModel.operators" [ngValue]="operator.value">{{operator.name || operator.value}}</option>
+        </select>
+    </div>
+    <div class="col pl-2" *ngIf="!noValue" [ngSwitch]="fieldModel.type">
+        <ng-container *ngSwitchCase="'boolean'">
+            <input type="checkbox" class="form-control"
+                [ngModel]="filter.value"
+                (ngModelChange)="changeValue($event)" />
+        </ng-container>
+        <ng-container *ngSwitchCase="'date'">
+            <sqx-date-time-editor mode="Date"
+                [ngModel]="filter.value"
+                (ngModelChange)="changeValue($event)">
+            </sqx-date-time-editor>
+        </ng-container>
+        <ng-container *ngSwitchCase="'datetime'">
+            <sqx-date-time-editor mode="DateTime"
+                [ngModel]="filter.value"
+                (ngModelChange)="changeValue($event)">
+            </sqx-date-time-editor>
+        </ng-container>
+        <ng-container *ngSwitchCase="'number'">
+            <input type="number" class="form-control"
+                [ngModel]="filter.value"
+                (ngModelChange)="changeValue($event)" />
+        </ng-container>
+        <ng-container *ngSwitchCase="'reference'">
+            <sqx-references-dropdown [schemaId]="fieldModel.extra"
+                mode="Single"
+                [ngModel]="filter.value"
+                (ngModelChange)="changeValue($event)"
+                [language]="language">
+            </sqx-references-dropdown>
+        </ng-container>
+        <ng-container *ngSwitchCase="'status'">
+            <sqx-dropdown [items]="fieldModel.extra"
+                [ngModel]="getStatus(fieldModel.extra)"
+                (ngModelChange)="changeStatus($event)"
+                [canSearch]="false">
+                <ng-template let-target="$implicit">
+                    <i class="icon-circle" [style.color]="target.color"></i> {{target.status}}
+                </ng-template>
+            </sqx-dropdown>
+        </ng-container>
+        <ng-container *ngSwitchCase="'string'">
+            <input type="text" class="form-control" *ngIf="!fieldModel.extra"
+                [ngModel]="filter.value"
+                (ngModelChange)="changeValue($event)" />
+        </ng-container>
     </div>
     <div class="col-auto pl-2">
         <button type="button" class="btn btn-text-danger" (click)="emitRemove()">
diff --git a/frontend/app/shared/state/query.ts b/frontend/app/shared/state/query.ts
index d99f095eb..59b450690 100644
--- a/frontend/app/shared/state/query.ts
+++ b/frontend/app/shared/state/query.ts
@@ -20,7 +20,8 @@ export type QueryValueType =
     'number' |
     'reference' |
     'status' |
-    'string';
+    'string' |
+    'tags';
 
 export interface FilterOperator {
     // The optional display value.
@@ -171,6 +172,11 @@ const TypeString: QueryFieldModel = {
     operators: [...EqualOperators, ...CompareOperator, ...StringOperators, ...ArrayOperators]
 };
 
+const TypeTags: QueryFieldModel = {
+    type: 'string',
+    operators: EqualOperators
+};
+
 export function queryModelFromSchema(schema: SchemaDetailsDto, languages: ReadonlyArray<LanguageDto>, statuses: ReadonlyArray<StatusInfo> | undefined) {
     const languagesCodes = languages.map(x => x.iso2Code);
 
@@ -193,7 +199,9 @@ export function queryModelFromSchema(schema: SchemaDetailsDto, languages: Readon
     for (const field of schema.fields) {
         let type: QueryFieldModel | null = null;
 
-        if (field.properties.fieldType === 'Boolean') {
+        if (field.properties.fieldType === 'Tags') {
+            type = TypeTags;
+        } else if (field.properties.fieldType === 'Boolean') {
             type = TypeBoolean;
         } else if (field.properties.fieldType === 'Number') {
             type = TypeNumber;