refactor, fix: split 'components/collections/saveRequest.vue' to 'editRequest', 'saveRequestAs'; fix saving bugs
This commit is contained in:
vlad0337187
@@ -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
132
components/collections/editRequest.vue
Normal 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>
|
||||
@@ -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,
|
||||
|
||||
@@ -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
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
@@ -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
158
components/collections/saveRequestAs.vue
Normal 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>
|
||||
Reference in New Issue
Block a user