[ACA-4486] support search widget chips layout (#7122)

* [ACA-4486] support search widget chips layout * * revert to old config * * resolved rebase conflicts * [ci:force] force e2e * [ci:force] docs update and remove directive added * [ci:force] config updated * [ci:force] add missing app config schema to prod build
2025-07-24 17:32:15 +00:00 · 2021-06-25 14:24:12 +05:30
parent 87be0b0b70
commit 26d180e661
97 changed files with 3622 additions and 1272 deletions
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -350,7 +350,5 @@
      "ACTION_TYPE": "Action Type"
    }
  },
-  "SEARCH_FORMS": {
-    "ALL": "All"
-  }
+  "DEFAULT_SEARCH": "Default"
 }
--- a/demo-shell/src/app.config.json
+++ b/demo-shell/src/app.config.json
@@ -366,8 +366,258 @@
        }
      ]
    },
-    "name": "SEARCH_FORMS.ALL",
+    "name": "DEFAULT_SEARCH",
    "default": true
+  },
+  {
+    "filterWithContains": true,
+    "app:fields": [
+      "cm:name",
+      "cm:title",
+      "cm:description",
+      "ia:whatEvent",
+      "ia:descriptionEvent",
+      "lnk:title",
+      "lnk:description",
+      "TEXT",
+      "TAG"
+    ],
+    "include": [
+      "path",
+      "allowableOperations",
+      "properties"
+    ],
+    "sorting": {
+      "options": [
+        {
+          "key": "name",
+          "label": "Name",
+          "type": "FIELD",
+          "field": "cm:name",
+          "ascending": true
+        },
+        {
+          "key": "content.sizeInBytes",
+          "label": "Size",
+          "type": "FIELD",
+          "field": "content.size",
+          "ascending": true
+        },
+        {
+          "key": "createdByUser",
+          "label": "Author",
+          "type": "FIELD",
+          "field": "cm:creator",
+          "ascending": true
+        },
+        {
+          "key": "createdAt",
+          "label": "Created",
+          "type": "FIELD",
+          "field": "cm:created",
+          "ascending": true
+        },
+        {
+          "key": "score",
+          "label": "Relevance",
+          "type": "SCORE",
+          "field": "score",
+          "ascending": false
+        }
+      ],
+      "defaults": [
+        {
+          "key": "score",
+          "type": "FIELD",
+          "field": "score",
+          "ascending": false
+        }
+      ]
+    },
+    "resetButton": true,
+    "filterQueries": [
+      {
+        "query": "TYPE:'cm:folder'"
+      },
+      {
+        "query": "NOT cm:creator:System"
+      }
+    ],
+    "facetFields": {
+      "expanded": true,
+      "fields": [
+        {
+          "field": "content.size",
+          "mincount": 1,
+          "label": "Folder Size",
+          "settings": {
+            "allowUpdateOnChange": false,
+            "hideDefaultAction": true,
+            "unit": "Bytes"
+          }
+        },
+        {
+          "field": "creator",
+          "mincount": 1,
+          "label": "Field created",
+          "settings": {
+            "allowUpdateOnChange": false,
+            "hideDefaultAction": true
+          }
+        },
+        {
+          "field": "modifier",
+          "mincount": 1,
+          "label": "Folder Modifier",
+          "settings": {
+            "allowUpdateOnChange": false,
+            "hideDefaultAction": true
+          }
+        },
+        {
+          "field": "created",
+          "mincount": 1,
+          "label": "Folder Created",
+          "settings": {
+            "allowUpdateOnChange": false,
+            "hideDefaultAction": true
+          }
+        }
+      ]
+    },
+    "facetQueries": {
+      "label": "SEARCH.FACET_QUERIES.MY_FACET_QUERIES",
+      "pageSize": 5,
+      "expanded": true,
+      "mincount": 1,
+      "queries": [
+        {
+          "query": "created:2019",
+          "label": "SEARCH.FACET_QUERIES.CREATED_THIS_YEAR"
+        },
+        {
+          "query": "content.mimetype:text/html",
+          "label": "SEARCH.FACET_QUERIES.MIMETYPE",
+          "group": "Type facet queries"
+        },
+        {
+          "query": "content.size:[0 TO 10240]",
+          "label": "SEARCH.FACET_QUERIES.XTRASMALL",
+          "group": "Size facet queries"
+        },
+        {
+          "query": "content.size:[10240 TO 102400]",
+          "label": "SEARCH.FACET_QUERIES.SMALL",
+          "group": "Size facet queries"
+        },
+        {
+          "query": "content.size:[102400 TO 1048576]",
+          "label": "SEARCH.FACET_QUERIES.MEDIUM",
+          "group": "Size facet queries"
+        },
+        {
+          "query": "content.size:[1048576 TO 16777216]",
+          "label": "SEARCH.FACET_QUERIES.LARGE",
+          "group": "Size facet queries"
+        },
+        {
+          "query": "content.size:[16777216 TO 134217728]",
+          "label": "SEARCH.FACET_QUERIES.XTRALARGE",
+          "group": "Size facet queries"
+        },
+        {
+          "query": "content.size:[134217728 TO MAX]",
+          "label": "SEARCH.FACET_QUERIES.XXTRALARGE",
+          "group": "Size facet queries"
+        }
+      ],
+      "settings": {
+        "allowUpdateOnChange": false,
+        "hideDefaultAction": true
+      }
+    },
+    "facetIntervals": {
+      "expanded": true,
+      "intervals": [
+        {
+          "label": "The Created",
+          "field": "cm:created",
+          "sets": [
+            {
+              "label": "lastYear",
+              "start": "2018",
+              "end": "2019",
+              "endInclusive": false
+            },
+            {
+              "label": "currentYear",
+              "start": "NOW/YEAR",
+              "end": "NOW/YEAR+1YEAR"
+            },
+            {
+              "label": "earlier",
+              "start": "*",
+              "end": "2018",
+              "endInclusive": false
+            }
+          ],
+          "settings": {
+            "allowUpdateOnChange": false,
+            "hideDefaultAction": true
+          }
+        },
+        {
+          "label": "The Modified",
+          "field": "cm:modified",
+          "sets": [
+            {
+              "label": "2017",
+              "start": "2017",
+              "end": "2018",
+              "endInclusive": false
+            },
+            {
+              "label": "2017-2018",
+              "start": "2017",
+              "end": "2018",
+              "endInclusive": true
+            },
+            {
+              "label": "currentYear",
+              "start": "NOW/YEAR",
+              "end": "NOW/YEAR+1YEAR"
+            },
+            {
+              "label": "earlierThan2017",
+              "start": "*",
+              "end": "2017",
+              "endInclusive": false
+            }
+          ],
+          "settings": {
+            "allowUpdateOnChange": false,
+            "hideDefaultAction": true
+          }
+        }
+      ]
+    },
+    "categories": [],
+    "highlight": {
+      "prefix": " ",
+      "postfix": " ",
+      "mergeContiguous": true,
+      "fields": [
+        {
+          "field": "cm:title"
+        },
+        {
+          "field": "description",
+          "prefix": "(",
+          "postfix": ")"
+        }
+      ]
+    },
+    "name": "Folder"
  }],
  "search-headers": {
    "filterWithContains": true,
--- a/demo-shell/src/app/app.module.ts
+++ b/demo-shell/src/app/app.module.ts
@@ -114,6 +114,7 @@ import localeDa from '@angular/common/locales/da';
 import localeSv from '@angular/common/locales/sv';
 import { setupAppNotifications } from './services/app-notifications-factory';
 import { AppNotificationsService } from './services/app-notifications.service';
+import { SearchFilterChipsComponent } from './components/search/search-filter-chips.component';

 registerLocaleData(localeFr);
 registerLocaleData(localeDe);
@@ -204,7 +205,8 @@ registerLocaleData(localeSv);
        CustomEditorComponent,
        CustomWidgetComponent,
        ProcessCloudLayoutComponent,
-        ServiceTaskListCloudDemoComponent
+        ServiceTaskListCloudDemoComponent,
+        SearchFilterChipsComponent
    ],
    providers: [
        {
--- a/demo-shell/src/app/app.routes.ts
+++ b/demo-shell/src/app/app.routes.ts
@@ -55,6 +55,7 @@ import { FilteredSearchComponent } from './components/files/filtered-search.comp
 import { ProcessCloudLayoutComponent } from './components/cloud/process-cloud-layout.component';
 import { ServiceTaskListCloudDemoComponent } from './components/cloud/service-task-list-cloud-demo.component';
 import { AspectListSampleComponent } from './components/aspect-list-sample/aspect-list-sample.component';
+import { SearchFilterChipsComponent } from './components/search/search-filter-chips.component';

 export const appRoutes: Routes = [
    { path: 'login', loadChildren: () => import('./components/login/login.module').then(m => m.AppLoginModule) },
@@ -325,6 +326,11 @@ export const appRoutes: Routes = [
                component: SearchResultComponent,
                canActivate: [AuthGuardEcm]
            },
+            {
+                path: 'search-filter-chips',
+                component: SearchFilterChipsComponent,
+                canActivate: [AuthGuardEcm]
+            },
            {
                path: 'extendedSearch',
                component: SearchExtendedComponent,
--- a/demo-shell/src/app/components/search/search-filter-chips.component.html
+++ b/demo-shell/src/app/components/search/search-filter-chips.component.html
@@ -0,0 +1,39 @@
+<div class="app-search-results">
+    <div class="app-search-results__content">
+        <mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate"></mat-progress-bar>
+        <div class="app-search-results__sorting">
+            <div style="padding: 0 12px">
+                <adf-search-form></adf-search-form>
+            </div>
+
+            <mat-divider [vertical]="true"></mat-divider>
+
+            <div style="padding: 0 12px; flex: 65%">
+                <adf-search-filter-chips></adf-search-filter-chips>
+            </div>
+
+            <mat-icon adf-reset-search matTooltip="reset" style="padding-right: 5px;">refresh</mat-icon>
+
+            <adf-search-sorting-picker style="width: 240px"></adf-search-sorting-picker>
+        </div>
+        <app-files-component
+            [showHeader]="showHeader"
+            [sorting]="sorting"
+            [sortingMode]="'server'"
+            [showRecentFiles]="false"
+            [showSitePicker]="false"
+            [showSettingsPanel]="false"
+            [currentFolderId]="null"
+            [nodeResult]="$any(data)"
+            [disableDragArea]="true"
+            [pagination]="pagination"
+            [searchTerm]="searchedWord"
+            (changedPageSize)="onRefreshPagination($event)"
+            (changedPageNumber)="onRefreshPagination($event)"
+            (turnedNextPage)="onRefreshPagination($event)"
+            (loadNext)="onRefreshPagination($event)"
+            (turnedPreviousPage)="onRefreshPagination($event)"
+            (deleteElementSuccess)="onDeleteElementSuccess()">
+        </app-files-component>
+    </div>
+</div>
--- a/demo-shell/src/app/components/search/search-filter-chips.component.scss
+++ b/demo-shell/src/app/components/search/search-filter-chips.component.scss
@@ -0,0 +1,44 @@
+.app-search-results {
+    display: flex;
+    margin-left: 5px;
+
+    .app-search-settings {
+        width: 260px;
+        border: 1px solid #eee;
+    }
+
+    &__facets {
+        margin: 5px;
+    }
+
+    &__content {
+        flex: 1;
+    }
+
+    &__sorting {
+        padding-top: 16px;
+        padding-bottom: 16px;
+        display: flex;
+    }
+}
+
+div.app-search-results-container {
+    padding: 0 20px 20px;
+}
+
+.app-search-title {
+    font-size: 22px;
+    padding: 15px 0;
+}
+
+@media screen and (max-width: 600px) {
+    :host .app-col-display-name {
+        min-width: 100px;
+    }
+    :host .app-col-modified-at, :host .app-col-modified-by {
+        display: none;
+    }
+    :host div.app-search-results-container table {
+        width: 100%;
+    }
+}
--- a/demo-shell/src/app/components/search/search-filter-chips.component.ts
+++ b/demo-shell/src/app/components/search/search-filter-chips.component.ts
@@ -0,0 +1,143 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { Pagination, ResultSetPaging } from '@alfresco/js-api';
+import { SearchForm, SearchQueryBuilderService } from '@alfresco/adf-content-services';
+import { SearchService, ShowHeaderMode, UserPreferencesService } from '@alfresco/adf-core';
+import { combineLatest, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+    selector: 'app-search-filter-chips',
+    templateUrl: './search-filter-chips.component.html',
+    styleUrls: [ './search-filter-chips.component.scss' ],
+    providers: [SearchService]
+})
+export class SearchFilterChipsComponent implements OnInit, OnDestroy {
+
+    queryParamName = 'q';
+    searchedWord = '';
+    data: ResultSetPaging;
+    pagination: Pagination;
+    isLoading = true;
+
+    sorting = ['name', 'asc'];
+    searchForms: SearchForm[];
+    showHeader = ShowHeaderMode.Always;
+
+    private onDestroy$ = new Subject<boolean>();
+
+    constructor(public router: Router,
+                private preferences: UserPreferencesService,
+                private queryBuilder: SearchQueryBuilderService,
+                private route: ActivatedRoute) {
+        combineLatest([this.route.params, this.queryBuilder.configUpdated])
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(([params, searchConfig]) => {
+                this.searchedWord = params.hasOwnProperty(this.queryParamName) ? params[this.queryParamName] : null;
+                const query = this.formatSearchQuery(this.searchedWord, searchConfig['app:fields']);
+                if (query) {
+                    this.queryBuilder.userQuery = query;
+                }
+        });
+
+        queryBuilder.paging = {
+            maxItems: this.preferences.paginationSize,
+            skipCount: 0
+        };
+    }
+
+    ngOnInit() {
+        this.queryBuilder.resetToDefaults();
+
+        this.sorting = this.getSorting();
+
+        this.queryBuilder.updated
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(() => {
+                this.sorting = this.getSorting();
+                this.isLoading = true;
+            });
+
+        this.queryBuilder.executed
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((resultSetPaging: ResultSetPaging) => {
+                this.queryBuilder.paging.skipCount = 0;
+
+                this.onSearchResultLoaded(resultSetPaging);
+                this.isLoading = false;
+            });
+
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                this.searchedWord = params.hasOwnProperty(this.queryParamName) ? params[this.queryParamName] : null;
+                if (this.searchedWord) {
+                    this.queryBuilder.update();
+                } else {
+                    this.queryBuilder.userQuery = null;
+                    this.queryBuilder.executed.next(new ResultSetPaging({
+                        list: {
+                            pagination: { totalItems: 0 },
+                            entries: []
+                        }
+                    }));
+                }
+            });
+        }
+    }
+
+    private formatSearchQuery(userInput: string, fields =  ['cm:name']) {
+        if (!userInput) {
+            return null;
+        }
+        return fields.map((field) => `${field}:"${userInput}*"`).join(' OR ');
+    }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
+
+    onSearchResultLoaded(resultSetPaging: ResultSetPaging) {
+        this.data = resultSetPaging;
+        this.pagination = { ...resultSetPaging.list.pagination };
+    }
+
+    onRefreshPagination(pagination: Pagination) {
+        this.queryBuilder.paging = {
+            maxItems: pagination.maxItems,
+            skipCount: pagination.skipCount
+        };
+        this.queryBuilder.update();
+    }
+
+    onDeleteElementSuccess() {
+        this.queryBuilder.execute();
+    }
+
+    private getSorting(): string[] {
+        const primary = this.queryBuilder.getPrimarySorting();
+
+        if (primary) {
+            return [primary.key, primary.ascending ? 'asc' : 'desc'];
+        }
+
+        return ['name', 'asc'];
+    }
+}
--- a/demo-shell/src/app/components/search/search-result.component.html
+++ b/demo-shell/src/app/components/search/search-result.component.html
@@ -10,7 +10,9 @@
        <div class="app-search-results__sorting">
            <adf-search-sorting-picker></adf-search-sorting-picker>

-            <adf-search-form (formChange)="onFormChange($event)"></adf-search-form>
+            <div style="padding: 0 12px">
+                <button mat-stroked-button (click)="switchLayout()"> Switch to new layout </button>
+            </div>
        </div>
        <app-files-component
            [showHeader]="showHeader"
--- a/demo-shell/src/app/components/search/search-result.component.scss
+++ b/demo-shell/src/app/components/search/search-result.component.scss
@@ -16,6 +16,8 @@
    }

    &__sorting {
+        padding-top: 16px;
+        padding-bottom: 16px;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
--- a/demo-shell/src/app/components/search/search-result.component.ts
+++ b/demo-shell/src/app/components/search/search-result.component.ts
@@ -141,7 +141,7 @@ export class SearchResultComponent implements OnInit, OnDestroy {
        return ['name', 'asc'];
    }

-    onFormChange(form: SearchForm) {
-        this.queryBuilder.updateSelectedConfiguration(form.index);
+    switchLayout() {
+        this.router.navigate(['search-filter-chips', { q: this.searchedWord }] );
    }
 }