2018-09-12 06:42:07 +00:00
< template >
2019-03-02 10:25:10 +00:00
< div class = "loader-container" : class = "{ 'is-loading': listService.loading}" >
2018-09-17 17:00:35 +00:00
< div class = "card" >
< header class = "card-header" >
< p class = "card-header-title" >
Edit List
< / p >
< / header >
< div class = "card-content" >
< div class = "content" >
< form @submit.prevent ="submit()" >
< div class = "field" >
< label class = "label" for = "listtext" > List Name < / label >
< div class = "control" >
2019-03-02 10:25:10 +00:00
< input v -focus : class = "{ 'disabled': listService.loading}" :disabled ="listService.loading" class = "input" type = "text" id = "listtext" placeholder = "The list title goes here..." v-model ="list.title" >
2018-09-17 17:00:35 +00:00
< / div >
2018-09-12 06:42:07 +00:00
< / div >
2018-09-17 17:00:35 +00:00
< div class = "field" >
< label class = "label" for = "listdescription" > Description < / label >
< div class = "control" >
2019-03-02 10:25:10 +00:00
< textarea : class = "{ 'disabled': listService.loading}" :disabled ="listService.loading" class = "textarea" placeholder = "The lists description goes here..." id = "listdescription" v-model ="list.description" > < / textarea >
2018-09-17 17:00:35 +00:00
< / div >
2018-09-12 06:42:07 +00:00
< / div >
2018-09-17 17:00:35 +00:00
< / form >
2018-09-12 06:42:07 +00:00
2018-09-17 17:00:35 +00:00
< div class = "columns bigbuttons" >
< div class = "column" >
2019-03-02 10:25:10 +00:00
< button @click ="submit()" class = "button is-primary is-fullwidth" : class = "{ 'is-loading': listService.loading}" >
2018-09-17 17:00:35 +00:00
Save
< / button >
< / div >
< div class = "column is-1" >
2019-03-02 10:25:10 +00:00
< button @ click = "showDeleteModal = true" class = "button is-danger is-fullwidth" : class = "{ 'is-loading': listService.loading}" >
2018-09-17 17:00:35 +00:00
< span class = "icon is-small" >
< icon icon = "trash-alt" / >
< / span >
< / button >
< / div >
2018-09-12 06:42:07 +00:00
< / div >
2018-09-17 17:00:35 +00:00
< / div >
< / div >
< / div >
2019-03-02 10:25:10 +00:00
< component :is ="manageUsersComponent" :id ="list.id" type = "list" :userIsAdmin ="userIsAdmin" > < / component >
< component :is ="manageTeamsComponent" :id ="list.id" type = "list" :userIsAdmin ="userIsAdmin" > < / component >
2018-09-18 05:38:26 +00:00
2018-09-12 06:42:07 +00:00
< modal
v - if = "showDeleteModal"
@ close = "showDeleteModal = false"
2018-12-25 15:03:51 +00:00
@ submit = "deleteList()" >
2018-09-12 06:42:07 +00:00
< span slot = "header" > Delete the list < / span >
< p slot = "text" > Are you sure you want to delete this list and all of its contents ?
< br / > This includes all tasks and < b > CANNOT BE UNDONE ! < / b > < / p >
< / modal >
< / div >
< / template >
< script >
2019-03-02 10:25:10 +00:00
import auth from '../../auth'
import router from '../../router'
2018-09-18 16:49:44 +00:00
import message from '../../message'
import manageusers from '../sharing/user'
2018-09-18 17:01:30 +00:00
import manageteams from '../sharing/team'
2019-03-02 10:25:10 +00:00
import ListModel from '../../models/list'
import ListService from '../../services/list'
export default {
name : "EditList" ,
data ( ) {
return {
list : ListModel ,
listService : ListService ,
2018-09-12 06:42:07 +00:00
2019-03-02 10:25:10 +00:00
showDeleteModal : false ,
2018-09-17 17:00:35 +00:00
user : auth . user ,
2019-03-02 10:25:10 +00:00
userIsAdmin : false , // FIXME: we should be able to know somehow if the user is admin, not only based on if he's the owner
manageUsersComponent : '' ,
manageTeamsComponent : '' ,
}
} ,
2018-09-18 16:49:44 +00:00
components : {
2018-09-18 17:01:30 +00:00
manageusers ,
manageteams ,
2018-09-18 16:49:44 +00:00
} ,
2019-03-02 10:25:10 +00:00
beforeMount ( ) {
// Check if the user is already logged in, if so, redirect him to the homepage
if ( ! auth . user . authenticated ) {
router . push ( { name : 'home' } )
}
} ,
created ( ) {
this . listService = new ListService ( )
this . loadList ( )
} ,
watch : {
// call again the method if the route changes
'$route' : 'loadList'
} ,
methods : {
loadList ( ) {
let list = new ListModel ( { id : this . $route . params . id } )
this . listService . get ( list )
. then ( r => {
this . $set ( this , 'list' , r )
if ( r . owner . id === this . user . infos . id ) {
2018-09-17 17:00:35 +00:00
this . userIsAdmin = true
}
2019-03-02 10:25:10 +00:00
// This will trigger the dynamic loading of components once we actually have all the data to pass to them
this . manageTeamsComponent = 'manageteams'
this . manageUsersComponent = 'manageusers'
} )
. catch ( e => {
message . error ( e , this )
} )
} ,
submit ( ) {
this . listService . update ( this . list )
. then ( r => {
// Update the list in the parent
for ( const n in this . $parent . namespaces ) {
let lists = this . $parent . namespaces [ n ] . lists
for ( const l in lists ) {
if ( lists [ l ] . id === r . id ) {
this . $set ( this . $parent . namespaces [ n ] . lists , l , r )
}
}
}
message . success ( { message : 'The list was successfully updated.' } , this )
} )
. catch ( e => {
message . error ( e , this )
} )
} ,
deleteList ( ) {
this . listService . delete ( this . list )
. then ( ( ) => {
message . success ( { message : 'The list was successfully deleted.' } , this )
router . push ( { name : 'home' } )
} )
. catch ( e => {
message . error ( e , this )
} )
} ,
}
}
2018-09-12 06:42:07 +00:00
< / script >