: rotating_light: Lint
This commit is contained in:
Liyas Thomas
@@ -1,64 +1,64 @@
|
||||
<template>
|
||||
<div>
|
||||
<modal v-if="show" @close="hideModal">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<h3 class="title">New Collection</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal" >
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<modal v-if="show" @close="hideModal">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<h3 class="title">New Collection</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="text" v-model="name" placeholder="My New Collection" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="addNewCollection">
|
||||
<i class="material-icons">add</i>
|
||||
<span>Create</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</modal>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="text" v-model="name" placeholder="My New Collection" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="addNewCollection">
|
||||
<i class="material-icons">add</i>
|
||||
<span>Create</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modal from "../../components/modal";
|
||||
import modal from "../../components/modal";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
props: {
|
||||
show: Boolean,
|
||||
show: Boolean
|
||||
},
|
||||
components: {
|
||||
modal,
|
||||
modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: undefined,
|
||||
}
|
||||
return {
|
||||
name: undefined
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addNewCollection() {
|
||||
this.$store.commit('postwoman/addNewCollection', { name: this.$data.name })
|
||||
this.$emit('hide-modal')
|
||||
},
|
||||
hideModal() {
|
||||
this.$emit('hide-modal')
|
||||
},
|
||||
},
|
||||
};
|
||||
addNewCollection() {
|
||||
this.$store.commit("postwoman/addNewCollection", {
|
||||
name: this.$data.name
|
||||
});
|
||||
this.$emit("hide-modal");
|
||||
},
|
||||
hideModal() {
|
||||
this.$emit("hide-modal");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,64 +1,67 @@
|
||||
<template>
|
||||
<modal v-if="show" @close="show = false">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<h3 class="title">New Folder</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="text" v-model="name" placeholder="My New Folder" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="addNewFolder">
|
||||
<i class="material-icons">add</i>
|
||||
<span>Create</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</modal>
|
||||
<modal v-if="show" @close="show = false">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<h3 class="title">New Folder</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="text" v-model="name" placeholder="My New Folder" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="addNewFolder">
|
||||
<i class="material-icons">add</i>
|
||||
<span>Create</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modal from "../../components/modal";
|
||||
import modal from "../../components/modal";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
props: {
|
||||
show : Boolean,
|
||||
collection : Object,
|
||||
collectionIndex : Number,
|
||||
show: Boolean,
|
||||
collection: Object,
|
||||
collectionIndex: Number
|
||||
},
|
||||
components: {
|
||||
modal,
|
||||
modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: undefined,
|
||||
}
|
||||
return {
|
||||
name: undefined
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addNewFolder() {
|
||||
this.$store.commit('postwoman/addNewFolder', { folder: { name: this.$data.name }, collectionIndex: this.$props.collectionIndex })
|
||||
this.hideModal()
|
||||
},
|
||||
hideModal() {
|
||||
this.$emit('hide-modal')
|
||||
},
|
||||
},
|
||||
};
|
||||
addNewFolder() {
|
||||
this.$store.commit("postwoman/addNewFolder", {
|
||||
folder: { name: this.$data.name },
|
||||
collectionIndex: this.$props.collectionIndex
|
||||
});
|
||||
this.hideModal();
|
||||
},
|
||||
hideModal() {
|
||||
this.$emit("hide-modal");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,103 +1,103 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex-wrap">
|
||||
<div>
|
||||
<button class="icon" @click="toggleShowChildren">
|
||||
<i class="material-icons" v-show='!showChildren'>arrow_right</i>
|
||||
<i class="material-icons" v-show='showChildren'>arrow_drop_down</i>
|
||||
<i class="material-icons">folder</i>
|
||||
<span>{{collection.name}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon" @click="removeCollection" v-tooltip="'Delete collection'">
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
<button class="icon" @click="$emit('edit-collection')" v-tooltip="'Edit collection'">
|
||||
<i class="material-icons">create</i>
|
||||
</button>
|
||||
<button class="icon" @click="$emit('add-folder')" v-tooltip="'New Folder'">
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="showChildren">
|
||||
<ul>
|
||||
<li v-for="(folder, index) in collection.folders" :key="folder.name">
|
||||
<folder
|
||||
v-bind:folder = "folder"
|
||||
v-bind:folderIndex = "index"
|
||||
v-bind:collection-index = "collectionIndex"
|
||||
v-on:edit-folder = "editFolder(collectionIndex, folder, index)"
|
||||
v-on:edit-request = "$emit('edit-request', $event)"
|
||||
/>
|
||||
</li>
|
||||
<li v-if="(collection.folders.length === 0) && (collection.requests.length === 0)">
|
||||
<label>Collection is empty</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li v-for="(request, index) in collection.requests" :key="index">
|
||||
<request
|
||||
v-bind:request = "request"
|
||||
v-bind:collection-index = "collectionIndex"
|
||||
v-bind:folder-index = "-1"
|
||||
v-bind:request-index = "index"
|
||||
v-on:edit-request = "$emit('edit-request', { request, collectionIndex, folderIndex: undefined, requestIndex: index })"
|
||||
></request>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex-wrap">
|
||||
<div>
|
||||
<button class="icon" @click="toggleShowChildren">
|
||||
<i class="material-icons" v-show="!showChildren">arrow_right</i>
|
||||
<i class="material-icons" v-show="showChildren">arrow_drop_down</i>
|
||||
<i class="material-icons">folder</i>
|
||||
<span>{{collection.name}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon" @click="removeCollection" v-tooltip="'Delete collection'">
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
<button class="icon" @click="$emit('edit-collection')" v-tooltip="'Edit collection'">
|
||||
<i class="material-icons">create</i>
|
||||
</button>
|
||||
<button class="icon" @click="$emit('add-folder')" v-tooltip="'New Folder'">
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="showChildren">
|
||||
<ul>
|
||||
<li v-for="(folder, index) in collection.folders" :key="folder.name">
|
||||
<folder
|
||||
v-bind:folder="folder"
|
||||
v-bind:folderIndex="index"
|
||||
v-bind:collection-index="collectionIndex"
|
||||
v-on:edit-folder="editFolder(collectionIndex, folder, index)"
|
||||
v-on:edit-request="$emit('edit-request', $event)"
|
||||
/>
|
||||
</li>
|
||||
<li v-if="(collection.folders.length === 0) && (collection.requests.length === 0)">
|
||||
<label>Collection is empty</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li v-for="(request, index) in collection.requests" :key="index">
|
||||
<request
|
||||
v-bind:request="request"
|
||||
v-bind:collection-index="collectionIndex"
|
||||
v-bind:folder-index="-1"
|
||||
v-bind:request-index="index"
|
||||
v-on:edit-request="$emit('edit-request', { request, collectionIndex, folderIndex: undefined, requestIndex: index })"
|
||||
></request>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--brd-color);
|
||||
}
|
||||
ul li {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--brd-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import folder from './folder';
|
||||
import request from './request';
|
||||
import folder from "./folder";
|
||||
import request from "./request";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
components: {
|
||||
folder,
|
||||
request,
|
||||
folder,
|
||||
request
|
||||
},
|
||||
props: {
|
||||
collectionIndex : Number,
|
||||
collection : Object,
|
||||
collectionIndex: Number,
|
||||
collection: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showChildren : false,
|
||||
selectedFolder : {},
|
||||
};
|
||||
data() {
|
||||
return {
|
||||
showChildren: false,
|
||||
selectedFolder: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleShowChildren() {
|
||||
this.showChildren = !this.showChildren;
|
||||
},
|
||||
removeCollection() {
|
||||
if (!confirm("Are you sure you want to remove this collection?")) return;
|
||||
this.$store.commit('postwoman/removeCollection', {
|
||||
collectionIndex: this.collectionIndex,
|
||||
});
|
||||
},
|
||||
editFolder(collectionIndex, folder, folderIndex) {
|
||||
this.$emit('edit-folder', { collectionIndex, folder, folderIndex })
|
||||
},
|
||||
toggleShowChildren() {
|
||||
this.showChildren = !this.showChildren;
|
||||
},
|
||||
removeCollection() {
|
||||
if (!confirm("Are you sure you want to remove this collection?")) return;
|
||||
this.$store.commit("postwoman/removeCollection", {
|
||||
collectionIndex: this.collectionIndex
|
||||
});
|
||||
},
|
||||
editFolder(collectionIndex, folder, folderIndex) {
|
||||
this.$emit("edit-folder", { collectionIndex, folder, folderIndex });
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,67 +1,71 @@
|
||||
<template>
|
||||
<div>
|
||||
<modal v-if="show" @close="hideModel">
|
||||
<div slot='header'>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<h3 class="title">Edit Collection</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModel" >
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<modal v-if="show" @close="hideModel">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<h3 class="title">Edit Collection</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModel">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="text" v-model="name" v-bind:placeholder="editingCollection.name" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="saveCollection">
|
||||
<i class="material-icons">save</i>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</modal>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="text" v-model="name" v-bind:placeholder="editingCollection.name" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="saveCollection">
|
||||
<i class="material-icons">save</i>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modal from "../../components/modal";
|
||||
import modal from "../../components/modal";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
props: {
|
||||
show : Boolean,
|
||||
editingCollection : Object,
|
||||
editingCollectionIndex : Number,
|
||||
show: Boolean,
|
||||
editingCollection: Object,
|
||||
editingCollectionIndex: Number
|
||||
},
|
||||
components: {
|
||||
modal,
|
||||
modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: undefined,
|
||||
}
|
||||
return {
|
||||
name: undefined
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
saveCollection() {
|
||||
const collectionUpdated = { ...this.$props.editingCollection, name: this.$data.name }
|
||||
this.$store.commit('postwoman/editCollection', { collection: collectionUpdated, collectionIndex: this.$props.editingCollectionIndex })
|
||||
this.$emit('hide-modal');
|
||||
},
|
||||
hideModel() {
|
||||
this.$emit('hide-modal');
|
||||
},
|
||||
},
|
||||
};
|
||||
saveCollection() {
|
||||
const collectionUpdated = {
|
||||
...this.$props.editingCollection,
|
||||
name: this.$data.name
|
||||
};
|
||||
this.$store.commit("postwoman/editCollection", {
|
||||
collection: collectionUpdated,
|
||||
collectionIndex: this.$props.editingCollectionIndex
|
||||
});
|
||||
this.$emit("hide-modal");
|
||||
},
|
||||
hideModel() {
|
||||
this.$emit("hide-modal");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,70 +1,70 @@
|
||||
<template>
|
||||
<modal v-if="show" @close="show = false">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<h3 class="title">Edit Folder</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="text" v-model="name" v-bind:placeholder="folder.name" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="editFolder">
|
||||
<i class="material-icons">add</i>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</modal>
|
||||
<modal v-if="show" @close="show = false">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<h3 class="title">Edit Folder</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="text" v-model="name" v-bind:placeholder="folder.name" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="editFolder">
|
||||
<i class="material-icons">add</i>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modal from "../../components/modal";
|
||||
import modal from "../../components/modal";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
props: {
|
||||
show : Boolean,
|
||||
collection : Object,
|
||||
collectionIndex : Number,
|
||||
folder : Object,
|
||||
folderIndex : Number,
|
||||
show: Boolean,
|
||||
collection: Object,
|
||||
collectionIndex: Number,
|
||||
folder: Object,
|
||||
folderIndex: Number
|
||||
},
|
||||
components: {
|
||||
modal,
|
||||
modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: undefined,
|
||||
}
|
||||
return {
|
||||
name: undefined
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
editFolder() {
|
||||
this.$store.commit('postwoman/editFolder', {
|
||||
collectionIndex : this.$props.collectionIndex,
|
||||
folder : { ...this.$props.folder, name: this.$data.name },
|
||||
folderIndex : this.$props.folderIndex,
|
||||
})
|
||||
this.hideModal()
|
||||
},
|
||||
hideModal() {
|
||||
this.$emit('hide-modal')
|
||||
},
|
||||
},
|
||||
};
|
||||
editFolder() {
|
||||
this.$store.commit("postwoman/editFolder", {
|
||||
collectionIndex: this.$props.collectionIndex,
|
||||
folder: { ...this.$props.folder, name: this.$data.name },
|
||||
folderIndex: this.$props.folderIndex
|
||||
});
|
||||
this.hideModal();
|
||||
},
|
||||
hideModal() {
|
||||
this.$emit("hide-modal");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,132 +1,122 @@
|
||||
<!--
|
||||
Made this component to be separate from `saveRequest` as it handles request editing
|
||||
only related to it's positioning and naming inside of collections.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<modal v-if="show" @close="hideModal">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<h3 class="title">Edit Request</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<modal v-if="show" @close="hideModal">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<h3 class="title">Edit Request</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="text" v-model="requestUpdateData.name" v-bind:placeholder="request.name" />
|
||||
<select type="text" v-model="requestUpdateData.collectionIndex" >
|
||||
<option
|
||||
v-for="(collection, index) in $store.state.postwoman.collections"
|
||||
:key = "index"
|
||||
:value = "index">
|
||||
{{ collection.name }}
|
||||
</option>
|
||||
</select>
|
||||
<select type="text" v-model="requestUpdateData.folderIndex">
|
||||
<option
|
||||
:key = "undefined"
|
||||
:value = "undefined">
|
||||
</option>
|
||||
<option
|
||||
v-for="(folder, index) in folders"
|
||||
:key = "index"
|
||||
:value = "index">
|
||||
{{ folder.name }}
|
||||
</option>
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="saveRequest">
|
||||
<i class="material-icons">save</i>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</modal>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="text" v-model="requestUpdateData.name" v-bind:placeholder="request.name" />
|
||||
<select type="text" v-model="requestUpdateData.collectionIndex">
|
||||
<option
|
||||
v-for="(collection, index) in $store.state.postwoman.collections"
|
||||
:key="index"
|
||||
:value="index"
|
||||
>{{ collection.name }}</option>
|
||||
</select>
|
||||
<select type="text" v-model="requestUpdateData.folderIndex">
|
||||
<option :key="undefined" :value="undefined"></option>
|
||||
<option v-for="(folder, index) in folders" :key="index" :value="index">{{ folder.name }}</option>
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="saveRequest">
|
||||
<i class="material-icons">save</i>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modal from "../../components/modal";
|
||||
import modal from "../../components/modal";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
props: {
|
||||
show : Boolean,
|
||||
collectionIndex : Number,
|
||||
folderIndex : Number,
|
||||
request : Object,
|
||||
requestIndex : Number,
|
||||
show: Boolean,
|
||||
collectionIndex: Number,
|
||||
folderIndex: Number,
|
||||
request: Object,
|
||||
requestIndex: Number
|
||||
},
|
||||
components: {
|
||||
modal,
|
||||
modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
requestUpdateData : {
|
||||
name : undefined,
|
||||
collectionIndex : undefined,
|
||||
folderIndex : undefined,
|
||||
},
|
||||
return {
|
||||
requestUpdateData: {
|
||||
name: undefined,
|
||||
collectionIndex: undefined,
|
||||
folderIndex: undefined
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'requestUpdateData.collectionIndex': function resetFolderIndex() {
|
||||
"requestUpdateData.collectionIndex": function resetFolderIndex() {
|
||||
// if user choosen some folder, than selected other collection, which doesn't have any folders
|
||||
// than `requestUpdateData.folderIndex` won't be reseted
|
||||
this.$data.requestUpdateData.folderIndex = undefined
|
||||
},
|
||||
this.$data.requestUpdateData.folderIndex = undefined;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
folders() {
|
||||
const userSelectedAnyCollection = this.$data.requestUpdateData.collectionIndex !== undefined
|
||||
if (!userSelectedAnyCollection) return []
|
||||
folders() {
|
||||
const userSelectedAnyCollection =
|
||||
this.$data.requestUpdateData.collectionIndex !== undefined;
|
||||
if (!userSelectedAnyCollection) return [];
|
||||
|
||||
return this.$store.state.postwoman.collections[this.$data.requestUpdateData.collectionIndex].folders
|
||||
},
|
||||
return this.$store.state.postwoman.collections[
|
||||
this.$data.requestUpdateData.collectionIndex
|
||||
].folders;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
saveRequest() {
|
||||
const userSelectedAnyCollection = this.$data.requestUpdateData.collectionIndex !== undefined
|
||||
saveRequest() {
|
||||
const userSelectedAnyCollection =
|
||||
this.$data.requestUpdateData.collectionIndex !== undefined;
|
||||
|
||||
const requestUpdated = {
|
||||
...this.$props.request,
|
||||
name : this.$data.requestUpdateData.name || this.$props.request.name,
|
||||
collection : userSelectedAnyCollection ? this.$data.requestUpdateData.collectionIndex : this.$props.collectionIndex,
|
||||
folder : this.$data.requestUpdateData.folderIndex,
|
||||
}
|
||||
const requestUpdated = {
|
||||
...this.$props.request,
|
||||
name: this.$data.requestUpdateData.name || this.$props.request.name,
|
||||
collection: userSelectedAnyCollection
|
||||
? this.$data.requestUpdateData.collectionIndex
|
||||
: this.$props.collectionIndex,
|
||||
folder: this.$data.requestUpdateData.folderIndex
|
||||
};
|
||||
|
||||
// pass data separately to don't depend on request's collection, folder fields
|
||||
// probably, they should be deprecated because they don't describe request itself
|
||||
this.$store.commit('postwoman/editRequest', {
|
||||
requestOld : this.$props.request,
|
||||
requestOldCollectionIndex : this.$props.collectionIndex,
|
||||
requestOldFolderIndex : this.$props.folderIndex,
|
||||
requestOldIndex : this.$props.requestIndex,
|
||||
requestNew : requestUpdated,
|
||||
requestNewCollectionIndex : requestUpdated.collection,
|
||||
requestNewFolderIndex : requestUpdated.folder,
|
||||
});
|
||||
// pass data separately to don't depend on request's collection, folder fields
|
||||
// probably, they should be deprecated because they don't describe request itself
|
||||
this.$store.commit("postwoman/editRequest", {
|
||||
requestOld: this.$props.request,
|
||||
requestOldCollectionIndex: this.$props.collectionIndex,
|
||||
requestOldFolderIndex: this.$props.folderIndex,
|
||||
requestOldIndex: this.$props.requestIndex,
|
||||
requestNew: requestUpdated,
|
||||
requestNewCollectionIndex: requestUpdated.collection,
|
||||
requestNewFolderIndex: requestUpdated.folder
|
||||
});
|
||||
|
||||
this.hideModal()
|
||||
},
|
||||
hideModal() {
|
||||
this.$emit('hide-modal')
|
||||
},
|
||||
},
|
||||
};
|
||||
this.hideModal();
|
||||
},
|
||||
hideModal() {
|
||||
this.$emit("hide-modal");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,90 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex-wrap">
|
||||
<div>
|
||||
<button class="icon" @click="toggleShowChildren">
|
||||
<i class="material-icons" v-show='!showChildren'>arrow_right</i>
|
||||
<i class="material-icons" v-show='showChildren'>arrow_drop_down</i>
|
||||
<i class="material-icons">folder_open</i>
|
||||
<span>{{folder.name}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon" @click="removeFolder" v-tooltip="'Delete folder'">
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
<button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="showChildren">
|
||||
<ul>
|
||||
<li v-for="(request, index) in folder.requests" :key="index">
|
||||
<request
|
||||
v-bind:request = "request"
|
||||
v-bind:collection-index = "collectionIndex"
|
||||
v-bind:folder-index = "folderIndex"
|
||||
v-bind:request-index = "index"
|
||||
v-on:edit-request = "$emit('edit-request', { request, collectionIndex, folderIndex, requestIndex: index })"
|
||||
></request>
|
||||
</li>
|
||||
<li v-if="folder.requests.length === 0">
|
||||
<label>Folder is empty</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex-wrap">
|
||||
<div>
|
||||
<button class="icon" @click="toggleShowChildren">
|
||||
<i class="material-icons" v-show="!showChildren">arrow_right</i>
|
||||
<i class="material-icons" v-show="showChildren">arrow_drop_down</i>
|
||||
<i class="material-icons">folder_open</i>
|
||||
<span>{{folder.name}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon" @click="removeFolder" v-tooltip="'Delete folder'">
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
<button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="showChildren">
|
||||
<ul>
|
||||
<li v-for="(request, index) in folder.requests" :key="index">
|
||||
<request
|
||||
v-bind:request="request"
|
||||
v-bind:collection-index="collectionIndex"
|
||||
v-bind:folder-index="folderIndex"
|
||||
v-bind:request-index="index"
|
||||
v-on:edit-request="$emit('edit-request', { request, collectionIndex, folderIndex, requestIndex: index })"
|
||||
></request>
|
||||
</li>
|
||||
<li v-if="folder.requests.length === 0">
|
||||
<label>Folder is empty</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--brd-color);
|
||||
}
|
||||
ul li {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--brd-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import request from './request';
|
||||
import request from "./request";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
props: {
|
||||
folder : Object,
|
||||
collectionIndex : Number,
|
||||
folderIndex : Number,
|
||||
folder: Object,
|
||||
collectionIndex: Number,
|
||||
folderIndex: Number
|
||||
},
|
||||
components: {
|
||||
request,
|
||||
request
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showChildren: false,
|
||||
};
|
||||
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')
|
||||
},
|
||||
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");
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,110 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<modal v-if="show" @close="hideModel">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<h3 class="title">Import / Export Collections</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModel">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<modal v-if="show" @close="hideModel">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<h3 class="title">Import / Export Collections</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModel">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<textarea v-model='collectionJson' rows="8">
|
||||
</textarea>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="openDialogChooseFileToReplaceWith">
|
||||
<i class="material-icons">get_app</i>
|
||||
<span>Replace with JSON</span>
|
||||
<input type="file" @change="replaceWithJSON" style="display: none;" ref="inputChooseFileToReplaceWith">
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon" @click="openDialogChooseFileToImportFrom">
|
||||
<i class="material-icons">get_app</i>
|
||||
<span>Import from JSON</span>
|
||||
<input type="file" @change="importFromJSON" style="display: none;" ref="inputChooseFileToImportFrom">
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon" @click="exportJSON">
|
||||
<i class="material-icons">get_app</i>
|
||||
<span>Export JSON</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</modal>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<textarea v-model="collectionJson" rows="8"></textarea>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="openDialogChooseFileToReplaceWith">
|
||||
<i class="material-icons">get_app</i>
|
||||
<span>Replace with JSON</span>
|
||||
<input
|
||||
type="file"
|
||||
@change="replaceWithJSON"
|
||||
style="display: none;"
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
/>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon" @click="openDialogChooseFileToImportFrom">
|
||||
<i class="material-icons">get_app</i>
|
||||
<span>Import from JSON</span>
|
||||
<input
|
||||
type="file"
|
||||
@change="importFromJSON"
|
||||
style="display: none;"
|
||||
ref="inputChooseFileToImportFrom"
|
||||
/>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon" @click="exportJSON">
|
||||
<i class="material-icons">get_app</i>
|
||||
<span>Export JSON</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modal from "../../components/modal";
|
||||
import modal from "../../components/modal";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
props: {
|
||||
show: Boolean,
|
||||
show: Boolean
|
||||
},
|
||||
components: {
|
||||
modal,
|
||||
modal
|
||||
},
|
||||
computed: {
|
||||
collectionJson () {
|
||||
return JSON.stringify(this.$store.state.postwoman.collections, null, 2);
|
||||
}
|
||||
collectionJson() {
|
||||
return JSON.stringify(this.$store.state.postwoman.collections, null, 2);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideModel() {
|
||||
this.$emit('hide-modal');
|
||||
},
|
||||
openDialogChooseFileToReplaceWith() {
|
||||
this.$refs.inputChooseFileToReplaceWith.click();
|
||||
},
|
||||
openDialogChooseFileToImportFrom() {
|
||||
this.$refs.inputChooseFileToImportFrom.click();
|
||||
},
|
||||
replaceWithJSON() {
|
||||
let reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
let content = event.target.result;
|
||||
let collections = JSON.parse(content);
|
||||
this.$store.commit('postwoman/replaceCollections', collections);
|
||||
};
|
||||
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
|
||||
},
|
||||
importFromJSON() {
|
||||
let reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
let content = event.target.result;
|
||||
let collections = JSON.parse(content);
|
||||
this.$store.commit('postwoman/importCollections', collections);
|
||||
};
|
||||
reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
|
||||
},
|
||||
exportJSON() {
|
||||
let text = this.collectionJson;
|
||||
text = text.replace(/\n/g, '\r\n');
|
||||
let blob = new Blob([text], {
|
||||
type: 'text/json'
|
||||
});
|
||||
let anchor = document.createElement('a');
|
||||
anchor.download = 'postwoman-collection.json';
|
||||
anchor.href = window.URL.createObjectURL(blob);
|
||||
anchor.target = '_blank';
|
||||
anchor.style.display = 'none';
|
||||
document.body.appendChild(anchor);
|
||||
anchor.click();
|
||||
document.body.removeChild(anchor);
|
||||
}
|
||||
},
|
||||
};
|
||||
hideModel() {
|
||||
this.$emit("hide-modal");
|
||||
},
|
||||
openDialogChooseFileToReplaceWith() {
|
||||
this.$refs.inputChooseFileToReplaceWith.click();
|
||||
},
|
||||
openDialogChooseFileToImportFrom() {
|
||||
this.$refs.inputChooseFileToImportFrom.click();
|
||||
},
|
||||
replaceWithJSON() {
|
||||
let reader = new FileReader();
|
||||
reader.onload = event => {
|
||||
let content = event.target.result;
|
||||
let collections = JSON.parse(content);
|
||||
this.$store.commit("postwoman/replaceCollections", collections);
|
||||
};
|
||||
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
|
||||
},
|
||||
importFromJSON() {
|
||||
let reader = new FileReader();
|
||||
reader.onload = event => {
|
||||
let content = event.target.result;
|
||||
let collections = JSON.parse(content);
|
||||
this.$store.commit("postwoman/importCollections", collections);
|
||||
};
|
||||
reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
|
||||
},
|
||||
exportJSON() {
|
||||
let text = this.collectionJson;
|
||||
text = text.replace(/\n/g, "\r\n");
|
||||
let blob = new Blob([text], {
|
||||
type: "text/json"
|
||||
});
|
||||
let anchor = document.createElement("a");
|
||||
anchor.download = "postwoman-collection.json";
|
||||
anchor.href = window.URL.createObjectURL(blob);
|
||||
anchor.target = "_blank";
|
||||
anchor.style.display = "none";
|
||||
document.body.appendChild(anchor);
|
||||
anchor.click();
|
||||
document.body.removeChild(anchor);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -5,50 +5,41 @@ TODO:
|
||||
|
||||
<template>
|
||||
<div class="collections-wrapper">
|
||||
<addCollection
|
||||
v-bind:show = "showModalAdd"
|
||||
v-on:hide-modal = 'displayModalAdd(false)'
|
||||
>
|
||||
</addCollection>
|
||||
<addCollection v-bind:show="showModalAdd" v-on:hide-modal="displayModalAdd(false)"></addCollection>
|
||||
<editCollection
|
||||
v-bind:show = "showModalEdit"
|
||||
v-bind:editingCollection = "editingCollection"
|
||||
v-bind:editingCollectionIndex = "editingCollectionIndex"
|
||||
v-on:hide-modal = 'displayModalEdit(false)'
|
||||
>
|
||||
</editCollection>
|
||||
v-bind:show="showModalEdit"
|
||||
v-bind:editingCollection="editingCollection"
|
||||
v-bind:editingCollectionIndex="editingCollectionIndex"
|
||||
v-on:hide-modal="displayModalEdit(false)"
|
||||
></editCollection>
|
||||
<addFolder
|
||||
v-bind:show = "showModalAddFolder"
|
||||
v-bind:collection = "editingCollection"
|
||||
v-bind:collectionIndex = "editingCollectionIndex"
|
||||
v-on:hide-modal = 'displayModalAddFolder(false)'
|
||||
>
|
||||
</addFolder>
|
||||
v-bind:show="showModalAddFolder"
|
||||
v-bind:collection="editingCollection"
|
||||
v-bind:collectionIndex="editingCollectionIndex"
|
||||
v-on:hide-modal="displayModalAddFolder(false)"
|
||||
></addFolder>
|
||||
<editFolder
|
||||
v-bind:show = "showModalEditFolder"
|
||||
v-bind:collection = "editingCollection"
|
||||
v-bind:collectionIndex = "editingCollectionIndex"
|
||||
v-bind:folder = "editingFolder"
|
||||
v-bind:folderIndex = "editingFolderIndex"
|
||||
v-on:hide-modal = 'displayModalEditFolder(false)'
|
||||
>
|
||||
</editFolder>
|
||||
v-bind:show="showModalEditFolder"
|
||||
v-bind:collection="editingCollection"
|
||||
v-bind:collectionIndex="editingCollectionIndex"
|
||||
v-bind:folder="editingFolder"
|
||||
v-bind:folderIndex="editingFolderIndex"
|
||||
v-on:hide-modal="displayModalEditFolder(false)"
|
||||
></editFolder>
|
||||
<editRequest
|
||||
v-bind:show = "showModalEditRequest"
|
||||
v-bind:collectionIndex = "editingCollectionIndex"
|
||||
v-bind:folderIndex = "editingFolderIndex"
|
||||
v-bind:request = "editingRequest"
|
||||
v-bind:requestIndex = "editingRequestIndex"
|
||||
v-on:hide-modal = "displayModalEditRequest(false)"
|
||||
>
|
||||
</editRequest>
|
||||
v-bind:show="showModalEditRequest"
|
||||
v-bind:collectionIndex="editingCollectionIndex"
|
||||
v-bind:folderIndex="editingFolderIndex"
|
||||
v-bind:request="editingRequest"
|
||||
v-bind:requestIndex="editingRequestIndex"
|
||||
v-on:hide-modal="displayModalEditRequest(false)"
|
||||
></editRequest>
|
||||
<importExportCollections
|
||||
v-bind:show = "showModalImportExport"
|
||||
v-on:hide-modal = 'displayModalImportExport(false)'
|
||||
>
|
||||
</importExportCollections>
|
||||
v-bind:show="showModalImportExport"
|
||||
v-on:hide-modal="displayModalImportExport(false)"
|
||||
></importExportCollections>
|
||||
|
||||
<div class='flex-wrap'>
|
||||
<div class="flex-wrap">
|
||||
<div>
|
||||
<button class="icon" @click="displayModalAdd(true)">
|
||||
<i class="material-icons">add</i>
|
||||
@@ -66,14 +57,13 @@ TODO:
|
||||
<ul>
|
||||
<li v-for="(collection, index) in collections" :key="collection.name">
|
||||
<collection
|
||||
v-bind:collection-index = "index"
|
||||
v-bind:collection = "collection"
|
||||
v-on:edit-collection = "editCollection(collection, index)"
|
||||
v-on:add-folder = "addFolder(collection, index)"
|
||||
v-on:edit-folder = "editFolder($event)"
|
||||
v-on:edit-request = "editRequest($event)"
|
||||
>
|
||||
</collection>
|
||||
v-bind:collection-index="index"
|
||||
v-bind:collection="collection"
|
||||
v-on:edit-collection="editCollection(collection, index)"
|
||||
v-on:add-folder="addFolder(collection, index)"
|
||||
v-on:edit-folder="editFolder($event)"
|
||||
v-on:edit-request="editRequest($event)"
|
||||
></collection>
|
||||
</li>
|
||||
<li v-if="collections.length === 0">
|
||||
<label>Collections are empty</label>
|
||||
@@ -90,12 +80,12 @@ TODO:
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import addCollection from "./addCollection";
|
||||
import addFolder from "./addFolder";
|
||||
import collection from './collection'
|
||||
import editCollection from "./editCollection";
|
||||
import editFolder from "./editFolder";
|
||||
import editRequest from "./editRequest";
|
||||
import addCollection from "./addCollection";
|
||||
import addFolder from "./addFolder";
|
||||
import collection from "./collection";
|
||||
import editCollection from "./editCollection";
|
||||
import editFolder from "./editFolder";
|
||||
import editRequest from "./editRequest";
|
||||
import importExportCollections from "./importExportCollections";
|
||||
|
||||
export default {
|
||||
@@ -106,96 +96,90 @@ TODO:
|
||||
editCollection,
|
||||
editFolder,
|
||||
editRequest,
|
||||
importExportCollections,
|
||||
importExportCollections
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showModalAdd : false,
|
||||
showModalEdit : false,
|
||||
showModalImportExport : false,
|
||||
showModalAddFolder : false,
|
||||
showModalEditFolder : false,
|
||||
showModalEditRequest : false,
|
||||
editingCollection : undefined,
|
||||
editingCollectionIndex : undefined,
|
||||
editingFolder : undefined,
|
||||
editingFolderIndex : undefined,
|
||||
editingRequest : undefined,
|
||||
editingRequestIndex : undefined,
|
||||
}
|
||||
showModalAdd: false,
|
||||
showModalEdit: false,
|
||||
showModalImportExport: false,
|
||||
showModalAddFolder: false,
|
||||
showModalEditFolder: false,
|
||||
showModalEditRequest: false,
|
||||
editingCollection: undefined,
|
||||
editingCollectionIndex: undefined,
|
||||
editingFolder: undefined,
|
||||
editingFolderIndex: undefined,
|
||||
editingRequest: undefined,
|
||||
editingRequestIndex: undefined
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
collections () {
|
||||
return this.$store.state.postwoman.collections
|
||||
collections() {
|
||||
return this.$store.state.postwoman.collections;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
displayModalAdd(shouldDisplay) {
|
||||
this.showModalAdd = shouldDisplay
|
||||
this.showModalAdd = shouldDisplay;
|
||||
},
|
||||
displayModalEdit(shouldDisplay) {
|
||||
this.showModalEdit = shouldDisplay
|
||||
this.showModalEdit = shouldDisplay;
|
||||
|
||||
if (!shouldDisplay)
|
||||
this.resetSelectedData()
|
||||
if (!shouldDisplay) this.resetSelectedData();
|
||||
},
|
||||
displayModalImportExport(shouldDisplay) {
|
||||
this.showModalImportExport = shouldDisplay
|
||||
this.showModalImportExport = shouldDisplay;
|
||||
},
|
||||
displayModalAddFolder(shouldDisplay) {
|
||||
this.showModalAddFolder = shouldDisplay
|
||||
this.showModalAddFolder = shouldDisplay;
|
||||
|
||||
if (!shouldDisplay)
|
||||
this.resetSelectedData()
|
||||
if (!shouldDisplay) this.resetSelectedData();
|
||||
},
|
||||
displayModalEditFolder(shouldDisplay) {
|
||||
this.showModalEditFolder = shouldDisplay
|
||||
this.showModalEditFolder = shouldDisplay;
|
||||
|
||||
if (!shouldDisplay)
|
||||
this.resetSelectedData()
|
||||
if (!shouldDisplay) this.resetSelectedData();
|
||||
},
|
||||
displayModalEditRequest(shouldDisplay) {
|
||||
this.showModalEditRequest = shouldDisplay
|
||||
this.showModalEditRequest = shouldDisplay;
|
||||
|
||||
if (!shouldDisplay)
|
||||
this.resetSelectedData()
|
||||
if (!shouldDisplay) this.resetSelectedData();
|
||||
},
|
||||
editCollection(collection, collectionIndex) {
|
||||
this.$data.editingCollection = collection
|
||||
this.$data.editingCollectionIndex = collectionIndex
|
||||
this.displayModalEdit(true)
|
||||
this.$data.editingCollection = collection;
|
||||
this.$data.editingCollectionIndex = collectionIndex;
|
||||
this.displayModalEdit(true);
|
||||
},
|
||||
addFolder(collection, collectionIndex) {
|
||||
this.$data.editingCollection = collection
|
||||
this.$data.editingCollectionIndex = collectionIndex
|
||||
this.displayModalAddFolder(true)
|
||||
this.$data.editingCollection = collection;
|
||||
this.$data.editingCollectionIndex = collectionIndex;
|
||||
this.displayModalAddFolder(true);
|
||||
},
|
||||
editFolder(payload) {
|
||||
const { collectionIndex, folder, folderIndex } = payload
|
||||
this.$data.editingCollection = collection
|
||||
this.$data.editingCollectionIndex = collectionIndex
|
||||
this.$data.editingFolder = folder
|
||||
this.$data.editingFolderIndex = folderIndex
|
||||
this.displayModalEditFolder(true)
|
||||
const { collectionIndex, folder, folderIndex } = payload;
|
||||
this.$data.editingCollection = collection;
|
||||
this.$data.editingCollectionIndex = collectionIndex;
|
||||
this.$data.editingFolder = folder;
|
||||
this.$data.editingFolderIndex = folderIndex;
|
||||
this.displayModalEditFolder(true);
|
||||
},
|
||||
editRequest(payload) {
|
||||
const { request, collectionIndex, folderIndex, requestIndex } = payload
|
||||
this.$data.editingCollectionIndex = collectionIndex
|
||||
this.$data.editingFolderIndex = folderIndex
|
||||
this.$data.editingRequest = request
|
||||
this.$data.editingRequestIndex = requestIndex
|
||||
this.displayModalEditRequest(true)
|
||||
|
||||
const { request, collectionIndex, folderIndex, requestIndex } = payload;
|
||||
this.$data.editingCollectionIndex = collectionIndex;
|
||||
this.$data.editingFolderIndex = folderIndex;
|
||||
this.$data.editingRequest = request;
|
||||
this.$data.editingRequestIndex = requestIndex;
|
||||
this.displayModalEditRequest(true);
|
||||
},
|
||||
resetSelectedData() {
|
||||
this.$data.editingCollection = undefined
|
||||
this.$data.editingCollectionIndex = undefined
|
||||
this.$data.editingFolder = undefined
|
||||
this.$data.editingFolderIndex = undefined
|
||||
this.$data.editingRequest = undefined
|
||||
this.$data.editingRequestIndex = undefined
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
this.$data.editingCollection = undefined;
|
||||
this.$data.editingCollectionIndex = undefined;
|
||||
this.$data.editingFolder = undefined;
|
||||
this.$data.editingFolderIndex = undefined;
|
||||
this.$data.editingRequest = undefined;
|
||||
this.$data.editingRequestIndex = undefined;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,55 +1,55 @@
|
||||
<template>
|
||||
<div class="flex-wrap">
|
||||
<div>
|
||||
<button class="icon" @click="selectRequest()" v-tooltip="'Use request'">
|
||||
<i class="material-icons">insert_drive_file</i>
|
||||
<span>{{request.name}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon" @click="removeRequest" v-tooltip="'Delete request'">
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
<button class="icon" @click="$emit('edit-request')" v-tooltip="'Edit request'">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-wrap">
|
||||
<div>
|
||||
<button class="icon" @click="selectRequest()" v-tooltip="'Use request'">
|
||||
<i class="material-icons">insert_drive_file</i>
|
||||
<span>{{request.name}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon" @click="removeRequest" v-tooltip="'Delete request'">
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
<button class="icon" @click="$emit('edit-request')" v-tooltip="'Edit request'">
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--brd-color);
|
||||
}
|
||||
ul li {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--brd-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
props: {
|
||||
request : Object,
|
||||
collectionIndex : Number,
|
||||
folderIndex : Number,
|
||||
requestIndex : Number,
|
||||
request: Object,
|
||||
collectionIndex: Number,
|
||||
folderIndex: Number,
|
||||
requestIndex: Number
|
||||
},
|
||||
methods: {
|
||||
selectRequest() {
|
||||
this.$store.commit('postwoman/selectRequest', { 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,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
selectRequest() {
|
||||
this.$store.commit("postwoman/selectRequest", { 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>
|
||||
|
||||
@@ -1,158 +1,154 @@
|
||||
<template>
|
||||
<div>
|
||||
<modal v-if="show" @close="hideModal">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<h3 class="title">Save Request As</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<modal v-if="show" @close="hideModal">
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<h3 class="title">Save Request As</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="text" v-model="requestData.name" v-bind:placeholder="defaultRequestName" />
|
||||
<select type="text" v-model="requestData.collectionIndex" >
|
||||
<option
|
||||
v-for="(collection, index) in $store.state.postwoman.collections"
|
||||
:key = "index"
|
||||
:value = "index">
|
||||
{{ collection.name }}
|
||||
</option>
|
||||
</select>
|
||||
<select type="text" v-model="requestData.folderIndex" >
|
||||
<option
|
||||
:key = "undefined"
|
||||
:value = "undefined">
|
||||
</option>
|
||||
<option
|
||||
v-for="(folder, index) in folders"
|
||||
:key = "index"
|
||||
:value = "index">
|
||||
{{ folder.name }}
|
||||
</option>
|
||||
</select>
|
||||
<select type="text" v-model="requestData.requestIndex" >
|
||||
<option
|
||||
:key = "undefined"
|
||||
:value = "undefined">
|
||||
</option>
|
||||
<option
|
||||
v-for ="(folder, index) in requests"
|
||||
:key = "index"
|
||||
:value = "index">
|
||||
{{ folder.name }}
|
||||
</option>
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="saveRequestAs">
|
||||
<i class="material-icons">save</i>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</modal>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="text" v-model="requestData.name" v-bind:placeholder="defaultRequestName" />
|
||||
<select type="text" v-model="requestData.collectionIndex">
|
||||
<option
|
||||
v-for="(collection, index) in $store.state.postwoman.collections"
|
||||
:key="index"
|
||||
:value="index"
|
||||
>{{ collection.name }}</option>
|
||||
</select>
|
||||
<select type="text" v-model="requestData.folderIndex">
|
||||
<option :key="undefined" :value="undefined"></option>
|
||||
<option v-for="(folder, index) in folders" :key="index" :value="index">{{ folder.name }}</option>
|
||||
</select>
|
||||
<select type="text" v-model="requestData.requestIndex">
|
||||
<option :key="undefined" :value="undefined"></option>
|
||||
<option
|
||||
v-for="(folder, index) in requests"
|
||||
:key="index"
|
||||
:value="index"
|
||||
>{{ folder.name }}</option>
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="saveRequestAs">
|
||||
<i class="material-icons">save</i>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modal from "../../components/modal";
|
||||
import modal from "../../components/modal";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
props: {
|
||||
show : Boolean,
|
||||
editingRequest : Object,
|
||||
show: Boolean,
|
||||
editingRequest: Object
|
||||
},
|
||||
components: {
|
||||
modal,
|
||||
modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultRequestName : 'My New Request',
|
||||
requestData : {
|
||||
name : undefined,
|
||||
collectionIndex : undefined,
|
||||
folderIndex : undefined,
|
||||
requestIndex : undefined,
|
||||
},
|
||||
return {
|
||||
defaultRequestName: "My New Request",
|
||||
requestData: {
|
||||
name: undefined,
|
||||
collectionIndex: undefined,
|
||||
folderIndex: undefined,
|
||||
requestIndex: undefined
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'requestData.collectionIndex': function resetFolderAndRequestIndex() {
|
||||
// if user choosen some folder, than selected other collection, which doesn't have any folders
|
||||
// than `requestUpdateData.folderIndex` won't be reseted
|
||||
this.$data.requestData.folderIndex = undefined
|
||||
this.$data.requestData.requestIndex = undefined
|
||||
},
|
||||
'requestData.folderIndex': function resetRequestIndex() {
|
||||
this.$data.requestData.requestIndex = undefined
|
||||
},
|
||||
"requestData.collectionIndex": function resetFolderAndRequestIndex() {
|
||||
// if user choosen some folder, than selected other collection, which doesn't have any folders
|
||||
// than `requestUpdateData.folderIndex` won't be reseted
|
||||
this.$data.requestData.folderIndex = undefined;
|
||||
this.$data.requestData.requestIndex = undefined;
|
||||
},
|
||||
"requestData.folderIndex": function resetRequestIndex() {
|
||||
this.$data.requestData.requestIndex = undefined;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
folders() {
|
||||
const userSelectedAnyCollection = this.$data.requestData.collectionIndex !== undefined
|
||||
if (!userSelectedAnyCollection) return []
|
||||
folders() {
|
||||
const userSelectedAnyCollection =
|
||||
this.$data.requestData.collectionIndex !== undefined;
|
||||
if (!userSelectedAnyCollection) return [];
|
||||
|
||||
return this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex].folders
|
||||
},
|
||||
requests() {
|
||||
const userSelectedAnyCollection = this.$data.requestData.collectionIndex !== undefined
|
||||
if (!userSelectedAnyCollection) return []
|
||||
return this.$store.state.postwoman.collections[
|
||||
this.$data.requestData.collectionIndex
|
||||
].folders;
|
||||
},
|
||||
requests() {
|
||||
const userSelectedAnyCollection =
|
||||
this.$data.requestData.collectionIndex !== undefined;
|
||||
if (!userSelectedAnyCollection) return [];
|
||||
|
||||
const userSelectedAnyFolder = this.$data.requestData.folderIndex !== undefined
|
||||
if (userSelectedAnyFolder) {
|
||||
const collection = this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex]
|
||||
const folder = collection.folders[this.$data.requestData.folderIndex]
|
||||
const requests = folder.requests
|
||||
return requests
|
||||
}
|
||||
else {
|
||||
const collection = this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex]
|
||||
const requests = collection.requests
|
||||
return requests
|
||||
}
|
||||
const userSelectedAnyFolder =
|
||||
this.$data.requestData.folderIndex !== undefined;
|
||||
if (userSelectedAnyFolder) {
|
||||
const collection = this.$store.state.postwoman.collections[
|
||||
this.$data.requestData.collectionIndex
|
||||
];
|
||||
const folder = collection.folders[this.$data.requestData.folderIndex];
|
||||
const requests = folder.requests;
|
||||
return requests;
|
||||
} else {
|
||||
const collection = this.$store.state.postwoman.collections[
|
||||
this.$data.requestData.collectionIndex
|
||||
];
|
||||
const requests = collection.requests;
|
||||
return requests;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
saveRequestAs() {
|
||||
const userDidntSpecifyCollection = this.$data.requestData.collectionIndex === undefined
|
||||
if (userDidntSpecifyCollection) {
|
||||
this.$toast.error('please, specify collection first', { icon: 'error' })
|
||||
return
|
||||
}
|
||||
saveRequestAs() {
|
||||
const userDidntSpecifyCollection =
|
||||
this.$data.requestData.collectionIndex === undefined;
|
||||
if (userDidntSpecifyCollection) {
|
||||
this.$toast.error("please, specify collection first", {
|
||||
icon: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const requestUpdated = {
|
||||
...this.$props.editingRequest,
|
||||
name : this.$data.requestData.name || this.$data.defaultRequestName,
|
||||
collection : this.$data.requestData.collectionIndex,
|
||||
}
|
||||
const requestUpdated = {
|
||||
...this.$props.editingRequest,
|
||||
name: this.$data.requestData.name || this.$data.defaultRequestName,
|
||||
collection: this.$data.requestData.collectionIndex
|
||||
};
|
||||
|
||||
this.$store.commit('postwoman/saveRequestAs', {
|
||||
request : requestUpdated,
|
||||
collectionIndex : this.$data.requestData.collectionIndex,
|
||||
folderIndex : this.$data.requestData.folderIndex,
|
||||
requestIndex : this.$data.requestData.requestIndex,
|
||||
});
|
||||
this.$store.commit("postwoman/saveRequestAs", {
|
||||
request: requestUpdated,
|
||||
collectionIndex: this.$data.requestData.collectionIndex,
|
||||
folderIndex: this.$data.requestData.folderIndex,
|
||||
requestIndex: this.$data.requestData.requestIndex
|
||||
});
|
||||
|
||||
this.hideModal();
|
||||
},
|
||||
hideModal() {
|
||||
this.$emit('hide-modal');
|
||||
this.$emit('hide-model'); // for backward compatibility // TODO: use fixed event
|
||||
},
|
||||
},
|
||||
};
|
||||
this.hideModal();
|
||||
},
|
||||
hideModal() {
|
||||
this.$emit("hide-modal");
|
||||
this.$emit("hide-model"); // for backward compatibility // TODO: use fixed event
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user