Merge pull request 'Implement custom checkbox' (#35) from checkbox into master

Reviewed-on: #35

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>

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>

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" />

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>

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();
 }
 

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))
 }
 

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()