From e50875c9880bb48edbb22887e78ee4f8b341b698 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Wed, 18 Sep 2019 14:35:51 +0300
Subject: [PATCH] Fixes styling issue in multi field set - (Issue #156)

---
 .../form-section/form-section.component.html     | 16 ++++++++++++----
 .../form-section/form-section.component.ts       |  6 ++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
index b7bf93f40..eecf3ab27 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
@@ -14,14 +14,22 @@
 				<!-- *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value)" -->
 				<div class="row" *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(compositeFieldFormGroup)">
 
-
-					<app-form-composite-field class="align-self-center col-12" [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
-					 [isChild]="false"></app-form-composite-field>
+					<div class="col-12">
+						<div class="row">
+							<app-form-composite-field class="align-self-center col" [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
+								[isChild]="false"></app-form-composite-field>
+							<div *ngIf="(compositeFieldFormGroup.get('multiplicityItems').length) > 0" class="col-auto align-self-center mt-auto pb-2">
+								<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeFieldFormGroup(i);">
+									<mat-icon>delete</mat-icon>
+								</button>
+							</div>
+						</div>
+					</div>
 
 					<div *ngIf="compositeFieldFormGroup" class="col-12">
 						<div class="row">
 							<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.get('multiplicityItems')['controls']; let j = index">
-								<div class="styleBorder row">
+								<div class="row">
 									<app-form-composite-field class=" align-self-center col" [form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
 									 [isChild]="true"></app-form-composite-field>
 									<div class="col-auto align-self-center">
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
index 2d17c1c31..3587177c0 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
@@ -39,6 +39,12 @@ export class FormSectionComponent implements OnInit {
 		(<FormArray>(this.form.get('compositeFields').get('' + fieldsetIndex).get('multiplicityItems'))).push(compositeField.buildForm());
 	}
 
+	deleteCompositeFieldFormGroup(compositeFildIndex: number) {
+		const firstMultiplicityItem = this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems').get('' + 0).get('fields').get('' + 0).value;
+		this.form.get('compositeFields').get('' + compositeFildIndex).get('fields').get('' + 0).patchValue(firstMultiplicityItem);
+		(<FormArray>(this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems'))).removeAt(0);
+	}
+
 	deleteMultipeFieldFromCompositeFormGroup(compositeFildIndex: number, fildIndex: number) {
 		(<FormArray>(this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems'))).removeAt(fildIndex);
 	}