NotesModal.vue 7.76 KB
Newer Older
1
<template>
2
  <div>
3
4
5
6
7
8
    <b-modal
      ref="modalNote"
      title="Editing a note"
      size="lg"
      @ok="saveNote"
    >
9
      <b-container fluid>
10
11
12
13
14
15
        <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>
16
        <b-row>
17
18
19
20
21
22
23
24
25
26
27
28
29
30
          <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>
31
        </b-row>
32
        <br>
33
        <b-row>
34
35
36
37
38
39
40
41
42
43
          <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>
44
        </b-row>
45
        <br>
46
        <b-row>
47
48
49
50
51
52
53
54
55
56
          <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>
57
        </b-row>
58
        <br>
59
        <b-row>
60
61
62
63
64
65
66
67
68
69
          <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>
70
        </b-row>
71
72
73
      </b-container>
    </b-modal>
  </div>
74
75
76
</template>

<script>
77
78
79
import { mapGetters } from 'vuex'
import prettyDate from '../../mixins/prettyDate'
import slugify from '../../mixins/slugify'
80
81
import axios from 'axios'

82
export default {
83
  mixins: [ prettyDate, slugify ],
84

85
86
  data () {
    return {
87
88
89
90
91
92
93
94
      note: {},
      scheduleID: 0,
      timeslotID: 0,
      title: '',
      summary: '',
      content: '',
      backuptitle: '',
      backupsummary: '',
95
96
97
98
99
      backupcontent: '',
      backuphost: null,
      host_selected: null
    }
  },
100

101
  computed: {
102
103
    slug () { return this.slugify(this.title) },
    hosts () {
104
105
      // for the vue bootstrap select component we need an array of objects
      // with a value, a text and optionally a disabled element
106
107
108
      let hosts = []
      for (let id of this.selectedShow.hosts) {
        let host = this.allHosts.find(h => h.id === id)
109
        hosts.push({
110
111
112
          value: host.id,
          text: host.name,
          disabled: !host.is_active
113
114
115
        })
      }
      return hosts
116
117
118
119
120
121
    },

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

124
  methods: {
125
126
    update (event) {
      // only try to save if anything has changed
127
      if (this.title !== this.note.title || this.summary !== this.note.summary || this.content !== this.note.content || this.host_selected !== this.note.host) {
128
129
130
131
132
133
        // 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
134
        this.backuphost = this.note.host
135
136
137
138
        // now set the new contents
        this.note.title = this.title
        this.note.summary = this.summary
        this.note.content = this.content
139
        this.note.host = this.host_selected
140
        // generate the uri for the API call:
141
        //   /api/v1/shows/1/schedules/1/timeslots/1/note/1/
142
        var uri = process.env.VUE_APP_API_STEERING_SHOWS + this.selectedShow.id +
143
144
145
146
147
148
        '/schedules/' + this.scheduleID +
        '/timeslots/' + this.timeslotID +
        '/note/' + this.note.id + '/'
        // now send the PUT request with our updated note
        axios.put(uri, this.note, {
          withCredentials: true,
149
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
150
        }).then(() => {
151
152
153
          // everything was fine, we can close the modal now
          this.$refs.modalNote.hide()
        }).catch(error => {
154
155
156
          this.$log.error(error.response.status + ' ' + error.response.statusText)
          this.$log.error(error.response)
          alert('Error: could not update the note. See console for details.')
157
158
159
160
161
          // 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
162
          this.note.host = this.backuphost
163
164
165
166
167
168
169
          // and we leave the modal open, so no call to its .hide function here
        })
      // if nothing was changed, just close the modal
      } else {
        this.$refs.modalNote.hide()
      }
    },
170

171
172
173
174
175
176
177
    new (event) {
      // title and content are necessary
      if (this.title.trim() === '' || this.content.trim() === '') {
        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.')
      } else {
178
179
180
181
        // prevent the modal from closing automatically on click
        event.preventDefault()
        // prepare the new note
        this.note = {
182
          show: this.selectedShow.id,
183
          timeslot: this.timeslotID,
184
          host: this.host_selected,
185
          title: this.title,
186
          slug: this.slug,
187
188
189
190
191
192
193
194
195
196
197
          summary: this.summary,
          content: this.content,
          ppoi: '(0.5,0.5)', // TODO: implement
          height: null, // TODO: implement
          width: null, // TODO: implement
          image: null, // TODO: implement
          status: 1, // TODO: implement
          start: '', // TODO: implement
          cba_id: null, // TODO: implement
          audio_url: '' // TODO: implement
        }
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
        let modal = this.$refs.modalNote
        this.$store.dispatch('shows/submitNote', {
          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
            // and we have to set this back to undefined so next time we edit it
            // it will still be treated as a new note and not an existing one to update
            this.note.start = undefined
            // and we leave the modal open, so no call to its .hide function here
215
          }
216
217
        })
      }
218
    },
219

220
221
    saveNote (event) {
      if (typeof this.note.start === 'undefined') {
222
        this.new(event)
223
224
225
226
      } else {
        this.update(event)
      }
    },
227
228

    openModal (note, timeslotID, scheduleID) {
229
230
231
232
233
      if (note === null) {
        this.note = {}
        this.title = ''
        this.summary = ''
        this.content = ''
234
235
        // 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?
236
        this.host_selected = null
237
238
239
240
241
      } else {
        this.note = note
        this.title = this.note.title
        this.summary = this.note.summary
        this.content = this.note.content
242
        this.host_selected = this.note.host
243
244
245
246
      }
      this.timeslotID = timeslotID
      this.scheduleID = scheduleID
      this.$refs.modalNote.show()
247
248
249
250
251
252
    }
  }
}
</script>

<style scoped>
253
254
255
.slug {
  color: gray;
}
256
</style>