52 lines
2.2 KiB
HTML
52 lines
2.2 KiB
HTML
<div class="d-flex align-items-center gap-1-rem">
|
|
|
|
<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
|
|
<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
|
|
{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
|
|
</button>
|
|
|
|
|
|
<mat-menu #filterMenu>
|
|
<div class="p-3" (click)="$event?.stopPropagation?.()">
|
|
<div class="search-listing-filters-container">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<h4>{{'LOCK-LISTING.FILTER.TITLE' | translate}}</h4>
|
|
<button color="accent" mat-button (click)="clearFilters()">
|
|
{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div>
|
|
<mat-form-field class="col-12">
|
|
<mat-label>{{'LOCK-LISTING.FILTER.USERS' | translate}}</mat-label>
|
|
<app-multiple-auto-complete [(ngModel)]="internalFilters.userIds" [hidePlaceholder]="true" [separatorKeysCodes]="separatorKeysCodes" [configuration]="userService.multipleAutocompleteConfiguration">
|
|
</app-multiple-auto-complete>
|
|
</mat-form-field>
|
|
</div>
|
|
<div>
|
|
<mat-form-field class="col-12">
|
|
<mat-label>{{'LOCK-LISTING.FILTER.TARGET-TYPE' | translate}}
|
|
<mat-select multiple [(ngModel)]="internalFilters.targetTypes">
|
|
<mat-option *ngFor="let targetType of lockTargetTypeEnumValues" [value]="targetType">{{enumUtils.toLockTargetTypeString(targetType)}}</mat-option>
|
|
</mat-select>
|
|
</mat-label>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mt-4 gap-1-rem">
|
|
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
|
|
{{'LOCK-LISTING.FILTER.CANCEL' | translate}}
|
|
</button>
|
|
<button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
|
|
{{'LOCK-LISTING.FILTER.APPLY-FILTERS' | translate}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-menu>
|
|
|
|
<app-expandable-search-field [(value)]=internalFilters.like (valueChange)="onSearchTermChange($event)" />
|
|
</div>
|