Skip to content

Commit

Permalink
feat(dynamic-table): cria nova propriedade visibleFixedFilters
Browse files Browse the repository at this point in the history 
Foi criado a nova propriedade para visibleFixedFilters
opcional do tipo boolean com valor default 'true' que permite
exibir ou false para não exibir o filtro fixo nos disclaimer

Fixes dynamic-table/DTHFUI-7112
  • Loading branch information
@renanarosario
renanarosario committed Dec 6, 2024
1 parent c54c208 commit c9ff42c
Show file tree
Hide file tree
Showing 8 changed files with 340 additions and 80 deletions.
22 changes: 22 additions & 0 deletions ...s/src/lib/components/po-page-dynamic-search/po-page-dynamic-search-base.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,4 +183,26 @@ describe('PoPageDynamicSearchBaseComponent:', () => {
expect(component.advancedFilterLiterals).toEqual(expectedValue);
});
});

describe('p-visible-fixed-filters:', () => {
it('should update `_visibleFixedFilters` when `visibleFixedFilters` is set', () => {
component.visibleFixedFilters = true;
expect(component['_visibleFixedFilters']).toBe(true);

component.visibleFixedFilters = false;
expect(component['_visibleFixedFilters']).toBe(false);
});

it('should return `_visibleFixedFilters` when `visibleFixedFilters` is accessed', () => {
component['_visibleFixedFilters'] = true;
expect(component.visibleFixedFilters).toBe(true);

component['_visibleFixedFilters'] = false;
expect(component.visibleFixedFilters).toBe(false);
});

it('should have a default value of `true` for `visibleFixedFilters` if not set', () => {
expect(component.visibleFixedFilters).toBeTrue();
});
});
});
40 changes: 31 additions & 9 deletions ...plates/src/lib/components/po-page-dynamic-search/po-page-dynamic-search-base.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,34 @@ export abstract class PoPageDynamicSearchBaseComponent {
*/
@Input('p-quick-search-value') quickSearchValue: string;

_visibleFixedFilters = true;

/**
* @optional
*
* @description
*
* Controla a visibilidade dos filtros fixos na página.
*
* - Quando `true` (default), todos os filtros, incluindo os fixos, são exibidos, permitindo que o usuário visualize os filtros aplicados.
* - Quando `false`, os filtros fixos são ocultados, não sendo exibidos na interface, mas ainda sendo aplicados como filtros nas requisições.
*
* Esta propriedade trabalha em conjunto com a propriedade `fixed` dos filtros individuais. Filtros marcados como `fixed: true` não serão exibidos na interface do filtro avançado quando `visibleFixedFilters` for `false`, mas continuarão a ser aplicados de forma transparente ao usuário. Dessa forma, permite-se maior flexibilidade no controle de quais filtros devem ser visíveis ao usuário ou devem ser aplicados permanentemente sem interferência.
*
* **Exemplo de uso:**
* ```html
* <!-- Para ocultar os filtros fixos -->
* <po-page-dynamic-table [p-visible-fixed-filters]="false"></po-page-dynamic-table>
* ```
*/
@Input('p-visible-fixed-filters') set visibleFixedFilters(visible: boolean) {
this._visibleFixedFilters = visible;
}

get visibleFixedFilters(): boolean {
return this._visibleFixedFilters;
}

/**
* @optional
*
Expand Down Expand Up @@ -189,10 +217,10 @@ export abstract class PoPageDynamicSearchBaseComponent {
private _hideCloseDisclaimers: Array<string> = [];
private _literals: PoPageDynamicSearchLiterals;
private _quickSearchWidth: number;

private previousFilters: Array<PoDynamicFormField>;
private language: string;

previousFilters: Array<PoDynamicFormField>;

/**
* @optional
*
Expand Down Expand Up @@ -258,12 +286,6 @@ export abstract class PoPageDynamicSearchBaseComponent {
*/
@Input('p-filters') set filters(filters: Array<PoPageDynamicSearchFilters>) {
this._filters = Array.isArray(filters) ? [...filters] : [];

if (this.stringify(this._filters) !== this.stringify(this.previousFilters)) {
this.onChangeFilters(this.filters);

this.previousFilters = [...this._filters];
}
}

get filters(): Array<PoPageDynamicSearchFilters> {
Expand Down Expand Up @@ -320,7 +342,7 @@ export abstract class PoPageDynamicSearchBaseComponent {
};
}

private stringify(columns: Array<PoPageDynamicSearchFilters>) {
stringify(columns: Array<PoPageDynamicSearchFilters>) {
// não faz o stringify da propriedade searchService, pois pode conter objeto complexo e disparar um erro.
return JSON.stringify(columns, (key, value) => {
if (key !== 'searchService') {
Expand Down
5 changes: 5 additions & 0 deletions ...tes/src/lib/components/po-page-dynamic-search/po-page-dynamic-search-filters.interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,9 @@ export interface PoPageDynamicSearchFilters extends PoDynamicFormField {
* Define um valor inicial para um filtro de busca avançada.
*/
initValue?: any;

/**
* Define um valor fixed para um filtro de busca avançada.
*/
fixed?: boolean;
}
226 changes: 176 additions & 50 deletions ...plates/src/lib/components/po-page-dynamic-search/po-page-dynamic-search.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,17 +218,51 @@ describe('PoPageDynamicSearchComponent:', () => {
const filter = { property: 'value1' };
const optionsService = undefined;

const visibleFilters =
component.visibleFixedFilters === false
? component.filters.filter(filter => !('fixed' in filter) || !filter.fixed)
: component.filters;

spyOn(component, <any>'setDisclaimers');
spyOn(component.advancedSearch, 'emit');
spyOn(component, <any>'setFilters');

component.onAdvancedSearch({ filter, optionsService });

expect(component['setDisclaimers']).toHaveBeenCalledWith(filter, optionsService);
expect(component['setDisclaimers']).toHaveBeenCalledWith(filter, optionsService, visibleFilters);
expect(component['setFilters']).toHaveBeenCalledBefore(component.advancedSearch.emit);
expect(component.advancedSearch.emit).toHaveBeenCalledWith(filter);
});

it('onAdvancedSearch: should correctly filter out fixed filters when visibleFixedFilters is false', () => {
component.visibleFixedFilters = false;
component.filters = [
{ property: 'city', fixed: true, initValue: 'Toronto' },
{ property: 'name', fixed: false, initValue: 'John Doe' },
{ property: 'country', initValue: 'Canada' }
];

const filteredItems = { filter: { city: 'Toronto' }, optionsService: undefined };

const setDisclaimersSpy = spyOn(component as any, 'setDisclaimers').and.callThrough();
spyOn(component, <any>'setFilters').and.callThrough();
spyOn(component.advancedSearch, 'emit');

component.onAdvancedSearch(filteredItems);

const actualVisibleFilters = setDisclaimersSpy.calls.mostRecent().args[2] as Array<any>;

expect(actualVisibleFilters.length).toBe(2);
expect(actualVisibleFilters).toEqual(
jasmine.arrayContaining([
jasmine.objectContaining({ property: 'name', fixed: false }),
jasmine.objectContaining({ property: 'country' })
])
);
expect(component['setFilters']).toHaveBeenCalledWith(filteredItems.filter);
expect(component.advancedSearch.emit).toHaveBeenCalledWith(filteredItems.filter);
});

it(`setFilters: should call 'convertToFilters'`, () => {
const filters = [{ property: 'value1' }];

Expand Down Expand Up @@ -340,9 +374,103 @@ describe('PoPageDynamicSearchComponent:', () => {
expect(component.changeDisclaimers.emit).toHaveBeenCalledWith(currentDisclaimers);
});

it(`onRemoveAllDisclaimers: should call 'changeDisclaimers.emit' if all disclaimers are removed`, () => {
it(`onRemoveDisclaimer: should include fixed filters from 'this.filters' into currentDisclaimers`, () => {
component.filters = [
{ property: 'status', fixed: true, initValue: 'Active', label: 'Status' },
{ property: 'category', fixed: true, initValue: 'Finance', label: 'Category' },
{ property: 'name', fixed: false, initValue: 'Test', label: 'Name' }
];
const currentDisclaimers = [{ property: 'name', label: 'Name: Test', value: 'Test', hideClose: false }];
const removedDisclaimer = { property: 'name', label: 'Name: Test', value: 'Test', hideClose: false };

const expectedDisclaimers = [
{ property: 'name', label: 'Name: Test', value: 'Test', hideClose: false },
{ property: 'status', label: 'Status: Active', value: 'Active', hideClose: true },
{ property: 'category', label: 'Category: Finance', value: 'Finance', hideClose: true }
];

spyOn(component.changeDisclaimers, 'emit');

component['onRemoveDisclaimer']({ removedDisclaimer, currentDisclaimers });

expect(component.changeDisclaimers.emit).toHaveBeenCalledWith(expectedDisclaimers);
});

it(`onRemoveDisclaimer: should not duplicate fixed filters already present in currentDisclaimers`, () => {
component.filters = [
{ property: 'status', fixed: true, initValue: 'Active', label: 'Status' },
{ property: 'category', fixed: true, initValue: 'Finance', label: 'Category' }
];
const currentDisclaimers = [{ property: 'status', label: 'Status: Active', value: 'Active', hideClose: true }];
const removedDisclaimer = { property: 'category', label: 'Category: Finance', value: 'Finance', hideClose: true };

const expectedDisclaimers = [
{ property: 'status', label: 'Status: Active', value: 'Active', hideClose: true },
{ property: 'category', label: 'Category: Finance', value: 'Finance', hideClose: true }
];

spyOn(component.changeDisclaimers, 'emit');

component['onRemoveDisclaimer']({ removedDisclaimer, currentDisclaimers });

expect(component.changeDisclaimers.emit).toHaveBeenCalledWith(expectedDisclaimers);
});

it(`onRemoveDisclaimer: should not include fixed filters without 'initValue'`, () => {
component.filters = [
{ property: 'status', fixed: true, label: 'Status' },
{ property: 'category', fixed: true, initValue: 'Finance', label: 'Category' }
];
const currentDisclaimers = [
{ property: 'category', label: 'Category: Finance', value: 'Finance', hideClose: true }
];
const removedDisclaimer = { property: 'category', label: 'Category: Finance', value: 'Finance', hideClose: true };

const expectedDisclaimers = [
{ property: 'category', label: 'Category: Finance', value: 'Finance', hideClose: true }
];

spyOn(component.changeDisclaimers, 'emit');

component['onRemoveDisclaimer']({ removedDisclaimer, currentDisclaimers });

expect(component.changeDisclaimers.emit).toHaveBeenCalledWith(expectedDisclaimers);
});

it(`onRemoveAllDisclaimers: should call 'changeDisclaimers.emit' with disclaimers that need to be kept`, () => {
component.filters = [
{ property: 'status', fixed: true, initValue: 'Ativo', label: 'Status' },
{ property: 'category', fixed: true, initValue: 'Financeiro', label: 'Categoria' },
{ property: 'name', fixed: false }
];
const expectedDisclaimersToKeep = [
{
property: 'status',
value: 'Ativo',
label: 'Status: Ativo',
hideClose: true
},
{
property: 'category',
value: 'Financeiro',
label: 'Categoria: Financeiro',
hideClose: true
}
];

spyOn(component.changeDisclaimers, 'emit');
component['onRemoveAllDisclaimers']();

expect(component.changeDisclaimers.emit).toHaveBeenCalledWith(expectedDisclaimersToKeep);
});

it(`onRemoveAllDisclaimers: should call 'changeDisclaimers.emit' with an empty array if there are no fixed filters`, () => {
component.filters = [
{ property: 'name', fixed: false, initValue: 'John Doe' },
{ property: 'age', fixed: false, initValue: 30 }
];

spyOn(component.changeDisclaimers, 'emit');
component['onRemoveAllDisclaimers']();

expect(component.changeDisclaimers.emit).toHaveBeenCalledWith([]);
Expand Down Expand Up @@ -736,6 +864,33 @@ describe('PoPageDynamicSearchComponent:', () => {
expect(component['onAction']).toHaveBeenCalledWith('jhon', true);
});
});

describe('ngAfterViewInit:', () => {
it('should call `onChangeFilters` and update `previousFilters` if `filters` have changed', () => {
const filters = [{ property: 'city', label: 'City' }];
component.filters = filters;
component.previousFilters = [{ property: 'city', label: 'Previous City' }];

spyOn(component, 'onChangeFilters');
component.ngAfterViewInit();

expect(component.onChangeFilters).toHaveBeenCalledWith(filters);
expect(component.previousFilters).toEqual(filters);
});

it('should not call `onChangeFilters` if `filters` have not changed', () => {
const filters = [{ property: 'city', label: 'City' }];
component.filters = filters;
component.previousFilters = [...filters];

spyOn(component, 'onChangeFilters');

component.ngAfterViewInit();

expect(component.onChangeFilters).not.toHaveBeenCalled();
expect(component.previousFilters).toEqual(filters);
});
});
});

describe('Integration:', () => {
Expand All @@ -750,77 +905,48 @@ describe('PoPageDynamicSearchComponent:', () => {
expect(component.changeDisclaimers.emit).not.toHaveBeenCalled();
});

it(`should add quickSearch and advanced filter in disclaimers if concat-filters is true and advanced filter is defined`, () => {
it(`should remove previous quickSearch disclaimer when adding a new quickSearch`, () => {
component.concatFilters = true;

component.filters = [{ property: 'city', initValue: 'Ontario' }];

component.literals.quickSearchLabel = 'Search';
component.onAction('Chicago');

const currentDisclaimers = [
{ label: 'City: Ontario', value: 'Ontario', property: 'city', hideClose: false },
{ property: 'search', label: `Search Chicago`, value: 'Chicago', hideClose: false }
];

expect(component.disclaimerGroup.disclaimers).toEqual(currentDisclaimers);
});

it(`should add advanced filter and quickSearch updated in disclaimers if concat-filters is true and advanced filter is defined`, () => {
component.concatFilters = true;

component.filters = [{ property: 'city', initValue: 'Ontario' }];

component.literals.quickSearchLabel = 'Search';
component.onAction('Chicago');
expect(component.disclaimerGroup.disclaimers).toEqual([
{
property: 'search',
label: 'Search Chicago',
value: 'Chicago',
hideClose: false
}
]);

component.onAction('Test');

const currentDisclaimers = [
{ label: 'City: Ontario', value: 'Ontario', property: 'city', hideClose: false },
{ property: 'search', label: `Search Test`, value: 'Test', hideClose: false }
];

expect(component.disclaimerGroup.disclaimers).toEqual(currentDisclaimers);
expect(component.disclaimerGroup.disclaimers).toEqual([
{
property: 'search',
label: 'Search Test',
value: 'Test',
hideClose: false
}
]);
});

it(`should add advanced search and remove quickSearch in disclaimers if concat-filters is false`, () => {
component.concatFilters = false;

component.literals.quickSearchLabel = 'Search';
component.onAction('Chicago');

const disclaimersWithQuickFilter = [
{ property: 'search', label: `Search Chicago`, value: 'Chicago', hideClose: false }
];

expect(component.disclaimerGroup.disclaimers).toEqual(disclaimersWithQuickFilter);

const disclaimersWithAdvancedSearch = [
{ label: 'City: Ontario', value: 'Ontario', property: 'city', hideClose: false }
];

component.filters = [{ property: 'city', initValue: 'Ontario' }];

expect(component.disclaimerGroup.disclaimers).toEqual(disclaimersWithAdvancedSearch);
});

it(`should add advanced search and remove quickSearch in disclaimers if concat-filters is true`, () => {
component.concatFilters = true;

component.literals.quickSearchLabel = 'Search';
component.onAction('Chicago');
const disclaimersWithQuickFilter = [
{ property: 'search', label: `Search Chicago`, value: 'Chicago', hideClose: false }
];

expect(component.disclaimerGroup.disclaimers).toEqual(disclaimersWithQuickFilter);
component.onAdvancedSearch({ filter: { city: 'Ontario' } });

const disclaimersWithAdvancedSearch = [
{ label: 'City: Ontario', value: 'Ontario', property: 'city', hideClose: false }
];

component.filters = [{ property: 'city', initValue: 'Ontario' }];

expect(component.disclaimerGroup.disclaimers).toEqual(disclaimersWithAdvancedSearch);
});
});
Expand Down
Loading

0 comments on commit c9ff42c

Please sign in to comment.