funky-framadate-front/src/app/pages/dates/dates.component.ts

import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
import { ConfigService } from '../../services/config.service';
import { BaseComponent } from '../example/base-page/base.component';
import { DOCUMENT } from '@angular/common';
import { MessageService } from 'primeng/api';
import { otherDefaultDates } from '../../config/defaultConfigs';
import { DateUtilities } from '../../config/DateUtilities';

@Component({
	selector: 'app-dates',
	templateUrl: './dates.component.html',
	styleUrls: ['./dates.component.scss'],
})
export class DatesComponent extends BaseComponent implements OnInit {
	showDateInterval = false;
	startDateInterval: any;
	intervalDays: any;
	intervalDaysDefault = 7;
	endDateInterval: any;

	constructor(
		public config: ConfigService,
		private cd: ChangeDetectorRef,
		private messageService: MessageService,
		private dateUtilities: DateUtilities,
		@Inject(DOCUMENT) private document: any
	) {
		super(config);
	}

	countDays() {
		// compute the number of days in the date interval
		if (this.endDateInterval && this.startDateInterval) {
			this.intervalDays = this.dateUtilities.dayDiff(this.endDateInterval, this.startDateInterval).toFixed(0);
		}
	}

	/**
	 * set the interval options
	 */
	ngOnInit() {
		const dateCurrent = new Date();
		const dateJson = dateCurrent.toISOString();
		this.startDateInterval = dateJson.substring(0, 10);
		this.endDateInterval = this.dateUtilities
			.addDaysToDate(this.intervalDaysDefault, dateCurrent)
			.toISOString()
			.substring(0, 10);
	}

	addDate() {
		this.config.dateList.push({
			literal: '',
			date_object: new Date(),
			timeList: [],
		});
		const selector = '[ng-reflect-name="dateChoices_' + (this.config.dateList.length - 1) + '"]';
		this.cd.detectChanges();
		const elem = this.document.querySelector(selector);
		if (elem) {
			elem.focus();
		}
	}

	/**
	 * change time spans
	 */
	addTime() {
		this.config.timeList.push({
			literal: '',
			timeList: [],
			date_object: new Date(),
		});
	}

	removeAllTimes() {
		this.config.timeList = [];
	}

	resetTimes() {
		this.config.timeList = otherDefaultDates;
	}

	/**
	 * add a time period to a specific date choice,
	 * focus on the new input
	 * @param config
	 * @param id
	 */
	addTimeToDate(config: any, id: number) {
		config.timeList.push({ literal: '' });
		const selector = '[ng-reflect-name="dateTime_' + id + '_Choices_' + (config.timeList.length - 1) + '"]';
		this.cd.detectChanges();
		const elem = this.document.querySelector(selector);
		if (elem) {
			elem.focus();
		}
	}

	/**
	 * remove all input contents, does not reset to default
	 */
	emptyAll() {
		this.config.dateList.forEach((element) => {
			element.literal = '';
			element.date_object = new Date();
			element.timeList = ['', '', ''];
		});
		this.config.timeList.forEach((element) => {
			element.literal = '';
		});
	}

	/**
	 * add all the dates between the start and end dates in the interval section
	 */
	addIntervalOfDates() {
		const newIntervalArray = this.dateUtilities.getDatesInRange(this.startDateInterval, this.endDateInterval, 1);

		const converted = [];
		newIntervalArray.forEach((element) => {
			converted.push({
				literal: element.literal,
				date_object: element.date_object,
				timeList: [],
			});
		});
		this.config.dateList = [...new Set(converted)]; // add only dates that are not already present with a Set of unique items
		this.showDateInterval = false;

		this.messageService.add({
			severity: 'success',
			summary: 'Dates ajoutées',
			detail: `les dates ont été ajoutées aux réponses possibles`,
		});
	}
}