From 2ec1291832b3c6a8565adf3f02e3ad7d003a36b7 Mon Sep 17 00:00:00 2001
From: Annika <nikzneko@gmail.com>
Date: Wed, 13 Jul 2022 10:48:27 -0600
Subject: [PATCH] some styling and UX stuff

---
 budgit.client/src/components/Transaction.vue | 21 ++++++++++++++------
 budgit.client/src/pages/TransactionsPage.vue |  1 -
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/budgit.client/src/components/Transaction.vue b/budgit.client/src/components/Transaction.vue
index c2ad728..327692f 100644
--- a/budgit.client/src/components/Transaction.vue
+++ b/budgit.client/src/components/Transaction.vue
@@ -1,5 +1,5 @@
 <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-800 mb-2" @submit.prevent="update">
     <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">
     </div>
@@ -23,15 +23,20 @@
         <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="pr-4 w-full">
+      <input type="text" v-model="transData.comment" :placeholder="transData.comment" class="text-slate-50 bg-stone-800 w-full 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" @click="update">
-        Save
+      <button class="text-slate-50 bg-stone-800 px-1 hover:bg-green-300 hover:text-stone-900" @click="update">
+        <i class="mdi mdi-floppy"></i>
       </button>
     </div>
-  </div>
+    <div class="hover:bg-red-400 hover:text-stone-900">
+      <button @click="remove">
+        <i class="mdi mdi-delete"></i>
+      </button>
+    </div>
+  </form>
 </template>
 
 
@@ -72,6 +77,10 @@ export default {
         } catch (error) {
           console.log(error)
         }
+      },
+      async remove() {
+        // TODO need to write CRUD method for this
+        // probably good to write an Are-you-sure Modal too...
       }
     }
   }
diff --git a/budgit.client/src/pages/TransactionsPage.vue b/budgit.client/src/pages/TransactionsPage.vue
index 35833e3..3c96416 100644
--- a/budgit.client/src/pages/TransactionsPage.vue
+++ b/budgit.client/src/pages/TransactionsPage.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="component">
     <div class="flex mt-6 md:mx-40 flex-col">
-      <h1>Transactions Container</h1>
       <Transaction v-for="t in transactions" :key="t._id" :transaction="t" :categories="categories" />
     </div>
   </div>