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

ui fixes on dmp-new-version dialog

This commit is contained in:
Sofia Papacharalampous 2024-05-29 13:52:28 +03:00
parent 9edec938df
commit 3437311fc9
3 changed files with 83 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.component.html
View File

@ -48,20 +48,34 @@
</div>
<div class="col-12" *ngIf="hasDescriptions()">
<mat-card class="mat-card">
<!-- <mat-card-header>
<mat-card-header>
<mat-checkbox [checked]="allDescriptionsCompleted" [indeterminate]="someDescriptionsCompleted" (change)="toggleAllDescriptions($event.checked)">{{ 'DMP-NEW-VERSION-DIALOG.ACTIONS.TOGGLE-DESCRIPTIONS' | translate }}</mat-checkbox>
</mat-card-header> -->
</mat-card-header>
<mat-selection-list #selectedItems (selectionChange)="descriptionSelectionChanged($event)">
<mat-list-option *ngFor="let description of dmp.descriptions;" [value]="description.id" [selected]="isDefaultSelected(formGroup.get('descriptions'), description.id)">
<span class="text-truncate" [matTooltip]="description.label">{{description.label}}</span>
<div>
<mat-select [formControl]="getDescriptionSectionFormControl(formGroup.get('descriptions'), description.id)" placeholder="{{'DMP-NEW-VERSION-DIALOG.FIELDS.SELECT-BLUEPRINT-SECTION'| translate}}">
<mat-option *ngFor="let section of selectedBlueprintSections" [value]="section.id">
{{ section.label }}
</mat-option>
</mat-select>
</div>
</mat-list-option>
<ng-container *ngFor="let description of dmp.descriptions;">
<mat-list-option [value]="description.id" [selected]="isDefaultSelected(formGroup.get('descriptions'), description.id)" class="h-auto">
<div class="mat-mdc-form-field-bottom-align w-100"></div>
<mat-form-field class="w-100" (click)="selectTemplate($event)" floatLabel="never">
<mat-select [formControl]="getDescriptionSectionFormControl(formGroup.get('descriptions'), description.id)" [placeholder]="description.label">
<mat-select-trigger>
<span style="font-size: 1rem;">
{{description.label}}
</span>
<br>
<span style="font-size: .8rem;">
{{ getDescriptionSectionLabel(formGroup.get('descriptions'), description.id) }}
</span>
</mat-select-trigger>
<mat-option *ngFor="let section of selectedBlueprintSections" [value]="section.id">
<span style="font-size: 1rem;">
{{ section.label }}
</span>
</mat-option>
</mat-select>
</mat-form-field>
</mat-list-option>
</ng-container>
</mat-selection-list>
</mat-card>
</div>

64
dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Inject } from '@angular/core';
import { FormArray, UntypedFormGroup } from '@angular/forms';
import { AbstractControl, FormArray, UntypedFormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Dmp, NewVersionDmpDescriptionPersist, NewVersionDmpPersist } from '@app/core/model/dmp/dmp';
import { DmpService } from '@app/core/services/dmp/dmp.service';
@ -84,11 +84,15 @@ export class NewVersionDmpDialogComponent extends BaseComponent {
}
get allDescriptionsNo(): number{
return this.dmp.descriptions?.length ?? 0;
const allDescriptionIds = (this.formGroup.get('descriptions').value as NewVersionDmpDescriptionPersist[]).map( x => x.descriptionId);
return allDescriptionIds?.length ?? 0;
}
get checkedDescrionsNo(): number {
return this.formGroup.get('descriptions')?.value?.length ?? 0;
const selectedDescriptionIds = (this.formGroup.get('descriptions').value as NewVersionDmpDescriptionPersist[]).filter(y => y.blueprintSectionId != undefined).map( x => x.descriptionId);
return selectedDescriptionIds?.length ?? 0;
}
get allDescriptionsCompleted(): boolean {
@ -115,10 +119,15 @@ export class NewVersionDmpDialogComponent extends BaseComponent {
descriptionSelectionChanged(event: MatSelectionListChange) {
const descriptionsFormArray = this.formGroup.get('descriptions') as FormArray;
this.patchSelectedDescriptions(descriptionsFormArray, event.source._value);
}
patchSelectedDescriptions(descriptionsFormArray: FormArray, selectedDescriptionIds: string[]): void {
const descriptionIds = (this.formGroup.get('descriptions').value as NewVersionDmpDescriptionPersist[]).filter(y => y.blueprintSectionId != undefined).map( x => x.descriptionId);
if (event.source._value.length > 0 && descriptionIds.length > 0){
if (event.source._value.length < descriptionIds.length){
const mustDeleteDescription = descriptionIds.filter( id => event.source._value.indexOf(id.toString()) < 0) || []
if (selectedDescriptionIds.length > 0 && descriptionIds.length > 0){
if (selectedDescriptionIds.length < descriptionIds.length){
const mustDeleteDescription = descriptionIds.filter( id => selectedDescriptionIds.indexOf(id.toString()) < 0) || []
if (mustDeleteDescription.length > 0){
mustDeleteDescription.forEach(x => this.removeSelectedDescription(descriptionsFormArray, x));
}
@ -126,14 +135,27 @@ export class NewVersionDmpDialogComponent extends BaseComponent {
} else {
if (descriptionIds?.length > 0){
descriptionIds.forEach(x => this.removeSelectedDescription(descriptionsFormArray, x))
}
}
}
descriptionsFormArray.controls.forEach((control) => {
if (this._isDescriptionSelected(control, selectedDescriptionIds)
&& (!this._isDescriptionInSection(control))) {
this._patchDefaultSection(control);
}
});
}
removeSelectedDescription(descriptionFormArray: FormArray, descriptionId: Guid){
this.getDescriptionSectionFormControl(descriptionFormArray, descriptionId).patchValue(null);
}
getDescriptionSectionLabel(descriptionFormArray: FormArray, descriptionId: Guid) {
const descriptionSection = this.getDescriptionSectionFormControl(descriptionFormArray, descriptionId);
return this.selectedBlueprintSections.find(s => s.id == descriptionSection?.value)?.label;
}
getDescriptionSectionFormControl(descriptionFormArray: FormArray, descriptionId: Guid) {
const index = descriptionFormArray.controls.findIndex(x => x.get('descriptionId')?.value == descriptionId);
return descriptionFormArray.at(index).get('blueprintSectionId');
@ -169,10 +191,16 @@ export class NewVersionDmpDialogComponent extends BaseComponent {
}
toggleAllDescriptions(event: any) {
const descriptionFormArray = this.formGroup.get('descriptions') as FormArray;
if (event === true) {
this.formGroup.get('descriptions')?.setValue(this.dmp.descriptions?.map(d=> d.id));
descriptionFormArray.controls.forEach(control => {
this._patchDefaultSection(control)
});
} else {
this.formGroup.get('descriptions')?.setValue([]);
descriptionFormArray.controls.forEach(control => {
control.get('blueprintSectionId')?.patchValue(null);
});
}
}
@ -181,4 +209,22 @@ export class NewVersionDmpDialogComponent extends BaseComponent {
error.error.message ? error.error.message :
error.error.error ? error.error.error : this.language.instant('GENERAL.SNACK-BAR.UNSUCCESSFUL-DELETE'), SnackBarNotificationLevel.Error);
}
selectTemplate(event: any): void {
event?.stopPropagation();
}
private _patchDefaultSection(control: AbstractControl): void {
if (this.selectedBlueprintSections?.length > 0) {
control.get('blueprintSectionId').patchValue(this.selectedBlueprintSections[0].id);
}
}
private _isDescriptionSelected(control: AbstractControl, selectedDescriptionIds: string[]): boolean {
return selectedDescriptionIds.includes(control.get('descriptionId')?.value)
}
private _isDescriptionInSection(control: AbstractControl): boolean {
return control.get('blueprintSectionId') != null && control.get('blueprintSectionId')?.value != null;
}
}

4
dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.editor.model.ts
View File

@ -32,12 +32,12 @@ export class DmpNewVersionDialogEditorModel implements NewVersionDmpPersist {
// initialize because blueprint changed
this.descriptions = [];
if (item.dmpDescriptionTemplates?.length > 0 && blueprint.id === item.blueprint.id) {
if (item.dmpDescriptionTemplates?.length > 0 && blueprint.id === item.blueprint.id) { // dmp's first blueprint
item.descriptions.forEach(description => {
const matchingSection = item.dmpDescriptionTemplates.find(dmpDescriptionTemplate => dmpDescriptionTemplate.descriptionTemplateGroupId === description.descriptionTemplate.groupId) || null;
this.descriptions.push(new NewVersionDmpDescriptionEditorModel(this.validationErrorModel).fromModel(description.id, matchingSection != null ? matchingSection.sectionId : null));
})
} else{
} else { // in case the user changes the blueprint from the dropdown and the new blueprint has prefilled templates
const selectedBlueprintSections = blueprint.definition?.sections?.filter(x => x.hasTemplates) || null;
if (selectedBlueprintSections != null){
item.descriptions.forEach(description => {