convert date to datepicker calendar in step 3

mocks/old-stuff/config/defaultConfigs.ts

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

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

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

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

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

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

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

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

@@ -6,14 +6,6 @@
 				{{ 'dates.add' | translate }}
 			</button>
 		</div>
-		<div class="column">
-			<span class="count-dates title">
-				{{ dateChoices.length }}
-			</span>
-			<span>
-				{{ 'dates.count_dates' | translate }}
-			</span>
-		</div>
 	</div>
 
 	<div
@@ -35,9 +27,14 @@
 						{{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}
 					</span>
 				</span>
+				{{ choice.date_input | date }}
+				<pre>
+
+				{{ choice.date_object | json }}
+				</pre
+				>
 				<input
-					[(ngModel)]="choice.date_object"
-					(keyup)="keyOnChoice($event, id)"
+					[(ngModel)]="choice.date_input"
 					class="date-choice-item"
 					name="dateChoices_{{ id }}"
 					id="dateChoices_{{ id }}"
@@ -55,7 +52,7 @@
 					<div class="text-right">
 						<button (click)="addTimeToDate(choice, id)" class="btn btn--primary">
 							<i class="fa fa-plus"></i>
-							<!--							{{ 'dates.add_time' | translate }}-->
+							{{ 'dates.add_time' | translate }}
 							<i class="fa fa-clock-o"></i>
 						</button>
 					</div>

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

@@ -7,7 +7,8 @@ import { StorageService } from '../../../../../../core/services/storage.service'
 import { MatDialog } from '@angular/material/dialog';
 import { ShortcutsHelpComponent } from '../../../../../shared/components/ui/shortcuts-help/shortcuts-help.component';
 import { DateChoice } from '../../../../../../core/models/dateChoice.model';
-
+import { PollService } from '../../../../../../core/services/poll.service';
+import { DateUtilitiesService } from '../../../../../../core/services/date.utilities.service';
 @Component({
 	selector: 'app-day-list',
 	templateUrl: './day-list.component.html',
@@ -27,6 +28,8 @@ export class DayListComponent {
 	constructor(
 		public dialog: MatDialog,
 		private toastService: ToastService,
+		private pollService: PollService,
+		private dateUtilitiesService: DateUtilitiesService,
 		private cd: ChangeDetectorRef,
 		@Inject(DOCUMENT) private document: any,
 		private storageService: StorageService
@@ -127,7 +130,7 @@ export class DayListComponent {
 	}
 
 	addChoice(optionalLabel = ''): void {
-		this.storageService.dateChoices.push({
+		this.pollService.dateChoiceList.push({
 			literal: '',
 			timeSlices: [],
 			date_object: new Date(),

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

@@ -2,11 +2,6 @@
 	<app-stepper [step_current]="3" [step_max]="5"></app-stepper>
 	<app-errors-list [form]="pollService.form"></app-errors-list>
 	<!--			choix spécialement pour les dates-->
-	<span class="count-dates title">
-		{{ pollService.calendar.length }}
-	</span>
-	<span> - {{ 'dates.count_dates' | translate }} </span>
-
 	<div class="calendar" *ngIf="mode_calendar">
 		<p-calendar
 			[(ngModel)]="pollService.calendar"
@@ -20,8 +15,18 @@
 			[showWeek]="false"
 		></p-calendar>
 	</div>
-	<button class="button" (click)="mode_calendar = !mode_calendar" [ngClass]="{ 'is-primary': !mode_calendar }">
-		<i class="fa fa-pencil"></i> Saisir les dates manuellement
+
+	<div class="text-date-list" *ngIf="!mode_calendar">
+		<app-day-list
+			[form]="pollService.form"
+			[dateChoices]="pollService.dateChoiceList"
+			[hasSeveralHours]="pollService.form.value.hasSeveralHours"
+		></app-day-list>
+	</div>
+
+	<button class="button" (click)="changeDateInputMode()" [ngClass]="{ 'is-primary': !mode_calendar }">
+		<span *ngIf="mode_calendar"> <i class="fa fa-pencil"></i> Saisir les dates manuellement </span>
+		<span *ngIf="!mode_calendar"> <i class="fa fa-calendar-o"></i> Saisir les dates dans le calendrier </span>
 	</button>
 </div>
 <div class="columns">

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

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