forked from vikunja/frontend
Compare commits
40 Commits
main
...
feature/da
Author | SHA1 | Date |
---|---|---|
kolaente | 2e66e83c9c | |
kolaente | f5d08e46af | |
kolaente | 3b73925de5 | |
kolaente | d4f4ebb66b | |
kolaente | ac0182cbc2 | |
kolaente | 60c3bf819b | |
kolaente | 3a54402b95 | |
kolaente | 69b516a3fb | |
kolaente | 2a884dfd45 | |
kolaente | c04530c540 | |
kolaente | fd4eec4769 | |
kolaente | d128c4a71f | |
kolaente | fe85611286 | |
kolaente | 6ed80df297 | |
kolaente | 6a62fdd963 | |
kolaente | fda94799b4 | |
kolaente | 01323a1b45 | |
kolaente | 7dddfea79e | |
kolaente | 1648bcdb70 | |
kolaente | 0710cea9e5 | |
kolaente | 294e89b6f7 | |
kolaente | 75cbc73b33 | |
kolaente | 950fdce111 | |
kolaente | 932f1774ec | |
kolaente | d825960836 | |
kolaente | f691e96e22 | |
kolaente | 0d6ef8f18a | |
kolaente | d6dd1fc0e3 | |
kolaente | 729aa7d4cc | |
kolaente | c24b8af00d | |
kolaente | 8f8d25ece1 | |
kolaente | e93be0d04c | |
kolaente | a5b23a7048 | |
kolaente | 858e7d60a6 | |
kolaente | 12317c56b3 | |
kolaente | 378f782d44 | |
kolaente | b274a796d4 | |
kolaente | 3d1c1e41c7 | |
kolaente | 8115563d67 | |
kolaente | 7408c37dec |
|
@ -86,7 +86,7 @@ describe('Lists', () => {
|
||||||
.should('contain', newListName)
|
.should('contain', newListName)
|
||||||
.should('not.contain', lists[0].title)
|
.should('not.contain', lists[0].title)
|
||||||
cy.visit('/')
|
cy.visit('/')
|
||||||
cy.get('.card-content .tasks')
|
cy.get('.card-content')
|
||||||
.should('contain', newListName)
|
.should('contain', newListName)
|
||||||
.should('not.contain', lists[0].title)
|
.should('not.contain', lists[0].title)
|
||||||
})
|
})
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
export const dateRanges = {
|
||||||
|
// Format:
|
||||||
|
// Key is the title, as a translation string, the first entry of the value array
|
||||||
|
// is the "from" date, the second one is the "to" date.
|
||||||
|
'today': ['now/d', 'now/d+1d'],
|
||||||
|
|
||||||
|
'lastWeek': ['now/w-1w', 'now/w-2w'],
|
||||||
|
'thisWeek': ['now/w', 'now/w+1w'],
|
||||||
|
'restOfThisWeek': ['now', 'now/w+1w'],
|
||||||
|
'nextWeek': ['now/w+1w', 'now/w+2w'],
|
||||||
|
'next7Days': ['now', 'now+7d'],
|
||||||
|
|
||||||
|
'lastMonth': ['now/M-1M', 'now/M-2M'],
|
||||||
|
'thisMonth': ['now/M', 'now/M+1M'],
|
||||||
|
'restOfThisMonth': ['now', 'now/M+1M'],
|
||||||
|
'nextMonth': ['now/M+1M', 'now/M+2M'],
|
||||||
|
'next30Days': ['now', 'now+30d'],
|
||||||
|
|
||||||
|
'thisYear': ['now/y', 'now/y+1y'],
|
||||||
|
'restOfThisYear': ['now', 'now/y+1y'],
|
||||||
|
}
|
|
@ -0,0 +1,374 @@
|
||||||
|
<template>
|
||||||
|
<div class="datepicker-with-range-container">
|
||||||
|
<popup>
|
||||||
|
<template #trigger="{toggle}">
|
||||||
|
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
|
||||||
|
{{ buttonText }}
|
||||||
|
</x-button>
|
||||||
|
</template>
|
||||||
|
<template #content="{isOpen}">
|
||||||
|
<div class="datepicker-with-range" :class="{'is-open': isOpen}">
|
||||||
|
<div class="selections">
|
||||||
|
<button @click="setDateRange(null)" :class="{'is-active': customRangeActive}">
|
||||||
|
{{ $t('misc.custom') }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-for="(value, text) in dateRanges"
|
||||||
|
:key="text"
|
||||||
|
@click="setDateRange(value)"
|
||||||
|
:class="{'is-active': from === value[0] && to === value[1]}">
|
||||||
|
{{ $t(`input.datepickerRange.ranges.${text}`) }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flatpickr-container input-group">
|
||||||
|
<label class="label">
|
||||||
|
{{ $t('input.datepickerRange.from') }}
|
||||||
|
<div class="field has-addons">
|
||||||
|
<div class="control is-fullwidth">
|
||||||
|
<input class="input" type="text" v-model="from" @change="inputChanged"/>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<x-button icon="calendar" variant="secondary" data-toggle/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<label class="label">
|
||||||
|
{{ $t('input.datepickerRange.to') }}
|
||||||
|
<div class="field has-addons">
|
||||||
|
<div class="control is-fullwidth">
|
||||||
|
<input class="input" type="text" v-model="to" @change="inputChanged"/>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<x-button icon="calendar" variant="secondary" data-toggle/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<flat-pickr
|
||||||
|
:config="flatPickerConfig"
|
||||||
|
v-model="flatpickrRange"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
{{ $t('input.datepickerRange.math.canuse') }}
|
||||||
|
<a @click="showHowItWorks = true">{{ $t('input.datepickerRange.math.learnhow') }}</a>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<modal
|
||||||
|
@close="() => showHowItWorks = false"
|
||||||
|
:enabled="showHowItWorks"
|
||||||
|
transition-name="fade"
|
||||||
|
:overflow="true"
|
||||||
|
variant="hint-modal"
|
||||||
|
>
|
||||||
|
<card class="has-no-shadow how-it-works-modal" :title="$t('input.datepickerRange.math.title')">
|
||||||
|
<p>
|
||||||
|
{{ $t('input.datepickerRange.math.intro') }}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<i18n-t keypath="input.datepickerRange.math.expression">
|
||||||
|
<code>now</code>
|
||||||
|
<code>||</code>
|
||||||
|
</i18n-t>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<i18n-t keypath="input.datepickerRange.math.similar">
|
||||||
|
<a href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/" rel="noreferrer noopener nofollow" target="_blank">
|
||||||
|
Grafana
|
||||||
|
</a>
|
||||||
|
<a href="https://www.elastic.co/guide/en/elasticsearch/reference/7.3/common-options.html#date-math" rel="noreferrer noopener nofollow" target="_blank">
|
||||||
|
Elasticsearch
|
||||||
|
</a>
|
||||||
|
</i18n-t>
|
||||||
|
</p>
|
||||||
|
<p>{{ $t('misc.forExample') }}</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>+1d</code>{{ $t('input.datepickerRange.math.add1Day') }}</li>
|
||||||
|
<li><code>-1d</code>{{ $t('input.datepickerRange.math.minus1Day') }}</li>
|
||||||
|
<li><code>/d</code>{{ $t('input.datepickerRange.math.roundDay') }}</li>
|
||||||
|
</ul>
|
||||||
|
<p>{{ $t('input.datepickerRange.math.supportedUnits') }}</p>
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>s</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.seconds') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>m</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.minutes') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>h</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.hours') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>H</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.hours') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>d</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.days') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>w</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.weeks') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>M</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.months') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>y</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.units.years') }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<p>{{ $t('input.datepickerRange.math.someExamples') }}</p>
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>now</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.examples.now') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>now+24h</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.examples.in24h') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>now/d</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.examples.today') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>now/w</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.examples.beginningOfThisWeek') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>now/w+1w</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.examples.endOfThisWeek') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>now+30d</code></td>
|
||||||
|
<td>{{ $t('input.datepickerRange.math.examples.in30Days') }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>{{ exampleDate }}||+1M/d</code></td>
|
||||||
|
<td>
|
||||||
|
<i18n-t keypath="input.datepickerRange.math.examples.datePlusMonth">
|
||||||
|
<code>{{ exampleDate }}</code>
|
||||||
|
</i18n-t>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</card>
|
||||||
|
</modal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</popup>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import flatPickr from 'vue-flatpickr-component'
|
||||||
|
import 'flatpickr/dist/flatpickr.css'
|
||||||
|
import {computed, ref, watch} from 'vue'
|
||||||
|
import {useI18n} from 'vue-i18n'
|
||||||
|
import {store} from '@/store'
|
||||||
|
import {format} from 'date-fns'
|
||||||
|
import Popup from '@/components/misc/popup.vue'
|
||||||
|
|
||||||
|
import {dateRanges} from '@/components/date/dateRanges'
|
||||||
|
|
||||||
|
const {t} = useI18n()
|
||||||
|
|
||||||
|
const emit = defineEmits(['dateChanged'])
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
showSelectedOnButton: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// FIXME: This seems to always contain the default value - that breaks the picker
|
||||||
|
const weekStart = computed<number>(() => store.state.auth.settings.weekStart ?? 0)
|
||||||
|
const flatPickerConfig = computed(() => ({
|
||||||
|
altFormat: t('date.altFormatLong'),
|
||||||
|
altInput: true,
|
||||||
|
dateFormat: 'Y-m-d H:i',
|
||||||
|
enableTime: false,
|
||||||
|
wrap: true,
|
||||||
|
mode: 'range',
|
||||||
|
locale: {
|
||||||
|
firstDayOf7Days: weekStart.value,
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
|
||||||
|
const showHowItWorks = ref<boolean>(false)
|
||||||
|
const exampleDate = format(new Date(), 'yyyy-MM-dd')
|
||||||
|
|
||||||
|
const flatpickrRange = ref<string>('')
|
||||||
|
|
||||||
|
const from = ref<string>('')
|
||||||
|
const to = ref<string>('')
|
||||||
|
|
||||||
|
function emitChanged() {
|
||||||
|
emit('dateChanged', {
|
||||||
|
dateFrom: from.value === '' ? null : from.value,
|
||||||
|
dateTo: to.value === '' ? null : to.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function inputChanged() {
|
||||||
|
flatpickrRange.value = ''
|
||||||
|
emitChanged()
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => flatpickrRange.value,
|
||||||
|
(newVal: string | null) => {
|
||||||
|
if (newVal === null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const [fromDate, toDate] = newVal.split(' to ')
|
||||||
|
|
||||||
|
if (typeof fromDate === 'undefined' || typeof toDate === 'undefined') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
from.value = fromDate
|
||||||
|
to.value = toDate
|
||||||
|
|
||||||
|
emitChanged()
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
function setDateRange(range: string[] | null) {
|
||||||
|
if (range === null) {
|
||||||
|
from.value = ''
|
||||||
|
to.value = ''
|
||||||
|
inputChanged()
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
from.value = range[0]
|
||||||
|
to.value = range[1]
|
||||||
|
|
||||||
|
inputChanged()
|
||||||
|
}
|
||||||
|
|
||||||
|
const customRangeActive = computed<Boolean>(() => {
|
||||||
|
return !Object.values(dateRanges).some(el => from.value === el[0] && to.value === el[1])
|
||||||
|
})
|
||||||
|
|
||||||
|
const buttonText = computed<string>(() => {
|
||||||
|
if(props.showSelectedOnButton && from.value !== '' && to.value !== '') {
|
||||||
|
return t('input.datepickerRange.fromto', {
|
||||||
|
from: from.value,
|
||||||
|
to: to.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return t('task.show.select')
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.datepicker-with-range-container {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
:deep(.popup) {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 1rem;
|
||||||
|
border-radius: $radius;
|
||||||
|
border: 1px solid var(--grey-200);
|
||||||
|
background-color: var(--white);
|
||||||
|
box-shadow: $shadow;
|
||||||
|
|
||||||
|
&.is-open {
|
||||||
|
width: 500px;
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-with-range {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
:deep(.flatpickr-calendar) {
|
||||||
|
margin: 0 auto 8px;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.flatpickr-container {
|
||||||
|
width: 70%;
|
||||||
|
border-left: 1px solid var(--grey-200);
|
||||||
|
padding: 1rem;
|
||||||
|
font-size: .9rem;
|
||||||
|
|
||||||
|
// Flatpickr has no option to use it without an input field so we're hiding it instead
|
||||||
|
:deep(input.form-control.input) {
|
||||||
|
height: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field .control :deep(.button) {
|
||||||
|
border: 1px solid var(--input-border-color);
|
||||||
|
height: 2.25rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid var(--input-hover-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label, .input, :deep(.button) {
|
||||||
|
font-size: .9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.selections {
|
||||||
|
width: 30%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: .5rem;
|
||||||
|
overflow-y: scroll;
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
transition: $transition;
|
||||||
|
font-size: .9rem;
|
||||||
|
color: var(--text);
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover, &.is-active {
|
||||||
|
background-color: var(--grey-100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.how-it-works-modal{
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
p {
|
||||||
|
display: inline-block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -6,7 +6,7 @@
|
||||||
>
|
>
|
||||||
{{ $t('filters.clear') }}
|
{{ $t('filters.clear') }}
|
||||||
</x-button>
|
</x-button>
|
||||||
<popup>
|
<popup :has-overflow="true">
|
||||||
<template #trigger="{toggle}">
|
<template #trigger="{toggle}">
|
||||||
<x-button
|
<x-button
|
||||||
@click.prevent.stop="toggle()"
|
@click.prevent.stop="toggle()"
|
||||||
|
|
|
@ -67,49 +67,25 @@
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label class="label">{{ $t('task.attributes.dueDate') }}</label>
|
<label class="label">{{ $t('task.attributes.dueDate') }}</label>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<flat-pickr
|
<datepicker-with-range :show-selected-on-button="true" @dateChanged="setDueDateFilter"/>
|
||||||
:config="flatPickerConfig"
|
|
||||||
@on-close="setDueDateFilter"
|
|
||||||
class="input"
|
|
||||||
:placeholder="$t('filters.attributes.dueDateRange')"
|
|
||||||
v-model="filters.dueDate"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label class="label">{{ $t('task.attributes.startDate') }}</label>
|
<label class="label">{{ $t('task.attributes.startDate') }}</label>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<flat-pickr
|
<datepicker-with-range :show-selected-on-button="true" @dateChanged="setStartDateFilter"/>
|
||||||
:config="flatPickerConfig"
|
|
||||||
@on-close="setStartDateFilter"
|
|
||||||
class="input"
|
|
||||||
:placeholder="$t('filters.attributes.startDateRange')"
|
|
||||||
v-model="filters.startDate"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label class="label">{{ $t('task.attributes.endDate') }}</label>
|
<label class="label">{{ $t('task.attributes.endDate') }}</label>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<flat-pickr
|
<datepicker-with-range :show-selected-on-button="true" @dateChanged="setEndDateFilter"/>
|
||||||
:config="flatPickerConfig"
|
|
||||||
@on-close="setEndDateFilter"
|
|
||||||
class="input"
|
|
||||||
:placeholder="$t('filters.attributes.endDateRange')"
|
|
||||||
v-model="filters.endDate"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label class="label">{{ $t('task.attributes.reminders') }}</label>
|
<label class="label">{{ $t('task.attributes.reminders') }}</label>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<flat-pickr
|
<datepicker-with-range :show-selected-on-button="true" @dateChanged="setReminderFilter"/>
|
||||||
:config="flatPickerConfig"
|
|
||||||
@on-close="setReminderFilter"
|
|
||||||
class="input"
|
|
||||||
:placeholder="$t('filters.attributes.reminderRange')"
|
|
||||||
v-model="filters.reminders"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -175,15 +151,14 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import DatepickerWithRange from '@/components/date/datepickerWithRange'
|
||||||
import Fancycheckbox from '../../input/fancycheckbox'
|
import Fancycheckbox from '../../input/fancycheckbox'
|
||||||
import flatPickr from 'vue-flatpickr-component'
|
|
||||||
import 'flatpickr/dist/flatpickr.css'
|
|
||||||
|
|
||||||
import {includesById} from '@/helpers/utils'
|
import {includesById} from '@/helpers/utils'
|
||||||
import {formatISO} from 'date-fns'
|
|
||||||
import PrioritySelect from '@/components/tasks/partials/prioritySelect.vue'
|
import PrioritySelect from '@/components/tasks/partials/prioritySelect.vue'
|
||||||
import PercentDoneSelect from '@/components/tasks/partials/percentDoneSelect.vue'
|
import PercentDoneSelect from '@/components/tasks/partials/percentDoneSelect.vue'
|
||||||
import Multiselect from '@/components/input/multiselect.vue'
|
import Multiselect from '@/components/input/multiselect.vue'
|
||||||
|
import {parseDateOrString} from '@/helpers/time/parseDateOrString'
|
||||||
|
|
||||||
import UserService from '@/services/user'
|
import UserService from '@/services/user'
|
||||||
import ListService from '@/services/list'
|
import ListService from '@/services/list'
|
||||||
|
@ -222,15 +197,15 @@ const DEFAULT_FILTERS = {
|
||||||
namespace: '',
|
namespace: '',
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ALPHABETICAL_SORT = 'title'
|
export const ALPHABETICAL_SORT = 'title'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'filters',
|
name: 'filters',
|
||||||
components: {
|
components: {
|
||||||
|
DatepickerWithRange,
|
||||||
EditLabels,
|
EditLabels,
|
||||||
PrioritySelect,
|
PrioritySelect,
|
||||||
Fancycheckbox,
|
Fancycheckbox,
|
||||||
flatPickr,
|
|
||||||
PercentDoneSelect,
|
PercentDoneSelect,
|
||||||
Multiselect,
|
Multiselect,
|
||||||
},
|
},
|
||||||
|
@ -281,7 +256,7 @@ export default {
|
||||||
return this.params?.sort_by?.find(sortBy => sortBy === ALPHABETICAL_SORT) !== undefined
|
return this.params?.sort_by?.find(sortBy => sortBy === ALPHABETICAL_SORT) !== undefined
|
||||||
},
|
},
|
||||||
set(sortAlphabetically) {
|
set(sortAlphabetically) {
|
||||||
this.params.sort_by = sortAlphabetically
|
this.params.sort_by = sortAlphabetically
|
||||||
? [ALPHABETICAL_SORT]
|
? [ALPHABETICAL_SORT]
|
||||||
: getDefaultParams().sort_by
|
: getDefaultParams().sort_by
|
||||||
|
|
||||||
|
@ -291,19 +266,6 @@ export default {
|
||||||
foundLabels() {
|
foundLabels() {
|
||||||
return this.$store.getters['labels/filterLabelsByQuery'](this.labels, this.query)
|
return this.$store.getters['labels/filterLabelsByQuery'](this.labels, this.query)
|
||||||
},
|
},
|
||||||
flatPickerConfig() {
|
|
||||||
return {
|
|
||||||
altFormat: this.$t('date.altFormatLong'),
|
|
||||||
altInput: true,
|
|
||||||
dateFormat: 'Y-m-d H:i',
|
|
||||||
enableTime: true,
|
|
||||||
time_24hr: true,
|
|
||||||
mode: 'range',
|
|
||||||
locale: {
|
|
||||||
firstDayOfWeek: this.$store.state.auth.settings.weekStart,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
change() {
|
change() {
|
||||||
|
@ -343,19 +305,12 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setDateFilter(filterName, variableName = null) {
|
setDateFilter(filterName, {dateFrom, dateTo}) {
|
||||||
if (variableName === null) {
|
dateFrom = parseDateOrString(dateFrom, null)
|
||||||
variableName = filterName
|
dateTo = parseDateOrString(dateTo, null)
|
||||||
}
|
|
||||||
|
|
||||||
// Only filter if we have a start and end due date
|
// Only filter if we have a date
|
||||||
if (this.filters[variableName] !== '') {
|
if (dateFrom !== null && dateTo !== null) {
|
||||||
|
|
||||||
const parts = this.filters[variableName].split(' to ')
|
|
||||||
|
|
||||||
if (parts.length < 2) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if we already have values in params and only update them if we do
|
// Check if we already have values in params and only update them if we do
|
||||||
let foundStart = false
|
let foundStart = false
|
||||||
|
@ -363,23 +318,23 @@ export default {
|
||||||
this.params.filter_by.forEach((f, i) => {
|
this.params.filter_by.forEach((f, i) => {
|
||||||
if (f === filterName && this.params.filter_comparator[i] === 'greater_equals') {
|
if (f === filterName && this.params.filter_comparator[i] === 'greater_equals') {
|
||||||
foundStart = true
|
foundStart = true
|
||||||
this.params.filter_value[i] = formatISO(new Date(parts[0]))
|
this.params.filter_value[i] = dateFrom
|
||||||
}
|
}
|
||||||
if (f === filterName && this.params.filter_comparator[i] === 'less_equals') {
|
if (f === filterName && this.params.filter_comparator[i] === 'less_equals') {
|
||||||
foundEnd = true
|
foundEnd = true
|
||||||
this.params.filter_value[i] = formatISO(new Date(parts[1]))
|
this.params.filter_value[i] = dateTo
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
if (!foundStart) {
|
if (!foundStart) {
|
||||||
this.params.filter_by.push(filterName)
|
this.params.filter_by.push(filterName)
|
||||||
this.params.filter_comparator.push('greater_equals')
|
this.params.filter_comparator.push('greater_equals')
|
||||||
this.params.filter_value.push(formatISO(new Date(parts[0])))
|
this.params.filter_value.push(dateFrom)
|
||||||
}
|
}
|
||||||
if (!foundEnd) {
|
if (!foundEnd) {
|
||||||
this.params.filter_by.push(filterName)
|
this.params.filter_by.push(filterName)
|
||||||
this.params.filter_comparator.push('less_equals')
|
this.params.filter_comparator.push('less_equals')
|
||||||
this.params.filter_value.push(formatISO(new Date(parts[1])))
|
this.params.filter_value.push(dateTo)
|
||||||
}
|
}
|
||||||
this.change()
|
this.change()
|
||||||
return
|
return
|
||||||
|
@ -513,23 +468,23 @@ export default {
|
||||||
this.params.filter_concat = 'or'
|
this.params.filter_concat = 'or'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setDueDateFilter() {
|
|
||||||
this.setDateFilter('due_date', 'dueDate')
|
|
||||||
},
|
|
||||||
setPriority() {
|
setPriority() {
|
||||||
this.setSingleValueFilter('priority', 'priority', 'usePriority')
|
this.setSingleValueFilter('priority', 'priority', 'usePriority')
|
||||||
},
|
},
|
||||||
setStartDateFilter() {
|
|
||||||
this.setDateFilter('start_date', 'startDate')
|
|
||||||
},
|
|
||||||
setEndDateFilter() {
|
|
||||||
this.setDateFilter('end_date', 'endDate')
|
|
||||||
},
|
|
||||||
setPercentDoneFilter() {
|
setPercentDoneFilter() {
|
||||||
this.setSingleValueFilter('percent_done', 'percentDone', 'usePercentDone')
|
this.setSingleValueFilter('percent_done', 'percentDone', 'usePercentDone')
|
||||||
},
|
},
|
||||||
setReminderFilter() {
|
setDueDateFilter(values) {
|
||||||
this.setDateFilter('reminders')
|
this.setDateFilter('due_date', values)
|
||||||
|
},
|
||||||
|
setStartDateFilter(values) {
|
||||||
|
this.setDateFilter('start_date', values)
|
||||||
|
},
|
||||||
|
setEndDateFilter(values) {
|
||||||
|
this.setDateFilter('end_date', values)
|
||||||
|
},
|
||||||
|
setReminderFilter(values) {
|
||||||
|
this.setDateFilter('reminders', values)
|
||||||
},
|
},
|
||||||
clear(kind) {
|
clear(kind) {
|
||||||
this[`found${kind}`] = []
|
this[`found${kind}`] = []
|
||||||
|
@ -618,4 +573,8 @@ export default {
|
||||||
margin-left: .5rem;
|
margin-left: .5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.datepicker-with-range-container .popup {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<slot name="trigger" :isOpen="open" :toggle="toggle"></slot>
|
<slot name="trigger" :isOpen="open" :toggle="toggle"></slot>
|
||||||
<div class="popup" :class="{'is-open': open}" ref="popup">
|
<div class="popup" :class="{'is-open': open, 'has-overflow': props.hasOverflow}" ref="popup">
|
||||||
<slot name="content" :isOpen="open"/>
|
<slot name="content" :isOpen="open"/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -16,6 +16,13 @@ const toggle = () => {
|
||||||
open.value = !open.value
|
open.value = !open.value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
hasOverflow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
function hidePopup(e) {
|
function hidePopup(e) {
|
||||||
if (!open.value) {
|
if (!open.value) {
|
||||||
return
|
return
|
||||||
|
|
|
@ -192,13 +192,10 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Transitions */
|
/* Transitions */
|
||||||
|
|
||||||
.modal-enter,
|
.modal-enter,
|
||||||
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
export function parseDateOrString(rawValue: string, fallback: any) {
|
||||||
|
if (typeof rawValue === 'undefined') {
|
||||||
|
return fallback
|
||||||
|
}
|
||||||
|
|
||||||
|
const d = new Date(rawValue)
|
||||||
|
|
||||||
|
// @ts-ignore if rawValue is an invalid date, isNan will return false.
|
||||||
|
return !isNaN(d)
|
||||||
|
? d
|
||||||
|
: rawValue
|
||||||
|
}
|
|
@ -476,7 +476,8 @@
|
||||||
"showMenu": "Show the menu",
|
"showMenu": "Show the menu",
|
||||||
"hideMenu": "Hide the menu",
|
"hideMenu": "Hide the menu",
|
||||||
"forExample": "For example:",
|
"forExample": "For example:",
|
||||||
"welcomeBack": "Welcome Back!"
|
"welcomeBack": "Welcome Back!",
|
||||||
|
"custom": "Custom"
|
||||||
},
|
},
|
||||||
"input": {
|
"input": {
|
||||||
"resetColor": "Reset Color",
|
"resetColor": "Reset Color",
|
||||||
|
@ -515,6 +516,60 @@
|
||||||
"multiselect": {
|
"multiselect": {
|
||||||
"createPlaceholder": "Create new",
|
"createPlaceholder": "Create new",
|
||||||
"selectPlaceholder": "Click or press enter to select"
|
"selectPlaceholder": "Click or press enter to select"
|
||||||
|
},
|
||||||
|
"datepickerRange": {
|
||||||
|
"to": "To",
|
||||||
|
"from": "From",
|
||||||
|
"fromto": "{from} to {to}",
|
||||||
|
"math": {
|
||||||
|
"canuse": "You can use date math to filter for relative dates.",
|
||||||
|
"learnhow": "Check out how it works",
|
||||||
|
"title": "Date Math",
|
||||||
|
"intro": "Date Math allows you to specifiy relative dates which are resolved on the fly by Vikunja when applying the filter.",
|
||||||
|
"expression": "Each Date Math expression starts with an anchor date, which can either be {0}, or a date string ending with {1}. This anchor date can optionally be followed by one or more maths expressions.",
|
||||||
|
"similar": "These expressions are similar to the ones provided by {0} and {1}.",
|
||||||
|
"add1Day": "Add one day",
|
||||||
|
"minus1Day": "Subtract one day",
|
||||||
|
"roundDay": "Round down to the nearest day",
|
||||||
|
"supportedUnits": "Supported time units are:",
|
||||||
|
"someExamples": "Some examples of time expressions:",
|
||||||
|
"units": {
|
||||||
|
"seconds": "Seconds",
|
||||||
|
"minutes": "Minutes",
|
||||||
|
"hours": "Hours",
|
||||||
|
"days": "Days",
|
||||||
|
"weeks": "Weeks",
|
||||||
|
"months": "Months",
|
||||||
|
"years": "Years"
|
||||||
|
},
|
||||||
|
"examples": {
|
||||||
|
"now": "Right now",
|
||||||
|
"in24h": "In 24h",
|
||||||
|
"today": "Today at 00:00",
|
||||||
|
"beginningOfThisWeek": "The beginning of this week at 00:00",
|
||||||
|
"endOfThisWeek": "The end of this week",
|
||||||
|
"in30Days": "In 30 days",
|
||||||
|
"datePlusMonth": "{0} plus one month at 00:00 of that day"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ranges": {
|
||||||
|
"today": "Today",
|
||||||
|
|
||||||
|
"thisWeek": "This Week",
|
||||||
|
"restOfThisWeek": "The Rest of This Week",
|
||||||
|
"nextWeek": "Next Week",
|
||||||
|
"next7Days": "Next 7 Days",
|
||||||
|
"lastWeek": "Last Week",
|
||||||
|
|
||||||
|
"thisMonth": "This Month",
|
||||||
|
"restOfThisMonth": "The Rest of This Month",
|
||||||
|
"nextMonth": "Next Month",
|
||||||
|
"next30Days": "Next 30 Days",
|
||||||
|
"lastMonth": "Last Month",
|
||||||
|
|
||||||
|
"thisYear": "This Year",
|
||||||
|
"restOfThisYear": "The Rest of This Year"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"task": {
|
"task": {
|
||||||
|
@ -532,12 +587,9 @@
|
||||||
"titleCurrent": "Current Tasks",
|
"titleCurrent": "Current Tasks",
|
||||||
"titleDates": "Tasks from {from} until {to}",
|
"titleDates": "Tasks from {from} until {to}",
|
||||||
"noDates": "Show tasks without dates",
|
"noDates": "Show tasks without dates",
|
||||||
"current": "Current tasks",
|
"overdue": "Show overdue tasks",
|
||||||
"from": "Tasks from",
|
"fromuntil": "Tasks from {from} until {until}",
|
||||||
"until": "until",
|
"select": "Select a date range",
|
||||||
"today": "Today",
|
|
||||||
"nextWeek": "Next Week",
|
|
||||||
"nextMonth": "Next Month",
|
|
||||||
"noTasks": "Nothing to do — Have a nice day!"
|
"noTasks": "Nothing to do — Have a nice day!"
|
||||||
},
|
},
|
||||||
"detail": {
|
"detail": {
|
||||||
|
|
|
@ -65,7 +65,7 @@ h6 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.has-overflow {
|
.has-overflow {
|
||||||
overflow: visible;
|
overflow: visible !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.has-horizontal-overflow {
|
.has-horizontal-overflow {
|
||||||
|
|
|
@ -1,53 +1,35 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="is-max-width-desktop show-tasks">
|
<div class="is-max-width-desktop has-text-left ">
|
||||||
<fancycheckbox
|
<h3 class="mb-2">
|
||||||
@change="setDate"
|
{{ pageTitle }}
|
||||||
class="is-pulled-right"
|
|
||||||
v-if="!showAll"
|
|
||||||
v-model="showNulls"
|
|
||||||
>
|
|
||||||
{{ $t('task.show.noDates') }}
|
|
||||||
</fancycheckbox>
|
|
||||||
<h3 v-if="showAll && tasks.length > 0">
|
|
||||||
{{ $t('task.show.current') }}
|
|
||||||
</h3>
|
</h3>
|
||||||
<h3 v-else-if="!showAll" class="mb-2">
|
<p v-if="!showAll" class="show-tasks-options">
|
||||||
{{ $t('task.show.from') }}
|
<datepicker-with-range @dateChanged="setDate"/>
|
||||||
<flat-pickr
|
<fancycheckbox @change="setShowNulls" class="mr-2">
|
||||||
:class="{ 'disabled': loading}"
|
{{ $t('task.show.noDates') }}
|
||||||
:config="flatPickerConfig"
|
</fancycheckbox>
|
||||||
:disabled="loading"
|
<fancycheckbox @change="setShowOverdue">
|
||||||
@on-close="setDate"
|
{{ $t('task.show.overdue') }}
|
||||||
class="input"
|
</fancycheckbox>
|
||||||
v-model="cStartDate"
|
</p>
|
||||||
/>
|
|
||||||
{{ $t('task.show.until') }}
|
|
||||||
<flat-pickr
|
|
||||||
:class="{ 'disabled': loading}"
|
|
||||||
:config="flatPickerConfig"
|
|
||||||
:disabled="loading"
|
|
||||||
@on-close="setDate"
|
|
||||||
class="input"
|
|
||||||
v-model="cEndDate"
|
|
||||||
/>
|
|
||||||
</h3>
|
|
||||||
<div v-if="!showAll" class="mb-4">
|
|
||||||
<x-button variant="secondary" @click="showTodaysTasks()" class="mr-2">{{ $t('task.show.today') }}</x-button>
|
|
||||||
<x-button variant="secondary" @click="setDatesToNextWeek()" class="mr-2">{{ $t('task.show.nextWeek') }}</x-button>
|
|
||||||
<x-button variant="secondary" @click="setDatesToNextMonth()">{{ $t('task.show.nextMonth') }}</x-button>
|
|
||||||
</div>
|
|
||||||
<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
|
<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
|
||||||
<h3 class="nothing">{{ $t('task.show.noTasks') }}</h3>
|
<h3 class="has-text-centered mt-6">{{ $t('task.show.noTasks') }}</h3>
|
||||||
<LlamaCool class="llama-cool" />
|
<LlamaCool class="llama-cool"/>
|
||||||
</template>
|
</template>
|
||||||
<div :class="{ 'is-loading': loading}" class="spinner"></div>
|
|
||||||
|
|
||||||
<card :padding="false" class="has-overflow" :has-content="false" v-if="tasks && tasks.length > 0">
|
<div v-if="!hasTasks" :class="{ 'is-loading': loading}" class="spinner"></div>
|
||||||
<div class="tasks">
|
<card
|
||||||
|
v-if="hasTasks"
|
||||||
|
:padding="false"
|
||||||
|
class="has-overflow"
|
||||||
|
:has-content="false"
|
||||||
|
:loading="loading"
|
||||||
|
>
|
||||||
|
<div class="p-2">
|
||||||
<single-task-in-list
|
<single-task-in-list
|
||||||
|
v-for="t in tasksSorted"
|
||||||
:key="t.id"
|
:key="t.id"
|
||||||
class="task"
|
class="task"
|
||||||
v-for="t in tasks"
|
|
||||||
:show-list="true"
|
:show-list="true"
|
||||||
:the-task="t"
|
:the-task="t"
|
||||||
@taskUpdated="updateTasks"/>
|
@taskUpdated="updateTasks"/>
|
||||||
|
@ -56,33 +38,28 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import SingleTaskInList from '../../components/tasks/partials/singleTaskInList'
|
import {dateRanges} from '@/components/date/dateRanges'
|
||||||
|
import SingleTaskInList from '@/components/tasks/partials/singleTaskInList'
|
||||||
|
import {parseDateOrString} from '@/helpers/time/parseDateOrString'
|
||||||
import {mapState} from 'vuex'
|
import {mapState} from 'vuex'
|
||||||
|
|
||||||
import flatPickr from 'vue-flatpickr-component'
|
import Fancycheckbox from '@/components/input/fancycheckbox'
|
||||||
import 'flatpickr/dist/flatpickr.css'
|
import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
|
||||||
import Fancycheckbox from '../../components/input/fancycheckbox'
|
|
||||||
import {LOADING, LOADING_MODULE} from '../../store/mutation-types'
|
|
||||||
|
|
||||||
import LlamaCool from '@/assets/llama-cool.svg?component'
|
import LlamaCool from '@/assets/llama-cool.svg?component'
|
||||||
|
import DatepickerWithRange from '@/components/date/datepickerWithRange'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ShowTasks',
|
name: 'ShowTasks',
|
||||||
components: {
|
components: {
|
||||||
|
DatepickerWithRange,
|
||||||
Fancycheckbox,
|
Fancycheckbox,
|
||||||
SingleTaskInList,
|
SingleTaskInList,
|
||||||
flatPickr,
|
|
||||||
LlamaCool,
|
LlamaCool,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tasks: [],
|
tasks: [],
|
||||||
showNulls: true,
|
|
||||||
showOverdue: false,
|
|
||||||
|
|
||||||
cStartDate: null,
|
|
||||||
cEndDate: null,
|
|
||||||
|
|
||||||
showNothingToDo: false,
|
showNothingToDo: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -92,8 +69,6 @@ export default {
|
||||||
showAll: Boolean,
|
showAll: Boolean,
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.cStartDate = this.startDate
|
|
||||||
this.cEndDate = this.endDate
|
|
||||||
this.loadPendingTasks()
|
this.loadPendingTasks()
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -104,25 +79,65 @@ export default {
|
||||||
handler: 'loadPendingTasks',
|
handler: 'loadPendingTasks',
|
||||||
deep: true,
|
deep: true,
|
||||||
},
|
},
|
||||||
startDate(newVal) {
|
|
||||||
this.cStartDate = newVal
|
|
||||||
},
|
|
||||||
endDate(newVal) {
|
|
||||||
this.cEndDate = newVal
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
flatPickerConfig() {
|
dateFrom() {
|
||||||
return {
|
return parseDateOrString(this.$route.query.from, this.startDate)
|
||||||
altFormat: this.$t('date.altFormatLong'),
|
},
|
||||||
altInput: true,
|
dateTo() {
|
||||||
dateFormat: 'Y-m-d H:i',
|
return parseDateOrString(this.$route.query.to, this.endDate)
|
||||||
enableTime: true,
|
},
|
||||||
time_24hr: true,
|
showNulls() {
|
||||||
locale: {
|
return this.$route.query.showNulls === 'true'
|
||||||
firstDayOfWeek: this.$store.state.auth.settings.weekStart,
|
},
|
||||||
},
|
showOverdue() {
|
||||||
|
return this.$route.query.showOverdue === 'true'
|
||||||
|
},
|
||||||
|
pageTitle() {
|
||||||
|
let title = ''
|
||||||
|
|
||||||
|
// We need to define "key" because it is the first parameter in the array and we need the second
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
const predefinedRange = Object.entries(dateRanges).find(([key, value]) => this.dateFrom === value[0] && this.dateTo === value[1])
|
||||||
|
if (typeof predefinedRange !== 'undefined') {
|
||||||
|
title = this.$t(`input.datepickerRange.ranges.${predefinedRange[0]}`)
|
||||||
|
} else {
|
||||||
|
title = this.showAll
|
||||||
|
? this.$t('task.show.titleCurrent')
|
||||||
|
: this.$t('task.show.fromuntil', {
|
||||||
|
from: this.format(this.dateFrom, 'PPP'),
|
||||||
|
until: this.format(this.dateTo, 'PPP'),
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.setTitle(title)
|
||||||
|
|
||||||
|
return title
|
||||||
|
},
|
||||||
|
tasksSorted() {
|
||||||
|
// Sort all tasks to put those with a due date before the ones without a due date, the
|
||||||
|
// soonest before the later ones.
|
||||||
|
// We can't use the api sorting here because that sorts tasks with a due date after
|
||||||
|
// ones without a due date.
|
||||||
|
|
||||||
|
const tasksWithDueDate = [...this.tasks]
|
||||||
|
.filter(t => t.dueDate !== null)
|
||||||
|
.sort((a, b) => {
|
||||||
|
const sortByDueDate = a.dueDate - b.dueDate
|
||||||
|
return sortByDueDate === 0
|
||||||
|
? b.id - a.id
|
||||||
|
: sortByDueDate
|
||||||
|
})
|
||||||
|
const tasksWithoutDueDate = [...this.tasks]
|
||||||
|
.filter(t => t.dueDate === null)
|
||||||
|
|
||||||
|
return [
|
||||||
|
...tasksWithDueDate,
|
||||||
|
...tasksWithoutDueDate,
|
||||||
|
]
|
||||||
|
},
|
||||||
|
hasTasks() {
|
||||||
|
return this.tasks && this.tasks.length > 0
|
||||||
},
|
},
|
||||||
...mapState({
|
...mapState({
|
||||||
userAuthenticated: state => state.auth.authenticated,
|
userAuthenticated: state => state.auth.authenticated,
|
||||||
|
@ -130,17 +145,35 @@ export default {
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
setDate() {
|
setDate({dateFrom, dateTo}) {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
name: this.$route.name,
|
name: this.$route.name,
|
||||||
query: {
|
query: {
|
||||||
from: +new Date(this.cStartDate),
|
from: dateFrom ?? this.dateFrom,
|
||||||
to: +new Date(this.cEndDate),
|
to: dateTo ?? this.dateTo,
|
||||||
showOverdue: this.showOverdue,
|
showOverdue: this.showOverdue,
|
||||||
showNulls: this.showNulls,
|
showNulls: this.showNulls,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
setShowOverdue(show) {
|
||||||
|
this.$router.push({
|
||||||
|
name: this.$route.name,
|
||||||
|
query: {
|
||||||
|
...this.$route.query,
|
||||||
|
showOverdue: show,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setShowNulls(show) {
|
||||||
|
this.$router.push({
|
||||||
|
name: this.$route.name,
|
||||||
|
query: {
|
||||||
|
...this.$route.query,
|
||||||
|
showNulls: show,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
async loadPendingTasks() {
|
async loadPendingTasks() {
|
||||||
// Since this route is authentication only, users would get an error message if they access the page unauthenticated.
|
// Since this route is authentication only, users would get an error message if they access the page unauthenticated.
|
||||||
// Since this component is mounted as the home page before unauthenticated users get redirected
|
// Since this component is mounted as the home page before unauthenticated users get redirected
|
||||||
|
@ -149,26 +182,6 @@ export default {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// Make sure all dates are date objects
|
|
||||||
if (typeof this.$route.query.from !== 'undefined' && typeof this.$route.query.to !== 'undefined') {
|
|
||||||
this.cStartDate = new Date(Number(this.$route.query.from))
|
|
||||||
this.cEndDate = new Date(Number(this.$route.query.to))
|
|
||||||
} else {
|
|
||||||
this.cStartDate = new Date(this.cStartDate)
|
|
||||||
this.cEndDate = new Date(this.cEndDate)
|
|
||||||
}
|
|
||||||
this.showOverdue = this.$route.query.showOverdue
|
|
||||||
this.showNulls = this.$route.query.showNulls
|
|
||||||
|
|
||||||
if (this.showAll) {
|
|
||||||
this.setTitle(this.$t('task.show.titleCurrent'))
|
|
||||||
} else {
|
|
||||||
this.setTitle(this.$t('task.show.titleDates', {
|
|
||||||
from: this.cStartDate.toLocaleDateString(),
|
|
||||||
to: this.cEndDate.toLocaleDateString(),
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
|
|
||||||
const params = {
|
const params = {
|
||||||
sort_by: ['due_date', 'id'],
|
sort_by: ['due_date', 'id'],
|
||||||
order_by: ['desc', 'desc'],
|
order_by: ['desc', 'desc'],
|
||||||
|
@ -178,41 +191,23 @@ export default {
|
||||||
filter_concat: 'and',
|
filter_concat: 'and',
|
||||||
filter_include_nulls: this.showNulls,
|
filter_include_nulls: this.showNulls,
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!this.showAll) {
|
if (!this.showAll) {
|
||||||
if (this.showNulls) {
|
|
||||||
params.filter_by.push('start_date')
|
|
||||||
params.filter_value.push(this.cStartDate)
|
|
||||||
params.filter_comparator.push('greater')
|
|
||||||
|
|
||||||
params.filter_by.push('end_date')
|
|
||||||
params.filter_value.push(this.cEndDate)
|
|
||||||
params.filter_comparator.push('less')
|
|
||||||
}
|
|
||||||
|
|
||||||
params.filter_by.push('due_date')
|
params.filter_by.push('due_date')
|
||||||
params.filter_value.push(this.cEndDate)
|
params.filter_value.push(this.dateTo)
|
||||||
params.filter_comparator.push('less')
|
params.filter_comparator.push('less')
|
||||||
|
|
||||||
|
// NOTE: Ideally we could also show tasks with a start or end date in the specified range, but the api
|
||||||
|
// is not capable (yet) of combining multiple filters with 'and' and 'or'.
|
||||||
|
|
||||||
if (!this.showOverdue) {
|
if (!this.showOverdue) {
|
||||||
params.filter_by.push('due_date')
|
params.filter_by.push('due_date')
|
||||||
params.filter_value.push(this.cStartDate)
|
params.filter_value.push(this.dateFrom)
|
||||||
params.filter_comparator.push('greater')
|
params.filter_comparator.push('greater')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const tasks = await this.$store.dispatch('tasks/loadTasks', params)
|
this.tasks = await this.$store.dispatch('tasks/loadTasks', params)
|
||||||
|
|
||||||
// FIXME: sort tasks in computed
|
|
||||||
// Sort all tasks to put those with a due date before the ones without a due date, the
|
|
||||||
// soonest before the later ones.
|
|
||||||
// We can't use the api sorting here because that sorts tasks with a due date after
|
|
||||||
// ones without a due date.
|
|
||||||
this.tasks = tasks.sort((a, b) => {
|
|
||||||
const sortByDueDate = b.dueDate - a.dueDate
|
|
||||||
return sortByDueDate === 0
|
|
||||||
? b.id - a.id
|
|
||||||
: sortByDueDate
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// FIXME: this modification should happen in the store
|
// FIXME: this modification should happen in the store
|
||||||
|
@ -229,53 +224,22 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
setDatesToNextWeek() {
|
|
||||||
this.cStartDate = new Date()
|
|
||||||
this.cEndDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
|
|
||||||
this.showOverdue = false
|
|
||||||
this.setDate()
|
|
||||||
},
|
|
||||||
|
|
||||||
setDatesToNextMonth() {
|
|
||||||
this.cStartDate = new Date()
|
|
||||||
this.cEndDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1))
|
|
||||||
this.showOverdue = false
|
|
||||||
this.setDate()
|
|
||||||
},
|
|
||||||
|
|
||||||
showTodaysTasks() {
|
|
||||||
const d = new Date()
|
|
||||||
this.cStartDate = new Date()
|
|
||||||
this.cEndDate = new Date(d.setDate(d.getDate() + 1))
|
|
||||||
this.showOverdue = true
|
|
||||||
this.setDate()
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
h3 {
|
.show-tasks-options {
|
||||||
text-align: left;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
&.nothing {
|
> :deep(a) {
|
||||||
text-align: center;
|
margin-right: .5rem;
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.input) {
|
|
||||||
width: 190px;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin: .5rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tasks {
|
|
||||||
padding: .5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.llama-cool {
|
.llama-cool {
|
||||||
margin-top: 2rem;
|
margin: 3rem auto 0;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
Loading…
Reference in New Issue