styling changes

This commit is contained in:
Sofia Papacharalampous 2024-03-13 17:26:47 +02:00
parent 99a870ff84
commit cf1cc0a4fb
8 changed files with 375 additions and 356 deletions

View File

@ -1,6 +1,6 @@
.multiple-auto-complete { .multiple-auto-complete {
margin-left: inherit; // margin-left: inherit;
margin-right: inherit; // margin-right: inherit;
.not-loading { .not-loading {
display: none; display: none;

View File

@ -10,22 +10,22 @@
<div class="p-3" (click)="$event?.stopPropagation?.()"> <div class="p-3" (click)="$event?.stopPropagation?.()">
<div class="search-listing-filters-container"> <div class="search-listing-filters-container">
<div class="d-flex align-items-center justify-content-between"> <div class="d-flex align-items-center justify-content-between">
<h4>{{'TENANT-LISTING.FILTER.TITLE' | translate}}</h4> <h4>{{'LANGUAGE-LISTING.FILTER.TITLE' | translate}}</h4>
<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>
<mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive"> <mat-slide-toggle labelPosition="before" [(ngModel)]="internalFilters.isActive">
{{'TENANT-LISTING.FILTER.IS-ACTIVE' | translate}} {{'LANGUAGE-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle> </mat-slide-toggle>
<div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem"> <div class="d-flex justify-content-end align-items-center mt-4 gap-1-rem">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()"> <button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
{{'TENANT-LISTING.FILTER.CANCEL' | translate}} {{'LANGUAGE-LISTING.FILTER.CANCEL' | translate}}
</button> </button>
<button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();"> <button mat-raised-button color="primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
{{'TENANT-LISTING.FILTER.APPLY-FILTERS' | translate}} {{'LANGUAGE-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button> </button>
</div> </div>
</div> </div>

View File

@ -1,5 +1,6 @@
<div class="row root"> <!-- <div class="row root"> -->
<mat-card class="col-md-3 offset-md-4"> <div class="d-flex justify-content-center">
<mat-card class="p-4 mt-4">
<div style="color: red;">Warning: Danger zone. Irreversible actions!</div> <div style="color: red;">Warning: Danger zone. Irreversible actions!</div>
<div> <div>
<!-- <button mat-raised-button color="primary" (click)="migrateSemantics($event)" class="lightblue-btn button">Migrate semantics</button> --> <!-- <button mat-raised-button color="primary" (click)="migrateSemantics($event)" class="lightblue-btn button">Migrate semantics</button> -->

View File

@ -20,19 +20,21 @@
<mat-error *ngIf="form.get('mandatory').hasError('backendError')">{{form.get('mandatory').getError('backendError').message}}</mat-error> <mat-error *ngIf="form.get('mandatory').hasError('backendError')">{{form.get('mandatory').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.OPTIONAL-TITLE' | translate}}</h4> <h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.OPTIONAL-TITLE' | translate}}</h4>
<div class="col-12"> <div class="d-flex flex-column">
<div class="row" *ngFor="let options of form.get('optional')['controls']; let i = index"> <ng-container *ngFor="let options of form.get('optional')['controls']; let i = index">
<div class="col-4"> <div class="d-flex flex-wrap">
<mat-form-field class="col-auto"> <div class="col-md-4">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
<input matInput [formControl]="options.get('key')"> <input matInput [formControl]="options.get('key')">
<mat-error *ngIf="options.get('key').hasError('backendError')">{{options.get('key').getError('backendError').message}}</mat-error> <mat-error *ngIf="options.get('key').hasError('backendError')">{{options.get('key').getError('backendError').message}}</mat-error>
<mat-error *ngIf="options.get('key').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="options.get('key').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4"> <div class="col-auto">
<mat-form-field class="col-auto"> <mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
<mat-select name="channel" [formControl]="options.get('type')"> <mat-select name="channel" [formControl]="options.get('type')">
<mat-option *ngFor="let type of notificationDataTypeEnum" [value]="type"> <mat-option *ngFor="let type of notificationDataTypeEnum" [value]="type">
@ -43,30 +45,30 @@
<mat-error *ngIf="options.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="options.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4"> <div class="col-auto">
<mat-form-field class="col"> <mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
<input matInput [formControl]="options.get('value')"> <input matInput [formControl]="options.get('value')">
<mat-error *ngIf="options.get('value').hasError('backendError')">{{options.get('value').getError('backendError').message}}</mat-error> <mat-error *ngIf="options.get('value').hasError('backendError')">{{options.get('value').getError('backendError').message}}</mat-error>
<mat-error *ngIf="options.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="options.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div>
</div>
<div class="col-auto"> <div class="col-auto">
<button mat-icon-button (click)="removeSubjectOptionalItem(i)" [disabled]="form.disabled"> <button mat-icon-button (click)="removeSubjectOptionalItem(i)" [disabled]="form.disabled">
<mat-icon>remove</mat-icon> <mat-icon>remove</mat-icon>
</button> </button>
</div> </div>
</div> </ng-container>
</div>
<div class="row">
<div class="col-auto"> <div class="col-auto">
<button mat-icon-button (click)="addOptionalItem()" [disabled]="form.disabled"> <button mat-icon-button (click)="addOptionalItem()" [disabled]="form.disabled">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
</button> </button>
</div> </div>
</div> </div>
</div>
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.FORMATTING' | translate}}</h4> <h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.FORMATTING' | translate}}</h4>
<div class="row" *ngFor="let item of form.get('mandatory').value; let i = index"> <div class="d-flex flex-wrap" *ngFor="let item of form.get('mandatory').value; let i = index">
<mat-form-field class="col-md-4"> <mat-form-field class="col-md-4">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
<input matInput [value]="item" [disabled] = "true"> <input matInput [value]="item" [disabled] = "true">
@ -76,9 +78,9 @@
<input matInput [value] ="formatting[item]" (change)="formattingValueChange($event, item)"> <input matInput [value] ="formatting[item]" (change)="formattingValueChange($event, item)">
<mat-error *ngIf="form.get('formatting').hasError('backendError')">{{form.get('formatting').getError('backendError').message}}</mat-error> <mat-error *ngIf="form.get('formatting').hasError('backendError')">{{form.get('formatting').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="row" *ngFor="let item of form.get('optional')['controls']; let i = index"> <div class="d-flex flex-wrap" *ngFor="let item of form.get('optional')['controls']; let i = index">
<div *ngIf="item.valid"> <ng-container *ngIf="item.valid">
<mat-form-field class="col-md-4"> <mat-form-field class="col-md-4">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
<input matInput [value]="item.value.key" [disabled] = "true"> <input matInput [value]="item.value.key" [disabled] = "true">
@ -88,5 +90,5 @@
<input matInput [value]="formatting[item]" (change)="formattingValueChange($event, item)"> <input matInput [value]="formatting[item]" (change)="formattingValueChange($event, item)">
<mat-error *ngIf="form.get('formatting').hasError('backendError')">{{form.get('formatting').getError('backendError').message}}</mat-error> <mat-error *ngIf="form.get('formatting').hasError('backendError')">{{form.get('formatting').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </ng-container>
</div> </div>

View File

@ -1,6 +1,5 @@
<div class="notification-template-editor"> <div class="notification-template-editor">
<div class="col-md-10 offset-md-1 colums-gapped"> <div class="col-md-10 offset-md-1 colums-gapped">
<div class="row align-items-center mb-4" *ngIf="formGroup"> <div class="row align-items-center mb-4" *ngIf="formGroup">
<div class="col-auto"> <div class="col-auto">
<h3 *ngIf="isNew && !isClone">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.NEW' | translate}}</h3> <h3 *ngIf="isNew && !isClone">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.NEW' | translate}}</h3>
@ -23,15 +22,15 @@
</div> </div>
</div> </div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()"> <form *ngIf="formGroup" (ngSubmit)="formSubmit()" >
<mat-card appearance="outlined"> <mat-card appearance="outlined">
<mat-card-header> <mat-card-header>
<mat-card-title *ngIf="isNew">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.NEW' | translate}}</mat-card-title> <mat-card-title *ngIf="isNew">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.NEW' | translate}}</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div class="row"> <div class="row mt-4">
<div class="col-4"> <div class="col-6">
<mat-form-field class="w-100"> <mat-form-field class="col-md-12">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.NOTIFICATION-TYPE' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.NOTIFICATION-TYPE' | translate}}</mat-label>
<mat-select [formControl]="formGroup.get('notificationType')" name="notificationType" required> <mat-select [formControl]="formGroup.get('notificationType')" name="notificationType" required>
<mat-option *ngFor="let type of notificationTypeEnum" [value]="type"> <mat-option *ngFor="let type of notificationTypeEnum" [value]="type">
@ -101,7 +100,7 @@
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-FIELD-OPTIONS' | translate}} <h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-FIELD-OPTIONS' | translate}}
<mat-checkbox [checked]="subjectFieldOptionsEnabled" (change)="subjectFieldOptionsSelectionChanged($event)"></mat-checkbox> <mat-checkbox [checked]="subjectFieldOptionsEnabled" (change)="subjectFieldOptionsSelectionChanged($event)"></mat-checkbox>
</h4> </h4>
<div *ngIf="subjectFieldOptionsEnabled == true"> <ng-container *ngIf="subjectFieldOptionsEnabled == true">
<app-notification-template-field-options-component <app-notification-template-field-options-component
[form]="formGroup.get('value').get('subjectFieldOptions')" [form]="formGroup.get('value').get('subjectFieldOptions')"
[validationErrorModel]="editorModel.validationErrorModel" [validationErrorModel]="editorModel.validationErrorModel"
@ -109,7 +108,7 @@
[mandatoryFields]="subjectMandatoryFields" [mandatoryFields]="subjectMandatoryFields"
[formatting]="subjectFormatting"> [formatting]="subjectFormatting">
</app-notification-template-field-options-component> </app-notification-template-field-options-component>
</div> </ng-container>
<!-- Body --> <!-- Body -->
<div> <div>

View File

@ -20,6 +20,7 @@
{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.IS-ACTIVE' | translate}} {{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.IS-ACTIVE' | translate}}
</mat-slide-toggle> </mat-slide-toggle>
<div class="mt-4">
<div> <div>
<mat-form-field class="col-12"> <mat-form-field class="col-12">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.USERS' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.USERS' | translate}}</mat-label>
@ -29,46 +30,52 @@
</div> </div>
<div> <div>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.NOTIFICATION-TYPE' | translate}} <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-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.NOTIFICATION-LISTING.FILTER.CONTACT-TYPE' | translate}} <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-select multiple [(ngModel)]="internalFilters.contactType">
<mat-option *ngFor="let contactType of notificationContactTypeEnumValues" [value]="contactType">{{enumUtils.toNotificationContactTypeString(contactType)}}</mat-option> <mat-option *ngFor="let contactType of notificationContactTypeEnumValues" [value]="contactType">{{enumUtils.toNotificationContactTypeString(contactType)}}</mat-option>
</mat-select> </mat-select>
</mat-label> </mat-form-field>
</div> </div>
<div> <div>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.NOTIFY-STATE' | translate}} <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-select multiple [(ngModel)]="internalFilters.notifyState">
<mat-option *ngFor="let notifyState of notificationNotifyStateEnumValues" [value]="notifyState">{{enumUtils.toNotificationNotifyStateString(notifyState)}}</mat-option> <mat-option *ngFor="let notifyState of notificationNotifyStateEnumValues" [value]="notifyState">{{enumUtils.toNotificationNotifyStateString(notifyState)}}</mat-option>
</mat-select> </mat-select>
</mat-label> </mat-form-field>
</div> </div>
<div> <div>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.TRACKING-STATE' | translate}} <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-select multiple [(ngModel)]="internalFilters.trackingState">
<mat-option *ngFor="let trackingState of notificationTrackingStateEnumValues" [value]="trackingState">{{enumUtils.toNotificationTrackingStateString(trackingState)}}</mat-option> <mat-option *ngFor="let trackingState of notificationTrackingStateEnumValues" [value]="trackingState">{{enumUtils.toNotificationTrackingStateString(trackingState)}}</mat-option>
</mat-select> </mat-select>
</mat-label> </mat-form-field>
</div> </div>
<div> <div>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.TRACKING-PROCESS' | translate}} <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-select multiple [(ngModel)]="internalFilters.trackingProcess">
<mat-option *ngFor="let trackingProcess of notificationTrackingProcessEnumValues" [value]="trackingProcess">{{enumUtils.toNotificationTrackingProcessString(trackingProcess)}}</mat-option> <mat-option *ngFor="let trackingProcess of notificationTrackingProcessEnumValues" [value]="trackingProcess">{{enumUtils.toNotificationTrackingProcessString(trackingProcess)}}</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="d-flex justify-content-between mt-4 gap-1-rem">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()"> <button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.CANCEL' | translate}} {{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.CANCEL' | translate}}
</button> </button>

View File

@ -1,3 +1,12 @@
::ng-deep datatable-header-cell {
width: fit-content !important;
padding: 0.9rem 0.7rem !important;
}
::ng-deep .datatable-header-cell-template-wrap {
width: fit-content !important;
}
.notification-listing { .notification-listing {
margin-top: 1.3rem; margin-top: 1.3rem;
margin-left: 1rem; margin-left: 1rem;

View File

@ -2052,7 +2052,8 @@
}, },
"SUCCESSFUL-DELETE": "Successful Delete", "SUCCESSFUL-DELETE": "Successful Delete",
"UNSUCCESSFUL-DELETE": "This item could not be deleted.", "UNSUCCESSFUL-DELETE": "This item could not be deleted.",
"TEMPLATE-UPLOAD-SUCCESS": "Template successfully uploaded" "TEMPLATE-UPLOAD-SUCCESS": "Template successfully uploaded",
"MESSAGES": "Template successfully uploaded"
}, },
"DYNAMIC-FORM": { "DYNAMIC-FORM": {
"FIELDS": { "FIELDS": {