chore: refactor trigger to slot
This commit is contained in:
kolaente
parent
eeee1c842a
commit
c5d598cac4
3 changed files with 48 additions and 26 deletions
|
|
@ -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>
|
||||
</template>
|
||||
<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>
|
||||
|
|
@ -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
|
||||
</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>
|
||||
|
|
@ -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(() => ({
|
||||
|
|
@ -268,7 +260,7 @@ const customRangeActive = computed<Boolean>(() => {
|
|||
})
|
||||
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue