chore: refactor trigger to slot

This commit is contained in:
kolaente 2022-02-06 18:46:53 +01:00
parent eeee1c842a
commit c5d598cac4
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
3 changed files with 48 additions and 26 deletions

View file

@ -2,11 +2,7 @@
<div class="datepicker-with-range-container"> <div class="datepicker-with-range-container">
<popup> <popup>
<template #trigger="{toggle}"> <template #trigger="{toggle}">
<slot name="trigger" :toggle="toggle"> <slot name="trigger" :toggle="toggle" :buttonText="buttonText"></slot>
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
{{ buttonText }}
</x-button>
</slot>
</template> </template>
<template #content="{isOpen}"> <template #content="{isOpen}">
<div class="datepicker-with-range" :class="{'is-open': isOpen}"> <div class="datepicker-with-range" :class="{'is-open': isOpen}">
@ -62,7 +58,8 @@
:overflow="true" :overflow="true"
variant="hint-modal" 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> <p>
{{ $t('input.datepickerRange.math.intro') }} {{ $t('input.datepickerRange.math.intro') }}
</p> </p>
@ -74,10 +71,12 @@
</p> </p>
<p> <p>
<i18n-t keypath="input.datepickerRange.math.similar"> <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 Grafana
</a> </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 Elasticsearch
</a> </a>
</i18n-t> </i18n-t>
@ -187,13 +186,6 @@ 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(() => ({
@ -268,7 +260,7 @@ const customRangeActive = computed<Boolean>(() => {
}) })
const buttonText = computed<string>(() => { const buttonText = computed<string>(() => {
if(props.showSelectedOnButton && from.value !== '' && to.value !== '') { if(from.value !== '' && to.value !== '') {
return t('input.datepickerRange.fromto', { return t('input.datepickerRange.fromto', {
from: from.value, from: from.value,
to: to.value, to: to.value,

View file

@ -67,25 +67,49 @@
<div class="field"> <div class="field">
<label class="label">{{ $t('task.attributes.dueDate') }}</label> <label class="label">{{ $t('task.attributes.dueDate') }}</label>
<div class="control"> <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> </div>
<div class="field"> <div class="field">
<label class="label">{{ $t('task.attributes.startDate') }}</label> <label class="label">{{ $t('task.attributes.startDate') }}</label>
<div class="control"> <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> </div>
<div class="field"> <div class="field">
<label class="label">{{ $t('task.attributes.endDate') }}</label> <label class="label">{{ $t('task.attributes.endDate') }}</label>
<div class="control"> <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> </div>
<div class="field"> <div class="field">
<label class="label">{{ $t('task.attributes.reminders') }}</label> <label class="label">{{ $t('task.attributes.reminders') }}</label>
<div class="control"> <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>
</div> </div>

View file

@ -4,7 +4,13 @@
{{ pageTitle }} {{ pageTitle }}
</h3> </h3>
<p v-if="!showAll" class="show-tasks-options"> <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"> <fancycheckbox @change="setShowNulls" class="mr-2">
{{ $t('task.show.noDates') }} {{ $t('task.show.noDates') }}
</fancycheckbox> </fancycheckbox>