Initial collections
This commit is contained in:
Keith Holliday
66
components/collections/addCollection.vue
Normal file
66
components/collections/addCollection.vue
Normal file
@@ -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>
|
||||
62
components/collections/addFolder.vue
Normal file
62
components/collections/addFolder.vue
Normal file
@@ -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>
|
||||
99
components/collections/collection.vue
Normal file
99
components/collections/collection.vue
Normal file
@@ -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>
|
||||
61
components/collections/folder.vue
Normal file
61
components/collections/folder.vue
Normal file
@@ -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>
|
||||
73
components/collections/index.vue
Normal file
73
components/collections/index.vue
Normal file
@@ -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>
|
||||
18
components/collections/request.vue
Normal file
18
components/collections/request.vue
Normal file
@@ -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>
|
||||
@@ -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();
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user