From 0144baca3edf3bbb39225ced2d4d06d073f90e94 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Fri, 31 Jan 2020 14:13:57 +0100
Subject: [PATCH] Bugfix for filtering UI (#480)

---
 .../queries/filter-logical.component.html     |  4 +--
 .../queries/filter-logical.component.ts       |  4 +--
 .../search/queries/query.component.html       |  6 ++--
 .../search/queries/query.component.ts         | 30 ++++++++++++++-----
 .../search/search-form.component.html         |  6 ++--
 5 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/frontend/app/shared/components/search/queries/filter-logical.component.html b/frontend/app/shared/components/search/queries/filter-logical.component.html
index 73f5b4dc7..41634721e 100644
--- a/frontend/app/shared/components/search/queries/filter-logical.component.html
+++ b/frontend/app/shared/components/search/queries/filter-logical.component.html
@@ -22,11 +22,11 @@
     <div class="filters">
         <span class="filter-line-v"></span>
         
-        <div class="filter mt-3" *ngFor="let filter of filters">
+        <div class="filter mt-3" *ngFor="let filter of filters; let i = index">
             <span class="filter-line-h"></span>
     
             <sqx-filter-node [filter]="filter" [language]="language" [level]="nestedLevel" [model]="model"
-                (remove)="removeFilter(filter)" (change)="emitChange()">
+                (remove)="removeFilter(i)" (change)="emitChange()">
             </sqx-filter-node>
         </div>
 
diff --git a/frontend/app/shared/components/search/queries/filter-logical.component.ts b/frontend/app/shared/components/search/queries/filter-logical.component.ts
index bf4b5ad4a..ccc019d65 100644
--- a/frontend/app/shared/components/search/queries/filter-logical.component.ts
+++ b/frontend/app/shared/components/search/queries/filter-logical.component.ts
@@ -80,8 +80,8 @@ export class FilterLogicalComponent {
         this.emitChange();
     }
 
-    public removeFilter(node: FilterNode) {
-        this.filters.splice(this.filters.indexOf(node), 1);
+    public removeFilter(index: number) {
+        this.filters.splice(index, 1);
 
         this.emitChange();
     }
diff --git a/frontend/app/shared/components/search/queries/query.component.html b/frontend/app/shared/components/search/queries/query.component.html
index 63f85d7fd..edfb09d0d 100644
--- a/frontend/app/shared/components/search/queries/query.component.html
+++ b/frontend/app/shared/components/search/queries/query.component.html
@@ -1,12 +1,12 @@
 <sqx-filter-logical isRoot="true" [filter]="queryValue.filter" [model]="model" [language]="language"
-    (change)="queryChange.emit()">
+    (change)="emitQueryChange()">
 </sqx-filter-logical>
 
 <h4 class="mt-4">Sorting</h4>
 
-<div class="mb-2" *ngFor="let sorting of queryValue.sort">
+<div class="mb-2" *ngFor="let sorting of queryValue.sort; let i = index">
     <sqx-sorting [sorting]="sorting" [model]="model"
-        (remove)="removeSorting(sorting)" (change)="queryChange.emit()">
+        (remove)="removeSorting(i)" (change)="emitQueryChange()">
     </sqx-sorting>
 </div>
 
diff --git a/frontend/app/shared/components/search/queries/query.component.ts b/frontend/app/shared/components/search/queries/query.component.ts
index 7f3e7ad4b..6cf8532e7 100644
--- a/frontend/app/shared/components/search/queries/query.component.ts
+++ b/frontend/app/shared/components/search/queries/query.component.ts
@@ -10,9 +10,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import {
     LanguageDto,
     Query,
-    QueryModel,
-    QuerySorting,
-    Types
+    QueryModel
 } from '@app/shared/internal';
 
 @Component({
@@ -33,19 +31,37 @@ export class QueryComponent {
 
     @Input()
     public set query(query: Query) {
-        this.queryValue = Types.clone(query);
+        if (!query) {
+            query = {};
+        }
+
+        if (!query.filter) {
+            query.filter = { and: [] };
+        }
+
+        if (!query.sort) {
+            query.sort = [];
+        }
+
+        this.queryValue = query;
     }
 
     public queryValue: Query = {};
 
     public addSorting() {
-        this.queryValue.sort!.push({ path: Object.keys(this.model.fields)[0], order: 'ascending' });
+        const path = Object.keys(this.model.fields)[0];
+
+        if (this.queryValue.sort) {
+            this.queryValue.sort.push({ path, order: 'ascending' });
+        }
 
         this.emitQueryChange();
     }
 
-    public removeSorting(sorting: QuerySorting) {
-        this.queryValue.sort!.splice(this.queryValue.sort!.indexOf(sorting), 1);
+    public removeSorting(index: number) {
+        if (this.queryValue.sort) {
+            this.queryValue.sort.splice(index, 1);
+        }
 
         this.emitQueryChange();
     }
diff --git a/frontend/app/shared/components/search/search-form.component.html b/frontend/app/shared/components/search/search-form.component.html
index 1c9e1d5c8..6e65fa01a 100644
--- a/frontend/app/shared/components/search/search-form.component.html
+++ b/frontend/app/shared/components/search/search-form.component.html
@@ -62,9 +62,9 @@
         </ng-container>
         
         <ng-container footer>
-                <button type="button" class="float-right btn btn-primary" (click)="search(true)">
-                    Submit
-                </button>
+            <button type="button" class="float-right btn btn-primary" (click)="search(true)">
+                Submit
+            </button>
         </ng-container>
     </sqx-modal-dialog>        
 </ng-container>