From 489aa88c4b584153d007c0e2fbf4105a06d3d9a9 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 2 Mar 2022 20:06:06 +0000
Subject: [PATCH 1/4] Add custom checkbox component

---
 web/src/components/Checkbox.vue       | 11 +++++++++++
 web/src/components/TransactionRow.vue |  3 ++-
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/Checkbox.vue

diff --git a/web/src/components/Checkbox.vue b/web/src/components/Checkbox.vue
new file mode 100644
index 0000000..544ec52
--- /dev/null
+++ b/web/src/components/Checkbox.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+const props = defineProps(["modelValue"]);
+</script>
+
+<template>
+    <input 
+        type="checkbox"
+        :checked="modelValue"
+        @change="$emit('update:modelValue', ($event.target as HTMLInputElement)?.checked)"
+        class="dark:bg-slate-900">
+</template>
\ No newline at end of file
diff --git a/web/src/components/TransactionRow.vue b/web/src/components/TransactionRow.vue
index 9472156..0d87765 100644
--- a/web/src/components/TransactionRow.vue
+++ b/web/src/components/TransactionRow.vue
@@ -7,6 +7,7 @@ import TransactionEditRow from "./TransactionEditRow.vue";
 import { formatDate } from "../date";
 import { useAccountStore } from "../stores/budget-account";
 import Input from "./Input.vue";
+import Checkbox from "./Checkbox.vue";
 
 const props = defineProps<{
     transactionid: string,
@@ -70,7 +71,7 @@ function getStatusSymbol() {
             {{ TX.GroupID ? "☀" : "" }}
             {{ getStatusSymbol() }}
             <a @click="edit = true;">✎</a>
-            <Input v-if="Reconciling && TX.Status != 'Reconciled'" type="checkbox" v-model="TX.Reconciled" />
+            <Checkbox v-if="Reconciling && TX.Status != 'Reconciled'" v-model="TX.Reconciled" />
         </td>
     </tr>
     <TransactionEditRow v-if="edit" :transactionid="TX.ID" @save="edit = false" />
-- 
2.47.2


From a73f7c29345e22a603e648185285487b6ba7f2c6 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 2 Mar 2022 20:06:16 +0000
Subject: [PATCH 2/4] Bind to value instead of using v-model

---
 web/src/components/Input.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/Input.vue b/web/src/components/Input.vue
index 47c8871..831cbe1 100644
--- a/web/src/components/Input.vue
+++ b/web/src/components/Input.vue
@@ -4,7 +4,7 @@ const props = defineProps(["modelValue"]);
 
 <template>
     <input 
-        v-model="modelValue"
+        :value="modelValue"
         @input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
         class="dark:bg-slate-900">
 </template>
\ No newline at end of file
-- 
2.47.2


From 1ca95f8768a2eae7d6dc0fd55900386d86160732 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 2 Mar 2022 20:06:33 +0000
Subject: [PATCH 3/4] Remove old logging calls

---
 web/src/pages/BudgetSidebar.vue | 1 -
 web/src/pages/Budgeting.vue     | 1 -
 web/src/stores/transactions.ts  | 1 -
 3 files changed, 3 deletions(-)

diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index db6fd09..69698a5 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -20,7 +20,6 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
 function isRecentlyReconciled(account : Account) {
   const now = new Date().getTime();
   const recently = 7 * 24 * 60 * 60 * 1000;
-  console.log(account.Name, account.LastReconciled, now, recently, new Date(now-recently));
   return new Date(now - recently).getTime() < account.LastReconciled.getTime();
 }
 
diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index 0203b8a..ef235fe 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -57,7 +57,6 @@ onMounted(() => {
 const expandedGroups = ref<Map<string, boolean>>(new Map<string, boolean>())
 
 function toggleGroup(group: { Name: string, Expand: boolean }) {
-    console.log(expandedGroups.value);
     expandedGroups.value.set(group.Name, !(expandedGroups.value.get(group.Name) ?? group.Expand))
 }
 
diff --git a/web/src/stores/transactions.ts b/web/src/stores/transactions.ts
index b1935c0..121cebb 100644
--- a/web/src/stores/transactions.ts
+++ b/web/src/stores/transactions.ts
@@ -84,7 +84,6 @@ export const useTransactionsStore = defineStore("budget/transactions", {
                 this.AddTransactions([recTrans]);
                 account.Transactions.unshift(recTrans.ID);
             }
-            console.log("Reconcile: " + response.message);
         },
         logout() {
             this.$reset()
-- 
2.47.2


From 42dc51fe9a2a473782a7c1f672ed9962bb18c4a8 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 2 Mar 2022 20:33:01 +0000
Subject: [PATCH 4/4] Improve layout of Reconcilation

---
 web/src/pages/Account.vue | 57 ++++++++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 21 deletions(-)

diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index 0762885..d75da82 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -49,41 +49,48 @@ function createReconcilationTransaction() {
         </h1>
 
         <div class="text-right flex flex-wrap flex-col md:flex-row justify-end gap-2 max-w-sm">
-            <span class="border-2 rounded-lg p-1 whitespace-nowrap flex-1">
+            <span class="rounded-lg p-1 whitespace-nowrap flex-1">
                 Working:
                 <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
             </span>
 
-            <span class="border-2 rounded-lg p-1 whitespace-nowrap flex-1">
+            <span class="rounded-lg p-1 whitespace-nowrap flex-1">
                 Cleared:
                 <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
             </span>
 
             <span
-                class="border-2 border-blue-500 rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
+                class="rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
                 v-if="!transactions.Reconciling"
                 @click="transactions.Reconciling = true"
             >
                 Reconciled:
                 <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
             </span>
-        </div>
 
-        <span v-if="transactions.Reconciling" class="border-2 block bg-gray-200 dark:bg-gray-800 rounded-lg p-2">
-            Is
-            <Currency :value="transactions.ReconcilingBalance" />your current balance?
-            <Button class="bg-blue-500 mx-3 py-2" @click="submitReconcilation">Yes!</Button>
-            <br />No, it's:
-            <Input class="text-right" type="number" v-model="TargetReconcilingBalance" />
-            Difference:
-            <Currency :value="transactions.ReconcilingBalance - TargetReconcilingBalance" />
-            <Button
-                class="bg-orange-500 mx-3 py-2"
-                v-if="Math.abs(transactions.ReconcilingBalance - TargetReconcilingBalance) > 0.01"
-                @click="createReconcilationTransaction"
-            >Create reconciling Transaction</Button>
-            <Button class="bg-red-500 mx-3 py-2" @click="cancelReconcilation">Cancel</Button>
-        </span>
+            <span v-if="transactions.Reconciling" class="contents">
+                <Button @click="submitReconcilation"
+                    class="bg-blue-500 p-1 whitespace-nowrap flex-1">
+                    My current balance is&nbsp;
+                    <Currency :value="transactions.ReconcilingBalance" />
+                </Button>
+
+                <Button @click="createReconcilationTransaction"
+                    class="bg-orange-500 p-1 whitespace-nowrap flex-1">
+                    No, it's:
+                    <Input
+                        class="text-right w-20 bg-transparent dark:bg-transparent border-b-2"
+                        type="number"
+                        v-model="TargetReconcilingBalance"
+                    />
+                    (Difference
+                    <Currency
+                        :value="transactions.ReconcilingBalance - TargetReconcilingBalance"
+                    />)
+                </Button>
+                <Button class="bg-red-500 p-1 flex-1" @click="cancelReconcilation">Cancel</Button>
+            </span>
+        </div>
     </div>
 
     <table>
@@ -97,7 +104,11 @@ function createReconcilationTransaction() {
                 <Input v-if="transactions.Reconciling" type="checkbox" @input="setReconciled" />
             </td>
         </tr>
-        <TransactionInputRow class="hidden md:table-row" :budgetid="budgetid" :accountid="accountid" />
+        <TransactionInputRow
+            class="hidden md:table-row"
+            :budgetid="budgetid"
+            :accountid="accountid"
+        />
         <TransactionRow
             v-for="(transaction, index) in transactions.TransactionsList"
             :key="transaction.ID"
@@ -110,7 +121,11 @@ function createReconcilationTransaction() {
             <template v-slot:placeholder>
                 <Button class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2">+</Button>
             </template>
-            <TransactionInputRow class="grid grid-cols-2" :budgetid="budgetid" :accountid="accountid" />
+            <TransactionInputRow
+                class="grid grid-cols-2"
+                :budgetid="budgetid"
+                :accountid="accountid"
+            />
         </Modal>
     </div>
 </template>
-- 
2.47.2