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

Extract component for new Transaction

Browse Source
This commit is contained in:
Jan Bader 2022-02-15 09:02:14 +00:00
parent 953d348bed
commit 73e3b49b40
2 changed files with 61 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,59 @@
<script lang="ts" setup>
import { ref } from "vue";
import { POST } from "../api";
import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
const props = defineProps<{
budgetid: string
accountid: string
}>()
const TransactionDate = ref(new Date().toISOString().substring(0, 10));
const Payee = ref<Suggestion | undefined>(undefined);
const Category = ref<Suggestion | undefined>(undefined);
const Memo = ref("");
const Amount = ref("");
function saveTransaction(e: MouseEvent) {
e.preventDefault();
POST("/transaction/new", JSON.stringify({
budget_id: props.budgetid,
account_id: props.accountid,
date: TransactionDate.value,
payee: Payee.value,
category: Category.value,
memo: Memo.value,
amount: Amount.value,
state: "Uncleared"
}))
.then(x => x.json());
}
</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>

49
web/src/pages/Account.vue
View File

@ -3,7 +3,7 @@ import { computed, ref } from "vue"
import Autocomplete, { Suggestion } from '../components/Autocomplete.vue' import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
import Currency from "../components/Currency.vue"; import Currency from "../components/Currency.vue";
import TransactionRow from "../components/TransactionRow.vue"; import TransactionRow from "../components/TransactionRow.vue";
import { POST } from "../api"; import TransactionInputRow from "../components/TransactionInputRow.vue";
import { useAccountStore } from "../stores/budget-account"; import { useAccountStore } from "../stores/budget-account";
const props = defineProps<{ const props = defineProps<{
@ -11,27 +11,6 @@ const props = defineProps<{
accountid: string accountid: string
}>() }>()
const TransactionDate = ref(new Date().toISOString().substring(0, 10));
const Payee = ref<Suggestion | undefined>(undefined);
const Category = ref<Suggestion | undefined>(undefined);
const Memo = ref("");
const Amount = ref(0);
function saveTransaction(e: MouseEvent) {
e.preventDefault();
POST("/transaction/new", JSON.stringify({
budget_id: props.budgetid,
account_id: props.accountid,
date: TransactionDate.value,
payee: Payee.value,
category: Category.value,
memo: Memo.value,
amount: Amount,
state: "Uncleared"
}))
.then(x => x.json());
}
const accountStore = useAccountStore(); const accountStore = useAccountStore();
const CurrentAccount = computed(() => accountStore.CurrentAccount); const CurrentAccount = computed(() => accountStore.CurrentAccount);
const TransactionsList = computed(() => accountStore.TransactionsList); const TransactionsList = computed(() => accountStore.TransactionsList);
@ -53,31 +32,7 @@ const TransactionsList = computed(() => accountStore.TransactionsList);
<td style="width: 20px;"></td> <td style="width: 20px;"></td>
<td style="width: 20px;"></td> <td style="width: 20px;"></td>
</tr> </tr>
<tr> <TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
<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>
<TransactionRow <TransactionRow
v-for="(transaction, index) in TransactionsList" v-for="(transaction, index) in TransactionsList"
:transaction="transaction" :transaction="transaction"