MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
dmp-frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html
View File

@ -7,32 +7,47 @@
<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">
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'DESCRIPTION-TEMPLATE-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
<div>
<mat-label>{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.STATUS' | translate}}
<div class="row mt-3">
<div class="col-12">
<section class="w-100">
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'DESCRIPTION-TEMPLATE-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>{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.STATUS' | translate}}</mat-label>
<mat-select multiple [(ngModel)]="internalFilters.statuses">
<mat-option *ngFor="let descriptionTemplateStatus of descriptionTemplateStatusEnumValues" [value]="descriptionTemplateStatus">{{enumUtils.toDescriptionTemplateTypeStatusString(descriptionTemplateStatus)}}</mat-option>
</mat-select>
</mat-label>
</mat-form-field>
</div>
</div>
<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
<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()">
{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.CANCEL' | translate}}
</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}}
</button>
</div>

6
dmp-frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.scss
View File

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

39
dmp-frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html
View File

@ -7,32 +7,47 @@
<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">
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.TITLE' | translate}}</h4>
</div>
<div class="col-auto">
<button color="accent" mat-button (click)="clearFilters()">
{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.CLEAR-ALL-FILTERS' | translate}}
</button>
</div>
</div>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
<div class="row mt-3">
<div class="col-12">
<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>
<mat-label>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.STATUS' | translate}}
<div class="row mt-3">
<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-option *ngFor="let descriptionTemplateTypeStatus of descriptionTemplateTypeStatusEnumValues" [value]="descriptionTemplateTypeStatus">{{enumUtils.toDescriptionTemplateTypeStatusString(descriptionTemplateTypeStatus)}}</mat-option>
</mat-select>
</mat-label>
</mat-form-field>
</div>
</div>
<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
<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()">
{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.CANCEL' | translate}}
</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}}
</button>
</div>

6
dmp-frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.scss
View File

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

2
dmp-frontend/src/app/ui/admin/dmp-blueprint/listing/filters/dmp-blueprint-listing-filters.component.html
View File

@ -39,7 +39,7 @@
</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">
<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
{{'DMP-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}

54
dmp-frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html
View File

@ -7,39 +7,47 @@
<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">
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'LOCK-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="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 class="row mt-3">
<div class="col-12">
<mat-form-field class="w-100">
<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>
<div class="d-flex justify-content-between mt-4 gap-1-rem">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
<div class="row mt-3">
<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}}
</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}}
</button>
</div>

2
dmp-frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.scss
View File

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

30
dmp-frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html
View File

@ -7,24 +7,36 @@
<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">
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'LANGUAGE-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'LANGUAGE-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
<div class="row mt-3">
<div class="col-12">
<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">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
<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()">
{{'LANGUAGE-LISTING.FILTER.CANCEL' | translate}}
</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}}
</button>
</div>

6
dmp-frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.scss
View File

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

30
dmp-frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html
View File

@ -7,24 +7,36 @@
<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">
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'PREFILLING-SOURCE-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'PREFILLING-SOURCE-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
<div class="row mt-3">
<div class="col-12">
<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">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
<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()">
{{'PREFILLING-SOURCE-LISTING.FILTER.CANCEL' | translate}}
</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}}
</button>
</div>

6
dmp-frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.scss
View File

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

30
dmp-frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html
View File

@ -7,24 +7,36 @@
<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">
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'REFERENCE-TYPE-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'REFERENCE-TYPE-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
<div class="row mt-3">
<div class="col-12">
<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">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
<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()">
{{'REFERENCE-TYPE-LISTING.FILTER.CANCEL' | translate}}
</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}}
</button>
</div>

6
dmp-frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.scss
View File

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

49
dmp-frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html
View File

@ -7,39 +7,58 @@
<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">
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'REFERENCE-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'REFERENCE-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
<div class="row mt-3">
<div class="col-12">
<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>
<mat-label>{{'REFERENCE-LISTING.FILTER.TYPE' | translate}}
<div class="row mt-3">
<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>
</mat-label>
</mat-form-field>
</div>
</div>
<div>
<mat-label>{{'REFERENCE-LISTING.FILTER.SOURCE-TYPE' | translate}}
<div class="row mt-3">
<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-option *ngFor="let referenceSourceType of referenceSourceTypeEnumValues" [value]="referenceSourceType">{{enumUtils.toReferenceSourceTypeString(referenceSourceType)}}</mat-option>
</mat-select>
</mat-label>
</mat-form-field>
</div>
</div>
<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
<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()">
{{'REFERENCE-LISTING.FILTER.CANCEL' | translate}}
</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}}
</button>
</div>

6
dmp-frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.scss
View File

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

30
dmp-frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html
View File

@ -7,24 +7,36 @@
<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">
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'TENANT-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'TENANT-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
<div class="row">
<div class="col-12">
<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">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
<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()">
{{'TENANT-LISTING.FILTER.CANCEL' | translate}}
</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}}
</button>
</div>

6
dmp-frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.scss
View File

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

39
dmp-frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html
View File

@ -7,32 +7,47 @@
<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">
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'USER-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'USER-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
<div class="row mt-3">
<div class="col-12">
<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>
<mat-label>{{'USER-LISTING.FILTER.ROLES' | translate}}
<div class="row mt-3">
<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-option *ngFor="let appRole of appRoleEnumValues" [value]="appRole">{{enumUtils.toAppRoleString(appRole)}}</mat-option>
</mat-select>
</mat-label>
</mat-form-field>
</div>
</div>
<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
<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()">
{{'USER-LISTING.FILTER.CANCEL' | translate}}
</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}}
</button>
</div>

6
dmp-frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.scss
View File

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

57
dmp-frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.html
View File

@ -7,48 +7,69 @@
<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">
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle>
<div class="row mt-3">
<div class="col-12">
<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>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.NOTIFICATION-TYPE' | translate}}
<div class="row mt-3">
<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-option *ngFor="let type of notificationTypeEnumValues" [value]="type">{{enumUtils.toNotificationTypeString(type)}}</mat-option>
</mat-select>
</mat-label>
</mat-form-field>
</div>
</div>
<div>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.KIND' | translate}}
<div class="row mt-3">
<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-option *ngFor="let kind of notificationTemplateKindEnumValues" [value]="kind">{{enumUtils.toNotificationTemplateKindString(kind)}}</mat-option>
</mat-select>
</mat-label>
</mat-form-field>
</div>
</div>
<div>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.FILTER.CHANNEL' | translate}}
<div class="row mt-3">
<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-option *ngFor="let channel of notificationTemplateChannelEnumValues" [value]="channel">{{enumUtils.toNotificationTemplateChannelString(channel)}}</mat-option>
</mat-select>
</mat-label>
</mat-form-field>
</div>
</div>
<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
<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-TEMPLATE-LISTING.FILTER.CANCEL' | translate}}
</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}}
</button>
</div>

6
dmp-frontend/src/notification-service/ui/admin/notification-template/listing/filters/notification-template-listing-filters.component.scss
View File

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

148
dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.html
View File

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

20
dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.scss
View File

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

4
dmp-frontend/src/notification-service/ui/admin/notification/filters/notification-listing-filters.component.ts
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 { NotificationFilter } from '@notification-service/core/query/notification.lookup';
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 { BaseComponent } from '@common/base/base.component';
import { Guid } from '@common/types/guid';
@ -37,7 +37,7 @@ export class NotificationListingFiltersComponent extends BaseComponent implement
protected appliedFilterCount: number = 0;
constructor(
public enumUtils: EnumUtils,
public enumUtils: NotificationServiceEnumUtils,
private userService: UserService,
) { super(); }

2
dmp-frontend/src/notification-service/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html
View File

@ -40,7 +40,7 @@
</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">
<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.CANCEL' | translate}}