vikunja-frontend/src/components/Home.vue

82 lines
2.1 KiB
Vue
Raw Normal View History

2018-09-06 19:46:38 +02:00
<template>
2018-09-09 16:22:02 +02:00
<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>
2018-11-06 15:54:25 +01:00
<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>
2018-09-06 19:46:38 +02:00
</div>
</template>
<script>
import auth from '../auth'
import router from '../router'
2018-11-06 15:54:25 +01:00
import {HTTP} from '../http-common'
import message from '../message'
2018-09-06 19:46:38 +02:00
export default {
name: "Home",
2018-09-09 16:22:02 +02:00
data() {
2018-09-06 19:46:38 +02:00
return {
2018-11-06 15:54:25 +01:00
user: auth.user,
loading: false,
tasks: []
2018-09-06 19:46:38 +02:00
}
2018-09-09 16:22:02 +02:00
},
2018-09-06 19:46:38 +02:00
beforeMount() {
// Check if the user is already logged in, if so, redirect him to the homepage
2018-11-01 22:34:29 +01:00
if (!auth.user.authenticated) {
2018-09-06 19:46:38 +02:00
router.push({name: 'login'})
}
},
2018-11-06 15:54:25 +01:00
created() {
if (auth.user.authenticated) {
this.loadPendingTasks()
}
2018-11-06 15:54:25 +01:00
},
2018-09-06 20:01:03 +02:00
methods: {
2018-09-09 16:22:02 +02:00
logout() {
2018-09-06 20:01:03 +02:00
auth.logout()
2018-11-06 15:54:25 +01:00
},
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)
}
2018-09-06 20:01:03 +02:00
},
2018-09-06 19:46:38 +02:00
}
</script>
<style scoped>
2018-11-06 15:54:25 +01:00
h3{
text-align: left;
}
2018-09-06 19:46:38 +02:00
</style>