NotesModal.vue

<template>
  <div>
    <b-modal
      ref="modalNote"
      title="Editing a note"
      size="lg"
      @ok="saveNote"
    >
      <b-container fluid>
        <p v-if="typeof note.start !== 'undefined'">
          This is the note for the timeslot on {{ prettyDateTime(note.start) }}.
        </p>
        <p v-else>
          You are creating a new note.
        </p>
        <b-row>
          <b-col cols="2">
            Title:
          </b-col>
          <b-col cols="10">
            <b-form-input
              v-model="title"
              type="text"
              placeholder="Enter a title"
            />
          </b-col>
          <b-col cols="2" />
          <b-col cols="10">
            <small class="slug">Slug: {{ slug }}</small>
          </b-col>
        </b-row>
        <br>
        <b-row>
          <b-col cols="2">
            Summary:
          </b-col>
          <b-col cols="10">
            <b-form-textarea
              v-model="summary"
              :rows="4"
              placeholder="Enter a summary"
            />
          </b-col>
        </b-row>
        <br>
        <b-row>
          <b-col cols="2">
            Content:
          </b-col>
          <b-col cols="10">
            <b-form-textarea
              v-model="content"
              :rows="8"
              placeholder="Enter a text describing this timeslot"
            />
          </b-col>
        </b-row>
        <br>
        <b-row>
          <b-col cols="2">
            Host:
          </b-col>
          <b-col cols="10">
            <b-form-select
              v-model="host_selected"
              :options="hosts"
              class="mb-3"
            />
          </b-col>
        </b-row>
      </b-container>
    </b-modal>
  </div>
</template>

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

const SUBMIT_NEW = false
const SUBMIT_UPDATE = true

export default {
  mixins: [ prettyDate, slugify ],

  data () {
    return {
      note: {},
      scheduleID: 0,
      timeslotID: 0,
      title: '',
      summary: '',
      content: '',
      backuptitle: '',
      backupsummary: '',
      backupcontent: '',
      backuphost: null,
      host_selected: null
    }
  },

  computed: {
    slug () { return this.slugify(this.title) },
    hosts () {
      // for the vue bootstrap select component we need an array of objects
      // with a value, a text and optionally a disabled element
      let hosts = []
      if (! this.$store.state.shows.loaded.hosts) { return hosts }
      for (let id of this.selectedShow.hosts) {
        let host = this.allHosts.find(h => h.id === id)
        hosts.push({
          value: host.id,
          text: host.name,
          disabled: !host.is_active
        })
      }
      return hosts
    },

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

  methods: {
    submit (event, updatemode) {
      // prevent the modal from closing automatically on click
      event.preventDefault()
      // backup the note contents
      this.backuptitle = this.note.title
      this.backupsummary = this.note.summary
      this.backupcontent = this.note.content
      this.backuphost = this.note.host
      // now set the new contents
      this.note.title = this.title
      this.note.summary = this.summary
      this.note.content = this.content
      this.note.host = this.host_selected
      // for new notes we need to set some extras that are not in the UI yet
      if (updatemode === SUBMIT_NEW) {
        this.note.show = this.selectedShow.id
        this.note.timeslot = this.timeslotID
        this.note.slug = this.slug
        this.note.ppoi = '(0.5,0.5)' // TODO: implement
        this.note.height = null // TODO: implement
        this.note.width = null // TODO: implement
        this.note.image = null // TODO: implement
        this.note.status = 1 // TODO: implement
        this.note.start = '' // TODO: implement
        this.note.cba_id = null // TODO: implement
        this.note.audio_url = '' // TODO: implement
      }
      let modal = this.$refs.modalNote
      this.$store.dispatch('shows/submitNote', {
        update: updatemode,
        id: this.selectedShow.id,
        scheduleID: this.scheduleID,
        timeslotID: this.timeslotID,
        note: this.note,
        callback: () => { modal.hide() },
        callbackCancel: () => {
          // as there was an error saving the show, we have to make sure
          // to restore the initial values of the note object
          this.note.title = this.backuptitle
          this.note.summary = this.backupsummary
          this.note.content = this.backupcontent
          this.note.host = this.backuphost
          if (updatemode === SUBMIT_NEW) { this.note.start = undefined }
          // and we leave the modal open, so no call to its .hide function here
        }
      })
    },

    update (event) {
      // only try to save if anything has changed
      if (this.title !== this.note.title || this.summary !== this.note.summary || this.content !== this.note.content || this.host_selected !== this.note.host) {
        this.submit(event, SUBMIT_UPDATE)
      }
      // if nothing was changed, just close the modal
      else {
        this.$refs.modalNote.hide()
      }
    },

    new (event) {
      // title and content are necessary
      if (this.title.trim() === '' || this.content.trim() === '' || this.host_selected === null) {
        event.preventDefault()
        // TODO: make this nicer UI-wise (red text annotations next to input fields instead of simple alert)
        alert('Please provide at least a title and some content and choose a host!')
      } else {
        this.submit(event, SUBMIT_NEW)
      }
    },

    saveNote (event) {
      if (this.note.start === undefined) { this.new(event) }
      else { this.update(event) }
    },

    openModal (note, timeslotID, scheduleID) {
      if (note === null) {
        this.note = {}
        this.title = ''
        this.summary = ''
        this.content = ''
        // TODO: integrate this into the user's app settings:
        //   should the field be empty by default or filled with the first host of the show?
        this.host_selected = null
      } else {
        this.note = {...note}
        this.title = this.note.title
        this.summary = this.note.summary
        this.content = this.note.content
        this.host_selected = this.note.host
      }
      this.timeslotID = timeslotID
      this.scheduleID = scheduleID
      this.$refs.modalNote.show()
    }
  }
}
</script>

<style scoped>
.slug {
  color: gray;
}
</style>