ui fixes on listing screens > filters

This commit is contained in:
Sofia Papacharalampous 2024-04-15 13:01:58 +03:00
parent e43327a86c
commit 5268051a0d
25 changed files with 416 additions and 215 deletions

View File

@ -7,32 +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>{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.TITLE' | translate}}</h4> <h4>{{'DESCRIPTION-TEMPLATE-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive"> <div class="row mt-3">
{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.IS-ACTIVE' | translate}} <div class="col-12">
</mat-slide-toggle> <section class="w-100">
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
<div> {{'DESCRIPTION-TEMPLATE-LISTING.FILTER.IS-ACTIVE' | translate}}
<mat-label>{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.STATUS' | translate}} </mat-slide-toggle>
</section>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.STATUS' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.statuses"> <mat-select multiple [(ngModel)]="internalFilters.statuses">
<mat-option *ngFor="let descriptionTemplateStatus of descriptionTemplateStatusEnumValues" [value]="descriptionTemplateStatus">{{enumUtils.toDescriptionTemplateTypeStatusString(descriptionTemplateStatus)}}</mat-option> <mat-option *ngFor="let descriptionTemplateStatus of descriptionTemplateStatusEnumValues" [value]="descriptionTemplateStatus">{{enumUtils.toDescriptionTemplateTypeStatusString(descriptionTemplateStatus)}}</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 mb-1 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()">
{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.CANCEL' | translate}} {{'DESCRIPTION-TEMPLATE-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();">
{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.APPLY-FILTERS' | translate}} {{'DESCRIPTION-TEMPLATE-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button> </button>
</div> </div>

View File

@ -22,4 +22,8 @@
// } // }
} }
::ng-deep .mdc-form-field {
label {
margin: 0;
}
}

View File

@ -7,32 +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>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.TITLE' | translate}}</h4> <h4>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.TITLE' | translate}}</h4>
</div>
<div class="col-auto">
<button color="accent" mat-button (click)="clearFilters()"> <button color="accent" mat-button (click)="clearFilters()">
{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.CLEAR-ALL-FILTERS' | translate}} {{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.CLEAR-ALL-FILTERS' | translate}}
</button> </button>
</div> </div>
</div>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive"> <div class="row mt-3">
{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.IS-ACTIVE' | translate}} <div class="col-12">
</mat-slide-toggle> <section class="w-100">
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
</section>
</div>
</div>
<div> <div class="row mt-3">
<mat-label>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.STATUS' | translate}} <div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.STATUS' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.statuses"> <mat-select multiple [(ngModel)]="internalFilters.statuses">
<mat-option *ngFor="let descriptionTemplateTypeStatus of descriptionTemplateTypeStatusEnumValues" [value]="descriptionTemplateTypeStatus">{{enumUtils.toDescriptionTemplateTypeStatusString(descriptionTemplateTypeStatus)}}</mat-option> <mat-option *ngFor="let descriptionTemplateTypeStatus of descriptionTemplateTypeStatusEnumValues" [value]="descriptionTemplateTypeStatus">{{enumUtils.toDescriptionTemplateTypeStatusString(descriptionTemplateTypeStatus)}}</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 mb-1 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()">
{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.CANCEL' | translate}} {{'DESCRIPTION-TEMPLATE-TYPE-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();">
{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}} {{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button> </button>
</div> </div>

View File

@ -22,4 +22,8 @@
// } // }
} }
::ng-deep .mdc-form-field {
label {
margin: 0;
}
}

View File

@ -39,7 +39,7 @@
</div> </div>
</div> </div>
<div class="row justify-content-end align-items-center mt-4 gap-1-rem"> <div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
<div class="col-auto"> <div class="col-auto">
<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()"> <button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
{{'DMP-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}} {{'DMP-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}

View File

@ -7,39 +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>{{'LOCK-LISTING.FILTER.TITLE' | translate}}</h4> <h4>{{'LOCK-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 class="mt-4"> <div class="row mt-3">
<div> <div class="col-12">
<mat-form-field class="col-12"> <mat-form-field class="w-100">
<mat-label>{{'LOCK-LISTING.FILTER.USERS' | translate}}</mat-label> <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 [(ngModel)]="internalFilters.userIds" [hidePlaceholder]="true" [separatorKeysCodes]="separatorKeysCodes" [configuration]="userService.multipleAutocompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</mat-form-field> </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>
</div>
<div class="d-flex justify-content-between mt-4 gap-1-rem"> <div class="row mt-3">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()"> <div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'LOCK-LISTING.FILTER.TARGET-TYPE' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.targetTypes">
<mat-option *ngFor="let targetType of lockTargetTypeEnumValues" [value]="targetType">{{enumUtils.toLockTargetTypeString(targetType)}}</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="row justify-content-between mt-4 mb-1 gap-1-rem">
<div class="col-auto">
<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
{{'LOCK-LISTING.FILTER.CANCEL' | translate}} {{'LOCK-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();">
{{'LOCK-LISTING.FILTER.APPLY-FILTERS' | translate}} {{'LOCK-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button> </button>
</div> </div>

View File

@ -17,5 +17,3 @@
// height: 1.2em; // height: 1.2em;
// } // }
} }

View File

@ -7,24 +7,36 @@
<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>{{'LANGUAGE-LISTING.FILTER.TITLE' | translate}}</h4> <h4>{{'LANGUAGE-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive"> <div class="row mt-3">
{{'LANGUAGE-LISTING.FILTER.IS-ACTIVE' | translate}} <div class="col-12">
</mat-slide-toggle> <section class="w-100">
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'LANGUAGE-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
</section>
</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 mb-1 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()">
{{'LANGUAGE-LISTING.FILTER.CANCEL' | translate}} {{'LANGUAGE-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();">
{{'LANGUAGE-LISTING.FILTER.APPLY-FILTERS' | translate}} {{'LANGUAGE-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button> </button>
</div> </div>

View File

@ -18,4 +18,8 @@
// } // }
} }
::ng-deep .mdc-form-field {
label {
margin: 0;
}
}

View File

@ -7,24 +7,36 @@
<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>{{'PREFILLING-SOURCE-LISTING.FILTER.TITLE' | translate}}</h4> <h4>{{'PREFILLING-SOURCE-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive"> <div class="row mt-3">
{{'PREFILLING-SOURCE-LISTING.FILTER.IS-ACTIVE' | translate}} <div class="col-12">
</mat-slide-toggle> <section class="w-100">
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'PREFILLING-SOURCE-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
</section>
</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 mb-1 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()">
{{'PREFILLING-SOURCE-LISTING.FILTER.CANCEL' | translate}} {{'PREFILLING-SOURCE-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();">
{{'PREFILLING-SOURCE-LISTING.FILTER.APPLY-FILTERS' | translate}} {{'PREFILLING-SOURCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button> </button>
</div> </div>

View File

@ -22,4 +22,8 @@
// } // }
} }
::ng-deep .mdc-form-field {
label {
margin: 0;
}
}

View File

@ -7,24 +7,36 @@
<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>{{'REFERENCE-TYPE-LISTING.FILTER.TITLE' | translate}}</h4> <h4>{{'REFERENCE-TYPE-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive"> <div class="row mt-3">
{{'REFERENCE-TYPE-LISTING.FILTER.IS-ACTIVE' | translate}} <div class="col-12">
</mat-slide-toggle> <section class="w-100">
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'REFERENCE-TYPE-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
</section>
</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 mb-1 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()">
{{'REFERENCE-TYPE-LISTING.FILTER.CANCEL' | translate}} {{'REFERENCE-TYPE-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();">
{{'REFERENCE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}} {{'REFERENCE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button> </button>
</div> </div>

View File

@ -22,4 +22,8 @@
// } // }
} }
::ng-deep .mdc-form-field {
label {
margin: 0;
}
}

View File

@ -7,39 +7,58 @@
<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>{{'REFERENCE-LISTING.FILTER.TITLE' | translate}}</h4> <h4>{{'REFERENCE-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive"> <div class="row mt-3">
{{'REFERENCE-LISTING.FILTER.IS-ACTIVE' | translate}} <div class="col-12">
</mat-slide-toggle> <section class="w-100">
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'REFERENCE-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
</section>
</div>
</div>
<div> <div class="row mt-3">
<mat-label>{{'REFERENCE-LISTING.FILTER.TYPE' | translate}} <div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'REFERENCE-LISTING.FILTER.TYPE' | translate}}</mat-label>
<app-single-auto-complete [(ngModel)]="internalFilters.typeIds" placeholder="{{'REFERENCE-LISTING.FILTER.TYPE' | translate}}" [configuration]="referenceTypeService.singleAutocompleteConfiguration"> <app-single-auto-complete [(ngModel)]="internalFilters.typeIds" placeholder="{{'REFERENCE-LISTING.FILTER.TYPE' | translate}}" [configuration]="referenceTypeService.singleAutocompleteConfiguration">
</app-single-auto-complete> </app-single-auto-complete>
</mat-label> </mat-form-field>
</div> </div>
</div>
<div> <div class="row mt-3">
<mat-label>{{'REFERENCE-LISTING.FILTER.SOURCE-TYPE' | translate}} <div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'REFERENCE-LISTING.FILTER.SOURCE-TYPE' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.sourceTypes"> <mat-select multiple [(ngModel)]="internalFilters.sourceTypes">
<mat-option *ngFor="let referenceSourceType of referenceSourceTypeEnumValues" [value]="referenceSourceType">{{enumUtils.toReferenceSourceTypeString(referenceSourceType)}}</mat-option> <mat-option *ngFor="let referenceSourceType of referenceSourceTypeEnumValues" [value]="referenceSourceType">{{enumUtils.toReferenceSourceTypeString(referenceSourceType)}}</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 mb-1 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()">
{{'REFERENCE-LISTING.FILTER.CANCEL' | translate}} {{'REFERENCE-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();">
{{'REFERENCE-LISTING.FILTER.APPLY-FILTERS' | translate}} {{'REFERENCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button> </button>
</div> </div>

View File

@ -18,4 +18,8 @@
// } // }
} }
::ng-deep .mdc-form-field {
label {
margin: 0;
}
}

View File

@ -7,24 +7,36 @@
<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>{{'TENANT-LISTING.FILTER.TITLE' | translate}}</h4> <h4>{{'TENANT-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive"> <div class="row">
{{'TENANT-LISTING.FILTER.IS-ACTIVE' | translate}} <div class="col-12">
</mat-slide-toggle> <section class="w-100">
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'TENANT-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
</section>
</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 mb-1 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()">
{{'TENANT-LISTING.FILTER.CANCEL' | translate}} {{'TENANT-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();">
{{'TENANT-LISTING.FILTER.APPLY-FILTERS' | translate}} {{'TENANT-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button> </button>
</div> </div>

View File

@ -22,4 +22,8 @@
// } // }
} }
::ng-deep .mdc-form-field {
label {
margin: 0;
}
}

View File

@ -7,32 +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>{{'USER-LISTING.FILTER.TITLE' | translate}}</h4> <h4>{{'USER-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive"> <div class="row mt-3">
{{'USER-LISTING.FILTER.IS-ACTIVE' | translate}} <div class="col-12">
</mat-slide-toggle> <section class="w-100">
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'USER-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
</section>
</div>
</div>
<div> <div class="row mt-3">
<mat-label>{{'USER-LISTING.FILTER.ROLES' | translate}} <div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'USER-LISTING.FILTER.ROLES' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.userRoleSubQuery.roles"> <mat-select multiple [(ngModel)]="internalFilters.userRoleSubQuery.roles">
<mat-option *ngFor="let appRole of appRoleEnumValues" [value]="appRole">{{enumUtils.toAppRoleString(appRole)}}</mat-option> <mat-option *ngFor="let appRole of appRoleEnumValues" [value]="appRole">{{enumUtils.toAppRoleString(appRole)}}</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 mb-1 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()">
{{'USER-LISTING.FILTER.CANCEL' | translate}} {{'USER-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();">
{{'USER-LISTING.FILTER.APPLY-FILTERS' | translate}} {{'USER-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button> </button>
</div> </div>

View File

@ -22,4 +22,8 @@
// } // }
} }
::ng-deep .mdc-form-field {
label {
margin: 0;
}
}

View File

@ -7,48 +7,69 @@
<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.NOTIFICATION-TEMPLATE-LISTING.FILTER.TITLE' | translate}}</h4> <h4>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive"> <div class="row mt-3">
{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.IS-ACTIVE' | translate}} <div class="col-12">
</mat-slide-toggle> <section class="w-100">
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
</section>
</div>
</div>
<div> <div class="row mt-3">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.NOTIFICATION-TYPE' | translate}} <div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.NOTIFICATION-TYPE' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.notificationTypes"> <mat-select multiple [(ngModel)]="internalFilters.notificationTypes">
<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> <div class="row mt-3">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.KIND' | translate}} <div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.KIND' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.kinds"> <mat-select multiple [(ngModel)]="internalFilters.kinds">
<mat-option *ngFor="let kind of notificationTemplateKindEnumValues" [value]="kind">{{enumUtils.toNotificationTemplateKindString(kind)}}</mat-option> <mat-option *ngFor="let kind of notificationTemplateKindEnumValues" [value]="kind">{{enumUtils.toNotificationTemplateKindString(kind)}}</mat-option>
</mat-select> </mat-select>
</mat-label> </mat-form-field>
</div> </div>
</div>
<div> <div class="row mt-3">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.CHANNEL' | translate}} <div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.CHANNEL' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.channels"> <mat-select multiple [(ngModel)]="internalFilters.channels">
<mat-option *ngFor="let channel of notificationTemplateChannelEnumValues" [value]="channel">{{enumUtils.toNotificationTemplateChannelString(channel)}}</mat-option> <mat-option *ngFor="let channel of notificationTemplateChannelEnumValues" [value]="channel">{{enumUtils.toNotificationTemplateChannelString(channel)}}</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 mb-1 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.NOTIFICATION-TEMPLATE-LISTING.FILTER.CANCEL' | translate}} {{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-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.NOTIFICATION-TEMPLATE-LISTING.FILTER.APPLY-FILTERS' | translate}} {{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button> </button>
</div> </div>

View File

@ -22,4 +22,8 @@
// } // }
} }
::ng-deep .mdc-form-field {
label {
margin: 0;
}
}

View File

@ -7,79 +7,101 @@
<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.NOTIFICATION-LISTING.FILTER.TITLE' | translate}}</h4> <h4>{{'NOTIFICATION-SERVICE.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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive"> <div class="row mt-3">
{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.IS-ACTIVE' | translate}} <div class="col-12">
</mat-slide-toggle> <section class="w-100">
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
<div class="mt-4"> {{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.IS-ACTIVE' | translate}}
<div> </mat-slide-toggle>
<mat-form-field class="col-12"> </section>
<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>
<mat-form-field class="col-12">
<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>
<mat-form-field class="col-12">
<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>
<mat-form-field class="col-12">
<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>
<mat-form-field class="col-12">
<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>
<mat-form-field class="col-12">
<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>
</div>
<div class="d-flex justify-content-between mt-4 gap-1-rem"> <div class="row mt-3">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()"> <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}} {{'NOTIFICATION-SERVICE.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.NOTIFICATION-LISTING.FILTER.APPLY-FILTERS' | translate}} {{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button> </button>
</div> </div>

View File

@ -1,11 +1,11 @@
// ::ng-deep.mat-mdc-menu-panel { ::ng-deep.mat-mdc-menu-panel {
// max-width: 100% !important; max-width: 100% !important;
// height: 100% !important; height: 100% !important;
// } }
// :host::ng-deep.mat-mdc-menu-content:not(:empty) { :host::ng-deep.mat-mdc-menu-content:not(:empty) {
// padding-top: 0 !important; padding-top: 0 !important;
// } }
.filter-button{ .filter-button{
@ -18,4 +18,8 @@
// } // }
} }
::ng-deep .mdc-form-field {
label {
margin: 0;
}
}

View File

@ -2,7 +2,7 @@ import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { NotificationFilter } from '@notification-service/core/query/notification.lookup'; import { NotificationFilter } from '@notification-service/core/query/notification.lookup';
import { UserService } from '@app/core/services/user/user.service'; import { UserService } from '@app/core/services/user/user.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { NotificationServiceEnumUtils } from '@notification-service/core/formatting/enum-utils.service';
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration'; import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
import { BaseComponent } from '@common/base/base.component'; import { BaseComponent } from '@common/base/base.component';
import { Guid } from '@common/types/guid'; import { Guid } from '@common/types/guid';
@ -37,7 +37,7 @@ export class NotificationListingFiltersComponent extends BaseComponent implement
protected appliedFilterCount: number = 0; protected appliedFilterCount: number = 0;
constructor( constructor(
public enumUtils: EnumUtils, public enumUtils: NotificationServiceEnumUtils,
private userService: UserService, private userService: UserService,
) { super(); } ) { super(); }

View File

@ -40,7 +40,7 @@
</div> </div>
</div> </div>
<div class="row justify-content-end align-items-center mt-4 gap-1-rem"> <div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
<div class="col-auto"> <div class="col-auto">
<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()"> <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}}