From ce2b83a29c2bdad5b8eb586f110115505954394d Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Sat, 8 Sep 2018 23:33:23 +0200
Subject: [PATCH] Added List detail view

---
 src/components/lists/ShowList.vue | 70 +++++++++++++++++++++++++++++++
 src/router/index.js               |  7 ++++
 2 files changed, 77 insertions(+)
 create mode 100644 src/components/lists/ShowList.vue

diff --git a/src/components/lists/ShowList.vue b/src/components/lists/ShowList.vue
new file mode 100644
index 00000000..0da38a76
--- /dev/null
+++ b/src/components/lists/ShowList.vue
@@ -0,0 +1,70 @@
+<template>
+	<div>
+		<div class="full-loader-wrapper" v-if="loading">
+			<div class="half-circle-spinner">
+				<div class="circle circle-1"></div>
+				<div class="circle circle-2"></div>
+			</div>
+		</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>
+		</div>
+	</div>
+</template>
+
+<script>
+    import auth from '../../auth'
+    import router from '../../router'
+    import {HTTP} from '../../http-common'
+    import message from '../../message'
+
+    export default {
+        data() {
+            return {
+                listID: this.$route.params.id,
+				list: {},
+                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.loadList()
+        },
+        watch: {
+            // call again the method if the route changes
+            '$route': 'loadList'
+        },
+        methods: {
+            loadList() {
+                this.loading = true
+
+                HTTP.get(`lists/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+                    .then(response => {
+                        this.loading = false
+                        // This adds a new elemednt "list" to our object which contains all lists
+                        this.$set(this, 'list', response.data)
+                    })
+                    .catch(e => {
+                        this.handleError(e)
+                    })
+            },
+            handleError(e) {
+                this.loading = false
+                message.error(e, this)
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index e291fcda..997781f4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,8 @@ import HomeComponent from '@/components/Home'
 // User Handling
 import LoginComponent from '@/components/user/Login'
 import RegisterComponent from '@/components/user/Register'
+// List Handling
+import ShowListComponent from '@/components/lists/ShowList'
 
 Vue.use(Router)
 
@@ -24,6 +26,11 @@ export default new Router({
       path: '/register',
       name: 'register',
       component: RegisterComponent
+    },
+    {
+      path: '/lists/:id',
+      name: 'showList',
+      component: ShowListComponent
     }
   ]
 })
\ No newline at end of file