ShowJumbotron.vue 5.92 KB
Newer Older
1
2
3
4
5
6
7
8
9
<template>
  <b-jumbotron>
    <!-- The show title goes into the jumbotron header -->
    <template slot="header">
      <span v-if="loaded.shows">
        {{ selectedShow.name }}
        <img
          src="../assets/16x16/emblem-system.png"
          alt="edit name of show"
10
          @click="openModalName()"
11
12
13
14
15
16
17
18
19
20
        >
      </span>
      <span v-else>Shows are being loaded</span>
    </template>
    <!-- The short description of the show goes into the jumbotron lead -->
    <template slot="lead">
      <span v-if="loaded.shows">{{ selectedShow.short_description }}</span>
      <img
        src="../assets/16x16/emblem-system.png"
        alt="edit short description"
21
        @click="openModalShortDescription()"
22
23
24
25
26
27
28
      >
    </template>
    <!-- The rest of the jumbotron is filled with the show description -->
    <div v-if="loaded.shows">
      <b>Description:</b> <img
        src="../assets/16x16/emblem-system.png"
        alt="edit description"
29
        @click="openModalDescription()"
30
31
32
33
34
35
36
37
38
39
40
41
42
      >
      <div>
        <!--
        we are disabling the linter warning for the next line, because, while it
        generally is not advisible to use v-html, in this case we took thorough
        steps to sanitize the date before inserting it into the DOM
        -->
        <!-- eslint-disable-next-line vue/no-v-html -->
        <p v-html="sanitizedShowDescription" />
        <!-- TODO: add image and logo here? -->
      </div>

      <div
43
        v-if="isSuperuser"
44
45
46
47
48
49
        align="center"
      >
        <div v-if="selectedShow.is_active">
          <b-button
            variant="danger"
            size="sm"
50
            @click="openModalDeactivate()"
51
52
53
54
55
56
57
58
59
60
61
62
63
          >
            Deactivate show
          </b-button>
        </div>
        <div v-else>
          <b-alert
            variant="danger"
            show
          >
            This show is currently not active!<br><br>
            <b-button
              variant="success"
              size="sm"
64
              @click="activateShow()"
65
66
67
68
69
70
            >
              Activate!
            </b-button>
          </b-alert>
        </div>
      </div>
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

      <b-modal
        ref="modalName"
        title="Name of the show"
        size="lg"
        @ok="saveName"
      >
        <b-form-input
          v-model="string"
          type="text"
          placeholder="Enter name of the show"
        />
      </b-modal>

      <b-modal
        ref="modalShortDescription"
        title="Short description"
        size="lg"
        @ok="saveShortDescription"
      >
        <b-form-textarea
          v-model="string"
          :rows="2"
          placeholder="Enter a short description"
        />
      </b-modal>

      <b-modal
        ref="modalDescription"
        title="Full description"
        size="lg"
        @ok="saveDescription"
      >
        <b-form-textarea
          v-model="string"
          :rows="2"
          placeholder="Enter the full description of this show"
        />
      </b-modal>

      <!-- Modal to confirm and deactivate a show -->
      <b-modal
        ref="modalDeactivate"
        title="Deactivate a show"
        size="lg"
        @ok="deactivateShow"
      >
        <b-alert
          variant="danger"
          show
        >
          You are about to deactivate the show <b>{{ selectedShow.name }}</b>!
        </b-alert>
        <div align="center">
          Are you sure you want to continue?
        </div>
      </b-modal>
128
129
130
131
132
133
134
135
136
137
138
    </div>
  </b-jumbotron>
</template>

<script>
import DOMPurify from 'dompurify'
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
139
      string: '',
140
141
142
143
    }
  },
  computed: {
    shows () { return this.$store.state.shows.shows },
144
    isSuperuser () { return this.$store.state.auth.user.steeringUser.is_superuser },
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
    loaded () {
      return {
        shows: this.$store.state.shows.loaded.shows,
      }
    },

    // As the show description should allow to be html-formatted, we have to
    // make sure no malicous code can be inserted into the DOM. For that the
    // DOMPurify library (https://github.com/cure53/DOMPurify) does us a much
    // better service than trying to sanitize it with some RegExp.
    sanitizedShowDescription: function () {
      return DOMPurify.sanitize(this.selectedShow.description)
    },

    ...mapGetters({
      selectedShow: 'shows/selectedShow',
    })
  },
  methods: {
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
    openModalName () {
      if (this.selectedShow.name !== null) { this.string = this.selectedShow.name }
      else { this.string = '' }
      this.$refs.modalName.show()
    },
    openModalShortDescription () {
      if (this.selectedShow.short_description !== null) { this.string = this.selectedShow.short_description }
      else { this.string = '' }
      this.$refs.modalShortDescription.show()
    },
    openModalDescription () {
      if (this.selectedShow.description !== null) { this.string = this.selectedShow.description }
      else { this.string = '' }
      this.$refs.modalDescription.show()
    },
    openModalDeactivate () {
      this.$refs.modalDeactivate.show()
    },

183
    saveProperty (property, value, modal, event) {
184
      if (value !== this.selectedShow[property]) {
185
        event.preventDefault()
186
        this.$store.dispatch('shows/updateProperty', {
187
          id: this.selectedShow.id,
188
189
190
191
192
          property: property,
          value: value,
          callback: () => {
            if (modal) { modal.hide() }
          }
193
194
195
196
        })
      }
    },

197
    saveName (event) {
198
      this.saveProperty('name', this.string, this.$refs.modalName, event)
199
200
    },

201
    saveShortDescription (event) {
202
      this.saveProperty('short_description', this.string, this.$refs.modalShortDescription, event)
203
204
205
    },

    saveDescription (event) {
206
      this.saveProperty('description', this.string, this.$refs.modalDescription, event)
207
208
209
    },

    deactivateShow (event) {
210
      this.saveProperty('is_active', false, this.$refs.modalDeactivate, event)
211
212
    },

213
214
    activateShow () {
      this.saveProperty('is_active', true, null, event)
215
    },
216
217
218
219

  }
}
</script>