styling changes
This commit is contained in:
parent
99a870ff84
commit
cf1cc0a4fb
|
@ -1,6 +1,6 @@
|
|||
.multiple-auto-complete {
|
||||
margin-left: inherit;
|
||||
margin-right: inherit;
|
||||
// margin-left: inherit;
|
||||
// margin-right: inherit;
|
||||
|
||||
.not-loading {
|
||||
display: none;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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> -->
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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": {
|
||||
|
|
Loading…
Reference in New Issue