Merge pull request #176 from TheHollidayInn/feat/collections

Collections

components/collections/addCollection.vue

@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <modal v-if="show" @close="hideModel">
+            <div slot="header">
+            <ul>
+                <li>
+                <div class="flex-wrap">
+                    <h3 class="title" v-if='!newCollection.hasOwnProperty("collectionIndex")'>Add New Collection</h3>
+                    <h3 class="title" v-if='newCollection.hasOwnProperty("collectionIndex")'>Edit 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" v-if='!newCollection.hasOwnProperty("collectionIndex")'>Add</button>
+                <button @click="saveCollection" v-if='newCollection.hasOwnProperty("collectionIndex")'>Save</button>
+            </div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show: Boolean,
+        editingCollection: Object,
+    },
+    components: {
+        modal,
+    },
+    data() {
+        return {
+            newCollection: {
+                name: '',
+                folders: [],
+                requests: [],
+            },
+        }
+    },
+    watch: {
+        show() {
+            if (!this.editingCollection.collectionIndex) return;
+            this.newCollection = Object.assign({}, this.editingCollection);
+        },
+    },
+    methods: {
+        addNewCollection() {
+            const newCollection = Object.assign({}, this.newCollection);
+            this.$emit('new-collection', newCollection);
+            this.newCollection = {
+                name: '',
+                folders: [],
+                requests: [],
+            };
+        },
+        saveCollection() {
+            const savedCollection = Object.assign({}, this.newCollection);
+            this.$emit('saved-collection', savedCollection);
+            this.newCollection = {
+                name: '',
+                folders: [],
+                requests: [],
+            };
+        },
+        hideModel() {
+            this.$emit('hide-model');
+        },
+    },
+};
+</script>

components/collections/addFolder.vue

@@ -0,0 +1,79 @@
+<template>
+    <modal v-if="show" @close="show = false">
+        <div slot="header">
+            <ul>
+            <li>
+                <div class="flex-wrap">
+                <h3 class="title" v-if='!newFolder.hasOwnProperty("folderIndex")'>Add New Folder</h3>
+                <h3 class="title" v-if='newFolder.hasOwnProperty("folderIndex")'>Edit 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" v-if='!newFolder.hasOwnProperty("folderIndex")'>Add</button>
+            <button @click="saveFolder" v-if='newFolder.hasOwnProperty("folderIndex")'>Save</button>
+        </div>
+    </modal>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show: Boolean,
+        editingFolder: Object,
+    },
+    components: {
+        modal,
+    },
+    data() {
+        return {
+            newFolder: {
+                name: '',
+                requests: [],
+            },
+        }
+    },
+    watch: {
+        show() {
+            if (!this.editingFolder.folderIndex) return;
+            this.newFolder = Object.assign({}, this.editingFolder);
+        },
+    },
+    methods: {
+        addNewFolder() {
+            const newFolder = Object.assign({}, this.newFolder);
+            this.$emit('new-folder', newFolder);
+            this.newFolder = {
+                name: '',
+                requests: [],
+            };
+        },
+        saveFolder() {
+            const savedFolder = Object.assign({}, this.newFolder);
+            this.$emit('saved-folder', savedFolder);
+            this.newFolder = {
+                name: '',
+                requests: [],
+            };
+        },
+        hideModel() {
+            this.$emit('hide-model');
+        },
+    },
+};
+</script>

components/collections/collection.vue

@@ -0,0 +1,136 @@
+<template>
+    <div>
+        <addFolder
+            v-bind:show="showModal"
+            v-on:new-folder="addNewFolder"
+            v-on:hide-model='toggleModal'
+            v-bind:editing-folder="selectedFolder"
+            v-on:saved-folder="savedFolder"
+        >
+        </addFolder>
+
+        <div class="flex-wrap">
+          <div>
+            <button class="icon" @click="toggleShowChildren" v-show='!showChildren'>
+              <i class="material-icons">arrow_right</i>
+            </button>
+            <button class="icon" @click="toggleShowChildren" v-show='showChildren'>
+              <i class="material-icons">arrow_drop_down</i>
+            </button>
+            <button class="icon" @click="toggleShowChildren">
+              <i class="material-icons">folder</i>
+              <span>{{collection.name}}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="editCollection">
+              <i class="material-icons">create</i>
+            </button>
+            <button class="icon" @click="removeCollection">
+              <i class="material-icons">delete</i>
+            </button>
+            <button class="icon" @click="toggleModal">
+              <i class="material-icons">add</i>
+            </button>
+          </div>
+        </div>
+
+        <div v-show="showChildren">
+            <ul>
+                <li v-for="(folder, index) in collection.folders" :key="folder.name">
+                    <folder
+                        :folder="folder"
+                        :folderIndex="index"
+                        :collection-index="collectionIndex"
+                        v-on:edit-folder="editFolder"
+                    />
+                </li>
+            </ul>
+
+            <ul>
+                <li v-for="(request, index) in collection.requests" :key="index">
+                    <request
+                        :request="request"
+                        :collection-index="collectionIndex"
+                        :folder-index="-1"
+                        :request-index="index"
+                    ></request>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    ul {
+        display: flex;
+        flex-direction: column;
+    }
+
+    ul li {
+        display: flex;
+        padding-left: 1rem;
+    }
+</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,
+            selectedFolder: {},
+        };
+    },
+    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;
+        },
+        editCollection() {
+            this.$emit('edit-collection', {
+                collectionIndex: this.collectionIndex,
+                collection: this.collection,
+            });
+        },
+        removeCollection() {
+            if (!confirm("Are you sure you want to remove this collection?")) return;
+            this.$store.commit('postwoman/removeCollection', {
+                collectionIndex: this.collectionIndex,
+            });
+        },
+        editFolder(payload) {
+            const { folder, collectionIndex, folderIndex } = payload;
+            this.selectedFolder = Object.assign({ collectionIndex, folderIndex }, folder);
+            this.showModal = true;
+        },
+        savedFolder(savedFolder) {
+            this.$store.commit('postwoman/saveFolder', { savedFolder });
+            this.showModal = false;
+            this.selectedFolder = {};
+        },
+    }
+};
+</script>

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/folder.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <div class="flex-wrap">
+          <div>
+            <button class="icon" @click="toggleShowChildren" v-show='!showChildren'>
+              <i class="material-icons">arrow_right</i>
+            </button>
+            <button class="icon" @click="toggleShowChildren" v-show='showChildren'>
+              <i class="material-icons">arrow_drop_down</i>
+            </button>
+            <button class="icon" @click="toggleShowChildren">
+              <i class="material-icons">folder_open</i>
+              <span>{{folder.name}}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="editFolder">
+              <i class="material-icons">edit</i>
+            </button>
+            <button class="icon" @click="removeFolder">
+              <i class="material-icons">delete</i>
+            </button>
+          </div>
+        </div>
+
+        <div v-show="showChildren">
+            <ul>
+                <li v-for="(request, index) in folder.requests" :key="index">
+                    <request
+                        :request="request"
+                        :collection-index="collectionIndex"
+                        :folder-index="folderIndex"
+                        :request-index="index"
+                    ></request>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    ul {
+        display: flex;
+        flex-direction: column;
+    }
+
+    ul li {
+        display: flex;
+        padding-left: 1rem;
+    }
+</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 });
+        },
+        removeFolder() {
+            if (!confirm("Are you sure you want to remove this folder?")) return;
+            this.$store.commit('postwoman/removeFolder', {
+                collectionIndex: this.collectionIndex,
+                folderIndex: this.folderIndex,
+            });
+        },
+        editFolder() {
+            this.$emit('edit-folder', {
+                collectionIndex: this.collectionIndex,
+                folderIndex: this.folderIndex,
+                folder: this.folder,
+            });
+        },
+    }
+};
+</script>

components/collections/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="collections-wrapper">
+    <addCollection
+      v-bind:show="showAddModel"
+      v-on:new-collection="addNewCollection"
+      v-on:hide-model='toggleModal'
+      v-bind:editing-collection="selectedCollection"
+      v-on:saved-collection="savedCollection"
+      >
+    </addCollection>
+
+    <exportCollection :show="showExportModal" v-on:hide-model='toggleExport'></exportCollection>
+
+    <div class='flex-wrap'>
+      <h3 class="title">Collections</h3>
+      <div>
+        <button class="icon" @click="toggleModal">
+          <i class="material-icons">add</i>
+          <span>New</span>
+        </button>
+        <button class="icon" @click="toggleExport">
+          <i class="material-icons">import_export</i>
+          <span>Export</span>
+        </button>
+      </div>
+    </div>
+
+    <ul>
+      <li v-for="(collection, index) in collections" :key="collection.name">
+        <collection
+          :collection-index="index"
+          :collection="collection"
+          v-on:edit-collection="editCollection"
+          ></collection>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  ul {
+    display: flex;
+    flex-direction: column;
+  }
+</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: {},
+      }
+    },
+    computed: {
+      collections () {
+        return this.$store.state.postwoman.collections;
+      }
+    },
+    methods: {
+      toggleModal() {
+        this.showAddModel = !this.showAddModel;
+      },
+      toggleExport() {
+        this.showExportModal = !this.showExportModal;
+      },
+      addNewCollection(newCollection) {
+        this.$store.commit('postwoman/addCollection', newCollection);
+        this.showAddModel = false;
+      },
+      editCollection(payload) {
+        const { collection, collectionIndex } = payload;
+        this.selectedCollection = Object.assign({ collectionIndex }, collection);
+        this.showAddModel = true;
+      },
+      savedCollection(savedCollection) {
+        this.$store.commit('postwoman/saveCollection', { savedCollection });
+        this.showAddModel = false;
+        this.selectedCollection = {};
+      },
+    },
+  }
+
+</script>

components/collections/request.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="flex-wrap">
+      <div>
+        <button class="icon" @click="selectRequest()">
+          <i class="material-icons">star</i>
+          <span>{{request.name}}</span>
+        </button>
+      </div>
+      <div>
+        <button class="icon" @click="editRequest">
+          <i class="material-icons">edit</i>
+        </button>
+        <button class="icon" @click="removeRequest">
+          <i class="material-icons">delete</i>
+        </button>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+    .add-button {
+        padding: 0;
+        width: 20px;
+        margin: 0;
+        height: 20px;
+        border-radius: 50%;
+    }
+</style>
+
+<script>
+export default {
+    props: {
+        request: Object,
+        collectionIndex: Number,
+        folderIndex: Number,
+        requestIndex: Number,
+    },
+    methods: {
+        selectRequest() {
+            this.$store.commit('postwoman/selectRequest', { request: this.request });
+        },
+        editRequest() {
+            this.request.requestIndex = this.requestIndex;
+            this.$store.commit('postwoman/editRequest', { request: this.request });
+        },
+        removeRequest() {
+            if (!confirm("Are you sure you want to remove this request?")) return;
+            this.$store.commit('postwoman/removeRequest', {
+                collectionIndex: this.collectionIndex,
+                folderIndex: this.folderIndex,
+                requestIndex: this.requestIndex,
+            });
+        },
+    },
+};
+</script>

components/collections/saveRequest.vue

@@ -0,0 +1,148 @@
+<template>
+    <div>
+        <modal v-if="show" @close="hideModel">
+            <div slot="header">
+                <ul>
+                    <li>
+                        <div class="flex-wrap">
+                            <h3 class="title" v-if='!request.hasOwnProperty("requestIndex")'>Add New Request</h3>
+                            <h3 class="title" v-if='request.hasOwnProperty("requestIndex")'>Edit Request</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="request.name" placeholder="My New Request" />
+                        <select type="text" v-model="request.collection" >
+                            <option 
+                                v-for="collection in collections"
+                                :key="collection.collectionIndex"
+                                :value="collection.collectionIndex">
+                                {{ collection.name }}
+                            </option>
+                        </select>
+                        <select type="text" v-model="request.folder" >
+                            <option 
+                                v-for="folder in folders"
+                                :key="folder.folderIndex"
+                                :value="folder.folderIndex">
+                                {{ folder.name }}
+                            </option>
+                        </select>
+                    </li>
+                </ul>
+            </div>
+            <div slot="footer">
+                <button @click="addRequest" v-if='!request.hasOwnProperty("requestIndex")'>Add</button>
+                <button @click="saveRequest" v-if='request.hasOwnProperty("requestIndex")'>Save</button>
+            </div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show: Boolean,
+        editingRequest: Object,
+    },
+    components: {
+        modal,
+    },
+    data() {
+        return {
+            request: {
+                name: '',
+                collection: '',
+                folder: -1,
+            },
+        }
+    },
+    watch: {
+        show() {
+            this.request = Object.assign(this.request, this.editingRequest);
+        },
+        'request.collection': function (newValue, oldValue) {
+            if (!oldValue) return;
+
+            if (newValue === oldValue) {
+                delete this.request.oldCollection;
+                return;
+            }
+            this.request.oldFolder = this.request.folder;
+            this.request.folder = -1;
+            this.request.oldCollection = oldValue;
+        },
+        'request.folder': function (newValue, oldValue) {
+            if (!oldValue) return;
+
+            if (newValue === oldValue) {
+                delete this.request.oldFolder;
+                return;
+            }
+            this.request.oldFolder = oldValue;
+        }
+    },
+    computed: {
+        collections() {
+            return this.$store.state.postwoman.collections
+                .map((collection, index) => {
+                    return {
+                        name: collection.name,
+                        collectionIndex: index,
+                    };
+                });
+        },
+        folders() {
+            if (this.request.collection === '') return []
+            return this.$store.state.postwoman.collections[this.request.collection].folders
+                .map((folder, index) => {
+                    return {
+                        name: folder.name,
+                        folderIndex: index,
+                    };
+                });
+        }
+    },
+    methods: {
+        addRequest() {
+            const request = Object.assign({}, this.request);
+            this.$store.commit('postwoman/addRequest', {
+                request,
+            });
+            this.request = {
+                name: '',
+                collection: '',
+                folder: '',
+            };
+            this.hideModel();
+        },
+        saveRequest() {
+            const savedRequest = Object.assign({}, this.request);
+
+            this.$store.commit('postwoman/saveRequest', {
+                request: savedRequest,
+            });
+
+            this.request = {
+                name: '',
+                collection: '',
+                folder: '',
+            };
+            this.hideModel();
+        },
+        hideModel() {
+            this.$emit('hide-model');
+        },
+    },
+};
+</script>