ModalEdit.vue

<template>
  <div>
    <b-modal
      ref="modalEmissionManagerEdit"
      title="Edit a schedule"
      size="lg"
    >
      <p v-if="loaded.shows">
        Editing a timeslot/schedule for show: <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>
          <ul v-if="loaded.scheduleTimeslots">
            <li
              v-for="slot in scheduleTimeslots"
              :key="slot.id"
            >
              from
              <b-badge :variant="timeslot.id === slot.id ? 'info' : 'light'">
                {{ prettyDateTime(slot.start) }}
              </b-badge>
              to
              <b-badge :variant="timeslot.id === slot.id ? 'info' : 'light'">
                {{ prettyDateTime(slot.end) }}
              </b-badge>
            </li>
          </ul>
        </div>

        <div v-if="loaded.scheduleTimeslots">
          <p>What do you want to do?</p>
          <div align="center">
            <b-button-group>
              <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 + 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 only 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 this + all future timeslots
              </b-button>
            </b-button-group>
          </div>
        </div>
        <div v-else>
          <img
            src="../../assets/radio.gif"
            alt="loading timeslot data"
          >
        </div>
      </div>
      <div v-else>
        <img
          src="../../assets/radio.gif"
          alt="loading schedule data"
        >
      </div>
    </b-modal>

    <b-modal
      ref="modalEmissionManagerDeleteTimeslots"
      title="Deleting timeslots"
      size="lg"
      centered
      hide-footer
      no-close-on-esc
      no-close-on-backdrop
    >
      <div align="center">
        <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 {
      timeslot: null,
      deletion: {
        amount: 0,
        count: 0,
      }
    }
  },

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

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

  methods: {
    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,
      })
    },

    // initialise a new schedule and open the modal
    open (timeslot) {
      this.timeslot = timeslot
      this.$refs.modalEmissionManagerEdit.show()
      this.loadSchedule(timeslot.schedule)
    },

  }
}
</script>

<style scoped>
</style>