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

17
src/App.vue
View File

@ -35,6 +35,22 @@
Overview
</router-link>
</li>
<li>
<router-link :to="{ name: 'showTasksInRange', params: {type: 'month'}}">
<span class="icon">
<icon :icon="['far', 'calendar-alt']"/>
</span>
Next Month
</router-link>
</li>
<li>
<router-link :to="{ name: 'showTasksInRange', params: {type: 'week'}}">
<span class="icon">
<icon icon="calendar-week"/>
</span>
Next Week
</router-link>
</li>
<li>
<router-link :to="{ name: 'listTeams'}">
<span class="icon">
@ -115,6 +131,7 @@
namespaces: [],
mobileMenuActive: false,
fullpage: false,
currentDate: new Date(),
}
},
beforeMount() {

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>

9
src/main.js
View File

@ -7,6 +7,11 @@ import auth from './auth'
import Modal from './components/modal/Modal'
Vue.component('modal', Modal)
// Register the task overview component
import TaskOverview from './components/lists/ShowTasks'
Vue.component('TaskOverview', TaskOverview)
// Add CSS
import './vikunja.scss'
Vue.config.productionTip = false
@ -34,7 +39,9 @@ import { faTachometerAlt } from '@fortawesome/free-solid-svg-icons'
import { faCalendar } from '@fortawesome/free-solid-svg-icons'
import { faBars } from '@fortawesome/free-solid-svg-icons'
import { faPowerOff } from '@fortawesome/free-solid-svg-icons'
import { faCalendarWeek } from '@fortawesome/free-solid-svg-icons'
import { faTimesCircle } from '@fortawesome/free-regular-svg-icons'
import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faSignOutAlt)
@ -55,6 +62,8 @@ library.add(faCalendar)
library.add(faTimesCircle)
library.add(faBars)
library.add(faPowerOff)
library.add(faCalendarWeek)
library.add(faCalendarAlt)
Vue.component('icon', FontAwesomeIcon)

6
src/router/index.js
View File

@ -11,6 +11,7 @@ import GetPasswordResetComponent from '@/components/user/RequestPasswordReset'
import ShowListComponent from '@/components/lists/ShowList'
import NewListComponent from '@/components/lists/NewList'
import EditListComponent from '@/components/lists/EditList'
import ShowTasksInRangeComponent from '@/components/lists/ShowTasksInRange'
// Namespace Handling
import NewNamespaceComponent from '@/components/namespaces/NewNamespace'
import EditNamespaceComponent from '@/components/namespaces/EditNamespace'
@ -89,5 +90,10 @@ export default new Router({
name: 'editTeam',
component: EditTeamComponent
},
{
path: '/tasks/:type',
name: 'showTasksInRange',
component: ShowTasksInRangeComponent
},
]
})