transactions are now printing to the page

budgit.client/src/AppState.js

@@ -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

@@ -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>
+      <div class="flex order-3 md:order-2">
         <router-link :to="{ name: 'Overview' }">
-        <p class="hidden md:block mx-3">Overview</p>
+        <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>
-    <Login class="md:block" />
+    </div>
+    <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

@@ -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">
+      <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>UnCATegorized</option>
+        <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

@@ -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

@@ -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

@@ -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()