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 @@
</b-badge> <img
src="../assets/16x16/emblem-system.png"
alt="edit"
@click="$refs.appModalSuperuser.showModalOwners()"
@click="$refs.appModalSuperuser.showModalOwners(shows[currentShow])"
>
</b-col>
<b-col lg="10">
......
......@@ -99,6 +99,124 @@
Are you sure you want to continue?
</div>
</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>
</template>
......@@ -127,12 +245,17 @@ export default {
id: null,
name: '',
},
show: null,
loaded: {
types: false,
fundingcategories: false,
users: false,
},
types: [],
fundingcategories: [],
users: [],
owners: [],
ownersTableFields: ['name', 'username', 'email', 'options']
}
},
......@@ -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
showModalAddShow () {
this.newShow.name = ''
......@@ -248,8 +415,12 @@ export default {
this.$refs.modalDeleteShow.show()
},
showModalOwners () {
alert('coming soon')
// open the modal to edit a show's owners
showModalOwners (show) {
this.show = show
this.owners = []
this.loadUsers()
this.$refs.modalOwners.show()
},
// fetch all available (that is: active) show type from steering
......@@ -283,6 +454,25 @@ export default {
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>
......
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