ui fixes on mine-inapp-notification>filters

This commit is contained in:
Sofia Papacharalampous 2024-04-12 18:10:08 +03:00
parent 9c8d1aa1dc
commit 05a063a0a5
1 changed files with 24 additions and 12 deletions

View File

@ -7,35 +7,47 @@
<mat-menu #filterMenu> <mat-menu #filterMenu>
<div class="p-3" (click)="$event?.stopPropagation?.()"> <div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="search-listing-filters-container"> <div class="row justify-content-between">
<div class="d-flex align-items-center justify-content-between"> <div class="col-auto mt-2">
<h4>{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.TITLE' | translate}}</h4> <h4>{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.TITLE' | translate}}</h4>
</div>
<div class="col-auto">
<button color="accent" mat-button (click)="clearFilters()"> <button color="accent" mat-button (click)="clearFilters()">
{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}} {{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
</button> </button>
</div> </div>
</div>
<div> <div class="mt-3 row">
<mat-label>{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.NOTIFICATION-TYPE' | translate}} <div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.NOTIFICATION-TYPE' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.type"> <mat-select multiple [(ngModel)]="internalFilters.type">
<mat-option *ngFor="let type of notificationTypeEnumValues" [value]="type">{{enumUtils.toNotificationTypeString(type)}}</mat-option> <mat-option *ngFor="let type of notificationTypeEnumValues" [value]="type">{{enumUtils.toNotificationTypeString(type)}}</mat-option>
</mat-select> </mat-select>
</mat-label> </mat-form-field>
</div> </div>
<div> </div>
<mat-label>{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.TRACKING-STATE' | translate}} <div class="row">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.TRACKING-STATE' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.trackingState"> <mat-select multiple [(ngModel)]="internalFilters.trackingState">
<mat-option *ngFor="let state of notificationInAppTrackingEnumValues" [value]="state">{{enumUtils.toNotificationInAppTrackingString(state)}}</mat-option> <mat-option *ngFor="let state of notificationInAppTrackingEnumValues" [value]="state">{{enumUtils.toNotificationInAppTrackingString(state)}}</mat-option>
</mat-select> </mat-select>
</mat-label> </mat-form-field>
</div> </div>
</div>
<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem"> <div class="row justify-content-end align-items-center mt-4 gap-1-rem">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()"> <div class="col-auto">
<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.CANCEL' | translate}} {{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.CANCEL' | translate}}
</button> </button>
<button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();"> </div>
<div class="col-auto">
<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.APPLY-FILTERS' | translate}} {{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button> </button>
</div> </div>