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

Implement EditAccount in Frontend

Browse Source
This commit is contained in:
Jan Bader 2022-02-24 22:12:26 +00:00
parent f51807e459
commit 466df523ab
2 changed files with 49 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/components/Modal.vue
View File

@ -7,7 +7,8 @@ const props = defineProps<{
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'submit'): void (e: 'submit'): void,
(e: 'open'): void,
}>(); }>();
const visible = ref(false); const visible = ref(false);
@ -15,6 +16,7 @@ function closeDialog() {
visible.value = false; visible.value = false;
}; };
function openDialog() { function openDialog() {
emit("open");
visible.value = true; visible.value = true;
}; };
function submitDialog() { function submitDialog() {
@ -24,10 +26,14 @@ function submitDialog() {
</script> </script>
<template> <template>
<button @click="openDialog">
<slot name="placeholder">
<Card> <Card>
<p class="w-24 text-center text-6xl">+</p> <p class="w-24 text-center text-6xl">+</p>
<button class="text-lg" dark @click="openDialog">{{ buttonText }}</button> <span class="text-lg" dark>{{ buttonText }}</span>
</Card> </Card>
</slot>
</button>
<div <div
v-if="visible" v-if="visible"
class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"

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

@ -4,6 +4,7 @@ import Currency from "../components/Currency.vue";
import TransactionRow from "../components/TransactionRow.vue"; import TransactionRow from "../components/TransactionRow.vue";
import TransactionInputRow from "../components/TransactionInputRow.vue"; import TransactionInputRow from "../components/TransactionInputRow.vue";
import { useAccountStore } from "../stores/budget-account"; import { useAccountStore } from "../stores/budget-account";
import Modal from "../components/Modal.vue";
const props = defineProps<{ const props = defineProps<{
budgetid: string budgetid: string
@ -13,10 +14,44 @@ const props = defineProps<{
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);
const accountName = ref("");
const accountOnBudget = ref(true);
function editAccount(e : any) {
accountStore.EditAccount(CurrentAccount.value?.ID ?? "", accountName.value, accountOnBudget.value);
}
function openEditAccount(e : any) {
accountName.value = CurrentAccount.value?.Name ?? "";
accountOnBudget.value = CurrentAccount.value?.OnBudget ?? true;
}
</script> </script>
<template> <template>
<h1>{{ CurrentAccount?.Name }}</h1> <h1 class="inline">{{ CurrentAccount?.Name }}</h1>
<Modal button-text="Edit Account" @open="openEditAccount" @submit="editAccount">
<template v-slot:placeholder>✎</template>
<div class="mt-2 px-7 py-3">
<input
class="border-2"
type="text"
v-model="accountName"
placeholder="Account name"
required
/>
</div>
<div class="mt-2 px-7 py-3">
<input
class="border-2"
type="checkbox"
v-model="accountOnBudget"
required
/>
<label>On Budget</label>
</div>
</Modal>
<p> <p>
Current Balance: Current Balance:
<Currency :value="CurrentAccount?.Balance" /> <Currency :value="CurrentAccount?.Balance" />