Added task overview

src/components/Home.vue

@@ -2,18 +2,33 @@
 	<div class="content has-text-centered">
 		<h2>Hi {{user.infos.username}}!</h2>
 		<p>Click on a list or namespace on the left to get started.</p>
+		<p v-if="loading">Loading tasks...</p>
+		<h3 v-if="tasks && tasks.length > 0">Current tasks</h3>
+		<div class="box tasks" v-if="tasks && tasks.length > 0">
+			<div @click="gotoList(l.listID)" class="task" v-for="l in tasks" v-bind:key="l.id" v-if="!l.done">
+				<label v-bind:for="l.id">
+					<input type="checkbox" v-bind:id="l.id" disabled>
+					{{l.text}}
+					<i v-if="l.dueDate > 0"> - Due on {{formatUnixDate(l.dueDate)}}</i>
+				</label>
+			</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: "Home",
         data() {
             return {
-                user: auth.user
+                user: auth.user,
+				loading: false,
+				tasks: []
             }
         },
         beforeMount() {
@@ -22,14 +37,44 @@
                 router.push({name: 'login'})
             }
         },
+		created() {
+			this.loadPendingTasks()
+		},
         methods: {
             logout() {
                 auth.logout()
-            }
+            },
+			loadPendingTasks() {
+				this.loading = true
+				HTTP.get(`tasks`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+					.then(response => {
+						this.tasks = response.data
+						this.tasks.sort(this.sortyByDeadline)
+						this.loading = false
+					})
+					.catch(e => {
+						this.handleError(e)
+					})
+            },
+			formatUnixDate(dateUnix) {
+				return (new Date(dateUnix * 1000)).toLocaleString()
+			},
+			sortyByDeadline(a, b) {
+				return ((a.dueDate > b.dueDate) ? -1 : ((a.dueDate < b.dueDate) ? 1 : 0));
+			},
+			gotoList(lid) {
+				router.push({name: 'showList', params: {id: lid}})
+			},
+			handleError(e) {
+				this.loading = false
+				message.error(e, this)
+			}
         },
     }
 </script>
 
 <style scoped>
-
+h3{
+	text-align: left;
+}
 </style>

src/components/lists/ShowList.vue

@@ -270,47 +270,4 @@
             }
         }
     }
-</script>
+</script>
-
-<style scoped lang="scss">
-	.tasks {
-		margin-top: 1rem;
-		padding: 0;
-
-		.task {
-			display: block;
-			padding: 0.5rem 1rem;
-			border-bottom: 1px solid darken(#fff, 10%);
-
-			label{
-				width: 96%;
-				display: inline-block;
-				cursor: pointer;
-			}
-
-			input[type="checkbox"] {
-				vertical-align: middle;
-			}
-
-			.settings{
-				float: right;
-				width: 4%;
-				cursor: pointer;
-			}
-		}
-
-		.task:last-child {
-			border-bottom: none;
-		}
-	}
-
-	.taskedit{
-		min-height: calc(100% - 1rem);
-		margin-top: 1rem;
-	}
-
-	.settings{
-		float: right;
-		color: rgb(74, 74, 74);
-	}
-</style>

src/vikunja.scss

@@ -149,4 +149,46 @@ h1,h2,h3,h4,h5,h6{
 
 .buttonright {
   margin-right: 0.5rem;
+}
+
+.tasks {
+  margin-top: 1rem;
+  padding: 0;
+  text-align: left;
+
+  .task {
+    display: block;
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid darken(#fff, 10%);
+
+    label{
+      width: 96%;
+      display: inline-block;
+      cursor: pointer;
+    }
+
+    input[type="checkbox"] {
+      vertical-align: middle;
+    }
+
+    .settings{
+      float: right;
+      width: 4%;
+      cursor: pointer;
+    }
+  }
+
+  .task:last-child {
+    border-bottom: none;
+  }
+}
+
+.taskedit{
+  min-height: calc(100% - 1rem);
+  margin-top: 1rem;
+}
+
+.settings{
+  float: right;
+  color: rgb(74, 74, 74);
 }