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

FEAT: add modal for creating new shows

parent 6156828f
......@@ -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"
......@@ -92,6 +100,9 @@
:show="shows[currentShow]"
:show-aggregate="current"
/>
<app-modalSuperuser
ref="appModalSuperuser"
/>
<!-- here are the filter settings for our timeslots table -->
<b-card>
......@@ -609,6 +620,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 +631,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
......
<template>
<div>
<b-modal
ref="modalAddShow"
title="Create a new show"
size="lg"
@ok="addShow"
>
<b-container fluid>
<b-row>
<b-col cols="2">
Name of the show:
</b-col>
<b-col cols="10">
<b-form-input
v-model="newShow.name"
type="text"
placeholder="Enter a title for this new show"
/>
</b-col>
<b-col cols="2" />
<b-col cols="10">
<small class="slug">Slug: {{ temporarySlug }}</small>
</b-col>
</b-row>
<br>
<b-row>
<b-col cols="2">
Short description:
</b-col>
<b-col cols="10">
<b-form-input
v-model="newShow.short_description"
type="text"
placeholder="Enter a short description for this show"
/>
</b-col>
</b-row>
</b-container>
</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: 1,
fundingcategory: 1,
category: [],
hosts: [],
owners: [],
language: [],
topic: [],
musicfocus: []
}
}
},
computed: {
temporarySlug: function () {
return this.slug(this.newShow.name)
}
},
methods: {
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.')
} else {
// as the slug is a computed property we to assign it to the new show's slug variable
this.newShow.slug = this.temporarySlug
var 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(() => {
// everything was fine, we can close the modal now
this.$refs.modalAddShow.hide()
// TODO:
// - add new show to the ShowManager show array
// - switch ShowManager to newly added show
}).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
})
}
},
showModalAddShow () {
this.newShow.name = ''
this.newShow.slug = ''
this.newShow.short_description = ''
// TODO:
// - load types & funding categories
this.$refs.modalAddShow.show()
}
}
}
</script>
<style scoped>
.slug {
color: gray;
}
</style>
export default {
methods: {
slug: 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
},
}
}
Markdown is supported
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