added toggle discriptions mechanism on dmp-clone and dmp-new-version dialogs

This commit is contained in:
Sofia Papacharalampous 2024-05-15 17:22:37 +03:00
parent 16fcd26c04
commit 1df3e3cd2b
7 changed files with 67 additions and 2 deletions

View File

@ -36,6 +36,9 @@
</div> </div>
<div class="col-12" *ngIf="hasDescriptions()"> <div class="col-12" *ngIf="hasDescriptions()">
<mat-card class="mat-card"> <mat-card class="mat-card">
<mat-card-header>
<mat-checkbox [checked]="allDescriptionsCompleted" [indeterminate]="someDescriptionsCompleted" (change)="toggleAllDescriptions($event.checked)">{{ 'DMP-CLONE-DIALOG.ACTIONS.TOGGLE-DESCRIPTIONS' | translate }}</mat-checkbox>
</mat-card-header>
<mat-selection-list #selectedItems [formControl]="formGroup.get('descriptions')"> <mat-selection-list #selectedItems [formControl]="formGroup.get('descriptions')">
<mat-list-option *ngFor="let description of dmp.descriptions;" [value]="description.id"> <mat-list-option *ngFor="let description of dmp.descriptions;" [value]="description.id">
<span class="text-truncate" [matTooltip]="description.label">{{description.label}}</span> <span class="text-truncate" [matTooltip]="description.label">{{description.label}}</span>

View File

@ -57,4 +57,8 @@
background-color: var(--primary-color); background-color: var(--primary-color);
color: #ffffff; color: #ffffff;
} }
::ng-deep label {
margin: 0;
}
} }

View File

@ -32,6 +32,23 @@ export class CloneDmpDialogComponent extends BaseComponent {
this.dmp = data.dmp; this.dmp = data.dmp;
} }
get allDescriptionsNo(): number{
return this.dmp.descriptions?.length ?? 0;
}
get checkedDescrionsNo(): number {
return this.formGroup.get('descriptions')?.value?.length ?? 0;
}
get allDescriptionsCompleted(): boolean {
return this.allDescriptionsNo === this.checkedDescrionsNo;
}
get someDescriptionsCompleted(): boolean {
return this.checkedDescrionsNo > 0 && this.checkedDescrionsNo < this.allDescriptionsNo;
}
ngOnInit() { ngOnInit() {
this.editorModel = new DmpCloneDialogEditorModel().fromModel(this.data.dmp); this.editorModel = new DmpCloneDialogEditorModel().fromModel(this.data.dmp);
this.formGroup = this.editorModel.buildForm(); this.formGroup = this.editorModel.buildForm();
@ -56,7 +73,14 @@ export class CloneDmpDialogComponent extends BaseComponent {
dmp => this.dialogRef.close(dmp), dmp => this.dialogRef.close(dmp),
error => this.onCallbackError(error) error => this.onCallbackError(error)
); );
}
toggleAllDescriptions(event: any) {
if (event === true) {
this.formGroup.get('descriptions')?.setValue(this.dmp.descriptions?.map(d=> d.id));
} else {
this.formGroup.get('descriptions')?.setValue([]);
}
} }
onCallbackError(error: any) { onCallbackError(error: any) {

View File

@ -48,6 +48,9 @@
</div> </div>
<div class="col-12" *ngIf="hasDescriptions()"> <div class="col-12" *ngIf="hasDescriptions()">
<mat-card class="mat-card"> <mat-card class="mat-card">
<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-selection-list #selectedItems [formControl]="formGroup.get('descriptions')"> <mat-selection-list #selectedItems [formControl]="formGroup.get('descriptions')">
<mat-list-option *ngFor="let description of dmp.descriptions;" [value]="description.id"> <mat-list-option *ngFor="let description of dmp.descriptions;" [value]="description.id">
<span class="text-truncate" [matTooltip]="description.label">{{description.label}}</span> <span class="text-truncate" [matTooltip]="description.label">{{description.label}}</span>

View File

@ -57,4 +57,8 @@
background-color: var(--primary-color); background-color: var(--primary-color);
color: #ffffff; color: #ffffff;
} }
::ng-deep label {
margin: 0;
}
} }

View File

@ -47,6 +47,23 @@ export class NewVersionDmpDialogComponent extends BaseComponent {
this.dmp = data.dmp; this.dmp = data.dmp;
} }
get allDescriptionsNo(): number{
return this.dmp.descriptions?.length ?? 0;
}
get checkedDescrionsNo(): number {
return this.formGroup.get('descriptions')?.value?.length ?? 0;
}
get allDescriptionsCompleted(): boolean {
return this.allDescriptionsNo === this.checkedDescrionsNo;
}
get someDescriptionsCompleted(): boolean {
return this.checkedDescrionsNo > 0 && this.checkedDescrionsNo < this.allDescriptionsNo;
}
ngOnInit() { ngOnInit() {
this.editorModel = new DmpNewVersionDialogEditorModel().fromModel(this.data.dmp); this.editorModel = new DmpNewVersionDialogEditorModel().fromModel(this.data.dmp);
this.formGroup = this.editorModel.buildForm(); this.formGroup = this.editorModel.buildForm();
@ -74,6 +91,14 @@ export class NewVersionDmpDialogComponent extends BaseComponent {
} }
toggleAllDescriptions(event: any) {
if (event === true) {
this.formGroup.get('descriptions')?.setValue(this.dmp.descriptions?.map(d=> d.id));
} else {
this.formGroup.get('descriptions')?.setValue([]);
}
}
onCallbackError(error: any) { onCallbackError(error: any) {
this.uiNotificationService.snackBarNotification( this.uiNotificationService.snackBarNotification(
error.error.message ? error.error.message : error.error.message ? error.error.message :

View File

@ -1606,7 +1606,8 @@
"NO-DESCRIPTIONS": "Not available Descriptions for this Plan.", "NO-DESCRIPTIONS": "Not available Descriptions for this Plan.",
"ACTIONS": { "ACTIONS": {
"CANCEL": "Cancel", "CANCEL": "Cancel",
"CLONE": "Clone" "CLONE": "Clone",
"TOGGLE-DESCRIPTIONS": "Check/Uncheck"
} }
}, },
"DMP-NEW-VERSION-DIALOG": { "DMP-NEW-VERSION-DIALOG": {
@ -1624,7 +1625,8 @@
"NO-DESCRIPTIONS": "Not available Descriptions for this Plan.", "NO-DESCRIPTIONS": "Not available Descriptions for this Plan.",
"ACTIONS": { "ACTIONS": {
"CANCEL": "Cancel", "CANCEL": "Cancel",
"NEW-VERSION": "Create New Version" "NEW-VERSION": "Create New Version",
"TOGGLE-DESCRIPTIONS": "Check/Uncheck"
} }
}, },
"DMP-USER-INVITATION-DIALOG": { "DMP-USER-INVITATION-DIALOG": {