Bugfix for filtering UI (#480)

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>
 

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();
     }

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>
 

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();
     }

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>