ModalCreate.vue

<template>
    <div>
        <b-modal
            ref="modalEmissionManagerCreate"
            :title="$t('scheduleEditor.titleCreate', { show: selectedShow.name })"
            :cancel-title="$t('cancel')"
            size="lg"
            @ok="create"
        >
            <b-alert
                variant="warning"
                :show="pastEventWarning"
            >
                <span v-html="$t('scheduleEditor.pastEventWarning')" />
            </b-alert>

            <server-errors :errors="serverErrors" />

            <div v-if="loaded.modal && !submitting">
                <b-row>
                    <b-col cols="12">
                        <label class="tw-w-full tw-font-bold">
                            <span class="tw-inline-block tw-pb-2">{{ $t('rrule.rrule') }}</span>
                            <b-form-select
                                v-model="valuePick.rrule"
                                :options="rruleOptions"
                            />
                        </label>
                    </b-col>
                </b-row>

                <b-row>
                    <b-col cols="3">
                        <label class="tw-w-full tw-font-bold">
                            <span class="tw-inline-block tw-pb-2">{{ $t('scheduleEditor.fromDate' ) }}</span>
                            <b-form-input
                                v-model="valuePick.firstDate"
                                type="date"
                            />
                        </label>
                    </b-col>
                    <b-col
                        v-if="valuePick.rrule !== 1"
                        cols="3"
                    >
                        <label class="tw-w-full tw-font-bold">
                            <span
                                class="tw-inline-block tw-pb-2"
                                v-html="$t('scheduleEditor.toDate')"
                            />
                            <b-form-input
                                v-model="valuePick.lastDate"
                                type="date"
                            />
                        </label>
                    </b-col>
                    <b-col cols="3">
                        <label class="tw-w-full tw-font-bold">
                            <span class="tw-inline-block tw-pb-2">{{ $t('scheduleEditor.from') }}</span>
                            <b-form-input
                                v-model="valuePick.startTime"
                                type="time"
                            />
                        </label>
                    </b-col>
                    <b-col cols="3">
                        <label class="tw-w-full tw-font-bold">
                            <span class="tw-inline-block tw-pb-2">{{ $t('scheduleEditor.to') }}</span>
                            <b-form-input
                                v-model="valuePick.endTime"
                                type="time"
                            />
                        </label>
                    </b-col>
                </b-row>
            </div>
            <div v-else>
                <b-row>
                    <b-col align="center">
                        <img
                            src="/assets/radio.gif"
                            :alt="$t('loading')"
                        >
                    </b-col>
                </b-row>
            </div>

            <template #modal-footer="{ ok, cancel }">
                <div class="tw-flex tw-justify-between tw-items-center tw-w-full">
                    <span v-html="$t('scheduleEditor.projectedDuration', { duration: projectedTimeslotDuration })" />

                    <div class="tw-space-x-2">
                        <b-button @click="cancel()">
                            {{ $t('cancel') }}
                        </b-button>
                        <b-button
                            variant="primary"
                            @click="ok()"
                        >
                            OK
                        </b-button>
                    </div>
                </div>
            </template>
        </b-modal>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import prettyDate from '../../mixins/prettyDate'
    import rrules from '../../mixins/rrules'
    import ServerErrors from '@/components/ServerErrors.vue'

    export default {
        components: {ServerErrors},
        mixins: [prettyDate, rrules],

        data() {
            return {
                newSchedule: null,
                loadedModal: false,
                submitting: false,
                pastEventWarning: false,
                serverErrors: [],
                initialLastDate: null,
                valuePick: {
                    firstDate: null,
                    startTime: null,
                    endTime: null,
                    lastDate: null,
                    rrule: 1
                },
            }
        },

        computed: {
            loaded() {
                return {
                    shows: this.$store.state.shows.loaded['shows'],
                    modal: this.loadedModal,
                }
            },

            projectedTimeslotDuration() {
                const {firstDate, startTime, endTime} = this.valuePick

                const d1 = new Date(`${firstDate} ${startTime}`)
                const d2 = new Date(`${this.initialLastDate} ${endTime}`)


                const diffInNs = (d2 - d1) * 1000 * 1000
                const diffInMinutes = this.nanosecondsToMinutes(diffInNs)

                return this.minutesToHm(diffInMinutes)
            },

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

        methods: {
            async create(event) {
                // prevent the modal from closing automatically on click
                event.preventDefault()
                // check for past dates; as past dates will be ignored by steering we
                // want to make the user aware - otherwise it might get confusing in
                // conflict resolution
                let now = this.apiDate(new Date())
                if (this.valuePick.firstDate < now) {
                    this.valuePick.firstDate = now
                    this.pastEventWarning = true
                    return
                } else {
                    this.pastEventWarning = false
                }
                // take all values that have been picked and put them into our new
                // schedule. so far we do not need any transformations.
                this.newSchedule.schedule.first_date = this.valuePick.firstDate
                this.newSchedule.schedule.start_time = this.valuePick.startTime
                this.newSchedule.schedule.end_time = this.valuePick.endTime
                this.newSchedule.schedule.last_date = this.valuePick.lastDate
                this.newSchedule.schedule.rrule = this.valuePick.rrule
                this.newSchedule.schedule.by_weekday = this.getWeekdayFromApiDate(this.valuePick.firstDate)

                // ok then, let's submit and see if any conflicts arise
                this.submitting = true
                this.serverErrors = []
                try {
                    await this.$store.dispatch('shows/submitSchedule', {
                        showId: this.selectedShow.id,
                        schedule: this.newSchedule,
                    })
                    this.$parent.renderView(null)
                    this.$refs.modalEmissionManagerCreate.hide()
                } catch (e) {
                    const responseData = e.response?.data
                    if (e.response?.status === 409) {
                        this.$parent.resolve(responseData)
                        this.$refs.modalEmissionManagerCreate.hide()
                    } else {
                        this.serverErrors = e.errors ?? []
                    }
                } finally {
                    this.submitting = false
                }
            },

            // initialise a new schedule and open the modal
            open(start, end) {
                let firstDate = start.format('YYYY-MM-DD')
                const startTime = start.format('HH:mm')
                const endTime = end.format('HH:mm')
                const lastDate = end.format('YYYY-MM-DD')
                const now = this.apiDate(new Date())
                if (firstDate < now) {
                    firstDate = now
                    this.pastEventWarning = true
                } else {
                    this.pastEventWarning = false
                }
                this.valuePick.firstDate = firstDate
                this.valuePick.startTime = startTime
                this.valuePick.endTime = endTime
                this.valuePick.lastDate = lastDate
                this.initialLastDate = lastDate
                this.newSchedule = {
                    schedule: {
                        rrule: 1,
                        show: 0,
                        by_weekday: 0,
                        first_date: firstDate,
                        start_time: startTime,
                        end_time: endTime,
                        last_date: lastDate,
                        is_repetition: false,
                        add_days_no: 0,
                        add_business_days_only: false,
                        default_playlist_id: 0,
                        automation_id: 0,
                    }
                }
                this.loadedModal = true
                this.submitting = false
                this.$refs.modalEmissionManagerCreate.show()
            },
        }
    }
</script>

<style scoped>
    .row {
        margin-bottom: 1em;
    }
</style>