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'
import { getISODateString, getTimeString } from '@/utilities'

export default {
  components: { ServerErrors },
  mixins: [prettyDate, rrules],
  emits: ['conflict', 'update'],
  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
      const 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.$refs.modalEmissionManagerCreate.hide()
        this.$emit('update')
      } catch (e) {
        const responseData = e.response?.data
        if (e.response?.status === 409) {
          this.$emit('conflict', 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 = getISODateString(start)
      const startTime = getTimeString(start)
      const endTime = getTimeString(end)
      const lastDate = getISODateString(end)
      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>