Initial collections

components/collections/addCollection.vue

@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <modal v-if="show" @close="hideModel">
+            <div slot="header">
+            <ul>
+                <li>
+                <div class="flex-wrap">
+                    <h3 class="title">Add New Collection</h3>
+                    <div>
+                    <button class="icon" @click="hideModel">
+                        <i class="material-icons">close</i>
+                    </button>
+                    </div>
+                </div>
+                </li>
+            </ul>
+            </div>
+            <div slot="body">
+            <ul>
+                <li>
+                <input type="text" v-model="newCollection.name" placeholder="My New Collection" />
+                </li>
+            </ul>
+            </div>
+            <div slot="footer">
+                <button @click="addNewCollection">Add</button>
+            </div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show: Boolean,
+    },
+    components: {
+        modal,
+    },
+    data() {
+        return {
+            newCollection: {
+                name: '',
+                folders: [],
+                requests: [],
+            },
+        }
+    },
+    methods: {
+        addNewCollection() {
+            const newCollection = Object.assign({}, this.newCollection);
+            this.$emit('new-collection', newCollection);
+            this.newCollection = {
+                name: '',
+                folders: [],
+                requests: [],
+            };
+        },
+        hideModel() {
+            this.$emit('hide-model');
+        },
+    },
+};
+</script>

components/collections/addFolder.vue

@@ -0,0 +1,62 @@
+<template>
+    <modal v-if="show" @close="show = false">
+        <div slot="header">
+            <ul>
+            <li>
+                <div class="flex-wrap">
+                <h3 class="title">Add New Folder</h3>
+                <div>
+                    <button class="icon" @click="hideModel">
+                    <i class="material-icons">close</i>
+                    </button>
+                </div>
+                </div>
+            </li>
+            </ul>
+        </div>
+        <div slot="body">
+            <ul>
+            <li>
+                <input type="text" v-model="newFolder.name" placeholder="My New Folder" />
+            </li>
+            </ul>
+        </div>
+        <div slot="footer">
+            <button @click="addNewFolder">Add</button>
+        </div>
+    </modal>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show: Boolean,
+    },
+    components: {
+        modal,
+    },
+    data() {
+        return {
+            newFolder: {
+                name: '',
+                requests: [],
+            },
+        }
+    },
+    methods: {
+        addNewFolder() {
+            const newFolder = Object.assign({}, this.newFolder);
+            this.$emit('new-folder', newFolder);
+            this.newFolder = {
+                name: '',
+                requests: [],
+            };
+        },
+        hideModel() {
+            this.$emit('hide-model');
+        },
+    },
+};
+</script>

components/collections/collection.vue

@@ -0,0 +1,99 @@
+<template>
+    <div>
+        <addFolder
+            v-bind:show="showModal"
+            v-on:new-folder="addNewFolder"
+            v-on:hide-model='toggleModal'>
+        </addFolder>
+
+        <div class="header">
+            <i @click="toggleShowChildren" v-show='!showChildren' class="material-icons">arrow_right</i>
+            <i @click="toggleShowChildren" v-show='showChildren' class="material-icons">arrow_drop_down</i>
+            <label @click="toggleShowChildren">
+                {{collection.name}}
+            </label>
+            <button class="add-button" @click="toggleModal">+</button>
+        </div>
+        
+        <div v-show="showChildren">
+            <ul>
+                <li v-for="(folder, index) in collection.folders" :key="folder.name">
+                    <folder :folder="folder" :folderIndex="index" />
+                </li>
+            </ul>
+
+            <ul>
+                <li v-for="request in collection.requests" :key="request.name">
+                    <request :request="request"></request>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    ul {
+        display: flex;
+        flex-direction: column;
+    }
+
+    ul li {
+        padding-left: 1rem;
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+    }
+
+    label {
+        padding-left: .5rem;
+    }
+
+    .add-button {
+        padding: 0;
+        width: 20px;
+        margin: 0;
+        height: 20px;
+        border-radius: 50%;
+    }
+</style>
+
+<script>
+import folder from './folder';
+import addFolder from "./addFolder";
+import request from './request';
+
+export default {
+    components: {
+        folder,
+        addFolder,
+        request,
+    },
+    props: {
+        collectionIndex: Number,
+        collection: Object,
+    },
+    data () {
+        return {
+            showChildren: false,
+            showModal: false,
+        };
+    },
+    methods: {
+        toggleShowChildren() {
+            this.showChildren = !this.showChildren;
+        },
+        toggleModal() {
+            this.showModal = !this.showModal;
+        },
+        addNewFolder(newFolder) {
+            this.$store.commit('postwoman/addFolder', {
+                collectionIndex: this.collectionIndex,
+                folder: newFolder,
+            });
+            this.showModal = false;
+        },
+    }
+};
+</script>

components/collections/folder.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <div class="header">
+            <i @click="toggleShowChildren" v-show='!showChildren' class="material-icons">arrow_right</i>
+            <i @click="toggleShowChildren" v-show='showChildren' class="material-icons">arrow_drop_down</i>
+            <div @click="toggleShowChildren">{{folder.name}}</div>
+        </div>
+
+        <div v-show="showChildren">
+            <ul>
+                <li v-for="request in folder.requests" :key="request.name">
+                    <request :request="request"></request>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    ul {
+        display: flex;
+        flex-direction: column;
+    }
+
+    ul li {
+        padding-left: 1rem;
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+    }
+</style>
+
+<script>
+import request from './request';
+
+export default {
+    props: {
+        folder: Object,
+        collectionIndex: Number,
+        folderIndex: Number,
+    },
+    components: {
+        request,
+    },
+    data () {
+        return {
+            showChildren: false,
+        };
+    },
+    methods: {
+        toggleShowChildren() {
+            this.showChildren = !this.showChildren;
+        },
+        selectRequest(request) {
+            this.$store.commit('postwoman/selectRequest', { request });
+        },
+    }
+};
+</script>

components/collections/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="collections-wrapper">
+    <addCollection
+      v-bind:show="showAddModel"
+      v-on:new-collection="addNewCollection"
+      v-on:hide-model='toggleModal'>
+    </addCollection>
+
+    <div class='header'>
+      <Label>Collections</label>
+      <button class="collection-button" @click="toggleModal">+</button>
+    </div>
+    
+    
+    <ul>
+      <li v-for="(collection, index) in collections" :key="collection.name">
+        <collection :collection-index="index" :collection="collection"></collection>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  ul {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+  }
+
+  .collection-button {
+    padding: 0;
+    width: 20px;
+    margin: 0;
+    height: 20px;
+    border-radius: 50%;
+  }
+</style>
+
+<script>
+  import addCollection from "./addCollection";
+  import collection from './collection'
+
+  export default {
+    components: {
+      collection,
+      addCollection,
+    },
+    data() {
+      return {
+        showAddModel: false,
+      }
+    },
+    computed: {
+      collections () {
+        return this.$store.state.postwoman.collections;
+      }
+    },
+    methods: {
+      toggleModal() {
+        this.showAddModel = !this.showAddModel;
+      },
+      addNewCollection(newCollection) {
+        this.$store.commit('postwoman/addCollection', newCollection);
+        this.showAddModel = false;
+      },
+    },
+  }
+
+</script>

components/collections/request.vue

@@ -0,0 +1,18 @@
+<template>
+    <div @click='selectRequest()'>
+        {{request.name}}
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        request: Object,
+    },
+    methods: {
+        selectRequest() {
+            this.$store.commit('postwoman/selectRequest', { request: this.request });
+        },
+    }
+}
+</script>