ShowManagerModalNotes.vue 4.2 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
    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:
        //   /api/v1/shows/1/schedules/1/timeslots/1/note/1
        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,
          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)
          // 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 () {
      console.log('trying to create a new note')
    },
    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()
128
129
130
131
132
133
    }
  }
}
</script>

<style scoped>
134

135
</style>