remove lib date value accessor, start date interval form

package.json

@@ -45,7 +45,6 @@
 		"@fullcalendar/core": "^4.4.0",
 		"@ngx-translate/core": "^12.1.2",
 		"@ngx-translate/http-loader": "^5.0.0",
-		"angular-date-value-accessor": "^1.0.2",
 		"axios": "^0.19.2",
 		"bulma": "^0.9.0",
 		"bulma-switch": "^2.0.0",

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

@@ -8,7 +8,7 @@ export class ToastService {
 	constructor(private _snackBar: MatSnackBar) {}
 
 	public display(message: string, action?: string): void {
-		const config: MatSnackBarConfig = { duration: 2000 };
+		const config: MatSnackBarConfig = { duration: 4000, verticalPosition: 'top' };
 		this._snackBar.open(message, action, config);
 	}
 }

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

@@ -9,7 +9,6 @@ import { AdministrationComponent } from './administration.component';
 import { StepperComponent } from './stepper/stepper.component';
 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';
@@ -47,7 +46,6 @@ import { TimeListComponent } from './form/date/list/time/time-list.component';
 		SharedModule,
 		FormsModule,
 		TranslateModule.forChild({ extend: true }),
-		DateValueAccessorModule,
 		DragDropModule,
 	],
 })

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

@@ -6,7 +6,7 @@
 		{{ 'dates.add' | translate }}
 
 		<!--	interval-->
-		<!--		<app-date-interval></app-date-interval>-->
+		<app-date-interval [form]="form"></app-date-interval>
 	</form>
 	<div class="dates-list">
 		<!--		différentes horaires-->

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

@@ -11,6 +11,7 @@ import { DateChoice, defaultTimeOfDay, TimeSlices } from '../../../../../../mock
 
 import { TranslateService } from '@ngx-translate/core';
 import { StorageService } from '../../../../core/services/storage.service';
+import { environment } from '../../../../../environments/environment';
 
 @Component({
 	selector: 'app-date-select',
@@ -26,7 +27,7 @@ export class DateSelectComponent implements OnInit {
 	today = new Date();
 	endDateInterval: string;
 
-	intervalDaysDefault = 7;
+	intervalDaysDefault = environment.interval_days_default;
 	dateChoices: DateChoice[] = []; // sets of dateChoices as strings, config to set identical time for dateChoices in a special dateChoices poll
 	timeSlices: TimeSlices[] = []; // ranges of time expressed as strings
 

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

@@ -13,11 +13,36 @@
 	<fieldset *ngIf="showDateInterval" class="date-interval form-row is-boxed">
 		<div class="columns">
 			<div class="column">
+				<app-wip-todo></app-wip-todo>
 				{{ 'dates.interval_propose' | translate }}
+				<input type="text" formControlName="natural_lang_interval" />
+				<sub>
+					exemple "du 10 au 17", ou "lundi à samedi"
+				</sub>
+				<button (click)="addNaturalInstruction()" class="btn btn-block btn--primary">
+					interpréter
+				</button>
+			</div>
+		</div>
+		<div class="columns">
+			<div class="column">
+				<!--				<mat-form-field appearance="fill">-->
+				<!--					<mat-label>Enter a date range</mat-label>-->
+				<!--					<mat-date-range-input [formGroup]="form" [rangePicker]="picker">-->
+				<!--						<input matStartDate formControlName="startDateInterval" placeholder="Start date">-->
+				<!--						<input matEndDate formControlName="endDateInterval" placeholder="End date">-->
+				<!--					</mat-date-range-input>-->
+				<!--					<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>-->
+				<!--					<mat-date-range-picker #picker></mat-date-range-picker>-->
+
+				<!--					<mat-error *ngIf="form.controls.startDateInterval.hasError('matStartDateInvalid')">Invalid start date</mat-error>-->
+				<!--					<mat-error *ngIf="form.controls.endDateInterval.hasError('matEndDateInvalid')">Invalid end date</mat-error>-->
+				<!--				</mat-form-field>-->
 			</div>
 			<div class="column">
 				<label for="start_interval" class="hidden">start</label>
-				<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
+				{{ form.value.startDateInterval }}
+				<input id="start_interval" formControlName="startDateInterval" type="date" />
 			</div>
 		</div>
 		<div class="columns">
@@ -27,12 +52,19 @@
 			<div class="column">
 				<label for="end_interval" class="hidden">end</label>
 				<input id="end_interval" formControlName="endDateInterval" type="date" />
-				<div class="well">
+				{{ form.value.endDateInterval }}
-					{{ form.value.endDateInterval }}
+				<div class="span resume">
+					<div class="well">
+						Du
+						{{ form.value.startDateInterval | date: 'EEEE d':'Europe/Paris':'fr_FR' }}
+						au
+						{{ form.value.endDateInterval | date: 'EEEE d':'Europe/Paris':'fr_FR' }}
+						, soit {{ intervalDays }} jours.
+					</div>
 				</div>
 			</div>
 		</div>
-		<div class="span resume">soit {{ intervalDays }} jours.</div>
+
 		<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
 			<i class="fa fa-plus" aria-hidden="true"></i>
 			{{ 'dates.interval_button' | translate }}

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

@@ -22,19 +22,42 @@ export class IntervalComponent implements OnInit {
 	endDateIntervalString: string;
 	dateList: DateChoice[]; // sets of dateChoices as strings, config to set identical time for dateChoices in a special dateChoices poll
 	dateCalendarEnum: Date[] = [new Date('02/09/2021')];
+	natural_lang_interval: string;
 
 	constructor(public dateUtilities: DateUtilitiesService, private toastService: ToastService) {}
 
 	ngOnInit(): void {
+		this.form.get('startDateInterval').valueChanges.subscribe((val) => {
+			console.log('val', val);
+			if (typeof val === typeof String) {
+				this.startDateIntervalString = val;
+				this.countDays();
+			} else {
+				this.startDateInterval = val;
+			}
+		});
+		this.form.get('endDateInterval').valueChanges.subscribe((val) => {
+			console.log('val', val);
+			if (typeof val === typeof String) {
+				this.endDateIntervalString = val;
+				this.countDays();
+			}
+			// this.endDateInterval = val;
+			// this.countDays();
+		});
+
 		this.setDefaultDatesForInterval();
 	}
 
 	countDays(): void {
-		this.intervalDays = this.dateUtilities.countDays(
-			this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
-			this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
-		);
 		// this.cd.detectChanges();
+		this.intervalDays = this.dateUtilities.countDays(
+			this.startDateInterval,
+			this.endDateInterval
+			// this.dateUtilities.parseInputDateToDateObject(this.startDateIntervalString),
+			// this.dateUtilities.parseInputDateToDateObject(this.endDateIntervalString)
+		);
+		console.log('this.intervalDays ', this.intervalDays);
 	}
 
 	/**
@@ -90,4 +113,9 @@ export class IntervalComponent implements OnInit {
 			this.countDays();
 		}
 	}
+
+	addNaturalInstruction() {
+		this.toastService.display(`TODO addNaturalInstruction`);
+		console.log('TODO', this.natural_lang_interval);
+	}
 }

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

@@ -31,7 +31,7 @@ export class DayListComponent {
 		@Inject(DOCUMENT) private document: any,
 		private storageService: StorageService
 	) {
-		this.setDemoTextChoices();
+		// this.setDemoTextChoices();
 	}
 
 	reinitChoices(): void {
@@ -45,7 +45,6 @@ export class DayListComponent {
 	}
 
 	dropDayItem(event: any): void {
-		// moveItemInArray(this.timeSlices, event.previousIndex, event.currentIndex);
 		if (event.previousContainer === event.container) {
 			moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
 		} else {
@@ -134,8 +133,6 @@ export class DayListComponent {
 			date_object: new Date(),
 		});
 
-		// this.cd.detectChanges();
-
 		this.focusOnChoice(this.storageService.dateChoices.length - 1);
 	}
 

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

@@ -10,6 +10,7 @@ import { environment } from '../../../../environments/environment';
 import { PollUtilitiesService } from '../../../core/services/poll.utilities.service';
 import { StorageService } from '../../../core/services/storage.service';
 import { DateUtilitiesService } from '../../../core/services/date.utilities.service';
+import { formatDate } from '@angular/common';
 
 @Component({
 	selector: 'app-admin-form',
@@ -87,6 +88,7 @@ export class FormComponent implements OnInit, AfterViewInit {
 			allowComments: [true, [Validators.required]],
 			password: ['', []],
 			voterEmailList: ['', []],
+			natural_lang_interval: ['', []],
 			dateCreated: [creationDate, [Validators.required]],
 			hasSeveralHours: [false, [Validators.required]],
 			hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]],
@@ -109,12 +111,9 @@ export class FormComponent implements OnInit, AfterViewInit {
 	}
 
 	setDefaultFormValues(): void {
-		const dateStart = this.dateUtils.formateDateToInputStringNg(new Date());
-		const dateEnd = this.dateUtils.formateDateToInputStringNg(this.dateUtils.addDaysToDate(5, new Date()));
-
 		this.form.patchValue({
 			creatorPseudo: 'Anne Onyme',
-			creatorEmail: '',
+			creatorEmail: 'anne_onyme@anonymous_email.com',
 			description: 'RSVP',
 			isAboutDate: true,
 			hasSeveralHours: false,
@@ -130,12 +129,19 @@ export class FormComponent implements OnInit, AfterViewInit {
 			isZeroKnoledge: true,
 			areResultsPublic: true,
 			allowComments: true,
-			expiresDaysDelay: 60,
+			expiresDaysDelay: environment.expiresDaysDelay,
-			maxCountOfAnswers: 150,
+			maxCountOfAnswers: environment.maxCountOfAnswers,
 			allowNewDateTime: false,
-			startDateInterval: dateStart,
+			// startDateInterval: formatDate(new Date(), 'yyyy-MM-dd', 'fr_FR'),
-			endDateInterval: dateEnd,
+			endDateInterval: formatDate(
+				this.dateUtils.addDaysToDate(environment.interval_days_default, new Date()),
+				'yyyy-MM-dd',
+				'fr_FR'
+			),
 		});
+		console.log("this.form.controls['startDateInterval']", this.form.controls['startDateInterval']);
+		this.form.controls['startDateInterval'].setValue(formatDate(new Date(), 'yyyy-MM-dd', 'fr_FR'));
+		console.log("this.form.controls['startDateInterval']", this.form.controls['startDateInterval']);
 		this.automaticSlug();
 	}
 
@@ -147,17 +153,12 @@ export class FormComponent implements OnInit, AfterViewInit {
 
 		this.form.patchValue({ creatorPseudo: 'Chuck Norris', creatorEmail: 'chucknorris@example.com' });
 
-		const dateStart = this.dateUtils.formateDateToInputStringNg(new Date());
-		const dateEnd = this.dateUtils.formateDateToInputStringNg(this.dateUtils.addDaysToDate(5, new Date()));
-
 		this.form.patchValue({
 			title: title,
 			custom_url: this.pollUtilitiesService.makeSlugFromString(title),
 			description: 'répondez SVP <3 ! *-*',
 			creatorPseudo: 'Chuck Norris',
 			creatorEmail: 'chucknorris@example.com',
-			dateStart,
-			dateEnd,
 		});
 	}
 

src/environments/environment.ts

@@ -11,11 +11,13 @@ export const environment = {
 	frontDomain: 'http://127.0.0.1:4200',
 	production: false,
 	display_routes: true,
-	// autofill: true,
+	autofill: true,
-	autofill: false,
+	// autofill: false,
 	showDemoWarning: true,
 	autoSendNewPoll: false,
 	interval_days_default: 7,
+	expiresDaysDelay: 60,
+	maxCountOfAnswers: 150,
 	appTitle: 'funky',
 	appVersion: '0.6.0',
 	appLogo: 'assets/img/logo.png',