From ffeb21e8fe46c7e1467dcf622d68795f14177240 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 10 Mar 2022 13:02:24 +0100
Subject: [PATCH] fix focus on hour of correct day

---
 .../steps/step-four/step-four.component.html  | 20 +++++++++++--------
 .../steps/step-four/step-four.component.ts    | 15 +++++++-------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.html b/src/app/features/administration/form/steps/step-four/step-four.component.html
index 6fee7dd3..5e3f494e 100644
--- a/src/app/features/administration/form/steps/step-four/step-four.component.html
+++ b/src/app/features/administration/form/steps/step-four/step-four.component.html
@@ -17,22 +17,26 @@
 
 				<section class="time-slice-list-of-a-day">
 					<div *ngFor="let timeSlice of dayChoice.timeSlices; index as id" class="time-choice">
-						<label for="dateChoices_{{ id }}"> {{ 'hours.element' | translate }} {{ id + 1 }} </label>
+						<label for="day_{{ day_id }}_dateChoices_{{ id }}">
+							{{ 'hours.element' | translate }} {{ id + 1 }}
+						</label>
 
-						<input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
+						<input
+							class="input"
+							type="text"
+							id="day_{{ day_id }}_dateChoices_{{ id }}"
+							[(ngModel)]="timeSlice.literal"
+						/>
 						<button
 							[attr.aria-label]="'choices.delete' | translate"
 							class="has-no-border delete-hour has-background-trash has-background-icon-left is-filtered-icon-primary"
-							(click)="removeHour(dayChoice.timeSlices, id)"
-						>
-							<!--							{{ 'choices.delete' | translate }}-->
-							<!--							<img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />-->
-						</button>
+							(click)="removeHour(day_id, dayChoice.timeSlices, id)"
+						></button>
 					</div>
 					<div class="add-time-choice">
 						<button
 							class="has-text-primary has-no-border is-large-button has-text-left has-background-transparent has-background-plus has-background-icon-left is-filtered-icon-primary"
-							(click)="addChoiceForDay(dayChoice)"
+							(click)="addChoiceForDay(day_id, dayChoice)"
 						>
 							{{ 'hours.add' | translate }}
 						</button>
diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.ts b/src/app/features/administration/form/steps/step-four/step-four.component.ts
index b39348d6..44bf652a 100644
--- a/src/app/features/administration/form/steps/step-four/step-four.component.ts
+++ b/src/app/features/administration/form/steps/step-four/step-four.component.ts
@@ -51,9 +51,8 @@ export class StepFourComponent implements OnInit {
 		});
 	}
 
-	addChoiceForDay(dayChoice: DateChoice): void {
+	addChoiceForDay(day_id, dayChoice: DateChoice): void {
 		let lastDateChoice = this.pollService.dateChoiceList[this.pollService.dateChoiceList.length];
-		console.log('lastDateChoice', lastDateChoice);
 		let lastDateChoiceObject = this.dateUtilitiesService.addDaysToDate(
 			this.pollService.dateChoiceList.length,
 			new Date()
@@ -70,11 +69,12 @@ export class StepFourComponent implements OnInit {
 		dayChoice.timeSlices.sort((a: any, b: any) => {
 			return a.date_object - b.date_object;
 		});
-		this.focusOnChoice(this.storageService.dateChoices.length - 1);
+		this.focusOnChoice(day_id, this.storageService.dateChoices.length - 1);
 	}
 
-	focusOnChoice(index): void {
-		const selector = '#dateChoices_' + index;
+	focusOnChoice(day_id, index): void {
+		this.cd.detectChanges();
+		const selector = '#day_' + day_id + '_dateChoices_' + index;
 		const elem = this.document.querySelector(selector);
 		if (elem) {
 			elem.focus();
@@ -123,13 +123,12 @@ export class StepFourComponent implements OnInit {
 		}
 	}
 
-	removeHour(dayChoice, id: number) {
+	removeHour(day_id, dayChoice, id: number) {
 		dayChoice.splice(id, 1);
 		this.cd.detectChanges();
-		this.focusOnChoice(id - 1 < 0 ? 0 : id - 1);
+		this.focusOnChoice(day_id, id - 1 < 0 ? 0 : id - 1);
 
 		this.translate.get('success.deleted_option').subscribe((resp) => {
-			console.log('resp', resp);
 			this.toastService.display(`${resp}`);
 		});
 	}