From 7408c37dec3c2809a3a58054dd43242409566729 Mon Sep 17 00:00:00 2001 From: kolaente Date: Tue, 28 Dec 2021 23:50:04 +0100 Subject: [PATCH 01/25] chore: cleanup and reorganize the date selection --- src/i18n/lang/en.json | 5 +- src/views/tasks/ShowTasks.vue | 138 ++++++++++++++++++---------------- 2 files changed, 77 insertions(+), 66 deletions(-) diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json index 35dbec8f8..2507ad7a0 100644 --- a/src/i18n/lang/en.json +++ b/src/i18n/lang/en.json @@ -532,9 +532,8 @@ "titleCurrent": "Current Tasks", "titleDates": "Tasks from {from} until {to}", "noDates": "Show tasks without dates", - "current": "Current tasks", - "from": "Tasks from", - "until": "until", + "fromuntil": "Tasks from {from} until {until}", + "select": "Select a range:", "today": "Today", "nextWeek": "Next Week", "nextMonth": "Next Month", diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue index d639d1133..89a7a182a 100644 --- a/src/views/tasks/ShowTasks.vue +++ b/src/views/tasks/ShowTasks.vue @@ -8,37 +8,34 @@ > {{ $t('task.show.noDates') }} -

- {{ $t('task.show.current') }} +

+ {{ pageTitle }}

-

- {{ $t('task.show.from') }} + +

+ {{ $t('task.show.select') }} - {{ $t('task.show.until') }} - -

-
- {{ $t('task.show.today') }} - {{ $t('task.show.nextWeek') }} - {{ $t('task.show.nextMonth') }} +

+
+ + {{ $t('task.show.today') }} + + + {{ $t('task.show.nextWeek') }} + + + {{ $t('task.show.nextMonth') }} +
@@ -56,16 +53,20 @@
+ + diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue index 89a7a182a..6328ab0c6 100644 --- a/src/views/tasks/ShowTasks.vue +++ b/src/views/tasks/ShowTasks.vue @@ -12,7 +12,7 @@ {{ pageTitle }} -

+

{{ $t('task.show.select') }} +

@@ -62,6 +63,7 @@ import Fancycheckbox from '@/components/input/fancycheckbox' import {LOADING, LOADING_MODULE} from '@/store/mutation-types' import LlamaCool from '@/assets/llama-cool.svg?component' +import DatepickerWithRange from '@/components/date/datepickerWithRange' function formatDate(date) { return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}` @@ -70,6 +72,7 @@ function formatDate(date) { export default { name: 'ShowTasks', components: { + DatepickerWithRange, Fancycheckbox, SingleTaskInList, flatPickr, @@ -81,6 +84,7 @@ export default { showNulls: true, showOverdue: false, + // TODO: Set the date range based on the default (to make sure it shows up in the picker) -> maybe also use a computed which depends on dateFrom and dateTo? dateRange: null, showNothingToDo: false, @@ -150,18 +154,12 @@ export default { }), }, methods: { - setDate() { - if (this.dateRange === null) { - return - } - - const [fromDate, toDate] = this.dateRange.split(' to ') - + setDate({dateFrom, dateTo}) { this.$router.push({ name: this.$route.name, query: { - from: +new Date(fromDate), - to: +new Date(toDate), + from: +new Date(dateFrom), + to: +new Date(dateTo), showOverdue: this.showOverdue, showNulls: this.showNulls, }, -- 2.40.1 From 3d1c1e41c7bc71fcef4a6253b429a16a84252a6c Mon Sep 17 00:00:00 2001 From: kolaente Date: Wed, 29 Dec 2021 15:56:50 +0100 Subject: [PATCH 03/25] feat: make active class work --- src/components/date/datepickerWithRange.vue | 60 ++++++++++++++------- src/i18n/lang/en.json | 3 +- 2 files changed, 44 insertions(+), 19 deletions(-) diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue index 1a4063406..98cde3a86 100644 --- a/src/components/date/datepickerWithRange.vue +++ b/src/components/date/datepickerWithRange.vue @@ -1,17 +1,24 @@ @@ -48,12 +55,16 @@ const dateRange = ref('') watch( () => dateRange.value, newVal => { + if (newVal === null) { + return + } + const [fromDate, toDate] = newVal.split(' to ') - + if (typeof fromDate === 'undefined' || typeof toDate === 'undefined') { return } - + emit('dateChanged', { dateFrom: new Date(fromDate), dateTo: new Date(toDate), @@ -65,23 +76,33 @@ function formatDate(date) { return format(date, 'yyyy-MM-dd HH:mm') } -function setDatesToToday() { +const datesToday = computed(() => { const startDate = new Date() const endDate = new Date((new Date()).setDate((new Date()).getDate() + 1)) - dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}` -} + return `${formatDate(startDate)} to ${formatDate(endDate)}` +}) -function setDatesToNextWeek() { +const datesNextWeek = computed(() => { const startDate = new Date() const endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000) - dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}` -} + return `${formatDate(startDate)} to ${formatDate(endDate)}` +}) -function setDatesToNextMonth() { +const datesNextMonth = computed(() => { const startDate = new Date() const endDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1)) - dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}` + return `${formatDate(startDate)} to ${formatDate(endDate)}` +}) + +function setDateRange(range) { + dateRange.value = range } + +const customRangeActive = computed(() => { + return dateRange.value !== datesToday.value && + dateRange.value !== datesNextWeek.value && + dateRange.value !== datesNextMonth.value +}) \ No newline at end of file -- 2.40.1 From 950fdce111332e09e10fcea7be9521ce59469587 Mon Sep 17 00:00:00 2001 From: kolaente Date: Wed, 29 Dec 2021 20:54:01 +0100 Subject: [PATCH 18/25] chore: move datepicker popup to real popup component --- src/components/date/datepickerWithRange.vue | 109 ++++++++++++-------- 1 file changed, 64 insertions(+), 45 deletions(-) diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue index da352a58a..e5ad0c872 100644 --- a/src/components/date/datepickerWithRange.vue +++ b/src/components/date/datepickerWithRange.vue @@ -1,46 +1,54 @@ @@ -51,6 +59,7 @@ 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' const {t} = useI18n() @@ -202,15 +211,25 @@ const customRangeActive = computed(() => { .datepicker-with-range-container { position: relative; z-index: 10; + + :deep(.popup) { + 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 { - border-radius: $radius; - border: 1px solid var(--grey-200); - background-color: var(--white); - box-shadow: $shadow; display: flex; - width: 500px; + width: 100%; + height: 100%; position: absolute; :deep(.flatpickr-calendar) { -- 2.40.1 From 75cbc73b33ed76045ccf5fc3c34c41c04dc9e342 Mon Sep 17 00:00:00 2001 From: kolaente Date: Wed, 29 Dec 2021 20:59:30 +0100 Subject: [PATCH 19/25] fix: loading spinner --- src/views/tasks/ShowTasks.vue | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue index b708fb175..70ca72126 100644 --- a/src/views/tasks/ShowTasks.vue +++ b/src/views/tasks/ShowTasks.vue @@ -16,9 +16,15 @@

{{ $t('task.show.noTasks') }}

- - + +
this.showNothingToDo = true, 100) }, watch: { @@ -122,6 +123,9 @@ export default { : sortByDueDate }) }, + hasTasks() { + return this.tasks && this.tasks.length > 0 + }, ...mapState({ userAuthenticated: state => state.auth.authenticated, loading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks', @@ -175,12 +179,13 @@ export default { filter_include_nulls: this.showNulls, } - // FIXME: Add button to show / hide overdue - if (!this.showAll) { params.filter_by.push('due_date') params.filter_value.push(this.dateTo) 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) { params.filter_by.push('due_date') @@ -214,7 +219,7 @@ export default { .show-tasks-options { display: flex; flex-direction: column; - + > :deep(a) { margin-right: .5rem; } -- 2.40.1 From 294e89b6f749a092e993fe807004c0774f333a46 Mon Sep 17 00:00:00 2001 From: kolaente Date: Wed, 29 Dec 2021 21:12:43 +0100 Subject: [PATCH 20/25] fix: z-index --- src/components/date/datepickerWithRange.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue index e5ad0c872..b5f9c30f8 100644 --- a/src/components/date/datepickerWithRange.vue +++ b/src/components/date/datepickerWithRange.vue @@ -210,9 +210,9 @@ const customRangeActive = computed(() => { \ No newline at end of file + -- 2.40.1 From 23ee374dd803c69c99862398e73c5c7c7b324b67 Mon Sep 17 00:00:00 2001 From: Sergey Shkuratov Date: Sat, 15 Jan 2022 10:05:43 +0200 Subject: [PATCH 25/25] Merge --- src/components/date/datepickerWithRange.vue | 276 ++++++++++++++++++++ 1 file changed, 276 insertions(+) create mode 100644 src/components/date/datepickerWithRange.vue diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue new file mode 100644 index 000000000..5d184f616 --- /dev/null +++ b/src/components/date/datepickerWithRange.vue @@ -0,0 +1,276 @@ + + + + + -- 2.40.1