From 4163341c658302770e1fc41d9461fcad2333006a Mon Sep 17 00:00:00 2001
From: Josh Creek <jcreek93@gmail.com>
Date: Sat, 11 May 2019 11:07:29 +0100
Subject: [PATCH] Added a reusable Modal component for the apply tag
 functionality

---
 src/components/ApplyTag.vue |  41 ++++++++++++
 src/components/Modal.vue    | 123 ++++++++++++++++++++++++++++++++++++
 src/views/Home.vue          |  15 ++++-
 3 files changed, 176 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ApplyTag.vue
 create mode 100644 src/components/Modal.vue

diff --git a/src/components/ApplyTag.vue b/src/components/ApplyTag.vue
new file mode 100644
index 0000000..d84abaa
--- /dev/null
+++ b/src/components/ApplyTag.vue
@@ -0,0 +1,41 @@
+<template>
+  <div id="app">
+    <button
+      type="button"
+      class="btn"
+      @click="showModal"
+    >
+      Open Modal!
+    </button>
+
+    <modal
+      v-show="isModalVisible"
+      @close="closeModal"
+    />
+  </div>
+</template>
+
+<script>
+  import Modal from '../components/Modal.vue';
+
+  export default {
+    name: 'app',
+    components: {
+      Modal,
+    },
+    data () {
+      return {
+        isModalVisible: false,
+      };
+    },
+    methods: {
+      showModal() {
+        this.isModalVisible = true;
+      },
+      closeModal() {
+        this.isModalVisible = false;
+      }
+    },
+  };
+</script>
+
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
new file mode 100644
index 0000000..c9080f4
--- /dev/null
+++ b/src/components/Modal.vue
@@ -0,0 +1,123 @@
+<template>
+  <transition name="modal-fade">
+    <div class="modal-backdrop">
+      <div class="modal"
+        role="dialog"
+        aria-labelledby="modalTitle"
+        aria-describedby="modalDescription"
+      >
+        <header
+          class="modal-header"
+          id="modalTitle"
+        >
+          <slot name="header">
+            This is the default tile!
+
+            <button
+              type="button"
+              class="btn-close"
+              @click="close"
+              aria-label="Close modal"
+            >
+              x
+            </button>
+          </slot>
+        </header>
+        <section
+          class="modal-body"
+          id="modalDescription"
+        >
+          <slot name="body">
+            I'm the default body!
+          </slot>
+        </section>
+        <footer class="modal-footer">
+          <slot name="footer">
+            I'm the default footer!
+
+            <button
+              type="button"
+              class="btn-green"
+              @click="close"
+              aria-label="Close modal"
+            >
+              Close me!
+            </button>
+          </slot>
+        </footer>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+  export default {
+    name: 'modal',
+    methods: {
+      close() {
+        this.$emit('close');
+      },
+    },
+  };
+</script>
+
+<style>
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .modal {
+    background: #FFFFFF;
+    box-shadow: 2px 2px 20px 1px;
+    overflow-x: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .modal-header,
+  .modal-footer {
+    padding: 15px;
+    display: flex;
+  }
+
+  .modal-header {
+    border-bottom: 1px solid #eeeeee;
+    color: #4AAE9B;
+    justify-content: space-between;
+  }
+
+  .modal-footer {
+    border-top: 1px solid #eeeeee;
+    justify-content: flex-end;
+  }
+
+  .modal-body {
+    position: relative;
+    padding: 20px 10px;
+  }
+
+  .btn-close {
+    border: none;
+    font-size: 20px;
+    padding: 20px;
+    cursor: pointer;
+    font-weight: bold;
+    color: #4AAE9B;
+    background: transparent;
+  }
+
+  .btn-green {
+    color: white;
+    background: #4AAE9B;
+    border: 1px solid #4AAE9B;
+    border-radius: 2px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index f730dac..cbfdbef 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="app">
+    <ApplyTag />
     <AddTransaction v-on:add-transaction="addTransaction" />
     <Transactions v-bind:transactions="transactions" v-on:del-transaction="deleteTransaction" />
   </div>
@@ -8,12 +9,14 @@
 <script>
 import Transactions from '../components/Transactions';
 import AddTransaction from '../components/AddTransaction';
+import ApplyTag from '../components/ApplyTag';
 
 export default {
   name: 'home',
   components: {
     Transactions, 
-    AddTransaction
+    AddTransaction, 
+    ApplyTag
   }, 
   data: function() {
     return {
@@ -69,11 +72,17 @@ export default {
         alert('found duplicate transaction, not adding it - ' + newTransaction.date + ' :: ' + newTransaction.description);
       }
       else {
+        // Open a modal to let the user select a tag to apply to the transaction
+        // var newTransactionWithTag = this.applyTag(newTransaction);
+
+        // Add the transaction
         this.transactions.push(newTransaction);
-      this.saveTransactions();
+        this.saveTransactions();
       }
-      
     },
+    // applyTag(newTransaction) {
+        
+    // },
     saveTransactions() {
       localStorage.setItem("lastname", "Smith");
       localStorage.setItem("transactionStorage", JSON.stringify(this.transactions));