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

Migrate Account.vue to composition API
All checks were successful
continuous-integration/drone/push Build is passing
Details
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
Jan Bader 2022-02-14 08:06:16 +00:00
parent a061ffd350
commit ca93e9cd55
1 changed files with 78 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,89 +1,90 @@
<script lang="ts"> <script lang="ts" setup>
import { mapState } from "pinia"; import { ref } from "vue"
import { defineComponent } 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 { useAPI } from "../stores/api"; import { useAPI } from "../stores/api";
import { useAccountStore } from "../stores/budget-account"; import { useAccountStore } from "../stores/budget-account";
import { useSessionStore } from "../stores/session";
export default defineComponent({ const props = defineProps<{
data() { budgetid: string
return { accountid: string
TransactionDate: new Date().toISOString().substring(0, 10), }>()
Payee: undefined as Suggestion | undefined,
Category: undefined as Suggestion | undefined, const TransactionDate = ref(new Date().toISOString().substring(0, 10));
Memo: "", const Payee = ref<Suggestion | undefined>(undefined);
Amount: 0 const Category = ref<Suggestion | undefined>(undefined);
} const Memo = ref("");
}, const Amount = ref(0);
components: { Autocomplete, Currency, TransactionRow },
props: ["budgetid", "accountid"], function saveTransaction(e: MouseEvent) {
computed: { e.preventDefault();
...mapState(useAccountStore, ["CurrentAccount", "TransactionsList"]), const api = useAPI();
}, api.POST("/transaction/new", JSON.stringify({
methods: { budget_id: props.budgetid,
saveTransaction(e : MouseEvent) { account_id: props.accountid,
e.preventDefault(); date: TransactionDate,
const api = useAPI(); payee: Payee,
api.POST("/transaction/new", JSON.stringify({ category: Category,
budget_id: this.budgetid, memo: Memo,
account_id: this.accountid, amount: Amount,
date: this.$data.TransactionDate, state: "Uncleared"
payee: this.$data.Payee, }))
category: this.$data.Category, .then(x => x.json());
memo: this.$data.Memo, }
amount: this.$data.Amount,
state: "Uncleared" const accountStore = useAccountStore();
})) const CurrentAccount = accountStore.CurrentAccount;
.then(x => x.json()); const TransactionsList = accountStore.TransactionsList;
},
}
})
</script> </script>
<template> <template>
<h1>{{ CurrentAccount?.Name }}</h1> <h1>{{ CurrentAccount?.Name }}</h1>
<p> <p>
Current Balance: Current Balance:
<Currency :value="CurrentAccount?.Balance" /> <Currency :value="CurrentAccount?.Balance" />
</p> </p>
<table> <table>
<tr class="font-bold"> <tr class="font-bold">
<td style="width: 90px;">Date</td> <td style="width: 90px;">Date</td>
<td style="max-width: 150px;">Payee</td> <td style="max-width: 150px;">Payee</td>
<td style="max-width: 200px;">Category</td> <td style="max-width: 200px;">Category</td>
<td>Memo</td> <td>Memo</td>
<td class="text-right">Amount</td> <td class="text-right">Amount</td>
<td style="width: 20px;"></td> <td style="width: 20px;"></td>
<td style="width: 20px;"></td> <td style="width: 20px;"></td>
</tr> </tr>
<tr> <tr>
<td style="width: 90px;" class="text-sm"> <td style="width: 90px;" class="text-sm">
<input class="border-b-2 border-black" type="date" v-model="TransactionDate" /> <input class="border-b-2 border-black" type="date" v-model="TransactionDate" />
</td> </td>
<td style="max-width: 150px;"> <td style="max-width: 150px;">
<Autocomplete v-model="Payee" type="payees" /> <Autocomplete v-model="Payee" type="payees" />
</td> </td>
<td style="max-width: 200px;"> <td style="max-width: 200px;">
<Autocomplete v-model="Category" type="categories" /> <Autocomplete v-model="Category" type="categories" />
</td> </td>
<td> <td>
<input class="block w-full border-b-2 border-black" type="text" v-model="Memo" /> <input class="block w-full border-b-2 border-black" type="text" v-model="Memo" />
</td> </td>
<td style="width: 80px;" class="text-right"> <td style="width: 80px;" class="text-right">
<input class="text-right block w-full border-b-2 border-black" type="currency" v-model="Amount" /> <input
</td> class="text-right block w-full border-b-2 border-black"
<td style="width: 20px;"> type="currency"
<input type="submit" @click="saveTransaction" value="Save" /> v-model="Amount"
</td> />
<td style="width: 20px;"></td> </td>
</tr> <td style="width: 20px;">
<TransactionRow v-for="(transaction, index) in TransactionsList" <input type="submit" @click="saveTransaction" value="Save" />
:transaction="transaction" </td>
:index="index" /> <td style="width: 20px;"></td>
</table> </tr>
<TransactionRow
v-for="(transaction, index) in TransactionsList"
:transaction="transaction"
:index="index"
/>
</table>
</template> </template>
<style> <style>