split of creation components

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

@@ -49,7 +49,7 @@ export class ApiService {
 
 	public async createPoll(poll: Poll): Promise<Subscription> {
 		// this.loader.setStatus(true);
-		console.log('config', poll);
+		console.log('createPoll config', poll);
 		// const baseHref = this.useDevLocalServer ? 'http://localhost:8000' : apiBaseHref;
 		// return this.http
 		// 	.post(`${baseHref}${currentApiRoutes['api_new_poll']}`, poll, ApiService.makeHeaders())

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

@@ -11,9 +11,25 @@ import { NamingComponent } from './naming/naming.component';
 import { FormComponent } from './form/form.component';
 import { DateValueAccessorModule } from 'angular-date-value-accessor';
 import { SuccessComponent } from './success/success.component';
+import { DateSelectComponent } from './form/date-select/date-select.component';
+import { TextSelectComponent } from './form/text-select/text-select.component';
+import { KindSelectComponent } from './form/kind-select/kind-select.component';
+import { BaseConfigComponent } from './form/base-config/base-config.component';
+import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.component';
 
 @NgModule({
-	declarations: [AdministrationComponent, StepperComponent, NamingComponent, FormComponent, SuccessComponent],
+	declarations: [
+		AdministrationComponent,
+		StepperComponent,
+		NamingComponent,
+		FormComponent,
+		SuccessComponent,
+		DateSelectComponent,
+		TextSelectComponent,
+		KindSelectComponent,
+		BaseConfigComponent,
+		AdvancedConfigComponent,
+	],
 	imports: [
 		AdministrationRoutingModule,
 		CommonModule,

src/app/features/administration/form/advanced-config/advanced-config.component.html

@@ -0,0 +1,89 @@
+<fieldset class="complete well">
+	<h2>{{ 'creation.advanced' | translate }}</h2>
+	<label for="descr">Description (optionnel)</label>
+	<textarea
+		#description
+		matInput
+		id="descr"
+		placeholder="Description"
+		formControlName="description"
+		required
+	></textarea>
+	<button
+		mat-button
+		*ngIf="description.value"
+		matSuffix
+		mat-icon-button
+		aria-label="Clear"
+		(click)="description.value = ''"
+	>
+		<i class="fa fa-close"></i>
+	</button>
+
+	<br />
+
+	<label for="slug"
+		>Url pour les participants
+
+		<i class="fa fa-close"></i>
+	</label>
+	<br />
+	<span
+		>{{ urlPrefix }}
+		<strong>
+			{{ form.controls.slug.value }}
+		</strong>
+	</span>
+	<app-copy-text [textToCopy]="form.controls.slug.value"></app-copy-text>
+
+	<button
+		mat-button
+		*ngIf="form.controls.slug.value"
+		matSuffix
+		mat-icon-button
+		aria-label="Clear"
+		(click)="slug.value = ''"
+	></button>
+	<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
+	<br />
+	<div appearance="outline" class="is-not-flex">
+		<mat-label>Nombre de jours avant expiration</mat-label>
+		<input
+			#expiracy
+			id="expiracy"
+			matInput
+			type="number"
+			placeholder="Nombre de jours avant expiration"
+			formControlName="expiracyNumberOfDays"
+			required
+		/>
+		<button
+			mat-button
+			*ngIf="expiracy.value"
+			matSuffix
+			mat-icon-button
+			aria-label="Clear"
+			(click)="expiracy.value = ''"
+		>
+			<i class="fa fa-close"></i>
+		</button>
+	</div>
+	<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
+		Les participants pourront consulter les résultats
+	</mat-checkbox>
+	<mat-checkbox class="is-not-flex" formControlName="isAboutDate">
+		Les choix possibles concerneront des dates
+	</mat-checkbox>
+	<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
+		Le sondage sera protégé par un mot de passe
+	</mat-checkbox>
+	<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
+		Vous recevrez un mail à chaque nouvelle participation
+	</mat-checkbox>
+	<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
+		Vous recevrez un mail à chaque nouveau commentaire
+	</mat-checkbox>
+	<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
+		La réponse « peut-être » sera disponible
+	</mat-checkbox>
+</fieldset>

src/app/features/administration/form/advanced-config/advanced-config.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdvancedConfigComponent } from './advanced-config.component';
+
+describe('AdvancedConfigComponent', () => {
+	let component: AdvancedConfigComponent;
+	let fixture: ComponentFixture<AdvancedConfigComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [AdvancedConfigComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(AdvancedConfigComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/administration/form/advanced-config/advanced-config.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-advanced-config',
+	templateUrl: './advanced-config.component.html',
+	styleUrls: ['./advanced-config.component.scss'],
+})
+export class AdvancedConfigComponent implements OnInit {
+	public urlPrefix: string = window.location.origin + '/participation/';
+
+	constructor() {}
+
+	ngOnInit(): void {}
+}

src/app/features/administration/form/base-config/base-config.component.html

@@ -0,0 +1,89 @@
+<form [formGroup]="form">
+	<div class="columns">
+		<span>
+			{{ 'creation.choose_title' | translate }}
+		</span>
+		<label class="hidden" for="title">Titre</label>
+		<input
+			#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>
+			<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>
+
+		<hr />
+		<div>
+			<h2>
+				{{ 'choices.title' | translate }}
+			</h2>
+			{{ 'dates.add' | translate }}
+			<p>
+				<i>
+					{{ 'choices.helper' | translate }}
+				</i>
+			</p>
+			{{ 'choices.answer_preset_1' | translate }}
+			{{ 'choices.add' | translate }}
+			{{ 'choices.continue' | translate }}
+		</div>
+		<div class="column">
+			<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />
+		</div>
+		<div class="column">
+			<button class="btn btn--warning" (click)="askInitFormDefault()">
+				<i class="fa fa-refresh"></i>
+				Tout réinitialiser
+			</button>
+			<br />
+			<button class="btn is-success" (click)="createPoll()">
+				<i class="fa fa-save"></i>
+				Enregistrer le sondage
+			</button>
+			<br />
+			<button class="btn is-default" (click)="automaticSlug()">
+				<i class="fa fa-refresh"></i>
+				Slug automatique
+			</button>
+
+			<div class="columns">
+				<div class="column">
+					Slug:
+				</div>
+				<div class="column">
+					<div class="well">
+						{{ poll.slug }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</form>

src/app/features/administration/form/base-config/base-config.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BaseConfigComponent } from './base-config.component';
+
+describe('BaseConfigComponent', () => {
+	let component: BaseConfigComponent;
+	let fixture: ComponentFixture<BaseConfigComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [BaseConfigComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(BaseConfigComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/administration/form/base-config/base-config.component.ts

@@ -0,0 +1,96 @@
+import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
+import { ToastService } from '../../../../core/services/toast.service';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UuidService } from '../../../../core/services/uuid.service';
+import { PollService } from '../../../../core/services/poll.service';
+import { ApiService } from '../../../../core/services/api.service';
+import { Router } from '@angular/router';
+import { DOCUMENT } from '@angular/common';
+import { Poll } from '../../../../core/models/poll.model';
+
+@Component({
+	selector: 'app-base-config',
+	templateUrl: './base-config.component.html',
+	styleUrls: ['./base-config.component.scss'],
+})
+export class BaseConfigComponent implements OnInit {
+	@Input()
+	public poll?: Poll;
+	public form: FormGroup;
+
+	constructor(
+		private fb: FormBuilder,
+		private cd: ChangeDetectorRef,
+		private uuidService: UuidService,
+		private toastService: ToastService,
+		private pollService: PollService,
+		private apiService: ApiService,
+		private router: Router,
+		@Inject(DOCUMENT) private document: Document
+	) {}
+
+	ngOnInit(): void {
+		this.initFormDefault(false);
+	}
+
+	askInitFormDefault(): void {
+		this.initFormDefault(false);
+		this.toastService.display('formulaire réinitialisé');
+	}
+
+	public createPoll(): void {
+		console.log('this.form', this.form);
+		const newpoll = this.pollService.newPollFromForm(this.form);
+		console.log('newpoll', newpoll);
+		const router = this.router;
+
+		this.apiService.createPoll(newpoll).then((resp) => {
+			console.log('resp', resp);
+			router.navigate(['success']);
+		});
+		// this.router
+		// if (this.form.valid) {
+		// 	console.log('Le sondage est correctement rempli, prêt à enregistrer.');
+		// 	const newpoll = this.pollService.newPollFromForm(this.form);
+		// 	// TODO : save the poll
+		// 	this.apiService.createPoll(newpoll);
+		// } else {
+		// 	this.toastService.display('invalid form');
+		// }
+	}
+
+	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]],
+			expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
+		});
+		console.log('this.form ', this.form);
+	}
+
+	public updateSlug(): void {
+		const newValueFormatted = 'TODO';
+		this.form.patchValue({ slug: newValueFormatted });
+	}
+
+	/**
+	 * set the poll slug from other data of the poll
+	 */
+	automaticSlug() {
+		this.form.patchValue({ slug: this.pollService.makeSlug(this.poll) });
+	}
+}

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

@@ -0,0 +1,139 @@
+<div class="date-selection">
+	<!--	interval-->
+
+	<section *ngIf="showDateInterval" class="date-interval form-row">
+		<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>
+		<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>
+
+	<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">
+			{{ id }})
+			<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>
+</div>

src/app/features/administration/form/date-select/date-select.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DateSelectComponent } from './date-select.component';
+
+describe('DateSelectComponent', () => {
+	let component: DateSelectComponent;
+	let fixture: ComponentFixture<DateSelectComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [DateSelectComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(DateSelectComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

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

@@ -0,0 +1,241 @@
+import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UuidService } from '../../../../core/services/uuid.service';
+import { ToastService } from '../../../../core/services/toast.service';
+import { PollService } from '../../../../core/services/poll.service';
+import { DateUtilities } from '../../../old-stuff/config/DateUtilities';
+import { ApiService } from '../../../../core/services/api.service';
+import { Router } from '@angular/router';
+import { DOCUMENT } from '@angular/common';
+import { DateChoice, otherDefaultDates } from '../../../old-stuff/config/defaultConfigs';
+import { Poll } from '../../../../core/models/poll.model';
+
+@Component({
+	selector: 'app-date-select',
+	templateUrl: './date-select.component.html',
+	styleUrls: ['./date-select.component.scss'],
+})
+export class DateSelectComponent implements OnInit {
+	@Input()
+	public poll?: Poll;
+	@Input()
+	public form: FormGroup;
+
+	public showDateInterval = true;
+	public allowSeveralHours = true;
+	startDateInterval: string;
+	endDateInterval: string;
+	intervalDays: any;
+	intervalDaysDefault = 7;
+	dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
+	timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings
+
+	constructor(
+		private fb: FormBuilder,
+		private cd: ChangeDetectorRef,
+		private uuidService: UuidService,
+		private toastService: ToastService,
+		private pollService: PollService,
+		public dateUtilities: DateUtilities,
+		private apiService: ApiService,
+		private router: Router,
+		@Inject(DOCUMENT) private document: any
+	) {}
+
+	ngOnInit(): void {
+		this.setDefaultDatesForInterval();
+	}
+
+	get choices(): FormArray {
+		return this.form.get('choices') as FormArray;
+	}
+
+	/**
+	 * 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();
+	}
+
+	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.dateList.forEach(elem=>{
+		// 	const newControlGroup = this.fb.group({
+		// 		label: this.fb.control('', [Validators.required]),
+		// 		imageUrl: ['', [Validators.required]],
+		// 	});
+		//
+		// 	this.choices.push(newControlGroup);
+		// })
+
+		this.toastService.display(`les dates ont été ajoutées aux réponses possibles.`);
+	}
+
+	/**
+	 * 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();
+		}
+	}
+
+	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([]);
+	}
+
+	/**
+	 * 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;
+		// TODO handle shortcuts
+		// 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();
+			}
+		}
+	}
+
+	setDemoValues(): void {
+		this.addChoice('orange');
+		this.addChoice('raisin');
+		this.addChoice('abricot');
+	}
+}

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

@@ -2,424 +2,38 @@
 	<h1>
 		{{ 'creation.title' | translate }}
 	</h1>
-
+	<div class="validation">
-	<div class="columns">
+		<div class="has-background-danger" *ngIf="!form.valid">
-		<div class="column">
+			le formulaire est invalide
-			<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />
+			<pre>
-		</div>
+		 {{ form.errors | json }}
-		<div class="column">
-			<button class="btn btn--warning" (click)="askInitFormDefault()">
-				<i class="fa fa-refresh"></i>
-				Tout réinitialiser
-			</button>
-			<br />
-			<button class="btn is-success" (click)="createPoll()">
-				<i class="fa fa-save"></i>
-				Enregistrer le sondage
-			</button>
-			<br />
-			<button class="btn is-default" (click)="automaticSlug()">
-				<i class="fa fa-refresh"></i>
-				Slug automatique
-			</button>
-
-			<div class="well">
-				{{ poll.slug }}
-			</div>
-		</div>
-	</div>
-	<div class="has-background-danger" *ngIf="!form.valid">
-		le formulaire est invalide
-		<pre>
-
- {{ form.errors | json }}
 		</pre
-		>
+			>
+		</div>
 	</div>
-	<div class="dates-list">
+	<app-base-config></app-base-config>
-		<div class="title">
+	<!--	<app-kind-select></app-kind-select>-->
-			<span class="count-dates">
+
-				{{ timeList.length }}
+	<!--			choix spécialement pour les dates-->
-			</span>
+	<!--	<app-date-select ng-if="form.kind == 'date'"></app-date-select>-->
-			<span class="count-dates-txt">
+	<!--	<app-text-select ng-if="form.kind == 'classic'"></app-text-select>-->
-				{{ 'dates.count_time' | translate }}
+	<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
-				(pour chaque jour)
+		<i class="fa fa-save"></i>
-			</span>
+		{{ 'creation.advanced' | translate }}
-		</div>
+	</button>
-		<div class="actions">
+	<!--	<app-advanced-config ng-if="advancedDisplayEnabled"></app-advanced-config>-->
-			<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">
-			{{ id }})
-			<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>
 	<hr />
 
 	<form [formGroup]="form">
-		<div class="form-field">
-			<span class="pre-selector">
-				{{ 'creation.want' | translate }}
-			</span>
-			<div class="kind-of-poll columns">
-				<div class="column">
-					<button
-						class="btn-block btn"
-						[ngClass]="{ 'is-primary': form.controls.isAboutDate.value }"
-						(click)="form.controls.isAboutDate.setValue(true)"
-					>
-						<i class="fa fa-calendar"></i>
-						{{ 'creation.kind.date' | translate }}
-					</button>
-				</div>
-				<div class="column">
-					<button
-						class="btn-block btn btn-default"
-						[ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }"
-						(click)="form.controls.isAboutDate.setValue(false)"
-					>
-						<i class="fa fa-stats"></i>
-						{{ 'creation.kind.classic' | translate }}
-					</button>
-				</div>
-			</div>
-
-			<span>
-				{{ 'creation.choose_title' | translate }}
-			</span>
-			<label class="hidden" for="title">Titre</label>
-			<input
-				#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>
-
-		<fieldset class="date-kind">
-			<!--			choix spécialement pour les dates-->
-		</fieldset>
-
-		<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>
-			<hr />
-		</section>
-
-		<div class="form-field">
-			<h2>
-				{{ 'choices.title' | translate }}
-			</h2>
-			{{ 'dates.add' | translate }}
-			<p>
-				<i>
-					{{ 'choices.helper' | translate }}
-				</i>
-			</p>
-			{{ 'choices.answer_preset_1' | translate }}
-			{{ 'choices.add' | translate }}
-			{{ 'choices.continue' | translate }}
-			<span>
-				<span class="columns">
-					<span class="column">
-						<button class="btn is-primary" (click)="addChoice()">
-							<i class="fa fa-plus"></i>
-							Ajouter un choix
-						</button>
-					</span>
-					<span class="column pull-right">
-						<button class="btn is-warning" (click)="reinitChoices()">
-							<i class="fa fa-recycle"></i>
-							Réinitialiser
-						</button>
-					</span>
-				</span>
-
-				<p class="hint">
-					{{ 'creation.choices_hint' | translate }}
-				</p>
-				<span *ngFor="let choice of choices.controls; let i = index">
-					<div class="form-row" [formGroup]="choice">
-						<div class="columns">
-							<div class="column">
-								<button class="btn btn-warning" (click)="deleteChoiceField(i)">
-									<i class="fa fa-times"></i>
-								</button>
-								{{ i * 1 + 1 }})
-							</div>
-							<div class="column">
-								<label [for]="'choice_label_' + i" class="hidden">label</label>
-								<input
-									formControlName="label"
-									[id]="'choice_label_' + i"
-									placeholder="Enter a choice description"
-									(keyup)="keyOnChoice($event, i)"
-									(keyup.backspace)="deleteChoiceField(i)"
-								/>
-								<br />
-								<label [for]="'image_url_' + i" class="hidden">image Url</label>
-								<input
-									formControlName="imageUrl"
-									[id]="'image_url_' + i"
-									placeholder="URL de l' image"
-									(keyup)="keyOnChoice($event, i)"
-									(keyup.backspace)="deleteChoiceField(i)"
-								/>
-							</div>
-						</div>
-					</div>
-				</span>
-			</span>
-		</div>
-
-		<div>
-			<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>
-
-		<br />
-		<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
-			<i class="fa fa-save"></i>
-			{{ 'creation.advanced' | translate }}
-		</button>
-		<hr />
-
-		<fieldset class="complete well" *ngIf="advancedDisplayEnabled">
-			<h2>{{ 'creation.advanced' | translate }}</h2>
-			<label for="descr">Description (optionnel)</label>
-			<textarea
-				#description
-				matInput
-				id="descr"
-				placeholder="Description"
-				formControlName="description"
-				required
-			></textarea>
-			<button
-				mat-button
-				*ngIf="description.value"
-				matSuffix
-				mat-icon-button
-				aria-label="Clear"
-				(click)="description.value = ''"
-			>
-				<i class="fa fa-close"></i>
-			</button>
-
-			<br />
-
-			<label for="slug"
-				>Url pour les participants
-
-				<i class="fa fa-close"></i>
-			</label>
-			<br />
-			<span
-				>{{ urlPrefix }}
-				<strong>
-					{{ form.controls.slug.value }}
-				</strong>
-			</span>
-			<app-copy-text [textToCopy]="form.controls.slug.value"></app-copy-text>
-
-			<button
-				mat-button
-				*ngIf="form.controls.slug.value"
-				matSuffix
-				mat-icon-button
-				aria-label="Clear"
-				(click)="slug.value = ''"
-			></button>
-			<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
-			<br />
-			<div appearance="outline" class="is-not-flex">
-				<mat-label>Nombre de jours avant expiration</mat-label>
-				<input
-					#expiracy
-					id="expiracy"
-					matInput
-					type="number"
-					placeholder="Nombre de jours avant expiration"
-					formControlName="expiracyNumberOfDays"
-					required
-				/>
-				<button
-					mat-button
-					*ngIf="expiracy.value"
-					matSuffix
-					mat-icon-button
-					aria-label="Clear"
-					(click)="expiracy.value = ''"
-				>
-					<i class="fa fa-close"></i>
-				</button>
-			</div>
-			<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
-				Les participants pourront consulter les résultats
-			</mat-checkbox>
-			<mat-checkbox class="is-not-flex" formControlName="isAboutDate">
-				Les choix possibles concerneront des dates
-			</mat-checkbox>
-			<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
-				Le sondage sera protégé par un mot de passe
-			</mat-checkbox>
-			<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
-				Vous recevrez un mail à chaque nouvelle participation
-			</mat-checkbox>
-			<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
-				Vous recevrez un mail à chaque nouveau commentaire
-			</mat-checkbox>
-			<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
-				La réponse « peut-être » sera disponible
-			</mat-checkbox>
-		</fieldset>
 		<div class="columns">
 			<div class="column"></div>
 			<div class="column">
-				<button class="btn is-success" (click)="createPoll()" [disabled]="!form.valid || !form.valid">
+				<button
+					class="btn is-success"
+					(click)="apiService.createPoll(poll)"
+					[disabled]="!form.valid || !form.valid"
+				>
 					<i class="fa fa-save"></i>
 					Enregistrer le sondage
 				</button>

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

@@ -7,8 +7,7 @@ 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 { DateChoice, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Router } from '@angular/router';
 
 @Component({
@@ -21,16 +20,7 @@ export class FormComponent implements OnInit {
 	public poll?: Poll;
 	public form: FormGroup;
 
-	public urlPrefix: string = window.location.origin + '/participation/';
 	public advancedDisplayEnabled = false;
-	public showDateInterval = true;
-	public allowSeveralHours = true;
-	startDateInterval: string;
-	endDateInterval: string;
-	intervalDays: any;
-	intervalDaysDefault = 7;
-	dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
-	timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings
 
 	constructor(
 		private fb: FormBuilder,
@@ -43,84 +33,18 @@ export class FormComponent implements OnInit {
 		private router: Router,
 		@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;
-	}
 
 	ngOnInit(): void {
 		this.initFormDefault();
-		// TO remove after
+
-		// this.createPoll();
 		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);
-		let self = this;
-
-		this.apiService.createPoll(newpoll).then((resp) => {
-			console.log('resp', resp);
-			self.router.navigate(['success']);
-		});
-		// this.router
-		// if (this.form.valid) {
-		// 	console.log('Le sondage est correctement rempli, prêt à enregistrer.');
-		// 	const newpoll = this.pollService.newPollFromForm(this.form);
-		// 	// TODO : save the poll
-		// 	this.apiService.createPoll(newpoll);
-		// } else {
-		// 	this.toastService.display('invalid form');
-		// }
-	}
-
-	public updateSlug(): void {
-		const newValueFormatted = 'TODO';
-		this.form.patchValue({ slug: newValueFormatted });
-	}
-
-	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)]],
@@ -142,39 +66,16 @@ export class FormComponent implements OnInit {
 			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 ! *-* ',
@@ -191,145 +92,5 @@ export class FormComponent implements OnInit {
 			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.dateList.forEach(elem=>{
-		// 	const newControlGroup = this.fb.group({
-		// 		label: this.fb.control('', [Validators.required]),
-		// 		imageUrl: ['', [Validators.required]],
-		// 	});
-		//
-		// 	this.choices.push(newControlGroup);
-		// })
-
-		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();
-			}
-		}
-	}
-
-	/**
-	 * 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);
 	}
 }

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

@@ -0,0 +1,27 @@
+<div class="kind-select form-field">
+	<span class="pre-selector">
+		{{ 'creation.want' | translate }}
+	</span>
+	<div class="kind-of-poll columns">
+		<div class="column">
+			<button
+				class="btn-block btn"
+				[ngClass]="{ 'is-primary': form.controls.isAboutDate.value }"
+				(click)="form.controls.isAboutDate.setValue(true)"
+			>
+				<i class="fa fa-calendar"></i>
+				{{ 'creation.kind.date' | translate }}
+			</button>
+		</div>
+		<div class="column">
+			<button
+				class="btn-block btn btn-default"
+				[ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }"
+				(click)="form.controls.isAboutDate.setValue(false)"
+			>
+				<i class="fa fa-stats"></i>
+				{{ 'creation.kind.classic' | translate }}
+			</button>
+		</div>
+	</div>
+</div>

src/app/features/administration/form/kind-select/kind-select.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KindSelectComponent } from './kind-select.component';
+
+describe('KindSelectComponent', () => {
+	let component: KindSelectComponent;
+	let fixture: ComponentFixture<KindSelectComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [KindSelectComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(KindSelectComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/administration/form/kind-select/kind-select.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Poll } from '../../../../core/models/poll.model';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+	selector: 'app-kind-select',
+	templateUrl: './kind-select.component.html',
+	styleUrls: ['./kind-select.component.scss'],
+})
+export class KindSelectComponent implements OnInit {
+	@Input()
+	public poll?: Poll;
+	@Input()
+	public form: FormGroup;
+
+	constructor() {}
+
+	ngOnInit(): void {}
+}

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

@@ -0,0 +1,55 @@
+<div class="form-field">
+	<form [formGroup]="form">
+		<span>
+			<span class="columns">
+				<span class="column">
+					<button class="btn is-primary" (click)="addChoice()">
+						<i class="fa fa-plus"></i>
+						Ajouter un choix
+					</button>
+				</span>
+				<span class="column pull-right">
+					<button class="btn is-warning" (click)="reinitChoices()">
+						<i class="fa fa-recycle"></i>
+						Réinitialiser
+					</button>
+				</span>
+			</span>
+
+			<p class="hint">
+				{{ 'creation.choices_hint' | translate }}
+			</p>
+			<span *ngFor="let choice of choices.controls; let i = index">
+				<div class="form-row" [formGroup]="choice">
+					<div class="columns">
+						<div class="column">
+							<button class="btn btn-warning" (click)="deleteChoiceField(i)">
+								<i class="fa fa-times"></i>
+							</button>
+							{{ i * 1 + 1 }})
+						</div>
+						<div class="column">
+							<label [for]="'choice_label_' + i" class="hidden">label</label>
+							<input
+								formControlName="label"
+								[id]="'choice_label_' + i"
+								placeholder="Enter a choice description"
+								(keyup)="keyOnChoice($event, i)"
+								(keyup.backspace)="deleteChoiceField(i)"
+							/>
+							<br />
+							<label [for]="'image_url_' + i" class="hidden">image Url</label>
+							<input
+								formControlName="imageUrl"
+								[id]="'image_url_' + i"
+								placeholder="URL de l' image"
+								(keyup)="keyOnChoice($event, i)"
+								(keyup.backspace)="deleteChoiceField(i)"
+							/>
+						</div>
+					</div>
+				</div>
+			</span>
+		</span>
+	</form>
+</div>

src/app/features/administration/form/text-select/text-select.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextSelectComponent } from './text-select.component';
+
+describe('TextSelectComponent', () => {
+	let component: TextSelectComponent;
+	let fixture: ComponentFixture<TextSelectComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [TextSelectComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(TextSelectComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/administration/form/text-select/text-select.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-text-select',
+	templateUrl: './text-select.component.html',
+	styleUrls: ['./text-select.component.scss'],
+})
+export class TextSelectComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit(): void {}
+}