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

move show owner display and modal to own component

parent ab8bba13
......@@ -234,6 +234,7 @@
<h2>Allgemeine Einstellungen zur Sendereihe:</h2>
<show-metaSimpleTypes />
<show-metaArrays />
<show-metaOwners />
<b-row>
<b-col lg="2">
......@@ -292,8 +293,9 @@
<script>
import showJumbotron from './ShowJumbotron.vue'
import showMetaSimpleTypes from './ShowMetaArrays.vue'
import showMetaArrays from './ShowMetaSimpleTypes.vue'
import showMetaSimpleTypes from './ShowMetaSimpleTypes.vue'
import showMetaArrays from './ShowMetaArrays.vue'
import showMetaOwners from './ShowMetaOwners.vue'
import modalNotes from './ShowManagerModalNotes.vue'
import modalShow from './ShowManagerModalShow.vue'
import modalSuperuser from './ShowManagerModalSuperuser.vue'
......@@ -314,6 +316,7 @@ export default {
'show-jumbotron': showJumbotron,
'show-metaArrays': showMetaArrays,
'show-metaSimpleTypes': showMetaSimpleTypes,
'show-metaOwners': showMetaOwners,
},
// generic functions that we want to use from our mixins folder
......@@ -388,6 +391,7 @@ export default {
currentShow () { return this.$store.state.shows.selected.index },
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
// make sure no malicous code can be inserted into the DOM. For that the
......@@ -523,6 +527,7 @@ export default {
this.$store.dispatch('shows/fetchMetaArray', {property: 'musicfocus'})
this.$store.dispatch('shows/fetchMetaArray', {property: 'languages'})
this.$store.dispatch('shows/fetchMetaArray', {property: 'hosts'})
if (this.isSuperuser) { this.$store.dispatch('auth/fetchUsers') }
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
......
......@@ -81,100 +81,6 @@
</b-row>
</b-container>
</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>
</template>
......@@ -209,8 +115,6 @@ export default {
types: [],
fundingcategories: [],
users: [],
owners: [],
ownersTableFields: ['name', 'username', 'email', 'options']
}
},
......@@ -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
showModalAddShow () {
this.newShow.name = ''
......@@ -344,33 +203,6 @@ export default {
this.loadFundingCategories()
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>
......
<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>
import axios from 'axios'
import oidc from 'oidc-client'
import handleApiError from '../handleApiError'
const oidcmgr = new oidc.UserManager({
userStore: new oidc.WebStorageStateStore(),
......@@ -25,12 +26,14 @@ const state = {
logged_in: false,
steeringUser: null
},
users: [],
userOIDC: null,
}
const getters = {
access_token: state => state.user.access_token,
user: state => state.user,
users: state => state.users,
}
const mutations = {
......@@ -54,6 +57,10 @@ const mutations = {
state.user.steeringUser = {...user}
},
setUsers (state, users) {
state.users = users
},
setAccessToken (state, token) {
state.user.access_token = token
},
......@@ -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) {
// TODO: remove oidc logging after thorough testing
oidc.Log.logger = console
......@@ -153,7 +174,7 @@ const actions = {
this.$log.error(err)
alert('Error: something went wrong when logging out. See console for details.')
})
}
},
}
export default {
......
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