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
fcb0f2cf
Commit
fcb0f2cf
authored
May 01, 2020
by
jackie / Andrea Ida Malkah Klaura
Browse files
refactor show simple meta types to own component
parent
4d7dec5a
Changes
4
Hide whitespace changes
Inline
Side-by-side
src/components/ShowManager.vue
View file @
fcb0f2cf
...
...
@@ -232,131 +232,7 @@
<hr>
<h2>
Allgemeine Einstellungen zur Sendereihe:
</h2>
<b-row>
<b-col
lg=
"6"
>
<p>
<b-badge
variant=
"light"
>
E-Mail:
</b-badge>
<span
v-if=
"shows[currentShow].email === null"
><small><i>
(none set)
</i></small></span>
<span
v-else
>
{{ shows[currentShow].email }}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit contact e-mail"
@
click=
"$refs.appModalShow.showEmail()"
>
</p>
</b-col>
<b-col
lg=
"6"
>
<p>
<b-badge
variant=
"light"
>
Website:
</b-badge>
<span
v-if=
"shows[currentShow].website === null"
><small><i>
(none set)
</i></small></span>
<span
v-else
><a
:href=
"shows[currentShow].website"
>
{{ shows[currentShow].website }}
</a></span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit website"
@
click=
"$refs.appModalShow.showWebsite()"
>
</p>
</b-col>
<b-col
lg=
"6"
>
<p>
<b-badge
variant=
"light"
>
Show type:
</b-badge>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<span
v-if=
"loaded.type"
>
<span
v-if=
"current.type.length === 0"
><small><i>
(none set)
</i></small></span>
<span
v-else
>
{{ current.type[0].type }}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
@
click=
"$refs.appModalShow.showType()"
>
</span>
<span
v-else
><img
src=
"../assets/radio.gif"
height=
"24px"
alt=
"loading data"
></span>
</p>
</b-col>
<b-col
lg=
"6"
>
<p>
<b-badge
variant=
"light"
>
Funding category (eg. for RTR):
</b-badge>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<span
v-if=
"loaded.fundingcategory"
>
<span
v-if=
"current.fundingcategory.length === 0"
><small><i>
(none set)
</i></small></span>
<span
v-else
>
{{ current.fundingcategory[0].fundingcategory }}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
@
click=
"$refs.appModalShow.showFundingCategory()"
>
</span>
<span
v-else
><img
src=
"../assets/radio.gif"
height=
"24px"
alt=
"loading data"
></span>
</p>
</b-col>
<b-col
lg=
"6"
>
<p>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<!-- TODO: fetch name for predecessor from steering api -->
<b-badge
variant=
"light"
>
Predecessor:
</b-badge>
<span
v-if=
"shows[currentShow].predecessor === null"
><small><i>
This show has no predecessor show.
</i></small></span>
<span
v-else
>
{{ predecessorName }}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
@
click=
"$refs.appModalShow.showPredecessor()"
>
</p>
</b-col>
<b-col
lg=
"6"
>
<p>
<b-badge
variant=
"light"
>
CBA Series ID:
</b-badge>
<span
v-if=
"shows[currentShow].cba_series_id === null"
><small><i>
(none set)
</i></small></span>
<span
v-else
>
{{ shows[currentShow].cba_series_id }}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit CBA series ID"
@
click=
"$refs.appModalShow.showCBAid()"
>
</p>
</b-col>
<b-col
lg=
"6"
>
<p>
<b-badge
variant=
"light"
>
Fallback List/Pool:
</b-badge>
<span
v-if=
"shows[currentShow].fallback_id === ''"
><small><i>
(none set)
</i></small></span>
<span
v-else
>
ID: {{ shows[currentShow].fallback_id }}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
@
click=
"notYetImplemented"
>
</p>
</b-col>
</b-row>
<show-metaSimpleTypes
/>
<hr
v-if=
"$parent.user.steeringUser.is_superuser"
>
<b-row
v-if=
"$parent.user.steeringUser.is_superuser"
>
...
...
@@ -638,6 +514,7 @@
<
script
>
import
showJumbotron
from
'
./ShowJumbotron.vue
'
import
showMetaSimpleTypes
from
'
./ShowMetaSimpleTypes.vue
'
import
modalNotes
from
'
./ShowManagerModalNotes.vue
'
import
modalShow
from
'
./ShowManagerModalShow.vue
'
import
modalSuperuser
from
'
./ShowManagerModalSuperuser.vue
'
...
...
@@ -656,6 +533,7 @@ export default {
'
app-modalSuperuser
'
:
modalSuperuser
,
'
app-modalPlaylist
'
:
modalPlaylist
,
'
show-jumbotron
'
:
showJumbotron
,
'
show-metaSimpleTypes
'
:
showMetaSimpleTypes
,
},
// generic functions that we want to use from our mixins folder
...
...
@@ -739,22 +617,6 @@ export default {
return
DOMPurify
.
sanitize
(
this
.
shows
[
this
.
currentShow
].
description
)
},
// In order to not only just show the predecessor of a show as an ID. we
// have to find it in our shows array to then output the predecessors name.
// This currently assumes that a user has access to all the predecessors
// of the shows as well.
// TODO/discuss: if all predecessor names should be accessible, independent
// of access rights, then we would need to load all predecessors show after
// loading our initial shows as well.
predecessorName
:
function
()
{
for
(
var
i
in
this
.
shows
)
{
if
(
this
.
shows
[
i
].
id
===
this
.
shows
[
this
.
currentShow
].
predecessor
)
{
return
this
.
shows
[
i
].
name
}
}
return
'
Name of predecessor show not available
'
},
// As we do not have a single object which holds all info we need to display
// in the table with our timeslots, we use this computed array to do that
notesTableArray
:
function
()
{
...
...
@@ -874,6 +736,8 @@ export default {
// If the id argument is null, the first show in the show array will be used
loadAndSwitch
:
function
(
id
)
{
this
.
$store
.
dispatch
(
'
shows/fetchShows
'
)
this
.
$store
.
dispatch
(
'
shows/fetchTypes
'
)
this
.
$store
.
dispatch
(
'
shows/fetchFundingCategories
'
)
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
...
...
src/components/ShowManagerModalShow.vue
View file @
fcb0f2cf
<
template
>
<div>
<!-- TODO: use b-form outside the b-form-input, so that
simple input validation works automagically -->
<b-modal
ref=
"modalShowEmail"
title=
"E-Mail"
size=
"lg"
@
ok=
"saveEmail"
>
<b-form-input
v-model=
"string"
type=
"email"
placeholder=
"Put a contact address of your show here"
/>
</b-modal>
<!-- TODO: use b-form outside the b-form-input, so that
simple input validation works automagically -->
<b-modal
ref=
"modalShowWebsite"
title=
"Website"
size=
"lg"
@
ok=
"saveWebsite"
>
<b-form-input
v-model=
"string"
type=
"url"
placeholder=
"Put the website of your show here"
/>
</b-modal>
<!-- TODO: use b-form outside the b-form-input, so that
simple input validation works automagically -->
<b-modal
ref=
"modalShowCBAid"
title=
"CBA Series ID"
size=
"lg"
@
ok=
"saveCBAid"
>
<b-form-input
v-model=
"id"
type=
"number"
placeholder=
"Put the CBA Series ID of your show here"
/>
</b-modal>
<!-- TODO: use b-form outside the b-form-input, so that
simple input validation works automagically -->
<b-modal
ref=
"modalShowPredecessor"
title=
"Predecessor of this show"
size=
"lg"
@
ok=
"savePredecessor"
>
<b-form-select
v-model=
"id"
:options=
"showPredecessorSelector"
/>
</b-modal>
<b-modal
ref=
"modalShowType"
title=
"Show type"
size=
"lg"
@
ok=
"saveShowType"
>
<b-row>
<b-col
align=
"center"
>
<div
v-if=
"!loaded"
>
<img
src=
"../assets/radio.gif"
alt=
"loading data"
>
</div>
<div
v-else
>
<b-form-select
v-model=
"id"
:options=
"showTypeSelector"
/>
</div>
</b-col>
</b-row>
</b-modal>
<b-modal
ref=
"modalShowFundingCategory"
title=
"Funding category of this show"
size=
"lg"
@
ok=
"saveFundingCategory"
>
<b-row>
<b-col
align=
"center"
>
<div
v-if=
"!loaded"
>
<img
src=
"../assets/radio.gif"
alt=
"loading data"
>
</div>
<div
v-else
>
<b-form-select
v-model=
"id"
:options=
"showFundingCategorySelector"
/>
</div>
</b-col>
</b-row>
</b-modal>
<b-modal
ref=
"modalShowCategories"
title=
"Categories of this show"
...
...
@@ -402,28 +295,6 @@ export default {
which use a specific array format [{value:"",text:""},...] to render options.
*/
computed
:
{
showTypeSelector
:
function
()
{
var
options
=
[]
for
(
var
i
in
this
.
types
)
{
options
.
push
({
value
:
this
.
types
[
i
].
id
,
text
:
this
.
types
[
i
].
type
})
}
return
options
},
showFundingCategorySelector
:
function
()
{
var
options
=
[]
for
(
var
i
in
this
.
fundingcategories
)
{
options
.
push
({
value
:
this
.
fundingcategories
[
i
].
id
,
text
:
this
.
fundingcategories
[
i
].
abbrev
+
'
(
'
+
this
.
fundingcategories
[
i
].
fundingcategory
+
'
)
'
,
disabled
:
!
this
.
fundingcategories
[
i
].
is_active
})
}
return
options
},
showPredecessorSelector
:
function
()
{
var
options
=
[]
options
.
push
({
value
:
null
,
text
:
'
<i>... this show has no predecessor ...</i>
'
})
for
(
var
i
in
this
.
$parent
.
shows
)
{
options
.
push
({
value
:
this
.
$parent
.
shows
[
i
].
id
,
text
:
this
.
$parent
.
shows
[
i
].
name
})
}
return
options
},
showCategorySelector
:
function
()
{
var
options
=
[]
for
(
var
i
in
this
.
categories
)
{
...
...
@@ -471,125 +342,6 @@ export default {
properties that actually get changed
TODO: think about refactoring all those function to one or few functions
*/
saveEmail
(
event
)
{
if
(
this
.
string
!==
this
.
show
.
email
)
{
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
if
(
this
.
string
===
''
)
{
updatedShow
.
email
=
null
}
else
{
updatedShow
.
email
=
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
.
email
=
updatedShow
.
email
this
.
$refs
.
modalShowEmail
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not save the show e-mail contact. See console for details.
'
)
})
}
},
saveWebsite
(
event
)
{
if
(
this
.
string
!==
this
.
show
.
website
)
{
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
if
(
this
.
string
===
''
)
{
updatedShow
.
website
=
null
}
else
{
updatedShow
.
website
=
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
.
website
=
updatedShow
.
website
this
.
$refs
.
modalShowWebsite
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not save the show website. See console for details.
'
)
})
}
},
saveCBAid
(
event
)
{
if
(
this
.
id
!==
this
.
show
.
cba_series_id
)
{
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
if
(
this
.
id
===
''
)
{
updatedShow
.
cba_series_id
=
null
}
else
{
updatedShow
.
cba_series_id
=
this
.
id
}
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
.
cba_series_id
=
updatedShow
.
cba_series_id
this
.
$refs
.
modalShowCBAid
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not save the CBA show id. See console for details.
'
)
})
}
},
saveShowType
(
event
)
{
if
(
this
.
id
!==
this
.
show
.
type
)
{
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
updatedShow
.
type
=
this
.
id
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
.
type
=
this
.
id
this
.
$parent
.
getType
()
this
.
$refs
.
modalShowType
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not save the show type. See console for details.
'
)
})
}
},
savePredecessor
(
event
)
{
if
(
this
.
id
!==
this
.
show
.
predecessor
)
{
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
updatedShow
.
predecessor
=
this
.
id
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
.
predecessor
=
this
.
id
this
.
$refs
.
modalShowPredecessor
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not save the show predecessor. See console for details.
'
)
})
}
},
saveFundingCategory
(
event
)
{
if
(
this
.
id
!==
this
.
show
.
fundingcategory
)
{
event
.
preventDefault
()
let
updatedShow
=
this
.
getUpdateShowObject
()
updatedShow
.
fundingcategory
=
this
.
id
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
.
fundingcategory
=
this
.
id
this
.
$parent
.
getFundingCategory
()
this
.
$refs
.
modalShowType
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not save the show
\'
funding category. See console for details.
'
)
})
}
},
saveCategories
(
event
)
{
this
.
$log
.
debug
(
'
saveCategories
'
,
this
.
array
,
this
.
show
.
category
)
if
(
this
.
array
.
length
!==
this
.
show
.
category
.
length
||
!
this
.
array
.
every
((
value
,
index
)
=>
value
===
this
.
show
.
category
[
index
]))
{
...
...
@@ -765,56 +517,6 @@ export default {
Functions to activate modals
They are called from the parent component
*/
showEmail
()
{
if
(
this
.
show
.
email
!==
null
)
{
this
.
string
=
this
.
show
.
email
}
else
{
this
.
string
=
''
}
this
.
$refs
.
modalShowEmail
.
show
()
},
showWebsite
()
{
if
(
this
.
show
.
website
!==
null
)
{
this
.
string
=
this
.
show
.
website
}
else
{
this
.
string
=
''
}
this
.
$refs
.
modalShowWebsite
.
show
()
},
showCBAid
()
{
this
.
id
=
this
.
show
.
cba_series_id
this
.
$refs
.
modalShowCBAid
.
show
()
},
showPredecessor
()
{
this
.
id
=
this
.
show
.
predecessor
this
.
$refs
.
modalShowPredecessor
.
show
()
},
showType
()
{
this
.
id
=
this
.
show
.
type
this
.
loaded
=
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
=
true
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not load show types. See console for details.
'
)
})
this
.
$refs
.
modalShowType
.
show
()
},
showFundingCategory
()
{
this
.
id
=
this
.
show
.
fundingcategory
this
.
loaded
=
false
axios
.
get
(
process
.
env
.
VUE_APP_API_STEERING
+
'
fundingcategories/
'
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(
response
=>
{
this
.
fundingcategories
=
response
.
data
this
.
loaded
=
true
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not load funding categories. See console for details.
'
)
})
this
.
$refs
.
modalShowFundingCategory
.
show
()
},
showCategories
()
{
this
.
array
=
this
.
show
.
category
this
.
loaded
=
false
...
...
src/components/ShowMetaSimpleTypes.vue
0 → 100644
View file @
fcb0f2cf
<
template
>
<div>
<b-row>
<b-col
lg=
"6"
>
<p>
<b-badge
variant=
"light"
>
E-Mail:
</b-badge>
<span
v-if=
"selectedShow.email === null"
><small><i>
(none set)
</i></small></span>
<span
v-else
>
{{
selectedShow
.
email
}}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit contact e-mail"
@
click=
"openModalEmail()"
>
</p>
</b-col>
<b-col
lg=
"6"
>
<p>
<b-badge
variant=
"light"
>
Website:
</b-badge>
<span
v-if=
"selectedShow.website === null"
><small><i>
(none set)
</i></small></span>
<span
v-else
><a
:href=
"selectedShow.website"
>
{{
selectedShow
.
website
}}
</a></span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit website"
@
click=
"openModalWebsite()"
>
</p>
</b-col>
<b-col
lg=
"6"
>
<p>
<b-badge
variant=
"light"
>
Show type:
</b-badge>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<span
v-if=
"loaded.types"
>
<span
v-if=
"selectedShow.type === null"
><small><i>
(none set)
</i></small></span>
<span
v-else
>
{{
type
}}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
@
click=
"openModalType()"
>
</span>
<span
v-else
><img
src=
"../assets/radio.gif"
height=
"24px"
alt=
"loading data"
></span>
</p>
</b-col>
<b-col
lg=
"6"
>
<p>
<b-badge
variant=
"light"
>
Funding category (eg. for RTR):
</b-badge>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<span
v-if=
"loaded.fundingcategories"
>
<span
v-if=
"selectedShow.fundingcategory === null"
><small><i>
(none set)
</i></small></span>
<span
v-else
>
{{
fundingCategory
}}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
@
click=
"openModalFundingCategory()"
>
</span>
<span
v-else
><img
src=
"../assets/radio.gif"
height=
"24px"
alt=
"loading data"
></span>
</p>
</b-col>
<b-col
lg=
"6"
>
<p>
<!-- TODO: discuss: should this be visible to show owners or only to administrators? -->
<!-- TODO: fetch name for predecessor from steering api -->
<b-badge
variant=
"light"
>
Predecessor:
</b-badge>
<span
v-if=
"selectedShow.predecessor === null"
><small><i>
This show has no predecessor show.
</i></small></span>
<span
v-else
>
{{
predecessorName
}}
</span>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
@
click=
"openModalPredecessor()"
>
</p>
</b-col>
<b-col
lg=
"6"
>
<p>
<b-badge
variant=
"light"
>
CBA Series ID:
</b-badge>