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

: rotating_light: Lint

Browse Source
This commit is contained in:
Liyas Thomas
2019-10-25 13:44:34 +05:30
parent 96adfa0b5a
commit a09d7d76d3
35 changed files with 3133 additions and 2620 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
components/autocomplete.vue
View File

@@ -29,176 +29,182 @@
</template>
<style lang="scss" scoped>
.autocomplete-wrapper {
position: relative;
.autocomplete-wrapper {
position: relative;
input:focus + ul.suggestions,
ul.suggestions:hover {
display: block;
}
ul.suggestions {
display: none;
background-color: var(--atc-color);
position: absolute;
top: calc(100% - 4px);
margin: 0 4px;
left: 0;
padding: 0;
border-radius: 0 0 4px 4px;
z-index: 9999;
transition: transform 200ms ease-out;
li {
width: 100%;
input:focus + ul.suggestions,
ul.suggestions:hover {
display: block;
padding: 8px 16px;
font-size: 18px;
font-family: 'Roboto Mono', monospace;
white-space: pre-wrap;
}
&:last-child {
border-radius: 0 0 4px 4px;
}
ul.suggestions {
display: none;
background-color: var(--atc-color);
position: absolute;
top: calc(100% - 4px);
margin: 0 4px;
left: 0;
padding: 0;
border-radius: 0 0 4px 4px;
z-index: 9999;
transition: transform 200ms ease-out;
&:hover,
&.active {
background-color: var(--ac-color);
color: var(--act-color);
cursor: pointer;
li {
width: 100%;
display: block;
padding: 8px 16px;
font-size: 18px;
font-family: "Roboto Mono", monospace;
white-space: pre-wrap;
&:last-child {
border-radius: 0 0 4px 4px;
}
&:hover,
&.active {
background-color: var(--ac-color);
color: var(--act-color);
cursor: pointer;
}
}
}
}
}
</style>
<script>
const KEY_TAB = 9;
const KEY_ESC = 27;
const KEY_TAB = 9;
const KEY_ESC = 27;
const KEY_ARROW_UP = 38;
const KEY_ARROW_DOWN = 40;
const KEY_ARROW_UP = 38;
const KEY_ARROW_DOWN = 40;
export default {
props: {
spellcheck: {
type: Boolean,
default: true,
required: false
export default {
props: {
spellcheck: {
type: Boolean,
default: true,
required: false
},
placeholder: {
type: String,
default: "Start typing...",
required: false
},
source: {
type: Array,
required: true
}
},
placeholder: {
type: String,
default: "Start typing...",
required: false
watch: {
value() {
this.$emit("input", this.value);
}
},
source: {
type: Array,
required: true
}
},
data() {
return {
value: "application/json",
selectionStart: 0,
suggestionsOffsetLeft: 0,
currentSuggestionIndex: -1,
suggestionsVisible: false
};
},
watch: {
value() {
this.$emit("input", this.value);
}
},
methods: {
updateSuggestions(event) {
// Hide suggestions if ESC pressed.
if (event.which && event.which === KEY_ESC) {
event.preventDefault();
this.suggestionsVisible = false;
this.currentSuggestionIndex = -1;
return;
}
data() {
return {
value: "application/json",
selectionStart: 0,
suggestionsOffsetLeft: 0,
currentSuggestionIndex: -1,
suggestionsVisible: false
};
},
// As suggestions is a reactive property, this implicitly
// causes suggestions to update.
this.selectionStart = this.$refs.acInput.selectionStart;
this.suggestionsOffsetLeft = 12 * this.selectionStart;
this.suggestionsVisible = true;
},
methods: {
updateSuggestions(event) {
// Hide suggestions if ESC pressed.
if (event.which && event.which === KEY_ESC) {
event.preventDefault();
this.suggestionsVisible = false;
forceSuggestion(text) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + text;
this.selectionStart = this.value.length;
this.suggestionsVisible = true;
this.currentSuggestionIndex = -1;
return;
}
},
// As suggestions is a reactive property, this implicitly
// causes suggestions to update.
this.selectionStart = this.$refs.acInput.selectionStart;
this.suggestionsOffsetLeft = 12 * this.selectionStart;
this.suggestionsVisible = true;
handleKeystroke(event) {
switch (event.which) {
case KEY_ARROW_UP:
event.preventDefault();
this.currentSuggestionIndex =
this.currentSuggestionIndex - 1 >= 0
? this.currentSuggestionIndex - 1
: 0;
break;
case KEY_ARROW_DOWN:
event.preventDefault();
this.currentSuggestionIndex =
this.currentSuggestionIndex < this.suggestions.length - 1
? this.currentSuggestionIndex + 1
: this.suggestions.length - 1;
break;
case KEY_TAB:
event.preventDefault();
let activeSuggestion = this.suggestions[
this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
];
if (activeSuggestion) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + activeSuggestion;
}
break;
default:
break;
}
}
},
forceSuggestion(text) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + text;
computed: {
/**
* Gets the suggestions list to be displayed under the input box.
*
* @returns {default.props.source|{type, required}}
*/
suggestions() {
let input = this.value.substring(0, this.selectionStart);
this.selectionStart = this.value.length;
this.suggestionsVisible = true;
this.currentSuggestionIndex = -1;
return (
this.source
.filter(entry => {
return (
entry.toLowerCase().startsWith(input.toLowerCase()) &&
input.toLowerCase() !== entry.toLowerCase()
);
})
// Cut off the part that's already been typed.
.map(entry => entry.substring(this.selectionStart))
// We only want the top 3 suggestions.
.slice(0, 3)
);
}
},
handleKeystroke(event) {
switch (event.which) {
case KEY_ARROW_UP:
event.preventDefault();
this.currentSuggestionIndex =this.currentSuggestionIndex - 1 >= 0 ? this.currentSuggestionIndex - 1 : 0;
break;
case KEY_ARROW_DOWN:
event.preventDefault();
this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1 ? this.currentSuggestionIndex + 1
: this.suggestions.length - 1;
break;
case KEY_TAB:
event.preventDefault();
let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
if (activeSuggestion) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + activeSuggestion;
}
break;
default:
break;
}
mounted() {
this.updateSuggestions({
target: this.$refs.acInput
});
}
},
computed: {
/**
* Gets the suggestions list to be displayed under the input box.
*
* @returns {default.props.source|{type, required}}
*/
suggestions() {
let input = this.value.substring(0, this.selectionStart);
return (
this.source
.filter(entry => {
return (
entry.toLowerCase().startsWith(input.toLowerCase()) &&
input.toLowerCase() !== entry.toLowerCase()
);
})
// Cut off the part that's already been typed.
.map(entry => entry.substring(this.selectionStart))
// We only want the top 3 suggestions.
.slice(0, 3)
);
}
},
mounted() {
this.updateSuggestions({
target: this.$refs.acInput
});
}
};
};
</script>

98
components/collections/addCollection.vue
View File

@@ -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>

105
components/collections/addFolder.vue
View File

@@ -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>

170
components/collections/collection.vue
View File

@@ -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>

108
components/collections/editCollection.vue
View File

@@ -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>

114
components/collections/editFolder.vue
View File

@@ -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>

202
components/collections/editRequest.vue
View File

@@ -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>

144
components/collections/folder.vue
View File

@@ -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>

197
components/collections/importExportCollections.vue
View File

@@ -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>

206
components/collections/index.vue
View File

@@ -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>

84
components/collections/request.vue
View File

@@ -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>

260
components/collections/saveRequestAs.vue
View File

@@ -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>

254
components/history.vue
View File

@@ -2,52 +2,107 @@
<pw-section class="green" icon="history" label="History">
<ul>
<li id="filter-history">
<input aria-label="Search" type="text" placeholder="search history" :readonly="history.length === 0" v-model="filterText">
<input
aria-label="Search"
type="text"
placeholder="search history"
:readonly="history.length === 0"
v-model="filterText"
/>
</li>
</ul>
<ul>
<li @click="sort_by_label()">
<label for="" class="flex-wrap">Label<i class="material-icons">sort</i></label>
<label class="flex-wrap">
Label
<i class="material-icons">unfold_more</i>
</label>
</li>
<li @click="sort_by_time()">
<label for="" class="flex-wrap">Time<i class="material-icons">sort</i></label>
<label class="flex-wrap">
Time
<i class="material-icons">unfold_more</i>
</label>
</li>
<li @click="sort_by_status_code()">
<label for="" class="flex-wrap">Status<i class="material-icons">sort</i></label>
<label class="flex-wrap">
Status
<i class="material-icons">unfold_more</i>
</label>
</li>
<li @click="sort_by_url()">
<label for="" class="flex-wrap">URL<i class="material-icons">sort</i></label>
<label class="flex-wrap">
URL
<i class="material-icons">unfold_more</i>
</label>
</li>
<li @click="sort_by_path()">
<label for="" class="flex-wrap">Path<i class="material-icons">sort</i></label>
<label class="flex-wrap">
Path
<i class="material-icons">unfold_more</i>
</label>
</li>
</ul>
<virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="54" :remain="Math.min(5, filteredHistory.length)">
<virtual-list
class="virtual-list"
:class="{filled: filteredHistory.length}"
:size="54"
:remain="Math.min(5, filteredHistory.length)"
>
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
<li>
<input aria-label="Label" type="text" readonly :value="entry.label" placeholder="No label">
<input
aria-label="Label"
type="text"
readonly
:value="entry.label"
placeholder="No label"
/>
</li>
<li>
<input aria-label="Time" type="text" readonly :value="entry.time" :title="entry.date">
<input aria-label="Time" type="text" readonly :value="entry.time" :title="entry.date" />
</li>
<li class="method-list-item">
<input aria-label="Method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
<span class="entry-status-code" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">{{entry.status}}</span>
<input
aria-label="Method"
type="text"
readonly
:value="entry.method"
:class="findEntryStatus(entry).className"
:style="{'--status-code': entry.status}"
/>
<span
class="entry-status-code"
:class="findEntryStatus(entry).className"
:style="{'--status-code': entry.status}"
>{{entry.status}}</span>
</li>
<li>
<input aria-label="URL" type="text" readonly :value="entry.url">
<input aria-label="URL" type="text" readonly :value="entry.url" />
</li>
<li>
<input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path">
<input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" />
</li>
<div class="show-on-small-screen">
<li>
<button v-tooltip="'Delete entry'" class="icon" :id="'delete-button#'+index" @click="deleteHistory(entry)" aria-label="Delete">
<button
v-tooltip="'Delete entry'"
class="icon"
:id="'delete-button#'+index"
@click="deleteHistory(entry)"
aria-label="Delete"
>
<i class="material-icons">delete</i>
</button>
</li>
<li>
<button v-tooltip="'Edit entry'" class="icon" :id="'use-button#'+index" @click="useHistory(entry)" aria-label="Edit">
<button
v-tooltip="'Edit entry'"
class="icon"
:id="'use-button#'+index"
@click="useHistory(entry)"
aria-label="Edit"
>
<i class="material-icons">edit</i>
</button>
</li>
@@ -56,7 +111,7 @@
</virtual-list>
<ul :class="{hidden: filteredHistory.length != 0 || history.length === 0 }">
<li>
<label>Nothing found for "{{filterText}}"</label>
<label>Nothing found "{{filterText}}"</label>
</li>
</ul>
<ul v-if="history.length === 0">
@@ -66,7 +121,12 @@
</ul>
<ul v-if="history.length !== 0">
<li v-if="!isClearingHistory">
<button class="icon" id="clear-history-button" :disabled="history.length === 0" @click="enableHistoryClearing">
<button
class="icon"
id="clear-history-button"
:disabled="history.length === 0"
@click="enableHistoryClearing"
>
<i class="material-icons">clear_all</i>
<span>Clear All</span>
</button>
@@ -75,36 +135,52 @@
<div class="flex-wrap">
<label for="clear-history-button">Are you sure?</label>
<div>
<button class="icon" id="confirm-clear-history-button" @click="clearHistory">
Yes
</button>
<button class="icon" id="reject-clear-history-button" @click="disableHistoryClearing">
No
</button>
<button class="icon" id="confirm-clear-history-button" @click="clearHistory">Yes</button>
<button class="icon" id="reject-clear-history-button" @click="disableHistoryClearing">No</button>
</div>
</div>
</li>
</ul>
</pw-section>
</template>
<script>
import VirtualList from 'vue-virtual-scroll-list'
import section from "./section";
import {
findStatusGroup
} from "../pages/index";
const updateOnLocalStorage = (propertyName, property) => window.localStorage.setItem(propertyName, JSON.stringify(property));
<style scoped lang="scss">
.virtual-list {
[readonly] {
cursor: default;
}
}
.flex-wrap {
cursor: pointer;
}
@media (max-width: 720px) {
.virtual-list.filled {
min-height: 200px;
}
}
</style>
<script>
import VirtualList from "vue-virtual-scroll-list";
import section from "./section";
import { findStatusGroup } from "../pages/index";
const updateOnLocalStorage = (propertyName, property) =>
window.localStorage.setItem(propertyName, JSON.stringify(property));
export default {
components: {
'pw-section': section,
"pw-section": section,
VirtualList
},
data() {
const localStorageHistory = JSON.parse(window.localStorage.getItem('history'));
const localStorageHistory = JSON.parse(
window.localStorage.getItem("history")
);
return {
history: localStorageHistory || [],
filterText: '',
filterText: "",
showFilter: false,
isClearingHistory: false,
reverse_sort_label: false,
@@ -112,7 +188,7 @@
reverse_sort_status_code: false,
reverse_sort_url: false,
reverse_sort_path: false
}
};
},
computed: {
filteredHistory() {
@@ -120,7 +196,7 @@
const filterText = this.filterText.toLowerCase();
return Object.keys(entry).some(key => {
let value = entry[key];
value = typeof value !== 'string' ? value.toString() : value;
value = typeof value !== "string" ? value.toString() : value;
return value.toLowerCase().includes(filterText);
});
});
@@ -129,35 +205,37 @@
methods: {
clearHistory() {
this.history = [];
this.filterText = '';
this.filterText = "";
this.disableHistoryClearing();
updateOnLocalStorage('history', this.history);
this.$toast.error('History Deleted', {
icon: 'delete'
updateOnLocalStorage("history", this.history);
this.$toast.error("History Deleted", {
icon: "delete"
});
},
useHistory(entry) {
this.$emit('useHistory', entry);
this.$emit("useHistory", entry);
},
findEntryStatus(entry) {
const foundStatusGroup = findStatusGroup(entry.status);
return foundStatusGroup || {
className: ''
};
return (
foundStatusGroup || {
className: ""
}
);
},
deleteHistory(entry) {
this.history.splice(this.history.indexOf(entry), 1);
if (this.history.length === 0) {
this.filterText = '';
this.filterText = "";
}
updateOnLocalStorage('history', this.history);
this.$toast.error('Deleted', {
icon: 'delete'
updateOnLocalStorage("history", this.history);
this.$toast.error("Deleted", {
icon: "delete"
});
},
addEntry(entry) {
this.history.push(entry);
updateOnLocalStorage('history', this.history);
updateOnLocalStorage("history", this.history);
},
enableHistoryClearing() {
if (!this.history || !this.history.length) return;
@@ -168,80 +246,72 @@
},
sort_by_time() {
let byDate = this.history.slice(0);
byDate.sort((a,b) =>{
byDate.sort((a, b) => {
let date_a = a.date.split("/");
let date_b = b.date.split("/");
let time_a = a.time.split(":")
let time_b = b.time.split(":")
let final_a = new Date(date_a[2], date_a[1], date_a[0], time_a[0], time_a[1], time_a[2]);
let final_b = new Date(date_b[2], date_b[1], date_b[0], time_b[0], time_b[1], time_b[2]);
if(this.reverse_sort_time)
return final_b - final_a;
else
return final_a - final_b;
})
let time_a = a.time.split(":");
let time_b = b.time.split(":");
let final_a = new Date(
date_a[2],
date_a[1],
date_a[0],
time_a[0],
time_a[1],
time_a[2]
);
let final_b = new Date(
date_b[2],
date_b[1],
date_b[0],
time_b[0],
time_b[1],
time_b[2]
);
if (this.reverse_sort_time) return final_b - final_a;
else return final_a - final_b;
});
this.history = byDate;
this.reverse_sort_time = !this.reverse_sort_time;
},
sort_by_status_code() {
let byCode = this.history.slice(0);
byCode.sort((a,b) =>{
if(this.reverse_sort_status_code)
return b.status - a.status;
else
return a.status - b.status;
})
byCode.sort((a, b) => {
if (this.reverse_sort_status_code) return b.status - a.status;
else return a.status - b.status;
});
this.history = byCode;
this.reverse_sort_status_code = !this.reverse_sort_status_code;
},
sort_by_url() {
let byUrl = this.history.slice(0);
byUrl.sort((a, b)=>{
if(this.reverse_sort_url)
byUrl.sort((a, b) => {
if (this.reverse_sort_url)
return a.url == b.url ? 0 : +(a.url < b.url) || -1;
else
return a.url == b.url ? 0 : +(a.url > b.url) || -1;
else return a.url == b.url ? 0 : +(a.url > b.url) || -1;
});
this.history = byUrl;
this.reverse_sort_url = !this.reverse_sort_url;
},
sort_by_label() {
let byLabel = this.history.slice(0);
byLabel.sort((a, b)=>{
if(this.reverse_sort_label)
byLabel.sort((a, b) => {
if (this.reverse_sort_label)
return a.label == b.label ? 0 : +(a.label < b.label) || -1;
else
return a.label == b.label ? 0 : +(a.label > b.label) || -1;
else return a.label == b.label ? 0 : +(a.label > b.label) || -1;
});
this.history = byLabel;
this.reverse_sort_label = !this.reverse_sort_label;
},
sort_by_path() {
let byPath = this.history.slice(0);
byPath.sort((a, b)=>{
if(this.reverse_sort_path)
byPath.sort((a, b) => {
if (this.reverse_sort_path)
return a.path == b.path ? 0 : +(a.path < b.path) || -1;
else
return a.path == b.path ? 0 : +(a.path > b.path) || -1;
else return a.path == b.path ? 0 : +(a.path > b.path) || -1;
});
this.history = byPath;
this.reverse_sort_path = !this.reverse_sort_path;
}
}
}
};
</script>
<style scoped lang="scss">
.virtual-list {
[readonly] {
cursor: default;
}
}
@media (max-width: 720px) {
.virtual-list.filled {
min-height: 200px;
}
}
</style>

33
components/logo.vue
View File

@@ -1,11 +1,34 @@
<template>
<svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 612.001 612.001" style="enable-background:new 0 0 612.001 612.001;" xml:space="preserve">
<svg
version="1.1"
id="Capa_1"
x="0px"
y="0px"
viewBox="0 0 612.001 612.001"
style="enable-background:new 0 0 612.001 612.001;"
xml:space="preserve"
>
<defs id="defs11" />
<g id="g3826" transform="translate(-516.40798,-163.88978)">
<circle :fill="color" transform="scale(1,-1)" style="stroke-width:1.19531453" r="178.70923" cy="-501.55591" cx="822.40845" id="circle3814" />
<circle
:fill="color"
transform="scale(1,-1)"
style="stroke-width:1.19531453"
r="178.70923"
cy="-501.55591"
cx="822.40845"
id="circle3814"
/>
<g id="g3820" transform="translate(516.40798,163.89028)">
<g id="g3818">
<path :fill="color" id="path3816" data-old_color="#121212" class="active-path" data-original="#121212" d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z" />
<path
:fill="color"
id="path3816"
data-old_color="#121212"
class="active-path"
data-original="#121212"
d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z"
/>
</g>
</g>
</g>
@@ -24,9 +47,9 @@
<script>
export default {
props: {
'color': {
color: {
type: String
}
}
}
};
</script>

14
components/modal.vue
View File

@@ -53,13 +53,13 @@
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-fade-enter,
.modal-fade-leave-active {

67
components/section.vue
View File

@@ -1,6 +1,11 @@
<template>
<fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': noFrameColors }">
<legend @click.prevent="collapse"><i class="material-icons icon">{{ icon }}</i><span>{{ label }}</span><i class="material-icons" v-if="isCollapsed">expand_more</i><i class="material-icons" v-if="!isCollapsed">expand_less</i></legend>
<legend @click.prevent="collapse">
<i class="material-icons icon">{{ icon }}</i>
<span>{{ label }}</span>
<i class="material-icons" v-if="isCollapsed">expand_more</i>
<i class="material-icons" v-if="!isCollapsed">expand_less</i>
</legend>
<div class="collapsible" :class="{ hidden: collapsed }">
<slot />
</div>
@@ -17,39 +22,39 @@
</style>
<script>
export default {
computed: {
noFrameColors() {
return this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false;
export default {
computed: {
noFrameColors() {
return this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false;
}
},
},
data() {
return {
isCollapsed: false
}
},
props: {
label: {
type: String,
default: "Section"
data() {
return {
isCollapsed: false
};
},
icon: {
type: String,
default: "lens"
},
collapsed: {
type: Boolean
}
},
methods: {
collapse({ target }) {
const parent = target.parentNode.parentNode;
parent.querySelector(".collapsible").classList.toggle("hidden");
this.isCollapsed = !this.isCollapsed;
props: {
label: {
type: String,
default: "Section"
},
icon: {
type: String,
default: "lens"
},
collapsed: {
type: Boolean
}
},
methods: {
collapse({ target }) {
const parent = target.parentNode.parentNode;
parent.querySelector(".collapsible").classList.toggle("hidden");
this.isCollapsed = !this.isCollapsed;
}
}
}
};
};
</script>

16
components/toggle.vue
View File

@@ -4,7 +4,7 @@
<span class="handle"></span>
</label>
<label class="caption">
<slot/>
<slot />
</label>
</div>
</template>
@@ -59,8 +59,8 @@
margin: $handleSpacing;
background-color: $inactiveHandleColor;
width: #{ $height - ($handleSpacing * 2) };
height: #{ $height - ($handleSpacing * 2) };
width: #{$height - ($handleSpacing * 2)};
height: #{$height - ($handleSpacing * 2)};
border-radius: 100px;
pointer-events: none;
@@ -77,14 +77,12 @@
}
}
}
</style>
<script>
export default {
props: {
'on': {
on: {
type: Boolean,
default: false
}
@@ -93,10 +91,8 @@
methods: {
toggle() {
const containsOnClass = this.$refs.toggle.classList.toggle("on");
this.$emit('change', containsOnClass);
this.$emit("change", containsOnClass);
}
}
}
};
</script>