From c5d598cac466e527aa9161901fb256933d1c7ed1 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 6 Feb 2022 18:46:53 +0100
Subject: [PATCH] chore: refactor trigger to slot

---
 src/components/date/datepickerWithRange.vue | 32 ++++++++-----------
 src/components/list/partials/filters.vue    | 34 ++++++++++++++++++---
 src/views/tasks/ShowTasks.vue               |  8 ++++-
 3 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue
index b160435f..b9996919 100644
--- a/src/components/date/datepickerWithRange.vue
+++ b/src/components/date/datepickerWithRange.vue
@@ -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;
 	}
diff --git a/src/components/list/partials/filters.vue b/src/components/list/partials/filters.vue
index c216e558..a3dc6f5c 100644
--- a/src/components/list/partials/filters.vue
+++ b/src/components/list/partials/filters.vue
@@ -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) {
 
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index 01db546f..bf621f68 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -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>