ShowManagerModalNotes.vue 6.64 KB
Newer Older
1
<template>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <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-form-input></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-form-textarea></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-form-textarea></b-col>
        </b-row>
      </b-container>
    </b-modal>
  </div>
24
25
26
27
</template>

<script>
import prettyDate from '../mixins/prettyDate'
28
29
30
31
32
33
34
35
import axios from 'axios'

function debugErrorResponse (data) {
  console.log('Response data provided to transformResponse:')
  console.log(data)
  // alert(data)
  return data
}
36
37
38

export default {
  props: {
39
    show: { type: Object, required: true }
40
41
42
  },
  data () {
    return {
43
44
45
46
47
48
49
50
51
      note: {},
      scheduleID: 0,
      timeslotID: 0,
      title: '',
      summary: '',
      content: '',
      backuptitle: '',
      backupsummary: '',
      backupcontent: ''
52
53
    }
  },
54
  mixins: [ prettyDate ],
55
  methods: {
56
57
58
59
60
61
62
63
64
65
66
67
68
69
    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) {
        // 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
        // now set the new contents
        this.note.title = this.title
        this.note.summary = this.summary
        this.note.content = this.content
        // generate the uri for the API call:
70
        //   /api/v1/shows/1/schedules/1/timeslots/1/note/1/
71
72
73
74
75
76
77
78
79
80
        var uri = process.env.API_STEERING_SHOWS + this.show.id +
        '/schedules/' + this.scheduleID +
        '/timeslots/' + this.timeslotID +
        '/note/' + this.note.id + '/'
        console.log('trying to update a note')
        console.log(uri)
        console.log(this.note)
        // now send the PUT request with our updated note
        axios.put(uri, this.note, {
          withCredentials: true,
81
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token },
82
83
84
85
86
87
88
89
90
          transformResponse: [debugErrorResponse]
        }).then(response => {
          console.log('Response:')
          console.log(response)
          // everything was fine, we can close the modal now
          this.$refs.modalNote.hide()
        }).catch(error => {
          console.log('Error:')
          console.log(error)
91
          alert('There was an error while trying to update the note: ' + error)
92
93
94
95
96
97
98
99
100
101
102
103
104
          // 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 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()
      }
    },
    new () {
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
      // only try to save if any data was filled in
      if (this.title !== '' && this.summary !== '' && this.content !== '') {
        // prevent the modal from closing automatically on click
        event.preventDefault()
        // prepare the new note
        this.note = {
          show: this.show.id,
          timeslot: this.timeslotID,
          host: null, // TODO: implement
          title: this.title,
          slug: '', // TODO: implement
          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
        }
        // generate the uri for the API call:
        //   /api/v1/shows/1/schedules/1/timeslots/1/note
        var uri = process.env.API_STEERING_SHOWS + this.show.id +
        '/schedules/' + this.scheduleID +
        '/timeslots/' + this.timeslotID +
        '/note/'
        console.log('trying to create a new note')
        console.log(uri)
        console.log(this.note)
        // now send the POST request with our updated note
        axios.post(uri, this.note, {
          withCredentials: true,
139
          headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token },
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
          transformResponse: [debugErrorResponse]
        }).then(response => {
          console.log('Response:')
          console.log(response)
          // everything was fine, we can close the modal now
          this.$refs.modalNote.hide()
        }).catch(error => {
          console.log('Error:')
          console.log(error)
          alert('There was an error while trying to posting the new note: ' + error)
          // 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 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()
      }
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
    },
    saveNote (event) {
      if (typeof this.note.start === 'undefined') {
        this.new()
      } else {
        this.update(event)
      }
    },
    showModal (note, timeslotID, scheduleID) {
      if (note === null) {
        this.note = {}
        this.title = ''
        this.summary = ''
        this.content = ''
      } else {
        this.note = note
        this.title = this.note.title
        this.summary = this.note.summary
        this.content = this.note.content
      }
      // console.log(this.$refs.modalNote)
      this.timeslotID = timeslotID
      this.scheduleID = scheduleID
      this.$refs.modalNote.show()
185
186
187
188
189
190
    }
  }
}
</script>

<style scoped>
191

192
</style>