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

import { ChangeDetectorRef, Component, Inject, Input } from '@angular/core';
import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { DOCUMENT } from '@angular/common';
import { FormGroup } from '@angular/forms';
import { ToastService } from '../../../../../../core/services/toast.service';
import { StorageService } from '../../../../../../core/services/storage.service';
import { MatDialog } from '@angular/material/dialog';
import { ShortcutsHelpComponent } from '../../../../../shared/components/ui/shortcuts-help/shortcuts-help.component';
import { DateChoice } from '../../../../../../core/models/dateChoice.model';

@Component({
	selector: 'app-day-list',
	templateUrl: './day-list.component.html',
	styleUrls: ['./day-list.component.scss'],
	entryComponents: [ShortcutsHelpComponent],
})
export class DayListComponent {
	@Input()
	form: FormGroup;
	@Input()
	public dateChoices: Array<DateChoice> = [];
	@Input()
	public hasSeveralHours: boolean;
	timeList: any;
	display = false;

	constructor(
		public dialog: MatDialog,
		private toastService: ToastService,
		private cd: ChangeDetectorRef,
		@Inject(DOCUMENT) private document: any,
		private storageService: StorageService
	) {
		// this.setDemoTextChoices();
	}

	reinitChoices(): void {
		this.dateChoices = [];
	}

	setDemoTextChoices(): void {
		this.addChoice('orange');
		this.addChoice('raisin');
		this.addChoice('abricot');
	}

	dropDayItem(event: any): void {
		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 choice DateChoice
	 * @param id number
	 */
	addTimeToDate(choice: DateChoice, id: number): void {
		if (!choice.timeSlices) {
			choice.timeSlices = [];
		}
		choice.timeSlices.push({
			literal: '',
		});
		// focus on created field
		this.cd.detectChanges();
		const selector = '#choice_' + id + '_timeChoices_' + (choice.timeSlices.length - 1);
		const firstField = this.document.querySelector(selector);
		if (firstField) {
			firstField.focus();
		} else {
			console.log('no last time choice found');
		}
	}

	/**
	 * handle keyboard shortcuts
	 * @param $event
	 * @param choice_number
	 */
	keyOnChoice($event: KeyboardEvent, choice_number: number): void {
		$event.preventDefault();

		console.log('this. dateChoices.length', this.dateChoices.length);
		console.log('choice_number', choice_number);
		const lastChoice = this.dateChoices.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: '',
			timeSlices: [],
			date_object: new Date(),
		});

		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.dateChoices.length !== 1) {
			this.dateChoices.splice(index, 1);
		}
	}

	openKeyboardShortcutsModal() {
		this.display = true;
	}

	isWeekendDay(date_object: Date) {
		if (date_object) {
			const day = date_object.getDay();
			return day === 6 || day === 0;
		}
		return false;
	}

	openSimple() {
		this.display = !this.display;
	}
}