From 3f5307ef795ae118268614aefc43f2dd6e5c24b6 Mon Sep 17 00:00:00 2001
From: thehollidayinn <keithrholliday@gmail.com>
Date: Mon, 21 Oct 2019 23:00:13 -0600
Subject: [PATCH] Added export modal.

---
 components/collections/exportCollection.vue | 49 +++++++++++++++++++++
 components/collections/index.vue            | 14 ++++++
 2 files changed, 63 insertions(+)
 create mode 100644 components/collections/exportCollection.vue

diff --git a/components/collections/exportCollection.vue b/components/collections/exportCollection.vue
new file mode 100644
index 000000000..a24fc0dba
--- /dev/null
+++ b/components/collections/exportCollection.vue
@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <modal v-if="show" @close="hideModel">
+            <div slot="header">
+            <ul>
+                <li>
+                <div class="flex-wrap">
+                    <h3 class="title">Export Collections</h3>
+                    <div>
+                    <button class="icon" @click="hideModel">
+                        <i class="material-icons">close</i>
+                    </button>
+                    </div>
+                </div>
+                </li>
+            </ul>
+            </div>
+            <div slot="body">
+                <textarea v-model='collectionJson'>
+                </textarea>
+            </div>
+            <div slot="footer">
+            </div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show: Boolean,
+    },
+    components: {
+        modal,
+    },
+    computed: {
+        collectionJson () {
+            return JSON.stringify(this.$store.state.postwoman.collections);
+        }
+    },
+    methods: {
+        hideModel() {
+            this.$emit('hide-model');
+        },
+    },
+};
+</script>
\ No newline at end of file
diff --git a/components/collections/index.vue b/components/collections/index.vue
index fbf59c7c0..8539a05cc 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -9,9 +9,12 @@
       >
     </addCollection>
 
+    <exportCollection :show="showExportModal" v-on:hide-model='toggleExport'></exportCollection>
+
     <div class='header'>
       <Label>Collections</label>
       <button class="collection-button" @click="toggleModal">+</button>
+      <button class="export-button" @click="toggleExport">Export</button>
     </div>
     
     
@@ -45,20 +48,28 @@
     height: 20px;
     border-radius: 50%;
   }
+
+  .export-button {
+    padding: 10px 8px;
+    height: 15px;
+  }
 </style>
 
 <script>
   import addCollection from "./addCollection";
+  import exportCollection from "./exportCollection";
   import collection from './collection'
 
   export default {
     components: {
       collection,
       addCollection,
+      exportCollection,
     },
     data() {
       return {
         showAddModel: false,
+        showExportModal: false,
         selectedCollection: {},
       }
     },
@@ -71,6 +82,9 @@
       toggleModal() {
         this.showAddModel = !this.showAddModel;
       },
+      toggleExport() {
+        this.showExportModal = !this.showExportModal;
+      },
       addNewCollection(newCollection) {
         this.$store.commit('postwoman/addCollection', newCollection);
         this.showAddModel = false;