ami/tl-vikunja
1
0
Fork 0
Code Activity

Add week and month view for tasks (#15)

Browse Source
This commit is contained in:
konrad
2018-12-25 22:41:55 +00:00
committed by Gitea
parent e094b654e2
commit d7f7058eef
10 changed files with 1305 additions and 899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/Home.vue
View File

@ -2,35 +2,13 @@
<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="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">
<div class="fancycheckbox">
<input type="checkbox" v-bind:id="l.id" v-bind:checked="l.done" style="display: none;" disabled>
<label v-bind:for="l.id" class="check">
<svg width="18px" height="18px" viewBox="0 0 18 18">
<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
<polyline points="1 9 7 14 15 4"></polyline>
</svg>
</label>
</div>
<span class="tasktext">
{{l.text}}
<i v-if="l.dueDate > 0"> - Due on {{formatUnixDate(l.dueDate)}}</i>
</span>
</label>
</div>
</div>
<TaskOverview :show-all="true"/>
</div>
</template>
<script>
import auth from '../auth'
import router from '../router'
import {HTTP} from '../http-common'
import message from '../message'
export default {
name: "Home",
@ -38,6 +16,7 @@
return {
user: auth.user,
loading: false,
currentDate: new Date(),
tasks: []
}
},
@ -47,48 +26,10 @@
router.push({name: 'login'})
}
},
created() {
if (auth.user.authenticated) {
this.loadPendingTasks()
}
},
methods: {
logout() {
auth.logout()
},
loadPendingTasks() {
const cancel = message.setLoading(this)
HTTP.get(`tasks/all`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
this.tasks = response.data
this.tasks.sort(this.sortyByDeadline)
cancel()
this.loading = false
})
.catch(e => {
cancel()
this.loading = false
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) {
message.error(e, this)
}
},
}
</script>
<style scoped>
h3{
text-align: left;
}
</style>

112
src/components/lists/ShowTasks.vue Normal file
View File

@ -0,0 +1,112 @@
<template>
<div>
<h3 v-if="showAll">Current tasks</h3>
<h3 v-else>Tasks from {{startDate.toLocaleDateString()}} until {{endDate.toLocaleDateString()}}</h3>
<template v-if="!loading && (!hasUndoneTasks || !tasks)">
<h3 class="nothing">Nothing to to - Have a nice day!</h3>
<img src="/images/cool.svg" alt=""/>
</template>
<div class="spinner" :class="{ 'is-loading': loading}"></div>
<div class="tasks" v-if="tasks && tasks.length > 0">
<div @click="gotoList(l.listID)" class="task" v-for="l in tasks" :key="l.id" v-if="!l.done">
<label :for="l.id">
<div class="fancycheckbox">
<input type="checkbox" :id="l.id" :checked="l.done" style="display: none;" disabled>
<label :for="l.id" class="check">
<svg width="18px" height="18px" viewBox="0 0 18 18">
<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
<polyline points="1 9 7 14 15 4"></polyline>
</svg>
</label>
</div>
<span class="tasktext">
{{l.text}}
<i v-if="l.dueDate > 0"> - Due on {{formatUnixDate(l.dueDate)}}</i>
</span>
</label>
</div>
</div>
</div>
</template>
<script>
import router from '../../router'
import {HTTP} from '../../http-common'
import message from '../../message'
export default {
name: "ShowTasks",
data() {
return {
loading: true,
tasks: [],
hasUndoneTasks: false
}
},
props: {
startDate: Date,
endDate: Date,
showAll: Boolean,
},
created() {
this.loadPendingTasks()
},
methods: {
loadPendingTasks() {
const cancel = message.setLoading(this)
let url = `tasks/all/duedate`
if (!this.showAll) {
url += `/` + Math.round(+ this.startDate / 1000) + `/` + Math.round(+ this.endDate / 1000)
}
HTTP.get(url, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
// Filter all done tasks
for (const index in response.data) {
if (response.data[index].done !== true) {
this.hasUndoneTasks = true
}
}
response.data.sort(this.sortyByDeadline)
this.$set(this, 'tasks', response.data)
cancel()
})
.catch(e => {
cancel()
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) {
message.error(e, this)
}
},
}
</script>
<style scoped>
h3{
text-align: left;
}
h3.nothing{
text-align: center;
margin-top: 3em;
}
img{
margin-top: 2em;
}
.spinner.is-loading:after {
margin-left: calc(40% - 1em);
}
</style>

41
src/components/lists/ShowTasksInRange.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div class="content has-text-centered">
<TaskOverview
:start-date="startDate"
:end-date="endDate"
/>
</div>
</template>
<script>
export default {
name: "ShowTasksInRange",
data() {
return {
startDate: new Date(this.$route.params.startDateUnix),
endDate: new Date(this.$route.params.endDateUnix),
}
},
watch: {
// call again the method if the route changes
'$route': 'setDates'
},
created() {
this.setDates();
},
methods: {
setDates() {
switch (this.$route.params.type) {
case 'week':
this.startDate = new Date();
this.endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000);
break;
case 'month':
this.startDate = new Date();
this.endDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1));
break;
}
}
}
}
</script>