jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Add abilty to switch to edit mode

Browse Source
This commit is contained in:
Jan Bader 2022-02-25 20:37:31 +00:00
parent 1e80ba6ca8
commit 97be5abc8c
2 changed files with 67 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
web/src/components/TransactionEditRow.vue Normal file
View File

@ -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>

12
web/src/components/TransactionRow.vue
View File

@ -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>