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>

pages/index.vue

@@ -340,6 +340,7 @@
       </div>
     </section>
     <history @useHistory="handleUseHistory" ref="historyComponent"></history>
+    <collections></collections>
   </div>
 </template>
 <script>
@@ -351,6 +352,7 @@
   import textareaAutoHeight from "../directives/textareaAutoHeight";
   import toggle from "../components/toggle";
   import modal from "../components/modal";
+  import collections from '../components/collections';
   import parseCurlCommand from '../assets/js/curlparser.js';
   import hljs from 'highlight.js';
   import 'highlight.js/styles/dracula.css';
@@ -413,6 +415,7 @@
       'pw-modal': modal,
       history,
       autocomplete,
+      collections,
     },
     data() {
       return {
@@ -517,9 +520,16 @@
           this.path = path;
         },
         deep: true
-      }
+      },
+      selectedRequest (newValue, oldValue) {
+        if (!newValue) return;
+        this.url = newValue.url;
+      },
     },
     computed: {
+      selectedRequest() {
+        return this.$store.state.postwoman.selectedRequest;
+      },
       statusCategory() {
         return findStatusGroup(this.response.status);
       },
@@ -1058,7 +1068,7 @@
         this.$toast.info('Cleared', {
           icon: 'clear_all'
         });
-      }
+      },
     },
     mounted() {
       this.observeRequestButton();

store/postwoman.js

@@ -42,7 +42,22 @@ export const SETTINGS_KEYS = [
 ];
 
 export const state = () => ({
-    settings: {}
+    settings: {},
+    collections: [{
+        name: 'My First Collection',
+        folders: [{
+            name: 'Folder 1',
+            requests: [{
+                name: "Example request",
+                url: 'http://test.com',
+            }],
+        }],
+        requests: [{
+            name: "Example request",
+            url: 'http://test.com',
+        }],
+    }],
+    selectedRequest: {},
 });
 
 export const mutations = {
@@ -59,6 +74,24 @@ export const mutations = {
         if (!SETTINGS_KEYS.includes(key)) throw new Error("The settings structure does not include the key " + key);
 
         state.settings[key] = value;
+    },
+
+    addCollection (state, newCollection) {
+        state.collections.push(newCollection);
+    },
+
+    addFolder (state, payload) {
+        const { collectionIndex, folder } = payload;
+        state.collections[collectionIndex].folders.push(folder);
+    },
+
+    addRequest (state, payload) {
+        const { collectionIndex, folderIndex, request } = payload;
+        state.collections[collectionIndex].folders[folderIndex].push(request);
+    },
+
+    selectRequest (state, payload) {
+        state.selectedRequest = Object.assign({}, payload.request);
     }
 
 };