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

styling changes on reference-type-editor dialog

This commit is contained in:
Sofia Papacharalampous 2024-05-30 13:48:02 +03:00
parent f0d0fc280d
commit 998ef45541
4 changed files with 52 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html
View File

@ -9,23 +9,51 @@
</div> </div>
</div> </div>
</div> </div>
<mat-dialog-content class="pt-2"> <mat-dialog-content class="pt-4">
<div class="row" *ngFor="let field of systemFields;"> <div class="row">
<div class="col-12" *ngIf="systemFields.length > 0">
<h5>{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.SYSTEM-INFORMATION' | translate}}</h5>
</div>
<div class="col-12 col-md-6">
<mat-form-field class="w-100 form-input" *ngIf="formGroup.get('reference_id')">
<mat-label>{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.REFERENCE-ID' | translate}}</mat-label>
<input matInput type="text" [name]="'reference_id'" [formControl]="formGroup.get('reference_id')">
<i matSuffix class="fa fa-spinner fa-spin" *ngIf="'reference_id' == systemFields[0] && formGroup.get('reference_id').pending && !referenceExists"></i>
<mat-icon *ngIf="'reference_id' == systemFields[0] && !formGroup.get('reference_id').pending && formGroup.get('reference_id').dirty && formGroup.get('reference_id').valid && !referenceExists" class="text-success" matSuffix>check</mat-icon>
<mat-icon *ngIf="'reference_id' == systemFields[0] && !formGroup.get('reference_id').pending && formGroup.get('reference_id').dirty && (formGroup.get('reference_id').invalid || referenceExists)" class="text-danger" matSuffix>clear</mat-icon>
<small *ngIf="'reference_id' == systemFields[0] && referenceExists" class="text-danger">{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.IDENTIFIER-EXISTS' | translate}}</small>
<mat-error *ngIf="formGroup.get('reference_id').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 col-md-6">
<mat-form-field class="w-100 form-input" *ngIf="formGroup.get('label')">
<mat-label>{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.LABEL' | translate}}</mat-label>
<input matInput type="text" [name]="'label'" [formControl]="formGroup.get('label')">
<i matSuffix class="fa fa-spinner fa-spin" *ngIf="'label' == systemFields[0] && formGroup.get('label').pending && !referenceExists"></i>
<mat-icon *ngIf="'label' == systemFields[0] && !formGroup.get('label').pending && formGroup.get('label').dirty && formGroup.get('label').valid && !referenceExists" class="text-success" matSuffix>check</mat-icon>
<mat-icon *ngIf="'label' == systemFields[0] && !formGroup.get('label').pending && formGroup.get('label').dirty && (formGroup.get('label').invalid || referenceExists)" class="text-danger" matSuffix>clear</mat-icon>
<small *ngIf="'label' == systemFields[0] && referenceExists" class="text-danger">{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.IDENTIFIER-EXISTS' | translate}}</small>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12"> <div class="col-12">
<mat-form-field class="w-100" *ngIf="formGroup.get(field)"> <mat-form-field class="w-100 form-input" *ngIf="formGroup.get('description')">
<mat-label>{{field}}</mat-label> <mat-label>{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.DESCRIPTION' | translate}}</mat-label>
<input matInput type="text" [name]="field" [formControl]="formGroup.get(field)"> <textarea matInput type="text" [name]="'description'" [formControl]="formGroup.get('description')"></textarea>
<i matSuffix class="fa fa-spinner fa-spin" *ngIf="field == systemFields[0] && formGroup.get(field).pending && !referenceExists"></i> <i matSuffix class="fa fa-spinner fa-spin" *ngIf="'description' == systemFields[0] && formGroup.get('description').pending && !referenceExists"></i>
<mat-icon *ngIf="field == systemFields[0] && !formGroup.get(field).pending && formGroup.get(field).dirty && formGroup.get(field).valid && !referenceExists" class="text-success" matSuffix>check</mat-icon> <mat-icon *ngIf="'description' == systemFields[0] && !formGroup.get('description').pending && formGroup.get('description').dirty && formGroup.get('description').valid && !referenceExists" class="text-success" matSuffix>check</mat-icon>
<mat-icon *ngIf="field == systemFields[0] && !formGroup.get(field).pending && formGroup.get(field).dirty && (formGroup.get(field).invalid || referenceExists)" class="text-danger" matSuffix>clear</mat-icon> <mat-icon *ngIf="'description' == systemFields[0] && !formGroup.get('description').pending && formGroup.get('description').dirty && (formGroup.get('description').invalid || referenceExists)" class="text-danger" matSuffix>clear</mat-icon>
<small *ngIf="field == systemFields[0] && referenceExists" class="text-danger">{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.IDENTIFIER-EXISTS' | translate}}</small> <small *ngIf="'description' == systemFields[0] && referenceExists" class="text-danger">{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.IDENTIFIER-EXISTS' | translate}}</small>
<mat-error *ngIf="formGroup.get(field).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<ng-container *ngIf="referenceType && referenceType.definition && referenceType.definition.fields && referenceType.definition.fields.length > 0"> <ng-container *ngIf="hasReferenceTypeFields">
<div class="row"> <div class="row">
<div *ngFor="let field of referenceType.definition.fields;" class="col-12"> <div class="col-12" *ngIf="systemFields.length > 0">
<h5>{{label}} {{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.TYPE-INFORMATION' | translate}}</h5>
</div>
<div *ngFor="let field of referenceType.definition.fields;" class="col-12 col-md-6">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{field.label}}</mat-label> <mat-label>{{field.label}}</mat-label>
<input matInput type="text" [name]="field.code" [formControl]="formGroup.get(field.code)"> <input matInput type="text" [name]="field.code" [formControl]="formGroup.get(field.code)">

4
dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.ts
View File

@ -22,6 +22,10 @@ export class ReferenceDialogEditorComponent extends BaseComponent implements OnI
label: string = null label: string = null
referenceExists: Boolean; referenceExists: Boolean;
get hasReferenceTypeFields(): boolean {
return this.referenceType && this.referenceType.definition && this.referenceType.definition.fields && this.referenceType.definition.fields.length > 0;
}
constructor( constructor(
private referenceTypeService: ReferenceTypeService, private referenceTypeService: ReferenceTypeService,
private referenceService: ReferenceService, private referenceService: ReferenceService,

2
dmp-frontend/src/app/ui/reference/reference-field/reference-field.component.ts
View File

@ -131,7 +131,7 @@ export class ReferenceFieldComponent extends BaseComponent implements OnInit, On
addReference() { addReference() {
const dialogRef = this.dialog.open(ReferenceDialogEditorComponent, { const dialogRef = this.dialog.open(ReferenceDialogEditorComponent, {
width: '500px', minWidth: '49%',
restoreFocus: false, restoreFocus: false,
data: { data: {
referenceTypeId: this.referenceType.id, referenceTypeId: this.referenceType.id,

9
dmp-frontend/src/assets/i18n/en.json
View File

@ -1613,8 +1613,13 @@
"INSERT-MANUALLY": "Insert it manually" "INSERT-MANUALLY": "Insert it manually"
}, },
"REFERENCE-DIALOG-EDITOR": { "REFERENCE-DIALOG-EDITOR": {
"TITLE": "Add a", "TITLE": "Add ",
"IDENTIFIER-EXISTS": "Reference Identifier Exists!" "IDENTIFIER-EXISTS": "Reference Identifier Exists!",
"REFERENCE-ID": "reference id",
"LABEL": "label",
"DESCRIPTION": "description",
"SYSTEM-INFORMATION": "System Information",
"TYPE-INFORMATION": " Information"
} }
}, },
"DMP-CLONE-DIALOG": { "DMP-CLONE-DIALOG": {