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
8ffbb488
Commit
8ffbb488
authored
Apr 30, 2020
by
jackie / Andrea Ida Malkah Klaura
Browse files
implement update functions for jumbotron items in store
parent
b67f97e2
Changes
4
Hide whitespace changes
Inline
Side-by-side
src/components/ShowJumbotron.vue
View file @
8ffbb488
...
...
@@ -7,7 +7,7 @@
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit name of show"
@
click=
"
$refs.appModalShow.show
Name()"
@
click=
"
openModal
Name()"
>
</span>
<span
v-else
>
Shows are being loaded
</span>
...
...
@@ -18,7 +18,7 @@
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit short description"
@
click=
"
$refs.appModalShow.show
ShortDescription()"
@
click=
"
openModal
ShortDescription()"
>
</
template
>
<!-- The rest of the jumbotron is filled with the show description -->
...
...
@@ -26,7 +26,7 @@
<b>
Description:
</b>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit description"
@
click=
"
$refs.appModalShow.show
Description()"
@
click=
"
openModal
Description()"
>
<div>
<!--
...
...
@@ -40,14 +40,14 @@
</div>
<div
v-if=
"
$parent.$parent.user.steeringUser.is_s
uperuser"
v-if=
"
isS
uperuser"
align=
"center"
>
<div
v-if=
"selectedShow.is_active"
>
<b-button
variant=
"danger"
size=
"sm"
@
click=
"
$refs.appModalSuperuser.showModalDeactivateShow(shows[currentShow]
)"
@
click=
"
openModalDeactivate(
)"
>
Deactivate show
</b-button>
...
...
@@ -61,13 +61,70 @@
<b-button
variant=
"success"
size=
"sm"
@
click=
"
$refs.appModalSuperuser.activateShow(shows[currentShow]
)"
@
click=
"
activateShow(
)"
>
Activate!
</b-button>
</b-alert>
</div>
</div>
<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>
</div>
</b-jumbotron>
</template>
...
...
@@ -79,10 +136,17 @@ import { mapGetters } from 'vuex'
export
default
{
data
()
{
return
{
string
:
''
,
backupstring
:
''
,
deactivatedShow
:
{
id
:
null
,
name
:
''
,
},
}
},
computed
:
{
shows
()
{
return
this
.
$store
.
state
.
shows
.
shows
},
isSuperuser
()
{
return
this
.
$store
.
state
.
auth
.
user
.
steeringUser
.
is_superuser
},
loaded
()
{
return
{
shows
:
this
.
$store
.
state
.
shows
.
loaded
.
shows
,
...
...
@@ -102,6 +166,110 @@ export default {
})
},
methods
:
{
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
()
},
saveName
(
event
)
{
let
modal
=
this
.
$refs
.
modalName
if
(
this
.
string
!==
this
.
selectedShow
.
name
)
{
event
.
preventDefault
()
this
.
$store
.
dispatch
(
'
shows/updateName
'
,
{
id
:
this
.
selectedShow
.
id
,
text
:
this
.
string
,
callback
:
()
=>
{
modal
.
hide
()
}
})
}
},
saveShortDescription
(
event
)
{
let
modal
=
this
.
$refs
.
modalShortDescription
if
(
this
.
string
!==
this
.
selectedShow
.
short_description
)
{
event
.
preventDefault
()
this
.
$store
.
dispatch
(
'
shows/updateShortDescription
'
,
{
id
:
this
.
selectedShow
.
id
,
text
:
this
.
string
,
callback
:
()
=>
{
modal
.
hide
()
}
})
}
},
saveDescription
(
event
)
{
let
modal
=
this
.
$refs
.
modalDescription
if
(
this
.
string
!==
this
.
selectedShow
.
description
)
{
event
.
preventDefault
()
this
.
$store
.
dispatch
(
'
shows/updateDescription
'
,
{
id
:
this
.
selectedShow
.
id
,
text
:
this
.
string
,
callback
:
()
=>
{
modal
.
hide
()
}
})
}
},
deactivateShow
(
event
)
{
let
modal
=
this
.
$refs
.
modalDeactivate
event
.
preventDefault
()
this
.
$store
.
dispatch
(
'
shows/deactivateShow
'
,
{
id
:
this
.
selectedShow
.
id
,
callback
:
()
=>
{
modal
.
hide
()
}
})
/*
let updatedShow = this.getUpdateShowObject()
updatedShow.is_active = false
let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.deactivatedShow.id + '/'
axios.put(uri, updatedShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.show.is_active = false
this.$refs.modalDeactivateShow.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not deactivate show. See console for details.')
// and we leave the modal open, so no call to its .hide function here
})
*/
},
activateShow
(
show
)
{
this
.
$log
.
debug
(
show
)
this
.
$store
.
dispatch
(
'
shows/activateShow
'
,
{
id
:
this
.
selectedShow
.
id
,
})
/*
this.show = show
let updatedShow = this.getUpdateShowObject()
updatedShow.is_active = true
let uri = process.env.VUE_APP_API_STEERING_SHOWS + show.id + '/'
axios.put(uri, updatedShow, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
}).then(() => {
this.show.is_active = true
this.$refs.modalDeactivateShow.hide()
}).catch(error => {
this.$log.error(error.response.status + ' ' + error.response.statusText)
this.$log.error(error.response)
alert('Error: could not activate show. See console for details.')
})
*/
},
}
}
...
...
src/components/ShowManagerModalShow.vue
View file @
8ffbb488
<
template
>
<div>
<b-modal
ref=
"modalShowName"
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=
"modalShowShortDescription"
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=
"modalShowDescription"
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>
<!-- TODO: use b-form outside the b-form-input, so that
simple input validation works automagically -->
<b-modal
...
...
@@ -510,64 +471,6 @@ export default {
properties that actually get changed
TODO: think about refactoring all those function to one or few functions
*/
saveName
(
event
)
{
if
(
this
.
string
!==
this
.
show
.
name
)
{
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
updatedShow
.
name
=
this
.
string
axios
.
put
(
process
.
env
.
VUE_APP_API_STEERING_SHOWS
+
this
.
show
.
id
+
'
/
'
,
updatedShow
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(()
=>
{
this
.
show
.
name
=
this
.
string
this
.
$refs
.
modalShowName
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not save the show name. See console for details.
'
)
})
}
},
saveShortDescription
(
event
)
{
if
(
this
.
string
!==
this
.
show
.
short_description
)
{
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
updatedShow
.
short_description
=
this
.
string
axios
.
put
(
process
.
env
.
VUE_APP_API_STEERING_SHOWS
+
this
.
show
.
id
+
'
/
'
,
updatedShow
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(()
=>
{
this
.
show
.
short_description
=
this
.
string
this
.
$refs
.
modalShowShortDescription
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not save the show
\'
s short description. See console for details.
'
)
})
}
},
saveDescription
(
event
)
{
if
(
this
.
string
!==
this
.
show
.
description
)
{
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
if
(
this
.
string
===
''
)
{
updatedShow
.
description
=
null
}
else
{
updatedShow
.
description
=
this
.
string
}
axios
.
put
(
process
.
env
.
VUE_APP_API_STEERING_SHOWS
+
this
.
show
.
id
+
'
/
'
,
updatedShow
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(()
=>
{
this
.
show
.
description
=
updatedShow
.
description
this
.
$refs
.
modalShowDescription
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not save the show description. See console for details.
'
)
})
}
},
saveEmail
(
event
)
{
if
(
this
.
string
!==
this
.
show
.
email
)
{
event
.
preventDefault
()
...
...
@@ -862,21 +765,6 @@ export default {
Functions to activate modals
They are called from the parent component
*/
showName
()
{
if
(
this
.
show
.
name
!==
null
)
{
this
.
string
=
this
.
show
.
name
}
else
{
this
.
string
=
''
}
this
.
$refs
.
modalShowName
.
show
()
},
showShortDescription
()
{
if
(
this
.
show
.
short_description
!==
null
)
{
this
.
string
=
this
.
show
.
short_description
}
else
{
this
.
string
=
''
}
this
.
$refs
.
modalShowShortDescription
.
show
()
},
showDescription
()
{
if
(
this
.
show
.
description
!==
null
)
{
this
.
string
=
this
.
show
.
description
}
else
{
this
.
string
=
''
}
this
.
$refs
.
modalShowDescription
.
show
()
},
showEmail
()
{
if
(
this
.
show
.
email
!==
null
)
{
this
.
string
=
this
.
show
.
email
}
else
{
this
.
string
=
''
}
...
...
src/components/ShowManagerModalSuperuser.vue
View file @
8ffbb488
...
...
@@ -82,24 +82,6 @@
</b-container>
</b-modal>
<!-- Modal to confirm and deactivate a show -->
<b-modal
ref=
"modalDeactivateShow"
title=
"Deactivate a show"
size=
"lg"
@
ok=
"deactivateShow"
>
<b-alert
variant=
"danger"
show
>
You are about to deactivate the show
<b>
{{
deactivatedShow
.
name
}}
</b>
!
</b-alert>
<div
align=
"center"
>
Are you sure you want to continue?
</div>
</b-modal>
<!-- Modal to edit show owners -->
<b-modal
ref=
"modalOwners"
...
...
@@ -218,10 +200,6 @@ export default {
topic
:
[],
musicfocus
:
[],
},
deactivatedShow
:
{
id
:
null
,
name
:
''
,
},
show
:
null
,
loaded
:
{
types
:
false
,
...
...
@@ -312,45 +290,6 @@ export default {
})
},
// deactivate a show by updating the is_active flag to false
deactivateShow
(
event
)
{
// prevent the modal from closing automatically on click
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
updatedShow
.
is_active
=
false
let
uri
=
process
.
env
.
VUE_APP_API_STEERING_SHOWS
+
this
.
deactivatedShow
.
id
+
'
/
'
axios
.
put
(
uri
,
updatedShow
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(()
=>
{
this
.
show
.
is_active
=
false
this
.
$refs
.
modalDeactivateShow
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not deactivate show. See console for details.
'
)
// and we leave the modal open, so no call to its .hide function here
})
},
activateShow
(
show
)
{
this
.
show
=
show
let
updatedShow
=
this
.
getUpdateShowObject
()
updatedShow
.
is_active
=
true
let
uri
=
process
.
env
.
VUE_APP_API_STEERING_SHOWS
+
show
.
id
+
'
/
'
axios
.
put
(
uri
,
updatedShow
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(()
=>
{
this
.
show
.
is_active
=
true
this
.
$refs
.
modalDeactivateShow
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not activate show. See console for details.
'
)
})
},
// remove an owner from the list of show owners
deleteOwner
(
id
)
{
// we only have to find the item in our array and splice it out
...
...
@@ -406,14 +345,6 @@ export default {
this
.
$refs
.
modalAddShow
.
show
()
},
// open the deactivation confirmation modal
showModalDeactivateShow
(
show
)
{
this
.
deactivatedShow
.
id
=
show
.
id
this
.
deactivatedShow
.
name
=
show
.
name
this
.
show
=
show
this
.
$refs
.
modalDeactivateShow
.
show
()
},
// open the modal to edit a show's owners
showModalOwners
(
show
)
{
this
.
show
=
show
...
...
src/store/modules/shows.js
View file @
8ffbb488
import
axios
from
'
axios
'
import
handleApiError
from
'
../handleApiError
'
const
cloneMinimalShowObject
=
function
(
show
)
{
/* returns a new minimal object from the current show object with all
properties needed for a PUT request to the /show/ endpoint */
let
s
=
{}
s
.
name
=
show
.
name
s
.
slug
=
show
.
slug
s
.
short_description
=
show
.
short_description
s
.
fundingcategory
=
show
.
fundingcategory
s
.
type
=
show
.
type
// we do not want the arrays do be passed as references, because the
// current show object should not get modified when the update object
// gets modified, therefore we use slice to clone the arrays
s
.
category
=
show
.
category
.
slice
()
s
.
hosts
=
show
.
hosts
.
slice
()
s
.
owners
=
show
.
owners
.
slice
()
s
.
language
=
show
.
language
.
slice
()
s
.
topic
=
show
.
topic
.
slice
()
s
.
musicfocus
=
show
.
musicfocus
.
slice
()
return
s
}
const
state
=
{
shows
:
[],
timeslots
:
[],
...
...
@@ -17,7 +38,19 @@ const state = {
const
getters
=
{
shows
:
state
=>
state
.
shows
,
selectedShow
:
state
=>
state
.
shows
[
state
.
selected
.
index
]
selectedShow
:
state
=>
state
.
shows
[
state
.
selected
.
index
],
getShowByDataParam
:
state
=>
data
=>
{
let
show
if
(
data
.
id
!==
undefined
)
{
show
=
state
.
shows
.
find
(
s
=>
s
.
id
===
data
.
id
)
if
(
show
===
undefined
)
{
this
.
$log
.
error
(
'
getShowByDataParam: ID not found in store!
'
)
}
}
else
if
(
data
.
index
!==
undefined
)
{
show
=
state
.
shows
[
data
.
index
]
}
else
{
this
.
$log
.
error
(
'
getShowByDataParam: no ID or index was provided
'
)
}
return
show
}
}
const
mutations
=
{
...
...
@@ -35,7 +68,24 @@ const mutations = {
state
.
timeslots
=
slots
},
switchShow
(
state
,
index
)
{
setName
(
state
,
data
)
{
let
index
=
state
.
shows
.
findIndex
(
s
=>
s
.
id
===
data
.
id
)
state
.
shows
[
index
].
name
=
data
.
text
},
setShortDescription
(
state
,
data
)
{
let
index
=
state
.
shows
.
findIndex
(
s
=>
s
.
id
===
data
.
id
)
state
.
shows
[
index
].
short_description
=
data
.
text
},
setDescription
(
state
,
data
)
{
let
index
=
state
.
shows
.
findIndex
(
s
=>
s
.
id
===
data
.
id
)
state
.
shows
[
index
].
description
=
data
.
text
},
setActive
(
state
,
data
)
{
let
index
=
state
.
shows
.
findIndex
(
s
=>
s
.
id
===
data
.
id
)
state
.
shows
[
index
].
is_active
=
data
.
active
},
switchShow
(
state
,
index
)
{
state
.
selected
.
index
=
index
state
.
selected
.
id
=
state
.
shows
[
index
].
id
}
...
...
@@ -87,7 +137,98 @@ const actions = {
handleApiError
(
this
,
error
,
'
could not load timeslots
'
)
if
(
data
&&
typeof
(
data
.
callbackCancel
)
===
'
function
'
)
{
data
.
callbackCancel
()
}
})
}
},
updateShow
(
ctx
,
data
)
{
ctx
.
commit
(
'
loading
'
,
'
shows
'
)
let
uri
=
process
.
env
.
VUE_APP_API_STEERING_SHOWS
+
data
.
id
+
'
/
'
axios
.
put
(
uri
,
data
.
show
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
ctx
.
rootState
.
auth
.
user
.
access_token
}
}).
then
(
response
=>
{
ctx
.
commit
(
'
finishLoading
'
,
'
shows
'
)
if
(
data
&&
typeof
(
data
.
callback
)
===
'
function
'
)
{
data
.
callback
(
response
)
}
}).
catch
(
error
=>
{
handleApiError
(
this
,
error
,
'
could not update show
'
)
if
(
data
&&
typeof
(
data
.
callbackCancel
)
===
'
function
'
)
{
data
.
callbackCancel
()
}
})
},
updateName
(
ctx
,
data
)
{
let
show
=
cloneMinimalShowObject
(
ctx
.
getters
.
getShowByDataParam
(
data
))
show
.
name
=
data
.
text
ctx
.
dispatch
(
'
updateShow
'
,
{
id
:
data
.
id
,
show
:
show
,
callback
:
()
=>
{
ctx
.
commit
(
'
setName
'
,
{
id
:
data
.
id
,
text
:
data
.
text
})
if
(
typeof
(
data
.
callback
)
===
'
function
'
)
{
data
.
callback
()
}
}
})
},
updateShortDescription
(
ctx
,
data
)
{
let
show
=
cloneMinimalShowObject
(
ctx
.
getters
.
getShowByDataParam
(
data
))
show
.
short_description
=
data
.
text
ctx
.
dispatch
(
'
updateShow
'
,
{
id
:
data
.
id
,
show
:
show
,
callback
:
()
=>
{
ctx
.
commit
(
'
setShortDescription
'
,
{
id
:
data
.
id
,
text
:
data
.
text
})
}
})
},
updateDescription
(
ctx
,
data
)
{
let
show
=
cloneMinimalShowObject
(
ctx
.
getters
.
getShowByDataParam
(
data
))
show
.
description
=
data
.
text
ctx
.
dispatch
(
'
updateShow
'
,
{
id
:
data
.
id
,
show
:
show
,
callback
:
()
=>
{
ctx
.
commit
(
'
setDescription
'
,
{
id
:
data
.
id
,
text
:
data
.
text
})