creation for simple date works

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

@@ -52,8 +52,10 @@ export class StorageService {
 			);
 		}
 
+		if (!this.dateList.length) {
 			this.dateList = this.dateUtilities.makeDefaultDateChoices();
 		}
+	}
 
 	setChoicesForVoteStack(choices_list: Choice[]) {
 		this.vote_stack.votes = [];

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

@@ -16,7 +16,7 @@ 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';
-import { CalendarModule } from 'primeng';
+import { CalendarModule, DialogModule } from 'primeng';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { AppModule } from '../../app.module';
 import { IntervalComponent } from './form/date/interval/interval.component';
@@ -51,6 +51,7 @@ import { TimeListComponent } from './form/date/list/time/time-list.component';
 		TranslateModule.forChild({ extend: true }),
 		DateValueAccessorModule,
 		DragDropModule,
+		DialogModule,
 	],
 })
 export class AdministrationModule {}

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

@@ -92,24 +92,11 @@
 
 		<hr />
 		<div class="main-box is-boxed">
-			<div class="columns">
+			<app-day-list
-				<div class="column">
+				[form]="form"
-					<!--				ajouter une date-->
+				[dateList]="dateList"
-					<button class="btn btn--primary" (click)="addChoice()">
+				[hasSeveralHours]="form.value.hasSeveralHours"
-						{{ 'dates.add' | translate }}
+			></app-day-list>
-					</button>
-				</div>
-				<div class="column">
-					<span class="count-dates title">
-						{{ dateList.length }}
-					</span>
-					<span>
-						{{ 'dates.count_dates' | translate }}
-					</span>
-				</div>
-			</div>
-
-			<app-day-list [dateList]="dateList" [hasSeveralHours]="form.value.hasSeveralHours"></app-day-list>
 		</div>
 	</div>
 </div>

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

@@ -32,8 +32,8 @@ export class DateSelectComponent implements OnInit {
 	endDateInterval: string;
 
 	intervalDaysDefault = 7;
-	dateList: DateChoice[]; // sets of dateList as strings, config to set identical time for dateList in a special dateList poll
+	dateList: DateChoice[] = []; // sets of dateList as strings, config to set identical time for dateList in a special dateList poll
-	timeList: TimeSlices[]; // ranges of time expressed as strings
+	timeList: TimeSlices[] = []; // ranges of time expressed as strings
 
 	selectionKind = 'range';
 
@@ -53,14 +53,6 @@ export class DateSelectComponent implements OnInit {
 		this.timeList = this.storageService.timeSlices;
 	}
 
-	get choices(): FormArray {
-		return this.form.get('choices') as FormArray;
-	}
-
-	get dateChoices() {
-		return this.form.get('dateChoices') as FormArray;
-	}
-
 	ngOnInit(): void {}
 
 	/**
@@ -84,56 +76,4 @@ export class DateSelectComponent implements OnInit {
 		this.dateList.map((elem) => (elem.timeList = Object.create(defaultTimeOfDay)));
 		this.toastService.display('périodes horaires réinitialisées');
 	}
-
-	addChoice(optionalLabel = ''): void {
-		if (this.form.value.kind == 'date') {
-			this.storageService.dateList.push({
-				literal: '',
-				timeList: [],
-				date_object: new Date(),
-			});
-		} else {
-			const newControlGroup = this.fb.group({
-				label: this.fb.control('', [Validators.required]),
-				imageUrl: ['', [Validators.required]],
-			});
-
-			if (optionalLabel) {
-				newControlGroup.patchValue({
-					label: optionalLabel,
-					imageUrl: 'mon url',
-				});
-			}
-
-			this.dateChoices.push(newControlGroup);
-		}
-		// this.cd.detectChanges();
-		console.log('this.choices.length', this.storageService.dateList.length);
-
-		this.focusOnChoice(this.storageService.dateList.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([]);
-	}
-
-	setDemoValues(): void {
-		this.addChoice('orange');
-		this.addChoice('raisin');
-		this.addChoice('abricot');
-	}
 }

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

@@ -1,10 +1,33 @@
+<div class="day-list-container">
+	<div class="columns">
+		<div class="column">
+			<!--				ajouter une date-->
+			<button class="btn btn--primary" (click)="addChoice()">
+				{{ 'dates.add' | translate }}
+			</button>
+		</div>
+		<div class="column">
+			<span class="count-dates title">
+				{{ dateList.length }}
+			</span>
+			<span>
+				{{ 'dates.count_dates' | translate }}
+			</span>
+		</div>
+	</div>
+
 	<div class="columns days-list" cdkDropList [cdkDropListData]="dateList" (cdkDropListDropped)="dropDayItem($event)">
 		<div class="column">
-		<!--					TODO lier au formulaire les valeurs des dates-->
 			<h2>Dates</h2>
+			<button class="btn button-help" (click)="openKeyboardShortcutsModal()">
+				💁 Raccourcis
+			</button>
+			<br />
+			<br />
 			<div *ngFor="let choice of dateList; index as id" class="date-choice" cdkDrag>
 				<input
 					[(ngModel)]="choice.date_object"
+					(keyup)="keyOnChoice($event, id)"
 					name="dateChoices_{{ id }}"
 					id="dateChoices_{{ id }}"
 					useValueAsDate
@@ -19,18 +42,79 @@
 				<div *ngIf="hasSeveralHours" class="several-times">
 					plage horaire distincte
 					<br />
-				<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
+					<app-time-list [timeSlices]="choice.timeList"></app-time-list>
-					<input
+				</div>
-						[(ngModel)]="timeItem.literal"
+			</div>
-						name="dateTime_{{ id }}_Choices_{{ idTime }}"
+		</div>
-						id="dateTime_{{ id }}_Choices_{{ idTime }}"
+	</div>
-						type="text"
+	<p-dialog class="url-dialog" [(visible)]="display" [modal]="true" [closable]="true">
-					/>
+		<p-header>
-					<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
+			💁 Aide, Raccourcis clavier
-						<i class="fa fa-times" aria-hidden="true"></i>
+			<button class="btn button-help pull-right" (click)="display = false">
+				<i class="fa fa-times"></i>
 			</button>
-				</div>
+		</p-header>
-			</div>
+
-		</div>
+		Vous pouvez naviguer d'un champ de date à un autre avec les flèches du clavier.
-	</div>
+
+		<app-wip-todo></app-wip-todo>
+		<br />
+		<br />
+		<table>
+			<thead>
+				<tr>
+					<th>
+						Fonction
+					</th>
+					<th>
+						Raccourci
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>
+						Créer un nouveau choix
+					</td>
+					<td>
+						Ctrl + N
+					</td>
+				</tr>
+				<tr>
+					<td>
+						Naviguer vers le champ suivant. Créée un nouveau champ si effectué sur le dernier champ.
+					</td>
+					<td>
+						Ctrl + flèche bas
+					</td>
+				</tr>
+				<tr>
+					<td>
+						réinitialiser le champ actuel
+					</td>
+					<td>
+						Ctrl + effacer
+						<br />
+						ou
+						<br />
+						Ctrl + supprimer
+					</td>
+				</tr>
+				<tr>
+					<td>
+						Alterner entre un sondage de type Date et un sondage texte
+					</td>
+					<td>
+						Alt + D
+					</td>
+				</tr>
+				<td>
+					Tout envoyer
+				</td>
+				<td>
+					Ctrl + entrée
+				</td>
+			</tbody>
+		</table>
+	</p-dialog>
 </div>

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

@@ -2,37 +2,43 @@ import { Component, Inject, Input, OnInit } from '@angular/core';
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { DateChoice } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs';
 import { DOCUMENT } from '@angular/common';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { LocalStorageService } from 'ngx-webstorage';
+import { ToastService } from '../../../../../../core/services/toast.service';
+import { StorageService } from '../../../../../../core/services/storage.service';
 
 @Component({
 	selector: 'app-day-list',
 	templateUrl: './day-list.component.html',
 	styleUrls: ['./day-list.component.scss'],
 })
-export class DayListComponent implements OnInit {
+export class DayListComponent {
 	@Input()
-	public dateList: DateChoice[] = [];
+	form: FormGroup;
+	@Input()
+	public dateList: Array<any> = [];
 	@Input()
 	public hasSeveralHours: boolean;
 	timeList: any;
+	display = false;
 
-	constructor(@Inject(DOCUMENT) private document: any) {}
+	constructor(
-
+		private toastService: ToastService,
-	ngOnInit(): void {}
+		@Inject(DOCUMENT) private document: any,
-
+		private storageService: StorageService
-	dropTimeItem(event: any): void {
+	) {
-		// moveItemInArray(this.timeSlices, event.previousIndex, event.currentIndex);
+		this.setDemoValues();
-		if (event.previousContainer === event.container) {
-			moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-		} else {
-			transferArrayItem(
-				event.previousContainer.data,
-				event.container.data,
-				event.previousIndex,
-				event.currentIndex
-			);
-		}
 	}
 
+	reinitChoices(): void {
+		this.dateList = [];
+	}
+
+	setDemoValues(): void {
+		this.addChoice('orange');
+		this.addChoice('raisin');
+		this.addChoice('abricot');
+	}
 	dropDayItem(event: any): void {
 		// moveItemInArray(this.timeSlices, event.previousIndex, event.currentIndex);
 		if (event.previousContainer === event.container) {
@@ -46,6 +52,7 @@ export class DayListComponent implements OnInit {
 			);
 		}
 	}
+
 	/**
 	 * add a time period to a specific date choice,
 	 * focus on the new input
@@ -56,13 +63,14 @@ export class DayListComponent implements OnInit {
 		this.timeList.push({
 			literal: '',
 		});
-		const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
+		const selector = '[ng-reflect-choice_label="dateTime_' + id + '_ dateList_' + (this.timeList.length - 1) + '"]';
 		// this.cd.detectChanges();
 		const elem = this.document.querySelector(selector);
 		if (elem) {
 			elem.focus();
 		}
 	}
+
 	/**
 	 * handle keyboard shortcuts
 	 * @param $event
@@ -71,9 +79,9 @@ export class DayListComponent implements OnInit {
 	keyOnChoice($event: KeyboardEvent, choice_number: number): void {
 		$event.preventDefault();
 
-		console.log('this.choices.length', this.choices.length);
+		console.log('this. dateList.length', this.dateList.length);
 		console.log('choice_number', choice_number);
-		const lastChoice = this.choices.length - 1 === choice_number;
+		const lastChoice = this.dateList.length - 1 === choice_number;
 		// TODO handle shortcuts
 		// reset field with Ctrl + D
 		// add a field with Ctrl + N
@@ -81,10 +89,10 @@ export class DayListComponent implements OnInit {
 		// go to next choice with arrow down
 		console.log('$event', $event);
 
-		if ($event.key == 'ArrowUp' && choice_number > 0) {
+		if ($event.ctrlKey && $event.key == 'ArrowUp' && choice_number > 0) {
 			this.focusOnChoice(choice_number - 1);
 		}
-		if ($event.key == 'ArrowDown') {
+		if ($event.ctrlKey && ($event.key == 'ArrowDown' || $event.key == 'ArrowRight')) {
 			// add a field if we are on the last choice
 			if (lastChoice) {
 				this.addChoice();
@@ -107,4 +115,35 @@ export class DayListComponent implements OnInit {
 			}
 		}
 	}
+
+	addChoice(optionalLabel = ''): void {
+		this.storageService.dateList.push({
+			literal: '',
+			timeList: [],
+			date_object: new Date(),
+		});
+
+		// this.cd.detectChanges();
+		console.log('this.choices.length', this.storageService.dateList.length);
+
+		this.focusOnChoice(this.storageService.dateList.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.dateList.length !== 1) {
+			this.dateList.splice(index, 1);
+		}
+	}
+
+	openKeyboardShortcutsModal() {
+		this.display = true;
+	}
 }

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

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { TimeSlices } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs';
+import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 
 @Component({
 	selector: 'app-time-list',
@@ -13,4 +14,18 @@ export class TimeListComponent implements OnInit {
 	constructor() {}
 
 	ngOnInit(): void {}
+
+	dropTimeItem(event: any): void {
+		// moveItemInArray(this.timeSlices, event.previousIndex, event.currentIndex);
+		if (event.previousContainer === event.container) {
+			moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+		} else {
+			transferArrayItem(
+				event.previousContainer.data,
+				event.container.data,
+				event.previousIndex,
+				event.currentIndex
+			);
+		}
+	}
 }