ACS-7402: search components [ci:force]

This commit is contained in:
Denys Vuika
2024-07-25 15:18:04 -04:00
parent 6ca737a752
commit 499b6936b8
2 changed files with 23 additions and 11 deletions

View File

@@ -16,13 +16,17 @@
*/ */
import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MatCheckboxChange } from '@angular/material/checkbox'; import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox';
import { SearchWidget } from '../../models/search-widget.interface'; import { SearchWidget } from '../../models/search-widget.interface';
import { SearchWidgetSettings } from '../../models/search-widget-settings.interface'; import { SearchWidgetSettings } from '../../models/search-widget-settings.interface';
import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; import { SearchQueryBuilderService } from '../../services/search-query-builder.service';
import { SearchFilterList } from '../../models/search-filter-list.model'; import { SearchFilterList } from '../../models/search-filter-list.model';
import { TranslationService } from '@alfresco/adf-core'; import { TranslationService } from '@alfresco/adf-core';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
export interface SearchListOption { export interface SearchListOption {
name: string; name: string;
@@ -32,13 +36,14 @@ export interface SearchListOption {
@Component({ @Component({
selector: 'adf-search-check-list', selector: 'adf-search-check-list',
standalone: true,
imports: [CommonModule, MatCheckboxModule, TranslateModule, MatButtonModule, MatIconModule],
templateUrl: './search-check-list.component.html', templateUrl: './search-check-list.component.html',
styleUrls: ['./search-check-list.component.scss'], styleUrls: ['./search-check-list.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
host: { class: 'adf-search-check-list' } host: { class: 'adf-search-check-list' }
}) })
export class SearchCheckListComponent implements SearchWidget, OnInit { export class SearchCheckListComponent implements SearchWidget, OnInit {
id: string; id: string;
settings?: SearchWidgetSettings; settings?: SearchWidgetSettings;
context?: SearchQueryBuilderService; context?: SearchQueryBuilderService;
@@ -101,7 +106,7 @@ export class SearchCheckListComponent implements SearchWidget, OnInit {
updateDisplayValue(): void { updateDisplayValue(): void {
const displayValue = this.options.items const displayValue = this.options.items
.filter((option) => option.checked) .filter((option) => option.checked)
.map(({name}) => this.translationService.instant(name)) .map(({ name }) => this.translationService.instant(name))
.join(', '); .join(', ');
this.displayValue$.next(displayValue); this.displayValue$.next(displayValue);
} }
@@ -125,15 +130,12 @@ export class SearchCheckListComponent implements SearchWidget, OnInit {
} }
setValue(value: any) { setValue(value: any) {
this.options.items.filter((item) => value.includes(item.value)) this.options.items.filter((item) => value.includes(item.value)).map((item) => (item.checked = true));
.map((item) => item.checked = true);
this.submitValues(); this.submitValues();
} }
private getCheckedValues() { private getCheckedValues() {
return this.options.items return this.options.items.filter((option) => option.checked).map((option) => option.value);
.filter((option) => option.checked)
.map((option) => option.value);
} }
submitValues() { submitValues() {

View File

@@ -57,8 +57,19 @@ import { SearchFacetChipTabbedComponent } from './components/search-filter-chips
import { SearchFacetTabbedContentComponent } from './components/search-filter-chips/search-facet-chip-tabbed/search-facet-tabbed-content.component'; import { SearchFacetTabbedContentComponent } from './components/search-filter-chips/search-facet-chip-tabbed/search-facet-tabbed-content.component';
import { SearchInputComponent } from './components/search-input'; import { SearchInputComponent } from './components/search-input';
export const CONTENT_SEARCH_DIRECTIVES = [SearchCheckListComponent] as const;
@NgModule({ @NgModule({
imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, CoreModule, SearchTextModule, SearchInputComponent], imports: [
...CONTENT_SEARCH_DIRECTIVES,
CommonModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
CoreModule,
SearchTextModule,
SearchInputComponent
],
declarations: [ declarations: [
SearchComponent, SearchComponent,
SearchControlComponent, SearchControlComponent,
@@ -74,7 +85,6 @@ import { SearchInputComponent } from './components/search-input';
SearchSliderComponent, SearchSliderComponent,
SearchNumberRangeComponent, SearchNumberRangeComponent,
SearchPanelComponent, SearchPanelComponent,
SearchCheckListComponent,
SearchDatetimeRangeComponent, SearchDatetimeRangeComponent,
SearchSortingPickerComponent, SearchSortingPickerComponent,
SearchFilterContainerComponent, SearchFilterContainerComponent,
@@ -109,7 +119,7 @@ import { SearchInputComponent } from './components/search-input';
SearchSliderComponent, SearchSliderComponent,
SearchNumberRangeComponent, SearchNumberRangeComponent,
SearchPanelComponent, SearchPanelComponent,
SearchCheckListComponent, ...CONTENT_SEARCH_DIRECTIVES,
SearchDatetimeRangeComponent, SearchDatetimeRangeComponent,
SearchSortingPickerComponent, SearchSortingPickerComponent,
SearchFilterContainerComponent, SearchFilterContainerComponent,