From 26d180e66189ae09736f9f119b3afc2e1825e7fa Mon Sep 17 00:00:00 2001 From: Dharan <14145706+dhrn@users.noreply.github.com> Date: Fri, 25 Jun 2021 14:24:12 +0530 Subject: [PATCH] [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 --- demo-shell/resources/i18n/en.json | 4 +- demo-shell/src/app.config.json | 252 ++++++- demo-shell/src/app/app.module.ts | 4 +- demo-shell/src/app/app.routes.ts | 6 + .../search/search-filter-chips.component.html | 39 ++ .../search/search-filter-chips.component.scss | 44 ++ .../search/search-filter-chips.component.ts | 143 ++++ .../search/search-result.component.html | 4 +- .../search/search-result.component.scss | 2 + .../search/search-result.component.ts | 4 +- .../components/search-check-list.component.md | 1 + .../components/search-date-range.component.md | 1 + .../search-datetime-range.component.md | 1 + .../search-filter-chips.component.md | 57 ++ .../search-number-range.component.md | 1 + .../components/search-radio.component.md | 2 + .../components/search-slider.component.md | 2 + .../components/search-text.component.md | 1 + .../images/search-filter-chip-widget.png | Bin 0 -> 16223 bytes docs/docassets/images/search-filter-chips.png | Bin 0 -> 6781 bytes .../content-node-selector-panel.component.ts | 2 +- .../content-node-selector.module.ts | 2 +- .../filter-header.component.spec.ts | 2 +- .../filter-header/filter-header.component.ts | 2 +- lib/content-services/src/lib/i18n/en.json | 10 +- .../src/lib/mock/search-filter-mock.ts | 15 +- .../components/reset-search.directive.spec.ts | 58 ++ .../components/reset-search.directive.ts | 31 + .../search-check-list.component.html | 11 +- .../search-check-list.component.ts | 42 +- .../search-chip-list.component.html | 10 +- .../search-chip-list.component.spec.ts | 44 +- .../search-chip-list.component.ts | 5 +- .../search-date-range.component.html | 4 +- .../search-date-range.component.ts | 46 +- .../search-datetime-range.component.html | 4 +- .../search-datetime-range.component.ts | 39 +- .../search-facet-field.component.html | 49 ++ .../search-facet-field.component.scss | 89 +++ .../search-facet-field.component.spec.ts | 195 ++++++ .../search-facet-field.component.ts | 129 ++++ .../search-facet-chip.component.html | 42 ++ .../search-facet-chip.component.spec.ts | 66 ++ .../search-facet-chip.component.ts | 67 ++ .../search-filter-chips.component.html | 11 + .../search-filter-chips.component.scss | 66 ++ .../search-filter-chips.component.spec.ts | 413 ++++++++++++ .../search-filter-chips.component.ts | 38 ++ .../search-filter-menu-card.component.html | 22 + .../search-filter-menu-card.component.scss | 39 ++ .../search-filter-menu-card.component.spec.ts | 46 ++ .../search-filter-menu-card.component.ts | 31 + .../search-widget-chip.component.html | 47 ++ .../search-widget-chip.component.spec.ts | 68 ++ .../search-widget-chip.component.ts | 68 ++ .../search-filter-container.component.spec.ts | 2 +- .../search-filter-container.component.ts | 2 +- .../search-filter.component.html | 67 +- .../search-filter.component.scss | 51 -- .../search-filter.component.spec.ts | 637 ++---------------- .../search-filter/search-filter.component.ts | 371 +--------- .../search-form/search-form.component.html | 41 +- .../search-form/search-form.component.scss | 49 ++ .../search-form/search-form.component.spec.ts | 56 +- .../search-form/search-form.component.ts | 26 +- .../search-number-range.component.html | 4 +- .../search-number-range.component.ts | 34 +- .../search-panel/search-panel.component.ts | 2 +- .../search-radio/search-radio.component.ts | 38 +- .../search-slider.component.html | 4 +- .../search-slider.component.spec.ts | 3 +- .../search-slider/search-slider.component.ts | 20 +- .../search-sorting-picker.component.spec.ts | 2 +- .../search-sorting-picker.component.ts | 2 +- .../search-text/search-text.component.html | 2 +- .../search-text/search-text.component.ts | 17 +- .../search-widget-container.component.ts | 28 +- .../search/models/facet-field.interface.ts | 8 + .../search/models/facet-widget.interface.ts | 27 + .../models/search-configuration.interface.ts | 3 +- .../search-widget-settings.interface.ts | 9 + .../search/models/search-widget.interface.ts | 16 +- .../src/lib/search/public-api.ts | 11 +- .../lib/search/search-query-service.token.ts | 2 +- .../src/lib/search/search.module.ts | 25 +- .../base-query-builder.service.ts | 37 +- .../search-facet-filters.service.spec.ts | 419 ++++++++++++ .../services/search-facet-filters.service.ts | 370 ++++++++++ .../search-filter.service.ts | 14 +- ...earch-header-query-builder.service.spec.ts | 4 +- .../search-header-query-builder.service.ts | 8 +- .../search-query-builder.service.spec.ts | 50 +- .../search-query-builder.service.ts | 2 +- .../src/lib/styles/_index.scss | 8 + lib/core/app-config/schema.json | 32 +- .../pages/search/date-range-filter.page.ts | 1 + scripts/build/build-core.sh | 3 + 97 files changed, 3619 insertions(+), 1269 deletions(-) create mode 100644 demo-shell/src/app/components/search/search-filter-chips.component.html create mode 100644 demo-shell/src/app/components/search/search-filter-chips.component.scss create mode 100644 demo-shell/src/app/components/search/search-filter-chips.component.ts create mode 100644 docs/content-services/components/search-filter-chips.component.md create mode 100644 docs/docassets/images/search-filter-chip-widget.png create mode 100644 docs/docassets/images/search-filter-chips.png create mode 100644 lib/content-services/src/lib/search/components/reset-search.directive.spec.ts create mode 100644 lib/content-services/src/lib/search/components/reset-search.directive.ts create mode 100644 lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html create mode 100644 lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss create mode 100644 lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.spec.ts create mode 100644 lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.ts create mode 100644 lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html create mode 100644 lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.spec.ts create mode 100644 lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts create mode 100644 lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.html create mode 100644 lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss create mode 100644 lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.spec.ts create mode 100644 lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.ts create mode 100644 lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html create mode 100644 lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss create mode 100644 lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.spec.ts create mode 100644 lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.ts create mode 100644 lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html create mode 100644 lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.spec.ts create mode 100644 lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts create mode 100644 lib/content-services/src/lib/search/components/search-form/search-form.component.scss create mode 100644 lib/content-services/src/lib/search/models/facet-widget.interface.ts rename lib/content-services/src/lib/search/{ => services}/base-query-builder.service.ts (92%) create mode 100644 lib/content-services/src/lib/search/services/search-facet-filters.service.spec.ts create mode 100644 lib/content-services/src/lib/search/services/search-facet-filters.service.ts rename lib/content-services/src/lib/search/{components/search-filter => services}/search-filter.service.ts (63%) rename lib/content-services/src/lib/search/{ => services}/search-header-query-builder.service.spec.ts (97%) rename lib/content-services/src/lib/search/{ => services}/search-header-query-builder.service.ts (94%) rename lib/content-services/src/lib/search/{ => services}/search-query-builder.service.spec.ts (95%) rename lib/content-services/src/lib/search/{ => services}/search-query-builder.service.ts (93%) diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json index a9b1c809e2b..d0f5dc74c11 100644 --- 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" } diff --git a/demo-shell/src/app.config.json b/demo-shell/src/app.config.json index b5095858655..c5b322fcaa4 100644 --- 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, diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts index feb9cfe531e..713e2d8a0ea 100644 --- 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: [ { diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts index c7e5caff1e8..21456908946 100644 --- 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, diff --git a/demo-shell/src/app/components/search/search-filter-chips.component.html b/demo-shell/src/app/components/search/search-filter-chips.component.html new file mode 100644 index 00000000000..2bb8461a9f3 --- /dev/null +++ b/demo-shell/src/app/components/search/search-filter-chips.component.html @@ -0,0 +1,39 @@ +
+
+ +
+
+ +
+ + + +
+ +
+ + refresh + + +
+ + +
+
diff --git a/demo-shell/src/app/components/search/search-filter-chips.component.scss b/demo-shell/src/app/components/search/search-filter-chips.component.scss new file mode 100644 index 00000000000..cf0453de25f --- /dev/null +++ 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%; + } +} diff --git a/demo-shell/src/app/components/search/search-filter-chips.component.ts b/demo-shell/src/app/components/search/search-filter-chips.component.ts new file mode 100644 index 00000000000..2cb883fb846 --- /dev/null +++ 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(); + + 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']; + } +} diff --git a/demo-shell/src/app/components/search/search-result.component.html b/demo-shell/src/app/components/search/search-result.component.html index 41d1a3cf400..19d32193cbb 100644 --- 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 @@
- +
+ +
+``` + +### Properties + +| Name | Type | Default value | Description | +| ---- | ---- | ------------- | ----------- | +| showContextFacets | `boolean` | true | Toggles whether to show or not the context facet filters | + +## Details + +This component is chip based layout for searching. it just alternate component for [expanded panel search filter](./search-filter.component.md) + +You may find it useful to check out the following resources for background information +before customizing the search UI: + +- [Search API](https://docs.alfresco.com/5.2/concepts/search-api.html) +- [Alfresco Full Text Search Reference](https://docs.alfresco.com/5.2/concepts/rm-searchsyntax-intro.html) +- [ACS API Explorer](https://api-explorer.alfresco.com/api-explorer/#!/search/search) + +## See also + +- [Search Filter Component](./search-filter.component.md) +- [Search Query Builder service](../services/search-query-builder.service.md) +- [Search Widget Interface](../interfaces/search-widget.interface.md) +- [Search check list component](search-check-list.component.md) +- [Search date range component](search-date-range.component.md) +- [Search number range component](search-number-range.component.md) +- [Search radio component](search-radio.component.md) +- [Search slider component](search-slider.component.md) +- [Search text component](search-text.component.md) diff --git a/docs/content-services/components/search-number-range.component.md b/docs/content-services/components/search-number-range.component.md index 387da57000a..cfde74960f0 100644 --- a/docs/content-services/components/search-number-range.component.md +++ b/docs/content-services/components/search-number-range.component.md @@ -40,6 +40,7 @@ Implements a number range [widget](../../../lib/testing/src/lib/core/pages/form/ | ---- | ---- | ----------- | | field | string | Field to to use | | format | string | Value format. Uses string substitution to allow all sorts of [range queries](https://docs.alfresco.com/5.2/concepts/rm-searchsyntax-ranges.html). | +| hideDefaultAction | boolean | Show/hide the widget actions. By default is false. ## Details diff --git a/docs/content-services/components/search-radio.component.md b/docs/content-services/components/search-radio.component.md index 22af04cdb60..29f59917650 100644 --- a/docs/content-services/components/search-radio.component.md +++ b/docs/content-services/components/search-radio.component.md @@ -45,6 +45,8 @@ Implements a radio button list [widget](../../../lib/testing/src/lib/core/pages/ | Name | Type | Description | | ---- | ---- | ----------- | | options | `array` | Array of objects with `name` and `value` properties. Each object defines a radio button, labelled with `name`, that adds the query fragment in `value` to the query when enabled. | +| allowUpdateOnChange | `boolean` | Enable/Disable the update fire event when text has been changed. By default is true. +| hideDefaultAction | `boolean` | Show/hide the widget actions. By default is false. ## Details diff --git a/docs/content-services/components/search-slider.component.md b/docs/content-services/components/search-slider.component.md index 713b7cec120..0f229506798 100644 --- a/docs/content-services/components/search-slider.component.md +++ b/docs/content-services/components/search-slider.component.md @@ -46,6 +46,8 @@ Implements a numeric slider [widget](../../../lib/testing/src/lib/core/pages/for | max | number | Maximum numeric value at the right end of the slider | | step | number | The step between adjacent positions on the slider | | thumbLabel | boolean | Toggles whether the "thumb" of the slider should show the current value | +| allowUpdateOnChange | boolean | Enable/Disable the update fire event when text has been changed. By default is true. +| hideDefaultAction | boolean | Show/hide the widget actions. By default is false. ## Details diff --git a/docs/content-services/components/search-text.component.md b/docs/content-services/components/search-text.component.md index e950e323d14..a34068c4470 100644 --- a/docs/content-services/components/search-text.component.md +++ b/docs/content-services/components/search-text.component.md @@ -49,6 +49,7 @@ Implements a text input [widget](../../../lib/testing/src/lib/core/pages/form/wi | searchSuffix | string | Text to append always in the search of a string| | searchPrefix | string | Text to prepend always in the search of a string| | allowUpdateOnChange | `boolean` | Enable/Disable the update fire event when text has been changed. By default is true. +| hideDefaultAction | boolean | Show/hide the widget actions. By default is false. ## Details diff --git a/docs/docassets/images/search-filter-chip-widget.png b/docs/docassets/images/search-filter-chip-widget.png new file mode 100644 index 0000000000000000000000000000000000000000..3c2bbcc35ce5a21345024332b5037346f9223f66 GIT binary patch literal 16223 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 AmH+?% literal 0 HcmV?d00001 diff --git a/docs/docassets/images/search-filter-chips.png b/docs/docassets/images/search-filter-chips.png new file mode 100644 index 0000000000000000000000000000000000000000..5f7e2fb5d9fc7bd3f0829880ae152a6355c706ab GIT binary patch literal 6781 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 boolean; diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.module.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector.module.ts index 096921b4828..6795339f8cb 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector.module.ts +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.module.ts @@ -29,7 +29,7 @@ import { CoreModule } from '@alfresco/adf-core'; import { DocumentListModule } from '../document-list/document-list.module'; import { NameLocationCellComponent } from './name-location-cell/name-location-cell.component'; import { UploadModule } from '../upload/upload.module'; -import { SearchQueryBuilderService } from '../search/search-query-builder.service'; +import { SearchQueryBuilderService } from '../search/services/search-query-builder.service'; import { ContentDirectiveModule } from '../directives/content-directive.module'; @NgModule({ diff --git a/lib/content-services/src/lib/document-list/components/filter-header/filter-header.component.spec.ts b/lib/content-services/src/lib/document-list/components/filter-header/filter-header.component.spec.ts index 26755732fa9..20bff33a15b 100644 --- a/lib/content-services/src/lib/document-list/components/filter-header/filter-header.component.spec.ts +++ b/lib/content-services/src/lib/document-list/components/filter-header/filter-header.component.spec.ts @@ -21,7 +21,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { SearchService, setupTestBed, DataTableComponent, DataSorting } from '@alfresco/adf-core'; import { ContentTestingModule } from '../../../testing/content.testing.module'; import { SimpleChange } from '@angular/core'; -import { SearchHeaderQueryBuilderService } from './../../../search/search-header-query-builder.service'; +import { SearchHeaderQueryBuilderService } from './../../../search/services/search-header-query-builder.service'; import { SEARCH_QUERY_SERVICE_TOKEN } from './../../../search/search-query-service.token'; import { DocumentListComponent } from './../document-list.component'; import { FilterHeaderComponent } from './filter-header.component'; diff --git a/lib/content-services/src/lib/document-list/components/filter-header/filter-header.component.ts b/lib/content-services/src/lib/document-list/components/filter-header/filter-header.component.ts index 0e25b5f662e..8c348ac6479 100644 --- a/lib/content-services/src/lib/document-list/components/filter-header/filter-header.component.ts +++ b/lib/content-services/src/lib/document-list/components/filter-header/filter-header.component.ts @@ -19,7 +19,7 @@ import { Component, Inject, OnInit, OnChanges, SimpleChanges, Input, Output, Eve import { PaginationModel, DataSorting } from '@alfresco/adf-core'; import { DocumentListComponent } from '../document-list.component'; import { SEARCH_QUERY_SERVICE_TOKEN } from '../../../search/search-query-service.token'; -import { SearchHeaderQueryBuilderService } from '../../../search/search-header-query-builder.service'; +import { SearchHeaderQueryBuilderService } from '../../../search/services/search-header-query-builder.service'; import { FilterSearch } from './../../../search/models/filter-search.interface'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json index d0c6687cdf7..54302f26551 100644 --- a/lib/content-services/src/lib/i18n/en.json +++ b/lib/content-services/src/lib/i18n/en.json @@ -223,14 +223,17 @@ }, "FILTER": { "ACTIONS": { + "SEARCH": "Search", "CLEAR": "Clear", "APPLY": "Apply", "CLEAR-ALL": "Clear all", "SHOW-MORE": "Show more", - "SHOW-LESS": "Show less", - "FILTER-CATEGORY": "Filter category" + "SHOW-LESS": "Show less" }, "BUTTONS": { + "CLOSE": "Close", + "REMOVE": "Remove", + "APPLY": "Apply", "CLEAR-ALL": { "LABEL": "Clear all", "TOOLTIP": "This will remove all selections" @@ -290,8 +293,7 @@ } } }, - "FORMS": "Search Forms", - "UNKNOWN_FORM": "Unknown Configuration", + "UNKNOWN_CONFIGURATION": "Unknown Configuration", "SEARCH_HEADER" : { "TITLE":"Filter", "TYPE": "Type", diff --git a/lib/content-services/src/lib/mock/search-filter-mock.ts b/lib/content-services/src/lib/mock/search-filter-mock.ts index 3b492c2585f..d886b5b9618 100644 --- a/lib/content-services/src/lib/mock/search-filter-mock.ts +++ b/lib/content-services/src/lib/mock/search-filter-mock.ts @@ -15,6 +15,8 @@ * limitations under the License. */ +import { SearchCategory } from '../search'; + export const expandableCategories = [ { id: 'cat-1', @@ -68,7 +70,7 @@ export const expandedCategories = [ } ]; -export const simpleCategories = [ +export const simpleCategories: SearchCategory[] = [ { id: 'queryName', name: 'Name', @@ -76,7 +78,9 @@ export const simpleCategories = [ enabled: true, component: { selector: 'text', - settings: {} + settings: { + field: '' + } } }, { @@ -87,7 +91,7 @@ export const simpleCategories = [ component: { selector: 'check-list', settings: { - 'field': null, + 'field': 'check-list', 'pageSize': 5, 'options': [ { 'name': 'Folder', 'value': "TYPE:'cm:folder'" }, @@ -624,6 +628,7 @@ export const mockContentSizeResponseBucket = { }; export function getMockSearchResultWithResponseBucket() { - mockSearchResult.list.context.facets[3].buckets.push(mockContentSizeResponseBucket); - return mockSearchResult; + const cloneResult = JSON.parse(JSON.stringify( mockSearchResult)); + cloneResult.list.context.facets[3].buckets.push(mockContentSizeResponseBucket); + return cloneResult; } diff --git a/lib/content-services/src/lib/search/components/reset-search.directive.spec.ts b/lib/content-services/src/lib/search/components/reset-search.directive.spec.ts new file mode 100644 index 00000000000..4d592693c98 --- /dev/null +++ b/lib/content-services/src/lib/search/components/reset-search.directive.spec.ts @@ -0,0 +1,58 @@ +/*! + * @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 } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { setupTestBed } from '@alfresco/adf-core'; +import { TranslateModule } from '@ngx-translate/core'; +import { ContentTestingModule } from '../../testing/content.testing.module'; +import { SearchFacetFiltersService } from '../services/search-facet-filters.service'; +import { SearchQueryBuilderService } from '../services/search-query-builder.service'; + +@Component({ + template: `` +}) +class TestComponent { +} + +describe('Directive: ResetSearchDirective', () => { + let fixture: ComponentFixture; + let searchFacetFiltersService: SearchFacetFiltersService; + let queryBuilder: SearchQueryBuilderService; + + setupTestBed({ + imports: [ + TranslateModule.forRoot(), + ContentTestingModule + ], + declarations: [TestComponent] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TestComponent); + searchFacetFiltersService = TestBed.inject(SearchFacetFiltersService); + queryBuilder = TestBed.inject(SearchQueryBuilderService); + }); + + it('should reset the search on click', () => { + spyOn(queryBuilder, 'resetToDefaults'); + searchFacetFiltersService.responseFacets = [ { type: 'field', label: 'f1' } ] as any; + fixture.nativeElement.querySelector('button').click(); + expect(searchFacetFiltersService.responseFacets).toEqual([]); + expect(queryBuilder.resetToDefaults).toHaveBeenCalled(); + }); +}); diff --git a/lib/content-services/src/lib/search/components/reset-search.directive.ts b/lib/content-services/src/lib/search/components/reset-search.directive.ts new file mode 100644 index 00000000000..f3ca809b975 --- /dev/null +++ b/lib/content-services/src/lib/search/components/reset-search.directive.ts @@ -0,0 +1,31 @@ +/*! + * @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 { Directive, HostListener } from '@angular/core'; +import { SearchFacetFiltersService } from '../services/search-facet-filters.service'; + +@Directive({ + selector: '[adf-reset-search]' +}) +export class ResetSearchDirective { + @HostListener('click') + onClick() { + this.filterService.reset(); + } + + constructor(private filterService: SearchFacetFiltersService) { } +} diff --git a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html index c1c0c1ee9a9..e21a26f0461 100644 --- a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html +++ b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html @@ -6,8 +6,7 @@ [attr.data-automation-id]="'checkbox-' + (option.name)" (change)="changeHandler($event, option)" class="adf-facet-filter"> -
{{ option.name | translate }} @@ -15,9 +14,9 @@
- -
-
@@ -25,7 +24,7 @@
+ + + + +
+ + +
+ +
+ {{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }} +
+ +
+ +
+ +
+ +
+ + + +
+ diff --git a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss new file mode 100644 index 00000000000..38caf64086d --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss @@ -0,0 +1,89 @@ +@mixin adf-search-filter-field-theme($theme) { + $foreground: map-get($theme, foreground); + $background: map-get($theme, background); + + .adf-search-filter-facet { + .adf-checklist { + display: flex; + flex-direction: column; + + .mat-checkbox-label { + text-overflow: ellipsis; + overflow: hidden; + width: 100%; + } + + .mat-checkbox-layout { + width: 100%; + } + + .adf-facet-label { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + .mat-checkbox { + margin: 5px; + + &.mat-checkbox-checked .mat-checkbox-label { + font-weight: bold; + } + } + } + + .adf-facet-result-filter { + padding-bottom: 16px; + + .adf-facet-search-container { + border-radius: 6px; + background: mat-color($background, background); + display: flex; + height: 32px; + + .adf-facet-search-icon { + width: 27px; + margin-top: -4px; + .mat-icon { + font-size: 15px; + } + } + + .adf-facet-search-field { + padding: 2px; + flex: 1; + margin-top: -16px; + font-size: 14px; + line-height: 24px; + letter-spacing: 0.25px; + + .mat-form-field-underline { + display: none; + } + + .mat-form-field-suffix { + padding-right: 1px; + } + } + } + } + + .adf-facet-buttons { + text-align: right; + + .mat-button { + text-transform: uppercase; + } + + &--topSpace { + padding-top: 15px; + } + } + + .mat-checkbox-label, + .mat-radio-label { + color: mat-color($foreground, text, 0.54); + } + + } +} diff --git a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.spec.ts b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.spec.ts new file mode 100644 index 00000000000..f9c63e87dfd --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.spec.ts @@ -0,0 +1,195 @@ +/*! + * @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 { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SearchFacetFieldComponent } from './search-facet-field.component'; +import { SearchFacetFiltersService } from '../../services/search-facet-filters.service'; +import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; +import { ContentTestingModule } from '../../../testing/content.testing.module'; +import { FacetField } from '../../models/facet-field.interface'; +import { FacetFieldBucket } from '../../models/facet-field-bucket.interface'; +import { SearchFilterList } from '../../models/search-filter-list.model'; +import { TranslateModule } from '@ngx-translate/core'; + +describe('SearchFacetFieldComponent', () => { + let component: SearchFacetFieldComponent; + let fixture: ComponentFixture; + let searchFacetFiltersService: SearchFacetFiltersService; + let queryBuilder: SearchQueryBuilderService; + + beforeEach(async () => { + TestBed.configureTestingModule({ + imports: [ + TranslateModule.forRoot(), + ContentTestingModule + ] + }); + searchFacetFiltersService = TestBed.inject(SearchFacetFiltersService); + queryBuilder = TestBed.inject(SearchQueryBuilderService); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchFacetFieldComponent); + component = fixture.componentInstance; + spyOn(searchFacetFiltersService, 'updateSelectedBuckets').and.stub(); + }); + + it('should update bucket model and query builder on facet toggle', () => { + spyOn(queryBuilder, 'update').and.stub(); + spyOn(queryBuilder, 'addUserFacetBucket').and.callThrough(); + + const event: any = { checked: true }; + const field: FacetField = { field: 'f1', label: 'f1', buckets: new SearchFilterList() }; + const bucket: FacetFieldBucket = { checked: false, filterQuery: 'q1', label: 'q1', count: 1 }; + component.field = field; + fixture.detectChanges(); + + component.onToggleBucket(event, field, bucket); + + expect(bucket.checked).toBeTruthy(); + expect(queryBuilder.addUserFacetBucket).toHaveBeenCalledWith(field, bucket); + expect(queryBuilder.update).toHaveBeenCalled(); + expect(searchFacetFiltersService.updateSelectedBuckets).toHaveBeenCalled(); + }); + + it('should update bucket model and query builder on facet un-toggle', () => { + spyOn(queryBuilder, 'update').and.stub(); + spyOn(queryBuilder, 'removeUserFacetBucket').and.callThrough(); + + const event: any = { checked: false }; + const field: FacetField = { field: 'f1', label: 'f1', buckets: new SearchFilterList() }; + const bucket: FacetFieldBucket = { checked: true, filterQuery: 'q1', label: 'q1', count: 1 }; + + component.field = field; + fixture.detectChanges(); + + component.onToggleBucket(event, field, bucket); + + expect(queryBuilder.removeUserFacetBucket).toHaveBeenCalledWith(field, bucket); + expect(queryBuilder.update).toHaveBeenCalled(); + expect(searchFacetFiltersService.updateSelectedBuckets).toHaveBeenCalled(); + }); + + it('should unselect facet query and update builder', () => { + spyOn(queryBuilder, 'update').and.stub(); + spyOn(queryBuilder, 'removeUserFacetBucket').and.callThrough(); + + const event: any = { checked: false }; + const query = { checked: true, label: 'q1', filterQuery: 'query1' }; + const field = { field: 'q1', type: 'query', label: 'label1', buckets: new SearchFilterList([ query ] ) } as FacetField; + + component.field = field; + fixture.detectChanges(); + + component.onToggleBucket(event, field, query); + + expect(query.checked).toEqual(false); + expect(queryBuilder.removeUserFacetBucket).toHaveBeenCalledWith(field, query); + expect(queryBuilder.update).toHaveBeenCalled(); + expect(searchFacetFiltersService.updateSelectedBuckets).toHaveBeenCalled(); + }); + + it('should update query builder only when has bucket to unselect', () => { + spyOn(queryBuilder, 'update').and.stub(); + + const field: FacetField = { field: 'f1', label: 'f1' }; + component.onToggleBucket( { checked: true }, field, null); + + expect(queryBuilder.update).not.toHaveBeenCalled(); + }); + + it('should allow to to reset selected buckets', () => { + const buckets: FacetFieldBucket[] = [ + { label: 'bucket1', checked: true, count: 1, filterQuery: 'q1' }, + { label: 'bucket2', checked: false, count: 1, filterQuery: 'q2' } + ]; + + const field: FacetField = { + field: 'f1', + label: 'field1', + buckets: new SearchFilterList(buckets) + }; + + component.field = field; + fixture.detectChanges(); + + expect(component.canResetSelectedBuckets(field)).toBeTruthy(); + }); + + it('should not allow to reset selected buckets', () => { + const buckets: FacetFieldBucket[] = [ + { label: 'bucket1', checked: false, count: 1, filterQuery: 'q1' }, + { label: 'bucket2', checked: false, count: 1, filterQuery: 'q2' } + ]; + + const field: FacetField = { + field: 'f1', + label: 'field1', + buckets: new SearchFilterList(buckets) + }; + + component.field = field; + fixture.detectChanges(); + + expect(component.canResetSelectedBuckets(field)).toEqual(false); + }); + + it('should reset selected buckets', () => { + spyOn(queryBuilder, 'execute').and.stub(); + const buckets: FacetFieldBucket[] = [ + { label: 'bucket1', checked: false, count: 1, filterQuery: 'q1' }, + { label: 'bucket2', checked: true, count: 1, filterQuery: 'q2' } + ]; + + const field: FacetField = { + field: 'f1', + label: 'field1', + buckets: new SearchFilterList(buckets) + }; + + component.field = field; + fixture.detectChanges(); + + component.resetSelectedBuckets(field); + + expect(buckets[0].checked).toEqual(false); + expect(buckets[1].checked).toEqual(false); + }); + + it('should update query builder upon resetting buckets', () => { + spyOn(queryBuilder, 'update').and.stub(); + + const buckets: FacetFieldBucket[] = [ + { label: 'bucket1', checked: false, count: 1, filterQuery: 'q1' }, + { label: 'bucket2', checked: true, count: 1, filterQuery: 'q2' } + ]; + + const field: FacetField = { + field: 'f1', + label: 'field1', + buckets: new SearchFilterList(buckets) + }; + + component.field = field; + fixture.detectChanges(); + + component.resetSelectedBuckets(field); + expect(queryBuilder.update).toHaveBeenCalled(); + }); + +}); diff --git a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.ts b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.ts new file mode 100644 index 00000000000..6aa8460eee8 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.ts @@ -0,0 +1,129 @@ +/*! + * @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, Inject, Input, ViewEncapsulation } from '@angular/core'; +import { FacetField } from '../../models/facet-field.interface'; +import { MatCheckboxChange } from '@angular/material/checkbox'; +import { FacetFieldBucket } from '../../models/facet-field-bucket.interface'; +import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token'; +import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; +import { SearchFacetFiltersService } from '../../services/search-facet-filters.service'; +import { FacetWidget } from '../../models/facet-widget.interface'; +import { TranslationService } from '@alfresco/adf-core'; +import { Subject } from 'rxjs'; + +@Component({ + selector: 'adf-search-facet-field', + templateUrl: './search-facet-field.component.html', + encapsulation: ViewEncapsulation.None +}) +export class SearchFacetFieldComponent implements FacetWidget { + + @Input() + field!: FacetField; + + displayValue$: Subject = new Subject(); + + constructor(@Inject(SEARCH_QUERY_SERVICE_TOKEN) public queryBuilder: SearchQueryBuilderService, + private searchFacetFiltersService: SearchFacetFiltersService, + private translationService: TranslationService) { + } + + get canUpdateOnChange() { + return this.field.settings?.allowUpdateOnChange ?? true; + } + + onToggleBucket(event: MatCheckboxChange, field: FacetField, bucket: FacetFieldBucket) { + if (event && bucket) { + if (event.checked) { + this.selectFacetBucket(field, bucket); + } else { + this.unselectFacetBucket(field, bucket); + } + } + } + + selectFacetBucket(field: FacetField, bucket: FacetFieldBucket) { + if (bucket) { + bucket.checked = true; + this.queryBuilder.addUserFacetBucket(field, bucket); + this.searchFacetFiltersService.updateSelectedBuckets(); + if (this.canUpdateOnChange) { + this.updateDisplayValue(); + this.queryBuilder.update(); + } + } + } + + unselectFacetBucket(field: FacetField, bucket: FacetFieldBucket) { + if (bucket) { + bucket.checked = false; + this.queryBuilder.removeUserFacetBucket(field, bucket); + this.searchFacetFiltersService.updateSelectedBuckets(); + if (this.canUpdateOnChange) { + this.updateDisplayValue(); + this.queryBuilder.update(); + } + } + } + + canResetSelectedBuckets(field: FacetField): boolean { + if (field && field.buckets) { + return field.buckets.items.some((bucket) => bucket.checked); + } + return false; + } + + resetSelectedBuckets(field: FacetField) { + if (field && field.buckets) { + for (const bucket of field.buckets.items) { + bucket.checked = false; + this.queryBuilder.removeUserFacetBucket(field, bucket); + } + this.searchFacetFiltersService.updateSelectedBuckets(); + if (this.canUpdateOnChange) { + this.queryBuilder.update(); + } + } + } + + getBucketCountDisplay(bucket: FacetFieldBucket): string { + return bucket.count === null ? '' : `(${bucket.count})`; + } + + updateDisplayValue(): void { + if (!this.field.buckets?.items) { + this.displayValue$.next(''); + } else { + const displayValue = this.field.buckets?.items?.filter((item) => item.checked) + .map((item) => this.translationService.instant(item.display || item.label)) + .join(', '); + this.displayValue$.next(displayValue); + } + } + + reset(): void { + this.resetSelectedBuckets(this.field); + this.updateDisplayValue(); + this.queryBuilder.update(); + } + + submitValues(): void { + this.updateDisplayValue(); + this.queryBuilder.update(); + } +} diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html new file mode 100644 index 00000000000..6d264b1da11 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html @@ -0,0 +1,42 @@ + + + + {{ field.label | translate }} + : + + + +   {{ displayValue | translate }} + + keyboard_arrow_down + + + +
+ + + {{ field.label | translate }} + + + + + + + + + +
+ diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.spec.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.spec.ts new file mode 100644 index 00000000000..daea4092d26 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.spec.ts @@ -0,0 +1,66 @@ +/*! + * @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 { ComponentFixture, TestBed } from '@angular/core/testing'; +import { SearchFacetChipComponent } from './search-facet-chip.component'; +import { ContentTestingModule } from '../../../../testing/content.testing.module'; +import { TranslateModule } from '@ngx-translate/core'; +import { By } from '@angular/platform-browser'; +import { SearchQueryBuilderService } from '../../../services/search-query-builder.service'; +import { setupTestBed } from '@alfresco/adf-core'; +import { SearchFilterList } from '../../../models/search-filter-list.model'; + +describe('SearchFacetChipComponent', () => { + let component: SearchFacetChipComponent; + let fixture: ComponentFixture; + let queryBuilder: SearchQueryBuilderService; + + setupTestBed({ + imports: [ + TranslateModule.forRoot(), + ContentTestingModule + ] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchFacetChipComponent); + component = fixture.componentInstance; + queryBuilder = TestBed.inject(SearchQueryBuilderService); + spyOn(queryBuilder, 'update').and.stub(); + + component.field = { type: 'field', label: 'f2', field: 'f2', buckets: new SearchFilterList() }; + fixture.detectChanges(); + }); + + it('should update search query on apply click', () => { + const chip = fixture.debugElement.query(By.css('mat-chip')); + chip.triggerEventHandler('click', { stopPropagation: () => null }); + fixture.detectChanges(); + const applyButton = fixture.debugElement.query(By.css('#apply-filter-button')); + applyButton.triggerEventHandler('click', {}); + expect(queryBuilder.update).toHaveBeenCalled(); + }); + + it('should update search query on cancel click', () => { + const chip = fixture.debugElement.query(By.css('mat-chip')); + chip.triggerEventHandler('click', { stopPropagation: () => null }); + fixture.detectChanges(); + const applyButton = fixture.debugElement.query(By.css('#cancel-filter-button')); + applyButton.triggerEventHandler('click', {}); + expect(queryBuilder.update).toHaveBeenCalled(); + }); +}); diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts new file mode 100644 index 00000000000..84fed678997 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts @@ -0,0 +1,67 @@ +/*! + * @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, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core'; +import { ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y'; +import { FacetField } from '../../../models/facet-field.interface'; +import { MatMenuTrigger } from '@angular/material/menu'; +import { SearchFacetFieldComponent } from '../../search-facet-field/search-facet-field.component'; + +@Component({ + selector: 'adf-search-facet-chip', + templateUrl: './search-facet-chip.component.html', + encapsulation: ViewEncapsulation.None +}) +export class SearchFacetChipComponent { + @Input() + field: FacetField; + + @ViewChild('menuContainer', { static: false }) + menuContainer: ElementRef; + + @ViewChild('menuTrigger', { static: false }) + menuTrigger: MatMenuTrigger; + + @ViewChild(SearchFacetFieldComponent, { static: false }) + facetFieldComponent: SearchFacetFieldComponent; + + focusTrap: ConfigurableFocusTrap; + + constructor(private focusTrapFactory: ConfigurableFocusTrapFactory) {} + + onMenuOpen() { + if (this.menuContainer && !this.focusTrap) { + this.focusTrap = this.focusTrapFactory.create(this.menuContainer.nativeElement); + this.focusTrap.focusInitialElement(); + } + } + + onClosed() { + this.focusTrap.destroy(); + this.focusTrap = null; + } + + onRemove() { + this.facetFieldComponent.reset(); + this.menuTrigger.closeMenu(); + } + + onApply() { + this.facetFieldComponent.submitValues(); + this.menuTrigger.closeMenu(); + } +} diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.html new file mode 100644 index 00000000000..daa3e1388e3 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss new file mode 100644 index 00000000000..3f92fd20a66 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss @@ -0,0 +1,66 @@ +@mixin adf-search-filter-chips-theme($theme) { + $accent: map-get($theme, accent); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + $unselected-background: mat-color($background, unselected-chip); + $unselected-foreground: mat-color($foreground, text); + $selected-chip-background: mat-color($background, card); + $chip-placeholder: mat-color($foreground, disabled-text); + + .adf-search-filter-chip { + + &.mat-chip { + border: 2px solid transparent; + transition : border 500ms ease-in-out; + max-width: 320px; + text-overflow: ellipsis; + overflow: hidden; + background: $unselected-background; + + &:focus { + color: unset; + } + + &.mat-standard-chip::after { + background: $unselected-background; + color: unset; + } + + &.mat-chip-list-wrapper { + margin: 4px 6px; + } + } + + &.adf-search-toggle-chip { + background: $selected-chip-background; + border: 2px solid mat-color($accent); + + &.mat-chip::after { + background: unset; + } + } + + .adf-search-filter-placeholder { + flex: 1 1 auto; + white-space: nowrap; + color: $chip-placeholder; + } + + .adf-search-filter-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .mat-icon { + padding-top: 5px; + padding-left: 5px; + } + + &-menu + * .cdk-overlay-pane .mat-menu-panel { + min-width: 320px; + border-radius: 12px; + @include mat-elevation(2); + } + } +} diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.spec.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.spec.ts new file mode 100644 index 00000000000..fcc2b274ecf --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.spec.ts @@ -0,0 +1,413 @@ +/*! + * @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 { ComponentFixture, TestBed } from '@angular/core/testing'; +import { SearchFilterChipsComponent } from './search-filter-chips.component'; +import { SearchFacetFiltersService } from '../../services/search-facet-filters.service'; +import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; +import { ContentTestingModule } from '../../../testing/content.testing.module'; +import { By } from '@angular/platform-browser'; +import { SearchFacetFieldComponent } from '../search-facet-field/search-facet-field.component'; +import { TranslateModule } from '@ngx-translate/core'; +import { SearchFilterList } from '../../models/search-filter-list.model'; +import { + disabledCategories, + filteredResult, + mockSearchResult, + searchFilter, + simpleCategories, + stepOne, + stepThree, + stepTwo +} from '../../../mock'; +import { getAllMenus } from '../search-filter/search-filter.component.spec'; +import { AppConfigService } from '@alfresco/adf-core'; + +describe('SearchFilterChipsComponent', () => { + let fixture: ComponentFixture; + let searchFacetFiltersService: SearchFacetFiltersService; + let queryBuilder: SearchQueryBuilderService; + let appConfigService: AppConfigService; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + TranslateModule.forRoot(), + ContentTestingModule + ] + }); + queryBuilder = TestBed.inject(SearchQueryBuilderService); + appConfigService = TestBed.inject(AppConfigService); + searchFacetFiltersService = TestBed.inject(SearchFacetFiltersService); + fixture = TestBed.createComponent(SearchFilterChipsComponent); + }); + + it('should fetch facet fields from response payload and show the already checked items', () => { + spyOn(queryBuilder, 'execute').and.stub(); + queryBuilder.config = { + categories: [], + facetFields: { fields: [ + { label: 'f1', field: 'f1' }, + { label: 'f2', field: 'f2' } + ]}, + facetQueries: { + queries: [] + } + }; + + searchFacetFiltersService.responseFacets = [ + { type: 'field', label: 'f1', field: 'f1', buckets: new SearchFilterList([ + { label: 'b1', count: 10, filterQuery: 'filter', checked: true }, + { label: 'b2', count: 1, filterQuery: 'filter2' }]) }, + { type: 'field', label: 'f2', field: 'f2', buckets: new SearchFilterList()} + ]; + searchFacetFiltersService.queryBuilder.addUserFacetBucket({ label: 'f1', field: 'f1' }, searchFacetFiltersService.responseFacets[0].buckets.items[0]); + + const serverResponseFields: any = [ + { type: 'field', label: 'f1', field: 'f1', buckets: [ + { label: 'b1', metrics: [{value: {count: 6}}], filterQuery: 'filter' }, + { label: 'b2', metrics: [{value: {count: 1}}], filterQuery: 'filter2' }] }, + { type: 'field', label: 'f2', field: 'f2', buckets: [] } + ]; + const data = { + list: { + context: { + facets: serverResponseFields + } + } + }; + + fixture.detectChanges(); + + const facetChip = fixture.debugElement.query(By.css('[data-automation-id="search-fact-chip-f1"] mat-chip')); + facetChip.triggerEventHandler('click', { stopPropagation: () => null }); + + fixture.detectChanges(); + + const facetField: SearchFacetFieldComponent = fixture.debugElement.query(By.css('adf-search-facet-field')).componentInstance; + facetField.selectFacetBucket({ field: 'f1', label: 'f1' }, searchFacetFiltersService.responseFacets[0].buckets.items[1]); + + searchFacetFiltersService.onDataLoaded(data); + expect(searchFacetFiltersService.responseFacets.length).toEqual(2); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[0].checked).toEqual(true, 'should show the already checked item'); + }); + + it('should fetch facet fields from response payload and show the newly checked items', () => { + spyOn(queryBuilder, 'execute').and.stub(); + queryBuilder.config = { + categories: [], + facetFields: { fields: [ + { label: 'f1', field: 'f1' }, + { label: 'f2', field: 'f2' } + ]}, + facetQueries: { + queries: [] + } + }; + + searchFacetFiltersService.responseFacets = [ + { type: 'field', label: 'f1', field: 'f1', buckets: new SearchFilterList([ + { label: 'b1', count: 10, filterQuery: 'filter', checked: true }, + { label: 'b2', count: 1, filterQuery: 'filter2' }]) }, + { type: 'field', label: 'f2', field: 'f2', buckets: new SearchFilterList()} + ]; + queryBuilder.addUserFacetBucket({ label: 'f1', field: 'f1' }, searchFacetFiltersService.responseFacets[0].buckets.items[0]); + + const serverResponseFields: any = [ + { type: 'field', label: 'f1', field: 'f1', buckets: [ + { label: 'b1', metrics: [{value: {count: 6}}], filterQuery: 'filter' }, + { label: 'b2', metrics: [{value: {count: 1}}], filterQuery: 'filter2' }] }, + { type: 'field', label: 'f2', field: 'f2', buckets: [] } + ]; + const data = { + list: { + context: { + facets: serverResponseFields + } + } + }; + fixture.detectChanges(); + + const facetChip = fixture.debugElement.query(By.css('[data-automation-id="search-fact-chip-f1"] mat-chip')); + facetChip.triggerEventHandler('click', { stopPropagation: () => null }); + + fixture.detectChanges(); + + const facetField: SearchFacetFieldComponent = fixture.debugElement.query(By.css('adf-search-facet-field')).componentInstance; + facetField.selectFacetBucket({ field: 'f1', label: 'f1' }, searchFacetFiltersService.responseFacets[0].buckets.items[1]); + + searchFacetFiltersService.onDataLoaded(data); + expect(searchFacetFiltersService.responseFacets.length).toEqual(2); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[1].checked).toEqual(true, 'should show the newly checked item'); + }); + + it('should show buckets with 0 values when there are no facet fields on the response payload', () => { + spyOn(queryBuilder, 'execute').and.stub(); + queryBuilder.config = { + categories: [], + facetFields: { fields: [ + { label: 'f1', field: 'f1' }, + { label: 'f2', field: 'f2' } + ]}, + facetQueries: { + queries: [] + } + }; + + searchFacetFiltersService.responseFacets = [ + { type: 'field', label: 'f1', field: 'f1', buckets: new SearchFilterList( [ + { label: 'b1', count: 10, filterQuery: 'filter', checked: true }, + { label: 'b2', count: 1, filterQuery: 'filter2' }]) }, + { type: 'field', label: 'f2', field: 'f2', buckets: new SearchFilterList() } + ]; + queryBuilder.addUserFacetBucket({ label: 'f1', field: 'f1' }, searchFacetFiltersService.responseFacets[0].buckets.items[0]); + const data = { + list: { + context: {} + } + }; + fixture.detectChanges(); + + const facetChip = fixture.debugElement.query(By.css('[data-automation-id="search-fact-chip-f1"] mat-chip')); + facetChip.triggerEventHandler('click', { stopPropagation: () => null }); + + fixture.detectChanges(); + + const facetField: SearchFacetFieldComponent = fixture.debugElement.query(By.css('adf-search-facet-field')).componentInstance; + facetField.selectFacetBucket({ field: 'f1', label: 'f1' }, searchFacetFiltersService.responseFacets[0].buckets.items[1]); + searchFacetFiltersService.onDataLoaded(data); + + expect(searchFacetFiltersService.responseFacets[0].buckets.items[0].count).toEqual(0); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[1].count).toEqual(0); + }); + + it('should update query builder upon resetting selected queries', () => { + spyOn(queryBuilder, 'update').and.stub(); + spyOn(queryBuilder, 'removeUserFacetBucket').and.callThrough(); + + const queryResponse = { + field: 'query-response', + label: 'query response', + buckets: new SearchFilterList([ + { label: 'q1', query: 'q1', checked: true, metrics: [{value: {count: 1}}] }, + { label: 'q2', query: 'q2', checked: false, metrics: [{value: {count: 1}}] }, + { label: 'q3', query: 'q3', checked: true, metrics: [{value: {count: 1}}] }]) + } as any; + searchFacetFiltersService.responseFacets = [queryResponse]; + + fixture.detectChanges(); + + const facetChip = fixture.debugElement.query(By.css(`[data-automation-id="search-fact-chip-query-response"] mat-chip`)); + facetChip.triggerEventHandler('click', { stopPropagation: () => null }); + fixture.detectChanges(); + const facetField: SearchFacetFieldComponent = fixture.debugElement.query(By.css('adf-search-facet-field')).componentInstance; + + facetField.resetSelectedBuckets(queryResponse); + + expect(queryBuilder.removeUserFacetBucket).toHaveBeenCalledTimes(3); + expect(queryBuilder.update).toHaveBeenCalled(); + + for (const entry of searchFacetFiltersService.responseFacets[0].buckets.items) { + expect(entry.checked).toEqual(false); + } + }); + + describe('widgets', () => { + + it('should not show the disabled widget', async () => { + appConfigService.config.search = { categories: disabledCategories }; + queryBuilder.resetToDefaults(); + + fixture.detectChanges(); + await fixture.whenStable(); + const chips = fixture.debugElement.queryAll(By.css('mat-chip')); + expect(chips.length).toBe(0); + }); + + it('should show the widgets only if configured', async () => { + appConfigService.config.search = { categories: simpleCategories }; + queryBuilder.resetToDefaults(); + + fixture.detectChanges(); + await fixture.whenStable(); + + const chips = fixture.debugElement.queryAll(By.css('mat-chip')); + expect(chips.length).toBe(2); + + const titleElements = fixture.debugElement.queryAll(By.css('.adf-search-filter-placeholder')); + expect(titleElements.map(title => title.nativeElement.innerText.trim())).toEqual(['Name', 'Type']); + }); + + it('should be update the search query when name changed', async () => { + spyOn(queryBuilder, 'update').and.stub(); + appConfigService.config.search = searchFilter; + queryBuilder.resetToDefaults(); + + fixture.detectChanges(); + await fixture.whenStable(); + let chips = fixture.debugElement.queryAll(By.css('mat-chip')); + expect(chips.length).toBe(6); + + fixture.detectChanges(); + const searchChip = fixture.debugElement.query(By.css(`[data-automation-id="search-filter-chip-Name"]`)); + searchChip.triggerEventHandler('click', { stopPropagation: () => null }); + fixture.detectChanges(); + + const inputElement = fixture.debugElement.query(By.css('[data-automation-id="search-field-Name"] input')); + inputElement.triggerEventHandler('change', { target: { value: '*' } }); + expect(queryBuilder.update).toHaveBeenCalled(); + + queryBuilder.executed.next( mockSearchResult); + await fixture.whenStable(); + fixture.detectChanges(); + + chips = fixture.debugElement.queryAll(By.css('mat-chip')); + expect(chips.length).toBe(8); + }); + + it('should show the long facet options list with pagination', () => { + const field = `[data-automation-id="search-field-Size facet queries"]`; + appConfigService.config.search = searchFilter; + queryBuilder.resetToDefaults(); + + fixture.detectChanges(); + queryBuilder.executed.next( mockSearchResult); + fixture.detectChanges(); + + fixture.detectChanges(); + const searchChip = fixture.debugElement.query(By.css(`[data-automation-id="search-filter-chip-Size facet queries"]`)); + searchChip.triggerEventHandler('click', { stopPropagation: () => null }); + fixture.detectChanges(); + + let sizes = getAllMenus(`${field} mat-checkbox`, fixture); + expect(sizes).toEqual(stepOne); + + let moreButton = fixture.debugElement.query(By.css(`${field} button[title="SEARCH.FILTER.ACTIONS.SHOW-MORE"]`)); + let lessButton = fixture.debugElement.query(By.css(`${field} button[title="SEARCH.FILTER.ACTIONS.SHOW-LESS"]`)); + + expect(lessButton).toEqual(null); + expect(moreButton).toBeDefined(); + + moreButton.triggerEventHandler('click', {}); + fixture.detectChanges(); + + sizes = getAllMenus(`${field} mat-checkbox`, fixture); + expect(sizes).toEqual(stepTwo); + + moreButton = fixture.debugElement.query(By.css(`${field} button[title="SEARCH.FILTER.ACTIONS.SHOW-MORE"]`)); + lessButton = fixture.debugElement.query(By.css(`${field} button[title="SEARCH.FILTER.ACTIONS.SHOW-LESS"]`)); + expect(lessButton).toBeDefined(); + expect(moreButton).toBeDefined(); + + moreButton.triggerEventHandler('click', {}); + fixture.detectChanges(); + sizes = getAllMenus(`${field} mat-checkbox`, fixture); + + expect(sizes).toEqual(stepThree); + + moreButton = fixture.debugElement.query(By.css(`${field} button[title="SEARCH.FILTER.ACTIONS.SHOW-MORE"]`)); + lessButton = fixture.debugElement.query(By.css(`${field} button[title="SEARCH.FILTER.ACTIONS.SHOW-LESS"]`)); + expect(lessButton).toBeDefined(); + expect(moreButton).toEqual(null); + + lessButton.triggerEventHandler('click', {}); + fixture.detectChanges(); + + sizes = getAllMenus(`${field} mat-checkbox`, fixture); + expect(sizes).toEqual(stepTwo); + + moreButton = fixture.debugElement.query(By.css(`${field} button[title="SEARCH.FILTER.ACTIONS.SHOW-MORE"]`)); + lessButton = fixture.debugElement.query(By.css(`${field} button[title="SEARCH.FILTER.ACTIONS.SHOW-LESS"]`)); + expect(lessButton).toBeDefined(); + expect(moreButton).toBeDefined(); + + lessButton.triggerEventHandler('click', {}); + fixture.detectChanges(); + + sizes = getAllMenus(`${field} mat-checkbox`, fixture); + expect(sizes).toEqual(stepOne); + + moreButton = fixture.debugElement.query(By.css(`${field} button[title="SEARCH.FILTER.ACTIONS.SHOW-MORE"]`)); + lessButton = fixture.debugElement.query(By.css(`${field} button[title="SEARCH.FILTER.ACTIONS.SHOW-LESS"]`)); + expect(lessButton).toEqual(null); + expect(moreButton).toBeDefined(); + }); + + it('should not show facets if filter is not available', () => { + const chip = '[data-automation-id="search-filter-chip-Size facet queries"]'; + const filter = { ...searchFilter }; + delete filter.facetQueries; + + appConfigService.config.search = filter; + queryBuilder.resetToDefaults(); + + fixture.detectChanges(); + queryBuilder.executed.next( mockSearchResult); + fixture.detectChanges(); + + const facetElement = fixture.debugElement.query(By.css(chip)); + expect(facetElement).toEqual(null); + }); + + it('should search the facets options and select it', () => { + const field = `[data-automation-id="search-field-Size facet queries"]`; + appConfigService.config.search = searchFilter; + queryBuilder.resetToDefaults(); + fixture.detectChanges(); + queryBuilder.executed.next( mockSearchResult); + fixture.detectChanges(); + + spyOn(queryBuilder, 'update').and.stub(); + + const searchChip = fixture.debugElement.query(By.css(`[data-automation-id="search-filter-chip-Size facet queries"]`)); + searchChip.triggerEventHandler('click', { stopPropagation: () => null }); + fixture.detectChanges(); + + const inputElement = fixture.debugElement.query(By.css(`${field} input`)); + inputElement.nativeElement.value = 'Extra'; + inputElement.nativeElement.dispatchEvent(new Event('input')); + fixture.detectChanges(); + + let filteredMenu = getAllMenus(`${field} mat-checkbox`, fixture); + expect(filteredMenu).toEqual(['Extra Small (10239)']); + + inputElement.nativeElement.value = 'my'; + inputElement.nativeElement.dispatchEvent(new Event('input')); + fixture.detectChanges(); + + filteredMenu = getAllMenus(`${field} mat-checkbox`, fixture); + expect(filteredMenu).toEqual(filteredResult); + + const clearButton = fixture.debugElement.query(By.css(`${field} mat-form-field button`)); + clearButton.triggerEventHandler('click', {}); + fixture.detectChanges(); + + filteredMenu = getAllMenus(`${field} mat-checkbox`, fixture); + expect(filteredMenu).toEqual(stepOne); + + const firstOption = fixture.debugElement.query(By.css(`${field} mat-checkbox`)); + firstOption.triggerEventHandler('change', { checked: true }); + fixture.detectChanges(); + + const checkedOption = fixture.debugElement.query(By.css(`${field} mat-checkbox.mat-checkbox-checked`)); + expect(checkedOption.nativeElement.innerText).toEqual('Extra Small (10239)'); + + expect(queryBuilder.update).toHaveBeenCalledTimes(1); + }); + + }); +}); diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.ts new file mode 100644 index 00000000000..3ccd9d3c810 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.ts @@ -0,0 +1,38 @@ +/*! + * @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, Inject, Input, ViewEncapsulation } from '@angular/core'; +import { SearchFacetFiltersService } from '../../services/search-facet-filters.service'; +import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token'; +import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; + +@Component({ + selector: 'adf-search-filter-chips', + templateUrl: './search-filter-chips.component.html', + encapsulation: ViewEncapsulation.None +}) +export class SearchFilterChipsComponent { + /** Toggles whether to show or not the context facet filters. */ + @Input() + showContextFacets: boolean = true; + + constructor( + @Inject(SEARCH_QUERY_SERVICE_TOKEN) + public queryBuilder: SearchQueryBuilderService, + public facetFiltersService: SearchFacetFiltersService) {} + +} diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html new file mode 100644 index 00000000000..420b8ad7d5d --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html @@ -0,0 +1,22 @@ +
+
+ + + close + +
+ + + +
+ +
+ + + +
+ +
+
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss new file mode 100644 index 00000000000..5a8f0c2be12 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss @@ -0,0 +1,39 @@ +@mixin adf-search-filter-menu-card($theme) { + $foreground: map-get($theme, foreground); + $background: map-get($theme, background); + + .adf-search-filter-menu-card { + color: mat-color($foreground, text); + background: mat-color($background, card); + + .adf-search-filter-title { + padding: 16px 12px; + height: 32px; + flex: 1 1 auto; + font-size: 14px; + letter-spacing: 0.15px; + line-height: 24px; + font-weight: bold; + font-style: inherit; + + &-action { + float: right; + } + } + + .adf-search-filter-content { + padding: 16px 12px; + overflow: auto; + } + + .adf-search-filter-actions { + padding: 16px 12px; + display: flex; + justify-content: space-between; + + .adf-search-action-button { + border-radius: 6px; + } + } + } +} diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.spec.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.spec.ts new file mode 100644 index 00000000000..28e8caeeba3 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.spec.ts @@ -0,0 +1,46 @@ +/*! + * @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 { ComponentFixture, TestBed } from '@angular/core/testing'; +import { SearchFilterMenuCardComponent } from './search-filter-menu-card.component'; +import { TranslateModule } from '@ngx-translate/core'; +import { ContentTestingModule } from '../../../../testing/content.testing.module'; +import { setupTestBed } from '@alfresco/adf-core'; + +describe('SearchFilterMenuComponent', () => { + let component: SearchFilterMenuCardComponent; + let fixture: ComponentFixture; + + setupTestBed({ + imports: [ + TranslateModule.forRoot(), + ContentTestingModule + ] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchFilterMenuCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should emit on close click', (done) => { + component.close.subscribe(() => done()); + const closButton = fixture.debugElement.nativeElement.querySelector('.adf-search-filter-title-action'); + closButton.click(); + }); +}); diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.ts new file mode 100644 index 00000000000..42874e2d3f4 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.ts @@ -0,0 +1,31 @@ +/*! + * @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, EventEmitter, Output } from '@angular/core'; + +@Component({ + selector: 'adf-search-filter-menu-card', + templateUrl: './search-filter-menu-card.component.html' +}) +export class SearchFilterMenuCardComponent { + @Output() + close = new EventEmitter(); + + onClose() { + this.close.emit(); + } +} diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html new file mode 100644 index 00000000000..1b076b0e1a0 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html @@ -0,0 +1,47 @@ + + + {{ category.name | translate }} + : + + +  {{ displayValue | translate }} + + keyboard_arrow_down + + + +
+ + + + {{ category.name | translate }} ({{category.component.settings.unit}}) + + + + + + + + + + + + +
+ diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.spec.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.spec.ts new file mode 100644 index 00000000000..3df03e62477 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.spec.ts @@ -0,0 +1,68 @@ +/*! + * @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 { ComponentFixture, TestBed } from '@angular/core/testing'; +import { SearchWidgetChipComponent } from './search-widget-chip.component'; +import { simpleCategories } from '../../../../mock'; +import { setupTestBed } from '@alfresco/adf-core'; +import { TranslateModule } from '@ngx-translate/core'; +import { ContentTestingModule } from '../../../../testing/content.testing.module'; +import { MatMenuModule } from '@angular/material/menu'; +import { By } from '@angular/platform-browser'; +import { SearchQueryBuilderService } from '../../../services/search-query-builder.service'; + +describe('SearchWidgetChipComponent', () => { + let component: SearchWidgetChipComponent; + let fixture: ComponentFixture; + let queryBuilder: SearchQueryBuilderService; + + setupTestBed( { + imports: [ + MatMenuModule, + TranslateModule.forRoot(), + ContentTestingModule + ] + }); + + beforeEach(() => { + queryBuilder = TestBed.inject(SearchQueryBuilderService); + fixture = TestBed.createComponent(SearchWidgetChipComponent); + component = fixture.componentInstance; + spyOn(queryBuilder, 'update').and.stub(); + + component.category = simpleCategories[1]; + fixture.detectChanges(); + }); + + it('should update search query on apply click', () => { + const chip = fixture.debugElement.query(By.css('mat-chip')); + chip.triggerEventHandler('click', { stopPropagation: () => null }); + fixture.detectChanges(); + const applyButton = fixture.debugElement.query(By.css('#apply-filter-button')); + applyButton.triggerEventHandler('click', {}); + expect(queryBuilder.update).toHaveBeenCalled(); + }); + + it('should update search query on cancel click', () => { + const chip = fixture.debugElement.query(By.css('mat-chip')); + chip.triggerEventHandler('click', { stopPropagation: () => null }); + fixture.detectChanges(); + const applyButton = fixture.debugElement.query(By.css('#cancel-filter-button')); + applyButton.triggerEventHandler('click', {}); + expect(queryBuilder.update).toHaveBeenCalled(); + }); +}); diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts new file mode 100644 index 00000000000..f3703052913 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts @@ -0,0 +1,68 @@ +/*! + * @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, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core'; +import { SearchCategory } from '../../../models/search-category.interface'; +import { ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y'; +import { MatMenuTrigger } from '@angular/material/menu'; +import { SearchWidgetContainerComponent } from '../../search-widget-container/search-widget-container.component'; + +@Component({ + selector: 'adf-search-widget-chip', + templateUrl: './search-widget-chip.component.html', + encapsulation: ViewEncapsulation.None +}) +export class SearchWidgetChipComponent { + + @Input() + category: SearchCategory; + + @ViewChild('menuContainer', { static: false }) + menuContainer: ElementRef; + + @ViewChild('menuTrigger', { static: false }) + menuTrigger: MatMenuTrigger; + + @ViewChild(SearchWidgetContainerComponent, { static: false }) + widgetContainerComponent: SearchWidgetContainerComponent; + + focusTrap: ConfigurableFocusTrap; + + constructor(private focusTrapFactory: ConfigurableFocusTrapFactory) {} + + onMenuOpen() { + if (this.menuContainer && !this.focusTrap) { + this.focusTrap = this.focusTrapFactory.create(this.menuContainer.nativeElement); + this.focusTrap.focusInitialElement(); + } + } + + onClosed() { + this.focusTrap.destroy(); + this.focusTrap = null; + } + + onRemove() { + this.widgetContainerComponent.resetInnerWidget(); + this.menuTrigger.closeMenu(); + } + + onApply() { + this.widgetContainerComponent.applyInnerWidget(); + this.menuTrigger.closeMenu(); + } +} diff --git a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.spec.ts b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.spec.ts index 01f28e695ef..73040737d79 100644 --- a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.spec.ts +++ b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.spec.ts @@ -18,7 +18,7 @@ import { Subject } from 'rxjs'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { TranslateModule } from '@ngx-translate/core'; import { SearchService, setupTestBed, AlfrescoApiService } from '@alfresco/adf-core'; -import { SearchHeaderQueryBuilderService } from '../../search-header-query-builder.service'; +import { SearchHeaderQueryBuilderService } from '../../services/search-header-query-builder.service'; import { ContentTestingModule } from '../../../testing/content.testing.module'; import { fakeNodePaging } from './../../../mock/document-list.component.mock'; import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token'; diff --git a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.ts b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.ts index 3ed55315a31..1794ff179d2 100644 --- a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.ts +++ b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.ts @@ -30,7 +30,7 @@ import { import { ConfigurableFocusTrapFactory, ConfigurableFocusTrap } from '@angular/cdk/a11y'; import { DataColumn, TranslationService } from '@alfresco/adf-core'; import { SearchWidgetContainerComponent } from '../search-widget-container/search-widget-container.component'; -import { SearchHeaderQueryBuilderService } from '../../search-header-query-builder.service'; +import { SearchHeaderQueryBuilderService } from '../../services/search-header-query-builder.service'; import { SearchCategory } from '../../models/search-category.interface'; import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token'; import { Subject } from 'rxjs'; diff --git a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.html b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.html index bef56b8dc26..30ffd7dc9f7 100644 --- a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.html +++ b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.html @@ -1,11 +1,11 @@ - - - + {{ field.label | translate }} -
- - - - -
+ -
- -
- {{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }} -
- -
- -
- -
- -
- - - -
diff --git a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss index 77e11e249b8..f08bd8e1e8f 100644 --- a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss @@ -2,57 +2,6 @@ $foreground: map-get($theme, foreground); .adf-search-filter { - - .adf-checklist { - display: flex; - flex-direction: column; - - .mat-checkbox-label { - text-overflow: ellipsis; - overflow: hidden; - width: 100%; - } - - .mat-checkbox-layout { - width: 100%; - } - - .adf-facet-label { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - .mat-checkbox { - margin: 5px; - - &.mat-checkbox-checked .mat-checkbox-label { - font-weight: bold; - } - } - } - - .adf-facet-result-filter { - display: flex; - flex-direction: column; - - & > * { - width: 100%; - } - } - - .adf-facet-buttons { - text-align: right; - - .mat-button { - text-transform: uppercase; - } - - &--topSpace { - padding-top: 15px; - } - } - .mat-expansion-panel-header-title { font-size: 14px; color: mat-color($foreground, text, 0.87); diff --git a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.spec.ts b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.spec.ts index b2c14f42c81..18a498d8734 100644 --- a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.spec.ts +++ b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.spec.ts @@ -16,11 +16,9 @@ */ import { SearchFilterComponent } from './search-filter.component'; -import { SearchQueryBuilderService } from '../../search-query-builder.service'; -import { AppConfigService, SearchService, setupTestBed, TranslationService } from '@alfresco/adf-core'; +import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; +import { AppConfigService, SearchService, TranslationService } from '@alfresco/adf-core'; import { Subject } from 'rxjs'; -import { FacetFieldBucket } from '../../models/facet-field-bucket.interface'; -import { FacetField } from '../../models/facet-field.interface'; import { SearchFilterList } from '../../models/search-filter-list.model'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; @@ -39,6 +37,8 @@ import { stepTwo } from '../../../mock'; import { TranslateModule } from '@ngx-translate/core'; +import { SearchFacetFiltersService } from '../../services/search-facet-filters.service'; +import { SearchFacetFieldComponent } from '../search-facet-field/search-facet-field.component'; describe('SearchFilterComponent', () => { let fixture: ComponentFixture; @@ -48,18 +48,19 @@ describe('SearchFilterComponent', () => { const searchMock: any = { dataLoaded: new Subject() }; - - setupTestBed({ - imports: [ - TranslateModule.forRoot(), - ContentTestingModule - ], - providers: [ - { provide: SearchService, useValue: searchMock } - ] - }); + let searchFacetFiltersService: SearchFacetFiltersService; beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + TranslateModule.forRoot(), + ContentTestingModule + ], + providers: [ + { provide: SearchService, useValue: searchMock } + ] + }); + searchFacetFiltersService = TestBed.inject(SearchFacetFiltersService); queryBuilder = TestBed.inject(SearchQueryBuilderService); fixture = TestBed.createComponent(SearchFilterComponent); appConfigService = TestBed.inject(AppConfigService); @@ -73,346 +74,6 @@ describe('SearchFilterComponent', () => { describe('component', () => { beforeEach(() => fixture.detectChanges()); - it('should subscribe to query builder executed event', () => { - spyOn(component, 'onDataLoaded').and.stub(); - const data = { list: {} }; - queryBuilder.executed.next(data); - - expect(component.onDataLoaded).toHaveBeenCalledWith(data); - }); - - it('should update bucket model and query builder on facet toggle', () => { - spyOn(queryBuilder, 'update').and.stub(); - spyOn(queryBuilder, 'addUserFacetBucket').and.callThrough(); - - const event: any = { checked: true }; - const field: FacetField = { field: 'f1', label: 'f1' }; - const bucket: FacetFieldBucket = { checked: false, filterQuery: 'q1', label: 'q1', count: 1 }; - - component.onToggleBucket(event, field, bucket); - - expect(bucket.checked).toBeTruthy(); - expect(queryBuilder.addUserFacetBucket).toHaveBeenCalledWith(field, bucket); - expect(queryBuilder.update).toHaveBeenCalled(); - }); - - it('should update bucket model and query builder on facet un-toggle', () => { - spyOn(queryBuilder, 'update').and.stub(); - spyOn(queryBuilder, 'removeUserFacetBucket').and.callThrough(); - - const event: any = { checked: false }; - const field: FacetField = { field: 'f1', label: 'f1' }; - const bucket: FacetFieldBucket = { checked: true, filterQuery: 'q1', label: 'q1', count: 1 }; - - component.onToggleBucket(event, field, bucket); - - expect(queryBuilder.removeUserFacetBucket).toHaveBeenCalledWith(field, bucket); - expect(queryBuilder.update).toHaveBeenCalled(); - }); - - it('should unselect facet query and update builder', () => { - spyOn(queryBuilder, 'update').and.stub(); - spyOn(queryBuilder, 'removeUserFacetBucket').and.callThrough(); - - const event: any = { checked: false }; - const query = { checked: true, label: 'q1', filterQuery: 'query1' }; - const field = { type: 'query', label: 'label1', buckets: [ query ] }; - - component.onToggleBucket(event, field, query); - - expect(query.checked).toEqual(false); - expect(queryBuilder.removeUserFacetBucket).toHaveBeenCalledWith(field, query); - expect(queryBuilder.update).toHaveBeenCalled(); - }); - - it('should fetch facet queries from response payload', () => { - component.responseFacets = null; - - queryBuilder.config = { - categories: [], - facetQueries: { - label: 'label1', - queries: [ - { label: 'q1', query: 'query1' }, - { label: 'q2', query: 'query2' } - ] - } - }; - - const queries = [ - { label: 'q1', filterQuery: 'query1', metrics: [{value: {count: 1}}] }, - { label: 'q2', filterQuery: 'query2', metrics: [{value: {count: 1}}] } - ]; - const data = { - list: { - context: { - facets: [{ - type: 'query', - label: 'label1', - buckets: queries - }] - } - } - }; - - component.onDataLoaded(data); - - expect(component.responseFacets.length).toBe(1); - expect(component.responseFacets[0].buckets.length).toEqual(2); - }); - - it('should preserve order after response processing', () => { - component.responseFacets = null; - - queryBuilder.config = { - categories: [], - facetQueries: { - label: 'label1', - queries: [ - { label: 'q1', query: 'query1' }, - { label: 'q2', query: 'query2' }, - { label: 'q3', query: 'query3' } - ] - } - }; - - const queries = [ - { label: 'q2', filterQuery: 'query2', metrics: [{value: {count: 1}}] }, - { label: 'q1', filterQuery: 'query1', metrics: [{value: {count: 1}}] }, - { label: 'q3', filterQuery: 'query3', metrics: [{value: {count: 1}}] } - - ]; - const data = { - list: { - context: { - facets: [{ - type: 'query', - label: 'label1', - buckets: queries - }] - } - } - }; - - component.onDataLoaded(data); - - expect(component.responseFacets.length).toBe(1); - expect(component.responseFacets[0].buckets.length).toBe(3); - expect(component.responseFacets[0].buckets.items[0].label).toBe('q1'); - expect(component.responseFacets[0].buckets.items[1].label).toBe('q2'); - expect(component.responseFacets[0].buckets.items[2].label).toBe('q3'); - }); - - it('should not fetch facet queries from response payload', () => { - component.responseFacets = null; - - queryBuilder.config = { - categories: [], - facetQueries: { - queries: [] - } - }; - - const data = { - list: { - context: { - facets: null - } - } - }; - - component.onDataLoaded(data); - - expect(component.responseFacets).toBeNull(); - }); - - it('should fetch facet fields from response payload', () => { - component.responseFacets = null; - - queryBuilder.config = { - categories: [], - facetFields: { fields: [ - { label: 'f1', field: 'f1', mincount: 0 }, - { label: 'f2', field: 'f2', mincount: 0 } - ]}, - facetQueries: { - queries: [] - } - }; - - const fields: any = [ - { type: 'field', label: 'f1', buckets: [{ label: 'a1' }, { label: 'a2' }] }, - { type: 'field', label: 'f2', buckets: [{ label: 'b1' }, { label: 'b2' }] } - ]; - const data = { - list: { - context: { - facets: fields - } - } - }; - - component.onDataLoaded(data); - - expect(component.responseFacets.length).toEqual(2); - expect(component.responseFacets[0].buckets.length).toEqual(2); - expect(component.responseFacets[1].buckets.length).toEqual(2); - }); - - it('should filter response facet fields based on search filter config method', () => { - queryBuilder.config = { - categories: [], - facetFields: { fields: [ - { label: 'f1', field: 'f1' } - ]}, - facetQueries: { - queries: [] - }, - filterWithContains: false - }; - - const initialFields: any = [ - { type: 'field', label: 'f1', buckets: [ - { label: 'firstLabel', display: 'firstLabel', metrics: [{value: {count: 5}}] }, - { label: 'secondLabel', display: 'secondLabel', metrics: [{value: {count: 5}}] }, - { label: 'thirdLabel', display: 'thirdLabel', metrics: [{value: {count: 5}}] } - ] - } - ]; - - const data = { - list: { - context: { - facets: initialFields - } - } - }; - - component.onDataLoaded(data); - expect(component.responseFacets.length).toBe(1); - expect(component.responseFacets[0].buckets.visibleItems.length).toBe(3); - - component.responseFacets[0].buckets.filterText = 'f'; - expect(component.responseFacets[0].buckets.visibleItems.length).toBe(1); - expect(component.responseFacets[0].buckets.visibleItems[0].label).toEqual('firstLabel'); - - component.responseFacets[0].buckets.filterText = 'label'; - expect(component.responseFacets[0].buckets.visibleItems.length).toBe(0); - - // Set filter method to use contains and test again - queryBuilder.config.filterWithContains = true; - component.responseFacets[0].buckets.filterText = 'f'; - expect(component.responseFacets[0].buckets.visibleItems.length).toBe(1); - component.responseFacets[0].buckets.filterText = 'label'; - expect(component.responseFacets[0].buckets.visibleItems.length).toBe(3); - }); - - it('should fetch facet fields from response payload and show the bucket values', () => { - component.responseFacets = null; - - queryBuilder.config = { - categories: [], - facetFields: { fields: [ - { label: 'f1', field: 'f1' }, - { label: 'f2', field: 'f2' } - ]}, - facetQueries: { - queries: [] - } - }; - - const serverResponseFields: any = [ - { - type: 'field', - label: 'f1', - buckets: [ - { label: 'b1', metrics: [{value: {count: 10}}] }, - { label: 'b2', metrics: [{value: {count: 1}}] } - ] - }, - { type: 'field', label: 'f2', buckets: [] } - ]; - const data = { - list: { - context: { - facets: serverResponseFields - } - } - }; - - component.onDataLoaded(data); - expect(component.responseFacets.length).toEqual(1); - expect(component.responseFacets[0].buckets.items[0].count).toEqual(10); - expect(component.responseFacets[0].buckets.items[1].count).toEqual(1); - }); - - it('should fetch facet fields from response payload and update the existing bucket values', () => { - queryBuilder.config = { - categories: [], - facetFields: { fields: [ - { label: 'f1', field: 'f1' }, - { label: 'f2', field: 'f2' } - ]}, - facetQueries: { - queries: [] - } - }; - - const initialFields: any = [ - { type: 'field', label: 'f1', buckets: { items: [{ label: 'b1', count: 10, filterQuery: 'filter' }, { label: 'b2', count: 1 }]} }, - { type: 'field', label: 'f2', buckets: [] } - ]; - component.responseFacets = initialFields; - expect(component.responseFacets[0].buckets.items[0].count).toEqual(10); - expect(component.responseFacets[0].buckets.items[1].count).toEqual(1); - - const serverResponseFields: any = [ - { type: 'field', label: 'f1', buckets: - [{ label: 'b1', metrics: [{value: {count: 6}}], filterQuery: 'filter' }, - { label: 'b2', metrics: [{value: {count: 0}}] }] }, - { type: 'field', label: 'f2', buckets: [] } - ]; - const data = { - list: { - context: { - facets: serverResponseFields - } - } - }; - - component.onDataLoaded(data); - expect(component.responseFacets[0].buckets.items[0].count).toEqual(6); - expect(component.responseFacets[0].buckets.items[1].count).toEqual(0); - }); - - it('should update correctly the existing facetFields bucket values', () => { - component.responseFacets = null; - - queryBuilder.config = { - categories: [], - facetFields: { fields: [{ label: 'f1', field: 'f1' }] }, - facetQueries: { queries: [] } - }; - - const firstCallFields: any = [{ - type: 'field', - label: 'f1', - buckets: [{ label: 'b1', metrics: [{value: {count: 10}}] }] - }]; - const firstCallData = { list: { context: { facets: firstCallFields }}}; - component.onDataLoaded(firstCallData); - expect(component.responseFacets[0].buckets.items[0].count).toEqual(10); - - const secondCallFields: any = [{ - type: 'field', - label: 'f1', - buckets: [{ label: 'b1', metrics: [{value: {count: 6}}] }] - }]; - const secondCallData = { list: { context: { facets: secondCallFields}}}; - component.onDataLoaded(secondCallData); - expect(component.responseFacets[0].buckets.items[0].count).toEqual(6); - }); - it('should fetch facet fields from response payload and show the already checked items', () => { spyOn(queryBuilder, 'execute').and.stub(); queryBuilder.config = { @@ -426,13 +87,13 @@ describe('SearchFilterComponent', () => { } }; - component.responseFacets = [ - { type: 'field', label: 'f1', field: 'f1', buckets: {items: [ + searchFacetFiltersService.responseFacets = [ + { type: 'field', label: 'f1', field: 'f1', buckets: new SearchFilterList([ { label: 'b1', count: 10, filterQuery: 'filter', checked: true }, - { label: 'b2', count: 1, filterQuery: 'filter2' }] }}, - { type: 'field', label: 'f2', field: 'f2', buckets: {items: [] }} + { label: 'b2', count: 1, filterQuery: 'filter2' }]) }, + { type: 'field', label: 'f2', field: 'f2', buckets: new SearchFilterList([]) } ]; - component.queryBuilder.addUserFacetBucket({ label: 'f1', field: 'f1' }, component.responseFacets[0].buckets.items[0]); + queryBuilder.addUserFacetBucket({ label: 'f1', field: 'f1' }, searchFacetFiltersService.responseFacets[0].buckets.items[0]); const serverResponseFields: any = [ { type: 'field', label: 'f1', field: 'f1', buckets: [ @@ -447,10 +108,14 @@ describe('SearchFilterComponent', () => { } } }; - component.selectFacetBucket({ field: 'f1', label: 'f1' }, component.responseFacets[0].buckets.items[1]); - component.onDataLoaded(data); - expect(component.responseFacets.length).toEqual(2); - expect(component.responseFacets[0].buckets.items[0].checked).toEqual(true, 'should show the already checked item'); + + fixture.detectChanges(); + const facetField: SearchFacetFieldComponent = fixture.debugElement.query(By.css('adf-search-facet-field')).componentInstance; + facetField.selectFacetBucket({ field: 'f1', label: 'f1' }, searchFacetFiltersService.responseFacets[0].buckets.items[1]); + + searchFacetFiltersService.onDataLoaded(data); + expect(searchFacetFiltersService.responseFacets.length).toEqual(2); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[0].checked).toEqual(true, 'should show the already checked item'); }); it('should fetch facet fields from response payload and show the newly checked items', () => { @@ -466,13 +131,13 @@ describe('SearchFilterComponent', () => { } }; - component.responseFacets = [ - { type: 'field', label: 'f1', field: 'f1', buckets: {items: [ + searchFacetFiltersService.responseFacets = [ + { type: 'field', label: 'f1', field: 'f1', buckets: new SearchFilterList([ { label: 'b1', count: 10, filterQuery: 'filter', checked: true }, - { label: 'b2', count: 1, filterQuery: 'filter2' }] }}, - { type: 'field', label: 'f2', field: 'f2', buckets: {items: [] }} + { label: 'b2', count: 1, filterQuery: 'filter2' }]) }, + { type: 'field', label: 'f2', field: 'f2', buckets: new SearchFilterList([]) } ]; - component.queryBuilder.addUserFacetBucket({ label: 'f1', field: 'f1' }, component.responseFacets[0].buckets.items[0]); + searchFacetFiltersService.queryBuilder.addUserFacetBucket({ label: 'f1', field: 'f1' }, searchFacetFiltersService.responseFacets[0].buckets.items[0]); const serverResponseFields: any = [ { type: 'field', label: 'f1', field: 'f1', buckets: [ @@ -487,10 +152,14 @@ describe('SearchFilterComponent', () => { } } }; - component.selectFacetBucket({ label: 'f1', field: 'f1' }, component.responseFacets[0].buckets.items[1]); - component.onDataLoaded(data); - expect(component.responseFacets.length).toEqual(2); - expect(component.responseFacets[0].buckets.items[1].checked).toEqual(true, 'should show the newly checked item'); + + fixture.detectChanges(); + const facetField: SearchFacetFieldComponent = fixture.debugElement.query(By.css('adf-search-facet-field')).componentInstance; + facetField.selectFacetBucket({ field: 'f1', label: 'f1' }, searchFacetFiltersService.responseFacets[0].buckets.items[1]); + + searchFacetFiltersService.onDataLoaded(data); + expect(searchFacetFiltersService.responseFacets.length).toEqual(2); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[1].checked).toEqual(true, 'should show the newly checked item'); }); it('should show buckets with 0 values when there are no facet fields on the response payload', () => { @@ -506,99 +175,26 @@ describe('SearchFilterComponent', () => { } }; - component.responseFacets = [ - { type: 'field', label: 'f1', field: 'f1', buckets: {items: [ + searchFacetFiltersService.responseFacets = [ + { type: 'field', label: 'f1', field: 'f1', buckets: new SearchFilterList([ { label: 'b1', count: 10, filterQuery: 'filter', checked: true }, - { label: 'b2', count: 1, filterQuery: 'filter2' }] }}, - { type: 'field', label: 'f2', field: 'f2', buckets: {items: [] }} + { label: 'b2', count: 1, filterQuery: 'filter2' }]) }, + { type: 'field', label: 'f2', field: 'f2', buckets: new SearchFilterList() } ]; - component.queryBuilder.addUserFacetBucket({ label: 'f1', field: 'f1' }, component.responseFacets[0].buckets.items[0]); + searchFacetFiltersService.queryBuilder.addUserFacetBucket({ label: 'f1', field: 'f1' }, searchFacetFiltersService.responseFacets[0].buckets.items[0]); const data = { list: { context: {} } }; - component.selectFacetBucket({ label: 'f1', field: 'f1' }, component.responseFacets[0].buckets.items[1]); - component.onDataLoaded(data); - - expect(component.responseFacets[0].buckets.items[0].count).toEqual(0); - expect(component.responseFacets[0].buckets.items[1].count).toEqual(0); - }); - - it('should update query builder only when has bucket to unselect', () => { - spyOn(queryBuilder, 'update').and.stub(); - - const field: FacetField = { field: 'f1', label: 'f1' }; - component.onToggleBucket( { checked: true }, field, null); - - expect(queryBuilder.update).not.toHaveBeenCalled(); - }); - - it('should allow to to reset selected buckets', () => { - const buckets: FacetFieldBucket[] = [ - { label: 'bucket1', checked: true, count: 1, filterQuery: 'q1' }, - { label: 'bucket2', checked: false, count: 1, filterQuery: 'q2' } - ]; - - const field: FacetField = { - field: 'f1', - label: 'field1', - buckets: new SearchFilterList(buckets) - }; - expect(component.canResetSelectedBuckets(field)).toBeTruthy(); - }); - - it('should not allow to reset selected buckets', () => { - const buckets: FacetFieldBucket[] = [ - { label: 'bucket1', checked: false, count: 1, filterQuery: 'q1' }, - { label: 'bucket2', checked: false, count: 1, filterQuery: 'q2' } - ]; - - const field: FacetField = { - field: 'f1', - label: 'field1', - buckets: new SearchFilterList(buckets) - }; - - expect(component.canResetSelectedBuckets(field)).toEqual(false); - }); - - it('should reset selected buckets', () => { - spyOn(queryBuilder, 'execute').and.stub(); - const buckets: FacetFieldBucket[] = [ - { label: 'bucket1', checked: false, count: 1, filterQuery: 'q1' }, - { label: 'bucket2', checked: true, count: 1, filterQuery: 'q2' } - ]; - - const field: FacetField = { - field: 'f1', - label: 'field1', - buckets: new SearchFilterList(buckets) - }; - - component.resetSelectedBuckets(field); - - expect(buckets[0].checked).toEqual(false); - expect(buckets[1].checked).toEqual(false); - }); - - it('should update query builder upon resetting buckets', () => { - spyOn(queryBuilder, 'update').and.stub(); - - const buckets: FacetFieldBucket[] = [ - { label: 'bucket1', checked: false, count: 1, filterQuery: 'q1' }, - { label: 'bucket2', checked: true, count: 1, filterQuery: 'q2' } - ]; - - const field: FacetField = { - field: 'f1', - label: 'field1', - buckets: new SearchFilterList(buckets) - }; + fixture.detectChanges(); + const facetField: SearchFacetFieldComponent = fixture.debugElement.query(By.css('adf-search-facet-field')).componentInstance; + facetField.selectFacetBucket({ label: 'f1', field: 'f1' }, searchFacetFiltersService.responseFacets[0].buckets.items[1]); + searchFacetFiltersService.onDataLoaded(data); - component.resetSelectedBuckets(field); - expect(queryBuilder.update).toHaveBeenCalled(); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[0].count).toEqual(0); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[1].count).toEqual(0); }); it('should update query builder upon resetting selected queries', () => { @@ -607,110 +203,25 @@ describe('SearchFilterComponent', () => { const queryResponse = { label: 'query response', - buckets: { - items: [ + buckets: new SearchFilterList([ { label: 'q1', query: 'q1', checked: true, metrics: [{value: {count: 1}}] }, { label: 'q2', query: 'q2', checked: false, metrics: [{value: {count: 1}}] }, - { label: 'q3', query: 'q3', checked: true, metrics: [{value: {count: 1}}] }] - }}; - component.responseFacets = [queryResponse]; - component.resetSelectedBuckets(queryResponse); + { label: 'q3', query: 'q3', checked: true, metrics: [{value: {count: 1}}] }]) + }; + searchFacetFiltersService.responseFacets = [queryResponse]; + + fixture.detectChanges(); + const facetField: SearchFacetFieldComponent = fixture.debugElement.query(By.css('adf-search-facet-field')).componentInstance; + facetField.resetSelectedBuckets(queryResponse); expect(queryBuilder.removeUserFacetBucket).toHaveBeenCalledTimes(3); expect(queryBuilder.update).toHaveBeenCalled(); - for (const entry of component.responseFacets[0].buckets.items) { + for (const entry of searchFacetFiltersService.responseFacets[0].buckets.items) { expect(entry.checked).toEqual(false); } }); - - it('should fetch facet intervals from response payload', () => { - component.responseFacets = null; - queryBuilder.config = { - categories: [], - facetIntervals: { - intervals: [ - { label: 'test_intervals1', field: 'f1', sets: [ - { label: 'interval1', start: 's1', end: 'e1'}, - { label: 'interval2', start: 's2', end: 'e2'} - ]}, - { label: 'test_intervals2', field: 'f2', sets: [ - { label: 'interval3', start: 's3', end: 'e3'}, - { label: 'interval4', start: 's4', end: 'e4'} - ]} - ] - } - }; - - const response1 = [ - { label: 'interval1', filterQuery: 'query1', metrics: [{ value: { count: 1 }}]}, - { label: 'interval2', filterQuery: 'query2', metrics: [{ value: { count: 2 }}]} - ]; - const response2 = [ - { label: 'interval3', filterQuery: 'query3', metrics: [{ value: { count: 3 }}]}, - { label: 'interval4', filterQuery: 'query4', metrics: [{ value: { count: 4 }}]} - ]; - const data = { - list: { - context: { - facets: [ - { type: 'interval', label: 'test_intervals1', buckets: response1 }, - { type: 'interval', label: 'test_intervals2', buckets: response2 } - ] - } - } - }; - - component.onDataLoaded(data); - - expect(component.responseFacets.length).toBe(2); - expect(component.responseFacets[0].buckets.length).toEqual(2); - expect(component.responseFacets[1].buckets.length).toEqual(2); - }); - - it('should filter out the fetched facet intervals that have bucket values less than their set mincount', () => { - component.responseFacets = null; - queryBuilder.config = { - categories: [], - facetIntervals: { - intervals: [ - { label: 'test_intervals1', field: 'f1', mincount: 2, sets: [ - { label: 'interval1', start: 's1', end: 'e1'}, - { label: 'interval2', start: 's2', end: 'e2'} - ]}, - { label: 'test_intervals2', field: 'f2', mincount: 5, sets: [ - { label: 'interval3', start: 's3', end: 'e3'}, - { label: 'interval4', start: 's4', end: 'e4'} - ]} - ] - } - }; - - const response1 = [ - { label: 'interval1', filterQuery: 'query1', metrics: [{ value: { count: 1 }}]}, - { label: 'interval2', filterQuery: 'query2', metrics: [{ value: { count: 2 }}]} - ]; - const response2 = [ - { label: 'interval3', filterQuery: 'query3', metrics: [{ value: { count: 3 }}]}, - { label: 'interval4', filterQuery: 'query4', metrics: [{ value: { count: 4 }}]} - ]; - const data = { - list: { - context: { - facets: [ - { type: 'interval', label: 'test_intervals1', buckets: response1 }, - { type: 'interval', label: 'test_intervals2', buckets: response2 } - ] - } - } - }; - - component.onDataLoaded(data); - - expect(component.responseFacets.length).toBe(1); - expect(component.responseFacets[0].buckets.length).toEqual(1); - }); - }); + }); describe('widgets', () => { @@ -919,8 +430,6 @@ describe('SearchFilterComponent', () => { fixture.detectChanges(); spyOn(queryBuilder, 'update').and.stub(); - spyOn(component, 'selectFacetBucket').and.callThrough(); - spyOn(component, 'onToggleBucket').and.callThrough(); const inputElement = fixture.debugElement.query(By.css(`${panel} input`)); inputElement.nativeElement.value = 'Extra'; @@ -937,7 +446,7 @@ describe('SearchFilterComponent', () => { filteredMenu = getAllMenus(`${panel} mat-checkbox`, fixture); expect(filteredMenu).toEqual(filteredResult); - const clearButton = fixture.debugElement.query(By.css(`${panel} button`)); + const clearButton = fixture.debugElement.query(By.css(`${panel} mat-form-field button`)); clearButton.triggerEventHandler('click', {}); fixture.detectChanges(); @@ -951,8 +460,7 @@ describe('SearchFilterComponent', () => { const checkedOption = fixture.debugElement.query(By.css(`${panel} mat-checkbox.mat-checkbox-checked`)); expect(checkedOption.nativeElement.innerText).toEqual('Extra Small (10239)'); - expect(component.onToggleBucket).toHaveBeenCalledTimes(1); - expect(component.selectFacetBucket).toHaveBeenCalledTimes(1); + expect(queryBuilder.update).toHaveBeenCalledTimes(1); }); it('should preserve the filter state if other fields edited', () => { @@ -964,8 +472,6 @@ describe('SearchFilterComponent', () => { queryBuilder.executed.next( mockSearchResult); fixture.detectChanges(); spyOn(queryBuilder, 'update').and.stub(); - spyOn(component, 'selectFacetBucket').and.callThrough(); - spyOn(component, 'onToggleBucket').and.callThrough(); const inputElement = fixture.debugElement.query(By.css(`${panel1} input`)); inputElement.nativeElement.value = 'my'; @@ -995,15 +501,20 @@ describe('SearchFilterComponent', () => { panel1CheckedOption = fixture.debugElement.query(By.css(`${panel1} mat-checkbox.mat-checkbox-checked`)); expect(panel1CheckedOption.nativeElement.innerText).toEqual('my1 (806)'); - expect(component.onToggleBucket).toHaveBeenCalledTimes(2); - expect(component.selectFacetBucket).toHaveBeenCalledTimes(2); + expect(queryBuilder.update).toHaveBeenCalledTimes(2); }); it('should reset the query fragments when reset All is clicked', () => { component.queryBuilder.queryFragments = { 'fragment1' : 'value1'}; - component.responseFacets = []; - spyOn(queryBuilder, 'resetToDefaults').and.stub(); - component.resetAll(); + appConfigService.config.search = searchFilter; + searchFacetFiltersService.responseFacets = []; + component.displayResetButton = true; + fixture.detectChanges(); + spyOn(queryBuilder, 'resetToDefaults').and.callThrough(); + + const resetButton = fixture.debugElement.query(By.css('button')); + resetButton.nativeElement.click(); + expect(component.queryBuilder.queryFragments).toEqual({}); expect(queryBuilder.resetToDefaults).toHaveBeenCalled(); }); diff --git a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts index 83e5ae7af0c..840f22d83ed 100644 --- a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts +++ b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts @@ -15,22 +15,12 @@ * limitations under the License. */ -import { Component, ViewEncapsulation, OnInit, OnDestroy, Inject, Input } from '@angular/core'; -import { MatCheckboxChange } from '@angular/material/checkbox'; -import { TranslationService, SearchService } from '@alfresco/adf-core'; -import { SearchQueryBuilderService } from '../../search-query-builder.service'; +import { Component, Inject, Input, ViewEncapsulation } from '@angular/core'; +import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; import { FacetFieldBucket } from '../../models/facet-field-bucket.interface'; import { FacetField } from '../../models/facet-field.interface'; -import { SearchFilterList } from '../../models/search-filter-list.model'; -import { takeUntil } from 'rxjs/operators'; -import { GenericBucket, GenericFacetResponse, ResultSetContext, ResultSetPaging } from '@alfresco/js-api'; -import { Subject } from 'rxjs'; import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token'; - -export interface SelectedBucket { - field: FacetField; - bucket: FacetFieldBucket; -} +import { SearchFacetFiltersService } from '../../services/search-facet-filters.service'; @Component({ selector: 'adf-search-filter', @@ -38,36 +28,22 @@ export interface SelectedBucket { encapsulation: ViewEncapsulation.None, host: { class: 'adf-search-filter' } }) -export class SearchFilterComponent implements OnInit, OnDestroy { +export class SearchFilterComponent { /** Toggles whether to show or not the context facet filters. */ @Input() showContextFacets: boolean = true; - private DEFAULT_PAGE_SIZE = 5; - - /** All facet field items to be displayed in the component. These are updated according to the response. - * When a new search is performed, the already existing items are updated with the new bucket count values and - * the newly received items are added to the responseFacets. - */ - responseFacets: FacetField[] = null; - - private facetQueriesPageSize = this.DEFAULT_PAGE_SIZE; facetQueriesLabel: string = 'Facet Queries'; facetExpanded = { 'default': false }; displayResetButton: boolean; - selectedBuckets: SelectedBucket[] = []; - - private onDestroy$ = new Subject(); constructor(@Inject(SEARCH_QUERY_SERVICE_TOKEN) public queryBuilder: SearchQueryBuilderService, - private searchService: SearchService, - private translationService: TranslationService) { + public facetFiltersService: SearchFacetFiltersService) { if (queryBuilder.config && queryBuilder.config.facetQueries) { this.facetQueriesLabel = queryBuilder.config.facetQueries.label || 'Facet Queries'; - this.facetQueriesPageSize = queryBuilder.config.facetQueries.pageSize || this.DEFAULT_PAGE_SIZE; this.facetExpanded['query'] = queryBuilder.config.facetQueries.expanded; } if (queryBuilder.config && queryBuilder.config.facetFields) { @@ -77,350 +53,13 @@ export class SearchFilterComponent implements OnInit, OnDestroy { this.facetExpanded['interval'] = queryBuilder.config.facetIntervals.expanded; } this.displayResetButton = this.queryBuilder.config && !!this.queryBuilder.config.resetButton; - - this.queryBuilder.updated - .pipe(takeUntil(this.onDestroy$)) - .subscribe((query) => this.queryBuilder.execute(query)); - } - - ngOnInit() { - if (this.queryBuilder) { - this.queryBuilder.executed - .pipe(takeUntil(this.onDestroy$)) - .subscribe((resultSetPaging: ResultSetPaging) => { - this.onDataLoaded(resultSetPaging); - this.searchService.dataLoaded.next(resultSetPaging); - }); - } - } - - ngOnDestroy() { - this.onDestroy$.next(true); - this.onDestroy$.complete(); - } - - private updateSelectedBuckets() { - if (this.responseFacets) { - this.selectedBuckets = []; - for (const field of this.responseFacets) { - if (field.buckets) { - this.selectedBuckets.push( - ...this.queryBuilder.getUserFacetBuckets(field.field) - .filter((bucket) => bucket.checked) - .map((bucket) => { - return { field, bucket }; - }) - ); - } - } - } else { - this.selectedBuckets = []; - } - } - - onToggleBucket(event: MatCheckboxChange, field: FacetField, bucket: FacetFieldBucket) { - if (event && bucket) { - if (event.checked) { - this.selectFacetBucket(field, bucket); - } else { - this.unselectFacetBucket(field, bucket); - } - } - } - - selectFacetBucket(field: FacetField, bucket: FacetFieldBucket) { - if (bucket) { - bucket.checked = true; - this.queryBuilder.addUserFacetBucket(field, bucket); - this.updateSelectedBuckets(); - this.queryBuilder.update(); - } - } - - unselectFacetBucket(field: FacetField, bucket: FacetFieldBucket) { - if (bucket) { - bucket.checked = false; - this.queryBuilder.removeUserFacetBucket(field, bucket); - this.updateSelectedBuckets(); - this.queryBuilder.update(); - } - } - - canResetSelectedBuckets(field: FacetField): boolean { - if (field && field.buckets) { - return field.buckets.items.some((bucket) => bucket.checked); - } - return false; - } - - resetSelectedBuckets(field: FacetField) { - if (field && field.buckets) { - for (const bucket of field.buckets.items) { - bucket.checked = false; - this.queryBuilder.removeUserFacetBucket(field, bucket); - } - this.updateSelectedBuckets(); - this.queryBuilder.update(); - } - } - - resetAllSelectedBuckets() { - this.responseFacets.forEach((field) => { - if (field && field.buckets) { - for (const bucket of field.buckets.items) { - bucket.checked = false; - this.queryBuilder.removeUserFacetBucket(field, bucket); - } - this.updateSelectedBuckets(); - } - }); - this.queryBuilder.update(); - } - - resetQueryFragments() { - this.queryBuilder.queryFragments = {}; - this.queryBuilder.resetToDefaults(); - } - - resetAll() { - this.resetAllSelectedBuckets(); - this.resetQueryFragments(); - this.responseFacets = null; } shouldExpand(field: FacetField): boolean { return this.facetExpanded[field.type] || this.facetExpanded['default']; } - onDataLoaded(data: any) { - const context = data.list.context; - - if (context) { - this.parseFacets(context); - } else { - this.responseFacets = null; - } - } - - private parseFacets(context: ResultSetContext) { - this.parseFacetFields(context); - this.parseFacetIntervals(context); - this.parseFacetQueries(context); - } - - private parseFacetItems(context: ResultSetContext, configFacetFields: FacetField[], itemType: string) { - configFacetFields.forEach((field) => { - const responseField = this.findFacet(context, itemType, field.label); - const responseBuckets = this.getResponseBuckets(responseField, field) - .filter(this.getFilterByMinCount(field.mincount)); - const alreadyExistingField = this.findResponseFacet(itemType, field.label); - - if (alreadyExistingField) { - const alreadyExistingBuckets = alreadyExistingField.buckets && alreadyExistingField.buckets.items || []; - - this.updateExistingBuckets(responseField, responseBuckets, alreadyExistingField, alreadyExistingBuckets); - } else if (responseField && this.showContextFacets) { - if (responseBuckets.length > 0) { - const bucketList = new SearchFilterList(responseBuckets, field.pageSize); - bucketList.filter = this.getBucketFilterFunction(bucketList); - - if (!this.responseFacets) { - this.responseFacets = []; - } - this.responseFacets.push( { - ...field, - type: responseField.type || itemType, - label: field.label, - pageSize: field.pageSize | this.DEFAULT_PAGE_SIZE, - currentPageSize: field.pageSize | this.DEFAULT_PAGE_SIZE, - buckets: bucketList - }); - } - } - }); - } - - private parseFacetFields(context: ResultSetContext) { - const configFacetFields = this.queryBuilder.config.facetFields && this.queryBuilder.config.facetFields.fields || []; - this.parseFacetItems(context, configFacetFields, 'field'); - } - - private parseFacetIntervals(context: ResultSetContext) { - const configFacetIntervals = this.queryBuilder.config.facetIntervals && this.queryBuilder.config.facetIntervals.intervals || []; - this.parseFacetItems(context, configFacetIntervals, 'interval'); - } - - private parseFacetQueries(context: ResultSetContext) { - const configFacetQueries = this.queryBuilder.config.facetQueries && this.queryBuilder.config.facetQueries.queries || []; - const configGroups = configFacetQueries.reduce((acc, query) => { - const group = this.queryBuilder.getQueryGroup(query); - if (acc[group]) { - acc[group].push(query); - } else { - acc[group] = [query]; - } - return acc; - }, []); - - const mincount = this.queryBuilder.config.facetQueries && this.queryBuilder.config.facetQueries.mincount; - const mincountFilter = this.getFilterByMinCount(mincount); - - Object.keys(configGroups).forEach((group) => { - const responseField = this.findFacet(context, 'query', group); - const responseBuckets = this.getResponseQueryBuckets(responseField, configGroups[group]) - .filter(mincountFilter); - const alreadyExistingField = this.findResponseFacet('query', group); - - if (alreadyExistingField) { - const alreadyExistingBuckets = alreadyExistingField.buckets && alreadyExistingField.buckets.items || []; - - this.updateExistingBuckets(responseField, responseBuckets, alreadyExistingField, alreadyExistingBuckets); - } else if (responseField && this.showContextFacets) { - if (responseBuckets.length > 0) { - const bucketList = new SearchFilterList(responseBuckets, this.facetQueriesPageSize); - bucketList.filter = this.getBucketFilterFunction(bucketList); - - if (!this.responseFacets) { - this.responseFacets = []; - } - this.responseFacets.push( { - field: group, - type: responseField.type || 'query', - label: group, - pageSize: this.DEFAULT_PAGE_SIZE, - currentPageSize: this.DEFAULT_PAGE_SIZE, - buckets: bucketList - }); - } - } - }); - - } - - private getResponseBuckets(responseField: GenericFacetResponse, configField: FacetField): FacetFieldBucket[] { - return ((responseField && responseField.buckets) || []).map((respBucket) => { - - respBucket['count'] = this.getCountValue(respBucket); - respBucket.filterQuery = respBucket.filterQuery || this.getCorrespondingFilterQuery(configField, respBucket.label); - return { - ...respBucket, - checked: false, - display: respBucket.display, - label: respBucket.label - }; - }); - } - - private getResponseQueryBuckets(responseField: GenericFacetResponse, configGroup: any): FacetFieldBucket[] { - return (configGroup || []).map((query) => { - const respBucket = ((responseField && responseField.buckets) || []) - .find((bucket) => bucket.label === query.label) || {}; - - respBucket['count'] = this.getCountValue(respBucket); - return { - ...respBucket, - checked: false, - display: respBucket.display, - label: respBucket.label - }; - }); - } - - private getCountValue(bucket: GenericBucket): number { - return (!!bucket && !!bucket.metrics && bucket.metrics[0]?.value?.count) || 0; - } - getBucketCountDisplay(bucket: FacetFieldBucket): string { return bucket.count === null ? '' : `(${bucket.count})`; } - - private getFilterByMinCount(mincountInput: number) { - return (bucket) => { - let mincount = mincountInput; - if (mincount === undefined) { - mincount = 1; - } - return bucket.count >= mincount; - }; - } - - private getCorrespondingFilterQuery(configFacetItem: FacetField, bucketLabel: string): string { - let filterQuery = null; - - if (configFacetItem.field && bucketLabel) { - - if (configFacetItem.sets) { - const configSet = configFacetItem.sets.find((set) => bucketLabel === set.label); - - if (configSet) { - filterQuery = this.buildIntervalQuery(configFacetItem.field, configSet); - } - - } else { - filterQuery = `${configFacetItem.field}:"${bucketLabel}"`; - } - } - - return filterQuery; - } - - private buildIntervalQuery(fieldName: string, interval: any): string { - const start = interval.start; - const end = interval.end; - const startLimit = (interval.startInclusive === undefined || interval.startInclusive === true) ? '[' : '<'; - const endLimit = (interval.endInclusive === undefined || interval.endInclusive === true) ? ']' : '>'; - - return `${fieldName}:${startLimit}"${start}" TO "${end}"${endLimit}`; - } - - private findFacet(context: ResultSetContext, itemType: string, fieldLabel: string): GenericFacetResponse { - return (context.facets || []).find((response) => response.type === itemType && response.label === fieldLabel) || {}; - } - - private findResponseFacet(itemType: string, fieldLabel: string): FacetField { - return (this.responseFacets || []).find((response) => response.type === itemType && response.label === fieldLabel); - } - - private updateExistingBuckets(responseField, responseBuckets, alreadyExistingField, alreadyExistingBuckets) { - const bucketsToDelete = []; - - alreadyExistingBuckets - .map((bucket) => { - const responseBucket = ((responseField && responseField.buckets) || []).find((respBucket) => respBucket.label === bucket.label); - - if (!responseBucket) { - bucketsToDelete.push(bucket); - } - bucket.count = this.getCountValue(responseBucket); - return bucket; - }); - - const hasSelection = this.selectedBuckets - .find((selBuckets) => alreadyExistingField.label === selBuckets.field.label && alreadyExistingField.type === selBuckets.field.type); - - if (!hasSelection && bucketsToDelete.length) { - bucketsToDelete.forEach((bucket) => { - alreadyExistingField.buckets.deleteItem(bucket); - }); - } - - responseBuckets.forEach((respBucket) => { - const existingBucket = alreadyExistingBuckets.find((oldBucket) => oldBucket.label === respBucket.label); - - if (!existingBucket) { - alreadyExistingField.buckets.addItem(respBucket); - } - }); - } - - private getBucketFilterFunction(bucketList) { - return (bucket: FacetFieldBucket): boolean => { - if (bucket && bucketList.filterText) { - const pattern = (bucketList.filterText || '').toLowerCase(); - const label = (this.translationService.instant(bucket.display) || this.translationService.instant(bucket.label)).toLowerCase(); - return this.queryBuilder.config.filterWithContains ? label.indexOf(pattern) !== -1 : label.startsWith(pattern); - } - return true; - }; - } } diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.html b/lib/content-services/src/lib/search/components/search-form/search-form.component.html index ebfc225a4c4..59027b9c708 100644 --- a/lib/content-services/src/lib/search/components/search-form/search-form.component.html +++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.html @@ -1,8 +1,33 @@ - - {{ 'SEARCH.FORMS' | translate }} - - - {{form.name | translate}} - - - + + + + + + + + + + + + + + diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.scss b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss new file mode 100644 index 00000000000..6751ce1f57b --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss @@ -0,0 +1,49 @@ +@mixin adf-search-forms-theme($theme) { + $accent: map-get($theme, accent); + + .adf-search-form { + &.mat-button { + height: 35px; + max-width: 190px; + min-width: 190px; + align-content: center; + overflow: hidden; + + .mat-button-wrapper { + display: flex; + align-items: center; + } + } + + &-title { + max-width: 120px; + min-width: 120px; + font-weight: bold; + font-size: 14px; + line-height: 24px; + padding-right: 12px; + text-overflow: ellipsis; + overflow: hidden; + text-align: left; + } + + &-icon { + border: 2px solid transparent; + border-radius: 6px; + transition: border 500ms ease-out; + } + + &-icon-selected { + border-color: mat-color($accent); + } + + &-menu + * .mat-menu-panel { + @include mat-elevation(2); + border-radius: 6px; + + .mat-menu-content { + padding: 0; + } + } + } +} diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.spec.ts b/lib/content-services/src/lib/search/components/search-form/search-form.component.spec.ts index e97486662d6..95cb5dec999 100644 --- a/lib/content-services/src/lib/search/components/search-form/search-form.component.spec.ts +++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.spec.ts @@ -16,20 +16,19 @@ */ import { ComponentFixture, TestBed } from '@angular/core/testing'; - import { SearchFormComponent } from './search-form.component'; import { setupTestBed } from '@alfresco/adf-core'; import { TranslateModule } from '@ngx-translate/core'; import { ContentTestingModule } from '../../../testing/content.testing.module'; import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token'; -import { SearchHeaderQueryBuilderService } from '../../search-header-query-builder.service'; +import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; import { SearchForm } from '../../models/search-form.interface'; import { By } from '@angular/platform-browser'; describe('SearchFormComponent', () => { let fixture: ComponentFixture; let component: SearchFormComponent; - let queryBuilder: SearchHeaderQueryBuilderService; + let queryBuilder: SearchQueryBuilderService; const mockSearchForms: SearchForm[] = [ { default: false, index: 0, name: 'All', selected: false }, { default: true, index: 1, name: 'First', selected: true }, @@ -42,50 +41,59 @@ describe('SearchFormComponent', () => { ContentTestingModule ], providers: [ - { provide: SEARCH_QUERY_SERVICE_TOKEN, useClass: SearchHeaderQueryBuilderService } + { provide: SEARCH_QUERY_SERVICE_TOKEN, useClass: SearchQueryBuilderService } ] }); beforeEach(() => { fixture = TestBed.createComponent(SearchFormComponent); component = fixture.componentInstance; - queryBuilder = TestBed.inject(SEARCH_QUERY_SERVICE_TOKEN); - spyOn(queryBuilder, 'getSearchConfigurationDetails').and.returnValue(mockSearchForms); + queryBuilder = TestBed.inject(SEARCH_QUERY_SERVICE_TOKEN); + queryBuilder.searchForms.next(mockSearchForms); fixture.detectChanges(); }); - it('should show search forms', async () => { - await fixture.whenStable(); - fixture.detectChanges(); - expect(component.selected).toBe(1); - const label = fixture.debugElement.query(By.css('.mat-form-field mat-label')); - expect(label.nativeElement.innerText).toContain('SEARCH.FORMS'); - const selectValue = fixture.debugElement.query(By.css('.mat-select-value')); - expect(selectValue.nativeElement.innerText).toContain('First'); + it('should show search forms', () => { + const title = fixture.debugElement.query(By.css('.adf-search-form-title')); + expect(title.nativeElement.innerText).toContain(mockSearchForms[1].name); }); - it('should emit on form change', async (done) => { + it('should emit on form change', (done) => { + spyOn(queryBuilder, 'updateSelectedConfiguration').and.stub(); component.formChange.subscribe((form) => { expect(form).toEqual(mockSearchForms[2]); + expect(queryBuilder.updateSelectedConfiguration).toHaveBeenCalled(); done(); }); - await fixture.whenStable(); + const button = fixture.debugElement.query(By.css('.adf-search-form')).nativeElement; + button.click(); fixture.detectChanges(); - const matSelect = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement; - matSelect.click(); + const matOption = fixture.debugElement.queryAll(By.css('.mat-menu-item'))[2].nativeElement; + matOption.click(); + }); + + it('should not show menu if only one config found', () => { + queryBuilder.searchForms.next([{ name: 'one', selected: true, default: true, index: 0 }]); fixture.detectChanges(); - const matOption = fixture.debugElement.queryAll(By.css('.mat-option'))[2].nativeElement; - matOption.click(); + const button = fixture.debugElement.query(By.css('.adf-search-form')).nativeElement; + button.click(); + + const title = fixture.debugElement.query(By.css('.adf-search-form-title')); + expect(title.nativeElement.innerText).toContain('one'); + + fixture.detectChanges(); + const matOption = fixture.debugElement.query(By.css('.mat-menu-item')); + expect(matOption).toBe(null, 'should not show mat menu'); }); - it('should not display search form if no form configured', async () => { - component.searchForms = []; - await fixture.whenStable(); + it('should not display search form if no form configured', () => { + queryBuilder.searchForms.next([]); fixture.detectChanges(); - const field = fixture.debugElement.query(By.css('.mat-form-field')); + + const field = fixture.debugElement.query(By.css('.adf-search-form-title')); expect(field).toEqual(null, 'search form displayed for empty configuration'); }); }); diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.ts b/lib/content-services/src/lib/search/components/search-form/search-form.component.ts index 181fb56d712..61c21beeee7 100644 --- a/lib/content-services/src/lib/search/components/search-form/search-form.component.ts +++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.ts @@ -15,30 +15,30 @@ * limitations under the License. */ -import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core'; -import { SearchQueryBuilderService } from '../../search-query-builder.service'; +import { Component, EventEmitter, Inject, Output, ViewEncapsulation } from '@angular/core'; +import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; import { SearchForm } from '../../models/search-form.interface'; import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token'; @Component({ selector: 'adf-search-form', - templateUrl: './search-form.component.html' + templateUrl: './search-form.component.html', + styleUrls: ['./search-form.component.scss'], + encapsulation: ViewEncapsulation.None }) -export class SearchFormComponent implements OnInit { +export class SearchFormComponent { @Output() formChange: EventEmitter = new EventEmitter(); - selected: number; - searchForms: SearchForm[] = []; - - constructor(@Inject(SEARCH_QUERY_SERVICE_TOKEN) private queryBuilder: SearchQueryBuilderService) {} + constructor(@Inject(SEARCH_QUERY_SERVICE_TOKEN) public queryBuilder: SearchQueryBuilderService) { + } - ngOnInit(): void { - this.searchForms = this.queryBuilder.getSearchConfigurationDetails(); - this.selected = this.searchForms.find(form => form.selected)?.index; + onSelectionChange(form: SearchForm) { + this.queryBuilder.updateSelectedConfiguration(form.index); + this.formChange.emit(form); } - onSelectionChange(index: number) { - this.formChange.emit(this.searchForms[index]); + getSelected(forms: SearchForm[]): string { + return forms.find((form) => form.selected)?.name; } } diff --git a/lib/content-services/src/lib/search/components/search-number-range/search-number-range.component.html b/lib/content-services/src/lib/search/components/search-number-range/search-number-range.component.html index ad3b34f2b26..c3f499a37ce 100644 --- a/lib/content-services/src/lib/search/components/search-number-range/search-number-range.component.html +++ b/lib/content-services/src/lib/search/components/search-number-range/search-number-range.component.html @@ -29,8 +29,8 @@ -
-
diff --git a/lib/content-services/src/lib/search/components/search-slider/search-slider.component.spec.ts b/lib/content-services/src/lib/search/components/search-slider/search-slider.component.spec.ts index 233926e9136..39685920eb0 100644 --- a/lib/content-services/src/lib/search/components/search-slider/search-slider.component.spec.ts +++ b/lib/content-services/src/lib/search/components/search-slider/search-slider.component.spec.ts @@ -74,14 +74,13 @@ describe('SearchSliderComponent', () => { component.context = context; component.id = 'contentSize'; component.settings = { field: 'cm:content.size' }; + fixture.detectChanges(); component.onChangedHandler( { value: 10 }); - fixture.detectChanges(); expect(context.queryFragments[component.id]).toEqual('cm:content.size:[0 TO 10]'); expect(context.update).toHaveBeenCalled(); component.onChangedHandler( { value: 20 }); - fixture.detectChanges(); expect(context.queryFragments[component.id]).toEqual('cm:content.size:[0 TO 20]'); }); diff --git a/lib/content-services/src/lib/search/components/search-slider/search-slider.component.ts b/lib/content-services/src/lib/search/components/search-slider/search-slider.component.ts index da53ee455b5..1a7edbd6ec5 100644 --- a/lib/content-services/src/lib/search/components/search-slider/search-slider.component.ts +++ b/lib/content-services/src/lib/search/components/search-slider/search-slider.component.ts @@ -15,11 +15,12 @@ * limitations under the License. */ -import { Component, ViewEncapsulation, OnInit, Input } from '@angular/core'; +import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; import { SearchWidget } from '../../models/search-widget.interface'; import { SearchWidgetSettings } from '../../models/search-widget-settings.interface'; -import { SearchQueryBuilderService } from '../../search-query-builder.service'; +import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; import { MatSliderChange } from '@angular/material/slider'; +import { Subject } from 'rxjs'; @Component({ selector: 'adf-search-slider', @@ -39,6 +40,8 @@ export class SearchSliderComponent implements SearchWidget, OnInit { min: number; max: number; thumbLabel = false; + enableChangeUpdate: boolean; + displayValue$: Subject = new Subject(); /** The numeric value represented by the slider. */ @Input() @@ -59,6 +62,7 @@ export class SearchSliderComponent implements SearchWidget, OnInit { } this.thumbLabel = this.settings['thumbLabel'] ? true : false; + this.enableChangeUpdate = this.settings.allowUpdateOnChange ?? true; } if (this.startValue) { @@ -66,6 +70,13 @@ export class SearchSliderComponent implements SearchWidget, OnInit { } } + clear() { + this.value = this.min || 0; + if (this.enableChangeUpdate) { + this.updateQuery(null); + } + } + reset() { this.value = this.min || 0; this.updateQuery(null); @@ -73,7 +84,9 @@ export class SearchSliderComponent implements SearchWidget, OnInit { onChangedHandler(event: MatSliderChange) { this.value = event.value; - this.updateQuery(this.value); + if (this.enableChangeUpdate) { + this.updateQuery(this.value); + } } submitValues() { @@ -94,6 +107,7 @@ export class SearchSliderComponent implements SearchWidget, OnInit { } private updateQuery(value: number | null) { + this.displayValue$.next( this.value ? `${this.value} ${this.settings.unit ?? ''}` : '' ); if (this.id && this.context && this.settings && this.settings.field) { if (value === null) { this.context.queryFragments[this.id] = ''; diff --git a/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.spec.ts b/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.spec.ts index 5fca98dd6d1..ad866f70035 100644 --- a/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.spec.ts +++ b/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.spec.ts @@ -16,7 +16,7 @@ */ import { SearchSortingPickerComponent } from './search-sorting-picker.component'; -import { SearchQueryBuilderService } from '../../search-query-builder.service'; +import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; import { AppConfigService } from '@alfresco/adf-core'; import { SearchConfiguration } from '../../models/search-configuration.interface'; import { TestBed } from '@angular/core/testing'; diff --git a/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts b/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts index 02fe1c0c3bf..b9d7dea390d 100644 --- a/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts +++ b/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts @@ -16,7 +16,7 @@ */ import { Component, OnInit, ViewEncapsulation, Inject } from '@angular/core'; -import { SearchQueryBuilderService } from '../../search-query-builder.service'; +import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; import { SearchSortingDefinition } from '../../models/search-sorting-definition.interface'; import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token'; diff --git a/lib/content-services/src/lib/search/components/search-text/search-text.component.html b/lib/content-services/src/lib/search/components/search-text/search-text.component.html index daec8a8aaa0..fedfd6393fd 100644 --- a/lib/content-services/src/lib/search/components/search-text/search-text.component.html +++ b/lib/content-services/src/lib/search/components/search-text/search-text.component.html @@ -4,7 +4,7 @@ placeholder="{{ settings?.placeholder | translate }}" [(ngModel)]="value" (change)="onChangedHandler($event)"> - diff --git a/lib/content-services/src/lib/search/components/search-text/search-text.component.ts b/lib/content-services/src/lib/search/components/search-text/search-text.component.ts index 88dbbe7850c..5547b8eb21a 100644 --- a/lib/content-services/src/lib/search/components/search-text/search-text.component.ts +++ b/lib/content-services/src/lib/search/components/search-text/search-text.component.ts @@ -15,10 +15,11 @@ * limitations under the License. */ -import { Component, ViewEncapsulation, OnInit, Input } from '@angular/core'; +import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; import { SearchWidget } from '../../models/search-widget.interface'; import { SearchWidgetSettings } from '../../models/search-widget-settings.interface'; -import { SearchQueryBuilderService } from '../../search-query-builder.service'; +import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; +import { Subject } from 'rxjs'; @Component({ selector: 'adf-search-text', @@ -39,6 +40,7 @@ export class SearchTextComponent implements SearchWidget, OnInit { startValue: string; isActive = false; enableChangeUpdate = true; + displayValue$: Subject = new Subject(); ngOnInit() { if (this.context && this.settings && this.settings.pattern) { @@ -59,9 +61,15 @@ export class SearchTextComponent implements SearchWidget, OnInit { } } - reset() { + clear() { this.isActive = false; + this.value = ''; + if (this.enableChangeUpdate) { + this.updateQuery(null); + } + } + reset() { this.value = ''; this.updateQuery(null); } @@ -75,11 +83,11 @@ export class SearchTextComponent implements SearchWidget, OnInit { } private updateQuery(value: string) { + this.displayValue$.next(value); if (this.context && this.settings && this.settings.field) { this.context.queryFragments[this.id] = value ? `${this.settings.field}:'${this.getSearchPrefix()}${value}${this.getSearchSuffix()}'` : ''; this.context.update(); } - } submitValues() { @@ -96,6 +104,7 @@ export class SearchTextComponent implements SearchWidget, OnInit { setValue(value: string) { this.value = value; + this.displayValue$.next(this.value); this.submitValues(); } diff --git a/lib/content-services/src/lib/search/components/search-widget-container/search-widget-container.component.ts b/lib/content-services/src/lib/search/components/search-widget-container/search-widget-container.component.ts index 2b545a17313..baac0c421e7 100644 --- a/lib/content-services/src/lib/search/components/search-widget-container/search-widget-container.component.ts +++ b/lib/content-services/src/lib/search/components/search-widget-container/search-widget-container.component.ts @@ -15,10 +15,23 @@ * limitations under the License. */ -import { Component, Input, ViewChild, ViewContainerRef, OnInit, OnDestroy, ComponentRef, ComponentFactoryResolver, Inject, SimpleChanges, OnChanges } from '@angular/core'; -import { SearchFilterService } from '../search-filter/search-filter.service'; -import { BaseQueryBuilderService } from '../../base-query-builder.service'; +import { + Component, + Input, + ViewChild, + ViewContainerRef, + OnInit, + OnDestroy, + ComponentRef, + ComponentFactoryResolver, + Inject, + SimpleChanges, + OnChanges +} from '@angular/core'; +import { SearchFilterService } from '../../services/search-filter.service'; +import { BaseQueryBuilderService } from '../../services/base-query-builder.service'; import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token'; +import { Observable } from 'rxjs'; @Component({ selector: 'adf-search-widget-container', @@ -74,7 +87,7 @@ export class SearchWidgetContainerComponent implements OnInit, OnDestroy, OnChan private setupWidget(ref: ComponentRef) { if (ref && ref.instance) { ref.instance.id = this.id; - ref.instance.settings = { ...this.settings }; + ref.instance.settings = {...this.settings}; ref.instance.context = this.queryBuilder; if (this.value) { ref.instance.isActive = true; @@ -107,6 +120,13 @@ export class SearchWidgetContainerComponent implements OnInit, OnDestroy, OnChan return this.componentRef.instance.getCurrentValue(); } + getDisplayValue(): Observable | null { + if (!this.componentRef?.instance) { + return null; + } + return this.componentRef.instance.displayValue$; + } + resetInnerWidget() { if (this.componentRef && this.componentRef.instance) { this.componentRef.instance.reset(); diff --git a/lib/content-services/src/lib/search/models/facet-field.interface.ts b/lib/content-services/src/lib/search/models/facet-field.interface.ts index 961634c07da..54e5606fdb1 100644 --- a/lib/content-services/src/lib/search/models/facet-field.interface.ts +++ b/lib/content-services/src/lib/search/models/facet-field.interface.ts @@ -31,5 +31,13 @@ export interface FacetField { currentPageSize?: number; checked?: boolean; type?: string; + settings?: FacetFieldSettings; [propName: string]: any; } + +export interface FacetFieldSettings { + /* allow the user to update search in every change */ + allowUpdateOnChange?: boolean; + /* allow the user show/hide default search actions */ + hideDefaultAction?: boolean; +} diff --git a/lib/content-services/src/lib/search/models/facet-widget.interface.ts b/lib/content-services/src/lib/search/models/facet-widget.interface.ts new file mode 100644 index 00000000000..8df0676c2c7 --- /dev/null +++ b/lib/content-services/src/lib/search/models/facet-widget.interface.ts @@ -0,0 +1,27 @@ +/*! + * @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 { Subject } from 'rxjs'; + +export interface FacetWidget { + /* provide the formatted selected value for chip */ + displayValue$: Subject; + /* reset the value and update the search */ + reset(): void; + /* update the search with field value */ + submitValues(): void; +} diff --git a/lib/content-services/src/lib/search/models/search-configuration.interface.ts b/lib/content-services/src/lib/search/models/search-configuration.interface.ts index f4ca9fec196..e6ebd764e6e 100644 --- a/lib/content-services/src/lib/search/models/search-configuration.interface.ts +++ b/lib/content-services/src/lib/search/models/search-configuration.interface.ts @@ -17,7 +17,7 @@ import { FilterQuery } from './filter-query.interface'; import { FacetQuery } from './facet-query.interface'; -import { FacetField } from './facet-field.interface'; +import { FacetField, FacetFieldSettings } from './facet-field.interface'; import { SearchCategory } from './search-category.interface'; import { SearchSortingDefinition } from './search-sorting-definition.interface'; import { RequestHighlight } from '@alfresco/js-api'; @@ -35,6 +35,7 @@ export interface SearchConfiguration { expanded?: boolean; mincount?: number; queries: FacetQuery[]; + settings?: FacetFieldSettings; }; facetFields?: { expanded?: boolean; diff --git a/lib/content-services/src/lib/search/models/search-widget-settings.interface.ts b/lib/content-services/src/lib/search/models/search-widget-settings.interface.ts index 0f2ef31cca5..d1b4c9d1793 100644 --- a/lib/content-services/src/lib/search/models/search-widget-settings.interface.ts +++ b/lib/content-services/src/lib/search/models/search-widget-settings.interface.ts @@ -17,5 +17,14 @@ export interface SearchWidgetSettings { field: string; + /* allow the user to update search in every change */ + allowUpdateOnChange?: boolean; + /* allow the user hide default search actions. So widget can have custom actions */ + hideDefaultAction?: boolean; + /* describes the unit of the value i.e byte for better display message */ + unit?: string; + /* describes query format */ + format?: string; + [indexer: string]: any; } diff --git a/lib/content-services/src/lib/search/models/search-widget.interface.ts b/lib/content-services/src/lib/search/models/search-widget.interface.ts index f4666ef416e..55dcca7b6b1 100644 --- a/lib/content-services/src/lib/search/models/search-widget.interface.ts +++ b/lib/content-services/src/lib/search/models/search-widget.interface.ts @@ -16,17 +16,23 @@ */ import { SearchWidgetSettings } from './search-widget-settings.interface'; -import { SearchQueryBuilderService } from '../search-query-builder.service'; +import { SearchQueryBuilderService } from '../services/search-query-builder.service'; +import { Subject } from 'rxjs'; export interface SearchWidget { id: string; + /* optional field control options */ settings?: SearchWidgetSettings; context?: SearchQueryBuilderService; isActive?: boolean; startValue: any; - reset(); - submitValues(); - hasValidValue(); - getCurrentValue(); + /* stream emit value on changes */ + displayValue$: Subject; + /* reset the value and update the search */ + reset(): void; + /* update the search with field value */ + submitValues(): void; + hasValidValue(): boolean; + getCurrentValue(): any; setValue(value: any); } diff --git a/lib/content-services/src/lib/search/public-api.ts b/lib/content-services/src/lib/search/public-api.ts index e013d31306d..3867657cb32 100644 --- a/lib/content-services/src/lib/search/public-api.ts +++ b/lib/content-services/src/lib/search/public-api.ts @@ -24,12 +24,12 @@ export * from './models/search-category.interface'; export * from './models/search-widget-settings.interface'; export * from './models/search-widget.interface'; export * from './models/search-configuration.interface'; -export * from './search-query-builder.service'; +export * from './services/search-query-builder.service'; export * from './models/search-range.interface'; export * from './models/search-form.interface'; export * from './search-query-service.token'; -export * from './search-header-query-builder.service'; +export * from './services/search-header-query-builder.service'; export * from './components/search.component'; export * from './components/search-control.component'; @@ -41,7 +41,7 @@ export * from './components/search-check-list/search-check-list.component'; export * from './components/search-chip-list/search-chip-list.component'; export * from './components/search-date-range/search-date-range.component'; export * from './components/search-filter/search-filter.component'; -export * from './components/search-filter/search-filter.service'; +export * from './services/search-filter.service'; export * from './components/search-filter-container/search-filter-container.component'; export * from './components/search-number-range/search-number-range.component'; export * from './components/search-radio/search-radio.component'; @@ -52,5 +52,10 @@ export * from './components/search-text/search-text.component'; export * from './components/search-widget-container/search-widget-container.component'; export * from './components/search-datetime-range/search-datetime-range.component'; export * from './components/search-form/search-form.component'; +export * from './services/search-facet-filters.service'; +export * from './components/search-filter-chips/search-filter-chips.component'; +export * from './components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component'; +export * from './components/search-facet-field/search-facet-field.component'; +export * from './components/reset-search.directive'; export * from './search.module'; diff --git a/lib/content-services/src/lib/search/search-query-service.token.ts b/lib/content-services/src/lib/search/search-query-service.token.ts index 13a2584d819..eb5c35998ea 100644 --- a/lib/content-services/src/lib/search/search-query-service.token.ts +++ b/lib/content-services/src/lib/search/search-query-service.token.ts @@ -16,6 +16,6 @@ */ import { InjectionToken } from '@angular/core'; -import { BaseQueryBuilderService } from './base-query-builder.service'; +import { BaseQueryBuilderService } from './services/base-query-builder.service'; export const SEARCH_QUERY_SERVICE_TOKEN = new InjectionToken('QueryService'); diff --git a/lib/content-services/src/lib/search/search.module.ts b/lib/content-services/src/lib/search/search.module.ts index 9e6add039a5..d9dcfedb4a9 100644 --- a/lib/content-services/src/lib/search/search.module.ts +++ b/lib/content-services/src/lib/search/search.module.ts @@ -37,10 +37,16 @@ import { SearchCheckListComponent } from './components/search-check-list/search- import { SearchDateRangeComponent } from './components/search-date-range/search-date-range.component'; import { SearchSortingPickerComponent } from './components/search-sorting-picker/search-sorting-picker.component'; import { SEARCH_QUERY_SERVICE_TOKEN } from './search-query-service.token'; -import { SearchQueryBuilderService } from './search-query-builder.service'; +import { SearchQueryBuilderService } from './services/search-query-builder.service'; import { SearchFilterContainerComponent } from './components/search-filter-container/search-filter-container.component'; import { SearchDatetimeRangeComponent } from './components/search-datetime-range/search-datetime-range.component'; import { SearchFormComponent } from './components/search-form/search-form.component'; +import { SearchFilterChipsComponent } from './components/search-filter-chips/search-filter-chips.component'; +import { SearchFilterMenuCardComponent } from './components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component'; +import { SearchFacetFieldComponent } from './components/search-facet-field/search-facet-field.component'; +import { SearchWidgetChipComponent } from './components/search-filter-chips/search-widget-chip/search-widget-chip.component'; +import { SearchFacetChipComponent } from './components/search-filter-chips/search-facet-chip/search-facet-chip.component'; +import { ResetSearchDirective } from './components/reset-search.directive'; @NgModule({ imports: [ @@ -67,7 +73,13 @@ import { SearchFormComponent } from './components/search-form/search-form.compon SearchDatetimeRangeComponent, SearchSortingPickerComponent, SearchFilterContainerComponent, - SearchFormComponent + SearchFormComponent, + SearchFilterChipsComponent, + SearchFilterMenuCardComponent, + SearchFacetFieldComponent, + SearchWidgetChipComponent, + SearchFacetChipComponent, + ResetSearchDirective ], exports: [ SearchComponent, @@ -86,11 +98,14 @@ import { SearchFormComponent } from './components/search-form/search-form.compon SearchDatetimeRangeComponent, SearchSortingPickerComponent, SearchFilterContainerComponent, - SearchFormComponent + SearchFormComponent, + SearchFilterChipsComponent, + SearchFilterMenuCardComponent, + SearchFacetFieldComponent, + ResetSearchDirective ], providers: [ - { provide: SEARCH_QUERY_SERVICE_TOKEN, useExisting: SearchQueryBuilderService }, - SearchSortingPickerComponent + { provide: SEARCH_QUERY_SERVICE_TOKEN, useExisting: SearchQueryBuilderService } ] }) export class SearchModule {} diff --git a/lib/content-services/src/lib/search/base-query-builder.service.ts b/lib/content-services/src/lib/search/services/base-query-builder.service.ts similarity index 92% rename from lib/content-services/src/lib/search/base-query-builder.service.ts rename to lib/content-services/src/lib/search/services/base-query-builder.service.ts index c886bb80645..a93b2a18c37 100644 --- a/lib/content-services/src/lib/search/base-query-builder.service.ts +++ b/lib/content-services/src/lib/search/services/base-query-builder.service.ts @@ -16,7 +16,7 @@ */ import { Injectable } from '@angular/core'; -import { Subject, Observable, from } from 'rxjs'; +import { Subject, Observable, from, ReplaySubject } from 'rxjs'; import { AlfrescoApiService, AppConfigService } from '@alfresco/adf-core'; import { QueryBody, @@ -27,15 +27,15 @@ import { RequestHighlight, RequestScope } from '@alfresco/js-api'; -import { SearchCategory } from './models/search-category.interface'; -import { FilterQuery } from './models/filter-query.interface'; -import { SearchRange } from './models/search-range.interface'; -import { SearchConfiguration } from './models/search-configuration.interface'; -import { FacetQuery } from './models/facet-query.interface'; -import { SearchSortingDefinition } from './models/search-sorting-definition.interface'; -import { FacetField } from './models/facet-field.interface'; -import { FacetFieldBucket } from './models/facet-field-bucket.interface'; -import { SearchForm } from './models/search-form.interface'; +import { SearchCategory } from '../models/search-category.interface'; +import { FilterQuery } from '../models/filter-query.interface'; +import { SearchRange } from '../models/search-range.interface'; +import { SearchConfiguration } from '../models/search-configuration.interface'; +import { FacetQuery } from '../models/facet-query.interface'; +import { SearchSortingDefinition } from '../models/search-sorting-definition.interface'; +import { FacetField } from '../models/facet-field.interface'; +import { FacetFieldBucket } from '../models/facet-field-bucket.interface'; +import { SearchForm } from '../models/search-form.interface'; @Injectable({ providedIn: 'root' @@ -54,6 +54,9 @@ export abstract class BaseQueryBuilderService { /* Stream that emits the error whenever user search */ error = new Subject(); + /* Stream that emits search forms */ + searchForms = new ReplaySubject(1); + categories: SearchCategory[] = []; queryFragments: { [id: string]: string } = {}; filterQueries: FilterQuery[] = []; @@ -92,14 +95,16 @@ export abstract class BaseQueryBuilderService { public resetToDefaults() { const currentConfig = this.getDefaultConfiguration(); + this.resetSearchOptions(); this.configUpdated.next(currentConfig); + this.searchForms.next(this.getSearchFormDetails()); this.setUpSearchConfiguration(currentConfig); } public getDefaultConfiguration(): SearchConfiguration | undefined { const configurations = this.loadConfiguration(); - if (this.selectedConfiguration >= 0) { + if (this.selectedConfiguration !== undefined) { return configurations[this.selectedConfiguration]; } @@ -112,8 +117,9 @@ export abstract class BaseQueryBuilderService { public updateSelectedConfiguration(index: number): void { const currentConfig = this.loadConfiguration(); if (Array.isArray(currentConfig) && currentConfig[index] !== undefined) { - this.configUpdated.next(currentConfig[index]); this.selectedConfiguration = index; + this.configUpdated.next(currentConfig[index]); + this.searchForms.next(this.getSearchFormDetails()); this.resetSearchOptions(); this.setUpSearchConfiguration(currentConfig[index]); this.update(); @@ -126,18 +132,21 @@ export abstract class BaseQueryBuilderService { this.filterQueries = []; this.sorting = []; this.sortingOptions = []; + this.userFacetBuckets = {}; this.scope = null; } - public getSearchConfigurationDetails(): SearchForm[] { + public getSearchFormDetails(): SearchForm[] { const configurations = this.loadConfiguration(); if (Array.isArray(configurations)) { return configurations.map((configuration, index) => ({ index, - name: configuration.name || 'SEARCH.UNKNOWN_FORM', + name: configuration.name || 'SEARCH.UNKNOWN_CONFIGURATION', default: configuration.default || false, selected: this.selectedConfiguration !== undefined ? index === this.selectedConfiguration : configuration.default })); + } else if (!!configurations) { + return [{ index: 0, name: configurations.name || 'SEARCH.UNKNOWN_CONFIGURATION', default: true, selected: true }]; } return []; } diff --git a/lib/content-services/src/lib/search/services/search-facet-filters.service.spec.ts b/lib/content-services/src/lib/search/services/search-facet-filters.service.spec.ts new file mode 100644 index 00000000000..4a772522f3f --- /dev/null +++ b/lib/content-services/src/lib/search/services/search-facet-filters.service.spec.ts @@ -0,0 +1,419 @@ +/*! + * @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 { TestBed } from '@angular/core/testing'; + +import { SearchFacetFiltersService } from './search-facet-filters.service'; +import { ContentTestingModule } from '../../testing/content.testing.module'; +import { SearchQueryBuilderService } from './search-query-builder.service'; + +describe('SearchFacetFiltersService', () => { + let searchFacetFiltersService: SearchFacetFiltersService; + let queryBuilder: SearchQueryBuilderService; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ContentTestingModule] + }); + searchFacetFiltersService = TestBed.inject(SearchFacetFiltersService); + queryBuilder = TestBed.inject(SearchQueryBuilderService); + }); + + it('should subscribe to query builder executed event', () => { + spyOn(searchFacetFiltersService, 'onDataLoaded').and.stub(); + const data = { list: {} }; + queryBuilder.executed.next(data); + + expect(searchFacetFiltersService.onDataLoaded).toHaveBeenCalledWith(data); + }); + + it('should fetch facet queries from response payload', () => { + searchFacetFiltersService.responseFacets = null; + + queryBuilder.config = { + categories: [], + facetQueries: { + label: 'label1', + queries: [ + { label: 'q1', query: 'query1' }, + { label: 'q2', query: 'query2' } + ] + } + }; + + const queries = [ + { label: 'q1', filterQuery: 'query1', metrics: [{value: {count: 1}}] }, + { label: 'q2', filterQuery: 'query2', metrics: [{value: {count: 1}}] } + ]; + const data = { + list: { + context: { + facets: [{ + type: 'query', + label: 'label1', + buckets: queries + }] + } + } + }; + + searchFacetFiltersService.onDataLoaded(data); + + expect(searchFacetFiltersService.responseFacets.length).toBe(1); + expect(searchFacetFiltersService.responseFacets[0].buckets.length).toEqual(2); + }); + + it('should preserve order after response processing', () => { + searchFacetFiltersService.responseFacets = null; + + queryBuilder.config = { + categories: [], + facetQueries: { + label: 'label1', + queries: [ + { label: 'q1', query: 'query1' }, + { label: 'q2', query: 'query2' }, + { label: 'q3', query: 'query3' } + ] + } + }; + + const queries = [ + { label: 'q2', filterQuery: 'query2', metrics: [{value: {count: 1}}] }, + { label: 'q1', filterQuery: 'query1', metrics: [{value: {count: 1}}] }, + { label: 'q3', filterQuery: 'query3', metrics: [{value: {count: 1}}] } + + ]; + const data = { + list: { + context: { + facets: [{ + type: 'query', + label: 'label1', + buckets: queries + }] + } + } + }; + + searchFacetFiltersService.onDataLoaded(data); + + expect(searchFacetFiltersService.responseFacets.length).toBe(1); + expect(searchFacetFiltersService.responseFacets[0].buckets.length).toBe(3); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[0].label).toBe('q1'); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[1].label).toBe('q2'); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[2].label).toBe('q3'); + }); + + it('should not fetch facet queries from response payload', () => { + searchFacetFiltersService.responseFacets = null; + + queryBuilder.config = { + categories: [], + facetQueries: { + queries: [] + } + }; + + const data = { + list: { + context: { + facets: null + } + } + }; + + searchFacetFiltersService.onDataLoaded(data); + + expect(searchFacetFiltersService.responseFacets).toBeNull(); + }); + + it('should fetch facet fields from response payload', () => { + searchFacetFiltersService.responseFacets = null; + + queryBuilder.config = { + categories: [], + facetFields: { fields: [ + { label: 'f1', field: 'f1', mincount: 0 }, + { label: 'f2', field: 'f2', mincount: 0 } + ]}, + facetQueries: { + queries: [] + } + }; + + const fields: any = [ + { type: 'field', label: 'f1', buckets: [{ label: 'a1' }, { label: 'a2' }] }, + { type: 'field', label: 'f2', buckets: [{ label: 'b1' }, { label: 'b2' }] } + ]; + const data = { + list: { + context: { + facets: fields + } + } + }; + + searchFacetFiltersService.onDataLoaded(data); + + expect(searchFacetFiltersService.responseFacets.length).toEqual(2); + expect(searchFacetFiltersService.responseFacets[0].buckets.length).toEqual(2); + expect(searchFacetFiltersService.responseFacets[1].buckets.length).toEqual(2); + }); + + it('should filter response facet fields based on search filter config method', () => { + queryBuilder.config = { + categories: [], + facetFields: { fields: [ + { label: 'f1', field: 'f1' } + ]}, + facetQueries: { + queries: [] + }, + filterWithContains: false + }; + + const initialFields: any = [ + { type: 'field', label: 'f1', buckets: [ + { label: 'firstLabel', display: 'firstLabel', metrics: [{value: {count: 5}}] }, + { label: 'secondLabel', display: 'secondLabel', metrics: [{value: {count: 5}}] }, + { label: 'thirdLabel', display: 'thirdLabel', metrics: [{value: {count: 5}}] } + ] + } + ]; + + const data = { + list: { + context: { + facets: initialFields + } + } + }; + + searchFacetFiltersService.onDataLoaded(data); + expect(searchFacetFiltersService.responseFacets.length).toBe(1); + expect(searchFacetFiltersService.responseFacets[0].buckets.visibleItems.length).toBe(3); + + searchFacetFiltersService.responseFacets[0].buckets.filterText = 'f'; + expect(searchFacetFiltersService.responseFacets[0].buckets.visibleItems.length).toBe(1); + expect(searchFacetFiltersService.responseFacets[0].buckets.visibleItems[0].label).toEqual('firstLabel'); + + searchFacetFiltersService.responseFacets[0].buckets.filterText = 'label'; + expect(searchFacetFiltersService.responseFacets[0].buckets.visibleItems.length).toBe(0); + + // Set filter method to use contains and test again + queryBuilder.config.filterWithContains = true; + searchFacetFiltersService.responseFacets[0].buckets.filterText = 'f'; + expect(searchFacetFiltersService.responseFacets[0].buckets.visibleItems.length).toBe(1); + searchFacetFiltersService.responseFacets[0].buckets.filterText = 'label'; + expect(searchFacetFiltersService.responseFacets[0].buckets.visibleItems.length).toBe(3); + }); + + it('should fetch facet fields from response payload and show the bucket values', () => { + searchFacetFiltersService.responseFacets = null; + + queryBuilder.config = { + categories: [], + facetFields: { fields: [ + { label: 'f1', field: 'f1' }, + { label: 'f2', field: 'f2' } + ]}, + facetQueries: { + queries: [] + } + }; + + const serverResponseFields: any = [ + { + type: 'field', + label: 'f1', + buckets: [ + { label: 'b1', metrics: [{value: {count: 10}}] }, + { label: 'b2', metrics: [{value: {count: 1}}] } + ] + }, + { type: 'field', label: 'f2', buckets: [] } + ]; + const data = { + list: { + context: { + facets: serverResponseFields + } + } + }; + + searchFacetFiltersService.onDataLoaded(data); + expect(searchFacetFiltersService.responseFacets.length).toEqual(1); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[0].count).toEqual(10); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[1].count).toEqual(1); + }); + + it('should fetch facet fields from response payload and update the existing bucket values', () => { + queryBuilder.config = { + categories: [], + facetFields: { fields: [ + { label: 'f1', field: 'f1' }, + { label: 'f2', field: 'f2' } + ]}, + facetQueries: { + queries: [] + } + }; + + const initialFields: any = [ + { type: 'field', label: 'f1', buckets: { items: [{ label: 'b1', count: 10, filterQuery: 'filter' }, { label: 'b2', count: 1 }]} }, + { type: 'field', label: 'f2', buckets: [] } + ]; + searchFacetFiltersService.responseFacets = initialFields; + expect(searchFacetFiltersService.responseFacets[0].buckets.items[0].count).toEqual(10); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[1].count).toEqual(1); + + const serverResponseFields: any = [ + { type: 'field', label: 'f1', buckets: + [{ label: 'b1', metrics: [{value: {count: 6}}], filterQuery: 'filter' }, + { label: 'b2', metrics: [{value: {count: 0}}] }] }, + { type: 'field', label: 'f2', buckets: [] } + ]; + const data = { + list: { + context: { + facets: serverResponseFields + } + } + }; + + searchFacetFiltersService.onDataLoaded(data); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[0].count).toEqual(6); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[1].count).toEqual(0); + }); + + it('should update correctly the existing facetFields bucket values', () => { + searchFacetFiltersService.responseFacets = null; + + queryBuilder.config = { + categories: [], + facetFields: { fields: [{ label: 'f1', field: 'f1' }] }, + facetQueries: { queries: [] } + }; + + const firstCallFields: any = [{ + type: 'field', + label: 'f1', + buckets: [{ label: 'b1', metrics: [{value: {count: 10}}] }] + }]; + const firstCallData = { list: { context: { facets: firstCallFields }}}; + searchFacetFiltersService.onDataLoaded(firstCallData); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[0].count).toEqual(10); + + const secondCallFields: any = [{ + type: 'field', + label: 'f1', + buckets: [{ label: 'b1', metrics: [{value: {count: 6}}] }] + }]; + const secondCallData = { list: { context: { facets: secondCallFields}}}; + searchFacetFiltersService.onDataLoaded(secondCallData); + expect(searchFacetFiltersService.responseFacets[0].buckets.items[0].count).toEqual(6); + }); + + it('should fetch facet intervals from response payload', () => { + searchFacetFiltersService.responseFacets = null; + queryBuilder.config = { + categories: [], + facetIntervals: { + intervals: [ + { label: 'test_intervals1', field: 'f1', sets: [ + { label: 'interval1', start: 's1', end: 'e1'}, + { label: 'interval2', start: 's2', end: 'e2'} + ]}, + { label: 'test_intervals2', field: 'f2', sets: [ + { label: 'interval3', start: 's3', end: 'e3'}, + { label: 'interval4', start: 's4', end: 'e4'} + ]} + ] + } + }; + + const response1 = [ + { label: 'interval1', filterQuery: 'query1', metrics: [{ value: { count: 1 }}]}, + { label: 'interval2', filterQuery: 'query2', metrics: [{ value: { count: 2 }}]} + ]; + const response2 = [ + { label: 'interval3', filterQuery: 'query3', metrics: [{ value: { count: 3 }}]}, + { label: 'interval4', filterQuery: 'query4', metrics: [{ value: { count: 4 }}]} + ]; + const data = { + list: { + context: { + facets: [ + { type: 'interval', label: 'test_intervals1', buckets: response1 }, + { type: 'interval', label: 'test_intervals2', buckets: response2 } + ] + } + } + }; + + searchFacetFiltersService.onDataLoaded(data); + + expect(searchFacetFiltersService.responseFacets.length).toBe(2); + expect(searchFacetFiltersService.responseFacets[0].buckets.length).toEqual(2); + expect(searchFacetFiltersService.responseFacets[1].buckets.length).toEqual(2); + }); + + it('should filter out the fetched facet intervals that have bucket values less than their set mincount', () => { + searchFacetFiltersService.responseFacets = null; + queryBuilder.config = { + categories: [], + facetIntervals: { + intervals: [ + { label: 'test_intervals1', field: 'f1', mincount: 2, sets: [ + { label: 'interval1', start: 's1', end: 'e1'}, + { label: 'interval2', start: 's2', end: 'e2'} + ]}, + { label: 'test_intervals2', field: 'f2', mincount: 5, sets: [ + { label: 'interval3', start: 's3', end: 'e3'}, + { label: 'interval4', start: 's4', end: 'e4'} + ]} + ] + } + }; + + const response1 = [ + { label: 'interval1', filterQuery: 'query1', metrics: [{ value: { count: 1 }}]}, + { label: 'interval2', filterQuery: 'query2', metrics: [{ value: { count: 2 }}]} + ]; + const response2 = [ + { label: 'interval3', filterQuery: 'query3', metrics: [{ value: { count: 3 }}]}, + { label: 'interval4', filterQuery: 'query4', metrics: [{ value: { count: 4 }}]} + ]; + const data = { + list: { + context: { + facets: [ + { type: 'interval', label: 'test_intervals1', buckets: response1 }, + { type: 'interval', label: 'test_intervals2', buckets: response2 } + ] + } + } + }; + + searchFacetFiltersService.onDataLoaded(data); + + expect(searchFacetFiltersService.responseFacets.length).toBe(1); + expect(searchFacetFiltersService.responseFacets[0].buckets.length).toEqual(1); + }); + +}); diff --git a/lib/content-services/src/lib/search/services/search-facet-filters.service.ts b/lib/content-services/src/lib/search/services/search-facet-filters.service.ts new file mode 100644 index 00000000000..c5fa5612599 --- /dev/null +++ b/lib/content-services/src/lib/search/services/search-facet-filters.service.ts @@ -0,0 +1,370 @@ +/*! + * @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 { Inject, Injectable, OnDestroy } from '@angular/core'; +import { FacetField } from '../models/facet-field.interface'; +import { Subject } from 'rxjs'; +import { SEARCH_QUERY_SERVICE_TOKEN } from '../search-query-service.token'; +import { SearchQueryBuilderService } from './search-query-builder.service'; +import { SearchService, TranslationService } from '@alfresco/adf-core'; +import { takeUntil } from 'rxjs/operators'; +import { GenericBucket, GenericFacetResponse, ResultSetContext, ResultSetPaging } from '@alfresco/js-api'; +import { SearchFilterList } from '../models/search-filter-list.model'; +import { FacetFieldBucket } from '../models/facet-field-bucket.interface'; + +export interface SelectedBucket { + field: FacetField; + bucket: FacetFieldBucket; +} + +@Injectable({ + providedIn: 'root' +}) +export class SearchFacetFiltersService implements OnDestroy { + + /** All facet field items to be displayed in the component. These are updated according to the response. + * When a new search is performed, the already existing items are updated with the new bucket count values and + * the newly received items are added to the responseFacets. + */ + responseFacets: FacetField[] = null; + + /** shows the facet chips */ + selectedBuckets: SelectedBucket[] = []; + + private DEFAULT_PAGE_SIZE = 5; + private readonly facetQueriesPageSize = this.DEFAULT_PAGE_SIZE; + private readonly onDestroy$ = new Subject(); + + constructor(@Inject(SEARCH_QUERY_SERVICE_TOKEN) public queryBuilder: SearchQueryBuilderService, + private searchService: SearchService, + private translationService: TranslationService) { + if (queryBuilder.config && queryBuilder.config.facetQueries) { + this.facetQueriesPageSize = queryBuilder.config.facetQueries.pageSize || this.DEFAULT_PAGE_SIZE; + } + + this.queryBuilder.configUpdated + .pipe(takeUntil(this.onDestroy$)) + .subscribe(() => { + this.selectedBuckets = []; + this.responseFacets = null; + }); + + this.queryBuilder.updated + .pipe(takeUntil(this.onDestroy$)) + .subscribe((query) => this.queryBuilder.execute(query)); + + this.queryBuilder.executed + .pipe(takeUntil(this.onDestroy$)) + .subscribe((resultSetPaging: ResultSetPaging) => { + this.onDataLoaded(resultSetPaging); + this.searchService.dataLoaded.next(resultSetPaging); + }); + } + + onDataLoaded(data: any) { + const context = data.list.context; + + if (context) { + this.parseFacets(context); + } else { + this.responseFacets = null; + } + } + + private parseFacets(context: ResultSetContext) { + this.parseFacetFields(context); + this.parseFacetIntervals(context); + this.parseFacetQueries(context); + } + + private parseFacetItems(context: ResultSetContext, configFacetFields: FacetField[], itemType: string) { + configFacetFields.forEach((field) => { + const responseField = this.findFacet(context, itemType, field.label); + const responseBuckets = this.getResponseBuckets(responseField, field) + .filter(this.getFilterByMinCount(field.mincount)); + const alreadyExistingField = this.findResponseFacet(itemType, field.label); + + if (alreadyExistingField) { + const alreadyExistingBuckets = alreadyExistingField.buckets && alreadyExistingField.buckets.items || []; + + this.updateExistingBuckets(responseField, responseBuckets, alreadyExistingField, alreadyExistingBuckets); + } else if (responseField) { + if (responseBuckets.length > 0) { + const bucketList = new SearchFilterList(responseBuckets, field.pageSize); + bucketList.filter = this.getBucketFilterFunction(bucketList); + + if (!this.responseFacets) { + this.responseFacets = []; + } + this.responseFacets.push( { + ...field, + type: responseField.type || itemType, + label: field.label, + pageSize: field.pageSize | this.DEFAULT_PAGE_SIZE, + currentPageSize: field.pageSize | this.DEFAULT_PAGE_SIZE, + buckets: bucketList + }); + } + } + }); + } + + private parseFacetFields(context: ResultSetContext) { + const configFacetFields = this.queryBuilder.config.facetFields && this.queryBuilder.config.facetFields.fields || []; + this.parseFacetItems(context, configFacetFields, 'field'); + } + + private parseFacetIntervals(context: ResultSetContext) { + const configFacetIntervals = this.queryBuilder.config.facetIntervals && this.queryBuilder.config.facetIntervals.intervals || []; + this.parseFacetItems(context, configFacetIntervals, 'interval'); + } + + private parseFacetQueries(context: ResultSetContext) { + const facetQuerySetting = this.queryBuilder.config.facetQueries?.settings || {}; + const configFacetQueries = this.queryBuilder.config.facetQueries && this.queryBuilder.config.facetQueries.queries || []; + const configGroups = configFacetQueries.reduce((acc, query) => { + const group = this.queryBuilder.getQueryGroup(query); + if (acc[group]) { + acc[group].push(query); + } else { + acc[group] = [query]; + } + return acc; + }, []); + + const mincount = this.queryBuilder.config.facetQueries && this.queryBuilder.config.facetQueries.mincount; + const mincountFilter = this.getFilterByMinCount(mincount); + + Object.keys(configGroups).forEach((group) => { + const responseField = this.findFacet(context, 'query', group); + const responseBuckets = this.getResponseQueryBuckets(responseField, configGroups[group]) + .filter(mincountFilter); + const alreadyExistingField = this.findResponseFacet('query', group); + + if (alreadyExistingField) { + const alreadyExistingBuckets = alreadyExistingField.buckets && alreadyExistingField.buckets.items || []; + + this.updateExistingBuckets(responseField, responseBuckets, alreadyExistingField, alreadyExistingBuckets); + } else if (responseField) { + if (responseBuckets.length > 0) { + const bucketList = new SearchFilterList(responseBuckets, this.facetQueriesPageSize); + bucketList.filter = this.getBucketFilterFunction(bucketList); + + if (!this.responseFacets) { + this.responseFacets = []; + } + this.responseFacets.push( { + field: group, + type: responseField.type || 'query', + label: group, + pageSize: this.DEFAULT_PAGE_SIZE, + currentPageSize: this.DEFAULT_PAGE_SIZE, + buckets: bucketList, + settings: facetQuerySetting + }); + } + } + }); + + } + + private getResponseBuckets(responseField: GenericFacetResponse, configField: FacetField): FacetFieldBucket[] { + return ((responseField && responseField.buckets) || []).map((respBucket) => { + + respBucket['count'] = this.getCountValue(respBucket); + respBucket.filterQuery = respBucket.filterQuery || this.getCorrespondingFilterQuery(configField, respBucket.label); + return { + ...respBucket, + checked: false, + display: respBucket.display, + label: respBucket.label + }; + }); + } + + private getResponseQueryBuckets(responseField: GenericFacetResponse, configGroup: any): FacetFieldBucket[] { + return (configGroup || []).map((query) => { + const respBucket = ((responseField && responseField.buckets) || []) + .find((bucket) => bucket.label === query.label) || {}; + + respBucket['count'] = this.getCountValue(respBucket); + return { + ...respBucket, + checked: false, + display: respBucket.display, + label: respBucket.label + }; + }); + } + + private getCountValue(bucket: GenericBucket): number { + return (!!bucket && !!bucket.metrics && bucket.metrics[0]?.value?.count) || 0; + } + + getBucketCountDisplay(bucket: FacetFieldBucket): string { + return bucket.count === null ? '' : `(${bucket.count})`; + } + + private getFilterByMinCount(mincountInput: number) { + return (bucket) => { + let mincount = mincountInput; + if (mincount === undefined) { + mincount = 1; + } + return bucket.count >= mincount; + }; + } + + private getCorrespondingFilterQuery(configFacetItem: FacetField, bucketLabel: string): string { + let filterQuery = null; + + if (configFacetItem.field && bucketLabel) { + + if (configFacetItem.sets) { + const configSet = configFacetItem.sets.find((set) => bucketLabel === set.label); + + if (configSet) { + filterQuery = this.buildIntervalQuery(configFacetItem.field, configSet); + } + + } else { + filterQuery = `${configFacetItem.field}:"${bucketLabel}"`; + } + } + + return filterQuery; + } + + private buildIntervalQuery(fieldName: string, interval: any): string { + const start = interval.start; + const end = interval.end; + const startLimit = (interval.startInclusive === undefined || interval.startInclusive === true) ? '[' : '<'; + const endLimit = (interval.endInclusive === undefined || interval.endInclusive === true) ? ']' : '>'; + + return `${fieldName}:${startLimit}"${start}" TO "${end}"${endLimit}`; + } + + private findFacet(context: ResultSetContext, itemType: string, fieldLabel: string): GenericFacetResponse { + return (context.facets || []).find((response) => response.type === itemType && response.label === fieldLabel) || {}; + } + + private findResponseFacet(itemType: string, fieldLabel: string): FacetField { + return (this.responseFacets || []).find((response) => response.type === itemType && response.label === fieldLabel); + } + + private updateExistingBuckets(responseField, responseBuckets, alreadyExistingField, alreadyExistingBuckets) { + const bucketsToDelete = []; + + alreadyExistingBuckets + .map((bucket) => { + const responseBucket = ((responseField && responseField.buckets) || []).find((respBucket) => respBucket.label === bucket.label); + + if (!responseBucket) { + bucketsToDelete.push(bucket); + } + bucket.count = this.getCountValue(responseBucket); + return bucket; + }); + + const hasSelection = this.selectedBuckets + .find((selBuckets) => alreadyExistingField.label === selBuckets.field.label && alreadyExistingField.type === selBuckets.field.type); + + if (!hasSelection && bucketsToDelete.length) { + bucketsToDelete.forEach((bucket) => { + alreadyExistingField.buckets.deleteItem(bucket); + }); + } + + responseBuckets.forEach((respBucket) => { + const existingBucket = alreadyExistingBuckets.find((oldBucket) => oldBucket.label === respBucket.label); + + if (!existingBucket) { + alreadyExistingField.buckets.addItem(respBucket); + } + }); + } + + private getBucketFilterFunction(bucketList) { + return (bucket: FacetFieldBucket): boolean => { + if (bucket && bucketList.filterText) { + const pattern = (bucketList.filterText || '').toLowerCase(); + const label = (this.translationService.instant(bucket.display) || this.translationService.instant(bucket.label)).toLowerCase(); + return this.queryBuilder.config.filterWithContains ? label.indexOf(pattern) !== -1 : label.startsWith(pattern); + } + return true; + }; + } + + unselectFacetBucket(field: FacetField, bucket: FacetFieldBucket) { + if (bucket) { + bucket.checked = false; + this.queryBuilder.removeUserFacetBucket(field, bucket); + this.updateSelectedBuckets(); + this.queryBuilder.update(); + } + } + + /* update adf-search-chip-list component view */ + updateSelectedBuckets() { + if (this.responseFacets) { + this.selectedBuckets = []; + for (const field of this.responseFacets) { + if (field.buckets) { + this.selectedBuckets.push( + ...this.queryBuilder.getUserFacetBuckets(field.field) + .filter((bucket) => bucket.checked) + .map((bucket) => { + return {field, bucket}; + }) + ); + } + } + } else { + this.selectedBuckets = []; + } + } + + ngOnDestroy(): void { + this.onDestroy$.next(); + this.onDestroy$.complete(); + } + + resetAllSelectedBuckets() { + this.responseFacets.forEach((field) => { + if (field && field.buckets) { + for (const bucket of field.buckets.items) { + bucket.checked = false; + this.queryBuilder.removeUserFacetBucket(field, bucket); + } + this.updateSelectedBuckets(); + } + }); + this.queryBuilder.update(); + } + + resetQueryFragments() { + this.queryBuilder.queryFragments = {}; + this.queryBuilder.resetToDefaults(); + } + + reset() { + this.responseFacets = []; + this.selectedBuckets = []; + this.queryBuilder.resetToDefaults(); + this.queryBuilder.update(); + } +} diff --git a/lib/content-services/src/lib/search/components/search-filter/search-filter.service.ts b/lib/content-services/src/lib/search/services/search-filter.service.ts similarity index 63% rename from lib/content-services/src/lib/search/components/search-filter/search-filter.service.ts rename to lib/content-services/src/lib/search/services/search-filter.service.ts index 743a39cbcaa..b45d1dca28c 100644 --- a/lib/content-services/src/lib/search/components/search-filter/search-filter.service.ts +++ b/lib/content-services/src/lib/search/services/search-filter.service.ts @@ -16,13 +16,13 @@ */ import { Injectable, Type } from '@angular/core'; -import { SearchTextComponent } from '../search-text/search-text.component'; -import { SearchRadioComponent } from '../search-radio/search-radio.component'; -import { SearchSliderComponent } from '../search-slider/search-slider.component'; -import { SearchNumberRangeComponent } from '../search-number-range/search-number-range.component'; -import { SearchCheckListComponent } from '../search-check-list/search-check-list.component'; -import { SearchDateRangeComponent } from '../search-date-range/search-date-range.component'; -import { SearchDatetimeRangeComponent } from '../search-datetime-range/search-datetime-range.component'; +import { SearchTextComponent } from '../components/search-text/search-text.component'; +import { SearchRadioComponent } from '../components/search-radio/search-radio.component'; +import { SearchSliderComponent } from '../components/search-slider/search-slider.component'; +import { SearchNumberRangeComponent } from '../components/search-number-range/search-number-range.component'; +import { SearchCheckListComponent } from '../components/search-check-list/search-check-list.component'; +import { SearchDateRangeComponent } from '../components/search-date-range/search-date-range.component'; +import { SearchDatetimeRangeComponent } from '../components/search-datetime-range/search-datetime-range.component'; @Injectable({ providedIn: 'root' diff --git a/lib/content-services/src/lib/search/search-header-query-builder.service.spec.ts b/lib/content-services/src/lib/search/services/search-header-query-builder.service.spec.ts similarity index 97% rename from lib/content-services/src/lib/search/search-header-query-builder.service.spec.ts rename to lib/content-services/src/lib/search/services/search-header-query-builder.service.spec.ts index 1def5e126b8..a4fa2d00e6b 100644 --- a/lib/content-services/src/lib/search/search-header-query-builder.service.spec.ts +++ b/lib/content-services/src/lib/search/services/search-header-query-builder.service.spec.ts @@ -15,11 +15,11 @@ * limitations under the License. */ -import { SearchConfiguration } from './models/search-configuration.interface'; +import { SearchConfiguration } from '../models/search-configuration.interface'; import { AppConfigService } from '@alfresco/adf-core'; import { SearchHeaderQueryBuilderService } from './search-header-query-builder.service'; import { TestBed } from '@angular/core/testing'; -import { ContentTestingModule } from '../testing/content.testing.module'; +import { ContentTestingModule } from '../../testing/content.testing.module'; describe('SearchHeaderQueryBuilderService', () => { diff --git a/lib/content-services/src/lib/search/search-header-query-builder.service.ts b/lib/content-services/src/lib/search/services/search-header-query-builder.service.ts similarity index 94% rename from lib/content-services/src/lib/search/search-header-query-builder.service.ts rename to lib/content-services/src/lib/search/services/search-header-query-builder.service.ts index 07e6d881049..e9f0344e589 100644 --- a/lib/content-services/src/lib/search/search-header-query-builder.service.ts +++ b/lib/content-services/src/lib/search/services/search-header-query-builder.service.ts @@ -17,14 +17,14 @@ import { Injectable } from '@angular/core'; import { AlfrescoApiService, AppConfigService, NodesApiService, DataSorting } from '@alfresco/adf-core'; -import { SearchConfiguration } from './models/search-configuration.interface'; +import { SearchConfiguration } from '../models/search-configuration.interface'; import { BaseQueryBuilderService } from './base-query-builder.service'; -import { SearchCategory } from './models/search-category.interface'; +import { SearchCategory } from '../models/search-category.interface'; import { MinimalNode, QueryBody } from '@alfresco/js-api'; import { filter } from 'rxjs/operators'; import { Observable } from 'rxjs'; -import { SearchSortingDefinition } from './models/search-sorting-definition.interface'; -import { FilterSearch } from './models/filter-search.interface'; +import { SearchSortingDefinition } from '../models/search-sorting-definition.interface'; +import { FilterSearch } from '../models/filter-search.interface'; @Injectable({ providedIn: 'root' diff --git a/lib/content-services/src/lib/search/search-query-builder.service.spec.ts b/lib/content-services/src/lib/search/services/search-query-builder.service.spec.ts similarity index 95% rename from lib/content-services/src/lib/search/search-query-builder.service.spec.ts rename to lib/content-services/src/lib/search/services/search-query-builder.service.spec.ts index 79396f15cb8..2850416ad38 100644 --- a/lib/content-services/src/lib/search/search-query-builder.service.spec.ts +++ b/lib/content-services/src/lib/search/services/search-query-builder.service.spec.ts @@ -16,11 +16,11 @@ */ import { SearchQueryBuilderService } from './search-query-builder.service'; -import { SearchConfiguration } from './models/search-configuration.interface'; +import { SearchConfiguration } from '../models/search-configuration.interface'; import { AppConfigService } from '@alfresco/adf-core'; -import { FacetField } from './models/facet-field.interface'; +import { FacetField } from '../models/facet-field.interface'; import { TestBed } from '@angular/core/testing'; -import { ContentTestingModule } from '../testing/content.testing.module'; +import { ContentTestingModule } from '../../testing/content.testing.module'; describe('SearchQueryBuilder', () => { @@ -670,10 +670,12 @@ describe('SearchQueryBuilder', () => { expect(queryBody.scope).toEqual(mockScope); }); - it('should return empty if array of search config not found', () => { - const builder = new SearchQueryBuilderService(buildConfig({}), null); - const forms = builder.getSearchConfigurationDetails(); - expect(forms).toEqual([]); + it('should return empty if array of search config not found', (done) => { + const builder = new SearchQueryBuilderService(buildConfig(null), null); + builder.searchForms.subscribe((forms) => { + expect(forms).toEqual([]); + done(); + }); }); describe('Multiple search configuration', () => { @@ -728,14 +730,15 @@ describe('SearchQueryBuilder', () => { expect(builder.filterQueries.length).toBe(2); }); - it('should list available search form names', () => { - const forms = builder.getSearchConfigurationDetails(); - - expect(forms).toEqual([ - { index: 0, name: 'config1', default: true, selected: true }, - { index: 1, name: 'config2', default: false, selected: false }, - { index: 2, name: 'SEARCH.UNKNOWN_FORM', default: false, selected: false } - ]); + it('should list available search form names', (done) => { + builder.searchForms.subscribe((forms) => { + expect(forms).toEqual([ + { index: 0, name: 'config1', default: true, selected: true }, + { index: 1, name: 'config2', default: false, selected: false }, + { index: 2, name: 'SEARCH.UNKNOWN_CONFIGURATION', default: false, selected: false } + ]); + done(); + }); }); it('should allow the user switch the form', () => { @@ -745,15 +748,16 @@ describe('SearchQueryBuilder', () => { expect(builder.filterQueries.length).toBe(2); }); - it('should keep the selected configuration value', () => { + it('should keep the selected configuration value', (done) => { builder.updateSelectedConfiguration(1); - const forms = builder.getSearchConfigurationDetails(); - - expect(forms).toEqual([ - { index: 0, name: 'config1', default: true, selected: false }, - { index: 1, name: 'config2', default: false, selected: true }, - { index: 2, name: 'SEARCH.UNKNOWN_FORM', default: false, selected: false } - ]); + builder.searchForms.subscribe((forms) => { + expect(forms).toEqual([ + { index: 0, name: 'config1', default: true, selected: false }, + { index: 1, name: 'config2', default: false, selected: true }, + { index: 2, name: 'SEARCH.UNKNOWN_CONFIGURATION', default: false, selected: false } + ]); + done(); + }); }); }); }); diff --git a/lib/content-services/src/lib/search/search-query-builder.service.ts b/lib/content-services/src/lib/search/services/search-query-builder.service.ts similarity index 93% rename from lib/content-services/src/lib/search/search-query-builder.service.ts rename to lib/content-services/src/lib/search/services/search-query-builder.service.ts index a8b88a663a3..05133764940 100644 --- a/lib/content-services/src/lib/search/search-query-builder.service.ts +++ b/lib/content-services/src/lib/search/services/search-query-builder.service.ts @@ -17,7 +17,7 @@ import { Injectable } from '@angular/core'; import { AlfrescoApiService, AppConfigService } from '@alfresco/adf-core'; -import { SearchConfiguration } from './models/search-configuration.interface'; +import { SearchConfiguration } from '../models/search-configuration.interface'; import { BaseQueryBuilderService } from './base-query-builder.service'; @Injectable() diff --git a/lib/content-services/src/lib/styles/_index.scss b/lib/content-services/src/lib/styles/_index.scss index 07007c9bae6..f8672855b65 100644 --- a/lib/content-services/src/lib/styles/_index.scss +++ b/lib/content-services/src/lib/styles/_index.scss @@ -28,6 +28,10 @@ @import '../aspect-list/aspect-list.component'; @import '../permission-manager/components/user-icon-column/user-icon-column.component'; @import '../permission-manager/components/user-name-column/user-name-column.component'; +@import '../search/components/search-filter-chips/search-filter-chips.component'; +@import '../search/components/search-facet-field/search-facet-field.component'; +@import '../search/components/search-form/search-form.component'; +@import '../search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component'; @mixin adf-content-services-theme($theme) { @include adf-breadcrumb-theme($theme); @@ -56,4 +60,8 @@ @include adf-version-comparison-theme($theme); @include adf-content-type-dialog-theme($theme); @include adf-aspect-list-theme($theme); + @include adf-search-filter-chips-theme($theme); + @include adf-search-filter-field-theme($theme); + @include adf-search-forms-theme($theme); + @include adf-search-filter-menu-card($theme); } diff --git a/lib/core/app-config/schema.json b/lib/core/app-config/schema.json index 2028c987bf0..44ed4df3024 100644 --- a/lib/core/app-config/schema.json +++ b/lib/core/app-config/schema.json @@ -499,6 +499,26 @@ } ] }, + "search-widget-setting": { + "description": "Search widget setting", + "type": "object", + "properties": { + "allowUpdateOnChange": { + "type": "boolean", + "default": true, + "description": "update search query with every user changes on widget" + }, + "hideDefaultAction": { + "type": "boolean", + "default": false, + "description": "Hides the widget action i.e clear and submit" + }, + "unit": { + "type": "string", + "description": "unit type of the widget value" + } + } + }, "search-configuration": { "description": "Search configuration parameters", "type": "object", @@ -589,6 +609,9 @@ }, "offset": { "type": "integer" + }, + "settings": { + "$ref": "#/definitions/search-widget-setting" } } } @@ -660,6 +683,9 @@ "mincount": { "type": "number", "description": "This specifies the minimum count required for a facet interval to be displayed. The default value is 1." + }, + "settings": { + "$ref": "#/definitions/search-widget-setting" } } } @@ -716,6 +742,9 @@ } } } + }, + "settings": { + "$ref": "#/definitions/search-widget-setting" } } }, @@ -750,8 +779,7 @@ "type": "string" }, "settings": { - "description": "Component-specific settings", - "type": "object" + "$ref": "#/definitions/search-widget-setting" } } } diff --git a/lib/testing/src/lib/protractor/content-services/pages/search/date-range-filter.page.ts b/lib/testing/src/lib/protractor/content-services/pages/search/date-range-filter.page.ts index cb8166e5c75..377a5ad212c 100644 --- a/lib/testing/src/lib/protractor/content-services/pages/search/date-range-filter.page.ts +++ b/lib/testing/src/lib/protractor/content-services/pages/search/date-range-filter.page.ts @@ -139,4 +139,5 @@ export class DateRangeFilterPage { async checkClearButtonIsDisplayed(): Promise { await BrowserVisibility.waitUntilElementIsVisible(this.filter.element(this.clearButton)); } + } diff --git a/scripts/build/build-core.sh b/scripts/build/build-core.sh index 1ba573fb9b7..8aa97040153 100755 --- a/scripts/build/build-core.sh +++ b/scripts/build/build-core.sh @@ -22,6 +22,9 @@ echo "====== Copy i18n ======" mkdir -p ./lib/dist/core/bundles/assets/adf-core/i18n cp -R ./lib/core/i18n/* ./lib/dist/core/bundles/assets/adf-core/i18n +echo "====== Copy schema ======" +cp -R ./lib/core/app-config/schema.json lib/dist/core/app.config.schema.json + echo "====== Copy assets ======" cp -R ./lib/core/assets/* ./lib/dist/core/bundles/assets