Use address bar to remember list params

front/app/src/common/crud/list/filter-list.component.ts

@@ -14,13 +14,14 @@ import {CrudFormlyJsonschemaService} from "@common/crud/crud-formly-jsonschema.s
 export class FilterListComponent implements OnInit {
     @Input() filters: string[] = [];
     @Input() schema = "";
+    @Input() values = {};
 
     @Output() filterChange: EventEmitter<{[key: string]: any}> = new EventEmitter();
 
     form = new FormGroup({});
     fields: FormlyFieldConfig[] = [];
 
-    searchTerms = {}
+    searchTerms: {[key: string]: string | {}} = {}
 
     public fieldJson = {
         components: {},
@@ -48,6 +49,16 @@ export class FilterListComponent implements OnInit {
                     prop = schema.components.schemas[prop.allOf![0]['$ref'].replace('#/components/schemas/', '')];
                     prop.type = "array";
                     prop.items = {"type": "string", "enum": prop.enum};
+
+                    if (filter in this.values) {
+                        this.searchTerms[filter] = {};
+                        // @ts-ignore
+                        for (let val of this.values[filter]) {
+                            // @ts-ignore
+                            this.searchTerms[filter][val] = true;
+                        }
+                    }
+                } else if(true) {
                 }
 
                 if (prop.hasOwnProperty('readOnly') && prop.readOnly) {

front/app/src/common/crud/list/list.component.html

@@ -14,7 +14,12 @@
 			/>
 		</div>
 		<div class="col-xs-3 col-sm-auto">
-			<crud-list-filter-list [filters]="this.filters" [schema]="this.schema!" (filterChange)="onFilterChange($event)"></crud-list-filter-list>
+			<crud-list-filter-list
+					[filters]="this.filters"
+					[schema]="this.schema!"
+					[values]="this.searchFilters"
+					(filterChange)="onFilterChange($event)"
+			></crud-list-filter-list>
 		</div>
 		<span class="col col-form-label" i18n *ngIf="loading$ | async">Loading...</span>
 	</div>

front/app/src/common/crud/list/list.component.ts

@@ -40,7 +40,6 @@ export class ListComponent implements OnInit {
     public displayedColumns: Column[] = [];
 
     private _loading$ = new BehaviorSubject<boolean>(true);
-    //private _search$ = new Subject<void>();
     private _listData$ = new BehaviorSubject<any[]>([]);
     private _total$ = new BehaviorSubject<number>(0);
 
@@ -64,7 +63,14 @@ export class ListComponent implements OnInit {
             next: (schema: any) => this.getColumnDefinition(schema),
             error: (err) => this.error.emit("Error loading the schema:" + err)
         });
-        this._search();
+        this.route.queryParams.subscribe(params => {
+            let parsedParams = {...params};
+            if (parsedParams.hasOwnProperty('searchFilters')) {
+                parsedParams['searchFilters'] = JSON.parse(parsedParams['searchFilters']);
+            }
+            this._total$.next(this.page * this.pageSize);
+            this._set(parsedParams)
+        });
     }
 
     getColumnDefinition(schema: JSONSchema7) {
@@ -149,7 +155,7 @@ export class ListComponent implements OnInit {
   }
 
   onRowMiddleClick(id: string) {
-      let newUrl = window.location.href.replace('list', id)
+      let newUrl = window.location.href.replace('list', id).split('?')[0]
       window.open(newUrl, '_blank');
   }
 
@@ -182,30 +188,43 @@ export class ListComponent implements OnInit {
       return this._state.searchTerm;
   }
   get searchFilters() {
-        return this._state.searchFilters;
+      return this._state.searchFilters;
   }
 
-  set page(page: number) {
-      this._set({ page });
-  }
-  set pageSize(pageSize: number) {
-      this._set({ pageSize });
-  }
-  set searchTerm(searchTerm: string) {
-      this._set({ searchTerm });
-  }
-  set searchFilters(searchFilters: {[key: string]: any}) {
-        this._set({ searchFilters });
-  }
-  set sortColumn(sortColumn: SortColumn) {
-      this._set({ sortColumn });
-  }
-  set sortDirection(sortDirection: SortDirection) {
-      this._set({ sortDirection });
-  }
+    set page(page: number) {
+        this.updateState({ page });
+    }
+    
+    set pageSize(pageSize: number) {
+        this.updateState({ pageSize });
+    }
+    
+    set searchTerm(searchTerm: string) {
+        this.updateState({ searchTerm });
+    }
 
-  private _set(patch: Partial<State>) {
-      Object.assign(this._state, patch);
-      this._search();
-  }
+    set searchFilters(searchFilters: {[key: string]: any}) {
+        this.updateState({ searchFilters: JSON.stringify(searchFilters) });
+    }
+
+    set sortColumn(sortColumn: SortColumn) {
+        this.updateState({ sortColumn });
+    }
+
+    set sortDirection(sortDirection: SortDirection) {
+        this.updateState({ sortDirection });
+    }
+
+    private updateState(patch: any) {
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: patch ,
+            queryParamsHandling: 'merge'
+        });
+    }
+
+    private _set(patch: Partial<State>) {
+        Object.assign(this._state, patch);
+        this._search();
+    }
 }