empty and reset time slices

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

@@ -34,7 +34,7 @@ export class StorageService {
 	public dateList: DateChoice[] = otherDefaultDates;
 
 	@LocalStorage()
-	public timeSlices: TimeSlices[] = basicSlicesOfDay;
+	public timeSlices: TimeSlices[];
 
 	@LocalStorage()
 	public vote_stack: Stack = new Stack();
@@ -46,6 +46,7 @@ export class StorageService {
 			this.userPolls.push(
 				new Poll(new Owner(), 'Démo: Réunion du département des chatons', 'aujourdhui-ou-demain')
 			);
+			// this.timeSlices = basicSlicesOfDay;
 		}
 	}
 

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

@@ -4,14 +4,6 @@
 			{{ '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 }}
 
 		<!--	interval-->
 		<button
@@ -123,6 +115,12 @@
 					<span class="count-dates">
 						{{ timeList.length }}
 					</span>
+					<button class="button is-warning" (click)="removeAllTimes()">
+						<i class="fa fa-trash"></i>
+					</button>
+					<button class="button is-info" (click)="resetTimes()">
+						<i class="fa fa-refresh"></i>
+					</button>
 				</div>
 				<div class="identical-dates" cdkDropListGroup>
 					<div
@@ -174,12 +172,16 @@
 				</div>
 			</div>
 
-			<div class="columns">
+			<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>
-					<div *ngFor="let choice of dateList; index as id" class="date-choice">
-						{{ id }})
+					<div *ngFor="let choice of dateList; index as id" class="date-choice" cdkDrag>
 						<input
 							[(ngModel)]="choice.date_object"
 							name="dateChoices_{{ id }}"

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

@@ -9,11 +9,11 @@ import { Router } from '@angular/router';
 import { DOCUMENT } from '@angular/common';
 import {
 	DateChoice,
-	moreTimeOfDay,
+	defaultTimeOfDay,
 	otherDefaultDates,
 	TimeSlices,
 } from '../../../../../../mocks/old-stuff/config/defaultConfigs';
-import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { TranslateService } from '@ngx-translate/core';
 import { StorageService } from '../../../../core/services/storage.service';
 
@@ -55,14 +55,18 @@ export class DateSelectComponent implements OnInit {
 		this.timeList = this.storageService.timeSlices;
 	}
 
-	ngOnInit(): void {
-		// this.setDefaultDatesForInterval();
-	}
-
 	get choices(): FormArray {
 		return this.form.get('choices') as FormArray;
 	}
 
+	get dateChoices() {
+		return this.form.get('dateChoices') as FormArray;
+	}
+
+	ngOnInit(): void {
+		// this.setDefaultDatesForInterval();
+	}
+
 	/**
 	 * default interval of dates proposed is from today to 7 days more
 	 */
@@ -137,10 +141,12 @@ export class DateSelectComponent implements OnInit {
 
 	removeAllTimes() {
 		this.timeList = [];
+		this.toastService.display('périodes horaires vidées');
 	}
 
 	resetTimes() {
-		this.timeList = otherDefaultDates;
+		this.timeList = defaultTimeOfDay;
+		this.toastService.display('périodes horaires réinitialisées');
 	}
 
 	/**
@@ -161,10 +167,6 @@ export class DateSelectComponent implements OnInit {
 		}
 	}
 
-	get dateChoices() {
-		return this.form.get('dateChoices') as FormArray;
-	}
-
 	addChoice(optionalLabel = ''): void {
 		const newControlGroup = this.fb.group({
 			label: this.fb.control('', [Validators.required]),
@@ -253,7 +255,21 @@ export class DateSelectComponent implements OnInit {
 		this.addChoice('abricot');
 	}
 
-	dropTimeItem(event: any) {
+	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
+			);
+		}
+	}
+
+	dropDayItem(event: any): void {
 		// moveItemInArray(this.timeSlices, event.previousIndex, event.currentIndex);
 		if (event.previousContainer === event.container) {
 			moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);

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

@@ -7,13 +7,6 @@
 						{{ 'creation.title' | translate }}
 					</h1>
 				</div>
-
-				<!--					[disabled]="!form.valid || !form.valid"-->
-
-				<button class="btn is-success is-fixed-bottom" (click)="createPoll()">
-					<i class="fa fa-save"></i>
-					Enregistrer le sondage
-				</button>
 			</header>
 			<main class="columns">
 				<div class="column">
@@ -62,6 +55,29 @@
 					</div>
 				</div>
 			</main>
+
+			<p>
+				<i>
+					{{ 'choices.helper' | translate }}
+				</i>
+			</p>
+			{{ 'choices.answer_preset_1' | translate }}
+			{{ 'choices.add' | translate }}
+			{{ 'choices.continue' | translate }}
+
+			<button
+				[disabled]="!form.valid && form.touched"
+				class="btn is-success is-fixed-bottom"
+				(click)="createPoll()"
+			>
+				<i class="fa fa-save"></i>
+				Enregistrer le sondage (vérifier la validité)
+			</button>
+			<button class="btn is-success is-fixed-bottom" (click)="createPoll()">
+				<i class="fa fa-save"></i>
+				Enregistrer le sondage (sans vérifier)
+			</button>
+
 			<footer class="column" *ngIf="show_debug_data">
 				<h2>Debug data</h2>
 				<pre class="debug padded warning">