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
c73df362
Commit
c73df362
authored
May 06, 2020
by
jackie / Andrea Ida Malkah Klaura
Browse files
move show owner display and modal to own component
parent
ab8bba13
Changes
4
Hide whitespace changes
Inline
Side-by-side
src/components/ShowManager.vue
View file @
c73df362
...
@@ -234,6 +234,7 @@
...
@@ -234,6 +234,7 @@
<h2>
Allgemeine Einstellungen zur Sendereihe:
</h2>
<h2>
Allgemeine Einstellungen zur Sendereihe:
</h2>
<show-metaSimpleTypes
/>
<show-metaSimpleTypes
/>
<show-metaArrays
/>
<show-metaArrays
/>
<show-metaOwners
/>
<b-row>
<b-row>
<b-col
lg=
"2"
>
<b-col
lg=
"2"
>
...
@@ -292,8 +293,9 @@
...
@@ -292,8 +293,9 @@
<
script
>
<
script
>
import
showJumbotron
from
'
./ShowJumbotron.vue
'
import
showJumbotron
from
'
./ShowJumbotron.vue
'
import
showMetaSimpleTypes
from
'
./ShowMetaArrays.vue
'
import
showMetaSimpleTypes
from
'
./ShowMetaSimpleTypes.vue
'
import
showMetaArrays
from
'
./ShowMetaSimpleTypes.vue
'
import
showMetaArrays
from
'
./ShowMetaArrays.vue
'
import
showMetaOwners
from
'
./ShowMetaOwners.vue
'
import
modalNotes
from
'
./ShowManagerModalNotes.vue
'
import
modalNotes
from
'
./ShowManagerModalNotes.vue
'
import
modalShow
from
'
./ShowManagerModalShow.vue
'
import
modalShow
from
'
./ShowManagerModalShow.vue
'
import
modalSuperuser
from
'
./ShowManagerModalSuperuser.vue
'
import
modalSuperuser
from
'
./ShowManagerModalSuperuser.vue
'
...
@@ -314,6 +316,7 @@ export default {
...
@@ -314,6 +316,7 @@ export default {
'
show-jumbotron
'
:
showJumbotron
,
'
show-jumbotron
'
:
showJumbotron
,
'
show-metaArrays
'
:
showMetaArrays
,
'
show-metaArrays
'
:
showMetaArrays
,
'
show-metaSimpleTypes
'
:
showMetaSimpleTypes
,
'
show-metaSimpleTypes
'
:
showMetaSimpleTypes
,
'
show-metaOwners
'
:
showMetaOwners
,
},
},
// generic functions that we want to use from our mixins folder
// generic functions that we want to use from our mixins folder
...
@@ -388,6 +391,7 @@ export default {
...
@@ -388,6 +391,7 @@ export default {
currentShow
()
{
return
this
.
$store
.
state
.
shows
.
selected
.
index
},
currentShow
()
{
return
this
.
$store
.
state
.
shows
.
selected
.
index
},
currentShowID
()
{
return
this
.
$store
.
state
.
shows
.
selected
.
id
},
currentShowID
()
{
return
this
.
$store
.
state
.
shows
.
selected
.
id
},
isSuperuser
()
{
return
this
.
$store
.
state
.
auth
.
user
.
steeringUser
.
is_superuser
},
// As the show description should allow to be html-formatted, we have to
// As the show description should allow to be html-formatted, we have to
// make sure no malicous code can be inserted into the DOM. For that the
// make sure no malicous code can be inserted into the DOM. For that the
...
@@ -523,6 +527,7 @@ export default {
...
@@ -523,6 +527,7 @@ export default {
this
.
$store
.
dispatch
(
'
shows/fetchMetaArray
'
,
{
property
:
'
musicfocus
'
})
this
.
$store
.
dispatch
(
'
shows/fetchMetaArray
'
,
{
property
:
'
musicfocus
'
})
this
.
$store
.
dispatch
(
'
shows/fetchMetaArray
'
,
{
property
:
'
languages
'
})
this
.
$store
.
dispatch
(
'
shows/fetchMetaArray
'
,
{
property
:
'
languages
'
})
this
.
$store
.
dispatch
(
'
shows/fetchMetaArray
'
,
{
property
:
'
hosts
'
})
this
.
$store
.
dispatch
(
'
shows/fetchMetaArray
'
,
{
property
:
'
hosts
'
})
if
(
this
.
isSuperuser
)
{
this
.
$store
.
dispatch
(
'
auth/fetchUsers
'
)
}
this
.
loaded
.
shows
=
false
this
.
loaded
.
shows
=
false
var
uri
=
process
.
env
.
VUE_APP_API_STEERING_SHOWS
var
uri
=
process
.
env
.
VUE_APP_API_STEERING_SHOWS
// normal users should only see their own shows, only superusers see all shows
// normal users should only see their own shows, only superusers see all shows
...
...
src/components/ShowManagerModalSuperuser.vue
View file @
c73df362
...
@@ -81,100 +81,6 @@
...
@@ -81,100 +81,6 @@
</b-row>
</b-row>
</b-container>
</b-container>
</b-modal>
</b-modal>
<!-- Modal to edit show owners -->
<b-modal
ref=
"modalOwners"
title=
"Edit owners of the show"
size=
"lg"
@
ok=
"updateOwners"
>
<div
v-if=
"loaded.users"
>
<p>
Users with access to
<b>
{{
show
.
name
}}
</b>
:
</p>
<div
v-if=
"owners.length === 0"
>
<ul>
<li>
<small><i>
(none set)
</i></small>
</li>
</ul>
</div>
<div
v-else
>
<b-table
striped
hover
:items=
"owners"
:fields=
"ownersTableFields"
>
<template
v-slot:cell(name)=
"data"
>
{{
data
.
item
.
first_name
}}
{{
data
.
item
.
last_name
}}
</
template
>
<
template
v-slot:cell(username)=
"data"
>
<small>
{{
data
.
value
}}
</small>
</
template
>
<
template
v-slot:cell(email)=
"data"
>
<small>
{{
data
.
value
}}
</small>
</
template
>
<
template
v-slot:cell(options)=
"data"
>
<b-button
variant=
"danger"
size=
"sm"
@
click=
"deleteOwner(data.item.id)"
>
Delete
</b-button>
</
template
>
</b-table>
</div>
<hr>
<!-- TODO: as the list of users might be quite large we need some sort
of pagination and/or a search box. also those users who already have
access should not be listed (or at least the add button should be disabled)
-->
<p>
You can
<b-badge
variant=
"success"
>
add new users
</b-badge>
from the table below:
</p>
<b-table
striped
hover
:items=
"users"
:fields=
"ownersTableFields"
>
<
template
v-slot:cell(name)=
"data"
>
{{
data
.
item
.
first_name
}}
{{
data
.
item
.
last_name
}}
</
template
>
<
template
v-slot:cell(username)=
"data"
>
<small>
{{
data
.
value
}}
</small>
</
template
>
<
template
v-slot:cell(email)=
"data"
>
<small>
{{
data
.
value
}}
</small>
</
template
>
<
template
v-slot:cell(options)=
"data"
>
<b-button
variant=
"success"
size=
"sm"
@
click=
"addOwner(data.item.id)"
>
Add
</b-button>
</
template
>
</b-table>
</div>
<div
v-else
>
<img
src=
"../assets/radio.gif"
height=
"32px"
alt=
"loading user data"
>
</div>
</b-modal>
</div>
</div>
</
template
>
</
template
>
...
@@ -209,8 +115,6 @@ export default {
...
@@ -209,8 +115,6 @@ export default {
types
:
[],
types
:
[],
fundingcategories
:
[],
fundingcategories
:
[],
users
:
[],
users
:
[],
owners
:
[],
ownersTableFields
:
[
'
name
'
,
'
username
'
,
'
email
'
,
'
options
'
]
}
}
},
},
...
@@ -290,51 +194,6 @@ export default {
...
@@ -290,51 +194,6 @@ export default {
})
})
},
},
// 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
// saving is done when the updateOwners method is called
let
i
=
this
.
owners
.
findIndex
(
o
=>
o
.
id
===
id
)
this
.
owners
.
splice
(
i
,
1
)
},
// add a user as an owner to the list of show owners
addOwner
(
id
)
{
// we only have to push the user object to our owners array, if it is
// not already there. saving is done by the updateOwners method.
if
(
this
.
owners
.
findIndex
(
o
=>
o
.
id
===
id
)
>=
0
)
{
alert
(
'
This user already has access to the show.
'
)
}
else
{
this
.
owners
.
push
(
this
.
users
.
find
(
u
=>
u
.
id
===
id
))
}
},
// set new list of show owners by updating the show
updateOwners
(
event
)
{
// prevent the modal from closing automatically on click
event
.
preventDefault
()
// now we have to fill the show's owner list anew with the selected owners
let
updatedShow
=
this
.
getUpdateShowObject
()
updatedShow
.
owners
=
[]
for
(
let
i
in
this
.
owners
)
{
updatedShow
.
owners
.
push
(
this
.
owners
[
i
].
id
)
}
// ready to update the show
let
uri
=
process
.
env
.
VUE_APP_API_STEERING_SHOWS
+
this
.
show
.
id
+
'
/
'
axios
.
put
(
uri
,
updatedShow
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(()
=>
{
this
.
$refs
.
modalOwners
.
hide
()
this
.
$parent
.
loadAndSwitch
(
this
.
show
.
id
)
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not update show owners. 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
// clear and fetch modal data and open the modal to add new shows
showModalAddShow
()
{
showModalAddShow
()
{
this
.
newShow
.
name
=
''
this
.
newShow
.
name
=
''
...
@@ -344,33 +203,6 @@ export default {
...
@@ -344,33 +203,6 @@ export default {
this
.
loadFundingCategories
()
this
.
loadFundingCategories
()
this
.
$refs
.
modalAddShow
.
show
()
this
.
$refs
.
modalAddShow
.
show
()
},
},
// open the modal to edit a show's owners
showModalOwners
(
show
)
{
this
.
show
=
show
this
.
owners
=
[]
this
.
loadUsers
()
this
.
$refs
.
modalOwners
.
show
()
},
// fetch all users from steering
loadUsers
()
{
this
.
loaded
.
users
=
false
axios
.
get
(
process
.
env
.
VUE_APP_API_STEERING
+
'
users
'
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(
response
=>
{
this
.
users
=
response
.
data
for
(
let
i
in
this
.
show
.
owners
)
{
this
.
owners
.
push
(
this
.
users
.
find
(
user
=>
user
.
id
===
this
.
show
.
owners
[
i
]))
}
this
.
loaded
.
users
=
true
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not load users. See console for details.
'
)
})
},
}
}
}
}
</
script
>
</
script
>
...
...
src/components/ShowMetaOwners.vue
0 → 100644
View file @
c73df362
<
template
>
<div>
<hr
v-if=
"isSuperuser"
>
<b-row
v-if=
"isSuperuser"
>
<b-col
lg=
"2"
>
<b-badge
variant=
"info"
style=
"width:80%;"
>
Owners:
</b-badge>
<img
src=
"../assets/16x16/emblem-system.png"
alt=
"edit"
@
click=
"openModalOwners()"
>
</b-col>
<b-col
lg=
"10"
>
<div
v-if=
"users.length > 0"
>
<p
v-if=
"selectedShow.owners.length === 0"
>
<small><i>
(none set)
</i></small>
</p>
<p
v-else
>
<!-- TODO: make link on name; when user clicks, open modal to edit host -->
<ul>
<li
v-for=
"owner in ownerDetails"
:key=
"owner.id"
>
{{
owner
.
first_name
}}
{{
owner
.
last_name
}}
<b-badge
variant=
"light"
>
username:
</b-badge>
<small>
{{
owner
.
username
}}
</small>
<span
v-if=
"owner.email.length > 0"
>
<b-badge
variant=
"light"
>
email:
</b-badge>
<small>
{{
owner
.
email
}}
</small>
</span>
</li>
</ul>
</p>
</div>
<div
v-else
>
<img
src=
"../assets/radio.gif"
height=
"24px"
alt=
"loading data"
><br>
</div>
</b-col>
</b-row>
<hr
v-if=
"isSuperuser"
>
<!-- Modal to edit show owners -->
<b-modal
ref=
"modalOwners"
title=
"Edit owners of the show"
size=
"lg"
@
ok=
"saveOwners"
>
<div
v-if=
"users.length > 0"
>
<p>
Users with access to
<b>
{{
selectedShow
.
name
}}
</b>
:
</p>
<div
v-if=
"owners.length === 0"
>
<ul>
<li>
<small><i>
(none set)
</i></small>
</li>
</ul>
</div>
<div
v-else
>
<b-table
striped
hover
:items=
"owners"
:fields=
"ownersTableFields"
>
<template
v-slot:cell(name)=
"data"
>
{{
data
.
item
.
first_name
}}
{{
data
.
item
.
last_name
}}
</
template
>
<
template
v-slot:cell(username)=
"data"
>
<small>
{{
data
.
value
}}
</small>
</
template
>
<
template
v-slot:cell(email)=
"data"
>
<small>
{{
data
.
value
}}
</small>
</
template
>
<
template
v-slot:cell(options)=
"data"
>
<b-button
variant=
"danger"
size=
"sm"
@
click=
"deleteOwner(data.item.id)"
>
Delete
</b-button>
</
template
>
</b-table>
</div>
<hr>
<!-- TODO: as the list of users might be quite large we need some sort
of pagination and/or a search box. also those users who already have
access should not be listed (or at least the add button should be disabled)
-->
<p>
You can
<b-badge
variant=
"success"
>
add new users
</b-badge>
from the table below:
</p>
<b-table
striped
hover
:items=
"users"
:fields=
"ownersTableFields"
>
<
template
v-slot:cell(name)=
"data"
>
{{
data
.
item
.
first_name
}}
{{
data
.
item
.
last_name
}}
</
template
>
<
template
v-slot:cell(username)=
"data"
>
<small>
{{
data
.
value
}}
</small>
</
template
>
<
template
v-slot:cell(email)=
"data"
>
<small>
{{
data
.
value
}}
</small>
</
template
>
<
template
v-slot:cell(options)=
"data"
>
<b-button
variant=
"success"
size=
"sm"
@
click=
"addOwner(data.item.id)"
>
Add
</b-button>
</
template
>
</b-table>
</div>
<div
v-else
>
<img
src=
"../assets/radio.gif"
height=
"32px"
alt=
"loading user data"
>
</div>
</b-modal>
</div>
</template>
<
script
>
import
{
mapGetters
}
from
'
vuex
'
export
default
{
data
()
{
return
{
owners
:
[],
ownersTableFields
:
[
'
name
'
,
'
username
'
,
'
email
'
,
'
options
'
]
}
},
computed
:
{
shows
()
{
return
this
.
$store
.
state
.
shows
.
shows
},
isSuperuser
()
{
return
this
.
$store
.
state
.
auth
.
user
.
steeringUser
.
is_superuser
},
loaded
()
{
return
{
owners
:
false
,
}
},
ownerDetails
()
{
let
owners
=
[]
for
(
let
id
of
this
.
selectedShow
.
owners
)
{
owners
.
push
(
this
.
users
.
find
(
o
=>
o
.
id
===
id
))
}
return
owners
},
...
mapGetters
({
selectedShow
:
'
shows/selectedShow
'
,
users
:
'
auth/users
'
,
})
},
methods
:
{
openModalOwners
()
{
this
.
owners
=
[]
for
(
let
id
of
this
.
selectedShow
.
owners
)
{
this
.
owners
.
push
(
this
.
users
.
find
(
o
=>
o
.
id
===
id
))
}
this
.
$refs
.
modalOwners
.
show
()
},
saveOwners
(
event
)
{
event
.
preventDefault
()
let
newOwners
=
[]
for
(
let
i
in
this
.
owners
)
{
newOwners
.
push
(
this
.
owners
[
i
].
id
)
}
this
.
$store
.
dispatch
(
'
shows/updateProperty
'
,
{
id
:
this
.
selectedShow
.
id
,
property
:
'
owners
'
,
value
:
newOwners
,
callback
:
()
=>
{
this
.
$refs
.
modalOwners
.
hide
()
}
})
},
// 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
// saving is done when the saveOwners method is called
let
i
=
this
.
owners
.
findIndex
(
o
=>
o
.
id
===
id
)
this
.
owners
.
splice
(
i
,
1
)
},
// add a user as an owner to the list of show owners
addOwner
(
id
)
{
// we only have to push the user object to our owners array, if it is
// not already there. saving is done by the saveOwners method.
if
(
this
.
owners
.
findIndex
(
o
=>
o
.
id
===
id
)
>=
0
)
{
alert
(
'
This user already has access to the show.
'
)
}
else
{
this
.
owners
.
push
(
this
.
users
.
find
(
u
=>
u
.
id
===
id
))
}
},
}
}
</
script
>
src/store/modules/auth.js
View file @
c73df362
import
axios
from
'
axios
'
import
axios
from
'
axios
'
import
oidc
from
'
oidc-client
'
import
oidc
from
'
oidc-client
'
import
handleApiError
from
'
../handleApiError
'
const
oidcmgr
=
new
oidc
.
UserManager
({
const
oidcmgr
=
new
oidc
.
UserManager
({
userStore
:
new
oidc
.
WebStorageStateStore
(),
userStore
:
new
oidc
.
WebStorageStateStore
(),
...
@@ -25,12 +26,14 @@ const state = {
...
@@ -25,12 +26,14 @@ const state = {
logged_in
:
false
,
logged_in
:
false
,
steeringUser
:
null
steeringUser
:
null
},
},
users
:
[],
userOIDC
:
null
,
userOIDC
:
null
,
}
}
const
getters
=
{
const
getters
=
{
access_token
:
state
=>
state
.
user
.
access_token
,
access_token
:
state
=>
state
.
user
.
access_token
,
user
:
state
=>
state
.
user
,
user
:
state
=>
state
.
user
,
users
:
state
=>
state
.
users
,
}
}
const
mutations
=
{
const
mutations
=
{
...
@@ -54,6 +57,10 @@ const mutations = {
...
@@ -54,6 +57,10 @@ const mutations = {
state
.
user
.
steeringUser
=
{...
user
}
state
.
user
.
steeringUser
=
{...
user
}
},
},
setUsers
(
state
,
users
)
{
state
.
users
=
users
},
setAccessToken
(
state
,
token
)
{
setAccessToken
(
state
,
token
)
{
state
.
user
.
access_token
=
token
state
.
user
.
access_token
=
token
},
},
...
@@ -91,6 +98,20 @@ const actions = {
...
@@ -91,6 +98,20 @@ const actions = {
})
})
},
},
fetchUsers
(
ctx
,
data
)
{
ctx
.
commit
(
'
setUsers
'
,
[])
axios
.
get
(
process
.
env
.
VUE_APP_API_STEERING
+
'
users
'
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
ctx
.
state
.
user
.
access_token
}
}).
then
(
response
=>
{
ctx
.
commit
(
'
setUsers
'
,
response
.
data
)
if
(
data
&&
typeof
(
data
.
callback
)
===
'
function
'
)
{
data
.
callback
()
}
}).
catch
(
error
=>
{
handleApiError
(
this
,
error
,
'
could not load steering users
'
)
if
(
data
&&
typeof
(
data
.
callbackCancel
)
===
'
function
'
)
{
data
.
callbackCancel
()
}
})
},
oidcInit
(
ctx
)
{
oidcInit
(
ctx
)
{
// TODO: remove oidc logging after thorough testing
// TODO: remove oidc logging after thorough testing
oidc
.
Log
.
logger
=
console
oidc
.
Log
.
logger
=
console
...
@@ -153,7 +174,7 @@ const actions = {
...
@@ -153,7 +174,7 @@ const actions = {
this
.
$log
.
error
(
err
)
this
.
$log
.
error
(
err
)
alert
(
'
Error: something went wrong when logging out. See console for details.
'
)
alert
(
'
Error: something went wrong when logging out. See console for details.
'
)
})
})
}
}
,
}
}
export
default
{
export
default
{
...
...
Write
Preview
Supports
Markdown
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