Annika/budgit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove now works on transactions

Browse Source
This commit is contained in:
Annika
2022-07-13 15:32:27 -06:00
parent 2ec1291832
commit 775bf23c19
6 changed files with 117 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
budgit.client/src/components/AddTransaction.vue
+48 -28
View File
@@ -1,7 +1,7 @@
<template>
<div class="component flex flex-wrap md:flex-nowrap justify-between bg-stone-800 mb-2">
<form class="component flex flex-wrap md:flex-nowrap justify-between bg-stone-700 mb-2" @submit.prevent="create">
<div class="pr-4">
<input type="date" v-model="transData.date" class="text-slate-50 bg-stone-800 w-32 hover:bg-green-300 hover:text-stone-900">
<input type="date" v-model="transData.date" class="text-slate-50 bg-stone-700 w-32 hover:bg-green-200 hover:text-stone-900">
</div>
<div class="pr-4">
<!-- TODO this is bad! don't manipulate the prop -->
@@ -9,29 +9,29 @@
<!-- use editable object -->
<span class="flex">
$
<input type="number" v-model="transData.amount" :placeholder="transData.amount" class="w-24 bg-stone-800 text-slate-50 hover:bg-green-300 hover:text-stone-900">
<input type="number" v-model="transData.amount" placeholder="Amount" class="w-24 bg-stone-700 text-slate-50 hover:bg-green-200 hover:text-stone-900">
</span>
</div>
<div class="pr-4">
<input type="text" v-model="transData.payee" :placeholder="transData.payee" class="text-slate-50 bg-stone-800 w-32 hover:bg-green-300 hover:text-stone-900">
<input type="text" v-model="transData.payee" placeholder="Payee" class="text-slate-50 bg-stone-700 w-32 hover:bg-green-200 hover:text-stone-900">
</div>
<div class="pr-4">
<select v-model="transData.categoryId" class="text-slate-50 bg-stone-800 w-36 hover:bg-green-300 hover:text-stone-900">
<option :value="transData.categoryId" selected>{{categories.find((c) => c._id == transData.categoryId)?.name}}</option>
<select v-model="transData.categoryId" class="text-slate-50 bg-stone-700 w-36 hover:bg-green-200 hover:text-stone-900">
<option value="" disabled selected>Category</option>
<!-- cat?.name - null coalescence - returns value iff object is valid -->
<!-- TODO there's an error here but it works??? -->
<option v-for="c in categories" :value="c._id">{{c.name}}</option>
</select>
</div>
<div class="pr-4">
<input type="text" v-model="transData.comment" :placeholder="transData.comment" class="text-slate-50 bg-stone-800 w-48 hover:bg-green-300 hover:text-stone-900">
<div class="w-full pr-4">
<input type="text" v-model="transData.comment" placeholder="Comment" class="text-slate-50 bg-stone-700 w-full hover:bg-green-200 hover:text-stone-900">
</div>
<div>
<button class="text-slate-50 bg-stone-800 w-16 hover:bg-green-300 hover:text-stone-900" @click="update">
Save
<button class="text-slate-50 bg-stone-700 px-2 hover:bg-green-200 hover:text-stone-900" action="submit">
Add
</button>
</div>
</div>
</form>
</template>
@@ -44,31 +44,51 @@ import { computed, reactive, onMounted, ref, watchEffect } from "vue";
export default {
// TODO there's probably something wrong with this...
props: {
transaction: {
type: Object,
required: true
},
categories: {
type: Object,
required: true
}
},
setup(props){
// create editable object and use watchEffect
const transData = ref({})
watchEffect(() => {
transData.value = props.transaction
// whatever this doesn't work because WHYNOT
// transData.dollars = props.transaction.amount / 100
})
// // create editable object and use watchEffect
// const transData = ref({})
// watchEffect(() => {
// transData.value = props.transaction
// // whatever this doesn't work because WHYNOT
// // transData.dollars = props.transaction.amount / 100
// })
return {
transData,
async update() {
// console.log(props.transaction)
// send off request to update transaction
transData: {
date: new Date().toISOString().slice(0,10),
amount: 0,
payee: '',
categoryId: '',
comment: ''
},
// async update() {
// // console.log(props.transaction)
// // send off request to update transaction
// try {
// // use the editable object instead
// await transactionsService.update(transData.value)
// } catch (error) {
// console.log(error)
// }
// }
async create() {
console.log('create triggered')
try {
// use the editable object instead
await transactionsService.update(transData.value)
// TODO WHY is it creating twice? (FIXED)
// TODO certain requests are 400 errors - sanitize
await transactionsService.create(this.transData)
// TODO empty after creation (not working)
this.transData = {
date: new Date().toISOString().slice(0,10),
amount: 0,
payee: '',
categoryId: '',
comment: ''
}
} catch (error) {
console.log(error)
}
budgit.client/src/components/Transaction.vue
+5
View File
@@ -81,6 +81,11 @@ export default {
async remove() {
// TODO need to write CRUD method for this
// probably good to write an Are-you-sure Modal too...
try {
await transactionsService.remove(props.transaction._id)
} catch (error) {
console.log(error)
}
}
}
}
budgit.client/src/pages/TransactionsPage.vue
+18 -14
View File
@@ -1,6 +1,7 @@
<template>
<div class="component">
<div class="flex mt-6 md:mx-40 flex-col">
<AddTransaction :categories="categories" />
<Transaction v-for="t in transactions" :key="t._id" :transaction="t" :categories="categories" />
</div>
</div>
@@ -13,22 +14,25 @@ import { AppState } from '../AppState'
import { categoriesService } from '../services/CategoriesService'
import { transactionsService } from '../services/TransactionsService'
import { logger } from '../utils/Logger'
import AddTransaction from '../components/AddTransaction.vue'
export default {
setup(){
onMounted(async () => {
try {
await categoriesService.getAll()
await transactionsService.getAll()
} catch (error) {
logger.log(error)
}
})
return {
transactions: computed(() => AppState.transactions),
categories: computed(() => AppState.categories)
}
}
setup() {
onMounted(async () => {
try {
await categoriesService.getAll();
await transactionsService.getAll();
}
catch (error) {
logger.log(error);
}
});
return {
transactions: computed(() => AppState.transactions),
categories: computed(() => AppState.categories)
};
},
components: { AddTransaction }
}
</script>
budgit.client/src/services/TransactionsService.js
+15
View File
@@ -27,6 +27,21 @@ class TransactionsService {
// console.log('transactionUpdate: ' + res.data)
// AppState.transactions.find((t) => t._id == transactionId) = res.data
}
async create(transaction) {
const res = await api.post('api/transactions/', transaction)
// console.log(res.data)
AppState.transactions.push(res.data)
}
// TODO fix bug when deleting multiple sometimes gives 400 error
// accountId DNE? maybe bad data?
// i think it's just the button clicking before updated response?
async remove(id) {
const res = await api.delete('api/transactions/' + id)
// console.log(res.data)
AppState.transactions = res.data
}
}
export const transactionsService = new TransactionsService()