From 480a95e096ad38273a85baecc31db54f9a5962b3 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 25 Feb 2022 21:45:58 +0000
Subject: [PATCH] Implement custom date input

---
 web/src/components/DateInput.vue          | 33 +++++++++++++++++++++++
 web/src/components/TransactionEditRow.vue |  3 ++-
 web/src/stores/budget-account.ts          |  3 ++-
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/DateInput.vue

diff --git a/web/src/components/DateInput.vue b/web/src/components/DateInput.vue
new file mode 100644
index 0000000..2b3d3a2
--- /dev/null
+++ b/web/src/components/DateInput.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+const props = defineProps(["modelValue"]);
+const emit = defineEmits(['update:modelValue']);
+
+function dateToYYYYMMDD(d: Date) : string {
+  // alternative implementations in https://stackoverflow.com/q/23593052/1850609
+  //return new Date(d.getTime() - (d.getTimezoneOffset() * 60 * 1000)).toISOString().split('T')[0];
+  return d.toISOString().split('T')[0];
+}
+
+function updateValue(event: Event) {
+  const target = event.target as HTMLInputElement;
+  emit('update:modelValue', target.valueAsDate);
+}
+function selectAll(event: FocusEvent) {
+  // Workaround for Safari bug
+  // http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
+  setTimeout(function () {
+    const target = event.target as HTMLInputElement;
+    target.select()
+  }, 0)
+}
+</script>
+
+<template>
+  <input
+    type="date"
+    ref="input"
+    v-bind:value="dateToYYYYMMDD(modelValue)"
+    @input="updateValue"
+    @focus="selectAll"
+  />
+</template>
\ No newline at end of file
diff --git a/web/src/components/TransactionEditRow.vue b/web/src/components/TransactionEditRow.vue
index b3e6503..7c21714 100644
--- a/web/src/components/TransactionEditRow.vue
+++ b/web/src/components/TransactionEditRow.vue
@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import Autocomplete from './Autocomplete.vue'
 import { useAccountStore } from '../stores/budget-account'
+import DateInput from "./DateInput.vue";
 
 const props = defineProps<{
     transactionid: string
@@ -31,7 +32,7 @@ function saveTransaction(e: MouseEvent) {
 <template>
     <tr>
         <td style="width: 90px;" class="text-sm">
-            <input class="border-b-2 border-black" type="date" v-model="Transaction.Date" />
+            <DateInput class="border-b-2 border-black" v-model="Transaction.Date" />
         </td>
         <td style="max-width: 150px;">
             <Autocomplete v-model:text="Transaction.Payee" v-model:id="Transaction.PayeeID" type="payees" />
diff --git a/web/src/stores/budget-account.ts b/web/src/stores/budget-account.ts
index a58d012..f0405fe 100644
--- a/web/src/stores/budget-account.ts
+++ b/web/src/stores/budget-account.ts
@@ -14,7 +14,7 @@ interface State {
 
 export interface Transaction {
     ID: string,
-    Date: string,
+    Date: Date,
     TransferAccount: string,
     CategoryGroup: string,
     Category: string,
@@ -127,6 +127,7 @@ export const useAccountStore = defineStore("budget/account", {
             const response = await result.json();
             account.Transactions = [];
             for (const transaction of response.Transactions) {
+                transaction.Date = new Date(transaction.Date);
                 this.Transactions.set(transaction.ID, transaction);
                 account.Transactions.push(transaction.ID);
             }