2018-09-12 06:42:07 +00:00
< template >
2018-11-06 15:53:32 +00:00
< div class = "loader-container" v -bind : class = "{ 'is-loading': 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" >
< input : class = "{ 'disabled': loading}" :disabled ="loading" class = "input" type = "text" id = "listtext" placeholder = "The list title goes here..." v-model ="list.title" >
< / 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" >
< textarea : class = "{ 'disabled': loading}" :disabled ="loading" class = "textarea" placeholder = "The lists description goes here..." id = "listdescription" v-model ="list.description" > < / textarea >
< / 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" >
< button @click ="submit()" class = "button is-success is-fullwidth" : class = "{ 'is-loading': loading}" >
Save
< / button >
< / div >
< div class = "column is-1" >
< button @ click = "showDeleteModal = true" class = "button is-danger is-fullwidth" : class = "{ 'is-loading': loading}" >
< 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 >
2018-09-18 16:49:44 +00:00
< manageusers :id ="list.id" type = "list" :userIsAdmin ="userIsAdmin" / >
2018-09-12 06:42:07 +00:00
2018-09-18 17:01:30 +00:00
< manageteams :id ="list.id" type = "list" :userIsAdmin ="userIsAdmin" / >
2018-09-18 05:38:26 +00:00
2018-09-12 06:42:07 +00:00
< modal
v - if = "showDeleteModal"
@ close = "showDeleteModal = false"
v - on : submit = "deleteList()" >
< 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 >
import auth from '../../auth'
import router from '../../router'
import { HTTP } from '../../http-common'
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'
2018-09-12 06:42:07 +00:00
export default {
name : "EditList" ,
data ( ) {
return {
list : { title : '' , description : '' } ,
error : '' ,
loading : false ,
showDeleteModal : false ,
2018-09-17 17:00:35 +00:00
user : auth . user ,
userIsAdmin : false ,
2018-09-12 06:42:07 +00:00
}
} ,
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
} ,
2018-09-12 06:42:07 +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' } )
}
2018-09-18 16:49:44 +00:00
this . list . id = this . $route . params . id
2018-09-12 06:42:07 +00:00
} ,
created ( ) {
this . loadList ( )
} ,
watch : {
// call again the method if the route changes
'$route' : 'loadList'
} ,
methods : {
loadList ( ) {
2018-11-27 10:23:50 +00:00
const cancel = message . setLoading ( this )
2018-09-12 06:42:07 +00:00
HTTP . get ( ` lists/ ` + this . $route . params . id , { headers : { 'Authorization' : 'Bearer ' + localStorage . getItem ( 'token' ) } } )
. then ( response => {
this . $set ( this , 'list' , response . data )
2018-09-17 17:00:35 +00:00
if ( response . data . owner . id === this . user . infos . id ) {
this . userIsAdmin = true
}
2018-11-27 10:23:50 +00:00
cancel ( )
2018-09-12 06:42:07 +00:00
} )
. catch ( e => {
this . handleError ( e )
} )
} ,
submit ( ) {
2018-11-27 10:23:50 +00:00
const cancel = message . setLoading ( this )
2018-09-12 06:42:07 +00:00
HTTP . post ( ` lists/ ` + this . $route . params . id , this . list , { headers : { 'Authorization' : 'Bearer ' + localStorage . getItem ( 'token' ) } } )
. then ( response => {
// 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 === response . data . id ) {
this . $set ( this . $parent . namespaces [ n ] . lists , l , response . data )
}
}
}
this . handleSuccess ( { message : 'The list was successfully updated.' } )
2018-11-27 10:23:50 +00:00
cancel ( )
2018-09-12 06:42:07 +00:00
} )
. catch ( e => {
2018-11-28 09:11:26 +00:00
cancel ( )
this . handleError ( e )
2018-09-12 06:42:07 +00:00
} )
} ,
deleteList ( ) {
2018-11-27 10:23:50 +00:00
const cancel = message . setLoading ( this )
2018-09-12 06:42:07 +00:00
HTTP . delete ( ` lists/ ` + this . $route . params . id , { headers : { 'Authorization' : 'Bearer ' + localStorage . getItem ( 'token' ) } } )
. then ( ( ) => {
this . handleSuccess ( { message : 'The list was successfully deleted.' } )
2018-11-27 10:23:50 +00:00
cancel ( )
2018-09-12 06:42:07 +00:00
router . push ( { name : 'home' } )
} )
. catch ( e => {
2018-11-28 09:11:26 +00:00
cancel ( )
this . handleError ( e )
2018-09-12 06:42:07 +00:00
} )
} ,
handleError ( e ) {
message . error ( e , this )
} ,
handleSuccess ( e ) {
message . success ( e , this )
}
}
}
< / script >