[ACA-3506] - Filter are kept when reloaded (#5885)

* [ADF] - saving in the url the filter values

* Fixed filter status on refresh

* Fixed filter status on refresh

* [ACA-3506] - added url filtering save

* [ACA-3506] - fixed spellcheck

* improve log

* more log

* fix scripts

* Added documentation for allowUpdateOnChange setting

* Added default value in description for docs

Co-authored-by: Vito Albano <vitoalbano@Vitos-MacBook-Pro.local>
Co-authored-by: Eugenio Romano <eugenio.romano@alfresco.com>

demo-shell/src/app.config.json

@@ -460,7 +460,8 @@
             "pattern": "cm:name:'(.*?)'",
             "field": "cm:name",
             "placeholder": "SEARCH.SEARCH_HEADER.FILTERS.NAME.PLACEHOLDER",
-            "searchSuffix" : "*"
+            "searchSuffix" : "*",
+            "allowUpdateOnChange" : false
           }
         }
       },
@@ -473,6 +474,7 @@
           "selector": "check-list",
           "settings": {
             "pageSize": 5,
+            "allowUpdateOnChange" : false,
             "operator": "OR",
             "options": [
               {
@@ -495,6 +497,7 @@
         "component": {
           "selector": "check-list",
           "settings": {
+            "allowUpdateOnChange" : false,
             "options": [
               {
                 "name": "SEARCH.SEARCH_HEADER.FILTERS.SIZE.SMALL",
@@ -524,6 +527,7 @@
         "component": {
           "selector": "date-range",
           "settings": {
+            "allowUpdateOnChange" : false,
             "field": "cm:created",
             "dateFormat": "DD-MMM-YY",
             "maxDate": "today"

demo-shell/src/app/components/files/files.component.html

@@ -240,11 +240,13 @@
                 <adf-custom-header-filter-template *ngIf="enableCustomHeaderFilter">
                     <ng-template let-col>
                         <adf-search-header [col]="col"
+                                           [value]="paramValues? paramValues[col.key] : null"
                                            [currentFolderNodeId]="currentFolderId"
                                            [maxItems]="pagination?.maxItems"
                                            [skipCount]="pagination?.skipCount"
                                            (update)="onFilterUpdate($event)"
-                                           (clear)="onAllFilterCleared()">
+                                           (clear)="onAllFilterCleared()"
+                                           (selection)="onFilterSelected($event)">
                         </adf-search-header>
                     </ng-template>
                 </adf-custom-header-filter-template>

demo-shell/src/app/components/files/files.component.ts

@@ -163,6 +163,9 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     enableCustomHeaderFilter = false;
 
+    @Input()
+    paramValues: Map <any, any> = null;
+
     @Output()
     documentListReady: EventEmitter<any> = new EventEmitter();
 
@@ -655,7 +658,27 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
     onAllFilterCleared() {
         this.documentList.node = null;
+        if (this.currentFolderId === '-my-') {
+            this.router.navigate([this.navigationRoute, '']);
+        } else {
+            this.router.navigate([this.navigationRoute, this.currentFolderId, 'display', this.displayMode]);
+        }
         this.documentList.reload();
     }
 
+    onFilterSelected(currentActiveFilters: Map<string, string>) {
+        const objectFromMap = {};
+        currentActiveFilters.forEach((value: any, key) => {
+            let paramValue = null;
+            if (value && value.from && value.to) {
+                paramValue = `${value.from}||${value.to}`;
+            } else {
+                paramValue = value;
+            }
+            objectFromMap[key] = paramValue;
+        });
+
+        this.router.navigate([], { relativeTo: this.route, queryParams: objectFromMap });
+    }
+
 }

demo-shell/src/app/components/files/filtered-search.component.html

@@ -4,5 +4,6 @@
                      [showSettingsPanel]="false"
                      [navigationRoute]="navigationRoute"
                      [currentFolderId]="currentFolderId"
-                     [enableCustomHeaderFilter]="true">
+                     [enableCustomHeaderFilter]="true"
+                     [paramValues]="queryParams">
 </app-files-component>

demo-shell/src/app/components/files/filtered-search.component.ts

@@ -29,13 +29,20 @@ export class FilteredSearchComponent {
     navigationRoute = '/filtered-search';
     currentFolderId = '-my-';
 
+    queryParams = null;
+
     constructor(@Optional() private route: ActivatedRoute) {
+
         if (this.route) {
             this.route.params.forEach((params: Params) => {
                 if (params['id'] && this.currentFolderId !== params['id']) {
                     this.currentFolderId = params['id'];
                 }
             });
+
+            this.route.queryParamMap.subscribe((queryMap: Params) => {
+                this.queryParams = queryMap.params;
+            });
         }
     }