From dfb3e98159d80a801f0a0a9858aae8681134b23a Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 19 Oct 2021 12:53:19 +0200
Subject: [PATCH] set min height for each step

---
 src/app/core/services/poll.service.ts         |   4 -
 .../administration/form/form.component.html   |  15 +-
 .../form/step-five/step-five.component.html   |   2 +-
 .../form/step-four/step-four.component.html   |   2 +-
 .../form/step-one/step-one.component.html     |  13 +-
 .../form/step-three/step-three.component.html | 268 +++++++++---------
 .../form/step-three/step-three.component.ts   |   5 +
 .../form/step-two/step-two.component.html     |  50 ++--
 .../form/step-two/step-two.component.ts       |   4 -
 src/styles/partials/global.scss               |   4 +
 10 files changed, 180 insertions(+), 187 deletions(-)

diff --git a/src/app/core/services/poll.service.ts b/src/app/core/services/poll.service.ts
index 9ff8d134..0489ca02 100644
--- a/src/app/core/services/poll.service.ts
+++ b/src/app/core/services/poll.service.ts
@@ -165,7 +165,6 @@ export class PollService implements Resolve<Poll> {
 	}
 
 	public async loadPollBySlug(slug: string): Promise<void> {
-		console.log('slug', slug);
 		if (slug) {
 			const poll: Poll | undefined = await this.apiService.getPollBySlug(slug);
 			console.log({ loadPollBySlugResponse: poll });
@@ -213,14 +212,11 @@ export class PollService implements Resolve<Poll> {
 	keyOnChoice($event: KeyboardEvent, choice_number: number): void {
 		$event.preventDefault();
 
-		console.log('this.choices.length', this.choices.length);
-		console.log('choice_number', choice_number);
 		const lastChoice = this.choices.length - 1 === choice_number;
 		// reset field with Ctrl + D
 		// add a field with Ctrl + N
 		// go to previous choice with arrow up
 		// go to next choice with arrow down
-		console.log('$event', $event);
 
 		if ($event.key == 'ArrowUp' && choice_number > 0) {
 			this.focusOnChoice(choice_number - 1);
diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index 8e79451b..284a3504 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -5,22 +5,9 @@
 		</h2>
 		<app-stepper [step_current]="pollService.step_current" [step_max]="pollService.step_max"></app-stepper>
 	</header>
-	<section class="step-container">
+	<section class="step-container min-height">
 		<router-outlet>
 			<app-step-one [form]="form"></app-step-one>
 		</router-outlet>
 	</section>
-	<footer>
-		<div class="columns">
-			<div class="column"></div>
-			<div class="column">
-				<!--				[disabled]="form.invalid"-->
-				<button class="button is-primary is-fullwidth" [routerLink]="['administration/step/2']">
-					suivant
-				</button>
-			</div>
-		</div>
-	</footer>
-
-	<hr />
 </div>
diff --git a/src/app/features/administration/form/step-five/step-five.component.html b/src/app/features/administration/form/step-five/step-five.component.html
index 829f19a4..7de723a0 100644
--- a/src/app/features/administration/form/step-five/step-five.component.html
+++ b/src/app/features/administration/form/step-five/step-five.component.html
@@ -1,4 +1,4 @@
-<app-stepper [step_current]="5" [step_max]="step_max"></app-stepper>
+<app-stepper [step_current]="5" [step_max]="5"></app-stepper>
 <div class="columns">
 	<div class="column"></div>
 	<div class="column">
diff --git a/src/app/features/administration/form/step-four/step-four.component.html b/src/app/features/administration/form/step-four/step-four.component.html
index 41c2e770..3ec32b0f 100644
--- a/src/app/features/administration/form/step-four/step-four.component.html
+++ b/src/app/features/administration/form/step-four/step-four.component.html
@@ -1,4 +1,4 @@
-<app-stepper [step_current]="4" [step_max]="step_max"></app-stepper>
+<app-stepper [step_current]="4" [step_max]="5"></app-stepper>
 
 <div class="creator-infos">
 	<label class="" for="creatorEmail">
diff --git a/src/app/features/administration/form/step-one/step-one.component.html b/src/app/features/administration/form/step-one/step-one.component.html
index 0de80b6c..1f7430ae 100644
--- a/src/app/features/administration/form/step-one/step-one.component.html
+++ b/src/app/features/administration/form/step-one/step-one.component.html
@@ -1,5 +1,6 @@
 <div class="step">
-	<form [formGroup]="pollService.form">
+	<form class="min-height" [formGroup]="pollService.form">
+		<app-stepper [step_current]="1" [step_max]="5"></app-stepper>
 		<section class="poll-title">
 			<h2 class="title is-2">
 				{{ 'creation.choose_title' | translate }}
@@ -62,7 +63,7 @@
 						300 caractères maximum
 					</div>
 				</div>
-				<div class="column">
+				<div class="column is-narrow">
 					<button
 						mat-button
 						*ngIf="description.value"
@@ -79,14 +80,10 @@
 		slug: {{ pollService.form.value.custom_url }}
 	</form>
 	<div class="columns">
-		<div class="column">
-			<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']">
-				précédent
-			</button>
-		</div>
+		<div class="column"></div>
 		<div class="column">
 			<!--				[disabled]="form.invalid"-->
-			<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/3']">
+			<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/2']">
 				suivant
 			</button>
 		</div>
diff --git a/src/app/features/administration/form/step-three/step-three.component.html b/src/app/features/administration/form/step-three/step-three.component.html
index 0abfc8bf..e2e6f07b 100644
--- a/src/app/features/administration/form/step-three/step-three.component.html
+++ b/src/app/features/administration/form/step-three/step-three.component.html
@@ -1,145 +1,151 @@
-<app-stepper [step_current]="3" [step_max]="5"></app-stepper>
+<div class="min-height">
+	<app-stepper [step_current]="3" [step_max]="5"></app-stepper>
 
-<!--			choix spécialement pour les dates-->
-<div class="dates-list">
-	<div class="title">
-		<span class="count-dates">
-			{{ pollService.timeList.length }}
-		</span>
-		<span class="count-dates-txt">
-			{{ 'dates.count_time' | translate }}
-			(pour chaque jour)
-		</span>
-	</div>
-	<div class="actions">
-		<button
-			(click)="pollService.addTime()"
-			*ngIf="'false' === pollService.allowSeveralHours"
-			class="btn btn--primary"
-			id="add_time_button"
-		>
-			<i class="fa fa-plus" aria-hidden="true"></i>
-			{{ 'dates.add_time' | translate }}
-		</button>
-		<button
-			(click)="pollService.removeAllTimes()"
-			*ngIf="'false' === pollService.allowSeveralHours"
-			class="btn btn--warning"
-			id="remove_time_button"
-		>
-			<i class="fa fa-trash" aria-hidden="true"></i>
-			Aucune plage horaire
-		</button>
-		<button
-			(click)="pollService.resetTimes()"
-			*ngIf="'false' === pollService.allowSeveralHours"
-			class="btn btn--warning"
-			id="reset_time_button"
-		>
-			<i class="fa fa-refresh" aria-hidden="true"></i>
-			réinitialiser
-		</button>
-	</div>
+	<!--			choix spécialement pour les dates-->
+	<div class="dates-list">
+		<div class="title">
+			<span class="count-dates">
+				{{ pollService.timeList.length }}
+			</span>
+			<span class="count-dates-txt">
+				{{ 'dates.count_time' | translate }}
+				(pour chaque jour)
+			</span>
+		</div>
+		<div class="actions">
+			<button
+				(click)="pollService.addTime()"
+				*ngIf="'false' === pollService.allowSeveralHours"
+				class="btn btn--primary"
+				id="add_time_button"
+			>
+				<i class="fa fa-plus" aria-hidden="true"></i>
+				{{ 'dates.add_time' | translate }}
+			</button>
+			<button
+				(click)="pollService.removeAllTimes()"
+				*ngIf="'false' === pollService.allowSeveralHours"
+				class="btn btn--warning"
+				id="remove_time_button"
+			>
+				<i class="fa fa-trash" aria-hidden="true"></i>
+				Aucune plage horaire
+			</button>
+			<button
+				(click)="pollService.resetTimes()"
+				*ngIf="'false' === pollService.allowSeveralHours"
+				class="btn btn--warning"
+				id="reset_time_button"
+			>
+				<i class="fa fa-refresh" aria-hidden="true"></i>
+				réinitialiser
+			</button>
+		</div>
 
-	<div *ngIf="'false' === pollService.allowSeveralHours" class="identical-dates">
-		<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-			<div *ngFor="let time of pollService.timeList; index as id" class="time-choice" cdkDrag>
-				<label for="timeChoices_{{ id }}">
-					<i class="fa fa-clock-o" aria-hidden="true"></i>
-				</label>
-				<input [(ngModel)]="time.literal" name="timeChoices_{{ id }}" type="text" id="timeChoices_{{ id }}" />
-				<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
-					<i class="fa fa-times" aria-hidden="true"></i>
-				</button>
+		<div *ngIf="'false' === pollService.allowSeveralHours" class="identical-dates">
+			<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
+				<div *ngFor="let time of pollService.timeList; index as id" class="time-choice" cdkDrag>
+					<label for="timeChoices_{{ id }}">
+						<i class="fa fa-clock-o" aria-hidden="true"></i>
+					</label>
+					<input
+						[(ngModel)]="time.literal"
+						name="timeChoices_{{ id }}"
+						type="text"
+						id="timeChoices_{{ id }}"
+					/>
+					<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
+						<i class="fa fa-times" aria-hidden="true"></i>
+					</button>
+				</div>
 			</div>
 		</div>
-	</div>
-	<hr />
-	<span class="count-dates title">
-		{{ pollService.dateList.length }}
-	</span>
-	<span>
-		{{ 'dates.count_dates' | translate }}
-	</span>
-	<button class="btn btn--primary" (click)="pollService.addChoice()">
-		{{ 'dates.add' | translate }}
-	</button>
-	<div *ngFor="let choice of pollService.dateList; index as id" class="date-choice">
-		<input
-			[(ngModel)]="choice.date_object"
-			name="dateChoices_{{ id }}"
-			id="dateChoices_{{ id }}"
-			useValueAsDate
-			type="date"
-		/>
-		<button (click)="pollService.dateList.splice(id, 1)" class="btn btn-warning">
-			<i class="fa fa-times" aria-hidden="true"></i>
+		<hr />
+		<span class="count-dates title">
+			{{ pollService.dateList.length }}
+		</span>
+		<span>
+			{{ 'dates.count_dates' | translate }}
+		</span>
+		<button class="btn btn--primary" (click)="pollService.addChoice()">
+			{{ 'dates.add' | translate }}
 		</button>
-		<button
-			(click)="pollService.addTimeToDate(choice, id)"
-			*ngIf="'true' === pollService.allowSeveralHours"
-			class="btn btn--primary"
-		>
-			{{ 'dates.add_time' | translate }}
-		</button>
-		<div *ngIf="'true' === pollService.allowSeveralHours" class="several-times">
-			<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
-				<input
-					[(ngModel)]="timeItem.literal"
-					name="dateTime_{{ id }}_Choices_{{ idTime }}"
-					id="dateTime_{{ id }}_Choices_{{ idTime }}"
-					type="text"
-				/>
-				<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
-					<i class="fa fa-times" aria-hidden="true"></i>
-				</button>
-			</div>
-		</div>
-	</div>
-</div>
-
-<button
-	(click)="pollService.showDateInterval = !pollService.showDateInterval"
-	[ngClass]="{ active: pollService.showDateInterval }"
-	class="btn btn--primary"
-	id="toggle_interval_button"
->
-	<i class="fa fa-clock-o" aria-hidden="true"></i>
-	{{ 'dates.add_interval' | translate }}
-</button>
-<section *ngIf="pollService.showDateInterval" class="date-interval form-row">
-	<h2>{{ 'dates.add_interval' | translate }}</h2>
-	<div class="columns">
-		<div class="column">
-			{{ 'dates.interval_propose' | translate }}
-		</div>
-		<div class="column">
-			<label for="start_interval" class="hidden">start</label>
+		<div *ngFor="let choice of pollService.dateList; index as id" class="date-choice">
 			<input
-				id="start_interval"
-				(change)="pollService.countDays()"
-				formControlName="startDateInterval"
+				[(ngModel)]="choice.date_object"
+				name="dateChoices_{{ id }}"
+				id="dateChoices_{{ id }}"
+				useValueAsDate
 				type="date"
 			/>
+			<button (click)="pollService.dateList.splice(id, 1)" class="btn btn-warning">
+				<i class="fa fa-times" aria-hidden="true"></i>
+			</button>
+			<button
+				(click)="pollService.addTimeToDate(choice, id)"
+				*ngIf="'true' === pollService.allowSeveralHours"
+				class="btn btn--primary"
+			>
+				{{ 'dates.add_time' | translate }}
+			</button>
+			<div *ngIf="'true' === pollService.allowSeveralHours" class="several-times">
+				<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
+					<input
+						[(ngModel)]="timeItem.literal"
+						name="dateTime_{{ id }}_Choices_{{ idTime }}"
+						id="dateTime_{{ id }}_Choices_{{ idTime }}"
+						type="text"
+					/>
+					<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
+						<i class="fa fa-times" aria-hidden="true"></i>
+					</button>
+				</div>
+			</div>
 		</div>
 	</div>
-	<div class="columns">
-		<div class="column">
-			{{ 'dates.interval_span' | translate }}
-		</div>
-		<div class="column">
-			<label for="end_interval" class="hidden">end</label>
-			<input id="end_interval" formControlName="endDateInterval" type="date" />
-		</div>
-	</div>
-	<button (click)="pollService.addIntervalOfDates()" class="btn btn-block btn--primary">
-		<i class="fa fa-plus" aria-hidden="true"></i>
-		{{ 'dates.interval_button' | translate }}
-		{{ pollService.intervalDays }}
-		{{ 'dates.interval_button_dates' | translate }}
-	</button>
-</section>
 
+	<button
+		(click)="pollService.showDateInterval = !pollService.showDateInterval"
+		[ngClass]="{ active: pollService.showDateInterval }"
+		class="btn btn--primary"
+		id="toggle_interval_button"
+	>
+		<i class="fa fa-clock-o" aria-hidden="true"></i>
+		{{ 'dates.add_interval' | translate }}
+	</button>
+	<section *ngIf="pollService.showDateInterval" class="date-interval form-row">
+		<h2>{{ 'dates.add_interval' | translate }}</h2>
+		<div class="columns">
+			<div class="column">
+				{{ 'dates.interval_propose' | translate }}
+			</div>
+			<div class="column">
+				<label for="start_interval" class="hidden">start</label>
+				<input
+					id="start_interval"
+					(change)="pollService.countDays()"
+					formControlName="startDateInterval"
+					type="date"
+				/>
+			</div>
+		</div>
+		<div class="columns">
+			<div class="column">
+				{{ 'dates.interval_span' | translate }}
+			</div>
+			<div class="column">
+				<label for="end_interval" class="hidden">end</label>
+				<input id="end_interval" formControlName="endDateInterval" type="date" />
+			</div>
+		</div>
+		<button (click)="pollService.addIntervalOfDates()" class="btn btn-block btn--primary">
+			<i class="fa fa-plus" aria-hidden="true"></i>
+			{{ 'dates.interval_button' | translate }}
+			{{ pollService.intervalDays }}
+			{{ 'dates.interval_button_dates' | translate }}
+		</button>
+	</section>
+</div>
 <div class="columns">
 	<div class="column">
 		<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/2']">
diff --git a/src/app/features/administration/form/step-three/step-three.component.ts b/src/app/features/administration/form/step-three/step-three.component.ts
index 26792249..c04a68f5 100644
--- a/src/app/features/administration/form/step-three/step-three.component.ts
+++ b/src/app/features/administration/form/step-three/step-three.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { PollService } from '../../../../core/services/poll.service';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
 @Component({
 	selector: 'app-step-three',
@@ -15,4 +16,8 @@ export class StepThreeComponent implements OnInit {
 	constructor(public pollService: PollService) {}
 
 	ngOnInit(): void {}
+
+	drop(event: CdkDragDrop<string[]>) {
+		// moveItemInArray(this.pollService.choices, event.previousIndex, event.currentIndex);
+	}
 }
diff --git a/src/app/features/administration/form/step-two/step-two.component.html b/src/app/features/administration/form/step-two/step-two.component.html
index f3e786f9..4ffd4b05 100644
--- a/src/app/features/administration/form/step-two/step-two.component.html
+++ b/src/app/features/administration/form/step-two/step-two.component.html
@@ -1,28 +1,30 @@
-<app-stepper [step_current]="2" [step_max]="5"></app-stepper>
 <div class="form-field poll-kind">
-	<h2 class="title is-2">
-		{{ 'creation.want' | translate }}
-	</h2>
-	<div class="kind-of-poll columns">
-		<div class="column">
-			<button
-				class="button is-fullwidth"
-				[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
-				(click)="pollService.form.controls.isAboutDate.setValue(true)"
-			>
-				<i class="fa fa-calendar"></i>
-				{{ 'creation.kind.date' | translate }}
-			</button>
-		</div>
-		<div class="column">
-			<button
-				class="button is-fullwidth"
-				[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
-				(click)="pollService.form.controls.isAboutDate.setValue(false)"
-			>
-				<i class="fa fa-list-ul"></i>
-				{{ 'creation.kind.classic' | translate }}
-			</button>
+	<div class="min-height">
+		<app-stepper [step_current]="2" [step_max]="5"></app-stepper>
+		<h2 class="title is-2">
+			{{ 'creation.want' | translate }}
+		</h2>
+		<div class="kind-of-poll columns">
+			<div class="column">
+				<button
+					class="button is-fullwidth"
+					[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
+					(click)="pollService.form.controls.isAboutDate.setValue(true)"
+				>
+					<i class="fa fa-calendar"></i>
+					{{ 'creation.kind.date' | translate }}
+				</button>
+			</div>
+			<div class="column">
+				<button
+					class="button is-fullwidth"
+					[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
+					(click)="pollService.form.controls.isAboutDate.setValue(false)"
+				>
+					<i class="fa fa-list-ul"></i>
+					{{ 'creation.kind.classic' | translate }}
+				</button>
+			</div>
 		</div>
 	</div>
 	<div class="columns">
diff --git a/src/app/features/administration/form/step-two/step-two.component.ts b/src/app/features/administration/form/step-two/step-two.component.ts
index f6d26010..f5fa17d9 100644
--- a/src/app/features/administration/form/step-two/step-two.component.ts
+++ b/src/app/features/administration/form/step-two/step-two.component.ts
@@ -53,10 +53,6 @@ export class StepTwoComponent implements OnInit {
 
 	resetTimes() {}
 
-	drop(event: CdkDragDrop<string[]>) {
-		// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
-	}
-
 	addChoice() {}
 
 	addTimeToDate(choice: any, id: number) {}
diff --git a/src/styles/partials/global.scss b/src/styles/partials/global.scss
index 73a57f4e..d305dd2f 100644
--- a/src/styles/partials/global.scss
+++ b/src/styles/partials/global.scss
@@ -4,3 +4,7 @@ html {
 	font-size: 1rem; /* 16px */
 	color: $font_color;
 }
+
+.min-height {
+	min-height: 50vh;
+}