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

import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UuidService } from '../../../../core/services/uuid.service';
import { ToastService } from '../../../../core/services/toast.service';
import { PollService } from '../../../../core/services/poll.service';
import { DateUtilitiesService } from '../../../../core/services/date.utilities.service';
import { ApiService } from '../../../../core/services/api.service';
import { Router } from '@angular/router';
import { DOCUMENT } from '@angular/common';
import {
	DateChoice,
	defaultTimeOfDay,
	otherDefaultDates,
	TimeSlices,
} from '../../../../../../mocks/old-stuff/config/defaultConfigs';
import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { TranslateService } from '@ngx-translate/core';
import { StorageService } from '../../../../core/services/storage.service';

@Component({
	selector: 'app-date-select',
	templateUrl: './date-select.component.html',
	styleUrls: ['./date-select.component.scss'],
})
export class DateSelectComponent implements OnInit {
	@Input()
	form: FormGroup;

	displaySeveralHoursChoice = false;
	allowSeveralHours = false;
	today = new Date();
	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

	selectionKind = 'range';

	constructor(
		private fb: FormBuilder,
		private cd: ChangeDetectorRef,
		private uuidService: UuidService,
		private toastService: ToastService,
		private pollService: PollService,
		private apiService: ApiService,
		private storageService: StorageService,
		private router: Router,
		private translateService: TranslateService,
		@Inject(DOCUMENT) private document: any
	) {
		this.dateList = this.storageService.dateList;
		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 {}

	/**
	 * change time spans
	 */
	addTime() {
		this.timeList.push({
			literal: '',
		});
	}

	removeAllTimes() {
		this.timeList = [];
		this.dateList.map((elem) => (elem.timeList = []));

		this.toastService.display('périodes horaires vidées');
	}

	resetTimes() {
		this.timeList = defaultTimeOfDay;
		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');
	}
}