From 84b69a1366dacb521d4295c99eb630f636429ac4 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Thu, 4 Feb 2021 16:14:07 +0100 Subject: [PATCH] split of creation components --- src/app/core/services/api.service.ts | 2 +- .../administration/administration.module.ts | 18 +- .../advanced-config.component.html | 89 ++++ .../advanced-config.component.scss | 0 .../advanced-config.component.spec.ts | 24 + .../advanced-config.component.ts | 14 + .../base-config/base-config.component.html | 89 ++++ .../base-config/base-config.component.scss | 0 .../base-config/base-config.component.spec.ts | 24 + .../form/base-config/base-config.component.ts | 96 ++++ .../date-select/date-select.component.html | 139 ++++++ .../date-select/date-select.component.scss | 0 .../date-select/date-select.component.spec.ts | 24 + .../form/date-select/date-select.component.ts | 241 ++++++++++ .../administration/form/form.component.html | 432 +----------------- .../administration/form/form.component.ts | 245 +--------- .../kind-select/kind-select.component.html | 27 ++ .../kind-select/kind-select.component.scss | 0 .../kind-select/kind-select.component.spec.ts | 24 + .../form/kind-select/kind-select.component.ts | 19 + .../text-select/text-select.component.html | 55 +++ .../text-select/text-select.component.scss | 0 .../text-select/text-select.component.spec.ts | 24 + .../form/text-select/text-select.component.ts | 12 + 24 files changed, 945 insertions(+), 653 deletions(-) create mode 100644 src/app/features/administration/form/advanced-config/advanced-config.component.html create mode 100644 src/app/features/administration/form/advanced-config/advanced-config.component.scss create mode 100644 src/app/features/administration/form/advanced-config/advanced-config.component.spec.ts create mode 100644 src/app/features/administration/form/advanced-config/advanced-config.component.ts create mode 100644 src/app/features/administration/form/base-config/base-config.component.html create mode 100644 src/app/features/administration/form/base-config/base-config.component.scss create mode 100644 src/app/features/administration/form/base-config/base-config.component.spec.ts create mode 100644 src/app/features/administration/form/base-config/base-config.component.ts create mode 100644 src/app/features/administration/form/date-select/date-select.component.html create mode 100644 src/app/features/administration/form/date-select/date-select.component.scss create mode 100644 src/app/features/administration/form/date-select/date-select.component.spec.ts create mode 100644 src/app/features/administration/form/date-select/date-select.component.ts create mode 100644 src/app/features/administration/form/kind-select/kind-select.component.html create mode 100644 src/app/features/administration/form/kind-select/kind-select.component.scss create mode 100644 src/app/features/administration/form/kind-select/kind-select.component.spec.ts create mode 100644 src/app/features/administration/form/kind-select/kind-select.component.ts create mode 100644 src/app/features/administration/form/text-select/text-select.component.html create mode 100644 src/app/features/administration/form/text-select/text-select.component.scss create mode 100644 src/app/features/administration/form/text-select/text-select.component.spec.ts create mode 100644 src/app/features/administration/form/text-select/text-select.component.ts diff --git a/src/app/core/services/api.service.ts b/src/app/core/services/api.service.ts index 12b14318..3bf4faeb 100644 --- a/src/app/core/services/api.service.ts +++ b/src/app/core/services/api.service.ts @@ -49,7 +49,7 @@ export class ApiService { public async createPoll(poll: Poll): Promise { // 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()) diff --git a/src/app/features/administration/administration.module.ts b/src/app/features/administration/administration.module.ts index 20ca163f..bdd7c09c 100644 --- a/src/app/features/administration/administration.module.ts +++ b/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, diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.html b/src/app/features/administration/form/advanced-config/advanced-config.component.html new file mode 100644 index 00000000..a9ff8af1 --- /dev/null +++ b/src/app/features/administration/form/advanced-config/advanced-config.component.html @@ -0,0 +1,89 @@ +
+

{{ 'creation.advanced' | translate }}

+ + + + +
+ + +
+ {{ urlPrefix }} + + {{ form.controls.slug.value }} + + + + + + +
+
+ Nombre de jours avant expiration + + +
+ + Les participants pourront consulter les résultats + + + Les choix possibles concerneront des dates + + + Le sondage sera protégé par un mot de passe + + + Vous recevrez un mail à chaque nouvelle participation + + + Vous recevrez un mail à chaque nouveau commentaire + + + La réponse « peut-être » sera disponible + +
diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.scss b/src/app/features/administration/form/advanced-config/advanced-config.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.spec.ts b/src/app/features/administration/form/advanced-config/advanced-config.component.spec.ts new file mode 100644 index 00000000..5407c267 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [AdvancedConfigComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AdvancedConfigComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.ts b/src/app/features/administration/form/advanced-config/advanced-config.component.ts new file mode 100644 index 00000000..dcef8c78 --- /dev/null +++ b/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 {} +} diff --git a/src/app/features/administration/form/base-config/base-config.component.html b/src/app/features/administration/form/base-config/base-config.component.html new file mode 100644 index 00000000..e815bc46 --- /dev/null +++ b/src/app/features/administration/form/base-config/base-config.component.html @@ -0,0 +1,89 @@ +
+
+ + {{ 'creation.choose_title' | translate }} + + + + + +
+ + + + +
+ +
+
+

+ {{ 'choices.title' | translate }} +

+ {{ 'dates.add' | translate }} +

+ + {{ 'choices.helper' | translate }} + +

+ {{ 'choices.answer_preset_1' | translate }} + {{ 'choices.add' | translate }} + {{ 'choices.continue' | translate }} +
+
+ image WIP +
+
+ +
+ +
+ + +
+
+ Slug: +
+
+
+ {{ poll.slug }} +
+
+
+
+
+
diff --git a/src/app/features/administration/form/base-config/base-config.component.scss b/src/app/features/administration/form/base-config/base-config.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/features/administration/form/base-config/base-config.component.spec.ts b/src/app/features/administration/form/base-config/base-config.component.spec.ts new file mode 100644 index 00000000..4acc1c58 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [BaseConfigComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BaseConfigComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/administration/form/base-config/base-config.component.ts b/src/app/features/administration/form/base-config/base-config.component.ts new file mode 100644 index 00000000..20ab5e05 --- /dev/null +++ b/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) }); + } +} diff --git a/src/app/features/administration/form/date-select/date-select.component.html b/src/app/features/administration/form/date-select/date-select.component.html new file mode 100644 index 00000000..a0d76865 --- /dev/null +++ b/src/app/features/administration/form/date-select/date-select.component.html @@ -0,0 +1,139 @@ +
+ + +
+ +

{{ 'dates.add_interval' | translate }}

+
+
+ {{ 'dates.interval_propose' | translate }} +
+
+ + +
+
+
+
+ {{ 'dates.interval_span' | translate }} +
+
+ + +
+
+ +
+ +
+
+ + {{ timeList.length }} + + + {{ 'dates.count_time' | translate }} + (pour chaque jour) + +
+
+ + + +
+ +
+
+
+ + + +
+
+
+
+ + {{ dateList.length }} + + + {{ 'dates.count_dates' | translate }} + + +
+ {{ id }}) + + + +
+
+ + +
+
+
+
+
diff --git a/src/app/features/administration/form/date-select/date-select.component.scss b/src/app/features/administration/form/date-select/date-select.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/features/administration/form/date-select/date-select.component.spec.ts b/src/app/features/administration/form/date-select/date-select.component.spec.ts new file mode 100644 index 00000000..d5f4b90f --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [DateSelectComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DateSelectComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/administration/form/date-select/date-select.component.ts b/src/app/features/administration/form/date-select/date-select.component.ts new file mode 100644 index 00000000..23efd1aa --- /dev/null +++ b/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'); + } +} diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html index 1754e4d5..63131d2c 100644 --- a/src/app/features/administration/form/form.component.html +++ b/src/app/features/administration/form/form.component.html @@ -2,424 +2,38 @@

{{ 'creation.title' | translate }}

- -
-
- image WIP -
-
- -
- -
- - -
- {{ poll.slug }} -
-
-
-
- le formulaire est invalide - 
-
- {{ form.errors | json }}
+	

+		

+			le formulaire est invalide
+			
+		 {{ form.errors | json }}
 		

+			>
+		

 	

-	

-		

-			
-				{{ timeList.length }}
-			
-			
-				{{ 'dates.count_time' | translate }}
-				(pour chaque jour)
-			
-		

-		

-			
-			
-			
-		

+	
+	
+
+	
+	
+	
+	
+	
 
-		

-			

-				

-					
-					
-					
-				

-			

-		

-		

-		
-			{{ dateList.length }}
-		
-		
-			{{ 'dates.count_dates' | translate }}
-		
-		
-		

-			{{ id }})
-			
-			
-			
-			

-				

-					
-					
-				

-			

-		

-	

 	

 
 	

-		

-			
-				{{ 'creation.want' | translate }}
-			
-			

-				

-					
-				

-				

-					
-				

-			

-
-			
-				{{ 'creation.choose_title' | translate }}
-			
-			
-			
-			
-		

-
-		

-			
-		

-
-		
-		

-			
{{ 'dates.add_interval' | translate }}

-			

-				

-					{{ 'dates.interval_propose' | translate }}
-				

-				

-					
-					
-				

-			

-			

-				

-					{{ 'dates.interval_span' | translate }}
-				

-				

-					
-					
-				

-			

-			
-			

-		

-
-		

-			

-				{{ 'choices.title' | translate }}
-			

-			{{ 'dates.add' | translate }}
-			

-				
-					{{ 'choices.helper' | translate }}
-				
-			

-			{{ 'choices.answer_preset_1' | translate }}
-			{{ 'choices.add' | translate }}
-			{{ 'choices.continue' | translate }}
-			
-				
-					
-						
-					
-					
-						
-					
-				
-
-				

-					{{ 'creation.choices_hint' | translate }}
-				

-				
-					

-						

-							

-								
-								{{ i * 1 + 1 }})
-							

-							

-								
-								
-								

-								
-								
-							

-						

-					

-				
-			
-		

-
-		

-			
-			
-			
-			
-		

-
-		

-		
-		

-
-		

-			
{{ 'creation.advanced' | translate }}

-			
-			
-			
-
-			

-
-			
-			

-			{{ urlPrefix }}
-				
-					{{ form.controls.slug.value }}
-				
-			
-			
-
-			
-			
-			

-			

-				Nombre de jours avant expiration
-				
-				
-			

-			
-				Les participants pourront consulter les résultats
-			
-			
-				Les choix possibles concerneront des dates
-			
-			
-				Le sondage sera protégé par un mot de passe
-			
-			
-				Vous recevrez un mail à chaque nouvelle participation
-			
-			
-				Vous recevrez un mail à chaque nouveau commentaire
-			
-			
-				La réponse « peut-être » sera disponible
-			
-		

 		

 			

 			

-				
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index 5d1c976b..eb5b3939 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/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, moveItemInArray } from '@angular/cdk/drag-drop';
+import { CdkDragDrop } 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) {
 		// 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);
 	}
 }
diff --git a/src/app/features/administration/form/kind-select/kind-select.component.html b/src/app/features/administration/form/kind-select/kind-select.component.html
new file mode 100644
index 00000000..df196976
--- /dev/null
+++ b/src/app/features/administration/form/kind-select/kind-select.component.html
@@ -0,0 +1,27 @@
+

+	
+		{{ 'creation.want' | translate }}
+	
+	

+		

+			
+		

+		

+			
+		

+	

+

diff --git a/src/app/features/administration/form/kind-select/kind-select.component.scss b/src/app/features/administration/form/kind-select/kind-select.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/features/administration/form/kind-select/kind-select.component.spec.ts b/src/app/features/administration/form/kind-select/kind-select.component.spec.ts
new file mode 100644
index 00000000..a1ad23c5
--- /dev/null
+++ b/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;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [KindSelectComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(KindSelectComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/features/administration/form/kind-select/kind-select.component.ts b/src/app/features/administration/form/kind-select/kind-select.component.ts
new file mode 100644
index 00000000..c5de0c74
--- /dev/null
+++ b/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 {}
+}
diff --git a/src/app/features/administration/form/text-select/text-select.component.html b/src/app/features/administration/form/text-select/text-select.component.html
new file mode 100644
index 00000000..6b57d555
--- /dev/null
+++ b/src/app/features/administration/form/text-select/text-select.component.html
@@ -0,0 +1,55 @@
+

+	
+		
+			
+				
+					
+				
+				
+					
+				
+			
+
+			

+				{{ 'creation.choices_hint' | translate }}
+			

+			
+				

+					

+						

+							
+							{{ i * 1 + 1 }})
+						

+						

+							
+							
+							

+							
+							
+						

+					

+				

+			
+		
+	
+

diff --git a/src/app/features/administration/form/text-select/text-select.component.scss b/src/app/features/administration/form/text-select/text-select.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/features/administration/form/text-select/text-select.component.spec.ts b/src/app/features/administration/form/text-select/text-select.component.spec.ts
new file mode 100644
index 00000000..5eb68bf3
--- /dev/null
+++ b/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;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [TextSelectComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(TextSelectComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/features/administration/form/text-select/text-select.component.ts b/src/app/features/administration/form/text-select/text-select.component.ts
new file mode 100644
index 00000000..76bb46cb
--- /dev/null
+++ b/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 {}
+}