Merge pull request #176 from TheHollidayInn/feat/collections
Collections
This commit is contained in:
Liyas Thomas
GitHub
84
components/collections/addCollection.vue
Normal file
84
components/collections/addCollection.vue
Normal file
@@ -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>
|
||||||
79
components/collections/addFolder.vue
Normal file
79
components/collections/addFolder.vue
Normal file
@@ -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>
|
||||||
136
components/collections/collection.vue
Normal file
136
components/collections/collection.vue
Normal file
@@ -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>
|
||||||
49
components/collections/exportCollection.vue
Normal file
49
components/collections/exportCollection.vue
Normal file
@@ -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>
|
||||||
93
components/collections/folder.vue
Normal file
93
components/collections/folder.vue
Normal file
@@ -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>
|
||||||
94
components/collections/index.vue
Normal file
94
components/collections/index.vue
Normal file
@@ -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>
|
||||||
56
components/collections/request.vue
Normal file
56
components/collections/request.vue
Normal file
@@ -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>
|
||||||
148
components/collections/saveRequest.vue
Normal file
148
components/collections/saveRequest.vue
Normal file
@@ -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>
|
||||||
@@ -1,5 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page">
|
<div class="page">
|
||||||
|
<save-request
|
||||||
|
v-bind:show="showRequestModal"
|
||||||
|
v-on:hide-model='hideRequestModal'
|
||||||
|
v-bind:editing-request='editRequest'
|
||||||
|
></save-request>
|
||||||
<pw-modal v-if="showModal" @close="showModal = false">
|
<pw-modal v-if="showModal" @close="showModal = false">
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<ul>
|
<ul>
|
||||||
@@ -70,6 +75,13 @@
|
|||||||
<span>{{ isHidden ? 'Show Code' : 'Hide Code' }}</span>
|
<span>{{ isHidden ? 'Show Code' : 'Hide Code' }}</span>
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<label class="hide-on-small-screen" for="saveRequest"> </label>
|
||||||
|
<button class="icon" @click="saveRequest" id="saveRequest" ref="saveRequest" :disabled="!isValidURL">
|
||||||
|
<i class="material-icons">save</i>
|
||||||
|
<span>Save</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<label class="hide-on-small-screen" for="send"> </label>
|
<label class="hide-on-small-screen" for="send"> </label>
|
||||||
<button :disabled="!isValidURL" @click="sendRequest" id="send" ref="sendButton">
|
<button :disabled="!isValidURL" @click="sendRequest" id="send" ref="sendButton">
|
||||||
@@ -352,6 +364,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<history @useHistory="handleUseHistory" ref="historyComponent"></history>
|
<history @useHistory="handleUseHistory" ref="historyComponent"></history>
|
||||||
|
<collections></collections>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -363,6 +376,8 @@
|
|||||||
import textareaAutoHeight from "../directives/textareaAutoHeight";
|
import textareaAutoHeight from "../directives/textareaAutoHeight";
|
||||||
import toggle from "../components/toggle";
|
import toggle from "../components/toggle";
|
||||||
import modal from "../components/modal";
|
import modal from "../components/modal";
|
||||||
|
import collections from '../components/collections';
|
||||||
|
import saveRequest from '../components/collections/saveRequest';
|
||||||
import parseCurlCommand from '../assets/js/curlparser.js';
|
import parseCurlCommand from '../assets/js/curlparser.js';
|
||||||
import hljs from 'highlight.js';
|
import hljs from 'highlight.js';
|
||||||
import 'highlight.js/styles/dracula.css';
|
import 'highlight.js/styles/dracula.css';
|
||||||
@@ -425,6 +440,8 @@
|
|||||||
'pw-modal': modal,
|
'pw-modal': modal,
|
||||||
history,
|
history,
|
||||||
autocomplete,
|
autocomplete,
|
||||||
|
collections,
|
||||||
|
saveRequest,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -475,7 +492,9 @@
|
|||||||
'application/x-www-form-urlencoded',
|
'application/x-www-form-urlencoded',
|
||||||
'text/html',
|
'text/html',
|
||||||
'text/plain'
|
'text/plain'
|
||||||
]
|
],
|
||||||
|
showRequestModal: false,
|
||||||
|
editRequest: {},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@@ -530,9 +549,38 @@
|
|||||||
this.path = path;
|
this.path = path;
|
||||||
},
|
},
|
||||||
deep: true
|
deep: true
|
||||||
|
},
|
||||||
|
selectedRequest (newValue, oldValue) {
|
||||||
|
// @TODO: Convert all variables to single request variable
|
||||||
|
if (!newValue) return;
|
||||||
|
this.url = newValue.url;
|
||||||
|
this.path = newValue.path;
|
||||||
|
this.method = newValue.method;
|
||||||
|
this.auth = newValue.auth;
|
||||||
|
this.httpUser = newValue.httpUser;
|
||||||
|
this.httpPassword = newValue.httpPassword;
|
||||||
|
this.passwordFieldType = newValue.passwordFieldType;
|
||||||
|
this.bearerToken = newValue.bearerToken;
|
||||||
|
this.headers = newValue.headers;
|
||||||
|
this.params = newValue.params;
|
||||||
|
this.bodyParams = newValue.bodyParams;
|
||||||
|
this.rawParams = newValue.rawParams;
|
||||||
|
this.rawInput = newValue.rawInput;
|
||||||
|
this.contentType = newValue.contentType;
|
||||||
|
this.requestType = newValue.requestType;
|
||||||
|
},
|
||||||
|
editingRequest (newValue) {
|
||||||
|
this.editRequest = newValue;
|
||||||
|
this.showRequestModal = true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
selectedRequest() {
|
||||||
|
return this.$store.state.postwoman.selectedRequest;
|
||||||
|
},
|
||||||
|
editingRequest() {
|
||||||
|
return this.$store.state.postwoman.editingRequest;
|
||||||
|
},
|
||||||
requestName() {
|
requestName() {
|
||||||
return this.label
|
return this.label
|
||||||
},
|
},
|
||||||
@@ -1120,7 +1168,36 @@
|
|||||||
this.$toast.info('Cleared', {
|
this.$toast.info('Cleared', {
|
||||||
icon: 'clear_all'
|
icon: 'clear_all'
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
|
saveRequest() {
|
||||||
|
this.editRequest = {
|
||||||
|
url: this.url,
|
||||||
|
path: this.path,
|
||||||
|
method: this.method,
|
||||||
|
auth: this.auth,
|
||||||
|
httpUser: this.httpUser,
|
||||||
|
httpPassword: this.httpPassword,
|
||||||
|
passwordFieldType: this.passwordFieldType,
|
||||||
|
bearerToken: this.bearerToken,
|
||||||
|
headers: this.headers,
|
||||||
|
params: this.params,
|
||||||
|
bodyParams: this.bodyParams,
|
||||||
|
rawParams: this.rawParams,
|
||||||
|
rawInput: this.rawInput,
|
||||||
|
contentType: this.contentType,
|
||||||
|
requestType: this.requestType,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.selectedRequest.url) {
|
||||||
|
this.editRequest = Object.assign({}, this.selectedRequest, this.editRequest);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showRequestModal = true;
|
||||||
|
},
|
||||||
|
hideRequestModal() {
|
||||||
|
this.showRequestModal = false;
|
||||||
|
this.editRequest = {};
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.observeRequestButton();
|
this.observeRequestButton();
|
||||||
|
|||||||
@@ -42,7 +42,14 @@ export const SETTINGS_KEYS = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export const state = () => ({
|
export const state = () => ({
|
||||||
settings: {}
|
settings: {},
|
||||||
|
collections: [{
|
||||||
|
name: 'My First Collection',
|
||||||
|
folders: [],
|
||||||
|
requests: [],
|
||||||
|
}],
|
||||||
|
selectedRequest: {},
|
||||||
|
editingRequest: {},
|
||||||
});
|
});
|
||||||
|
|
||||||
export const mutations = {
|
export const mutations = {
|
||||||
@@ -59,6 +66,94 @@ export const mutations = {
|
|||||||
if (!SETTINGS_KEYS.includes(key)) throw new Error("The settings structure does not include the key " + key);
|
if (!SETTINGS_KEYS.includes(key)) throw new Error("The settings structure does not include the key " + key);
|
||||||
|
|
||||||
state.settings[key] = value;
|
state.settings[key] = value;
|
||||||
}
|
},
|
||||||
|
|
||||||
|
addCollection (state, newCollection) {
|
||||||
|
state.collections.push(newCollection);
|
||||||
|
},
|
||||||
|
|
||||||
|
removeCollection (state, payload) {
|
||||||
|
const { collectionIndex } = payload;
|
||||||
|
state.collections.splice(collectionIndex, 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
saveCollection (state, payload) {
|
||||||
|
const { savedCollection } = payload;
|
||||||
|
state.collections[savedCollection.collectionIndex] = savedCollection;
|
||||||
|
},
|
||||||
|
|
||||||
|
addFolder (state, payload) {
|
||||||
|
const { collectionIndex, folder } = payload;
|
||||||
|
state.collections[collectionIndex].folders.push(folder);
|
||||||
|
},
|
||||||
|
|
||||||
|
removeFolder (state, payload) {
|
||||||
|
const { collectionIndex, folderIndex } = payload;
|
||||||
|
state.collections[collectionIndex].folders.splice(folderIndex, 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
saveFolder (state, payload) {
|
||||||
|
const { savedFolder } = payload;
|
||||||
|
state.collections[savedFolder.collectionIndex].folders[savedFolder.folderIndex] = savedFolder;
|
||||||
|
},
|
||||||
|
|
||||||
|
addRequest (state, payload) {
|
||||||
|
const { request } = payload;
|
||||||
|
|
||||||
|
// Request that is directly attached to collection
|
||||||
|
if (request.folder === -1) {
|
||||||
|
state.collections[request.collection].requests.push(request);
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
state.collections[request.collection].folders[request.folder].requests.push(request);
|
||||||
|
},
|
||||||
|
|
||||||
|
saveRequest (state, payload) {
|
||||||
|
const { request } = payload;
|
||||||
|
|
||||||
|
// Remove the old request from collection
|
||||||
|
if (request.hasOwnProperty('oldCollection') && request.oldCollection > -1) {
|
||||||
|
const folder = request.hasOwnProperty('oldFolder') && request.oldFolder >= -1 ? request.oldFolder : request.folder;
|
||||||
|
if (folder > -1) {
|
||||||
|
state.collections[request.oldCollection].folders[folder].requests.splice(request.requestIndex, 1)
|
||||||
|
} else {
|
||||||
|
state.collections[request.oldCollection].requests.splice(request.requestIndex, 1)
|
||||||
|
}
|
||||||
|
} else if (request.hasOwnProperty('oldFolder') && request.oldFolder !== -1) {
|
||||||
|
state.collections[request.collection].folders[folder].requests.splice(request.requestIndex, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
delete request.oldCollection;
|
||||||
|
delete request.oldFolder;
|
||||||
|
|
||||||
|
// Request that is directly attached to collection
|
||||||
|
if (request.folder === -1) {
|
||||||
|
state.collections[request.collection].requests[request.requestIndex] = request;
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
state.collections[request.collection].folders[request.folder].requests[request.requestIndex] = request;
|
||||||
|
},
|
||||||
|
|
||||||
|
removeRequest (state, payload) {
|
||||||
|
const { collectionIndex, folderIndex, requestIndex } = payload;
|
||||||
|
|
||||||
|
// Request that is directly attached to collection
|
||||||
|
if (folderIndex === -1) {
|
||||||
|
state.collections[collectionIndex].requests.splice(requestIndex, 1)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
state.collections[collectionIndex].folders[folderIndex].requests.splice(requestIndex, 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
selectRequest (state, payload) {
|
||||||
|
state.selectedRequest = Object.assign({}, payload.request);
|
||||||
|
},
|
||||||
|
|
||||||
|
editRequest (state, payload) {
|
||||||
|
state.editingRequest = Object.assign({}, payload.request);
|
||||||
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user