From 52503a4c92ceee0b8744ec295f4cb7e3c9574243 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Sun, 27 Feb 2022 20:02:57 +0000
Subject: [PATCH] Improve frontend

---
 web/src/pages/Account.vue        | 52 +++++++++++++++++++++++++++-----
 web/src/stores/budget-account.ts | 27 +++++++++++------
 2 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index 16dd609..d0fe2f3 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -13,31 +13,65 @@ defineProps<{
 }>()
 
 const accounts = useAccountStore();
+const TargetReconcilingBalance = ref(0);
+
+function setReconciled(event: Event) {
+    const target = event.target as HTMLInputElement;
+    accounts.SetReconciledForAllTransactions(target.checked);
+}
+
+function cancelReconcilation() {
+    accounts.SetReconciledForAllTransactions(false);
+    accounts.Reconciling = false;
+}
+
+function submitReconcilation() {
+    
+}
+
+function createReconcilationTransaction() {
+
+}
 </script>
 
 <template>
     <h1 class="inline">{{ accounts.CurrentAccount?.Name }}</h1>
-    <EditAccount /> <br />
+    <EditAccount />
+    <br />
 
     <span>
         Current Balance:
         <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
     </span>
-   
+
     <span>
         Cleared Balance:
         <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
     </span>
 
-    <span v-if="accounts.Reconciling">
-        <br />
-        Reconciling
+    <span v-if="accounts.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2">
+        Is <Currency :value="accounts.ReconcilingBalance" /> your current balance? 
+        <Button
+            class="bg-blue-500 mx-3"
+            @click="submitReconcilation">Yes!</Button>
+            <br />
+
+        No, it's: <input class="text-right" type="number" v-model="TargetReconcilingBalance" />
+        Difference: <Currency :value="accounts.ReconcilingBalance - TargetReconcilingBalance" />
+        <Button
+            class="bg-orange-500 mx-3"
+            v-if="Math.abs(accounts.ReconcilingBalance - TargetReconcilingBalance) > 0.01"
+            @click="createReconcilationTransaction"
+        >Create reconciling Transaction</Button>
+        <Button
+            class="bg-red-500 mx-3"
+            @click="cancelReconcilation"
+        >Cancel</Button>
     </span>
     <span v-if="!accounts.Reconciling">
         Reconciled Balance:
         <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
-        <Currency :value="accounts.ReconcilingBalance" />
-        <Button @click="accounts.Reconciling = true" v-if="!accounts.Reconciling">Reconcile</Button>
+        <Button class="bg-blue-500" @click="accounts.Reconciling = true" v-if="!accounts.Reconciling">Reconcile</Button>
     </span>
     <table>
         <tr class="font-bold">
@@ -48,7 +82,9 @@ const accounts = useAccountStore();
             <td class="text-right">Amount</td>
             <td style="width: 20px;"></td>
             <td style="width: 40px;"></td>
-            <td style="width: 20px;" v-if="accounts.Reconciling">R</td>
+            <td style="width: 20px;" v-if="accounts.Reconciling">
+                <input type="checkbox" @input="setReconciled" />
+            </td>
         </tr>
         <TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
         <TransactionRow
diff --git a/web/src/stores/budget-account.ts b/web/src/stores/budget-account.ts
index 40eaa77..f6e6c75 100644
--- a/web/src/stores/budget-account.ts
+++ b/web/src/stores/budget-account.ts
@@ -74,7 +74,7 @@ export const useAccountStore = defineStore("budget/account", {
                 const categoryGroups = [];
                 let prev = undefined;
                 for (const category of categories) {
-                    if(category.Group != prev)
+                    if (category.Group != prev)
                         categoryGroups.push({
                             Name: category.Group,
                             Expand: category.Group != "Hidden Categories",
@@ -85,7 +85,7 @@ export const useAccountStore = defineStore("budget/account", {
             }
         },
         CategoriesForMonthAndGroup(state) {
-            return (year: number, month: number, group : string) => {
+            return (year: number, month: number, group: string) => {
                 const categories = this.AllCategoriesForMonth(year, month);
                 return categories.filter(x => x.Group == group);
             }
@@ -99,7 +99,7 @@ export const useAccountStore = defineStore("budget/account", {
         ReconcilingBalance(state): number {
             let reconciledBalance = this.CurrentAccount!.ReconciledBalance;
             for (const transaction of this.TransactionsList) {
-                if(transaction.Reconciled)
+                if (transaction.Reconciled)
                     reconciledBalance += transaction.Amount;
             }
             return reconciledBalance;
@@ -116,11 +116,11 @@ export const useAccountStore = defineStore("budget/account", {
         OffBudgetAccountsBalance(state): number {
             return this.OffBudgetAccounts.reduce((prev, curr) => prev + Number(curr.ClearedBalance), 0);
         },
-        TransactionsList(state) : Transaction[] {
+        TransactionsList(state): Transaction[] {
             return this.CurrentAccount!.Transactions.map(x => {
                 return this.Transactions.get(x)!
             });
-        }
+        },
     },
     actions: {
         async SetCurrentAccount(budgetid: string, accountid: string) {
@@ -148,12 +148,12 @@ export const useAccountStore = defineStore("budget/account", {
         async FetchMonthBudget(budgetid: string, year: number, month: number) {
             const result = await GET("/budget/" + budgetid + "/" + year + "/" + month);
             const response = await result.json();
-            if(response.Categories == undefined || response.Categories.length <= 0)
+            if (response.Categories == undefined || response.Categories.length <= 0)
                 return;
             this.addCategoriesForMonth(year, month, response.Categories);
         },
-        async EditAccount(accountid : string, name : string, onBudget : boolean) {
-            const result = await POST("/account/" + accountid, JSON.stringify({name: name, onBudget: onBudget}));
+        async EditAccount(accountid: string, name: string, onBudget: boolean) {
+            const result = await POST("/account/" + accountid, JSON.stringify({ name: name, onBudget: onBudget }));
             const response = await result.json();
             useBudgetsStore().MergeBudgetingData(response);
         },
@@ -169,6 +169,15 @@ export const useAccountStore = defineStore("budget/account", {
                 state.Months.set(year, yearMap);
             });
         },
+        SetReconciledForAllTransactions(value: boolean) {
+            for (const transaction of this.TransactionsList) {
+                if (transaction.Status == "Reconciled")
+                    continue;
+
+                transaction.Reconciled = value;
+            }
+
+        },
         logout() {
             this.$reset()
         },
@@ -177,7 +186,7 @@ export const useAccountStore = defineStore("budget/account", {
             const response = await result.json();
             this.CurrentAccount?.Transactions.unshift(response);
         },
-        async editTransaction(transactionid : string, payload: string) {
+        async editTransaction(transactionid: string, payload: string) {
             const result = await POST("/transaction/" + transactionid, payload);
             const response = await result.json();
             this.CurrentAccount?.Transactions.unshift(response);