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 {
margin-left: inherit;
margin-right: inherit;
// margin-left: inherit;
// margin-right: inherit;
.not-loading {
display: none;

View File

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

View File

@ -1,5 +1,6 @@
<div class="row root">
<mat-card class="col-md-3 offset-md-4">
<!-- <div class="row root"> -->
<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>
<!-- <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-form-field>
</div>
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.OPTIONAL-TITLE' | translate}}</h4>
<div class="col-12">
<div class="row" *ngFor="let options of form.get('optional')['controls']; let i = index">
<div class="col-4">
<mat-form-field class="col-auto">
<div class="d-flex flex-column">
<ng-container *ngFor="let options of form.get('optional')['controls']; let i = index">
<div class="d-flex flex-wrap">
<div class="col-md-4">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
<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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="col-auto">
<div class="col-auto">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
<mat-select name="channel" [formControl]="options.get('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-form-field>
</div>
<div class="col-4">
<mat-form-field class="col">
<div class="col-auto">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
<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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
<div class="col-auto">
<button mat-icon-button (click)="removeSubjectOptionalItem(i)" [disabled]="form.disabled">
<mat-icon>remove</mat-icon>
</button>
</div>
</div>
</div>
<div class="row">
</ng-container>
<div class="col-auto">
<button mat-icon-button (click)="addOptionalItem()" [disabled]="form.disabled">
<mat-icon>add</mat-icon>
</button>
</div>
</div>
</div>
<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>
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.FORMATTING' | translate}}</h4>
<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-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
<input matInput [value]="item" [disabled] = "true">
@ -76,9 +78,9 @@
<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-form-field>
</div>
<div class="row" *ngFor="let item of form.get('optional')['controls']; let i = index">
<div *ngIf="item.valid">
</div>
<div class="d-flex flex-wrap" *ngFor="let item of form.get('optional')['controls']; let i = index">
<ng-container *ngIf="item.valid">
<mat-form-field class="col-md-4">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
<input matInput [value]="item.value.key" [disabled] = "true">
@ -88,5 +90,5 @@
<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-form-field>
</div>
</div>
</ng-container>
</div>

View File

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

View File

@ -20,6 +20,7 @@
{{'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>
@ -29,46 +30,52 @@
</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-option *ngFor="let type of notificationTypeEnumValues" [value]="type">{{enumUtils.toNotificationTypeString(type)}}</mat-option>
</mat-select>
</mat-label>
</mat-form-field>
</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-option *ngFor="let contactType of notificationContactTypeEnumValues" [value]="contactType">{{enumUtils.toNotificationContactTypeString(contactType)}}</mat-option>
</mat-select>
</mat-label>
</mat-form-field>
</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-option *ngFor="let notifyState of notificationNotifyStateEnumValues" [value]="notifyState">{{enumUtils.toNotificationNotifyStateString(notifyState)}}</mat-option>
</mat-select>
</mat-label>
</mat-form-field>
</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-option *ngFor="let trackingState of notificationTrackingStateEnumValues" [value]="trackingState">{{enumUtils.toNotificationTrackingStateString(trackingState)}}</mat-option>
</mat-select>
</mat-label>
</mat-form-field>
</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-option *ngFor="let trackingProcess of notificationTrackingProcessEnumValues" [value]="trackingProcess">{{enumUtils.toNotificationTrackingProcessString(trackingProcess)}}</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">
<div class="d-flex justify-content-between mt-4 gap-1-rem">
<button mat-stroked-button color="primary" (click)="filterMenuTrigger?.closeMenu()">
{{'NOTIFICATION-SERVICE.NOTIFICATION-LISTING.FILTER.CANCEL' | translate}}
</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 {
margin-top: 1.3rem;
margin-left: 1rem;

View File

@ -2052,7 +2052,8 @@
},
"SUCCESSFUL-DELETE": "Successful Delete",
"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": {
"FIELDS": {