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

transactions are now printing to the page

Browse Source
This commit is contained in:
Annika
2022-07-11 15:12:27 -06:00
parent 10d044cb0e
commit 6455c02d5e
6 changed files with 86 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
budgit.client/src/AppState.js
+2 -1
View File
@@ -3,5 +3,6 @@ import { reactive } from 'vue'
// NOTE AppState is a reactive object to contain app level data
export const AppState = reactive({
user: {},
account: {}
account: {},
transactions: []
})
budgit.client/src/components/Navbar.vue
+9 -7
View File
@@ -1,18 +1,20 @@
<template>
<nav class="flex justify-between items-end w-screen bg-stone-800 py-2 pr-3">
<div class="flex justify-start items-end">
<div class="flex flex-wrap md:flex-nowrap justify-start items-end">
<router-link :to="{ name: 'Overview' }">
<h3 class="text-4xl mr-10 text-green-300 hover:text-slate-50">Budg.it</h3>
<h3 class="order-1 text-4xl mr-10 text-green-300 hover:text-slate-50">Budg.it</h3>
<!-- text-rose-700: color of bad -->
</router-link>
<router-link :to="{ name: 'Overview' }">
<p class="hidden md:block mx-3">Overview</p>
<div class="flex order-3 md:order-2">
<router-link :to="{ name: 'Overview' }">
<p class="max-w-5/12 mx-3">Overview</p>
</router-link>
<router-link :to="{ name: 'Transactions' }">
<p class="hidden md:block mx-3">Transactions</p>
<p class="max-w-5/12 mx-3">Transactions</p>
</router-link>
</div>
</div>
<Login class="md:block" />
<Login class="order-2 md:order-3 md:block" />
</nav>
@@ -45,6 +47,6 @@ a:hover {
}
.router-link-active {
@apply text-green-300;
@apply text-green-300 hover:text-slate-50;
}
</style>
budgit.client/src/components/Transaction.vue
+23 -7
View File
@@ -1,22 +1,22 @@
<template>
<div class="component flex flex-wrap md:flex-nowrap justify-between bg-stone-800 mb-2">
<div class="pr-4">
<input type="date" v-model="date" placeholder="2022-07-11" class="text-slate-50 bg-stone-800 w-32 hover:bg-green-300 hover:text-stone-900">
<input type="date" v-model="transaction.date" class="text-slate-50 bg-stone-800 w-32 hover:bg-green-300 hover:text-stone-900">
</div>
<div class="pr-4">
<input type="number" v-model="amount" placeholder="$0.00" class="w-24 bg-stone-800 text-slate-50 hover:bg-green-300 hover:text-stone-900">
<input type="number" v-model="transaction.amount" :placeholder="transaction.amount" class="w-24 bg-stone-800 text-slate-50 hover:bg-green-300 hover:text-stone-900">
</div>
<div class="pr-4">
<input type="text" v-model="payee" placeholder="Payee" class="text-slate-50 bg-stone-800 w-32 hover:bg-green-300 hover:text-stone-900">
<input type="text" v-model="transaction.payee" :placeholder="transaction.payee" class="text-slate-50 bg-stone-800 w-32 hover:bg-green-300 hover:text-stone-900">
</div>
<div class="pr-4">
<select v-model="category" class="text-slate-50 bg-stone-800 w-36 hover:bg-green-300 hover:text-stone-900">
<option value="" selected>UnCATegorized</option>
<select v-model="transaction.category" class="text-slate-50 bg-stone-800 w-36 hover:bg-green-300 hover:text-stone-900">
<option value="" selected>{{transaction.category}}</option>
<option v-for="c in 10" value="meow">meow</option>
</select>
</div>
<div class="pr-4">
<input type="text" v-model="comment" placeholder="Comments" class="text-slate-50 bg-stone-800 w-48 hover:bg-green-300 hover:text-stone-900">
<input type="text" v-model="transaction.comment" :placeholder="transaction.comment" class="text-slate-50 bg-stone-800 w-48 hover:bg-green-300 hover:text-stone-900">
</div>
<div>
<button class="text-slate-50 bg-stone-800 w-16 hover:bg-green-300 hover:text-stone-900">
@@ -29,9 +29,25 @@
<script>
export default {
// TODO there's probably something wrong with this...
props: {
transaction: {
date: String || '2022-07-11',
amount: Number || 0,
payee: String || '',
category: String || '', //should be enum
comment: String || ''
}
},
setup(){
return {
date: '2022-07-11'
// transaction: {
// date: '2022-07-11',
// amount: 0,
// payee: '',
// category: '',
// comment: ''
// }
}
}
}
budgit.client/src/pages/TransactionsPage.vue
+27 -2
View File
@@ -2,16 +2,30 @@
<div class="component">
<div class="flex mt-6 md:mx-40 flex-col">
<h1>Transactions Container</h1>
<Transaction v-for="t in 10" />
<Transaction v-for="t in transactions" :key="t._id" :transaction="t" />
</div>
</div>
</template>
<script>
import { computed, onMounted } from 'vue'
import { AppState } from '../AppState'
import { transactionsService } from '../services/TransactionsService'
import { logger } from '../utils/Logger'
export default {
setup(){
return {}
onMounted(async () => {
try {
await transactionsService.getAll()
} catch (error) {
logger.log(error)
}
})
return {
transactions: computed(() => AppState.transactions)
}
}
}
</script>
@@ -20,3 +34,14 @@ export default {
<style lang="scss" scoped>
</style>
<!-- const route = useRoute()
onMounted(async () => {
try {
await supportsService.getSupportsByProject(route.params.id)
} catch (error) {
Pop.error(error)
}
}) -->
<!-- tiers: computed(() => AppState.tiers) -->
budgit.client/src/router.js
+2 -1
View File
@@ -14,7 +14,8 @@ const routes = [
{
path: '/transactions',
name: 'Transactions',
component: loadPage('TransactionsPage')
component: loadPage('TransactionsPage'),
beforeEnter: authGuard // this is important to keep the request from firing before the auth token is issued.
},
{
path: '/account',
budgit.client/src/services/TransactionsService.js
+22
View File
@@ -0,0 +1,22 @@
import { AppState } from "../AppState"
import { logger } from "../utils/Logger"
import { api } from "./AxiosService"
// TODO build the service to get some real data
class TransactionsService {
// async createProject(body){
// const res = await api.post('api/projects', body)
// logger.log('created project', res.data)
// AppState.accountProjects.push(res.data)
// }
async getAll() {
const res = await api.get('api/transactions')
// logger.log('transactions: ' + res.data)
AppState.transactions = res.data
}
}
export const transactionsService = new TransactionsService()