feat: add date math for filters #1342
|
@ -23,7 +23,7 @@
|
||||||
{{ $t('input.datepickerRange.from') }}
|
{{ $t('input.datepickerRange.from') }}
|
||||||
<div class="field has-addons">
|
<div class="field has-addons">
|
||||||
<div class="control is-fullwidth">
|
<div class="control is-fullwidth">
|
||||||
<input class="input" type="text" v-model="from" @change="inputChanged"/>
|
<input class="input" type="text" v-model="from"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<x-button icon="calendar" variant="secondary" data-toggle/>
|
<x-button icon="calendar" variant="secondary" data-toggle/>
|
||||||
|
@ -34,7 +34,7 @@
|
||||||
{{ $t('input.datepickerRange.to') }}
|
{{ $t('input.datepickerRange.to') }}
|
||||||
<div class="field has-addons">
|
<div class="field has-addons">
|
||||||
<div class="control is-fullwidth">
|
<div class="control is-fullwidth">
|
||||||
<input class="input" type="text" v-model="to" @change="inputChanged"/>
|
<input class="input" type="text" v-model="to"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<x-button icon="calendar" variant="secondary" data-toggle/>
|
<x-button icon="calendar" variant="secondary" data-toggle/>
|
||||||
|
@ -48,7 +48,9 @@
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
{{ $t('input.datepickerRange.math.canuse') }}
|
{{ $t('input.datepickerRange.math.canuse') }}
|
||||||
<BaseButton class="has-text-primary" @click="showHowItWorks = true">{{ $t('input.datepickerRange.math.learnhow') }}</BaseButton>
|
<BaseButton class="has-text-primary" @click="showHowItWorks = true">
|
||||||
|
{{ $t('input.datepickerRange.math.learnhow') }}
|
||||||
|
</BaseButton>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
konrad marked this conversation as resolved
|
|||||||
<modal
|
<modal
|
||||||
|
@ -240,12 +242,13 @@ watch(
|
||||||
emitChanged()
|
emitChanged()
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
watch(() => from, inputChanged)
|
||||||
|
watch(() => to, inputChanged)
|
||||||
|
|
||||||
function setDateRange(range: string[] | null) {
|
function setDateRange(range: string[] | null) {
|
||||||
if (range === null) {
|
if (range === null) {
|
||||||
from.value = ''
|
from.value = ''
|
||||||
to.value = ''
|
to.value = ''
|
||||||
inputChanged()
|
|
||||||
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
@ -253,7 +256,6 @@ function setDateRange(range: string[] | null) {
|
||||||
from.value = range[0]
|
from.value = range[0]
|
||||||
to.value = range[1]
|
to.value = range[1]
|
||||||
|
|
||||||
inputChanged()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
This style is in the wrong component This style is in the wrong component
konrad
commented
Moved it to the helper. Moved it to the helper.
|
|||||||
const customRangeActive = computed<Boolean>(() => {
|
const customRangeActive = computed<Boolean>(() => {
|
||||||
|
@ -261,13 +263,13 @@ const customRangeActive = computed<Boolean>(() => {
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonText = computed<string>(() => {
|
const buttonText = computed<string>(() => {
|
||||||
if(from.value !== '' && to.value !== '') {
|
if (from.value !== '' && to.value !== '') {
|
||||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
Not 100% sure but I think unnecesary: Adding the Not 100% sure but I think unnecesary: Adding the `<Boolean>` as definition here.
Regardless I think it should be `<boolean>` (lowercase "b")
konrad
commented
Changed. Changed.
|
|||||||
return t('input.datepickerRange.fromto', {
|
return t('input.datepickerRange.fromto', {
|
||||||
from: from.value,
|
from: from.value,
|
||||||
to: to.value,
|
to: to.value,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
return t('task.show.select')
|
return t('task.show.select')
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
Reference in New Issue
Block a user
Use BaseButton
Done.