From c6d5a8fc8cf010ada254c832b06932cd8d667d66 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Sun, 14 Nov 2021 15:26:26 +0100
Subject: [PATCH] stepper shortcuts option

---
 .../step-three/step-three.component.html      | 149 +++++++++---------
 .../stepper/stepper.component.html            |  10 ++
 .../stepper/stepper.component.scss            |  10 ++
 .../stepper/stepper.component.ts              |   4 +
 src/environments/environment.prod.ts          |   1 +
 src/environments/environment.ts               |   3 +-
 src/styles/partials/_forms.scss               |  12 +-
 7 files changed, 109 insertions(+), 80 deletions(-)

diff --git a/src/app/features/administration/form/steps/step-three/step-three.component.html b/src/app/features/administration/form/steps/step-three/step-three.component.html
index 2bd90e8b..46acb886 100644
--- a/src/app/features/administration/form/steps/step-three/step-three.component.html
+++ b/src/app/features/administration/form/steps/step-three/step-three.component.html
@@ -2,83 +2,86 @@
 	<app-stepper [step_current]="3" [step_max]="5"></app-stepper>
 	<app-errors-list [form]="pollService.form"></app-errors-list>
 	<!--			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"
+	<span class="count-dates title">
+		{{ pollService.calendar.length }}
+	</span>
+	<span> - {{ 'dates.count_dates' | translate }} </span>
+	<div class="calendar">
+		<p-calendar
+			[(ngModel)]="pollService.calendar"
+			firstDayOfWeek="5"
+			selectionMode="multiple"
+			inputId="multiple"
+			showButtonBar="true"
+			[locale]="'calendar_widget' | translate"
+			[inline]="true"
+			[showWeek]="true"
+		></p-calendar>
+	</div>
+</div>
+<div class="columns">
+	<div class="column">
+		<div class="dates-list">
+			<div class="actions">
+				<button
+					(click)="pollService.addTime()"
+					*ngIf="false == pollService.allowSeveralHours"
+					class="button is-primary is-block is-fullwidth"
+					id="add_time_button"
+				>
+					<i class="fa fa-plus" aria-hidden="true"></i>
+					{{ 'dates.add_time' | translate }}
+				</button>
+				<button
+					(click)="pollService.removeAllTimes()"
+					*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
+					class="btn is-warning marged"
+					id="remove_time_button"
+				>
+					<i class="fa fa-trash" aria-hidden="true"></i>
+					Aucune plage horaire
+				</button>
+				<button
+					(click)="pollService.resetTimes()"
+					*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
+					class="btn is-warning marged"
+					id="reset_time_button"
+				>
+					<i class="fa fa-refresh" aria-hidden="true"></i>
+					réinitialiser
+				</button>
+			</div>
+			<div class="title" *ngIf="pollService.timeList.length">
+				<span class="count-dates">
+					{{ pollService.timeList.length }}
+				</span>
+				<span class="count-dates-txt">
+					{{ 'dates.count_time' | translate }}
+					(pour chaque jour)
+				</span>
+			</div>
+			<div
+				*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
+				class="marged padded identical-dates"
 			>
-				<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 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.calendar.length }}
-		</span>
-		<span>
-			{{ 'dates.count_dates' | translate }}
-		</span>
-		<div class="calendar">
-			<p-calendar
-				[(ngModel)]="pollService.calendar"
-				firstDayOfWeek="5"
-				selectionMode="multiple"
-				inputId="multiple"
-				showButtonBar="true"
-				[locale]="'calendar_widget' | translate"
-				[inline]="true"
-				[showWeek]="true"
-			></p-calendar>
-		</div>
 	</div>
 </div>
 <div class="columns">
diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html
index 6d196e3e..9fb6739a 100644
--- a/src/app/features/administration/stepper/stepper.component.html
+++ b/src/app/features/administration/stepper/stepper.component.html
@@ -3,9 +3,19 @@
 		<h2 class="title is-2">
 			Étape {{ step_current }} /
 			{{ step_max }}
+			<span class="poll-title">
+				{{ pollService.form.value.title }}
+			</span>
 		</h2>
 	</div>
 	<div class="step-bar-container" style="width: 100%;">
 		<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
 	</div>
+	<div class="shortcuts">
+		<a class="shortcut" href="#" [routerLink]="['/administration/step/1']">1</a>
+		<a class="shortcut" href="#" [routerLink]="['/administration/step/2']">2</a>
+		<a class="shortcut" href="#" [routerLink]="['/administration/step/3']">3</a>
+		<a class="shortcut" href="#" [routerLink]="['/administration/step/4']">4</a>
+		<a class="shortcut" href="#" [routerLink]="['/administration/step/5']">5</a>
+	</div>
 </section>
diff --git a/src/app/features/administration/stepper/stepper.component.scss b/src/app/features/administration/stepper/stepper.component.scss
index 186e7dd5..8f135753 100644
--- a/src/app/features/administration/stepper/stepper.component.scss
+++ b/src/app/features/administration/stepper/stepper.component.scss
@@ -17,3 +17,13 @@
 	min-width: 1px;
 	background: $primary_color;
 }
+.shortcut {
+	background: $secondary_color;
+	color: white;
+	padding: 1em;
+	margin: 1em;
+	display: inline-block;
+	border-radius: 100%;
+	text-align: center;
+	width: 4em;
+}
diff --git a/src/app/features/administration/stepper/stepper.component.ts b/src/app/features/administration/stepper/stepper.component.ts
index cf7163c8..9f4fc3e7 100644
--- a/src/app/features/administration/stepper/stepper.component.ts
+++ b/src/app/features/administration/stepper/stepper.component.ts
@@ -1,4 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { PollService } from '../../../core/services/poll.service';
+import { environment } from '../../../../environments/environment';
 
 @Component({
 	selector: 'app-stepper',
@@ -10,4 +12,6 @@ export class StepperComponent {
 	public step_current: number = 1;
 	@Input()
 	public step_max: number = 5;
+	public show_shortcuts = environment.showStepperShortcuts;
+	constructor(public pollService: PollService) {}
 }
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 7be35465..646996e4 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -21,6 +21,7 @@ export const environment = {
 	advanced_options_display: false,
 	autoSendNewPoll: false,
 	interval_days_default: 7,
+	showStepperShortcuts: true,
 	expiresDaysDelay: 60,
 	maxCountOfAnswers: 150,
 	appTitle: 'FramaDate Funky',
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 95c54cfb..ee72eb3a 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -18,10 +18,11 @@ export const environment = {
 	showDemoWarning: false,
 	// autoSendNewPoll: true,
 	autoSendNewPoll: false,
+	showStepperShortcuts: true,
 	interval_days_default: 7,
 	expiresDaysDelay: 60,
 	maxCountOfAnswers: 150,
-	appTitle: 'Framadate Funky',
+	appTitle: 'Framadate',
 	appVersion: '0.6.0',
 	appLogo: 'assets/img/logo.png',
 	api: endpoints,
diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss
index 291955de..50346db9 100644
--- a/src/styles/partials/_forms.scss
+++ b/src/styles/partials/_forms.scss
@@ -5,7 +5,7 @@ app-step-two,
 app-step-three,
 app-step-four,
 app-step-five {
-	padding: 2em 1em;
+	padding: 2em 2.5em;
 	display: block;
 }
 
@@ -221,18 +221,18 @@ mat-checkbox {
 .ng-pristine,
 .ng-dirty {
 	//border-left: #ccc 3px solid;
-	padding-left: 1em;
+	//padding-left: 1em;
 }
 
 .ng-touched.ng-invalid {
-	border-left: $danger 3px solid;
-	padding-left: 1em;
+	//border-left: $danger 3px solid;
+	//padding-left: 1em;
 }
 
 .theme-dark-crystal {
 	.ng-touched.ng-valid {
-		border-left: $success 3px solid;
-		padding-left: 1em;
+		//border-left: $success 3px solid;
+		//padding-left: 1em;
 	}
 }