inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5197] Disable empty facets (#8650)

Browse Source 
* [ACS-5197] Disable empty facets

* [ACS-5197] CR fixes
This commit is contained in:
MichalKinas 2023-06-13 18:01:39 +02:00 committed by GitHub
parent a2b1b54f86
commit b39ff6bab9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
View File

@ -2,6 +2,7 @@
disableRipple
class="adf-search-filter-chip"
[class.adf-search-toggle-chip]="(facetField.displayValue$ | async) || menuTrigger.menuOpen"
[disabled]="!isPopulated()"
tabIndex="0"
[matMenuTriggerFor]="menu"
(onMenuOpen)="onMenuOpen()"
@ -18,7 +19,10 @@
  {{ displayValue | translate }}
</span>
<ng-template #showAny><span class="adf-search-filter-ellipsis adf-filter-value">&nbsp;{{ 'SEARCH.FILTER.ANY' | translate }}</span></ng-template>
<mat-icon>keyboard_arrow_down</mat-icon>
<mat-icon *ngIf="isPopulated(); else disabledIcon">keyboard_arrow_down</mat-icon>
<ng-template #disabledIcon>
<mat-icon>remove</mat-icon>
</ng-template>
</mat-chip>
<mat-menu #menu="matMenu" backdropClass="adf-search-filter-chip-menu" (closed)="onClosed()">

5
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss Normal file
View File

@ -0,0 +1,5 @@
.adf-search-filter-chip {
&[disabled] {
pointer-events: none;
}
}

23
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.spec.ts
View File

@ -63,4 +63,27 @@ describe('SearchFacetChipComponent', () => {
applyButton.triggerEventHandler('click', {});
expect(queryBuilder.update).toHaveBeenCalled();
});
it('should display arrow down icon and not disable the chip when items are loaded', () => {
component.field.buckets.items = [{ count: 1, label: 'test', filterQuery: '' }];
fixture.detectChanges();
const chip = fixture.debugElement.query(By.css('mat-chip'));
const icon = fixture.debugElement.query(By.css('mat-chip mat-icon')).nativeElement.innerText;
expect(chip.classes['mat-chip-disabled']).toBeUndefined();
expect(icon).toEqual('keyboard_arrow_down');
});
it('should display remove icon and disable facet when no items are loaded', () => {
const chip = fixture.debugElement.query(By.css('mat-chip'));
const icon = fixture.debugElement.query(By.css('mat-chip mat-icon')).nativeElement.innerText;
expect(chip.classes['mat-chip-disabled']).toBeTrue();
expect(icon).toEqual('remove');
});
it('should not open context menu when no items are loaded', () => {
spyOn(component.menuTrigger, 'openMenu');
const chip = fixture.debugElement.query(By.css('mat-chip')).nativeElement;
chip.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
expect(component.menuTrigger.openMenu).not.toHaveBeenCalled();
});
});

15
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts
View File

@ -24,6 +24,7 @@ import { SearchFacetFieldComponent } from '../../search-facet-field/search-facet
@Component({
selector: 'adf-search-facet-chip',
templateUrl: './search-facet-chip.component.html',
styleUrls: ['./search-facet-chip.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class SearchFacetChipComponent {
@ -65,10 +66,12 @@ export class SearchFacetChipComponent {
}
onEnterKeydown(): void {
if (!this.menuTrigger.menuOpen) {
this.menuTrigger.openMenu();
} else {
this.menuTrigger.closeMenu();
if (this.isPopulated()) {
if (!this.menuTrigger.menuOpen) {
this.menuTrigger.openMenu();
} else {
this.menuTrigger.closeMenu();
}
}
}
@ -77,4 +80,8 @@ export class SearchFacetChipComponent {
this.menuTrigger.closeMenu();
}
}
isPopulated(): boolean {
return this.field.buckets?.items.length > 0;
}
}