diff --git a/src/app/core/services/storage.service.ts b/src/app/core/services/storage.service.ts index e78912cb..71d8dc95 100644 --- a/src/app/core/services/storage.service.ts +++ b/src/app/core/services/storage.service.ts @@ -52,7 +52,9 @@ export class StorageService { ); } - this.dateList = this.dateUtilities.makeDefaultDateChoices(); + if (!this.dateList.length) { + this.dateList = this.dateUtilities.makeDefaultDateChoices(); + } } setChoicesForVoteStack(choices_list: Choice[]) { diff --git a/src/app/features/administration/administration.module.ts b/src/app/features/administration/administration.module.ts index 91783080..d4b00a17 100644 --- a/src/app/features/administration/administration.module.ts +++ b/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 {} diff --git a/src/app/features/administration/form/date-select/date-select.component.html b/src/app/features/administration/form/date-select/date-select.component.html index c72c772b..542a61ef 100644 --- a/src/app/features/administration/form/date-select/date-select.component.html +++ b/src/app/features/administration/form/date-select/date-select.component.html @@ -92,24 +92,11 @@
-
-
- - -
-
- - {{ dateList.length }} - - - {{ 'dates.count_dates' | translate }} - -
-
- - +
diff --git a/src/app/features/administration/form/date-select/date-select.component.ts b/src/app/features/administration/form/date-select/date-select.component.ts index 472a56c1..a35591ff 100644 --- a/src/app/features/administration/form/date-select/date-select.component.ts +++ b/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 - timeList: TimeSlices[]; // ranges of time expressed as strings + 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 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'); - } } diff --git a/src/app/features/administration/form/date/list/day/day-list.component.html b/src/app/features/administration/form/date/list/day/day-list.component.html index b887b1b5..3b0ff9c3 100644 --- a/src/app/features/administration/form/date/list/day/day-list.component.html +++ b/src/app/features/administration/form/date/list/day/day-list.component.html @@ -1,36 +1,120 @@ -
-
- -

Dates

-
- - -
+
+ + {{ dateList.length }} + + + {{ 'dates.count_dates' | translate }} + +
+
+ +
+
+

Dates

+ -
- plage horaire distincte -
-
- - +
+
+
+ + + +
+ plage horaire distincte +
+
+ + + 💁 Aide, Raccourcis clavier + + + + Vous pouvez naviguer d'un champ de date à un autre avec les flèches du clavier. + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Fonction + + Raccourci +
+ Créer un nouveau choix + + Ctrl + N +
+ Naviguer vers le champ suivant. Créée un nouveau champ si effectué sur le dernier champ. + + Ctrl + flèche bas +
+ réinitialiser le champ actuel + + Ctrl + effacer +
+ ou +
+ Ctrl + supprimer +
+ Alterner entre un sondage de type Date et un sondage texte + + Alt + D +
+ Tout envoyer + + Ctrl + entrée +
+
diff --git a/src/app/features/administration/form/date/list/day/day-list.component.ts b/src/app/features/administration/form/date/list/day/day-list.component.ts index 6dbf3ca3..701c9266 100644 --- a/src/app/features/administration/form/date/list/day/day-list.component.ts +++ b/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 = []; @Input() public hasSeveralHours: boolean; timeList: any; + display = false; - constructor(@Inject(DOCUMENT) private document: any) {} - - 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 - ); - } + constructor( + private toastService: ToastService, + @Inject(DOCUMENT) private document: any, + private storageService: StorageService + ) { + this.setDemoValues(); } + 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; + } } diff --git a/src/app/features/administration/form/date/list/time/time-list.component.ts b/src/app/features/administration/form/date/list/time/time-list.component.ts index e2b2cd2e..033498de 100644 --- a/src/app/features/administration/form/date/list/time/time-list.component.ts +++ b/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 + ); + } + } }