ModalEdit.vue

<template>
    <div>
        <b-modal
                ref="modalEmissionManagerEdit"
                title="Edit a schedule"
                size="lg"
        >
            <p v-if="loaded.shows">
                Schedule for: <b>{{ selectedShow.name }}</b>
            </p>

            <div v-if="timeslot && loaded.schedule">
                This timeslot starts at
                <b-badge variant="info">
                    {{ prettyDateTime(timeslot.start) }}
                </b-badge>
                and ends at
                <b-badge variant="info">
                    {{ prettyDateTime(timeslot.end) }}
                </b-badge>

                <div v-if="schedule.rrule === 1">
                    <p>
                        This is a single emission.
                        <span v-if="!loaded.scheduleTimeslots">
              <br>
              <img
                      src="/assets/radio.gif"
                      alt="loading schedule data"
              >
            </span>
                        <span v-else>
              <span v-if="scheduleTimeslots.length > 1">
                But due to a previous conflict resolution there is a second timeslot, from
                <b-badge variant="info">
                  <span v-if="timeslot.start === scheduleTimeslots[0].start">{{ prettyDateTime(scheduleTimeslots[1].start) }}</span>
                  <span v-else>{{ prettyDateTime(scheduleTimeslots[0].start) }}</span>
                </b-badge>
                to
                <b-badge variant="info">
                  <span v-if="timeslot.start === scheduleTimeslots[0].start">{{ prettyDateTime(scheduleTimeslots[1].end) }}</span>
                  <span v-else>{{ prettyDateTime(scheduleTimeslots[0].end) }}</span>
                </b-badge>
                .
              </span>
              <span v-else>No other timeslots in this schedule.</span>
            </span>
                    </p>
                </div>
                <div v-else>
                    <p>
                        This is a recurring event: <b>{{ rruleRender(schedule.rrule) }}</b>, until: {{
                        prettyDate(schedule.until) }}
                    </p>
                    <p>All timeslots of this schedule:</p>

                    <b-table
                            id="emission-table"
                            striped
                            :per-page="perPage"
                            :current-page="currentPage"
                            :fields="['start', 'end']"
                            :items="scheduleTimeslots"
                            :busy="!loaded.scheduleTimeslots"
                            :tbody-tr-class="trClass"
                    >
                        <template v-slot:cell(start)="data">
                            {{ prettyDateTime(data.item.start) }}
                        </template>

                        <template v-slot:cell(end)="data">
                            {{ prettyDateTime(data.item.end) }}
                        </template>
                    </b-table>

                    <div class="tw-w-full tw-flex tw-justify-end">
                        <b-pagination
                                v-model="currentPage"
                                :total-rows="scheduleTimeslots.length"
                                :per-page="perPage"
                                aria-controls="emission-table"
                        />
                    </div>
                </div>
            </div>
            <div v-else>
                <img
                        src="/assets/radio.gif"
                        alt="loading schedule data"
                >
            </div>

            <hr>

            <h4>Add repetition of schedule</h4>

            <b-row>
                <b-col cols="6">
                    <label class="tw-leading-loose">
                        When to repeat?

                        <b-form-select
                                v-model="repetitionRule"
                                :options="repetitionOptions"
                        />
                    </label>

                    <b-checkbox
                        v-if="repetitionRule !== 4"
                        v-model="useSameTime"
                    >
                        Use same start and end time
                    </b-checkbox>
                </b-col>
                <b-col
                        v-if="!useSameTime"
                        cols="6"
                >
                    <label class="tw-leading-loose">
                        Repeat at
                        <b-form-input type="time" />
                    </label>
                </b-col>
            </b-row>

            <b-row
                    v-if="repetitionRule === 3"
                    class="tw-mt-4"
            >
                <b-col cols="6">
                    <label class="tw-leading-loose">
                        How many days later?

                        <b-form-input
                                v-model="addNoOfDays"
                                type="number"
                        />
                    </label>

                    <b-checkbox v-model="onlyBusinessDays">
                        Only count business days
                    </b-checkbox>
                </b-col>
            </b-row>

            <b-row
                    v-if="repetitionRule === 4"
                    class="tw-mt-4"
            >
                Wir arbeiten dran. :)
            </b-row>

            <b-row class="mt-4">
                <b-col>
                    <b-button
                            variant="primary"
                            size="sm"
                            @click="createRepetitionSchedule"
                    >
                        Create repetition schedule
                    </b-button>
                </b-col>
            </b-row>

            <template v-slot:modal-footer>
                <div
                        v-if="loaded.scheduleTimeslots"
                        class="tw-w-full tw-flex tw-justify-between tw-items-center"
                >
                    <div class="tw-space-x-2">
                        <b-button
                                variant="danger"
                                size="sm"
                                @click="deleteFullSchedule(schedule.id)"
                        >
                            <span v-if="scheduleTimeslots.length === 1">Delete</span>
                            <span v-else-if="schedule.rrule === 1">Delete both</span>
                            <span v-else>Delete schedule and all timeslots</span>
                        </b-button>

                        <b-button
                                v-if="schedule.rrule > 1 && scheduleTimeslots.length > 1"
                                variant="danger"
                                size="sm"
                                @click="deleteSingleTimeslot(schedule.id, timeslot.id)"
                        >
                            Delete this timeslot
                        </b-button>

                        <b-button
                                v-if="schedule.rrule > 1 && scheduleTimeslots.length > 1"
                                variant="danger"
                                size="sm"
                                @click="deleteAllFutureTimeslots(schedule.id, timeslot.id)"
                        >
                            Delete all timeslots
                        </b-button>
                    </div>
                </div>
                <div v-else>
                    <img
                            src="/assets/radio.gif"
                            alt="loading timeslot data"
                    >
                </div>
            </template>
        </b-modal>

        <b-modal
                ref="modalEmissionManagerDeleteTimeslots"
                title="Deleting timeslots"
                size="lg"
                centered
                hide-footer
                no-close-on-esc
                no-close-on-backdrop
        >
            <div>
                <img
                        src="/assets/radio.gif"
                        alt="loading schedule data"
                >
                <b-progress
                        :value="deletion.count"
                        :max="deletion.amount"
                        variant="info"
                        animated
                />
            </div>
        </b-modal>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import prettyDate from '../../mixins/prettyDate'
    import rrules from '../../mixins/rrules'

    export default {
        mixins: [prettyDate, rrules],

        data() {
            return {
                currentPage: 1,
                perPage: 5,
                timeslot: null,
                deletion: {
                    amount: 0,
                    count: 0,
                },
                useSameTime: true,
                onlyBusinessDays: false,
                addNoOfDays: 1,
                repetitionRule: 1,
            }
        },

        computed: {
            loaded() {
                return {
                    shows: this.$store.state.shows.loaded.shows,
                    schedule: this.$store.state.shows.loaded.schedule,
                    scheduleTimeslots: this.$store.state.shows.loaded.scheduleTimeslots,
                }
            },

            repetitionOptions() {
                return [
                    {value: 1, text: this.$t("On the following day")},
                    {value: 2, text: this.$t("On the following business day")},
                    {value: 3, text: this.$t("Number of days later")},
                    // {value: 4, text: this.$t("Custom")},
                ];
            },

            ...mapGetters({
                selectedShow: 'shows/selectedShow',
                schedule: 'shows/schedule',
                scheduleTimeslots: 'shows/scheduleTimeslots',
            })
        },

        methods: {
            trClass(item, type) {
                if (!item || type !== 'row') {
                    return '';
                }

                return item.id === this.timeslot.id
                    ? 'table-info'
                    : ''
            },

            createRepetitionSchedule() {
                const {onlyBusinessDays, addNoOfDays} = this.getRepetitionParameters();
                const {dstart, tstart, tend, rrule, until, fallback_id, automation_id, byweekday} = this.schedule;

                const newSchedule = {
                    schedule: {
                        dstart,
                        tstart,
                        tend,
                        rrule,
                        until,
                        fallback_id,
                        automation_id,
                        byweekday,
                        is_repetition: true,
                        add_business_days_only: onlyBusinessDays,
                        add_days_no: parseInt(addNoOfDays, 10),
                    }
                };

                this.$store.dispatch('shows/submitSchedule', {
                    showId: this.selectedShow.id,
                    schedule: newSchedule,
                    callback: (response) => {
                        console.log(this.$parent);
                        if (response.data.projected === undefined) {
                            this.$parent.renderView(null)
                        } else {
                            this.$log.debug('Timeslot conflict. Switching to resolve mode.');
                            this.$parent.resolve(response.data)
                        }
                        this.$refs.modalEmissionManagerEdit.hide()
                    },
                });
            },

            deleteFullSchedule(id) {
                this.$store.dispatch('shows/deleteSchedule', {
                    show: this.selectedShow.id,
                    schedule: id,
                    callback: () => {
                        this.$refs.modalEmissionManagerEdit.hide();
                        this.$parent.renderView(null)
                    }
                })
            },

            deleteSingleTimeslot(scheduleId, timeslotId) {
                this.$store.dispatch('shows/deleteTimeslot', {
                    show: this.selectedShow.id,
                    schedule: scheduleId,
                    timeslot: timeslotId,
                    callback: () => {
                        this.$refs.modalEmissionManagerEdit.hide()
                        this.$parent.renderView(null)
                    }
                })
            },

            deleteAllFutureTimeslots(scheduleId) {
                let startDate = new Date(this.timeslot.start)
                let toDelete = []
                for (let slot of this.scheduleTimeslots) {
                    if (new Date(slot.start) >= startDate) {
                        toDelete.push(slot.id)
                    }
                }

                if (toDelete.length === this.scheduleTimeslots.length) {
                    this.$log.debug('deleting full schedule')
                    this.deleteFullSchedule(scheduleId)
                } else {
                    this.deletion.amount = toDelete.length
                    this.deletion.count = 0
                    this.$refs.modalEmissionManagerDeleteTimeslots.show()

                    for (let i in toDelete) {
                        this.$log.debug('Deleting timeslot', toDelete[i])
                        this.$store.dispatch('shows/deleteTimeslot', {
                            show: this.selectedShow.id,
                            schedule: scheduleId,
                            timeslot: toDelete[i],
                            callback: () => {
                                this.deletion.count++
                                this.$log.debug('deleted ' + this.deletion.count + ' timeslots')
                                if (this.deletion.count === this.deletion.amount) {
                                    this.$parent.renderView(null)
                                    this.$refs.modalEmissionManagerDeleteTimeslots.hide()
                                    this.$refs.modalEmissionManagerEdit.hide()
                                }
                            }
                        })
                    }
                }
            },

            loadSchedule(scheduleId) {
                this.$store.dispatch('shows/fetchSchedule', {
                    show: this.selectedShow.id,
                    schedule: scheduleId,
                    callback: () => {
                        this.loadScheduleTimeslots(scheduleId)
                    }
                })
            },

            loadScheduleTimeslots(scheduleId) {
                this.$store.dispatch('shows/fetchTimeslots', {
                    id: this.selectedShow.id,
                    schedule: scheduleId,
                    start: this.schedule.dstart,
                    end: this.schedule.until,
                })
            },

            getRepetitionParameters() {
                if (this.repetitionRule == 1) {
                    return {
                        onlyBusinessDays: false,
                        addNoOfDays: 1,
                    }
                }

                if (this.repetitionRule == 2) {
                    return {
                        onlyBusinessDays: true,
                        addNoOfDays: 1,
                    }
                }

                return {
                    onlyBusinessDays: this.onlyBusinessDays,
                    addNoOfDays: this.addNoOfDays,
                }
            },

            // initialise a new schedule and open the modal
            open(timeslot) {
                const timeslotIndex = this.scheduleTimeslots.findIndex(item => item.id === timeslot.id);
                let timeslotPage = Math.ceil(timeslotIndex / this.perPage);
                const timeslotIsFirstEntryOnPage = timeslotIndex === ((timeslotPage) * this.perPage);

                // The math above is slightly off for every first entry on the page
                // So we add 1 to adjust the page to the correct one
                if (timeslotIsFirstEntryOnPage) {
                    timeslotPage += 1;
                }

                this.timeslot = timeslot
                this.currentPage = timeslotPage;
                this.$refs.modalEmissionManagerEdit.show()
                this.loadSchedule(timeslot.schedule)
            },

        }
    }
</script>

<style scoped>
</style>