diff --git a/projects/ui/src/lib/components/po-search/po-search-base.component.spec.ts b/projects/ui/src/lib/components/po-search/po-search-base.component.spec.ts index 1e09bc84e..f8c2bdb82 100644 --- a/projects/ui/src/lib/components/po-search/po-search-base.component.spec.ts +++ b/projects/ui/src/lib/components/po-search/po-search-base.component.spec.ts @@ -17,12 +17,14 @@ describe('PoSearchBaseComponent', () => { describe('Properties:', () => { it('label: should set label when is setted', () => { + component['language'] = 'en'; component.ariaLabel = 'Search'; expect(component.ariaLabel).toBe('Search'); }); it('label: should concat label with literals', () => { + component['language'] = 'en'; component.ariaLabel = 'label button'; expect(component.ariaLabel).toBe('label button Search'); }); diff --git a/projects/ui/src/lib/components/po-search/po-search-base.component.ts b/projects/ui/src/lib/components/po-search/po-search-base.component.ts index d0b9c1d68..571db1e8d 100644 --- a/projects/ui/src/lib/components/po-search/po-search-base.component.ts +++ b/projects/ui/src/lib/components/po-search/po-search-base.component.ts @@ -7,6 +7,7 @@ import { PoSearchLiterals } from './literals/po-search-literals'; import { poSearchLiteralsDefault } from './literals/po-search-literals-default'; import { PoSearchFilterMode } from './enum/po-search-filter-mode.enum'; +export type searchMode = 'action' | 'trigger'; /** * @description * @@ -83,8 +84,6 @@ export class PoSearchBaseComponent { } /** - * @optional - * * @description * * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente (p-items), esta propriedade será responsável pelo texto de apresentação de cada item da lista. @@ -100,6 +99,21 @@ export class PoSearchBaseComponent { */ @Input('p-icon') icon: string | TemplateRef; + /** + * @optional + * + * @description + * + * Determina a forma de realizar a pesquisa no componente + * + * Valores aceitos: + * - `action`: Realiza a busca a cada caractere digitado. + * - `trigger`: Realiza a busca ao pressionar `enter` ou clicar no ícone de busca. + * + * @default `action` + */ + @Input('p-search-type') type: searchMode = 'action'; + /** * @optional * diff --git a/projects/ui/src/lib/components/po-search/po-search.component.html b/projects/ui/src/lib/components/po-search/po-search.component.html index 5bb831edb..8c0ca829b 100644 --- a/projects/ui/src/lib/components/po-search/po-search.component.html +++ b/projects/ui/src/lib/components/po-search/po-search.component.html @@ -1,29 +1,43 @@
-
+
-
+
+ +
diff --git a/projects/ui/src/lib/components/po-search/po-search.component.spec.ts b/projects/ui/src/lib/components/po-search/po-search.component.spec.ts index 268740e0d..1db258b3a 100644 --- a/projects/ui/src/lib/components/po-search/po-search.component.spec.ts +++ b/projects/ui/src/lib/components/po-search/po-search.component.spec.ts @@ -45,7 +45,7 @@ describe('PoSearchComponent', () => { }); it('onSearchChange: should filter items based on search text and emit filtered items', () => { - component.onSearchChange('text'); + component.onSearchChange('text', true); expect(component.filteredItems).toEqual([{ text: 'Text 1' }, { text: 'Text 2' }]); expect(component.filteredItemsChange.emit).toHaveBeenCalledWith([{ text: 'Text 1' }, { text: 'Text 2' }]); @@ -54,7 +54,7 @@ describe('PoSearchComponent', () => { it('onSearchChange: should filter items based on search text using startsWith', () => { component.filterType = PoSearchFilterMode.startsWith; - component.onSearchChange('Text'); + component.onSearchChange('Text', true); expect(component.filteredItems).toEqual([{ text: 'Text 1' }, { text: 'Text 2' }]); expect(component.filteredItemsChange.emit).toHaveBeenCalledWith([{ text: 'Text 1' }, { text: 'Text 2' }]); @@ -63,14 +63,14 @@ describe('PoSearchComponent', () => { it('onSearchChange: should filter items based on search text using endsWith', () => { component.filterType = PoSearchFilterMode.endsWith; - component.onSearchChange('2'); + component.onSearchChange('2', true); expect(component.filteredItems).toEqual([{ text: 'Text 2' }]); expect(component.filteredItemsChange.emit).toHaveBeenCalledWith([{ text: 'Text 2' }]); }); it('onSearchChange: should not filter items if search text is empty', () => { - component.onSearchChange(''); + component.onSearchChange('', true); expect(component.filteredItems).toEqual([{ text: 'Text 1' }, { text: 'Text 2' }, { text: 'Other Text' }]); expect(component.filteredItemsChange.emit).toHaveBeenCalledWith(component.items); @@ -79,7 +79,7 @@ describe('PoSearchComponent', () => { it('onSearchChange: should return false if filter mode is not recognized', () => { component.filterType = ('invalidMode' as unknown) as PoSearchFilterMode; - const result = component.onSearchChange('text'); + const result = component.onSearchChange('text', true); expect(result).toBeFalsy(); expect(component.filteredItems).toEqual([]); @@ -91,7 +91,7 @@ describe('PoSearchComponent', () => { component.items = [item]; component.filterKeys = ['value']; - component.onSearchChange('42'); + component.onSearchChange('42', true); expect(component.filteredItems).toEqual([item]); expect(component.filteredItemsChange.emit).toHaveBeenCalledWith([item]); @@ -100,7 +100,7 @@ describe('PoSearchComponent', () => { it('onSearchChange: should filter items based on search text using contains', () => { component.filterType = PoSearchFilterMode.contains; - component.onSearchChange('ext'); + component.onSearchChange('ext', true); expect(component.filteredItems).toEqual([{ text: 'Text 1' }, { text: 'Text 2' }, { text: 'Other Text' }]); @@ -117,7 +117,7 @@ describe('PoSearchComponent', () => { component.filterType = PoSearchFilterMode.contains; component.items = [{ name: null }]; - component.onSearchChange(searchText); + component.onSearchChange(searchText, true); expect(component.filteredItems.length).toBe(0); }); @@ -125,38 +125,9 @@ describe('PoSearchComponent', () => { it('onSearchChange: should reset filteredItems and emit empty array', () => { component.items = []; component.filterKeys = ['name']; - component.onSearchChange('item'); + component.onSearchChange('item', true); expect(component.filteredItems).toEqual([]); expect(component.filteredItemsChange.emit).toHaveBeenCalledWith([]); }); - - it('should remove focused class on blur', () => { - const parentElement = document.createElement('div'); - const nativeElement = document.createElement('input'); - - parentElement.appendChild(nativeElement); - parentElement.classList.add('po-search-focused'); - - component.poSearchInput = new ElementRef(nativeElement); - component.onBlur(); - - expect(parentElement.classList.contains('po-search-focused')).toBeFalsy(); - }); - - it('should add focused class on focus', () => { - const parentElement = document.createElement('div'); - const nativeElement = document.createElement('input'); - parentElement.appendChild(nativeElement); - - component.poSearchInput = { - nativeElement: { - parentElement: parentElement - } - } as ElementRef; - - component.onFocus(); - - expect(parentElement.classList.contains('po-search-focused')).toBeTruthy(); - }); }); diff --git a/projects/ui/src/lib/components/po-search/po-search.component.ts b/projects/ui/src/lib/components/po-search/po-search.component.ts index b9cb2f2f7..53cece807 100644 --- a/projects/ui/src/lib/components/po-search/po-search.component.ts +++ b/projects/ui/src/lib/components/po-search/po-search.component.ts @@ -45,49 +45,43 @@ export class PoSearchComponent extends PoSearchBaseComponent implements OnInit { clearSearch(): void { this.poSearchInput.nativeElement.value = ''; - this.onSearchChange(''); + this.onSearchChange('', true); this.filteredItemsChange.emit(this.items); this.poSearchInput.nativeElement.focus(); } - onBlur(): void { - this.renderer.removeClass(this.poSearchInput.nativeElement.parentElement, 'po-search-focused'); - } - - onFocus(): void { - this.renderer.addClass(this.poSearchInput.nativeElement.parentElement, 'po-search-focused'); - } - - onSearchChange(searchText: string): void { - searchText = searchText.toLowerCase(); + onSearchChange(searchText: string, activated: boolean): void { + if (activated) { + searchText = searchText.toLowerCase(); - if (this.items && this.items.length > 0) { - this.filteredItems = this.items.filter(item => - this.filterKeys.some(key => { - let value = item[key]; + if (this.items && this.items.length > 0) { + this.filteredItems = this.items.filter(item => + this.filterKeys.some(key => { + let value = item[key]; - if (typeof value !== 'string') { - value = value != null ? value.toString() : null; - } + if (typeof value !== 'string') { + value = value != null ? value.toString() : null; + } - value = value != null ? value.toLowerCase() : null; + value = value != null ? value.toLowerCase() : null; - if (this.filterType === PoSearchFilterMode.startsWith) { - return value != null && value.startsWith(searchText); - } else if (this.filterType === PoSearchFilterMode.contains) { - return value != null && value.includes(searchText); - } else if (this.filterType === PoSearchFilterMode.endsWith) { - return value != null && value.endsWith(searchText); - } + if (this.filterType === PoSearchFilterMode.startsWith) { + return value != null && value.startsWith(searchText); + } else if (this.filterType === PoSearchFilterMode.contains) { + return value != null && value.includes(searchText); + } else if (this.filterType === PoSearchFilterMode.endsWith) { + return value != null && value.endsWith(searchText); + } - return false; - }) - ); - this.filteredItemsChange.emit(this.filteredItems); - } else { - this.filteredItems = []; - this.filteredItemsChange.emit(this.filteredItems); + return false; + }) + ); + this.filteredItemsChange.emit(this.filteredItems); + } else { + this.filteredItems = []; + this.filteredItemsChange.emit(this.filteredItems); + } + this.changeModel.emit(searchText); } - this.changeModel.emit(searchText); } } diff --git a/projects/ui/src/lib/components/po-search/po-search.module.ts b/projects/ui/src/lib/components/po-search/po-search.module.ts index ae19c22ec..0dad574e5 100644 --- a/projects/ui/src/lib/components/po-search/po-search.module.ts +++ b/projects/ui/src/lib/components/po-search/po-search.module.ts @@ -5,6 +5,7 @@ import { PoIconModule } from '../po-icon'; import { PoLoadingModule } from '../po-loading'; import { PoSearchComponent } from './po-search.component'; import { FormsModule } from '@angular/forms'; +import { PoAccordionModule } from '../po-accordion/po-accordion.module'; /** * @description @@ -12,7 +13,7 @@ import { FormsModule } from '@angular/forms'; * Módulo do componente po-search. */ @NgModule({ - imports: [CommonModule, PoCleanModule, PoIconModule, PoLoadingModule, FormsModule], + imports: [CommonModule, PoCleanModule, PoIconModule, PoLoadingModule, PoAccordionModule, FormsModule], declarations: [PoSearchComponent], exports: [PoSearchComponent] }) diff --git a/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.html b/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.html index 1ea45ba73..df39688fc 100644 --- a/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.html +++ b/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.html @@ -9,6 +9,7 @@ [p-filter-keys]="fieldKeys" [p-literals]="customLiterals" [p-filter-type]="filterMode" + [p-search-type]="searchMode" (p-filtered-items-change)="filter($event)" (p-change-model)="changeModel($event)" > @@ -16,17 +17,21 @@
- -
    -
  • - -
    - {{ key }}: {{ item[key] }}   -
    -     -
    • -
- + + + +
    +
  • + +
    + {{ key }}: {{ item[key] }}   +
    +     +
    • +
+ + +
@@ -103,6 +108,16 @@ [p-options]="filterModeOptions" > + + +
diff --git a/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.ts b/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.ts index f35b67ad9..f5fd89e0f 100644 --- a/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.ts +++ b/projects/ui/src/lib/components/po-search/samples/sample-po-search-labs/sample-po-search-labs.component.ts @@ -13,14 +13,14 @@ import { HttpClient } from '@angular/common/http'; templateUrl: './sample-po-search-labs.component.html', styles: [ ` - ul { + .sample-list-search { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; } - ul strong { + .sample-list-search strong { text-transform: capitalize; } ` @@ -41,6 +41,7 @@ export class SamplePoSearchLabsComponent implements OnInit, OnChanges { tooltip: string; icon: string; filterMode: PoSearchFilterMode; + searchMode = 'action'; fieldKey: any; itemsModel: any; filterModel: any; @@ -58,6 +59,11 @@ export class SamplePoSearchLabsComponent implements OnInit, OnChanges { { label: 'Ends With', value: PoSearchFilterMode.endsWith } ]; + public readonly searchModeOptions: Array = [ + { label: 'Action', value: 'action' }, + { label: 'Trigger', value: 'trigger' } + ]; + constructor(private http: HttpClient) {} ngOnInit() { @@ -144,9 +150,10 @@ export class SamplePoSearchLabsComponent implements OnInit, OnChanges { this.filteredItems = undefined; this.items = undefined; this.itemsModel = undefined; - this.filterModel = undefined; + this.filterModel = '["name"]'; this.fieldKeys = undefined; this.filterMode = PoSearchFilterMode.startsWith; + this.searchMode = 'action'; this.literals = undefined; this.cleanInput(); this.onChangeService();