Commit cc5f69b8 authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

Merge branch 'feature-showmanager-superuser' into develop

parents 6156828f b1e00e78
......@@ -7,6 +7,14 @@
<h3>Sendungen verwalten</h3>
</b-col>
<b-col align="right">
<b-button
v-if="$parent.user.steeringUser.is_superuser"
v-b-popover.hover.top="'Add a new show'"
@click="$refs.appModalSuperuser.showModalAddShow()"
>
+
</b-button>
&nbsp;
<b-dropdown
id="ddshows"
text="Sendereihe auswählen"
......@@ -55,7 +63,7 @@
alt="edit description"
@click="$refs.appModalShow.showDescription()"
>
<div v-if="loaded.shows">
<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
......@@ -66,6 +74,16 @@
<!-- TODO: add image and logo here? -->
</div>
</div>
<div align="center">
<b-button
v-if="$parent.user.steeringUser.is_superuser"
variant="danger"
@click="$refs.appModalSuperuser.showModalDeleteShow(shows[currentShow].id, shows[currentShow].name)"
>
Delete show
</b-button>
</div>
</b-jumbotron>
<!-- If the shows are not fully loaded yet, we just put the loading sign -->
......@@ -92,6 +110,9 @@
:show="shows[currentShow]"
:show-aggregate="current"
/>
<app-modalSuperuser
ref="appModalSuperuser"
/>
<!-- here are the filter settings for our timeslots table -->
<b-card>
......@@ -609,6 +630,7 @@
<script>
import modalNotes from './ShowManagerModalNotes.vue'
import modalShow from './ShowManagerModalShow.vue'
import modalSuperuser from './ShowManagerModalSuperuser.vue'
import timeslotSort from '../mixins/timeslotSort'
import prettyDate from '../mixins/prettyDate'
import axios from 'axios'
......@@ -619,7 +641,8 @@ export default {
// components, to make it a tiny lickle bit less messy here
components: {
'app-modalNotes': modalNotes,
'app-modalShow': modalShow
'app-modalShow': modalShow,
'app-modalSuperuser': modalSuperuser,
},
// generic functions that we want to use from our mixins folder
......@@ -737,26 +760,9 @@ export default {
// Right after this component is set up, we want to fetch all available shows
// from the AuRa steering module.
created () {
var uri = process.env.VUE_APP_API_STEERING_SHOWS
if (!this.$parent.user.steeringUser.is_superuser) {
uri += '?owner=' + this.$parent.user.steeringUser.id
}
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
}).then(response => {
if (response.data.length === 0) {
alert('There are now shows associated with your account!')
return
}
this.shows = response.data
this.currentShowID = this.shows[0].id
this.currentShow = 0
this.loaded.shows = true
this.switchShow(this.currentShow)
}).catch(error => {
alert('There was an error fetching shows from the server: ' + error)
})
// As we don't know any shows yet, we use null as id parameter, so the
// first show in the returned show array will be displayed
this.loadAndSwitch(null)
},
// Now for our hotchpotch of methods, mostly used for fetching data from the
......@@ -827,6 +833,46 @@ export default {
this.getTimeslots(this.dateStart, this.dateEnd, this.numSlots)
},
// (Re)Load all shows from server and switch to a show with a specific ID.
// If the id argument is null, the first show in the show array will be used
loadAndSwitch: function (id) {
this.loaded.shows = false
var uri = process.env.VUE_APP_API_STEERING_SHOWS
// normal users should only see their own shows, only superusers see all shows
if (!this.$parent.user.steeringUser.is_superuser) {
uri += '?owner=' + this.$parent.user.steeringUser.id
}
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
}).then(response => {
// if now shows are found, we'll just print a short info message and leave
if (response.data.length === 0) {
this.$log.info('The returned show set has 0 length:')
this.$log.info(response)
alert('Info: There are no shows connected to your account. See console for details.')
this.loaded.shows = true
return
}
// now set the new show array and find the index of the show ID
this.shows = response.data
let index = 0
if (id !== null) {
index = this.shows.findIndex(show => show.id === id)
// if no show with the given ID was found, we use the first item in the show array
if (index === -1) { index = 0 }
}
this.currentShow = index
this.currentShowID = this.shows[index].id
this.loaded.shows = true
this.switchShow(this.currentShow)
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not fetch show data. See console for details.')
})
},
// Fetch timeslots for the current show and use filter variables if provided
getTimeslots: function (start, end, limit, offset) {
var dateRegex = new RegExp('^\\d{4}-\\d{2}-\\d{2}$')
......
......@@ -75,6 +75,7 @@
<script>
import prettyDate from '../mixins/prettyDate'
import slugify from '../mixins/slugify'
import axios from 'axios'
/*
......@@ -87,7 +88,7 @@ function debugErrorResponse (data) {
*/
export default {
mixins: [ prettyDate ],
mixins: [ prettyDate, slugify ],
props: {
show: { type: Object, required: true },
showAggregate: { type: Object, required: true }
......@@ -109,12 +110,7 @@ export default {
},
computed: {
slug: function () {
return this.title.toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/[^\w-]+/g, '') // Remove all non-word chars
.replace(/--+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, '') // Trim - from end of text
return this.slugify(this.title)
},
hosts: function () {
// for the vue bootstrap select component we need an array of objects
......
<template>
<div>
<!-- Modal for adding new shows -->
<b-modal
ref="modalAddShow"
title="Create a new show"
size="lg"
@ok="addShow"
>
<b-container fluid>
<b-row>
<b-col cols="3">
Name of the show:
</b-col>
<b-col cols="9">
<b-form-input
v-model="newShow.name"
type="text"
placeholder="Enter a title for this new show"
/>
</b-col>
<b-col cols="3" />
<b-col cols="9">
<small class="slug">Slug: {{ temporarySlug }}</small>
</b-col>
</b-row>
<br>
<b-row>
<b-col cols="3">
Short description:
</b-col>
<b-col cols="9">
<b-form-input
v-model="newShow.short_description"
type="text"
placeholder="Enter a short description for this show"
/>
</b-col>
</b-row>
<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>
<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>
</b-container>
</b-modal>
<!-- Modal to confirm and delete a show -->
<b-modal
ref="modalDeleteShow"
title="Delete a show"
size="lg"
@ok="deleteShow"
>
<b-alert
variant="danger"
show
>
You are about to delete the show <b>{{ deletedShow.name }}</b>!
</b-alert>
<div align="center">
Are you sure you want to continue?
</div>
</b-modal>
</div>
</template>
<script>
import axios from 'axios'
import slugify from '../mixins/slugify.js'
export default {
mixins: [ slugify ],
data () {
return {
newShow: {
name: "",
slug: "",
short_description: "",
type: 0,
fundingcategory: 0,
category: [],
hosts: [],
owners: [],
language: [],
topic: [],
musicfocus: [],
},
deletedShow: {
id: null,
name: '',
},
loaded: {
types: false,
fundingcategories: false,
},
types: [],
fundingcategories: [],
}
},
computed: {
temporarySlug: function () {
return this.slugify(this.newShow.name)
},
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
},
},
methods: {
// 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
addShow (event) {
// prevent the modal from closing automatically on click
event.preventDefault()
// 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.')
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
}
// as the slug is a computed property we have to assign it to the new show's slug property
this.newShow.slug = this.temporarySlug
// ready to go, let's POST this new show
let uri = process.env.VUE_APP_API_STEERING_SHOWS
axios.post(uri, this.newShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
// everything was fine, we can close the modal now
this.$refs.modalAddShow.hide()
this.$parent.loadAndSwitch(response.data.id)
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not add new show. See console for details.')
// and we leave the modal open, so no call to its .hide function here
})
},
// delete a show by sending a DELETE to the steering API
deleteShow (event) {
// prevent the modal from closing automatically on click
event.preventDefault()
let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.deletedShow.id
axios.delete(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.$refs.modalDeleteShow.hide()
this.$parent.loadAndSwitch(null)
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not delete show. See console for details.')
// and we leave the modal open, so no call to its .hide function here
})
},
// clear and fetch modal data and open the modal to add new shows
showModalAddShow () {
this.newShow.name = ''
this.newShow.slug = ''
this.newShow.short_description = ''
this.loadTypes()
this.loadFundingCategories()
this.$refs.modalAddShow.show()
},
// open the deletion confirmation modal
showModalDeleteShow (id, name) {
this.deletedShow.id = id
this.deletedShow.name = name
this.$refs.modalDeleteShow.show()
},
// fetch all available (that is: active) show type from steering
loadTypes () {
this.loaded.types = false
axios.get(process.env.VUE_APP_API_STEERING + 'types/?active=true', {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.types = response.data
this.loaded.types = true
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not load available show types. See console for details.')
})
},
// fetch all available (that is: active) funding categories from steering
loadFundingCategories () {
this.loaded.fundingcategories = false
axios.get(process.env.VUE_APP_API_STEERING + 'fundingcategories/?active=true', {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(response => {
this.fundingcategories = response.data
this.loaded.fundingcategories = true
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not load available funding categories. See console for details.')
})
},
}
}
</script>
<style scoped>
.slug {
color: gray;
}
</style>
export default {
methods: {
slugify: function (title) {
return title.toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/[^\w-]+/g, '') // Remove all non-word chars
.replace(/--+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, '') // Trim - from end of text
},
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment