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

FEAT: add modal to edit show owners

parent eaa48a73
...@@ -411,7 +411,7 @@ ...@@ -411,7 +411,7 @@
</b-badge> <img </b-badge> <img
src="../assets/16x16/emblem-system.png" src="../assets/16x16/emblem-system.png"
alt="edit" alt="edit"
@click="$refs.appModalSuperuser.showModalOwners()" @click="$refs.appModalSuperuser.showModalOwners(shows[currentShow])"
> >
</b-col> </b-col>
<b-col lg="10"> <b-col lg="10">
......
...@@ -99,6 +99,124 @@ ...@@ -99,6 +99,124 @@
Are you sure you want to continue? Are you sure you want to continue?
</div> </div>
</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
slot="name"
slot-scope="data"
>
{{ data.item.first_name }} {{ data.item.last_name }}
</template>
<template
slot="username"
slot-scope="data"
>
<small>{{ data.value }}</small>
</template>
<template
slot="email"
slot-scope="data"
>
<small>{{ data.value }}</small>
</template>
<template
slot="options"
slot-scope="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
slot="name"
slot-scope="data"
>
{{ data.item.first_name }} {{ data.item.last_name }}
</template>
<template
slot="username"
slot-scope="data"
>
<small>{{ data.value }}</small>
</template>
<template
slot="email"
slot-scope="data"
>
<small>{{ data.value }}</small>
</template>
<template
slot="options"
slot-scope="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>
...@@ -127,12 +245,17 @@ export default { ...@@ -127,12 +245,17 @@ export default {
id: null, id: null,
name: '', name: '',
}, },
show: null,
loaded: { loaded: {
types: false, types: false,
fundingcategories: false, fundingcategories: false,
users: false,
}, },
types: [], types: [],
fundingcategories: [], fundingcategories: [],
users: [],
owners: [],
ownersTableFields: ['name', 'username', 'email', 'options']
} }
}, },
...@@ -231,6 +354,50 @@ export default { ...@@ -231,6 +354,50 @@ 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
this.show.owners = []
for (let i in this.owners) {
this.show.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, this.show, {
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 = ''
...@@ -248,8 +415,12 @@ export default { ...@@ -248,8 +415,12 @@ export default {
this.$refs.modalDeleteShow.show() this.$refs.modalDeleteShow.show()
}, },
showModalOwners () { // open the modal to edit a show's owners
alert('coming soon') showModalOwners (show) {
this.show = show
this.owners = []
this.loadUsers()
this.$refs.modalOwners.show()
}, },
// fetch all available (that is: active) show type from steering // fetch all available (that is: active) show type from steering
...@@ -283,6 +454,25 @@ export default { ...@@ -283,6 +454,25 @@ export default {
alert('Error: could not load available funding categories. See console for details.') alert('Error: could not load available funding categories. See console for details.')
}) })
}, },
// 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>
......
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