From 1df3e3cd2b1493f798a5d1e9c028923f83e53eef Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Wed, 15 May 2024 17:22:37 +0300
Subject: [PATCH] added toggle discriptions mechanism on dmp-clone and
 dmp-new-version dialogs

---
 .../dmp-clone-dialog.component.html           |  3 +++
 .../dmp-clone-dialog.component.scss           |  4 +++
 .../dmp-clone-dialog.component.ts             | 24 ++++++++++++++++++
 .../dmp-new-version-dialog.component.html     |  3 +++
 .../dmp-new-version-dialog.component.scss     |  4 +++
 .../dmp-new-version-dialog.component.ts       | 25 +++++++++++++++++++
 dmp-frontend/src/assets/i18n/en.json          |  6 +++--
 7 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dmp/clone-dialog/dmp-clone-dialog.component.html b/dmp-frontend/src/app/ui/dmp/clone-dialog/dmp-clone-dialog.component.html
index a6677695d..fc3ddaafe 100644
--- a/dmp-frontend/src/app/ui/dmp/clone-dialog/dmp-clone-dialog.component.html
+++ b/dmp-frontend/src/app/ui/dmp/clone-dialog/dmp-clone-dialog.component.html
@@ -36,6 +36,9 @@
 		</div>
 		<div class="col-12" *ngIf="hasDescriptions()">
 			<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-list-option *ngFor="let description of dmp.descriptions;" [value]="description.id">
 						<span class="text-truncate" [matTooltip]="description.label">{{description.label}}</span>
diff --git a/dmp-frontend/src/app/ui/dmp/clone-dialog/dmp-clone-dialog.component.scss b/dmp-frontend/src/app/ui/dmp/clone-dialog/dmp-clone-dialog.component.scss
index 28605e240..9503e020a 100644
--- a/dmp-frontend/src/app/ui/dmp/clone-dialog/dmp-clone-dialog.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/clone-dialog/dmp-clone-dialog.component.scss
@@ -57,4 +57,8 @@
 		background-color: var(--primary-color);
 		color: #ffffff;
 	}
+
+	::ng-deep label {
+		margin: 0;
+	}
 }
diff --git a/dmp-frontend/src/app/ui/dmp/clone-dialog/dmp-clone-dialog.component.ts b/dmp-frontend/src/app/ui/dmp/clone-dialog/dmp-clone-dialog.component.ts
index 4d6228ea0..63893a1c8 100644
--- a/dmp-frontend/src/app/ui/dmp/clone-dialog/dmp-clone-dialog.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/clone-dialog/dmp-clone-dialog.component.ts
@@ -32,6 +32,23 @@ export class CloneDmpDialogComponent extends BaseComponent {
 		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() {
 		this.editorModel = new DmpCloneDialogEditorModel().fromModel(this.data.dmp);
 		this.formGroup = this.editorModel.buildForm();
@@ -56,7 +73,14 @@ export class CloneDmpDialogComponent extends BaseComponent {
 			dmp => this.dialogRef.close(dmp),
 			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) {
diff --git a/dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.component.html b/dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.component.html
index 0c5b91301..7e83d997e 100644
--- a/dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.component.html
+++ b/dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.component.html
@@ -48,6 +48,9 @@
 		</div>
 		<div class="col-12" *ngIf="hasDescriptions()">
 			<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-list-option *ngFor="let description of dmp.descriptions;" [value]="description.id">
 						<span class="text-truncate" [matTooltip]="description.label">{{description.label}}</span>
diff --git a/dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.component.scss b/dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.component.scss
index 1aa4894b8..cf2556245 100644
--- a/dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.component.scss
@@ -57,4 +57,8 @@
 		background-color: var(--primary-color);
 		color: #ffffff;
 	}
+
+	::ng-deep label {
+		margin: 0;
+	}
 }
diff --git a/dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.component.ts b/dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.component.ts
index 2222033f9..6be762368 100644
--- a/dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/new-version-dialog/dmp-new-version-dialog.component.ts
@@ -47,6 +47,23 @@ export class NewVersionDmpDialogComponent extends BaseComponent {
 		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() {
 		this.editorModel = new DmpNewVersionDialogEditorModel().fromModel(this.data.dmp);
 		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) {
 		this.uiNotificationService.snackBarNotification(
 			error.error.message ? error.error.message : 
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 6d702f355..00ba9b5b3 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -1606,7 +1606,8 @@
 		"NO-DESCRIPTIONS": "Not available Descriptions for this Plan.",
 		"ACTIONS": {
 			"CANCEL": "Cancel",
-			"CLONE": "Clone"
+			"CLONE": "Clone",
+			"TOGGLE-DESCRIPTIONS": "Check/Uncheck"
 		}
 	},
 	"DMP-NEW-VERSION-DIALOG": {
@@ -1624,7 +1625,8 @@
 		"NO-DESCRIPTIONS": "Not available Descriptions for this Plan.",
 		"ACTIONS": {
 			"CANCEL": "Cancel",
-			"NEW-VERSION": "Create New Version"
+			"NEW-VERSION": "Create New Version",
+			"TOGGLE-DESCRIPTIONS": "Check/Uncheck"
 		}
 	},
 	"DMP-USER-INVITATION-DIALOG": {