feat: add prop to maybe show selected date
This commit is contained in:
parent
a74fc47335
commit
3a12be505d
2 changed files with 21 additions and 2 deletions
|
@ -3,8 +3,8 @@
|
||||||
<popup>
|
<popup>
|
||||||
<template #trigger="{toggle}">
|
<template #trigger="{toggle}">
|
||||||
<slot name="trigger" :toggle="toggle">
|
<slot name="trigger" :toggle="toggle">
|
||||||
<x-button @click.prevent.stop="toggle()" type="secondary" :shadow="false" class="mb-2">
|
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
|
||||||
{{ $t('task.show.select') }}
|
{{ buttonText }}
|
||||||
</x-button>
|
</x-button>
|
||||||
</slot>
|
</slot>
|
||||||
</template>
|
</template>
|
||||||
|
@ -187,6 +187,13 @@ const {t} = useI18n()
|
||||||
|
|
||||||
const emit = defineEmits(['dateChanged'])
|
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
|
// FIXME: This seems to always contain the default value - that breaks the picker
|
||||||
const weekStart = computed<number>(() => store.state.auth.settings.weekStart ?? 0)
|
const weekStart = computed<number>(() => store.state.auth.settings.weekStart ?? 0)
|
||||||
const flatPickerConfig = computed(() => ({
|
const flatPickerConfig = computed(() => ({
|
||||||
|
@ -259,6 +266,17 @@ function setDateRange(range: string[] | null) {
|
||||||
const customRangeActive = computed<Boolean>(() => {
|
const customRangeActive = computed<Boolean>(() => {
|
||||||
return !Object.values(dateRanges).some(el => from.value === el[0] && to.value === el[1])
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -526,6 +526,7 @@
|
||||||
"datepickerRange": {
|
"datepickerRange": {
|
||||||
"to": "To",
|
"to": "To",
|
||||||
"from": "From",
|
"from": "From",
|
||||||
|
"fromto": "{from} to {to}",
|
||||||
"math": {
|
"math": {
|
||||||
"canuse": "You can use date math to filter for relative dates.",
|
"canuse": "You can use date math to filter for relative dates.",
|
||||||
"learnhow": "Check out how it works",
|
"learnhow": "Check out how it works",
|
||||||
|
|
Loading…
Reference in a new issue