vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: add date math for filters #1342

Merged
konrad merged 88 commits from feature/date-math into main 2022-03-28 17:30:43 +00:00
Conversation 2 Commits 88 Files Changed 18 +48 -26
3 changed files with 48 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c5d598cac4 - Show all commits

32
src/components/date/datepickerWithRange.vue
View File

@ -2,11 +2,7 @@
<div class="datepicker-with-range-container">
<popup>
<template #trigger="{toggle}">
<slot name="trigger" :toggle="toggle">
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
{{ buttonText }}
</x-button>
</slot>
<slot name="trigger" :toggle="toggle" :buttonText="buttonText"></slot>
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:48:51 +00:00
Outdated
Review
Copy Link

Provide buttonText as slot prop aswell

Provide `buttonText` as slot prop aswell
konrad commented 2022-02-06 17:51:12 +00:00
Outdated
Review
Copy Link

Done.

Done.
</template>
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:10:28 +00:00
Outdated
Review
Copy Link

The styles (=props) selected for the button are hightly specific and create an indirect dependency to its indented use case. The latter might change in the future and then we have to remember this dependency. This is why I think it makes sense to remove at least the specific use case of this button. Since we wouldn't use it then at all anymore (since you need to overwrite the default slot) it might make it simpler to only define the slot.

The styles (=props) selected for the button are hightly specific and create an indirect dependency to its indented use case. The latter might change in the future and then we have to remember this dependency. This is why I think it makes sense to remove at least the specific use case of this button. Since we wouldn't use it then at all anymore (since you need to overwrite the default slot) it might make it simpler to only define the slot.
konrad commented 2022-02-06 17:47:10 +00:00
Outdated
Review
Copy Link

Moved everything to a slot.

Moved everything to a slot.
👍 1
<template #content="{isOpen}">
<div class="datepicker-with-range" :class="{'is-open': isOpen}">
@ -62,7 +58,8 @@
:overflow="true"
variant="hint-modal"
>
<card class="has-no-shadow how-it-works-modal" :title="$t('input.datepickerRange.math.title')">
<card class="has-no-shadow how-it-works-modal"
:title="$t('input.datepickerRange.math.title')">
<p>
{{ $t('input.datepickerRange.math.intro') }}
</p>
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:16:24 +00:00
Outdated
Review
Copy Link

The whole explanation card should be its own component.

The whole explanation card should be its own component.
konrad commented 2022-02-06 18:29:32 +00:00
Outdated
Review
Copy Link

Done!

Done!
@ -74,10 +71,12 @@
</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">
<a href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
rel="noreferrer noopener nofollow" target="_blank">
Grafana
dpschen marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:15:42 +00:00
Outdated
Review
Copy Link

I think it's really cool, that we support this, but it would be cool, if we could break this down and explain it in our / simpler terms.

I think it's really cool, that we support this, but it would be cool, if we could break this down and explain it in our / simpler terms.
konrad commented 2022-02-06 17:53:56 +00:00
Outdated
Review
Copy Link

I think I'm already doing that but wanted to highlight for people who know the syntax from Elasticsearch or Grafana they can use it here as well.

Was there anything in the explanation you noticed as not quite understandable?

I think I'm already doing that but wanted to highlight for people who know the syntax from Elasticsearch or Grafana they can use it here as well. Was there anything in the explanation you noticed as not quite understandable?
dpschen commented 2022-02-06 19:19:07 +00:00
Outdated
Review
Copy Link

I didn't even check to be honest.
Was just something I though of while reading this.

I didn't even check to be honest. Was just something I though of while reading this.
👍 1
</a>
<a href="https://www.elastic.co/guide/en/elasticsearch/reference/7.3/common-options.html#date-math" rel="noreferrer noopener nofollow" target="_blank">
<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>
@ -125,7 +124,7 @@
</tr>
</tbody>
</table>
<p>{{ $t('input.datepickerRange.math.someExamples') }}</p>
<table class="table">
<tbody>
@ -187,13 +186,6 @@ 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(() => ({
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:50:28 +00:00
Outdated
Review
Copy Link

We could remove this prop if we would only expose the slot for the trigger.

We could remove this prop if we would only expose the slot for the trigger.
konrad commented 2022-02-06 17:51:26 +00:00
Outdated
Review
Copy Link

Done.

Done.
@ -209,7 +201,7 @@ const flatPickerConfig = computed(() => ({
}))
const showHowItWorks = ref(false)
const exampleDate = format(new Date(), 'yyyy-MM-dd')
const exampleDate = format(new Date(), 'yyyy-MM-dd')
const flatpickrRange = ref('')
@ -268,7 +260,7 @@ const customRangeActive = computed<Boolean>(() => {
})
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 22:00:17 +00:00
Outdated
Review
Copy Link

This style is in the wrong component

This style is in the wrong component
konrad commented 2022-02-06 22:06:24 +00:00
Outdated
Review
Copy Link

Moved it to the helper.

Moved it to the helper.
const buttonText = computed<string>(() => {
if(props.showSelectedOnButton && from.value !== '' && to.value !== '') {
if(from.value !== '' && to.value !== '') {
return t('input.datepickerRange.fromto', {
from: from.value,
to: to.value,
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:27:18 +00:00
Outdated
Review
Copy Link

Not 100% sure but I think unnecesary: Adding the <Boolean> as definition here.
Regardless I think it should be <boolean> (lowercase "b")

Not 100% sure but I think unnecesary: Adding the `<Boolean>` as definition here. Regardless I think it should be `<boolean>` (lowercase "b")
konrad commented 2022-02-06 18:35:37 +00:00
Outdated
Review
Copy Link

Changed.

Changed.
@ -366,9 +358,9 @@ const buttonText = computed<string>(() => {
}
}
.how-it-works-modal{
.how-it-works-modal {
font-size: 1rem;
p {
display: inline-block !important;
}

34
src/components/list/partials/filters.vue
View File

@ -67,25 +67,49 @@
<div class="field">
<label class="label">{{ $t('task.attributes.dueDate') }}</label>
<div class="control">
<datepicker-with-range :show-selected-on-button="true" @dateChanged="setDueDateFilter"/>
<datepicker-with-range @dateChanged="setDueDateFilter">
<template #trigger="{toggle, buttonText}">
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
{{ buttonText }}
</x-button>
</template>
</datepicker-with-range>
</div>
</div>
<div class="field">
<label class="label">{{ $t('task.attributes.startDate') }}</label>
<div class="control">
<datepicker-with-range :show-selected-on-button="true" @dateChanged="setStartDateFilter"/>
<datepicker-with-range @dateChanged="setStartDateFilter">
<template #trigger="{toggle, buttonText}">
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
{{ buttonText }}
</x-button>
</template>
</datepicker-with-range>
</div>
</div>
<div class="field">
<label class="label">{{ $t('task.attributes.endDate') }}</label>
<div class="control">
<datepicker-with-range :show-selected-on-button="true" @dateChanged="setEndDateFilter"/>
<datepicker-with-range @dateChanged="setEndDateFilter">
<template #trigger="{toggle, buttonText}">
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
{{ buttonText }}
</x-button>
</template>
</datepicker-with-range>
</div>
</div>
<div class="field">
<label class="label">{{ $t('task.attributes.reminders') }}</label>
<div class="control">
<datepicker-with-range :show-selected-on-button="true" @dateChanged="setReminderFilter"/>
<datepicker-with-range @dateChanged="setReminderFilter">
<template #trigger="{toggle, buttonText}">
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
{{ buttonText }}
</x-button>
</template>
</datepicker-with-range>
</div>
</div>
@ -308,7 +332,7 @@ export default {
setDateFilter(filterName, {dateFrom, dateTo}) {
dateFrom = parseDateOrString(dateFrom, null)
dateTo = parseDateOrString(dateTo, null)
// Only filter if we have a date
if (dateFrom !== null && dateTo !== null) {

8
src/views/tasks/ShowTasks.vue
View File

@ -4,7 +4,13 @@
{{ pageTitle }}
</h3>
<p v-if="!showAll" class="show-tasks-options">
<datepicker-with-range @dateChanged="setDate"/>
<datepicker-with-range @dateChanged="setDate">
<template #trigger="{toggle, buttonText}">
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
{{ $t('task.show.select') }}
</x-button>
</template>
</datepicker-with-range>
<fancycheckbox @change="setShowNulls" class="mr-2">
{{ $t('task.show.noDates') }}
</fancycheckbox>