Merge branch 'creation-calendar-and-cancellation' into 'master'

Creation calendar and cancellation

See merge request framasoft/framadate/funky-framadate-front!51

angular.json

@@ -22,10 +22,16 @@
 						"main": "src/main.ts",
 						"polyfills": "src/polyfills.ts",
 						"tsConfig": "tsconfig.app.json",
-						"assets": ["src/favicon.ico", "src/assets"],
+						"assets": [
+							"src/favicon.ico",
+							"src/assets"
+						],
 						"styles": [
 							"node_modules/fork-awesome/css/fork-awesome.min.css",
 							"node_modules/bulma-switch/dist/css/bulma-switch.min.css",
+							"node_modules/primeicons/primeicons.css",
+							"node_modules/primeng/resources/themes/saga-blue/theme.css",
+							"node_modules/primeng/resources/primeng.min.css",
 							"src/styles.scss"
 						],
 						"scripts": [
@@ -93,8 +99,14 @@
 				"lint": {
 					"builder": "@angular-devkit/build-angular:tslint",
 					"options": {
-						"tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
-						"exclude": ["**/node_modules/**"]
+						"tsConfig": [
+							"tsconfig.app.json",
+							"tsconfig.spec.json",
+							"e2e/tsconfig.json"
+						],
+						"exclude": [
+							"**/node_modules/**"
+						]
 					}
 				},
 				"e2e": {

mocks/old-stuff/config/defaultConfigs.ts

@@ -1,5 +1,5 @@
 export interface DateChoice {
-	literal: string;
+	literal: String;
 	timeSlices: TimeSlices[];
 	date_object: Date;
 }

package.json

@@ -59,6 +59,7 @@
 		"ngx-markdown": "^9.0.0",
 		"ngx-webstorage": "^5.0.0",
 		"node-forge": "^0.10.0",
+		"primeicons": "^5.0.0",
 		"primeng": "^11.0.0",
 		"quill": "^1.3.7",
 		"rxjs": "^6.5.5",

src/app/app.component.ts

@@ -101,7 +101,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 		});
 
 		// debug cors
-		this.apiService.getAllAvailablePolls();
+		// this.apiService.getAllAvailablePolls();
 	}
 
 	ngAfterViewInit(): void {

src/app/core/models/dateChoice.model.ts

@@ -2,6 +2,7 @@ export interface DateChoice {
 	literal: string;
 	timeSlices: TimeSlices[];
 	date_object: Date;
+	date_input: string;
 }
 
 export interface TimeSlices {

src/app/core/services/date.utilities.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
-import { DateChoice, defaultTimeOfDay } from '../../../../mocks/old-stuff/config/defaultConfigs';
+import { defaultTimeOfDay } from '../../../../mocks/old-stuff/config/defaultConfigs';
+import { DateChoice } from '../models/dateChoice.model';
 
 @Injectable({
 	providedIn: 'root',
@@ -91,37 +92,43 @@ export class DateUtilitiesService {
 		return 0;
 	}
 
+	makeDefaultCalendarDateChoices(): Date[] {
+		return [
+			this.addDaysToDate(1, new Date()),
+			this.addDaysToDate(2, new Date()),
+			this.addDaysToDate(3, new Date()),
+		];
+	}
 	/**
 	 * fill default dates for today + the next 3 dateChoices
 	 */
 	makeDefaultDateChoices(): DateChoice[] {
 		const today = new Date();
-		const ladate = this.addDaysToDate(0, today);
 		const ladate2 = this.addDaysToDate(1, today);
 		const ladate3 = this.addDaysToDate(2, today);
 		const ladate4 = this.addDaysToDate(3, today);
 
 		return [
-			{
-				literal: this.formateDateToInputStringNg(ladate),
-				timeSlices: Object.create(defaultTimeOfDay),
-				date_object: ladate,
-			},
-			{
-				literal: this.formateDateToInputStringNg(ladate2),
-				timeSlices: Object.create(defaultTimeOfDay),
-				date_object: ladate2,
-			},
-			{
-				literal: this.formateDateToInputStringNg(ladate3),
-				timeSlices: Object.create(defaultTimeOfDay),
-				date_object: ladate3,
-			},
-			{
-				literal: this.formateDateToInputStringNg(ladate4),
-				timeSlices: Object.create(defaultTimeOfDay),
-				date_object: ladate4,
-			},
+			this.convertDateToDateChoiceObject(ladate2),
+			this.convertDateToDateChoiceObject(ladate3),
+			this.convertDateToDateChoiceObject(ladate4),
 		];
 	}
+
+	/**
+	 * convert a date to a DateChoice
+	 * @param date
+	 */
+	convertDateToDateChoiceObject(date: Date): DateChoice {
+		let isUnder10 = date.getDate() < 10;
+		let day = isUnder10 ? `0${date.getDate()}` : date.getDate();
+		// get month is based on 0, so yeah
+		let input = `${date.getFullYear()}-${date.getMonth() + 1}-${day}`;
+		return {
+			literal: this.formateDateToInputStringNg(date),
+			timeSlices: Object.create(defaultTimeOfDay),
+			date_object: date,
+			date_input: input,
+		};
+	}
 }

src/app/core/services/poll.service.ts

@@ -33,7 +33,7 @@ export class PollService implements Resolve<Poll> {
 	public endDateInterval: string;
 	public intervalDays: number = 1;
 	public intervalDaysDefault = 7;
-	public dateList: DateChoice[] = []; // sets of days as strings, config to set identical time for days in a special days poll
+	public dateChoiceList: DateChoice[] = []; // sets of days as strings, config to set identical time for days in a special days poll
 	public timeList: TimeSlices[] = []; // ranges of time expressed as strings
 	public previousRouteName: string = '/administration';
 	public nextRouteName: string = '/administration/step/2';
@@ -67,11 +67,9 @@ export class PollService implements Resolve<Poll> {
 		this.createFormGroup();
 
 		// fill in the next 3 days of the calendar date picker
-		this.calendar = [
-			this.DateUtilitiesService.addDaysToDate(1, new Date()),
-			this.DateUtilitiesService.addDaysToDate(2, new Date()),
-			this.DateUtilitiesService.addDaysToDate(3, new Date()),
-		];
+		this.calendar = this.DateUtilitiesService.makeDefaultCalendarDateChoices();
+		this.dateChoiceList = this.DateUtilitiesService.makeDefaultDateChoices();
+
 		// disable days before today
 		for (let i = 1; i < 31; i++) {
 			this.disabled_dates.push(this.DateUtilitiesService.addDaysToDate(-i, new Date()));
@@ -142,6 +140,7 @@ export class PollService implements Resolve<Poll> {
 			hasMaxCountOfAnswers: [300, [Validators.required]],
 			useVoterUniqueLink: [false, [Validators.required]],
 			voterEmailList: ['', []],
+			hasSeveralHours: [false, []],
 			allowNewDateTime: [true, [Validators.required]],
 		});
 		this.form = form;
@@ -306,12 +305,12 @@ export class PollService implements Resolve<Poll> {
 				timeList: [],
 			});
 		});
-		this.dateList = [...new Set(converted)];
+		this.dateChoiceList = [...new Set(converted)];
 		// add only dates that are not already present with a Set of unique items
-		console.log('this.dateList', this.dateList);
+		console.log('this.dateChoiceList', this.dateChoiceList);
 		this.showDateInterval = false;
 
-		this.form.patchValue({ choices: this.dateList });
+		this.form.patchValue({ choices: this.dateChoiceList });
 
 		this.toastService.display(`les dates ont été ajoutées aux réponses possibles.`);
 	}
@@ -662,8 +661,39 @@ export class PollService implements Resolve<Poll> {
 		});
 	}
 
-	convertCalendarDatesToChoices(array_dates) {
-		return array_dates;
+	/**
+	 * convertir les dates de la propriété Calendar en objets de saisie de texte
+	 */
+	convertCalendarToText() {
+		let converted = [];
+		for (let someDate of this.calendar) {
+			converted.push(this.DateUtilitiesService.convertDateToDateChoiceObject(someDate));
+		}
+		this.dateChoiceList = converted.sort((first: any, second: any) => {
+			return first.date_object - second.date_object;
+		});
+
+		return converted;
+	}
+
+	/**
+	 * convert the DateChoices to an arrray of Dates for calendar picker
+	 */
+	convertTextToCalendar() {
+		console.log('convert text to calendar', this.dateChoiceList);
+		let converted = [];
+		for (let someDateChoice of this.dateChoiceList) {
+			let dateObj = new Date(someDateChoice.date_input);
+			console.log('dateObj', dateObj);
+			// check that date is not part of the disabled dates
+			if (this.disabled_dates.indexOf(dateObj) === -1) {
+				converted.push(dateObj);
+			}
+		}
+
+		console.log('converted', converted);
+		this.calendar = converted;
+		return;
 	}
 
 	patchFormWithPoll(poll: Poll) {
@@ -693,7 +723,7 @@ export class PollService implements Resolve<Poll> {
 				const field = form.value[pk];
 				newpoll[pk] = field;
 			} else {
-				// console.log('manque pollKey', pk);
+				console.log('newPollFromForm : manque pollKey', pk);
 			}
 		}
 
@@ -720,11 +750,7 @@ export class PollService implements Resolve<Poll> {
 
 			for (let elem of this.calendar) {
 				console.log('elem', elem);
-				let converted_day = {
-					literal: this.DateUtilitiesService.formateDateToInputStringNg(elem),
-					timeSlices: [],
-					date_object: elem,
-				};
+				let converted_day = this.DateUtilitiesService.convertDateToDateChoiceObject(elem);
 				newpoll.dateChoices.push(converted_day);
 			}
 			console.log('newpoll.dateChoices', newpoll.dateChoices);

src/app/features/administration/administration.module.ts

@@ -28,6 +28,7 @@ import { DayListComponent } from './form/date/list/day/day-list.component';
 import { PickerComponent } from './form/date/picker/picker.component';
 import { TimeListComponent } from './form/date/list/time/time-list.component';
 import { AdminConsultationComponent } from './consultation/consultation.component';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
 
 @NgModule({
 	declarations: [
@@ -62,6 +63,7 @@ import { AdminConsultationComponent } from './consultation/consultation.componen
 		FormsModule,
 		TranslateModule.forChild({ extend: true }),
 		DragDropModule,
+		ConfirmDialogModule,
 	],
 })
 export class AdministrationModule {}

src/app/features/administration/form/date-select/date-select.component.html

@@ -98,11 +98,7 @@
 			<app-shortcuts-help *ngIf="display"></app-shortcuts-help>
 			<br />
 			<br />
-			<app-day-list
-				[form]="form"
-				[dateChoices]="dateChoices"
-				[hasSeveralHours]="form.value.hasSeveralHours"
-			></app-day-list>
+			<app-day-list [form]="form" [hasSeveralHours]="form.value.hasSeveralHours"></app-day-list>
 		</div>
 	</div>
 </div>

src/app/features/administration/form/date/list/day/day-list.component.html

@@ -6,14 +6,6 @@
 				{{ 'dates.add' | translate }}
 			</button>
 		</div>
-		<div class="column">
-			<span class="count-dates title">
-				{{ dateChoices.length }}
-			</span>
-			<span>
-				{{ 'dates.count_dates' | translate }}
-			</span>
-		</div>
 	</div>
 
 	<div
@@ -36,12 +28,10 @@
 					</span>
 				</span>
 				<input
-					[(ngModel)]="choice.date_object"
-					(keyup)="keyOnChoice($event, id)"
+					[(ngModel)]="choice.date_input"
 					class="date-choice-item"
 					name="dateChoices_{{ id }}"
 					id="dateChoices_{{ id }}"
-					useValueAsDate
 					type="date"
 				/>
 				<button (click)="dateChoices.splice(id, 1)" class="btn btn-warning">
@@ -55,7 +45,7 @@
 					<div class="text-right">
 						<button (click)="addTimeToDate(choice, id)" class="btn btn--primary">
 							<i class="fa fa-plus"></i>
-							<!--							{{ 'dates.add_time' | translate }}-->
+							{{ 'dates.add_time' | translate }}
 							<i class="fa fa-clock-o"></i>
 						</button>
 					</div>

src/app/features/administration/form/date/list/day/day-list.component.ts

@@ -7,7 +7,8 @@ import { StorageService } from '../../../../../../core/services/storage.service'
 import { MatDialog } from '@angular/material/dialog';
 import { ShortcutsHelpComponent } from '../../../../../shared/components/ui/shortcuts-help/shortcuts-help.component';
 import { DateChoice } from '../../../../../../core/models/dateChoice.model';
-
+import { PollService } from '../../../../../../core/services/poll.service';
+import { DateUtilitiesService } from '../../../../../../core/services/date.utilities.service';
 @Component({
 	selector: 'app-day-list',
 	templateUrl: './day-list.component.html',
@@ -17,8 +18,7 @@ import { DateChoice } from '../../../../../../core/models/dateChoice.model';
 export class DayListComponent {
 	@Input()
 	form: FormGroup;
-	@Input()
-	public dateChoices: Array<DateChoice> = [];
+	public dateChoices: DateChoice[] = [];
 	@Input()
 	public hasSeveralHours: boolean;
 	timeList: any;
@@ -27,11 +27,13 @@ export class DayListComponent {
 	constructor(
 		public dialog: MatDialog,
 		private toastService: ToastService,
+		private pollService: PollService,
+		private dateUtilitiesService: DateUtilitiesService,
 		private cd: ChangeDetectorRef,
 		@Inject(DOCUMENT) private document: any,
 		private storageService: StorageService
 	) {
-		// this.setDemoTextChoices();
+		this.dateChoices = this.pollService.dateChoiceList;
 	}
 
 	reinitChoices(): void {
@@ -127,12 +129,24 @@ export class DayListComponent {
 	}
 
 	addChoice(optionalLabel = ''): void {
-		this.storageService.dateChoices.push({
-			literal: '',
-			timeSlices: [],
-			date_object: new Date(),
-		});
+		let lastDateChoice = this.pollService.dateChoiceList[this.pollService.dateChoiceList.length];
+		console.log('lastDateChoice', lastDateChoice);
+		let lastDateChoiceObject = this.dateUtilitiesService.addDaysToDate(
+			this.pollService.dateChoiceList.length,
+			new Date()
+		);
 
+		if (lastDateChoice && lastDateChoice.date_object) {
+			lastDateChoiceObject = lastDateChoice.date_object;
+		}
+		this.pollService.dateChoiceList.push(
+			this.dateUtilitiesService.convertDateToDateChoiceObject(
+				this.dateUtilitiesService.addDaysToDate(1, lastDateChoiceObject)
+			)
+		);
+		this.pollService.dateChoiceList.sort((a: any, b: any) => {
+			return a.date_object - b.date_object;
+		});
 		this.focusOnChoice(this.storageService.dateChoices.length - 1);
 	}
 
@@ -150,10 +164,6 @@ export class DayListComponent {
 		}
 	}
 
-	openKeyboardShortcutsModal() {
-		this.display = true;
-	}
-
 	isWeekendDay(date_object: Date) {
 		if (date_object) {
 			const day = date_object.getDay();

src/app/features/administration/form/steps/step-one/step-one.component.html

@@ -58,10 +58,31 @@
 			</div>
 		</div>
 	</form>
+	<p-confirmDialog #cd [style]="{ width: '50vw' }">
+		<ng-template pTemplate="header">
+			<h3>{{ 'creation.dialog' | translate }}</h3>
+		</ng-template>
+		<ng-template pTemplate="footer">
+			<button
+				type="button"
+				pButton
+				icon="pi pi-times"
+				[label]="'dialogs.no' | translate"
+				(click)="cd.reject()"
+			></button>
+			<button
+				type="button"
+				pButton
+				icon="pi pi-check"
+				[label]="'dialogs.yes' | translate"
+				(click)="cd.accept()"
+			></button>
+		</ng-template>
+	</p-confirmDialog>
 	<div class="columns">
 		<div class="column">
-			<button class="button is-warning is-fullwidth" [routerLink]="['/']">
-				Annuler
+			<button pButton class="button is-warning is-fullwidth" (click)="cancelCreationDialog()">
+				{{ 'SENTENCES.Cancel' | translate }}
 			</button>
 		</div>
 		<div class="column">

src/app/features/administration/form/steps/step-one/step-one.component.ts

@@ -2,6 +2,8 @@ import { Component, Inject, Input, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { PollService } from '../../../../../core/services/poll.service';
 import { DOCUMENT } from '@angular/common';
+import { ConfirmationService } from 'primeng/api';
+import { Router } from '@angular/router';
 
 @Component({
 	selector: 'app-step-one',
@@ -9,13 +11,18 @@ import { DOCUMENT } from '@angular/common';
 	styleUrls: ['./step-one.component.scss'],
 })
 export class StepOneComponent implements OnInit {
-	constructor(public pollService: PollService, @Inject(DOCUMENT) private document: any) {}
-
 	@Input()
 	step_max: any;
 	@Input()
 	form: FormGroup;
 
+	constructor(
+		public pollService: PollService,
+		@Inject(DOCUMENT) private document: any,
+		private router: Router,
+		private confirmationService: ConfirmationService
+	) {}
+
 	ngOnInit(): void {
 		this.pollService.step_current = 1;
 		const selector = '#title';
@@ -24,4 +31,13 @@ export class StepOneComponent implements OnInit {
 			firstField.focus();
 		}
 	}
+
+	cancelCreationDialog() {
+		this.confirmationService.confirm({
+			message: 'Quitter la création de sondage?',
+			accept: () => {
+				this.router.navigate(['/']);
+			},
+		});
+	}
 }

src/app/features/administration/form/steps/step-three/step-three.component.html

@@ -2,11 +2,6 @@
 	<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-->
-	<span class="count-dates title">
-		{{ pollService.calendar.length }}
-	</span>
-	<span> - {{ 'dates.count_dates' | translate }} </span>
-
 	<div class="calendar" *ngIf="mode_calendar">
 		<p-calendar
 			[(ngModel)]="pollService.calendar"
@@ -20,8 +15,17 @@
 			[showWeek]="false"
 		></p-calendar>
 	</div>
-	<button class="button" (click)="mode_calendar = !mode_calendar" [ngClass]="{ 'is-primary': !mode_calendar }">
-		Saisir les dates manuellement
+
+	<div class="text-date-list" *ngIf="!mode_calendar">
+		<app-day-list
+			[form]="pollService.form"
+			[hasSeveralHours]="pollService.form.value.hasSeveralHours"
+		></app-day-list>
+	</div>
+
+	<button class="button" (click)="changeDateInputMode()" [ngClass]="{ 'is-primary': !mode_calendar }">
+		<span *ngIf="mode_calendar"> <i class="fa fa-pencil"></i> Saisir les dates manuellement </span>
+		<span *ngIf="!mode_calendar"> <i class="fa fa-calendar-o"></i> Saisir les dates dans le calendrier </span>
 	</button>
 </div>
 <div class="columns">
@@ -38,8 +42,9 @@
 					{{ 'dates.add_time' | translate }}
 				</button>
 				<button class="button" (click)="pollService.allowSeveralHours = !pollService.allowSeveralHours">
-					Horaires différentes pour chaque jour
+					<i class="fa fa-clock-o" aria-hidden="true"></i> Horaires différentes pour chaque jour
 				</button>
+
 				<button
 					(click)="pollService.removeAllTimes()"
 					*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"

src/app/features/administration/form/steps/step-three/step-three.component.scss

@@ -7,3 +7,6 @@
 .calendar {
 	margin-top: 1em;
 }
+#add_time_button {
+	margin-bottom: 1em;
+}

src/app/features/administration/form/steps/step-three/step-three.component.ts

@@ -12,7 +12,7 @@ export class StepThreeComponent implements OnInit {
 	step_max: any;
 	@Input()
 	form: any;
-	public mode_calendar = true;
+	public mode_calendar = false;
 
 	constructor(public pollService: PollService) {
 		this.pollService.step_current = 3;
@@ -23,4 +23,10 @@ export class StepThreeComponent implements OnInit {
 	drop(event: CdkDragDrop<string[]>) {
 		// moveItemInArray(this.pollService.choices, event.previousIndex, event.currentIndex);
 	}
+
+	changeDateInputMode() {
+		this.mode_calendar ? this.pollService.convertCalendarToText() : this.pollService.convertTextToCalendar();
+
+		this.mode_calendar = !this.mode_calendar;
+	}
 }

src/app/features/administration/form/steps/step-two/step-two.component.html

@@ -20,6 +20,7 @@
 				<div class="column">
 					<button
 						class="button is-fullwidth"
+						[disabled]="true"
 						[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
 						(click)="pollService.form.controls.isAboutDate.setValue(false)"
 					>

src/app/features/administration/form/steps/step-two/step-two.component.scss

@@ -2,6 +2,7 @@
 
 .kind-of-poll {
 	margin-top: 5em;
+	min-height: 30vh;
 	.fa {
 		margin-right: 1em;
 	}

src/app/features/administration/form/steps/step-two/step-two.component.ts

@@ -42,8 +42,6 @@ export class StepTwoComponent implements OnInit {
 		this.pollService.step_current = 2;
 	}
 
-	addIntervalOfDates() {}
-
 	get choices(): FormArray {
 		return this.form.get('choices') as FormArray;
 	}

src/app/features/administration/stepper/stepper.component.html

@@ -1,4 +1,4 @@
-<section class="creation-stepper">
+<section class="creation-stepper" id="creation_stepper">
 	<div class="shortcuts">
 		<a
 			class="shortcut"
@@ -35,8 +35,20 @@
 			[ngClass]="{ 'is-active': pollService.step_current == 5 }"
 			>5</a
 		>
-		<!--		<a class="shortcut" href="#" [routerLink]="['/administration/step/6']" [ngClass]="{'is-active':pollService.step_current == 6}">6</a>-->
-		<!--		<a class="shortcut" href="#" [routerLink]="['/administration/step/7']" [ngClass]="{'is-active':pollService.step_current == 7}">7</a>-->
+		<a
+			class="shortcut"
+			href="#"
+			[routerLink]="['/administration/step/6']"
+			[ngClass]="{ 'is-active': pollService.step_current == 6 }"
+			>6</a
+		>
+		<a
+			class="shortcut"
+			href="#"
+			[routerLink]="['/administration/step/7']"
+			[ngClass]="{ 'is-active': pollService.step_current == 7 }"
+			>7</a
+		>
 	</div>
 	<div class="step-info">
 		<h2 classs="title is-2" *ngIf="pollService.step_current == 1">
@@ -47,9 +59,42 @@
 				{{ pollService.form.value.title }}
 			</span>
 		</h2>
-		<h3 class="title is-2">Étape {{ step_current }} sur {{ step_max }}</h3>
+		<div class="columns">
+			<div class="column">
+				<h3 class="title is-2">Étape {{ step_current }} sur {{ step_max }}</h3>
+			</div>
+			<div class="column is-narrow has-text-right">
+				<a class="shortcut cancel-button" (click)="cancelDialog()">
+					<i class="fa fa-times"></i>
+				</a>
+			</div>
+		</div>
 	</div>
 	<div class="step-bar-container" style="width: 100%;">
 		<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
 	</div>
+
+	<!--	modale de confirmation pour quitter-->
+	<p-confirmDialog #cd [style]="{ width: '50vw' }">
+		<ng-template pTemplate="header">
+			<h3>{{ 'creation.dialog' | translate }}</h3>
+		</ng-template>
+		<ng-template pTemplate="footer">
+			<button
+				type="button"
+				pButton
+				icon="pi pi-times"
+				[label]="'dialogs.no' | translate"
+				(click)="cd.reject()"
+			></button>
+			<button
+				type="button"
+				pButton
+				icon="pi pi-check"
+				[label]="'dialogs.yes' | translate"
+				(click)="cd.accept()"
+			></button>
+		</ng-template>
+	</p-confirmDialog>
+	<a href="#creation_stepper" (click)="cancelDialog()"></a>
 </section>

src/app/features/administration/stepper/stepper.component.scss

@@ -29,6 +29,16 @@
 	&.is-active {
 		background: $font_color;
 	}
+	&:hover {
+		background: $clicked-color;
+	}
+	&.cancel-button {
+		background: $border-color;
+		margin-top: -0.5em;
+		&:hover {
+			background: $font_color;
+		}
+	}
 }
 .poll-title {
 	color: $d-neutral;

src/app/features/administration/stepper/stepper.component.ts

@@ -1,6 +1,8 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { PollService } from '../../../core/services/poll.service';
 import { environment } from '../../../../environments/environment';
+import { ConfirmationService } from 'primeng/api';
+import { Router } from '@angular/router';
 
 @Component({
 	selector: 'app-stepper',
@@ -13,5 +15,18 @@ export class StepperComponent {
 	@Input()
 	public step_max: number = 5;
 	public show_shortcuts = environment.showStepperShortcuts;
-	constructor(public pollService: PollService) {}
+	constructor(
+		public pollService: PollService,
+		private confirmationService: ConfirmationService,
+		private router: Router
+	) {}
+
+	cancelDialog() {
+		this.confirmationService.confirm({
+			message: 'Quitter la création de sondage?',
+			accept: () => {
+				this.router.navigate(['/']);
+			},
+		});
+	}
 }

src/app/features/administration/success/success.component.scss

@@ -11,6 +11,7 @@ a {
 	max-width: 20em;
 	@extend .truncate;
 }
+.admin-ok pre,
 .truncate {
 	white-space: nowrap;
 	overflow: hidden;

src/app/shared/shared.module.ts

@@ -28,6 +28,8 @@ import { ErasableInputComponent } from './components/ui/erasable-input/erasable-
 import { WipTodoComponent } from './components/ui/wip-todo/wip-todo.component';
 import { ErrorsListComponent } from '../features/shared/components/ui/form/errors-list/errors-list.component';
 import { ShortcutsHelpComponent } from '../features/shared/components/ui/shortcuts-help/shortcuts-help.component';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ConfirmationService } from 'primeng/api';
 
 const COMPONENTS = [
 	ChoiceDetailsComponent,
@@ -63,7 +65,8 @@ const MATERIAL_MODULES = [
 
 @NgModule({
 	declarations: COMPONENTS,
-	imports: [...ANGULAR_MODULES, ...MATERIAL_MODULES],
+	imports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ConfirmDialogModule],
 	exports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ...COMPONENTS],
+	providers: [ConfirmationService],
 })
 export class SharedModule {}

src/assets/i18n/FR.json

@@ -29,6 +29,7 @@
 	"creation": {
 		"title": "Créer un sondage",
 		"want": "Choisissez le type de sondage",
+		"dialog": "Quitter la création de sondage?",
 		"advanced": "Options avancées",
 		"kind": {
 			"classic": "Propositions",
@@ -143,6 +144,10 @@
 		"choiceNotColorblind": "Je ne suis pas",
 		"colorblindText": "daltonien."
 	},
+	"dialogs" : {
+		"no": "non",
+		"yes": "oui"
+	},
 	"selectors": {
 		"lang": "Sélectionner la langue"
 	},

src/environments/environment.ts

@@ -12,16 +12,14 @@ export const environment = {
 	production: false,
 	display_routes: true, // demo paths to test polls
 	autofill_creation: true,
-	advanced_options_display: true,
-	autofill_participation: true,
-	// autofill: false,
+	advanced_options_display: false,
+	autofill_participation: false,
 	showDemoWarning: false,
-	// autoSendNewPoll: true,
 	autoSendNewPoll: false,
 	showStepperShortcuts: true,
 	interval_days_default: 7,
 	expiresDaysDelay: 60,
-	maxCountOfAnswers: 150,
+	maxCountOfAnswers: 300,
 	appTitle: 'Framadate',
 	appVersion: '0.6.0',
 	appLogo: 'assets/img/logo.png',

src/styles/partials/_forms.scss

@@ -190,6 +190,7 @@ mat-checkbox {
 	background: white;
 	border-radius: 4px;
 	overflow: hidden;
+	padding: 1em 2em;
 }
 
 .example-box {
@@ -270,49 +271,49 @@ mat-checkbox {
 	padding: 0.5em;
 	margin: 1em auto;
 
+	p-button,
 	button {
-		border: solid 1px $primary_color;
+		border: solid 1px $secondary_color !important;
+		color: $secondary_color !important;
 	}
 	.p-datepicker-buttonbar {
 		margin-top: 0.5em;
 	}
-	.pi-chevron-left:after {
-		content: '<';
-	}
-
-	.pi-chevron-right:after {
-		content: '>';
-	}
-
 	.p-datepicker-month {
 		margin-right: 1em;
 	}
 
 	.p-datepicker-weeknumber span {
-		border-right: 1px solid $legend_color;
+		border-right: 1px solid $secondary_color;
 	}
 
-	.p-datepicker-today span {
+	.p-datepicker-today td span {
 		font-weight: bold;
-		border: solid 1px $legend_color;
+		border: solid 3px $secondary_color;
+		background: $white;
 	}
 
 	.p-datepicker-calendar td span {
-		padding: 1em;
+		padding: 1.5em 0.5em;
 		width: 3.5em;
 		transition: all ease 0.5s;
+		background: $white;
+		border: solid 1px $secondary_color;
+		color: $secondary_color;
 
 		&:hover {
-			background: mix($white, $legend_color);
+			background: mix($white, $secondary_color);
 			color: $white;
 			transition: all ease 0.2s;
 		}
 	}
 
+	table td > span {
+		border-radius: 0.25em;
+	}
 	.p-highlight {
-		background: $legend_color;
-		color: $white;
-		border-radius: 100%;
+		background: $secondary_color !important;
+		color: $white !important;
 	}
 	.p-disabled {
 		background: $d-grey;
@@ -326,7 +327,7 @@ mat-checkbox {
 		&:nth-of-type(6),
 		&:nth-of-type(7) {
 			//border-left: 1px solid $border-color;
-			background: $grey;
+			background: $grey-lighter;
 		}
 	}
 }

src/styles/partials/_responsive.scss

@@ -14,6 +14,7 @@
 		display: inline-block;
 	}
 	.time-choice {
+		padding: 1em;
 		input {
 			width: 80%;
 		}

yarn.lock

@@ -9463,6 +9463,11 @@ pretty-format@^26.0.0, pretty-format@^26.1.0:
     ansi-styles "^4.0.0"
     react-is "^16.12.0"
 
+primeicons@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/primeicons/-/primeicons-5.0.0.tgz#73a0b6028a77c58a9eeb331ad13aaf085e8451ee"
+  integrity sha512-heygWF0X5HFI1otlZE62pp6ye7sZ8om78J9au2BRkg8O7Y8AHTZ9qKMRzchZUHLe8zUAvdi6hZzzm9XxgwIExw==
+
 primeng@^11.0.0:
   version "11.4.5"
   resolved "https://registry.yarnpkg.com/primeng/-/primeng-11.4.5.tgz#128137d727d555f68c212a1dcb1f2af3b0f4afd4"