Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
AURA
dashboard
Commits
54680e37
Commit
54680e37
authored
Aug 05, 2019
by
jackie / Andrea Ida Malkah Klaura
Browse files
FEAT: add modal for creating new shows
parent
6156828f
Changes
3
Hide whitespace changes
Inline
Side-by-side
src/components/ShowManager.vue
View file @
54680e37
...
...
@@ -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>
<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
...
...
src/components/ShowManagerModalSuperuser.vue
0 → 100644
View file @
54680e37
<
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
>
src/mixins/slugify.js
0 → 100644
View file @
54680e37
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
},
}
}
Andrea Ida Malkah Klaura
@jackie
mentioned in issue
#2 (closed)
·
Aug 06, 2019
mentioned in issue
#2 (closed)
mentioned in issue #2
Toggle commit list
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment