btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor, fix: split 'components/collections/saveRequest.vue' to 'editRequest', 'saveRequestAs'; fix saving bugs

Browse Source
This commit is contained in:
vlad0337187
2019-10-24 13:46:18 +03:00
parent 3743ff96ff
commit bd64e4a45b
9 changed files with 430 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/collections/collection.vue
View File

@@ -30,6 +30,7 @@
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)">
@@ -40,10 +41,11 @@
<ul>
<li v-for="(request, index) in collection.requests" :key="index">
<request
:request="request"
:collection-index="collectionIndex"
:folder-index="-1"
:request-index="index"
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>
@@ -65,7 +67,7 @@
</style>
<script>
import folder from './folder';
import folder from './folder';
import request from './request';
export default {
@@ -74,8 +76,8 @@ export default {
request,
},
props: {
collectionIndex: Number,
collection: Object,
collectionIndex : Number,
collection : Object,
},
data () {
return {

132
components/collections/editRequest.vue Normal file
View File

@@ -0,0 +1,132 @@
<!--
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>
</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>
</template>
<script>
import modal from "../../components/modal";
export default {
props: {
show : Boolean,
collectionIndex : Number,
folderIndex : Number,
request : Object,
requestIndex : Number,
},
components: {
modal,
},
data() {
return {
requestUpdateData : {
name : undefined,
collectionIndex : undefined,
folderIndex : undefined,
},
}
},
watch: {
'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
},
},
computed: {
folders() {
const userSelectedAnyCollection = this.$data.requestUpdateData.collectionIndex !== undefined
if (!userSelectedAnyCollection) return []
return this.$store.state.postwoman.collections[this.$data.requestUpdateData.collectionIndex].folders
},
},
methods: {
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,
}
// 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')
},
},
};
</script>

15
components/collections/folder.vue
View File

@@ -23,10 +23,11 @@
<ul>
<li v-for="(request, index) in folder.requests" :key="index">
<request
:request="request"
:collection-index="collectionIndex"
:folder-index="folderIndex"
:request-index="index"
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">
@@ -55,9 +56,9 @@ import request from './request';
export default {
props: {
folder: Object,
collectionIndex: Number,
folderIndex: Number,
folder : Object,
collectionIndex : Number,
folderIndex : Number,
},
components: {
request,

37
components/collections/index.vue
View File

@@ -1,3 +1,8 @@
<!--
TODO:
- probably refactor and pass event arguments to modals directly without unpacking
-->
<template>
<div class="collections-wrapper">
<addCollection
@@ -28,6 +33,15 @@
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>
<importExportCollections
v-bind:show = "showModalImportExport"
v-on:hide-modal = 'displayModalImportExport(false)'
@@ -57,6 +71,7 @@
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>
@@ -80,6 +95,7 @@
import collection from './collection'
import editCollection from "./editCollection";
import editFolder from "./editFolder";
import editRequest from "./editRequest";
import importExportCollections from "./importExportCollections";
export default {
@@ -89,6 +105,7 @@
collection,
editCollection,
editFolder,
editRequest,
importExportCollections,
},
data() {
@@ -98,10 +115,13 @@
showModalImportExport : false,
showModalAddFolder : false,
showModalEditFolder : false,
showModalEditRequest : false,
editingCollection : undefined,
editingCollectionIndex : undefined,
editingFolder : undefined,
editingFolderIndex : undefined,
editingRequest : undefined,
editingRequestIndex : undefined,
}
},
computed: {
@@ -134,6 +154,12 @@
if (!shouldDisplay)
this.resetSelectedData()
},
displayModalEditRequest(shouldDisplay) {
this.showModalEditRequest = shouldDisplay
if (!shouldDisplay)
this.resetSelectedData()
},
editCollection(collection, collectionIndex) {
this.$data.editingCollection = collection
this.$data.editingCollectionIndex = collectionIndex
@@ -152,11 +178,22 @@
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)
},
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
},
},
}

22
components/collections/request.vue
View File

@@ -7,10 +7,10 @@
</button>
</div>
<div>
<button class="icon" @click="removeRequest" v-tooltip="'Delete collection'">
<button class="icon" @click="removeRequest" v-tooltip="'Delete request'">
<i class="material-icons">delete</i>
</button>
<button class="icon" @click="editRequest" v-tooltip="'Edit request'">
<button class="icon" @click="$emit('edit-request')" v-tooltip="'Edit request'">
<i class="material-icons">edit</i>
</button>
</div>
@@ -33,25 +33,21 @@
<script>
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 });
},
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,
collectionIndex : this.collectionIndex,
folderIndex : this.folderIndex,
requestIndex : this.requestIndex,
});
},
},

158
components/collections/saveRequest.vue
View File

@@ -1,158 +0,0 @@
<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")'>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">
<ul>
<li>
<button class="icon" @click="addRequest" v-if='!request.hasOwnProperty("requestIndex")'>
<i class="material-icons">add</i>
<span>Create</span>
</button>
<button class="icon" @click="saveRequest" v-if='request.hasOwnProperty("requestIndex")'>
<i class="material-icons">save</i>
<span>Save</span>
</button>
</li>
</ul>
</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>

158
components/collections/saveRequestAs.vue Normal file
View File

@@ -0,0 +1,158 @@
<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>
</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>
</template>
<script>
import modal from "../../components/modal";
export default {
props: {
show : Boolean,
editingRequest : Object,
},
components: {
modal,
},
data() {
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
},
},
computed: {
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 []
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
}
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.hideModal();
},
hideModal() {
this.$emit('hide-modal');
this.$emit('hide-model'); // for backward compatibility // TODO: use fixed event
},
},
};
</script>

8
pages/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="page">
<save-request
<save-request-as
v-bind:show="showRequestModal"
v-on:hide-model='hideRequestModal'
v-bind:editing-request='editRequest'
></save-request>
></save-request-as>
<pw-modal v-if="showModal" @close="showModal = false">
<div slot="header">
<ul>
@@ -364,7 +364,7 @@
import toggle from "../components/toggle";
import modal from "../components/modal";
import collections from '../components/collections';
import saveRequest from '../components/collections/saveRequest';
import saveRequestAs from '../components/collections/saveRequestAs';
import parseCurlCommand from '../assets/js/curlparser.js';
import hljs from 'highlight.js';
import 'highlight.js/styles/dracula.css';
@@ -428,7 +428,7 @@
history,
autocomplete,
collections,
saveRequest,
saveRequestAs,
},
data() {
return {

88
store/postwoman.js
View File

@@ -1,3 +1,5 @@
import Vue from 'vue'
export const SETTINGS_KEYS = [
/**
* The CSS class that should be applied to the root element.
@@ -42,14 +44,14 @@ export const SETTINGS_KEYS = [
];
export const state = () => ({
settings: {},
collections: [{
name: 'My First Collection',
folders: [],
requests: [],
settings : {},
collections : [{
name : 'My First Collection',
folders : [],
requests : [],
}],
selectedRequest: {},
editingRequest: {},
selectedRequest : {},
editingRequest : {},
});
export const mutations = {
@@ -112,8 +114,7 @@ export const mutations = {
editFolder (state, payload) {
const { collectionIndex, folder, folderIndex } = payload;
state.collections[collectionIndex].folders[folderIndex] = folder;
state.collections[collectionIndex].folders = [...state.collections[collectionIndex].folders] // mark updated
Vue.set(state.collections[collectionIndex].folders, folderIndex, folder)
},
removeFolder (state, payload) {
@@ -133,6 +134,67 @@ export const mutations = {
state.collections[request.collection].folders[request.folder].requests.push(request);
},
editRequest (state, payload) {
const {
requestOld,
requestOldCollectionIndex,
requestOldFolderIndex,
requestOldIndex,
requestNew,
requestNewCollectionIndex,
requestNewFolderIndex,
} = payload
const changedCollection = requestOldCollectionIndex !== requestNewCollectionIndex
const changedFolder = requestOldFolderIndex !== requestNewFolderIndex
const changedPlace = changedCollection || changedFolder
// set new request
if (requestNewFolderIndex !== undefined)
Vue.set(state.collections[requestNewCollectionIndex].folders[requestNewFolderIndex].requests, requestOldIndex, requestNew)
else
Vue.set(state.collections[requestNewCollectionIndex].requests, requestOldIndex, requestNew)
// remove old request
if (changedPlace) {
if (requestOldFolderIndex !== undefined)
state.collections[requestOldCollectionIndex].folders[requestOldFolderIndex].requests.splice(requestOldIndex, 1)
else
state.collections[requestOldCollectionIndex].requests.splice(requestOldIndex, 1)
}
},
saveRequestAs (state, payload) {
const {
request,
collectionIndex,
folderIndex,
requestIndex,
} = payload
const specifiedCollection = collectionIndex !== undefined
const specifiedFolder = folderIndex !== undefined
const specifiedRequest = requestIndex !== undefined
if (specifiedCollection && specifiedFolder && specifiedRequest)
Vue.set(state.collections[collectionIndex].folders[folderIndex].requests, requestIndex, request)
else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
const requests = state.collections[collectionIndex].folders[folderIndex].requests
const lastRequestIndex = requests.length - 1;
Vue.set(requests, lastRequestIndex + 1, request)
}
else if (specifiedCollection && !specifiedFolder && specifiedRequest) {
const requests = state.collections[collectionIndex].requests
Vue.set(requests,requestIndex, request)
}
else if (specifiedCollection && !specifiedFolder && !specifiedRequest) {
const requests = state.collections[collectionIndex].requests
const lastRequestIndex = requests.length - 1;
Vue.set(requests, lastRequestIndex + 1, request)
}
},
saveRequest (state, payload) {
const { request } = payload;
@@ -153,11 +215,11 @@ export const mutations = {
// Request that is directly attached to collection
if (request.folder === -1) {
state.collections[request.collection].requests[request.requestIndex] = request;
Vue.set(state.collections[request.collection].requests, request.requestIndex, request)
return
}
state.collections[request.collection].folders[request.folder].requests[request.requestIndex] = request;
Vue.set(state.collections[request.collection].folders[request.folder].requests, request.requestIndex, request)
},
removeRequest (state, payload) {
@@ -176,8 +238,4 @@ export const mutations = {
state.selectedRequest = Object.assign({}, payload.request);
},
editRequest (state, payload) {
state.editingRequest = Object.assign({}, payload.request);
},
};