From 4a47e9fea308533b798afd67c91d98cb87a014f4 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 20 May 2021 09:53:20 +0200
Subject: [PATCH] fix display of several time slices under days choices

---
 .../form/date-select/date-select.component.html   |  9 +++++----
 .../form/date-select/date-select.component.ts     |  8 ++++----
 .../form/date/list/day/day-list.component.html    | 15 ++++++++++-----
 .../form/date/list/day/day-list.component.scss    |  3 +++
 .../form/date/list/day/day-list.component.ts      | 12 ++++++------
 5 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/app/features/administration/form/date-select/date-select.component.html b/src/app/features/administration/form/date-select/date-select.component.html
index 9489a039..62015e34 100644
--- a/src/app/features/administration/form/date-select/date-select.component.html
+++ b/src/app/features/administration/form/date-select/date-select.component.html
@@ -64,8 +64,8 @@
 							réinitialiser
 						</span>
 					</button>
-					<fieldset class="range-container is-boxed">
-						<div class="range-time" *ngIf="!form.value.hasSeveralHours">
+					<fieldset class="range-container is-boxed" *ngIf="!form.value.hasSeveralHours">
+						<div class="range-time">
 							<h2>
 								<span class="count-dates-txt">
 									{{ 'dates.count_time' | translate }}
@@ -82,8 +82,8 @@
 									<i class="fa fa-refresh"></i>
 								</button>
 							</div>
+							<app-time-list [timeSlices]="timeSlices"></app-time-list>
 						</div>
-						<app-time-list [timeSlices]="timeSlices"></app-time-list>
 					</fieldset>
 				</div>
 			</div>
@@ -91,9 +91,10 @@
 
 		<hr />
 		<div class="main-box is-boxed">
+			liste de jours :
 			<app-day-list
 				[form]="form"
-				[dateList]="dateList"
+				[dateChoices]="dateChoices"
 				[hasSeveralHours]="form.value.hasSeveralHours"
 			></app-day-list>
 		</div>
diff --git a/src/app/features/administration/form/date-select/date-select.component.ts b/src/app/features/administration/form/date-select/date-select.component.ts
index d4e0c7d7..d15f98ba 100644
--- a/src/app/features/administration/form/date-select/date-select.component.ts
+++ b/src/app/features/administration/form/date-select/date-select.component.ts
@@ -27,7 +27,7 @@ export class DateSelectComponent implements OnInit {
 	endDateInterval: string;
 
 	intervalDaysDefault = 7;
-	dateList: DateChoice[] = []; // sets of dateChoices as strings, config to set identical time for dateChoices in a special dateChoices poll
+	dateChoices: DateChoice[] = []; // sets of dateChoices as strings, config to set identical time for dateChoices in a special dateChoices poll
 	timeSlices: TimeSlices[] = []; // ranges of time expressed as strings
 
 	selectionKind = 'range';
@@ -44,7 +44,7 @@ export class DateSelectComponent implements OnInit {
 		private translateService: TranslateService,
 		@Inject(DOCUMENT) private document: any
 	) {
-		this.dateList = this.storageService.dateChoices;
+		this.dateChoices = this.storageService.dateChoices;
 		this.timeSlices = this.storageService.timeSlices;
 	}
 
@@ -61,14 +61,14 @@ export class DateSelectComponent implements OnInit {
 
 	removeAllTimes() {
 		this.timeSlices = [];
-		this.dateList.map((elem) => (elem.timeSlices = []));
+		this.dateChoices.map((elem) => (elem.timeSlices = []));
 
 		this.toastService.display('périodes horaires vidées');
 	}
 
 	resetTimes(slices = Object.create(defaultTimeOfDay)) {
 		this.timeSlices = slices;
-		this.dateList.map((elem) => (elem.timeSlices = Object.create(slices)));
+		this.dateChoices.map((elem) => (elem.timeSlices = Object.create(slices)));
 		this.toastService.display('périodes horaires réinitialisées');
 	}
 }
diff --git a/src/app/features/administration/form/date/list/day/day-list.component.html b/src/app/features/administration/form/date/list/day/day-list.component.html
index caa673f8..e6c08f48 100644
--- a/src/app/features/administration/form/date/list/day/day-list.component.html
+++ b/src/app/features/administration/form/date/list/day/day-list.component.html
@@ -8,7 +8,7 @@
 		</div>
 		<div class="column">
 			<span class="count-dates title">
-				{{ dateList.length }}
+				{{ dateChoices.length }}
 			</span>
 			<span>
 				{{ 'dates.count_dates' | translate }}
@@ -16,7 +16,12 @@
 		</div>
 	</div>
 
-	<div class="columns days-list" cdkDropList [cdkDropListData]="dateList" (cdkDropListDropped)="dropDayItem($event)">
+	<div
+		class="columns days-list"
+		cdkDropList
+		[cdkDropListData]="dateChoices"
+		(cdkDropListDropped)="dropDayItem($event)"
+	>
 		<div class="column">
 			<h2>Dates</h2>
 			<button class="btn button-help" mat-raised-button (click)="openSimple()">
@@ -26,7 +31,7 @@
 			<br />
 			<br />
 			<div
-				*ngFor="let choice of dateList; index as id"
+				*ngFor="let choice of dateChoices; index as id"
 				class="date-choice padded"
 				cdkDrag
 				[ngClass]="{ 'day-weekend': isWeekendDay(choice.date_object) }"
@@ -45,7 +50,7 @@
 					useValueAsDate
 					type="date"
 				/>
-				<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
+				<button (click)="dateChoices.splice(id, 1)" class="btn btn-warning">
 					<i class="fa fa-times" aria-hidden="true"></i>
 				</button>
 				<button (click)="addTimeToDate(choice, id)" *ngIf="hasSeveralHours" class="btn btn--primary">
@@ -53,7 +58,7 @@
 				</button>
 				<div *ngIf="hasSeveralHours" class="several-times">
 					<br />
-					<app-time-list [timeSlices]="choice.timeList"></app-time-list>
+					<app-time-list [timeSlices]="choice.timeSlices"></app-time-list>
 				</div>
 			</div>
 		</div>
diff --git a/src/app/features/administration/form/date/list/day/day-list.component.scss b/src/app/features/administration/form/date/list/day/day-list.component.scss
index 3a5de462..bf6ae1de 100644
--- a/src/app/features/administration/form/date/list/day/day-list.component.scss
+++ b/src/app/features/administration/form/date/list/day/day-list.component.scss
@@ -8,3 +8,6 @@
 	margin-right: 1ch;
 	display: inline-block;
 }
+.several-times {
+	padding-left: 2em;
+}
diff --git a/src/app/features/administration/form/date/list/day/day-list.component.ts b/src/app/features/administration/form/date/list/day/day-list.component.ts
index b86b7294..ae45af5c 100644
--- a/src/app/features/administration/form/date/list/day/day-list.component.ts
+++ b/src/app/features/administration/form/date/list/day/day-list.component.ts
@@ -18,7 +18,7 @@ export class DayListComponent {
 	@Input()
 	form: FormGroup;
 	@Input()
-	public dateList: Array<any> = [];
+	public dateChoices: Array<DateChoice> = [];
 	@Input()
 	public hasSeveralHours: boolean;
 	timeList: any;
@@ -35,7 +35,7 @@ export class DayListComponent {
 	}
 
 	reinitChoices(): void {
-		this.dateList = [];
+		this.dateChoices = [];
 	}
 
 	setDemoTextChoices(): void {
@@ -88,9 +88,9 @@ export class DayListComponent {
 	keyOnChoice($event: KeyboardEvent, choice_number: number): void {
 		$event.preventDefault();
 
-		console.log('this. dateChoices.length', this.dateList.length);
+		console.log('this. dateChoices.length', this.dateChoices.length);
 		console.log('choice_number', choice_number);
-		const lastChoice = this.dateList.length - 1 === choice_number;
+		const lastChoice = this.dateChoices.length - 1 === choice_number;
 		// TODO handle shortcuts
 		// reset field with Ctrl + D
 		// add a field with Ctrl + N
@@ -146,8 +146,8 @@ export class DayListComponent {
 	}
 
 	deleteChoiceField(index: number): void {
-		if (this.dateList.length !== 1) {
-			this.dateList.splice(index, 1);
+		if (this.dateChoices.length !== 1) {
+			this.dateChoices.splice(index, 1);
 		}
 	}