Added export modal.

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>

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;