2018-09-11 17:46:14 +00:00
< template >
2019-03-02 10:25:10 +00:00
< div class = "loader-container" v -bind : class = "{ 'is-loading': namespaceService.loading}" >
2020-03-22 20:40:13 +00:00
< div class = "notification is-warning" v-if ="namespace.is_archived" >
This namespace is archived .
It is not possible to create new lists or edit it .
< / div >
2018-09-18 06:10:16 +00:00
< div class = "card" >
< header class = "card-header" >
< p class = "card-header-title" >
Edit Namespace
< / p >
< / header >
< div class = "card-content" >
< div class = "content" >
< form @submit.prevent ="submit()" >
< div class = "field" >
< label class = "label" for = "namespacetext" > Namespace Name < / label >
< div class = "control" >
2019-03-02 10:25:10 +00:00
< input v -focus : class = "{ 'disabled': namespaceService.loading}" :disabled ="namespaceService.loading" class = "input" type = "text" id = "namespacetext" placeholder = "The namespace text is here..." v-model ="namespace.name" >
2018-09-18 06:10:16 +00:00
< / div >
2018-09-11 17:46:14 +00:00
< / div >
2018-09-18 06:10:16 +00:00
< div class = "field" >
< label class = "label" for = "namespacedescription" > Description < / label >
< div class = "control" >
2019-03-02 10:25:10 +00:00
< textarea : class = "{ 'disabled': namespaceService.loading}" :disabled ="namespaceService.loading" class = "textarea" placeholder = "The namespaces description goes here..." id = "namespacedescription" v-model ="namespace.description" > < / textarea >
2018-09-18 06:10:16 +00:00
< / div >
< / div >
2020-03-22 20:40:13 +00:00
< div class = "field" >
< label class = "label" for = "isArchivedCheck" > Is Archived < / label >
< div class = "control" >
2020-04-01 20:13:57 +00:00
< fancycheckbox v-model ="namespace.is_archived" v-tooltip="'If a namespace is archived, you cannot create new lists or edit it.'" >
This namespace is archived
< / fancycheckbox >
2020-03-22 20:40:13 +00:00
< / div >
< / div >
2020-03-25 21:27:29 +00:00
< div class = "field" >
< label class = "label" > Color < / label >
< div class = "control" >
< verte
v - model = "namespace.hex_color"
menuPosition = "top"
picker = "square"
model = "hex"
: enableAlpha = "false"
: rgbSliders = "true" / >
< / div >
< / div >
2018-09-18 06:10:16 +00:00
< / form >
< 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': namespaceService.loading}" >
2018-09-18 06:10:16 +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': namespaceService.loading}" >
2018-09-18 06:10:16 +00:00
< span class = "icon is-small" >
< icon icon = "trash-alt" / >
< / span >
< / button >
2018-09-11 17:46:14 +00:00
< / div >
< / div >
2018-09-18 06:10:16 +00:00
< / div >
< / div >
< / div >
2019-03-03 12:50:06 +00:00
< component :is ="manageUsersComponent" :id ="namespace.id" type = "namespace" shareType = "user" :userIsAdmin ="userIsAdmin" > < / component >
< component :is ="manageTeamsComponent" :id ="namespace.id" type = "namespace" shareType = "team" :userIsAdmin ="userIsAdmin" > < / component >
2018-09-12 06:23:52 +00:00
< modal
v - if = "showDeleteModal"
@ close = "showDeleteModal = false"
v - on : submit = "deleteNamespace()" >
< span slot = "header" > Delete the namespace < / span >
< p slot = "text" > Are you sure you want to delete this namespace and all of its contents ?
< br / > This includes lists & tasks and < b > CANNOT BE UNDONE ! < / b > < / p >
< / modal >
2018-09-11 17:46:14 +00:00
< / div >
< / template >
< script >
2020-03-25 21:27:29 +00:00
import verte from 'verte'
import 'verte/dist/verte.css'
2019-03-02 10:25:10 +00:00
import auth from '../../auth'
import router from '../../router'
2019-03-03 12:50:06 +00:00
import manageSharing from '../sharing/userTeam'
2019-03-02 10:25:10 +00:00
import NamespaceService from '../../services/namespace'
import NamespaceModel from '../../models/namespace'
2020-04-01 20:13:57 +00:00
import Fancycheckbox from '../global/fancycheckbox'
2020-03-22 20:40:13 +00:00
2019-03-02 10:25:10 +00:00
export default {
name : "EditNamespace" ,
data ( ) {
return {
namespaceService : NamespaceService ,
2018-09-18 06:10:16 +00:00
userIsAdmin : false ,
2019-03-02 10:25:10 +00:00
manageUsersComponent : '' ,
manageTeamsComponent : '' ,
namespace : NamespaceModel ,
showDeleteModal : false ,
user : auth . user ,
}
} ,
2018-09-18 17:07:09 +00:00
components : {
2020-04-01 20:13:57 +00:00
Fancycheckbox ,
2019-03-03 12:50:06 +00:00
manageSharing ,
2020-03-25 21:27:29 +00:00
verte ,
2018-09-18 17:07:09 +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' } )
}
2018-09-18 17:07:09 +00:00
2019-03-02 10:25:10 +00:00
this . namespace . id = this . $route . params . id
} ,
created ( ) {
this . namespaceService = new NamespaceService ( )
2020-03-21 12:57:42 +00:00
this . namespace = new NamespaceModel ( )
2019-03-02 10:25:10 +00:00
this . loadNamespace ( )
} ,
watch : {
// call again the method if the route changes
'$route' : 'loadNamespace'
} ,
2018-09-11 17:46:14 +00:00
methods : {
2019-03-02 10:25:10 +00:00
loadNamespace ( ) {
let namespace = new NamespaceModel ( { id : this . $route . params . id } )
this . namespaceService . get ( namespace )
. then ( r => {
this . $set ( this , 'namespace' , r )
if ( r . owner . id === this . user . infos . id ) {
2018-09-18 06:10:16 +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
2019-03-03 12:50:06 +00:00
this . manageTeamsComponent = 'manageSharing'
this . manageUsersComponent = 'manageSharing'
2019-03-02 10:25:10 +00:00
} )
. catch ( e => {
2020-01-30 21:47:08 +00:00
this . error ( e , this )
2019-03-02 10:25:10 +00:00
} )
2018-09-11 18:16:08 +00:00
} ,
2019-03-02 10:25:10 +00:00
submit ( ) {
this . namespaceService . update ( this . namespace )
. then ( r => {
// Update the namespace in the parent
for ( const n in this . $parent . namespaces ) {
if ( this . $parent . namespaces [ n ] . id === r . id ) {
r . lists = this . $parent . namespaces [ n ] . lists
this . $set ( this . $parent . namespaces , n , r )
}
}
2020-01-30 21:47:08 +00:00
this . success ( { message : 'The namespace was successfully updated.' } , this )
2019-03-02 10:25:10 +00:00
} )
. catch ( e => {
2020-01-30 21:47:08 +00:00
this . error ( e , this )
2019-03-02 10:25:10 +00:00
} )
} ,
deleteNamespace ( ) {
this . namespaceService . delete ( this . namespace )
. then ( ( ) => {
2020-01-30 21:47:08 +00:00
this . success ( { message : 'The namespace was successfully deleted.' } , this )
2019-03-02 10:25:10 +00:00
router . push ( { name : 'home' } )
} )
. catch ( e => {
2020-01-30 21:47:08 +00:00
this . error ( e , this )
2019-03-02 10:25:10 +00:00
} )
}
2018-09-11 17:46:14 +00:00
}
2018-09-11 18:16:08 +00:00
}
2019-03-02 10:25:10 +00:00
< / script >