local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

chore: refactor trigger to slot

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/date/datepickerWithRange.vue
View file

@ -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>
@ -125,7 +124,7 @@
</tr>
</tbody>
</table>
<p>{{ $t('input.datepickerRange.math.someExamples') }}</p>
<table class="table">
<tbody>
@ -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(() => ({
@ -209,7 +201,7 @@ const flatPickerConfig = computed(() => ({
}))
const showHowItWorks = ref(false)
const exampleDate = format(new Date(), 'yyyy-MM-dd')
const exampleDate = format(new Date(), 'yyyy-MM-dd')
const flatpickrRange = ref('')
@ -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,
@ -366,9 +358,9 @@ const buttonText = computed<string>(() => {
}
}
.how-it-works-modal{
.how-it-works-modal {
font-size: 1rem;
p {
display: inline-block !important;
}

34
src/components/list/partials/filters.vue
View file

@ -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>
@ -308,7 +332,7 @@ export default {
setDateFilter(filterName, {dateFrom, dateTo}) {
dateFrom = parseDateOrString(dateFrom, null)
dateTo = parseDateOrString(dateTo, null)
// Only filter if we have a date
if (dateFrom !== null && dateTo !== null) {

8
src/views/tasks/ShowTasks.vue
View file

@ -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>