Added functions to add points to a list

src/App.vue

@@ -138,7 +138,7 @@
     }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 	/* Logout-icon */
 	.logout-icon {
 		padding-right: 2em !important;

src/components/lists/NewList.vue

@@ -51,8 +51,6 @@
 
                 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.'})
                     })

src/components/lists/ShowList.vue

@@ -8,9 +8,32 @@
 		</div>
 		<div class="content">
 			<h1>{{ list.title }}</h1>
-			<ul>
-				<li v-for="l in list.tasks" v-bind:key="l.id">{{l.text}}</li>
-			</ul>
+
+			<form @submit.prevent="addTask()">
+				<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="newTask" type="text" placeholder="Add a new task...">
+						<span class="icon is-small is-left">
+							<icon icon="tasks"/>
+						</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 class="box tasks">
+				<label class="task" v-for="l in list.tasks" v-bind:key="l.id" v-bind:for="l.id">
+					<input type="checkbox" v-bind:id="l.id">
+					{{l.text}}
+				</label>
+			</div>
 		</div>
 	</div>
 </template>
@@ -26,6 +49,7 @@
             return {
                 listID: this.$route.params.id,
                 list: {},
+                newTask: '',
                 error: '',
                 loading: false
             }
@@ -52,19 +76,58 @@
                         this.loading = false
                         // This adds a new elemednt "list" to our object which contains all lists
                         this.$set(this, 'list', response.data)
+                        if (this.list.tasks === null) {
+                            this.list.tasks = []
+                        }
                     })
                     .catch(e => {
                         this.handleError(e)
                     })
             },
+            addTask() {
+                this.loading = true
+
+                HTTP.put(`lists/` + this.$route.params.id, {text: this.newTask}, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+                    .then(response => {
+                        this.list.tasks.push(response.data)
+                        this.handleSuccess({message: 'The task was successfully created.'})
+                    })
+                    .catch(e => {
+                        this.handleError(e)
+                    })
+
+                this.newTask = ''
+            },
             handleError(e) {
                 this.loading = false
                 message.error(e, this)
+            },
+            handleSuccess(e) {
+                this.loading = false
+                message.success(e, this)
             }
         }
     }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+	.tasks {
+		margin-top: 1rem;
+		padding: 0;
 
+		.task {
+			display: block;
+			padding: 0.5rem 1rem;
+			border-bottom: 1px solid darken(#fff, 10%);
+			cursor: pointer;
+
+			input[type="checkbox"] {
+				vertical-align: middle;
+			}
+		}
+
+		.task:last-child {
+			border-bottom: none;
+		}
+	}
 </style>

src/main.js

@@ -16,11 +16,13 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
 import { faListOl } from '@fortawesome/free-solid-svg-icons'
+import { faTasks } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 library.add(faSignOutAlt)
 library.add(faPlus)
 library.add(faListOl)
+library.add(faTasks)
 
 Vue.component('icon', FontAwesomeIcon)