154 lines
4.1 KiB
TypeScript
154 lines
4.1 KiB
TypeScript
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 {
|
|
@Input()
|
|
form: FormGroup;
|
|
@Input()
|
|
public dateList: Array<any> = [];
|
|
@Input()
|
|
public hasSeveralHours: boolean;
|
|
timeList: any;
|
|
display = false;
|
|
|
|
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) {
|
|
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
|
|
} else {
|
|
transferArrayItem(
|
|
event.previousContainer.data,
|
|
event.container.data,
|
|
event.previousIndex,
|
|
event.currentIndex
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* add a time period to a specific date choice,
|
|
* focus on the new input
|
|
* @param config
|
|
* @param id
|
|
*/
|
|
addTimeToDate(config: any, id: number) {
|
|
this.timeList.push({
|
|
literal: '',
|
|
});
|
|
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
|
|
* @param choice_number
|
|
*/
|
|
keyOnChoice($event: KeyboardEvent, choice_number: number): void {
|
|
$event.preventDefault();
|
|
|
|
console.log('this. dateChoices.length', this.dateList.length);
|
|
console.log('choice_number', choice_number);
|
|
const lastChoice = this.dateList.length - 1 === choice_number;
|
|
// TODO handle shortcuts
|
|
// reset field with Ctrl + D
|
|
// add a field with Ctrl + N
|
|
// go to previous choice with arrow up
|
|
// go to next choice with arrow down
|
|
console.log('$event', $event);
|
|
|
|
if ($event.ctrlKey && $event.key == 'ArrowUp' && choice_number > 0) {
|
|
this.focusOnChoice(choice_number - 1);
|
|
}
|
|
if ($event.ctrlKey && ($event.key == 'ArrowDown' || $event.key == 'ArrowRight')) {
|
|
// add a field if we are on the last choice
|
|
if (lastChoice) {
|
|
this.addChoice();
|
|
this.toastService.display('choix ajouté par raccourci "flèche bas"');
|
|
} else {
|
|
this.focusOnChoice(choice_number + 1);
|
|
}
|
|
}
|
|
if ($event.ctrlKey && $event.key == 'Backspace') {
|
|
this.deleteChoiceField(choice_number);
|
|
this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
|
|
// this.cd.detectChanges();
|
|
this.focusOnChoice(Math.min(choice_number - 1, 0));
|
|
}
|
|
if ($event.ctrlKey && $event.key == 'Enter') {
|
|
// go to other fields
|
|
const elem = this.document.querySelector('#creatorEmail');
|
|
if (elem) {
|
|
elem.focus();
|
|
}
|
|
}
|
|
}
|
|
|
|
addChoice(optionalLabel = ''): void {
|
|
this.storageService.dateChoices.push({
|
|
literal: '',
|
|
timeList: [],
|
|
date_object: new Date(),
|
|
});
|
|
|
|
// this.cd.detectChanges();
|
|
|
|
this.focusOnChoice(this.storageService.dateChoices.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;
|
|
}
|
|
|
|
isWeekendDay(date_object: Date) {
|
|
const day = date_object.getDay();
|
|
return day === 6 || day === 0;
|
|
}
|
|
}
|