Added method to create a new list

src/App.vue

@@ -32,12 +32,6 @@
 									</span>
 									New Namespace
 								</a>
-								<a class="button is-success">
-									<span class="icon is-small">
-										<icon icon="list-ol"/>
-									</span>
-									New List
-								</a>
 							</div>
 							<aside class="menu">
 								<p class="menu-label" v-if="loading">Loading...</p>
@@ -45,6 +39,12 @@
 									<p class="menu-label" :key="n.id">
 										{{n.name}}
 									</p>
+									<router-link :to="{ name: 'newList', params: { id: n.id} }" class="button is-success" :key="n.id + 'newList'">
+										<span class="icon is-small">
+											<icon icon="list-ol"/>
+										</span>
+											New List
+									</router-link>
 									<ul class="menu-list" :key="n.id + 'child'">
 										<li v-for="l in n.lists" :key="l.id">
 											<router-link :to="{ name: 'showList', params: { id: l.id} }">{{l.title}}</router-link>

src/components/lists/NewList.vue

@@ -0,0 +1,77 @@
+<template>
+	<div class="content">
+		<h3>Create a new list</h3>
+		<form @submit.prevent="newList">
+			<div class="field is-grouped">
+				<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': loading}">
+					<input class="input" v-bind:class="{ 'disabled': loading}" v-model="list.title" type="text" placeholder="The list's name goes here...">
+					<span class="icon is-small is-left">
+						<icon icon="list-ol"/>
+					</span>
+				</p>
+				<p class="control">
+					<button type="submit" class="button is-success">
+						<span class="icon is-small">
+							<icon icon="plus"/>
+						</span>
+						Add
+					</button>
+				</p>
+			</div>
+		</form>
+	</div>
+</template>
+
+<script>
+    import auth from '../../auth'
+    import router from '../../router'
+    import {HTTP} from '../../http-common'
+    import message from '../../message'
+
+    export default {
+        name: "NewList",
+        data() {
+            return {
+                list: {title: ''},
+                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'})
+            }
+        },
+        methods: {
+            newList() {
+                this.loading = true
+                // eslint-disable-next-line
+                console.log(this.list)
+
+                HTTP.put(`namespaces/` + this.$route.params.id + `/lists`, this.list, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+                    .then(() => {
+                        this.loading = false
+						//this.$parent.namespaces[this.$route.params.id].lists.push(response.data)
+						this.$parent.loadNamespaces()
+						this.handleSuccess({message: 'The list was successfully created.'})
+                    })
+                    .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/message/index.js

@@ -12,5 +12,20 @@ export default {
             title: 'Error',
             text: err
         })
-    }
+    },
+    success(e, context) {
+        // Build the notification text from error response
+        let err = e.message
+        if (e.response && e.response.data && e.response.data.message) {
+            err += '<br/>' + e.response.data.message
+        }
+
+        // Fire a notification
+        context.$notify({
+            type: 'success',
+            title: 'Success',
+            text: err
+        })
+    },
+
 }

src/router/index.js

@@ -7,6 +7,7 @@ import LoginComponent from '@/components/user/Login'
 import RegisterComponent from '@/components/user/Register'
 // List Handling
 import ShowListComponent from '@/components/lists/ShowList'
+import NewListComponent from '@/components/lists/NewList'
 
 Vue.use(Router)
 
@@ -31,6 +32,11 @@ export default new Router({
       path: '/lists/:id',
       name: 'showList',
       component: ShowListComponent
+    },
+    {
+      path: '/namespaces/:id',
+      name: 'newList',
+      component: NewListComponent
     }
   ]
 })