framadate-responsive/src/app/pages/dates/dates.component.ts

import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
import { ConfigService } from '../../services/config.service';
import { BaseComponent } from '../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: 'framadate-dates',
    templateUrl: './dates.component.html',
    styleUrls: ['./dates.component.scss'],
})
export class DatesComponent extends BaseComponent implements OnInit {
    showDateInterval: boolean = false;
    startDateInterval: any;
    intervalDays: any;
    intervalDaysDefault: number = 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() {
        let 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: [],
        });
        let 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: '' });
        let 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() {
        let 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`,
        });
    }
}