Add abilty to switch to edit mode

web/src/components/TransactionEditRow.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import Autocomplete, { Suggestion } from './Autocomplete.vue'
+import { Transaction, useAccountStore } from '../stores/budget-account'
+
+const props = defineProps<{
+    transaction: Transaction
+}>()
+
+const TransactionDate = ref(props.transaction.Date.substring(0, 10));
+const Payee = ref<Suggestion | undefined>({ID: "", Name: props.transaction.Payee});
+const Category = ref<Suggestion | undefined>({ID: "", Name: props.transaction.Category});
+const Memo = ref(props.transaction.Memo);
+const Amount = ref(props.transaction.Amount);
+
+const payload = computed(() => JSON.stringify({
+    date: TransactionDate.value,
+    payee: Payee.value,
+    category: Category.value,
+    memo: Memo.value,
+    amount: Amount.value,
+    state: "Uncleared"
+}));
+
+const accountStore = useAccountStore();
+function saveTransaction(e: MouseEvent) {
+    e.preventDefault();
+    console.log(props.transaction);
+    //accountStore.saveTransaction(payload.value);
+}
+</script>
+
+<template>
+    <tr>
+        <td style="width: 90px;" class="text-sm">
+            <input class="border-b-2 border-black" type="date" v-model="TransactionDate" />
+        </td>
+        <td style="max-width: 150px;">
+            <Autocomplete v-model="Payee" type="payees" />
+        </td>
+        <td style="max-width: 200px;">
+            <Autocomplete v-model="Category" type="categories" />
+        </td>
+        <td>
+            <input class="block w-full border-b-2 border-black" type="text" v-model="Memo" />
+        </td>
+        <td style="width: 80px;" class="text-right">
+            <input
+                class="text-right block w-full border-b-2 border-black"
+                type="currency"
+                v-model="Amount"
+            />
+        </td>
+        <td style="width: 20px;">
+            <input type="submit" @click="saveTransaction" value="Save" />
+        </td>
+        <td style="width: 20px;"></td>
+    </tr>
+</template>

web/src/components/TransactionRow.vue

@@ -1,19 +1,22 @@
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useBudgetsStore } from "../stores/budget";
 import { Transaction } from "../stores/budget-account";
 import Currency from "./Currency.vue";
+import TransactionEditRow from "./TransactionEditRow.vue";
 
 const props = defineProps<{
     transaction: Transaction,
     index: number,
 }>();
 
+const edit = ref(false);
+ 
 const CurrentBudgetID = computed(()=> useBudgetsStore().CurrentBudgetID);
 </script>
 
 <template>
-    <tr class="{{transaction.Date.After now ? 'future' : ''}}"
+    <tr v-if="!edit" class="{{new Date(transaction.Date) > new Date() ? 'future' : ''}}"
         :class="[index % 6 < 3 ? 'bg-gray-300' : 'bg-gray-100']">
         <!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
         <td style="width: 90px;">{{ transaction.Date.substring(0, 10) }}</td>
@@ -32,8 +35,9 @@ const CurrentBudgetID = computed(()=> useBudgetsStore().CurrentBudgetID);
         <td style="width: 20px;">
             {{ transaction.Status == "Reconciled" ? "✔" : (transaction.Status == "Uncleared" ? "" : "*") }}
         </td>
-        <td style="width: 20px;">{{ transaction.GroupID ? "☀" : "" }}</td>
+        <td style="width: 20px;" class="text-right">{{ transaction.GroupID ? "☀" : "" }}<a @click="edit = true;">✎</a></td>
     </tr>
+    <TransactionEditRow v-if="edit" :transaction="transaction" />
 </template>
 
 <style>