argos/dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filter...

114 lines
4.8 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="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.TITLE' | translate}}</h4>
</div>
<div class="col-auto">
<button color="accent" mat-button (click)="clearFilters()">
{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
</button>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<section class="w-100">
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
</section>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.USERS' | translate}}</mat-label>
<app-multiple-auto-complete [(ngModel)]="internalFilters.userIds" [hidePlaceholder]="true" [separatorKeysCodes]="separatorKeysCodes" [configuration]="userAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.NOTIFICATION-TYPE' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.type">
<mat-option *ngFor="let type of notificationTypeEnumValues" [value]="type">{{enumUtils.toNotificationTypeString(type)}}</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.CONTACT-TYPE' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.contactType">
<mat-option *ngFor="let contactType of notificationContactTypeEnumValues" [value]="contactType">{{enumUtils.toNotificationContactTypeString(contactType)}}</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.NOTIFY-STATE' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.notifyState">
<mat-option *ngFor="let notifyState of notificationNotifyStateEnumValues" [value]="notifyState">{{enumUtils.toNotificationNotifyStateString(notifyState)}}</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.TRACKING-STATE' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.trackingState">
<mat-option *ngFor="let trackingState of notificationTrackingStateEnumValues" [value]="trackingState">{{enumUtils.toNotificationTrackingStateString(trackingState)}}</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.TRACKING-PROCESS' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.trackingProcess">
<mat-option *ngFor="let trackingProcess of notificationTrackingProcessEnumValues" [value]="trackingProcess">{{enumUtils.toNotificationTrackingProcessString(trackingProcess)}}</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
<div class="col-auto">
<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.CANCEL' | translate}}
</button>
</div>
<div class="col-auto">
<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button>
</div>
</div>
</div>
</mat-menu>
<!-- <app-expandable-search-field [(value)]=internalFilters.like (valueChange)="onSearchTermChange($event)" /> -->
</div>