From fe85611286eae55fa4eb6e02f766a04acb5143bb Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 9 Jan 2022 13:33:12 +0100
Subject: [PATCH] feat: add two inputs to toggle flatpickr

---
 src/components/date/datepickerWithRange.vue | 48 +++++++++++++++++++--
 src/i18n/lang/en.json                       |  4 ++
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue
index 6a3179a9c..d7c8e1e97 100644
--- a/src/components/date/datepickerWithRange.vue
+++ b/src/components/date/datepickerWithRange.vue
@@ -20,7 +20,29 @@
 							{{ $t('misc.custom') }}
 						</button>
 					</div>
-					<div class="flatpickr-container">
+					<div class="flatpickr-container input-group">
+						<label class="label">
+							{{ $t('input.datepickerRange.from') }}
+							<div class="field has-addons">
+								<div class="control is-fullwidth">
+									<input class="input" type="text"/>
+								</div>
+								<div class="control">
+									<x-button icon="calendar" variant="secondary" data-toggle/>
+								</div>
+							</div>
+						</label>
+						<label class="label">
+							{{ $t('input.datepickerRange.to') }}
+							<div class="field has-addons">
+								<div class="control is-fullwidth">
+									<input class="input" type="text"/>
+								</div>
+								<div class="control">
+									<x-button icon="calendar" variant="secondary" data-toggle/>
+								</div>
+							</div>
+						</label>
 						<flat-pickr
 							:config="flatPickerConfig"
 							v-model="dateRange"
@@ -52,7 +74,7 @@ const flatPickerConfig = computed(() => ({
 	altInput: true,
 	dateFormat: 'Y-m-d H:i',
 	enableTime: false,
-	inline: true,
+	wrap: true,
 	mode: 'range',
 	locale: {
 		firstDayOf7Days: weekStart.value,
@@ -135,9 +157,27 @@ const customRangeActive = computed<Boolean>(() => {
 .flatpickr-container {
 	width: 70%;
 	border-left: 1px solid var(--grey-200);
+	padding: 1rem;
+	font-size: .9rem;
 
-	:deep(input.input) {
-		display: none;
+	// Flatpickr has no option to use it without an input field so we're hiding it instead
+	:deep(input.form-control.input) {
+		height: 0;
+		padding: 0;
+		border: 0;
+	}
+	
+	.field .control :deep(.button) {
+		border: 1px solid var(--input-border-color);
+		height: 2.25rem;
+		
+		&:hover {
+			border: 1px solid var(--input-hover-border-color);
+		}
+	}
+	
+	.label, .input, :deep(.button) {
+		font-size: .9rem;
 	}
 }
 
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index a6c86d728..b0c639ad9 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -516,6 +516,10 @@
     "multiselect": {
       "createPlaceholder": "Create new",
       "selectPlaceholder": "Click or press enter to select"
+    },
+    "datepickerRange": {
+      "to": "To",
+      "from": "From"
     }
   },
   "task": {