minor ui fixes

This commit is contained in:
Sofia Papacharalampous 2024-04-01 16:04:33 +03:00
parent cc68ed5188
commit 34fe15eb2f
5 changed files with 64 additions and 55 deletions

View File

@ -29,7 +29,7 @@
<mat-card-title *ngIf="isNew">{{'LANGUAGE-EDITOR.NEW' | translate}}</mat-card-title> <mat-card-title *ngIf="isNew">{{'LANGUAGE-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-3">
<div class="col-4" *ngIf="isNew"> <div class="col-4" *ngIf="isNew">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'LANGUAGE-EDITOR.FIELDS.CODE' | translate}}</mat-label> <mat-label>{{'LANGUAGE-EDITOR.FIELDS.CODE' | translate}}</mat-label>

View File

@ -42,7 +42,7 @@
<mat-error *ngIf="formGroup.get('notificationType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('notificationType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4"> <div class="col-12 col-lg-4">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.LANGUAGE' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.LANGUAGE' | translate}}</mat-label>
<mat-select [formControl]="formGroup.get('languageId')" name="language" required> <mat-select [formControl]="formGroup.get('languageId')" name="language" required>
@ -54,7 +54,7 @@
<mat-error *ngIf="formGroup.get('languageId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('languageId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4"> <div class="col-12 col-lg-4">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KIND' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KIND' | translate}}</mat-label>
<mat-select name="kind" [formControl]="formGroup.get('kind')" required> <mat-select name="kind" [formControl]="formGroup.get('kind')" required>
@ -66,7 +66,7 @@
<mat-error *ngIf="formGroup.get('kind').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('kind').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4"> <div class="col-12 col-lg-4">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CHANNEL' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CHANNEL' | translate}}</mat-label>
<mat-select name="channel" [formControl]="formGroup.get('channel')" required> <mat-select name="channel" [formControl]="formGroup.get('channel')" required>

View File

@ -1,4 +1,5 @@
<form class="row user-role-editor" *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()"> <form class="row user-role-editor" *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
<div class="row align-items-center">
<div *ngIf="!this.nowEditing"class="roles col"> <div *ngIf="!this.nowEditing"class="roles col">
<ng-container *ngFor="let role of this.formGroup.get('roles').value"> <ng-container *ngFor="let role of this.formGroup.get('roles').value">
<div> <div>
@ -8,20 +9,24 @@
</div> </div>
</ng-container> </ng-container>
</div> </div>
<mat-form-field *ngIf="this.nowEditing" class="select-role roles-width-180 col-auto"> <div class="col-8">
<mat-select formControlName="roles" multiple required> <mat-form-field *ngIf="this.nowEditing" class="w-100">
<ng-container *ngFor="let role of appRoleEnumValues"> <mat-select formControlName="roles" multiple required>
<mat-option [value]="role">{{enumUtils.toAppRoleString(role)}}</mat-option> <ng-container *ngFor="let role of appRoleEnumValues">
</ng-container> <mat-option [value]="role">{{enumUtils.toAppRoleString(role)}}</mat-option>
</mat-select> </ng-container>
<mat-error *ngIf="formGroup.get('roles').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> </mat-select>
</mat-form-field> <mat-error *ngIf="formGroup.get('roles').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<button *ngIf="!this.nowEditing" class="col-auto" mat-icon-button color="primary" type="button" (click)="editItem()"> <button *ngIf="!this.nowEditing" class="col" mat-icon-button color="primary" type="button" (click)="editItem()">
<mat-icon class="mat-24" matTooltip="{{'USER-LISTING.ACTIONS.EDIT' | translate}}">edit</mat-icon> <mat-icon class="mat-24" matTooltip="{{'USER-LISTING.ACTIONS.EDIT' | translate}}">edit</mat-icon>
<span class="row-action"></span> <span class="row-action"></span>
</button> </button>
<button *ngIf="this.nowEditing" class="col-auto save-button" mat-icon-button color="primary" type="submit"> <button *ngIf="this.nowEditing" class="col-auto save-button" mat-icon-button color="primary" type="submit">
<mat-icon class="mat-24" matTooltip="{{'USER-LISTING.ACTIONS.SAVE' | translate}}">save</mat-icon> <mat-icon class="mat-24" matTooltip="{{'USER-LISTING.ACTIONS.SAVE' | translate}}">save</mat-icon>
</button> </button>
</div>
</form> </form>

View File

@ -4,7 +4,7 @@
<!-- Description Header --> <!-- Description Header -->
<div class="fixed-editor-header"> <div class="fixed-editor-header">
<div class="card description-editor-header"> <div class="card description-editor-header">
<div class="col"> <div class="col-12">
<div class="row"> <div class="row">
<div class="col info"> <div class="col info">
<ng-container *ngIf="!viewOnly else viewOnlyTemplate"> <ng-container *ngIf="!viewOnly else viewOnlyTemplate">
@ -25,49 +25,53 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="col-auto">
<div class="col-auto d-flex align-items-center"> <div class="row h-100">
<button *ngIf="formGroup.get('id').value" [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" mat-raised-button class="description-export-btn" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'DATASET-EDITOR.ACTIONS.DISABLED-EXPORT' | translate">
{{ 'DESCRIPTION-EDITOR.ACTIONS.EXPORT' | translate }} <div class="col-auto d-flex align-items-center">
<mat-icon [disabled]="isDirty()" style="width: 14px;">expand_more</mat-icon> <button *ngIf="formGroup.get('id').value" [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" mat-raised-button class="description-export-btn" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'DATASET-EDITOR.ACTIONS.DISABLED-EXPORT' | translate">
</button> {{ 'DESCRIPTION-EDITOR.ACTIONS.EXPORT' | translate }}
<mat-menu #exportMenu="matMenu" xPosition="before"> <mat-icon [disabled]="isDirty()" style="width: 14px;">expand_more</mat-icon>
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDescription(formGroup.get('id').value, fileTransformer.repositoryId, fileTransformer.format)">
<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer?.format?.toUpperCase() | translate}}</span>
</button> </button>
</mat-menu> <mat-menu #exportMenu="matMenu" xPosition="before">
</div> <button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDescription(formGroup.get('id').value, fileTransformer.repositoryId, fileTransformer.format)">
<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer?.format?.toUpperCase() | translate}}</span>
</button>
</mat-menu>
</div>
<mat-divider *ngIf="formGroup.get('id').value && (!viewOnly || (!isLocked && !viewOnly) || isLocked || (hasReversableStatus() && !isLocked))" [vertical]="true" class="ml-2 mr-2"></mat-divider>
<div *ngIf="isDirty() && !viewOnly" class="col-auto d-flex align-items-center pr-0"> <mat-divider *ngIf="formGroup.get('id').value && (!viewOnly || (!isLocked && !viewOnly) || isLocked || (hasReversableStatus() && !isLocked))" [vertical]="true" class="ml-2 mr-2"></mat-divider>
<button [disabled]="saving" type="button" mat-raised-button class="description-discard-btn" (click)="discardChanges()">
{{'DESCRIPTION-EDITOR.ACTIONS.DISCARD' | translate}} <div *ngIf="isDirty() && !viewOnly" class="col-auto d-flex align-items-center pr-0">
</button> <button [disabled]="saving" type="button" mat-raised-button class="description-discard-btn" (click)="discardChanges()">
</div> {{'DESCRIPTION-EDITOR.ACTIONS.DISCARD' | translate}}
<div class="col-auto d-flex align-items-center"> </button>
<button [disabled]="saving" *ngIf="!isLocked && !viewOnly && hasReversableStatus() == false" mat-raised-button class="description-save-btn mr-2" type="button"> </div>
<span class="d-flex flex-row row"> <div class="col-auto d-flex align-items-center">
<span (click)="!saving?formSubmit():null" class="col">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE' | translate }}</span> <button [disabled]="saving" *ngIf="!isLocked && !viewOnly && hasReversableStatus() == false" mat-raised-button class="description-save-btn mr-2" type="button">
<mat-divider [vertical]="true"></mat-divider> <span class="d-flex flex-row row">
<span *ngIf="!saving" class="align-items-center justify-content-center col d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menu"> <span (click)="!saving?formSubmit():null" class="col">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE' | translate }}</span>
<mat-icon>expand_more</mat-icon> <mat-divider [vertical]="true"></mat-divider>
<span *ngIf="!saving" class="align-items-center justify-content-center col d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menu">
<mat-icon>expand_more</mat-icon>
</span>
<span *ngIf="saving" class="align-items-center justify-content-center col d-flex">
<mat-icon>expand_more</mat-icon>
</span>
</span> </span>
<span *ngIf="saving" class="align-items-center justify-content-center col d-flex"> </button>
<mat-icon>expand_more</mat-icon> <mat-menu #menu="matMenu">
</span> <button [disabled]="saving" mat-menu-item (click)="save(saveAnd.close)" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
</span> <button [disabled]="saving" mat-menu-item (click)="save(saveAnd.addNew)" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-ADD-NEW' | translate }}</button>
</button> <button [disabled]="saving" mat-menu-item (click)="save()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
<mat-menu #menu="matMenu"> </mat-menu>
<button [disabled]="saving" mat-menu-item (click)="save(saveAnd.close)" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
<button [disabled]="saving" mat-menu-item (click)="save(saveAnd.addNew)" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-ADD-NEW' | translate }}</button>
<button [disabled]="saving" mat-menu-item (click)="save()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
</mat-menu>
<button [disabled]="saving" *ngIf="!isLocked && !viewOnly && hasReversableStatus() == false" mat-raised-button class="description-save-btn mr-2" type="button" (click)="finalize()">{{ 'DESCRIPTION-EDITOR.ACTIONS.FINALIZE' | translate }}</button> <button [disabled]="saving" *ngIf="!isLocked && !viewOnly && hasReversableStatus() == false" mat-raised-button class="description-save-btn mr-2" type="button" (click)="finalize()">{{ 'DESCRIPTION-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
<button [disabled]="saving" *ngIf="isLocked" mat-raised-button disabled class="description-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button> <button [disabled]="saving" *ngIf="isLocked" mat-raised-button disabled class="description-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button>
<button [disabled]="saving" *ngIf="hasReversableStatus() && !isLocked" mat-raised-button class="description-save-btn mr-2" (click)="reverse()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.REVERSE' | translate }}</button> <button [disabled]="saving" *ngIf="hasReversableStatus() && !isLocked" mat-raised-button class="description-save-btn mr-2" (click)="reverse()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.REVERSE' | translate }}</button>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -165,8 +165,8 @@
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Contact"> <div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Contact">
<div cdkDropList class="col-12" (cdkDropListDropped)="dropContacts($event)"> <div cdkDropList class="col-12" (cdkDropListDropped)="dropContacts($event)">
<div *ngFor="let contact of formGroup.get('properties').get('contacts').controls; let contactIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onContactHover(contactIndex)" (mouseleave)="clearHoveredContact()"> <div *ngFor="let contact of formGroup.get('properties').get('contacts').controls; let contactIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onContactHover(contactIndex)" (mouseleave)="clearHoveredContact()">
<div class="col-12 col-xl-auto pb-1"> <div class="col-12 col-xl-auto pr-0">
<span *ngIf="!isContactSelected(contactIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.435rem 0 0.435rem;">{{contactIndex + 1}}</span> <span *ngIf="!isContactSelected(contactIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.15rem 0.435rem 0.3rem 0.435rem;">{{contactIndex + 1}}</span>
<mat-icon *ngIf="isContactSelected(contactIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon> <mat-icon *ngIf="isContactSelected(contactIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
</div> </div>
<div class="col-12 col-xl-auto"> <div class="col-12 col-xl-auto">
@ -176,7 +176,7 @@
</div> </div>
</mat-button-toggle-group> </mat-button-toggle-group>
</div> </div>
<div class="col pt-4"> <div class="col pt-3">
<div class="row"> <div class="row">
<div class="col d-flex" *ngIf="contact.get('contactType').value == dmpContactTypeEnum.Internal"> <div class="col d-flex" *ngIf="contact.get('contactType').value == dmpContactTypeEnum.Internal">
<mat-form-field class="w-100"> <mat-form-field class="w-100">