salix/modules/worker/front/calendar/index.js

import ngModule from '../module';
import Section from 'salix/components/section';
import './style.scss';

class Controller extends Section {
    constructor($element, $) {
        super($element, $);
        this.date = new Date();
        this.events = {};
    }

    get date() {
        return this._date;
    }

    set date(value) {
        this._date = value;
        value.setHours(0, 0, 0, 0);

        const started = new Date(value.getTime());
        started.setMonth(0);
        started.setDate(1);
        this.started = started;

        const ended = new Date(value.getTime());
        ended.setMonth(12);
        ended.setDate(0);
        this.ended = ended;

        this.months = new Array(12);

        for (let i = 0; i < this.months.length; i++) {
            const now = new Date(value.getTime());
            now.setDate(1);
            now.setMonth(i);
            this.months[i] = now;
        }
    }

    get worker() {
        return this._worker;
    }

    set worker(value) {
        this._worker = value;

        if (value) this.refresh();
    }

    onData(data) {
        this.events = {};
        this.calendar = data.calendar;

        let addEvent = (day, event) => {
            this.events[new Date(day).getTime()] = event;
        };

        if (data.holidays) {
            data.holidays.forEach(holiday => {
                const holidayDetail = holiday.detail && holiday.detail.description;
                const holidayType = holiday.type && holiday.type.name;
                const holidayName = holidayDetail || holidayType;

                addEvent(holiday.dated, {
                    name: holidayName,
                    color: '#ff0'
                });
            });
        }
        if (data.absences) {
            data.absences.forEach(absence => {
                let type = absence.absenceType;
                addEvent(absence.dated, {
                    name: type.name,
                    color: type.rgb
                });
            });
        }

        this.repaint();
    }

    repaint() {
        let calendars = this.element.querySelectorAll('vn-calendar');
        for (let calendar of calendars)
            calendar.$ctrl.repaint();
    }

    formatDay(day, element) {
        let event = this.events[day.getTime()];
        if (!event) return;

        let dayNumber = element.firstElementChild;
        dayNumber.title = event.name;
        dayNumber.style.backgroundColor = event.color;
        dayNumber.style.color = 'rgba(0, 0, 0, 0.7)';
    }

    pick(absenceType) {
        if (absenceType == this.absenceType)
            absenceType = null;

        this.absenceType = absenceType;
    }

    onSelection($days, $type, $weekday) {
        if (!this.absenceType)
            return this.vnApp.showMessage(this.$t('Choose an absence type'));

        let $events = [];
        for (let day of $days) {
            const stamp = day.getTime();
            $events = $events.concat(this.events[stamp] || []);
        }

        if ($events.length)
            this.edit($events[0]);
        else
            this.create($type, $days, $weekday);
    }

    create(type, days, weekday) {
        this.isNew = true;
        this.selected = {
            type: 'day',
            dated: days[0]
        };

        this.$.dialog.show();
    }

    edit() {
        this.isNew = false;
    }

    onAbsenceResponse(response) {
        switch (response) {
        case 'accept': {
            const selected = this.selected;
            const params = Object.assign(selected, {
                absenceTypeId: this.absenceType.id
            });

            /*  const selected = {
                    businessFk: 106,
                    absenceTypeFk: this.absenceType.id,
                    dated: $days[0]
                }; */

            let req;
            if (this.isNew) {
                const path = `Workers/${this.$params.id}/createAbsences`;
                req = this.$http.post(path, params);
            } else
                req = this.$http.put(`${this.path}/${selected.id}`, selected);

            return req.then(() => {
                this.selected = null;
                this.isNew = null;
                this.refresh();
            });
        }
        case 'delete':
            return this.onDelete(this.selected.id)
                .then(response => response == 'accept');
        }
    }

    refresh() {
        const params = {
            workerFk: this.worker.id,
            started: this.started,
            ended: this.ended
        };
        this.$http.get(`WorkerCalendars/absences`, {params})
            .then(res => this.onData(res.data));
    }
}

ngModule.component('vnWorkerCalendar', {
    template: require('./index.html'),
    controller: Controller,
    bindings: {
        worker: '<'
    }
});