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

add reference dialog pop up

This commit is contained in:
amentis 2024-04-01 16:05:28 +03:00
parent f4bf80aeb5
commit cbc3990cdf
6 changed files with 190 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,38 @@
<form *ngIf="formGroup" [formGroup]="formGroup">
<div class="row d-flex flex-row">
<div mat-dialog-title class="col-auto">
{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.TITLE' | translate}} {{label}}
</div>
<div class="col-auto ml-auto close-btn" (click)="close()">
<mat-icon>close</mat-icon>
</div>
</div>
<div mat-dialog-content class="row">
<div *ngFor="let field of systemFields;">
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{field}}</mat-label>
<input matInput type="text" [name]="field" [formControl]="formGroup.get(field)" required>
<mat-error *ngIf="formGroup.get(field).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
<ng-container *ngIf="referenceType && referenceType.definition && referenceType.definition.fields && referenceType.definition.fields.length > 0">
<div *ngFor="let field of referenceType.definition.fields;">
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{field.label}}</mat-label>
<input matInput type="text" [name]="field.code" [formControl]="formGroup.get(field.code)" required>
<mat-error *ngIf="formGroup.get(field.code).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</ng-container>
{{formGroup.value | json}}
</div>
<div mat-dialog-actions class="row">
<div class="ml-auto col-auto"><button mat-raised-button type="button" mat-dialog-close>Cancel</button></div>
<div class="col-auto"><button mat-button color="primary" [disabled]="!formGroup.valid" (click)="send()" type="button">Save</button></div>
</div>
</form>

3
dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.scss Normal file
View File

@ -0,0 +1,3 @@
.close-btn {
cursor: pointer;
}

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

@ -0,0 +1,115 @@
import { Component, Inject, OnInit } from '@angular/core';
import { FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ReferenceSourceType } from '@app/core/common/enum/reference-source-type';
import { ReferenceType, ReferenceTypeDefinition, ReferenceTypeField } from '@app/core/model/reference-type/reference-type';
import { DefinitionPersist, FieldPersist, ReferencePersist } from '@app/core/model/reference/reference';
import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service';
import { BaseComponent } from '@common/base/base.component';
import { FormService } from '@common/forms/form-service';
import { takeUntil } from 'rxjs/operators';
import { nameof } from 'ts-simple-nameof';
@Component({
templateUrl: 'reference-dialog-editor.component.html',
styleUrls: ['./reference-dialog-editor.component.scss']
})
export class ReferenceDialogEditorComponent extends BaseComponent implements OnInit {
formGroup: UntypedFormGroup;
referenceType: ReferenceType;
systemFields: string[];
label: string = null
constructor(
private referenceTypeService: ReferenceTypeService,
private fb: UntypedFormBuilder,
public dialogRef: MatDialogRef<ReferenceDialogEditorComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
private formService: FormService
) {
super();
this.label = data.label;
this.formGroup = this.fb.group({});
}
ngOnInit(): void {
this.systemFields = this.referenceTypeService.getSystemFields([]);
this.referenceTypeService.getSingle(this.data.referenceTypeId, this.lookupFields())
.pipe(takeUntil(this._destroyed))
.subscribe(
referenceType => {
this.referenceType = referenceType;
this.buildForm(referenceType.definition?.fields);
}
);
}
buildForm(fields: ReferenceTypeField[]) {
this.systemFields.forEach(systemField => {
this.formGroup.setControl(systemField, new FormControl({ value: null, disabled: false }, Validators.required));
})
if (fields != null && fields.length >= 0){
fields.forEach(x => {
this.formGroup.setControl(x.code, new FormControl({ value: null, disabled: false }, Validators.required));
})
}
}
send() {
this.formService.touchAllFormFields(this.formGroup);
if (!this.formGroup.valid) { return; }
this.dialogRef.close(this.buildReferencePersist());
}
buildReferencePersist() : ReferencePersist{
return {
label: this.formGroup.get(this.systemFields[1]).value,
description: this.formGroup.get(this.systemFields[2]).value,
typeId: this.data.referenceTypeId,
reference: this.formGroup.get(this.systemFields[0]).value,
abbreviation: "",
source: "Internal",
sourceType: ReferenceSourceType.Internal,
definition: this.buildDefinitionPersist(this.referenceType.definition.fields),
}
}
buildDefinitionPersist(fields: ReferenceTypeField[]): DefinitionPersist{
if(fields == null || fields.length == 0) return null;
return {
fields: fields.map(x => this.buildFieldPersist(x))
}
}
buildFieldPersist(field: ReferenceTypeField): FieldPersist{
return {
code: field.code,
dataType: field.dataType,
value: this.formGroup.get(field.code).value,
}
}
close() {
this.dialogRef.close(false);
}
private lookupFields(): string[] {
return [
nameof<ReferenceType>(x => x.id),
nameof<ReferenceType>(x => x.name),
nameof<ReferenceType>(x => x.code),
[nameof<ReferenceType>(x => x.definition), nameof<ReferenceTypeDefinition>(x => x.fields), nameof<ReferenceTypeField>(x => x.code)].join('.'),
[nameof<ReferenceType>(x => x.definition), nameof<ReferenceTypeDefinition>(x => x.fields), nameof<ReferenceTypeField>(x => x.label)].join('.'),
[nameof<ReferenceType>(x => x.definition), nameof<ReferenceTypeDefinition>(x => x.fields), nameof<ReferenceTypeField>(x => x.dataType)].join('.')
]
}
}

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

@ -1,11 +1,15 @@
import { Component, Input, OnInit } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { ReferenceType } from '@app/core/model/reference-type/reference-type';
import { ReferenceService } from '@app/core/services/reference/reference.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
import { BaseComponent } from '@common/base/base.component';
import { takeUntil } from 'rxjs/operators';
import { ReferenceDialogEditorComponent } from './editor/reference-dialog-editor.component';
import { ReferencePersist } from '@app/core/model/reference/reference';
@Component({
selector: 'app-reference-field-component',
@ -28,6 +32,7 @@ export class ReferenceFieldComponent extends BaseComponent implements OnInit {
constructor(
private referenceService: ReferenceService,
public enumUtils: EnumUtils,
private dialog: MatDialog,
) { super(); }
ngOnInit() {
@ -39,17 +44,25 @@ export class ReferenceFieldComponent extends BaseComponent implements OnInit {
}
addReference() {
// const dialogRef = this.dialog.open(DatasetExternalDataRepositoryDialogEditorComponent, {
// width: '500px',
// restoreFocus: false,
// data: {}
// });
// dialogRef.afterClosed()
// .pipe(takeUntil(this._destroyed))
// .subscribe(result => {
// if (!result) { return; }
// const dataRepositoryModel = new ExternalDataRepositoryEditorModel(result.id, result.name, result.abbreviation, result.uri, result.pid, result.source);
// (<UntypedFormArray>this.formGroup.get('dataRepositories')).push(dataRepositoryModel.buildForm());
// });
const dialogRef = this.dialog.open(ReferenceDialogEditorComponent, {
width: '500px',
restoreFocus: false,
data: {
referenceTypeId: this.referenceType.id,
label: this.label ?? this.referenceType.name
},
});
dialogRef.afterClosed()
.pipe(takeUntil(this._destroyed))
.subscribe(newResult => {
if (!newResult) { return; }
// const dataRepositoryModel = new ExternalDataRepositoryEditorModel(result.id, result.name, result.abbreviation, result.uri, result.pid, result.source);
// (<UntypedFormArray>this.formGroup.get('dataRepositories')).push(dataRepositoryModel.buildForm());
let results = this.form.value as ReferencePersist[];
if (results == undefined) results = [];
results.push(newResult);
this.form.setValue(results);
});
}
}

7
dmp-frontend/src/app/ui/reference/reference-field/reference-field.module.ts
View File

@ -5,6 +5,7 @@ import { DescriptionRoutingModule } from '@app/ui/description/description.routin
import { CommonFormsModule } from '@common/forms/common-forms.module';
import { CommonUiModule } from '@common/ui/common-ui.module';
import { ReferenceFieldComponent } from './reference-field.component';
import { ReferenceDialogEditorComponent } from './editor/reference-dialog-editor.component';
@NgModule({
imports: [
@ -15,10 +16,12 @@ import { ReferenceFieldComponent } from './reference-field.component';
AutoCompleteModule
],
declarations: [
ReferenceFieldComponent
ReferenceFieldComponent,
ReferenceDialogEditorComponent
],
exports: [
ReferenceFieldComponent
ReferenceFieldComponent,
ReferenceDialogEditorComponent
]
})
export class ReferenceFieldModule { }

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

@ -1352,6 +1352,9 @@
"COULD-NOT-FIND-MESSAGE": "Couldn't find it?",
"ACTIONS": {
"INSERT-MANUALLY": "Insert it manually"
},
"REFERENCE-DIALOG-EDITOR": {
"TITLE": "Add a"
}
},
"DMP-CLONE-DIALOG": {