translate calendar contents, space options for days

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { SharedModule } from '../../shared/shared.module';
@@ -16,6 +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';
 
 @NgModule({
 	declarations: [
@@ -31,6 +32,7 @@ import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.
 		AdvancedConfigComponent,
 	],
 	imports: [
+		CalendarModule,
 		AdministrationRoutingModule,
 		CommonModule,
 		ReactiveFormsModule,

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

@@ -51,19 +51,27 @@
 			</span>
 		</div>
 		<div class="actions">
-			<pre class="debug padded warning">
+			<button
-			form.value.hasSeveralHours :
+				class="btn"
-				{{ form.value.hasSeveralHours | json }}
+				[class.is-primary]="form.value.configuration.hasSeveralHours"
-			</pre
+				(click)="
+					form.patchValue({ configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours } })
+				"
 			>
+				<i class="fa fa-clock-o"></i>
+
+				<span> horaires différentes à chaque jour </span>
+			</button>
 			<button
 				(click)="addTime()"
-				*ngIf="!form.value.hasSeveralHours"
+				*ngIf="!form.value.configuration.hasSeveralHours"
 				class="btn btn--primary"
 				id="add_time_button"
 			>
 				<i class="fa fa-plus" aria-hidden="true"></i>
-				{{ 'dates.add_time' | translate }}
+				<span>
+					{{ 'dates.add_time' | translate }}
+				</span>
 			</button>
 			<button
 				(click)="removeAllTimes()"
@@ -72,7 +80,9 @@
 				id="remove_time_button"
 			>
 				<i class="fa fa-trash" aria-hidden="true"></i>
-				Aucune plage horaire
+				<span>
+					Aucune plage horaire
+				</span>
 			</button>
 			<button
 				(click)="resetTimes()"
@@ -81,64 +91,109 @@
 				id="reset_time_button"
 			>
 				<i class="fa fa-refresh" aria-hidden="true"></i>
-				réinitialiser
+				<span>
+					réinitialiser
+				</span>
 			</button>
 		</div>
 
-		<!--			<div *ngIf="'false' === allowSeveralHours" class="identical-dates">-->
+		<!--					<div *ngIf="'false' === allowSeveralHours" class="identical-dates">-->
-		<!--				<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">-->
+		<!--						<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">-->
-		<!--					<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>-->
+		<!--							<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>-->
-		<!--						<label for="timeChoices_{{ id }}">-->
+		<!--								<label for="timeChoices_{{ id }}">-->
-		<!--							<i class="fa fa-clock-o" aria-hidden="true"></i>-->
+		<!--									<i class="fa fa-clock-o" aria-hidden="true"></i>-->
-		<!--						</label>-->
+		<!--								</label>-->
-		<!--						<input-->
+		<!--								<input-->
-		<!--							[(ngModel)]="time.literal"-->
+		<!--									[(ngModel)]="time.literal"-->
-		<!--							name="timeChoices_{{ id }}"-->
+		<!--									name="timeChoices_{{ id }}"-->
-		<!--							type="text"-->
+		<!--									type="text"-->
-		<!--							id="timeChoices_{{ id }}"-->
+		<!--									id="timeChoices_{{ id }}"-->
-		<!--						/>-->
+		<!--								/>-->
-		<!--						<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">-->
+		<!--								<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">-->
-		<!--							<i class="fa fa-times" aria-hidden="true"></i>-->
+		<!--									<i class="fa fa-times" aria-hidden="true"></i>-->
-		<!--						</button>-->
+		<!--								</button>-->
+		<!--							</div>-->
+		<!--						</div>-->
 		<!--					</div>-->
-		<!--				</div>-->
-		<!--			</div>-->
 		<hr />
-		<span class="count-dates title">
+		<div class="columns">
-			{{ dateList.length }}
+			<div class="column">
-		</span>
+				<!--				ajouter une date-->
-		<span>
+				<button class="btn btn--primary" (click)="addChoice()">
-			{{ 'dates.count_dates' | translate }}
+					{{ 'dates.add' | translate }}
-		</span>
+				</button>
-		<button class="btn btn--primary" (click)="addChoice()">
+			</div>
-			{{ 'dates.add' | translate }}
+			<div class="column">
-		</button>
+				<span class="count-dates title">
-		<div *ngFor="let choice of dateList; index as id" class="date-choice">
+					{{ dateList.length }}
-			{{ id }})
+				</span>
-			<input
+				<span>
-				[(ngModel)]="choice.date_object"
+					{{ 'dates.count_dates' | translate }}
-				name="dateChoices_{{ id }}"
+				</span>
-				id="dateChoices_{{ id }}"
+			</div>
-				useValueAsDate
+		</div>
-				type="date"
+
-			/>
+		<div class="columns">
-			<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
+			<div class="column">
-				<i class="fa fa-times" aria-hidden="true"></i>
+				<div *ngFor="let choice of dateList; index as id" class="date-choice">
-			</button>
+					{{ id }})
-			<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
-				{{ 'dates.add_time' | translate }}
-			</button>
-			<div *ngIf="'true' === allowSeveralHours" class="several-times">
-				<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
 					<input
-						[(ngModel)]="timeItem.literal"
+						[(ngModel)]="choice.date_object"
-						name="dateTime_{{ id }}_Choices_{{ idTime }}"
+						name="dateChoices_{{ id }}"
-						id="dateTime_{{ id }}_Choices_{{ idTime }}"
+						id="dateChoices_{{ id }}"
-						type="text"
+						useValueAsDate
+						type="date"
 					/>
-					<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
+					<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
 						<i class="fa fa-times" aria-hidden="true"></i>
 					</button>
+					<button
+						(click)="addTimeToDate(choice, id)"
+						*ngIf="'true' === allowSeveralHours"
+						class="btn btn--primary"
+					>
+						{{ 'dates.add_time' | translate }}
+					</button>
+					<div *ngIf="'true' === allowSeveralHours" class="several-times">
+						<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
+							<input
+								[(ngModel)]="timeItem.literal"
+								name="dateTime_{{ id }}_Choices_{{ idTime }}"
+								id="dateTime_{{ id }}_Choices_{{ idTime }}"
+								type="text"
+							/>
+							<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
+								<i class="fa fa-times" aria-hidden="true"></i>
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="column calendar-column">
+				<button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">
+					plage de jours
+				</button>
+
+				<button
+					class="btn"
+					(click)="selectionKind = 'multiple'"
+					[class.is-primary]="selectionKind == 'multiple'"
+				>
+					jours séparés
+				</button>
+				<button class="btn" (click)="setDefaultDatesForInterval()">
+					réinitialiser</button
+				><button class="btn" (click)="dateCalendarEnum = [today]">
+					vider
+				</button>
+				<div class="text-center">
+					<br />
+					<p-calendar
+						[(ngModel)]="dateCalendarEnum"
+						[locale]="'calendar_widget' | translate"
+						[inline]="true"
+						[selectionMode]="selectionKind"
+					></p-calendar>
 				</div>
 			</div>
 		</div>

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

@@ -0,0 +1,8 @@
+:host {
+	.btn i + span {
+		margin-left: 1ch;
+	}
+	.btn + .btn {
+		margin-left: 1em;
+	}
+}

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

@@ -8,8 +8,8 @@ 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';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
 	selector: 'app-date-select',
@@ -22,12 +22,15 @@ export class DateSelectComponent implements OnInit {
 
 	public showDateInterval = true;
 	public allowSeveralHours = true;
+	today = new Date();
 	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
+	dateCalendarEnum: any = [new Date('02/09/2021')];
+	selectionKind: string = 'range';
 
 	constructor(
 		private fb: FormBuilder,
@@ -38,6 +41,7 @@ export class DateSelectComponent implements OnInit {
 		public dateUtilities: DateUtilities,
 		private apiService: ApiService,
 		private router: Router,
+		private translateService: TranslateService,
 		@Inject(DOCUMENT) private document: any
 	) {}
 
@@ -64,6 +68,7 @@ export class DateSelectComponent implements OnInit {
 			startDateInterval: this.startDateInterval,
 			endDateInterval: this.endDateInterval,
 		});
+		this.dateCalendarEnum = [dateCurrent, this.dateUtilities.addDaysToDate(this.intervalDaysDefault, dateCurrent)];
 		this.countDays();
 	}
 
@@ -72,7 +77,7 @@ export class DateSelectComponent implements OnInit {
 			this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
 			this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
 		);
-		this.cd.detectChanges();
+		// this.cd.detectChanges();
 	}
 
 	/**
@@ -143,13 +148,17 @@ export class DateSelectComponent implements OnInit {
 			date_object: new Date(),
 		});
 		const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
-		this.cd.detectChanges();
+		// this.cd.detectChanges();
 		const elem = this.document.querySelector(selector);
 		if (elem) {
 			elem.focus();
 		}
 	}
 
+	get dateChoices() {
+		return this.form.get('dateChoices') as FormArray;
+	}
+
 	addChoice(optionalLabel = ''): void {
 		const newControlGroup = this.fb.group({
 			label: this.fb.control('', [Validators.required]),
@@ -162,8 +171,8 @@ export class DateSelectComponent implements OnInit {
 				imageUrl: 'mon url',
 			});
 		}
-		this.form.value.choices.push(newControlGroup);
+		this.dateChoices.push(newControlGroup);
-		this.cd.detectChanges();
+		// this.cd.detectChanges();
 		console.log('this.choices.length', this.choices.length);
 
 		this.focusOnChoice(this.choices.length - 1);
@@ -220,7 +229,7 @@ export class DateSelectComponent implements OnInit {
 		if ($event.ctrlKey && $event.key == 'Backspace') {
 			this.deleteChoiceField(choice_number);
 			this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
-			this.cd.detectChanges();
+			// this.cd.detectChanges();
 			this.focusOnChoice(Math.min(choice_number - 1, 0));
 		}
 		if ($event.ctrlKey && $event.key == 'Enter') {

src/app/shared/components/selectors/language-selector/language-selector.component.ts

@@ -1,8 +1,6 @@
 import { Component, DoCheck, OnInit } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
 
 import { Language } from '../../../../core/enums/language.enum';
-import { StorageService } from '../../../../core/services/storage.service';
 import { LanguageService } from '../../../../core/services/language.service';
 
 @Component({

src/assets/i18n/EN.json

@@ -584,5 +584,41 @@
 		"NL": "Néérlandais",
 		"OC": "oc",
 		"SV": "sv"
+	},
+
+	"calendar_widget" : {
+		"startsWith": "Starts with",
+		"contains": "Contains",
+		"notContains": "Not contains",
+		"endsWith": "Ends with",
+		"equals": "Equals",
+		"notEquals": "Not equals",
+		"noFilter": "No Filter",
+		"lt": "Less than",
+		"lte": "Less than or equal to",
+		"gt": "Greater than",
+		"gte": "Great then or equals",
+		"is": "Is",
+		"isNot": "Is not",
+		"before": "Before",
+		"after": "After",
+		"clear": "Clear",
+		"apply": "Apply",
+		"matchAll": "Match All",
+		"matchAny": "Match Any",
+		"addRule": "Add Rule",
+		"removeRule": "Remove Rule",
+		"accept": "Yes",
+		"reject": "No",
+		"choose": "Choose",
+		"upload": "Upload",
+		"cancel": "Cancel",
+		"dayNames": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+		"dayNamesShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+		"dayNamesMin": ["Su","Mo","Tu","We","Th","Fr","Sa"],
+		"monthNames": ["January","February","March","April","May","June","July","August","September","October","November","December"],
+		"monthNamesShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+		"today": "Today",
+		"weekHeader": "Wk"
 	}
 }

src/assets/i18n/FR.json

@@ -588,5 +588,40 @@
 		"NL": "Néérlandais",
 		"OC": "oc",
 		"SV": "sv"
-	}
+	},
+	"calendar_widget" : {
+	"startsWith": "Starts with",
+	"contains": "Contains",
+	"notContains": "Not contains",
+	"endsWith": "Ends with",
+	"equals": "Equals",
+	"notEquals": "Not equals",
+	"noFilter": "No Filter",
+	"lt": "Less than",
+	"lte": "Less than or equal to",
+	"gt": "Greater than",
+	"gte": "Great then or equals",
+	"is": "Is",
+	"isNot": "Is not",
+	"before": "Before",
+	"after": "After",
+	"clear": "Clear",
+	"apply": "Apply",
+	"matchAll": "Match All",
+	"matchAny": "Match Any",
+	"addRule": "Add Rule",
+	"removeRule": "Remove Rule",
+	"accept": "Yes",
+	"reject": "No",
+	"choose": "Choose",
+	"upload": "Upload",
+	"cancel": "Cancel",
+	"dayNames": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+	"dayNamesShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+	"dayNamesMin": ["Su","Mo","Tu","We","Th","Fr","Sa"],
+	"monthNames": ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"],
+	"monthNamesShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+	"today": "Aujourd'hui",
+	"weekHeader": "Wk"
+}
 }