AddShowModal.vue 5.43 KB
Newer Older
1
2
<template>
  <div>
3
    <!-- Modal for adding new shows -->
4
5
6
7
8
9
10
11
    <b-modal
      ref="modalAddShow"
      title="Create a new show"
      size="lg"
      @ok="addShow"
    >
      <b-container fluid>
        <b-row>
12
          <b-col cols="3">
13
14
            Name of the show:
          </b-col>
15
          <b-col cols="9">
16
17
18
19
20
21
            <b-form-input
              v-model="newShow.name"
              type="text"
              placeholder="Enter a title for this new show"
            />
          </b-col>
22
23
          <b-col cols="3" />
          <b-col cols="9">
24
25
26
27
            <small class="slug">Slug: {{ temporarySlug }}</small>
          </b-col>
        </b-row>
        <br>
28

29
        <b-row>
30
          <b-col cols="3">
31
32
            Short description:
          </b-col>
33
          <b-col cols="9">
34
35
36
37
38
39
40
            <b-form-input
              v-model="newShow.short_description"
              type="text"
              placeholder="Enter a short description for this show"
            />
          </b-col>
        </b-row>
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
        <br>

        <b-row>
          <b-col cols="3">
            Show type:
          </b-col>
          <b-col cols="9">
            <div v-if="!loaded.types">
              <img
                src="../assets/radio.gif"
                alt="loading data"
              >
            </div>
            <div v-else>
              <b-form-select
                v-model="newShow.type"
                :options="showTypeSelector"
              />
            </div>
          </b-col>
        </b-row>
62

63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
        <b-row>
          <b-col cols="3">
            Funding category:
          </b-col>
          <b-col cols="9">
            <div v-if="!loaded.fundingcategories">
              <img
                src="../assets/radio.gif"
                alt="loading data"
              >
            </div>
            <div v-else>
              <b-form-select
                v-model="newShow.fundingcategory"
                :options="showFundingCategorySelector"
              />
            </div>
          </b-col>
        </b-row>
82
83
84
85
86
87
88
      </b-container>
    </b-modal>
  </div>
</template>

<script>
import slugify from '../mixins/slugify.js'
89
import { mapGetters } from 'vuex'
90
91

export default {
92
  mixins: [ slugify ],
93
94
95
96
97
98
  data () {
    return {
      newShow: {
        name: "",
        slug: "",
        short_description: "",
99
100
        type: 0,
        fundingcategory: 0,
101
102
103
104
105
        category: [],
        hosts: [],
        owners: [],
        language: [],
        topic: [],
106
107
        musicfocus: [],
      },
108
109
    }
  },
110

111
  computed: {
112
113
    loaded () { return this.$store.state.shows.loaded },

114
    temporarySlug: function () {
115
      return this.slugify(this.newShow.name)
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
    },

    showTypeSelector: function () {
      let options = []
      for (let i in this.types) {
        options.push({
          value: this.types[i].id,
          text: this.types[i].type
        })
      }
      return options
    },

    showFundingCategorySelector: function () {
      let options = []
      for (let i in this.fundingcategories) {
        options.push({
          value: this.fundingcategories[i].id,
          text: this.fundingcategories[i].abbrev + ' (' + this.fundingcategories[i].fundingcategory + ')'
        })
      }
      return options
    },
139
140
141
142
143
144

    ...mapGetters({
      types: 'shows/types',
      fundingcategories: 'shows/fundingcategories',
      users: 'auth/users',
    })
145
  },
146

147
  methods: {
148
149
150
151
152
    // create a new show and POST it to the steering API
    // new shows have to at least contain a name, a slug and a short-description.
    // also a valide show type and funding category have to be choosen.
    // for all other categories we can use an empty array and let the user fill
    // it out through the existing show manager modals, after the show is created
153
154
155
    addShow (event) {
      // prevent the modal from closing automatically on click
      event.preventDefault()
156

157
158
159
160
      // only try to add a new show if name and short description are filled out
      if (this.newShow.name.trim() === '' || this.newShow.short_description.trim() === '' ) {
        // 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 a short description for this show.')
161
162
163
164
165
166
167
168
169
170
171
172
        return
      }
      // also the type and funding category have to be set
      if (this.types.findIndex(type => type.id === this.newShow.type) === -1) {
        // TODO: make this nicer UI-wise (red text annotations next to input fields instead of simple alert)
        alert('Please choose a type for this show.')
        return
      }
      if (this.fundingcategories.findIndex(cat => cat.id === this.newShow.fundingcategory) === -1) {
        // TODO: make this nicer UI-wise (red text annotations next to input fields instead of simple alert)
        alert('Please choose a funding category for this show.')
        return
173
      }
174
175
176
177

      // as the slug is a computed property we have to assign it to the new show's slug property
      this.newShow.slug = this.temporarySlug

178
179
180
181
182
183
      let modal = this.$refs.modalAddShow
      this.$store.dispatch('shows/submitShow', {
        show: this.newShow,
        callback: () => {
          modal.hide()
        }
184
      })
185
    },
186

187
    // clear and fetch modal data and open the modal to add new shows
188
    openModal () {
189
190
191
192
      this.newShow.name = ''
      this.newShow.slug = ''
      this.newShow.short_description = ''
      this.$refs.modalAddShow.show()
193
    },
194
195
196
197
198
199
200
201
202
  }
}
</script>

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