Added method to edit namespace

src/App.vue

@@ -35,6 +35,9 @@
 								<p class="menu-label" v-if="loading">Loading...</p>
 								<template v-for="n in namespaces">
 									<p class="menu-label" :key="n.id">
+										<router-link :to="{name: 'editNamespace', params: {id: n.id} }" class="icon nsettings">
+											<icon icon="cog"/>
+										</router-link>
 										{{n.name}}
 									</p>
 									<router-link :to="{ name: 'newList', params: { id: n.id} }" class="button is-success is-fullwidth button-bottom" :key="n.id + 'newList'">
@@ -169,4 +172,10 @@
 	.button-bottom {
 		margin-bottom: 1rem;
 	}
+
+	/* Namespace settings */
+	.nsettings{
+		vertical-align: middle;
+		float: right;
+	}
 </style>

src/components/namespaces/EditNamespace.vue

@@ -0,0 +1,108 @@
+<template>
+	<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">
+							<input :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="namespacetext" placeholder="The namespace text is here..." v-model="namespace.name">
+						</div>
+					</div>
+					<div class="field">
+						<label class="label" for="namespacedescription">Description</label>
+						<div class="control">
+							<textarea :class="{ 'disabled': loading}" :disabled="loading" class="textarea" placeholder="The namespaces description goes here..." id="namespacedescription" v-model="namespace.description"></textarea>
+						</div>
+					</div>
+
+
+					<button type="submit" class="button is-success is-fullwidth" :class="{ 'is-loading': loading}">
+						Save
+					</button>
+
+				</form>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+    import auth from '../../auth'
+    import router from '../../router'
+    import {HTTP} from '../../http-common'
+    import message from '../../message'
+	
+    export default {
+        name: "EditNamespace",
+        data() {
+            return {
+                namespace: {title: '', description:''},
+                error: '',
+                loading: false,
+            }
+        },
+        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.loadNamespace()
+        },
+        watch: {
+            // call again the method if the route changes
+            '$route': 'loadNamespace'
+        },
+		methods: {
+            loadNamespace() {
+                this.loading = true
+
+                HTTP.get(`namespaces/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+                    .then(response => {
+                        this.$set(this, 'namespace', response.data)
+                        this.loading = false
+                    })
+                    .catch(e => {
+                        this.handleError(e)
+                    })
+            },
+            submit() {
+                this.loading = true
+
+                HTTP.post(`namespaces/` + this.$route.params.id, this.namespace, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+                    .then(response => {
+                        // Update the namespace in the parent
+                        for (const n in this.$parent.namespaces) {
+                            if (this.$parent.namespaces[n].id === response.data.id) {
+                                response.data.lists = this.$parent.namespaces[n].lists
+                                this.$set(this.$parent.namespaces, n, response.data)
+                            }
+                        }
+                        this.handleSuccess({message: 'The namespace was successfully updated.'})
+                    })
+                    .catch(e => {
+                        this.handleError(e)
+                    })
+            },
+            handleError(e) {
+                this.loading = false
+                message.error(e, this)
+            },
+            handleSuccess(e) {
+                this.loading = false
+                message.success(e, this)
+            }
+		}
+    }
+</script>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -10,6 +10,7 @@ import ShowListComponent from '@/components/lists/ShowList'
 import NewListComponent from '@/components/lists/NewList'
 // Namespace Handling
 import NewNamespaceComponent from '@/components/namespaces/NewNamespace'
+import EditNamespaceComponent from '@/components/namespaces/EditNamespace'
 
 Vue.use(Router)
 
@@ -44,6 +45,11 @@ export default new Router({
       path: '/namespaces/new',
       name: 'newNamespace',
       component: NewNamespaceComponent
+    },
+    {
+      path: '/namespaces/:id/edit',
+      name: 'editNamespace',
+      component: EditNamespaceComponent
     }
   ]
 })