From d168a847abb028e41799c2ff632a4861346cf849 Mon Sep 17 00:00:00 2001
From: Josh Creek <jcreek93@gmail.com>
Date: Fri, 24 May 2019 17:15:11 +0100
Subject: [PATCH] Added ability to select a tag but only works with one new
 transaction when there are duplicates too.

---
 src/components/ApplyTag.vue | 30 +++++++++++++++++++++++++++---
 src/views/Home.vue          |  7 ++++---
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/ApplyTag.vue b/src/components/ApplyTag.vue
index 5f0769a..aab630f 100644
--- a/src/components/ApplyTag.vue
+++ b/src/components/ApplyTag.vue
@@ -5,9 +5,22 @@
     </button>
 
     <modal v-show="isModalVisible" @close="closeModal">
-      <slot name="body">
+      <template v-slot:body>
         Successfully used slot body.
-      </slot>
+        <br>
+        {{ transaction.date }} - {{ transaction.transactionTypeDescription }} - {{ transaction.isExpenditure ? "Expenditure" : "Income" }} -> {{ transaction.amount }}
+        <br>
+        {{ transaction.description }}
+
+        <select v-model="selectedTag">
+          <option v-for="tag in tagsExpenditure" v-bind:key="tag">{{ tag }}</option> 
+        </select>
+      </template>
+      <template v-slot:footer>
+        <button type="button" class="btn-green" @click="saveTransaction" aria-label="Close modal">
+              Save transaction and tags
+        </button>
+      </template>
     </modal>
   </div>
 </template>
@@ -19,6 +32,7 @@
     name: 'app',
     props: [
       "transaction", 
+      "tagsExpenditure",
       "isModalVisible"
     ],
     components: {
@@ -26,14 +40,24 @@
     },
     data () {
       return {
+        selectedTag: ""
       };
     },
     methods: {
+      closeModal() {
+        this.$emit('close');
+      },
       showModal() {
         this.$emit('show');
       },
-      closeModal() {
+      saveTransaction() {
+        const newTransaction = this.transaction; 
+        var newTags = [];
+        newTags.push(this.selectedTag);
+        newTransaction.tags = newTags;
+
         this.$emit('close');
+        this.$emit('add', newTransaction);
       }
     },
   };
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 9814715..a37b108 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <ApplyTag :transaction="newTransaction" :isModalVisible="isModalVisible" @show="showModal" @close="closeModal"/>
+    <ApplyTag :transaction="newTransaction" :isModalVisible="isModalVisible" :tagsExpenditure="tagsExpenditure" @show="showModal" @close="closeModal" @add="addTransaction"/>
     <AddTransaction v-on:add-transaction="checkTransactionExists" />
     <Transactions v-bind:transactions="transactions" v-on:del-transaction="deleteTransaction" />
   </div>
@@ -67,12 +67,12 @@ export default {
       this.transactions = this.transactions.filter(transaction => transaction.id !== id);
       localStorage.setItem("transactionStorage", JSON.stringify(this.transactions));
     },
-    addTransaction() {
+    addTransaction(newTransaction) {
       // When the confirmation button is clicked, return the value of the dropdown 
 
       
       // Add the transaction
-      this.transactions.push(this.newTransaction);
+      this.transactions.push(newTransaction);
       this.saveTransactions();
     },
     checkTransactionExists(newTransaction) {
@@ -89,6 +89,7 @@ export default {
       }
     },
     saveTransactions() {
+      // Save the transactions to localstorage so they persist after closing the session
       localStorage.setItem("transactionStorage", JSON.stringify(this.transactions));
     },
     closeModal() {