dispatch form functions in pollService, copy texts for mobile menu

src/app/core/components/header/header.component.html

@@ -6,11 +6,6 @@
 				<span class="app-title title is-2">
 					{{ appTitle }}
 				</span>
-				<span class="dev-env button has-background-success" *ngIf="!env.production">
-					<i>
-						(dev)
-					</i>
-				</span>
 			</a>
 
 			<a
@@ -43,7 +38,35 @@
 			</div>
 		</div>
 		<div class="mobile-menu" *ngIf="mobileMenuVisible">
-			menu mobile
+			menu mobile ---
+			<button class="button is-default" (click)="mobileMenuVisible = !mobileMenuVisible">fermer</button>
+
+			<ul class="ui-listbox">
+				<li>
+					Imprimer
+				</li>
+				<li>
+					Exporter CSV
+				</li>
+				<li>
+					Modifier
+				</li>
+				<li>
+					URL administrateur
+					<input type="text" />
+					copier
+				</li>
+				<li>
+					Supprimer tous les votes
+				</li>
+				<li>
+					Supprimer tous les commentaires
+				</li>
+				<li>
+					Supprimer le sondage
+				</li>
+				<li></li>
+			</ul>
 		</div>
 	</nav>
 </header>

src/app/core/components/sibebar/navigation/navigation.component.html

@@ -5,10 +5,10 @@
 			<a
 				class="navbar-item"
 				*ngFor="let poll of _pollsAvailables | async"
-				routerLink="{{ '/poll/' + poll.slug + '/consultation' }}"
+				routerLink="{{ '/poll/' + poll.custom_url + '/consultation' }}"
 				routerLinkActive="is-active"
 			>
-				« {{ poll.slug }} »
+				« {{ poll.custom_url }} »
 			</a>
 		</div>
 	</div>

src/app/core/core.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule, Optional, SkipSelf } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -14,7 +14,7 @@ import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
 	declarations: [FooterComponent, HeaderComponent, HomeComponent, LogoComponent, NavigationComponent],
-	imports: [CommonModule, FormsModule, RouterModule, TranslateModule, SharedModule],
+	imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule, TranslateModule, SharedModule],
 	exports: [HeaderComponent, FooterComponent, NavigationComponent, LogoComponent],
 })
 export class CoreModule {

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

@@ -1,5 +1,5 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
+import { ChangeDetectorRef, Inject, Injectable } from '@angular/core';
+import { ActivatedRoute, ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 
 import { Answer } from '../enums/answer.enum';
@@ -12,6 +12,10 @@ import { UserService } from './user.service';
 import { UuidService } from './uuid.service';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../../../environments/environment';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { DateChoice, defaultTimeOfDay, otherDefaultDates } from '../../features/old-stuff/config/defaultConfigs';
+import { DateUtilities } from '../../features/old-stuff/config/DateUtilities';
+import { DOCUMENT } from '@angular/common';
 
 @Injectable({
 	providedIn: 'root',
@@ -19,6 +23,23 @@ import { environment } from '../../../environments/environment';
 export class PollService implements Resolve<Poll> {
 	private _poll: BehaviorSubject<Poll | undefined> = new BehaviorSubject<Poll | undefined>(undefined);
 	public readonly poll: Observable<Poll | undefined> = this._poll.asObservable();
+	public form: FormGroup;
+	public startDateInterval: string;
+	public endDateInterval: string;
+	public intervalDays: any;
+	public intervalDaysDefault = 7;
+	public dateList: DateChoice[] = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
+	public timeList: any = defaultTimeOfDay; // ranges of time expressed as strings
+	public previousRouteName: string = '/administration';
+	public nextRouteName: string = '/administration/step/2';
+	public step_current: number = 1;
+	public step_max: number = 5;
+	public round: Function;
+	public urlPrefix: string = window.location.origin + '/participation/';
+	public advancedDisplayEnabled = false;
+	public showDateInterval = false;
+	public allowSeveralHours = false;
+	public richTextMode = false;
 
 	constructor(
 		private http: HttpClient,
@@ -26,8 +47,78 @@ export class PollService implements Resolve<Poll> {
 		private apiService: ApiService,
 		private userService: UserService,
 		private uuidService: UuidService,
-		private toastService: ToastService
-	) {}
+		private toastService: ToastService,
+		public dateUtilities: DateUtilities,
+		public route: ActivatedRoute,
+		@Inject(DOCUMENT) private document: any,
+		private fb: FormBuilder
+	) {
+		this.createFormGroup();
+		if (environment.poll.autoFillDemo) {
+			this.setDemoValues();
+		}
+	}
+
+	/**
+	 * add example values to the form
+	 */
+	setDemoValues(): void {
+		this.addChoice('orange');
+		this.addChoice('raisin');
+		this.addChoice('abricot');
+
+		this.form.patchValue({
+			title: 'mon titre',
+			description: 'répondez SVP <3 ! *-* ',
+			custom_url: this.uuidService.getUUID(),
+			creatorPseudo: 'Chuck Norris',
+			creatorEmail: 'chucknorris@example.com',
+			isAboutDate: true,
+			whoModifiesAnswers: 'everybody',
+			whoCanChangeAnswers: 'everybody',
+			isProtectedByPassword: false,
+			isOwnerNotifiedByEmailOnNewVote: false,
+			isOwnerNotifiedByEmailOnNewComment: false,
+			isMaybeAnswerAvailable: false,
+			richTextMode: false,
+			areResultsPublic: true,
+			expiracyNumberOfDays: 60,
+		});
+		this.automaticSlug();
+	}
+
+	/**
+	 * set the poll slug from other data of the poll
+	 */
+	automaticSlug() {
+		this.form.patchValue({ custom_url: this.makeSlug(this.form) });
+	}
+
+	public createFormGroup() {
+		let form = this.fb.group({
+			title: ['', [Validators.required, Validators.minLength(12)]],
+			creatorPseudo: ['', [Validators.required]],
+			created_at: [new Date(), [Validators.required]],
+			creatorEmail: ['', [Validators.required]],
+			custom_url: [this.uuidService.getUUID(), [Validators.required]],
+			description: ['', [Validators.required]],
+			choices: new FormArray([]),
+			whoModifiesAnswers: ['', [Validators.required]],
+			whoCanChangeAnswers: ['', [Validators.required]],
+			isAboutDate: [true, [Validators.required]],
+			startDateInterval: ['', [Validators.required]],
+			endDateInterval: ['', [Validators.required]],
+			isProtectedByPassword: [false, [Validators.required]],
+			isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
+			isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
+			isMaybeAnswerAvailable: [false, [Validators.required]],
+			areResultsPublic: [true, [Validators.required]],
+			richTextMode: [false, [Validators.required]],
+			expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
+		});
+		this.form = form;
+		return form;
+	}
 
 	/**
 	 * auto fetch a poll when route is looking for one in the administration pattern
@@ -82,21 +173,217 @@ export class PollService implements Resolve<Poll> {
 	}
 
 	/**
-	 *  make a uniq slug for the current poll creation
+	 * add all the dates between the start and end dates in the interval section
+	 */
+	addIntervalOfDates(): void {
+		const newIntervalArray = this.dateUtilities.getDatesInRange(
+			this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
+			this.dateUtilities.parseInputDateToDateObject(this.endDateInterval),
+			1
+		);
+
+		const converted = [];
+		newIntervalArray.forEach((element) => {
+			converted.push({
+				literal: element.literal,
+				date_object: element.date_object,
+				timeList: [],
+			});
+		});
+		this.dateList = [...new Set(converted)];
+		// add only dates that are not already present with a Set of unique items
+		console.log('this.dateList', this.dateList);
+		this.showDateInterval = false;
+
+		this.form.patchValue({ choices: this.dateList });
+
+		this.toastService.display(`les dates ont été ajoutées aux réponses possibles.`);
+	}
+
+	/**
+	 * handle keyboard shortcuts
+	 * @param $event
+	 * @param choice_number
+	 */
+	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);
+		}
+		if ($event.key == 'ArrowDown') {
+			// add a field if we are on the last choice
+			if (lastChoice) {
+				this.addChoice();
+				this.toastService.display('choix ajouté par raccourci "flèche bas"');
+			} else {
+				this.focusOnChoice(choice_number + 1);
+			}
+		}
+		if ($event.ctrlKey && $event.key == 'Backspace') {
+			this.deleteChoiceField(choice_number);
+			this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
+			this.focusOnChoice(Math.min(choice_number - 1, 0));
+		}
+		if ($event.ctrlKey && $event.key == 'Enter') {
+			// go to other fields
+			const elem = this.document.querySelector('#creatorEmail');
+			if (elem) {
+				elem.focus();
+			}
+		}
+	}
+
+	/**
+	 * change time spans
+	 */
+	addTime() {
+		this.timeList.push({
+			literal: '',
+			timeList: [],
+			date_object: new Date(),
+		});
+	}
+
+	removeAllTimes() {
+		this.timeList = [];
+	}
+
+	resetTimes() {
+		this.timeList = otherDefaultDates;
+	}
+
+	/**
+	 * add a time period to a specific date choice,
+	 * focus on the new input
 	 * @param config
+	 * @param id
+	 */
+	addTimeToDate(config: any, id: number) {
+		this.timeList.push({
+			literal: '',
+			timeList: [],
+			date_object: new Date(),
+		});
+		const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
+		const elem = this.document.querySelector(selector);
+		if (elem) {
+			elem.focus();
+		}
+	}
+
+	public createPoll(): void {
+		console.log('this.form', this.form);
+		const newpoll = this.newPollFromForm(this.form);
+		console.log('newpoll', newpoll);
+		this.apiService.createPoll(newpoll);
+	}
+
+	/**
+	 * default interval of dates proposed is from today to 7 days more
+	 */
+	setDefaultDatesForInterval(): void {
+		const dateCurrent = new Date();
+		const dateJson = dateCurrent.toISOString();
+		this.startDateInterval = dateJson.substring(0, 10);
+		this.endDateInterval = this.dateUtilities
+			.addDaysToDate(this.intervalDaysDefault, dateCurrent)
+			.toISOString()
+			.substring(0, 10);
+		this.form.patchValue({
+			startDateInterval: this.startDateInterval,
+			endDateInterval: this.endDateInterval,
+		});
+		this.countDays();
+	}
+
+	askInitFormDefault(): void {
+		this.initFormDefault(false);
+		this.toastService.display('formulaire réinitialisé');
+	}
+
+	countDays(): void {
+		this.intervalDays = this.dateUtilities.countDays(
+			this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
+			this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
+		);
+	}
+
+	focusOnChoice(index): void {
+		const selector = '#choice_label_' + index;
+		const elem = this.document.querySelector(selector);
+		if (elem) {
+			elem.focus();
+		}
+	}
+
+	deleteChoiceField(index: number): void {
+		if (this.choices.length !== 1) {
+			this.choices.removeAt(index);
+		}
+	}
+
+	initFormDefault(showDemoValues = true): void {
+		this.form = this.createFormGroup();
+		console.log('this.form ', this.form);
+		this.setDefaultDatesForInterval();
+
+		if (showDemoValues) {
+			this.setDemoValues();
+		}
+	}
+
+	get choices(): FormArray {
+		return this.form.get('choices') as FormArray;
+	}
+
+	reinitChoices(): void {
+		this.choices.setValue([]);
+	}
+
+	addChoice(optionalLabel = ''): void {
+		const newControlGroup = this.fb.group({
+			label: this.fb.control('', [Validators.required]),
+			imageUrl: ['', [Validators.required]],
+		});
+
+		if (optionalLabel) {
+			newControlGroup.patchValue({
+				label: optionalLabel,
+				imageUrl: 'mon url',
+			});
+		}
+		this.choices.push(newControlGroup);
+		console.log('this.choices.length', this.choices.length);
+
+		this.focusOnChoice(this.choices.length - 1);
+	}
+
+	/**
+	 *  make a uniq slug for the current poll creation
+	 * @param form
 	 */
-	makeSlug(config: Poll): string {
+	makeSlug(form: FormGroup): string {
 		let str = '';
 		str =
-			config.configuration.dateCreated.getFullYear() +
+			form.value.created_at.getFullYear() +
 			'_' +
-			(config.configuration.dateCreated.getMonth() + 1) +
+			(form.value.created_at.getMonth() + 1) +
 			'_' +
-			config.configuration.dateCreated.getDate() +
+			form.value.created_at.getDate() +
 			'_' +
-			config.owner.pseudo +
+			form.value.creatorPseudo +
 			'_' +
-			config.title;
+			form.value.title;
 		str = str.replace(/^\s+|\s+$/g, ''); // trim
 		str = str.toLowerCase();
 
@@ -212,7 +499,7 @@ export class PollService implements Resolve<Poll> {
 			// access
 			visibility: newpoll.configuration.areResultsPublic, // visible to one with the link:
 			voteChoices: newpoll.configuration.isMaybeAnswerAvailable ? 'yes, maybe, no' : 'yes', // possible answers to a vote choice: only "yes", "yes, maybe, no"
-			creationDate: new Date(),
+			created_at: new Date(),
 			expirationDate: '', // expiracy date
 			voteStackId: null, // id of the vote stack to update
 			pollId: null, // id of the current poll when created. data given by the backend api

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

@@ -3,22 +3,32 @@
 		<h2 classs="title is-2">
 			{{ 'creation.title' | translate }}
 		</h2>
-		<app-stepper [step_current]="step_current" [step_max]="step_max"></app-stepper>
+		<app-stepper [step_current]="pollService.step_current" [step_max]="pollService.step_max"></app-stepper>
 	</header>
 	<section class="step-container">
 		<router-outlet>
-			<app-step-one></app-step-one>
+			<app-step-one [form]="form"></app-step-one>
 		</router-outlet>
 	</section>
 	<footer>
 		<div class="columns">
 			<div class="column">
-				<button class="button is-large is-secondary" [routerLink]="previousRouteName" *ngIf="step_current != 1">
+				<button
+					class="button is-large is-secondary"
+					[routerLink]="pollService.previousRouteName"
+					*ngIf="pollService.step_current != 1"
+				>
 					précédent
 				</button>
 			</div>
 			<div class="column">
-				<button class="button is-primary is-large is-pulled-right" [disabled]="form.invalid">suivant</button>
+				<!--				[disabled]="form.invalid"-->
+				<button
+					class="button is-primary is-large is-pulled-right"
+					[routerLink]="[pollService.nextRouteName, { from: route }]"
+				>
+					suivant
+				</button>
 			</div>
 		</div>
 	</footer>

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

@@ -9,7 +9,7 @@ import { DateUtilities } from '../../old-stuff/config/DateUtilities';
 import { DOCUMENT } from '@angular/common';
 import { DateChoice, defaultTimeOfDay, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
 	selector: 'app-admin-form',
@@ -21,23 +21,6 @@ export class FormComponent implements OnInit {
 	public poll?: Poll;
 	public form: FormGroup;
 
-	public urlPrefix: string = window.location.origin + '/participation/';
-	public advancedDisplayEnabled = false;
-	public showDateInterval = false;
-	public allowSeveralHours = false;
-	public richTextMode = false;
-	startDateInterval: string;
-	endDateInterval: string;
-	intervalDays: any;
-	intervalDaysDefault = 7;
-	dateList: DateChoice[] = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
-	timeList: any = defaultTimeOfDay; // ranges of time expressed as strings
-	step_current: number = 1;
-	step_max: number = 5;
-	public round: Function;
-	private nextRouteName: string = '/administration/step/2';
-	previousRouteName: string = '/administration';
-
 	constructor(
 		private fb: FormBuilder,
 		private cd: ChangeDetectorRef,
@@ -46,273 +29,16 @@ export class FormComponent implements OnInit {
 		private pollService: PollService,
 		private router: Router,
 		public dateUtilities: DateUtilities,
+		public route: ActivatedRoute,
 		private apiService: ApiService,
 		@Inject(DOCUMENT) private document: any
-	) {}
-	drop(event: CdkDragDrop<string[]>) {
-		// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
-	}
-	get choices(): FormArray {
-		return this.form.get('choices') as FormArray;
+	) {
+		this.form = this.pollService.form;
 	}
 
 	ngOnInit(): void {
-		this.initFormDefault();
-		const pollsAvailable = this.pollService.getAllAvailablePolls();
-		console.log('pollsAvailable', pollsAvailable);
-	}
-
-	public createPoll(): void {
-		console.log('this.form', this.form);
-		const newpoll = this.pollService.newPollFromForm(this.form);
-		console.log('newpoll', newpoll);
-		this.apiService.createPoll(newpoll);
-	}
-
-	addChoice(optionalLabel = ''): void {
-		const newControlGroup = this.fb.group({
-			label: this.fb.control('', [Validators.required]),
-			imageUrl: ['', [Validators.required]],
-		});
-
-		if (optionalLabel) {
-			newControlGroup.patchValue({
-				label: optionalLabel,
-				imageUrl: 'mon url',
-			});
-		}
-		this.choices.push(newControlGroup);
-		this.cd.detectChanges();
-		console.log('this.choices.length', this.choices.length);
-
-		this.focusOnChoice(this.choices.length - 1);
-	}
-
-	focusOnChoice(index): void {
-		const selector = '#choice_label_' + index;
-		const elem = this.document.querySelector(selector);
-		if (elem) {
-			elem.focus();
-		}
-	}
-
-	deleteChoiceField(index: number): void {
-		if (this.choices.length !== 1) {
-			this.choices.removeAt(index);
-		}
-	}
-
-	reinitChoices(): void {
-		this.choices.setValue([]);
-	}
-
-	initFormDefault(showDemoValues = true): void {
-		this.form = this.fb.group({
-			title: ['', [Validators.required, Validators.minLength(12)]],
-			creatorPseudo: ['', [Validators.required]],
-			creatorEmail: ['', [Validators.required]],
-			slug: [this.uuidService.getUUID(), [Validators.required]],
-			description: ['', [Validators.required]],
-			choices: new FormArray([]),
-			whoModifiesAnswers: ['', [Validators.required]],
-			whoCanChangeAnswers: ['', [Validators.required]],
-			isAboutDate: [true, [Validators.required]],
-			startDateInterval: ['', [Validators.required]],
-			endDateInterval: ['', [Validators.required]],
-			isProtectedByPassword: [false, [Validators.required]],
-			isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
-			isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
-			isMaybeAnswerAvailable: [false, [Validators.required]],
-			areResultsPublic: [true, [Validators.required]],
-			richTextMode: [false, [Validators.required]],
-			expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
-		});
-		console.log('this.form ', this.form);
-		this.setDefaultDatesForInterval();
-
-		if (showDemoValues) {
-			this.setDemoValues();
-		}
-	}
-
-	/**
-	 * default interval of dates proposed is from today to 7 days more
-	 */
-	setDefaultDatesForInterval(): void {
-		const dateCurrent = new Date();
-		const dateJson = dateCurrent.toISOString();
-		this.startDateInterval = dateJson.substring(0, 10);
-		this.endDateInterval = this.dateUtilities
-			.addDaysToDate(this.intervalDaysDefault, dateCurrent)
-			.toISOString()
-			.substring(0, 10);
-		this.form.patchValue({
-			startDateInterval: this.startDateInterval,
-			endDateInterval: this.endDateInterval,
-		});
-		this.countDays();
-	}
-
-	/**
-	 * add example values to the form
-	 */
-	setDemoValues(): void {
-		this.addChoice('orange');
-		this.addChoice('raisin');
-		this.addChoice('abricot');
-
-		this.form.patchValue({
-			title: 'mon titre',
-			description: 'répondez SVP <3 ! *-* ',
-			slug: this.uuidService.getUUID(),
-			creatorPseudo: 'Chuck Norris',
-			creatorEmail: 'chucknorris@example.com',
-			isAboutDate: true,
-			whoModifiesAnswers: 'everybody',
-			whoCanChangeAnswers: 'everybody',
-			isProtectedByPassword: false,
-			isOwnerNotifiedByEmailOnNewVote: false,
-			isOwnerNotifiedByEmailOnNewComment: false,
-			isMaybeAnswerAvailable: false,
-			richTextMode: false,
-			areResultsPublic: true,
-			expiracyNumberOfDays: 60,
-		});
-		this.automaticSlug();
-	}
-
-	askInitFormDefault(): void {
-		this.initFormDefault(false);
-		this.toastService.display('formulaire réinitialisé');
-	}
-
-	countDays(): void {
-		this.intervalDays = this.dateUtilities.countDays(
-			this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
-			this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
-		);
-		this.cd.detectChanges();
-	}
-
-	/**
-	 * add all the dates between the start and end dates in the interval section
-	 */
-	addIntervalOfDates(): void {
-		const newIntervalArray = this.dateUtilities.getDatesInRange(
-			this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
-			this.dateUtilities.parseInputDateToDateObject(this.endDateInterval),
-			1
-		);
-
-		const converted = [];
-		newIntervalArray.forEach((element) => {
-			converted.push({
-				literal: element.literal,
-				date_object: element.date_object,
-				timeList: [],
-			});
-		});
-		this.dateList = [...new Set(converted)];
-		// add only dates that are not already present with a Set of unique items
-		console.log('this.dateList', this.dateList);
-		this.showDateInterval = false;
-
-		this.form.patchValue({ choices: this.dateList });
-
-		this.toastService.display(`les dates ont été ajoutées aux réponses possibles.`);
-	}
-
-	/**
-	 * handle keyboard shortcuts
-	 * @param $event
-	 * @param choice_number
-	 */
-	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);
-		}
-		if ($event.key == 'ArrowDown') {
-			// add a field if we are on the last choice
-			if (lastChoice) {
-				this.addChoice();
-				this.toastService.display('choix ajouté par raccourci "flèche bas"');
-			} else {
-				this.focusOnChoice(choice_number + 1);
-			}
-		}
-		if ($event.ctrlKey && $event.key == 'Backspace') {
-			this.deleteChoiceField(choice_number);
-			this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
-			this.cd.detectChanges();
-			this.focusOnChoice(Math.min(choice_number - 1, 0));
-		}
-		if ($event.ctrlKey && $event.key == 'Enter') {
-			// go to other fields
-			const elem = this.document.querySelector('#creatorEmail');
-			if (elem) {
-				elem.focus();
-			}
-		}
+		this.pollService.askInitFormDefault();
 	}
 
-	/**
-	 * change time spans
-	 */
-	addTime() {
-		this.timeList.push({
-			literal: '',
-			timeList: [],
-			date_object: new Date(),
-		});
-	}
-
-	removeAllTimes() {
-		this.timeList = [];
-	}
-
-	resetTimes() {
-		this.timeList = otherDefaultDates;
-	}
-
-	/**
-	 * add a time period to a specific date choice,
-	 * focus on the new input
-	 * @param config
-	 * @param id
-	 */
-	addTimeToDate(config: any, id: number) {
-		this.timeList.push({
-			literal: '',
-			timeList: [],
-			date_object: new Date(),
-		});
-		const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
-		this.cd.detectChanges();
-		const elem = this.document.querySelector(selector);
-		if (elem) {
-			elem.focus();
-		}
-	}
-
-	/**
-	 * set the poll slug from other data of the poll
-	 */
-	automaticSlug() {
-		this.poll.slug = this.pollService.makeSlug(this.poll);
-	}
-
-	goNextStep() {
-		this.router.navigate([this.nextRouteName]);
-	}
+	goNextStep() {}
 }

src/app/features/administration/form/step-five/step-five.component.html

@@ -25,7 +25,7 @@
 	</button>
 
 	<div class="well">
-		{{ poll.slug }}
+		{{ poll.custom_url }}
 	</div>
 	<div class="has-background-danger" *ngIf="!form.valid">
 		le formulaire est invalide

src/app/features/administration/form/step-four/step-four.component.html

@@ -1,5 +1,27 @@
 <app-stepper [step_current]="4" [step_max]="step_max"></app-stepper>
 
+<div class="creator-infos">
+	<label class="" for="creatorEmail">
+		<span>
+			{{ 'creation.name' | translate }}
+		</span>
+	</label>
+	<label class="hidden" for="creatorPseudo">
+		<span>
+			{{ 'creation.email' | translate }}
+		</span>
+	</label>
+	<input #title matInput placeholder="pseudo" formControlName="creatorPseudo" id="creatorPseudo" required />
+	<input
+		#title
+		matInput
+		placeholder="mon-email@example.com"
+		formControlName="creatorEmail"
+		id="creatorEmail"
+		required
+	/>
+</div>
+
 <fieldset class="advanced-config">
 	<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
 		<i class="fa fa-save"></i>
@@ -13,13 +35,13 @@
 		<label for="slug">Url pour les participants </label>
 		<br />
 		<span
-			>{{ urlPrefix }} <strong> {{ form.controls.slug.value }} </strong>
+			>{{ urlPrefix }} <strong> {{ form.controls.custom_url.value }} </strong>
 		</span>
-		<app-copy-text [textToCopy]="urlPrefix + form.controls.slug.value"></app-copy-text>
+		<app-copy-text [textToCopy]="urlPrefix + form.controls.custom_url.value"></app-copy-text>
 
 		<button
 			mat-button
-			*ngIf="form.controls.slug.value"
+			*ngIf="form.controls.custom_url.value"
 			matSuffix
 			mat-icon-button
 			aria-label="Clear"

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

@@ -4,56 +4,72 @@
 			<h2 class="title is-2">
 				{{ 'creation.choose_title' | translate }}
 			</h2>
-			<label class="hidden" for="title">Titre</label>
-			<input
-				class="input input-lg"
-				#title
-				matInput
-				[placeholder]="'creation.choose_title_placeholder' | translate"
-				formControlName="title"
-				id="title"
-				autofocus="autofocus"
-				(change)="updateSlug()"
-				required
-			/>
-			<button
-				mat-button
-				*ngIf="title.value"
-				matSuffix
-				mat-icon-button
-				aria-label="Clear"
-				(click)="title.value = ''"
-			>
-				<i class="fa fa-close"></i>
-			</button>
+			<div class="columns">
+				<div class="column">
+					<label class="hidden" for="title">Titre</label>
+					<input
+						class="input-lg"
+						#title
+						[placeholder]="'creation.choose_title_placeholder' | translate"
+						formControlName="title"
+						aria-placeholder="Quel resto ce soir ?"
+						placeholder="Quel resto ce soir ?"
+						id="title"
+						autofocus="autofocus"
+						(change)="updateSlug()"
+						required
+					/>
+				</div>
+				<div class="column is-narrow">
+					<button
+						mat-button
+						*ngIf="title.value"
+						matSuffix
+						mat-icon-button
+						aria-label="Clear"
+						(click)="title.value = ''"
+					>
+						<i class="fa fa-close"></i>
+					</button>
+				</div>
+			</div>
 		</section>
 		<div class="poll-description">
-			<label for="descr">Description (optionnel)</label>
-			<span class="rich-text-toggle">
-				mode de saisie avancée
-				<i class="fa fa-text"></i><input type="checkbox" formControlName="richTextMode" />
-			</span>
-			<textarea
-				#description
-				matInput
-				id="descr"
-				placeholder="Description"
-				formControlName="description"
-				required
-			></textarea>
-			<div class="text-info">
-				300 caractères maximum
+			<div class="columns">
+				<div class="column">
+					<label for="descr">Description (optionnel)</label>
+					<div class="rich-text-toggle">
+						<label for="richTextMode">mode de saisie avancée</label>
+
+						<mat-checkbox formControlName="richTextMode" id="richTextMode"></mat-checkbox>
+					</div>
+					<textarea
+						class="ui-inputtextarea"
+						#description
+						matInput
+						id="descr"
+						class="is-large is-full"
+						placeholder="Description"
+						formControlName="description"
+						required
+					></textarea>
+					<div class="text-info">
+						300 caractères maximum
+					</div>
+				</div>
+				<div class="column">
+					<button
+						mat-button
+						*ngIf="description.value"
+						matSuffix
+						mat-icon-button
+						aria-label="Clear"
+						(click)="description.value = ''"
+					>
+						<i class="fa fa-close"></i>
+					</button>
+				</div>
 			</div>
-			<button
-				mat-button
-				*ngIf="description.value"
-				matSuffix
-				mat-icon-button
-				aria-label="Clear"
-				(click)="description.value = ''"
-			>
-				<i class="fa fa-close"></i>
-			</button>
 		</div>
 	</form>
 </div>

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

@@ -1,23 +1,127 @@
 <app-stepper [step_current]="3" [step_max]="step_max"></app-stepper>
 
-<div class="creator-infos">
-	<label class="" for="creatorEmail">
-		<span>
-			{{ 'creation.name' | translate }}
+<!--			choix spécialement pour les dates-->
+<div class="dates-list">
+	<div class="title">
+		<span class="count-dates">
+			{{ timeList.length }}
 		</span>
-	</label>
-	<label class="hidden" for="creatorPseudo">
-		<span>
-			{{ 'creation.email' | translate }}
+		<span class="count-dates-txt">
+			{{ 'dates.count_time' | translate }}
+			(pour chaque jour)
 		</span>
-	</label>
-	<input #title matInput placeholder="pseudo" formControlName="creatorPseudo" id="creatorPseudo" required />
-	<input
-		#title
-		matInput
-		placeholder="mon-email@example.com"
-		formControlName="creatorEmail"
-		id="creatorEmail"
-		required
-	/>
+	</div>
+	<div class="actions">
+		<button (click)="addTime()" *ngIf="'false' === 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)="removeAllTimes()"
+			*ngIf="'false' === allowSeveralHours"
+			class="btn btn--warning"
+			id="remove_time_button"
+		>
+			<i class="fa fa-trash" aria-hidden="true"></i>
+			Aucune plage horaire
+		</button>
+		<button
+			(click)="resetTimes()"
+			*ngIf="'false' === 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' === allowSeveralHours" class="identical-dates">
+		<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
+			<div *ngFor="let time of 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>
+	<hr />
+	<span class="count-dates title">
+		{{ dateList.length }}
+	</span>
+	<span>
+		{{ 'dates.count_dates' | translate }}
+	</span>
+	<button class="btn btn--primary" (click)="addChoice()">
+		{{ 'dates.add' | translate }}
+	</button>
+	<div *ngFor="let choice of dateList; index as id" class="date-choice">
+		<input
+			[(ngModel)]="choice.date_object"
+			name="dateChoices_{{ id }}"
+			id="dateChoices_{{ id }}"
+			useValueAsDate
+			type="date"
+		/>
+		<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
+			<i class="fa fa-times" aria-hidden="true"></i>
+		</button>
+		<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
+			{{ 'dates.add_time' | translate }}
+		</button>
+		<div *ngIf="'true' === 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)="showDateInterval = !showDateInterval"
+	[ngClass]="{ active: 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="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)="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)="addIntervalOfDates()" class="btn btn-block btn--primary">
+		<i class="fa fa-plus" aria-hidden="true"></i>
+		{{ 'dates.interval_button' | translate }}
+		{{ intervalDays }}
+		{{ 'dates.interval_button_dates' | translate }}
+	</button>
+</section>

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

@@ -1,4 +1,4 @@
-<app-stepper [step_current]="2" [step_max]="step_max"></app-stepper>
+<app-stepper [step_current]="2" [step_max]="5"></app-stepper>
 <div class="form-field poll-kind">
 	<h2 class="title is-2">
 		{{ 'creation.want' | translate }}
@@ -7,8 +7,8 @@
 		<div class="column">
 			<button
 				class="btn-block btn"
-				[ngClass]="{ 'is-primary': form.controls.isAboutDate.value }"
-				(click)="form.controls.isAboutDate.setValue(true)"
+				[ngClass]="{ 'is-primary': pollService.form.controls.isAboutDate.value }"
+				(click)="pollService.form.controls.isAboutDate.setValue(true)"
 			>
 				<i class="fa fa-calendar"></i>
 				{{ 'creation.kind.date' | translate }}
@@ -17,8 +17,8 @@
 		<div class="column">
 			<button
 				class="btn-block btn btn-default"
-				[ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }"
-				(click)="form.controls.isAboutDate.setValue(false)"
+				[ngClass]="{ '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 }}
@@ -26,129 +26,3 @@
 		</div>
 	</div>
 </div>
-
-<!--			choix spécialement pour les dates-->
-<div class="dates-list">
-	<div class="title">
-		<span class="count-dates">
-			{{ timeList.length }}
-		</span>
-		<span class="count-dates-txt">
-			{{ 'dates.count_time' | translate }}
-			(pour chaque jour)
-		</span>
-	</div>
-	<div class="actions">
-		<button (click)="addTime()" *ngIf="'false' === 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)="removeAllTimes()"
-			*ngIf="'false' === allowSeveralHours"
-			class="btn btn--warning"
-			id="remove_time_button"
-		>
-			<i class="fa fa-trash" aria-hidden="true"></i>
-			Aucune plage horaire
-		</button>
-		<button
-			(click)="resetTimes()"
-			*ngIf="'false' === 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' === allowSeveralHours" class="identical-dates">
-		<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-			<div *ngFor="let time of 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>
-	<hr />
-	<span class="count-dates title">
-		{{ dateList.length }}
-	</span>
-	<span>
-		{{ 'dates.count_dates' | translate }}
-	</span>
-	<button class="btn btn--primary" (click)="addChoice()">
-		{{ 'dates.add' | translate }}
-	</button>
-	<div *ngFor="let choice of dateList; index as id" class="date-choice">
-		<input
-			[(ngModel)]="choice.date_object"
-			name="dateChoices_{{ id }}"
-			id="dateChoices_{{ id }}"
-			useValueAsDate
-			type="date"
-		/>
-		<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
-			<i class="fa fa-times" aria-hidden="true"></i>
-		</button>
-		<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
-			{{ 'dates.add_time' | translate }}
-		</button>
-		<div *ngIf="'true' === 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)="showDateInterval = !showDateInterval"
-	[ngClass]="{ active: 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="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)="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)="addIntervalOfDates()" class="btn btn-block btn--primary">
-		<i class="fa fa-plus" aria-hidden="true"></i>
-		{{ 'dates.interval_button' | translate }}
-		{{ intervalDays }}
-		{{ 'dates.interval_button_dates' | translate }}
-	</button>
-</section>

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

@@ -0,0 +1,3 @@
+.fa {
+	margin-right: 1em;
+}

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

@@ -1,4 +1,13 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
+import { FormArray, FormBuilder } from '@angular/forms';
+import { UuidService } from '../../../../core/services/uuid.service';
+import { ApiService } from '../../../../core/services/api.service';
+import { ToastService } from '../../../../core/services/toast.service';
+import { PollService } from '../../../../core/services/poll.service';
+import { DateUtilities } from '../../../old-stuff/config/DateUtilities';
+import { DOCUMENT } from '@angular/common';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { Router } from '@angular/router';
 
 @Component({
 	selector: 'app-step-two',
@@ -6,12 +15,51 @@ import { Component, Input, OnInit } from '@angular/core';
 	styleUrls: ['./step-two.component.scss'],
 })
 export class StepTwoComponent implements OnInit {
-	constructor() {}
-
 	ngOnInit(): void {}
+
 	@Input()
 	form: any;
 	@Input()
 	step_max: any;
+	timeList: any;
+	allowSeveralHours: string;
+	dateList: any;
+	showDateInterval: boolean;
+	intervalDays: any;
+
+	constructor(
+		private fb: FormBuilder,
+		private cd: ChangeDetectorRef,
+		private uuidService: UuidService,
+		private toastService: ToastService,
+		public pollService: PollService,
+		private router: Router,
+		public dateUtilities: DateUtilities,
+		private apiService: ApiService,
+		@Inject(DOCUMENT) private document: any
+	) {
+		this.form = this.pollService.form;
+	}
+
 	addIntervalOfDates() {}
+
+	get choices(): FormArray {
+		return this.form.get('choices') as FormArray;
+	}
+
+	addTime() {}
+
+	removeAllTimes() {}
+
+	resetTimes() {}
+
+	drop(event: CdkDragDrop<string[]>) {
+		// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
+	}
+
+	addChoice() {}
+
+	addTimeToDate(choice: any, id: number) {}
+
+	countDays() {}
 }

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

@@ -5,7 +5,7 @@
 	height: 0.5em;
 	display: inline-block;
 	min-width: 1px;
-	background: $grey-light;
+	background: $border-color !important;
 	width: 100%;
 }
 .step-bar-progress {
@@ -15,5 +15,5 @@
 	height: 0.5em;
 	display: inline-block;
 	min-width: 1px;
-	background: $primary;
+	background: $primary_color;
 }

src/app/features/consultation/consultation.component.html

@@ -27,10 +27,10 @@
 				</div>
 			</div>
 			<footer class="card-footer" *ngIf="!isArchived">
-				<a routerLink="{{ '../../../poll/' + poll.slug + '/participation' }}" class="card-footer-item">
+				<a routerLink="{{ '../../../poll/' + poll.custom_url + '/participation' }}" class="card-footer-item">
 					Participer
 				</a>
-				<a routerLink="{{ '../../../poll/' + poll.slug + '/administration' }}" class="card-footer-item">
+				<a routerLink="{{ '../../../poll/' + poll.custom_url + '/administration' }}" class="card-footer-item">
 					Administrer
 				</a>
 			</footer>

src/app/features/user-profile/user-polls/user-polls.component.html

@@ -13,8 +13,8 @@
 						<tr *ngFor="let poll of (_user | async)?.polls">
 							<th>{{ poll.title }}</th>
 							<td>
-								<a routerLink="{{ '../../poll/' + poll.slug + '/consultation' }}">
-									{{ poll.slug }}
+								<a routerLink="{{ '../../poll/' + poll.custom_url + '/consultation' }}">
+									{{ poll.custom_url }}
 								</a>
 							</td>
 						</tr>

src/app/shared/components/selectors/language-selector/language-selector.component.html

@@ -2,7 +2,7 @@
 	<img src="assets/img/icone-langue.svg" alt="langue" />
 	<div class="buttons has-addons">
 		<label for="lang_selector" class="hidden">{{ 'selector.lang' | translate }}</label>