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 +21 -2
2 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3a12be505d - Show all commits

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

@ -3,8 +3,8 @@
<popup>
<template #trigger="{toggle}">
<slot name="trigger" :toggle="toggle">
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.
<x-button @click.prevent.stop="toggle()" type="secondary" :shadow="false" class="mb-2">
{{ $t('task.show.select') }}
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
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
{{ buttonText }}
</x-button>
</slot>
</template>
@ -187,6 +187,13 @@ const {t} = useI18n()
const emit = defineEmits(['dateChanged'])
const props = defineProps({
showSelectedOnButton: {
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.
type: Boolean,
default: false,
}
})
// FIXME: This seems to always contain the default value - that breaks the picker
dpschen commented 2022-02-06 13:43:30 +00:00
Outdated
Review
Copy Link

Continuing from #1261 (comment)

With default value you mean the value of store.state.auth.settings.weekStart?

Continuing from https://kolaente.dev/vikunja/frontend/pulls/1261#issuecomment-22675 With default value you mean the value of store.state.auth.settings.weekStart?
konrad commented 2022-02-06 19:14:46 +00:00
Outdated
Review
Copy Link

As said in #1261:

It's not reflected in the flatpicker config (below). That always contains 0 as week start, no matter what is set in store.

As said in #1261: > It's not reflected in the flatpicker config (below). That always contains `0` as week start, no matter what is set in store.
const weekStart = computed<number>(() => store.state.auth.settings.weekStart ?? 0)
const flatPickerConfig = computed(() => ({
@ -259,6 +266,17 @@ function setDateRange(range: string[] | null) {
const customRangeActive = computed<Boolean>(() => {
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.
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>

1
src/i18n/lang/en.json
View File

@ -526,6 +526,7 @@
"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",