feat: add prop to maybe show selected date
This commit is contained in:
parent
60c3bf819b
commit
ac0182cbc2
|
@ -2,8 +2,8 @@
|
||||||
<div class="datepicker-with-range-container">
|
<div class="datepicker-with-range-container">
|
||||||
<popup>
|
<popup>
|
||||||
<template #trigger="{toggle}">
|
<template #trigger="{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>
|
||||||
</template>
|
</template>
|
||||||
<template #content="{isOpen}">
|
<template #content="{isOpen}">
|
||||||
|
@ -185,6 +185,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(() => ({
|
||||||
|
@ -257,6 +264,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>
|
||||||
|
|
|
@ -520,6 +520,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",
|
||||||
|
|
Reference in New Issue