local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add options to show tasks in range on the overview pages

Browse source
This commit is contained in:
kolaente 2020-07-22 12:29:03 +02:00
parent b86edc8b54
commit 8d18ef1dbb
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 81 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/styles/components/tasks.scss
View file

@ -167,3 +167,28 @@
}
}
}
.show-tasks {
h3 {
text-align: left;
&.nothing {
text-align: center;
margin-top: 3em;
}
.input {
width: 190px;
vertical-align: middle;
margin: .5rem 0;
}
}
img {
margin-top: 2em;
}
.spinner.is-loading:after {
margin-left: calc(40% - 1em);
}
}

81
src/views/tasks/ShowTasks.vue
View file

@ -1,7 +1,26 @@
<template>
<div class="is-max-width-desktop">
<div class="is-max-width-desktop show-tasks">
<h3 v-if="showAll">Current tasks</h3>
<h3 v-else>Tasks from {{startDate.toLocaleDateString()}} until {{endDate.toLocaleDateString()}}</h3>
<h3 v-else>
Tasks from
<flat-pickr
:class="{ 'disabled': taskService.loading}"
class="input"
:disabled="taskService.loading"
v-model="cStartDate"
:config="flatPickerConfig"
@on-close="loadPendingTasks"
/>
until
<flat-pickr
:class="{ 'disabled': taskService.loading}"
class="input"
:disabled="taskService.loading"
v-model="cEndDate"
:config="flatPickerConfig"
@on-close="loadPendingTasks"
/>
</h3>
<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks)">
<h3 class="nothing">Nothing to do - Have a nice day!</h3>
<img src="/images/cool.svg" alt=""/>
@ -20,16 +39,31 @@
import {HAS_TASKS} from '../../store/mutation-types'
import {mapState} from 'vuex'
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
export default {
name: 'ShowTasks',
components: {
SingleTaskInList,
flatPickr,
},
data() {
return {
tasks: [],
hasUndoneTasks: false,
taskService: TaskService,
cStartDate: null,
cEndDate: null,
flatPickerConfig: {
altFormat: 'j M Y H:i',
altInput: true,
dateFormat: 'Y-m-d H:i',
enableTime: true,
time_24hr: true,
},
}
},
props: {
@ -39,10 +73,18 @@
},
created() {
this.taskService = new TaskService()
this.cStartDate = this.startDate
this.cEndDate = this.endDate
this.loadPendingTasks()
},
watch: {
'$route': 'loadPendingTasks',
startDate(newVal) {
this.cStartDate = newVal
},
endDate(newVal) {
this.cEndDate = newVal
},
},
computed: mapState({
userAuthenticated: state => state.auth.authenticated,
@ -56,10 +98,14 @@
return
}
// Make sure all dates are date objects
this.cStartDate = new Date(this.cStartDate)
this.cEndDate = new Date(this.cEndDate)
if (this.showAll) {
this.setTitle('Current Tasks')
} else {
this.setTitle(`Tasks from ${this.startDate.toLocaleDateString()} until ${this.endDate.toLocaleDateString()}`)
this.setTitle(`Tasks from ${this.cStartDate.toLocaleDateString()} until ${this.cEndDate.toLocaleDateString()}`)
}
const params = {
@ -73,16 +119,20 @@
}
if (!this.showAll) {
params.filter_by.push('start_date')
params.filter_value.push(this.startDate)
params.filter_value.push(this.cStartDate)
params.filter_comparator.push('greater')
params.filter_by.push('end_date')
params.filter_value.push(this.endDate)
params.filter_value.push(this.cEndDate)
params.filter_comparator.push('less')
params.filter_by.push('due_date')
params.filter_value.push(this.endDate)
params.filter_value.push(this.cEndDate)
params.filter_comparator.push('less')
params.filter_by.push('due_date')
params.filter_value.push(this.cStartDate)
params.filter_comparator.push('greater')
}
this.taskService.getAll({}, params)
@ -130,22 +180,3 @@
},
}
</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>