refactor: lint

This commit is contained in:
liyasthomas
2021-05-18 21:39:55 +05:30
parent cc27c552af
commit 40ddfa8def
32 changed files with 712 additions and 377 deletions

View File

@@ -1,8 +1,8 @@
{{nesting_level}} {{name}}
{{nestingLevel}} {{name}}
{{#requests}}
{{nesting_level}} Request: {{name}}
{{nestingLevel}} Request: {{name}}
**Method**: {{method}}

View File

@@ -13,9 +13,9 @@
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"
id="selectLabel"
v-model="name"
type="text"
:placeholder="$t('my_new_collection')"
@keyup.enter="addNewCollection"
/>

View File

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" @close="show = false">
<SmartModal v-if="show" @close="$emit('hide-modal')">
<div slot="header">
<div class="row-wrapper">
<h3 class="title">{{ $t("new_folder") }}</h3>
@@ -13,9 +13,9 @@
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"
id="selectLabel"
v-model="name"
type="text"
:placeholder="$t('my_new_folder')"
@keyup.enter="addFolder"
/>
@@ -40,9 +40,9 @@
export default {
props: {
show: Boolean,
folder: Object,
folderPath: String,
collectionIndex: Number,
folder: { type: Object, default: () => {} },
folderPath: { type: String, default: null },
collectionIndex: { type: Number, default: null },
},
data() {
return {

View File

@@ -1,27 +1,45 @@
<template>
<div v-if="show">
<SmartTabs styles="m-4" :id="'collections_tab'" v-on:tab-changed="updateCollectionsType">
<SmartTab :id="'my-collections'" :label="'My Collections'" :selected="true"> </SmartTab>
<SmartTabs
:id="'collections_tab'"
styles="m-4"
@tab-changed="updateCollectionsType"
>
<SmartTab
:id="'my-collections'"
:label="'My Collections'"
:selected="true"
/>
<SmartTab
v-if="currentUser && currentUser.eaInvited && !doc"
:id="'team-collections'"
:label="'Team Collections'"
v-if="currentUser && currentUser.eaInvited && !doc"
>
<ul>
<li>
<span class="select-wrapper">
<SmartIntersection @intersecting="onTeamSelectIntersect">
<select
type="text"
id="team"
type="text"
class="team"
autofocus
@change="updateSelectedTeam(myTeams[$event.target.value])"
>
<option :key="undefined" :value="undefined" hidden disabled selected>
<option
:key="undefined"
:value="undefined"
hidden
disabled
selected
>
Select team
</option>
<option v-for="(team, index) in myTeams" :key="index" :value="index">
<option
v-for="(team, index) in myTeams"
:key="index"
:value="index"
>
{{ team.name }}
</option>
</select>

View File

@@ -13,9 +13,9 @@
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"
id="selectLabel"
v-model="name"
type="text"
:placeholder="placeholderCollName"
@keyup.enter="saveCollection"
/>
@@ -40,7 +40,7 @@
export default {
props: {
show: Boolean,
placeholderCollName: String,
placeholderCollName: { type: String, default: null },
},
data() {
return {

View File

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" @close="show = false">
<SmartModal v-if="show" @close="$emit('hide-modal')">
<div slot="header">
<div class="row-wrapper">
<h3 class="title">{{ $t("edit_folder") }}</h3>
@@ -12,7 +12,12 @@
</div>
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input type="text" id="selectLabel" v-model="name" @keyup.enter="editFolder" />
<input
id="selectLabel"
v-model="name"
type="text"
@keyup.enter="editFolder"
/>
</div>
<div slot="footer">
<div class="row-wrapper">

View File

@@ -13,11 +13,11 @@
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"
id="selectLabel"
v-model="requestUpdateData.name"
@keyup.enter="saveRequest"
type="text"
:placeholder="placeholderReqName"
@keyup.enter="saveRequest"
/>
</div>
<div slot="footer">
@@ -40,7 +40,7 @@
export default {
props: {
show: Boolean,
placeholderReqName: String,
placeholderReqName: { type: String, default: null },
},
data() {
return {

View File

@@ -5,20 +5,29 @@
<h3 class="title">Export</h3>
<div>
<button
class="tooltip-target icon"
v-if="mode != 'import_export'"
@click="mode = 'import_export'"
v-tooltip.left="'Back'"
class="tooltip-target icon"
@click="mode = 'import_export'"
>
<i class="material-icons">arrow_back</i>
</button>
<v-popover v-if="mode == 'import_export' && collectionsType.type == 'my-collections'">
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<v-popover
v-if="
mode == 'import_export' &&
collectionsType.type == 'my-collections'
"
>
<button v-tooltip.left="$t('more')" class="tooltip-target icon">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button class="icon" @click="readCollectionGist" v-close-popover>
<button
v-close-popover
class="icon"
@click="readCollectionGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
@@ -33,12 +42,16 @@
}"
>
<button
v-close-popover
:disabled="
!fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
!fb.currentUser
? true
: fb.currentUser.provider !== 'github.com'
? true
: false
"
class="icon"
@click="createCollectionGist"
v-close-popover
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
@@ -56,12 +69,14 @@
<div v-if="mode == 'import_export'" class="flex flex-col items-start p-2">
<span
v-tooltip="{
content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
content: !fb.currentUser
? $t('login_first')
: $t('replace_current'),
}"
>
<button
:disabled="!fb.currentUser"
v-if="collectionsType.type == 'my-collections'"
:disabled="!fb.currentUser"
class="icon"
@click="syncCollections"
>
@@ -70,45 +85,46 @@
</button>
</span>
<button
v-tooltip="$t('replace_current')"
class="icon"
@click="openDialogChooseFileToReplaceWith"
v-tooltip="$t('replace_current')"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("replace_json") }}</span>
<input
type="file"
@change="replaceWithJSON"
style="display: none"
ref="inputChooseFileToReplaceWith"
type="file"
style="display: none"
accept="application/json"
@change="replaceWithJSON"
/>
</button>
<button
v-tooltip="$t('preserve_current')"
class="icon"
@click="openDialogChooseFileToImportFrom"
v-tooltip="$t('preserve_current')"
>
<i class="material-icons">folder_special</i>
<span>{{ $t("import_json") }}</span>
<input
type="file"
@change="importFromJSON"
style="display: none"
ref="inputChooseFileToImportFrom"
type="file"
style="display: none"
accept="application/json"
@change="importFromJSON"
/>
</button>
<button
v-if="collectionsType.type == 'team-collections'"
v-tooltip="$t('replace_current')"
class="icon"
@click="mode = 'import_from_my_collections'"
v-tooltip="$t('replace_current')"
v-if="collectionsType.type == 'team-collections'"
>
<i class="material-icons">folder_special</i>
<span>{{ "Import from My Collections" }}</span>
</button>
<button
v-tooltip="$t('show_code')"
class="icon"
@click="
() => {
@@ -116,7 +132,6 @@
getJSONCollection()
}
"
v-tooltip="$t('show_code')"
>
<i class="material-icons">folder_special</i>
<span>{{ "Export As JSON" }}</span>
@@ -133,10 +148,20 @@
}
"
>
<option :key="undefined" :value="undefined" hidden disabled selected>
<option
:key="undefined"
:value="undefined"
hidden
disabled
selected
>
Select Collection
</option>
<option v-for="(collection, index) in myCollections" :key="index" :value="index">
<option
v-for="(collection, index) in myCollections"
:key="index"
:value="index"
>
{{ collection.name }}
</option>
</select>
@@ -153,7 +178,11 @@
<textarea v-model="collectionJson" rows="8" readonly></textarea>
<div class="row-wrapper">
<span class="m-2">
<button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
<button
v-tooltip="$t('download_file')"
class="icon primary"
@click="exportJSON"
>
{{ $t("export") }}
</button>
</span>
@@ -166,9 +195,13 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import * as team_utils from "~/helpers/teams/utils"
import * as teamUtils from "~/helpers/teams/utils"
export default {
props: {
show: Boolean,
collectionsType: { type: Object, default: () => {} },
},
data() {
return {
fb,
@@ -183,10 +216,6 @@ export default {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
props: {
show: Boolean,
collectionsType: Object,
},
computed: {
myCollections() {
return fb.currentUser !== null
@@ -213,11 +242,11 @@ export default {
},
}
)
.then(({ html_url }) => {
.then((res) => {
this.$toast.success(this.$t("gist_created"), {
icon: "done",
})
window.open(html_url)
window.open(res.html_url)
})
.catch((error) => {
this.$toast.error(this.$t("something_went_wrong"), {
@@ -227,7 +256,7 @@ export default {
})
},
async readCollectionGist() {
let gist = prompt(this.$t("enter_gist_url"))
const gist = prompt(this.$t("enter_gist_url"))
if (!gist) return
await this.$axios
.$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
@@ -236,8 +265,11 @@ export default {
},
})
.then(({ files }) => {
let collections = JSON.parse(Object.values(files)[0].content)
this.$store.commit("postwoman/replaceCollections", { data: collections, flag: "rest" })
const collections = JSON.parse(Object.values(files)[0].content)
this.$store.commit("postwoman/replaceCollections", {
data: collections,
flag: "rest",
})
this.fileImported()
this.syncToFBCollections()
})
@@ -258,23 +290,34 @@ export default {
this.$refs.inputChooseFileToImportFrom.click()
},
replaceWithJSON() {
let reader = new FileReader()
const reader = new FileReader()
reader.onload = ({ target }) => {
let content = target.result
const content = target.result
let collections = JSON.parse(content)
if (collections[0]) {
let [name, folders, requests] = Object.keys(collections[0])
if (name === "name" && folders === "folders" && requests === "requests") {
const [name, folders, requests] = Object.keys(collections[0])
if (
name === "name" &&
folders === "folders" &&
requests === "requests"
) {
// Do nothing
}
} else if (collections.info && collections.info.schema.includes("v2.1.0")) {
} else if (
collections.info &&
collections.info.schema.includes("v2.1.0")
) {
collections = [this.parsePostmanCollection(collections)]
} else {
this.failedImport()
}
if (this.collectionsType.type == "team-collections") {
team_utils
.replaceWithJSON(this.$apollo, collections, this.collectionsType.selectedTeam.id)
if (this.collectionsType.type === "team-collections") {
teamUtils
.replaceWithJSON(
this.$apollo,
collections,
this.collectionsType.selectedTeam.id
)
.then((status) => {
if (status) {
this.fileImported()
@@ -299,26 +342,39 @@ export default {
this.$refs.inputChooseFileToReplaceWith.value = ""
},
importFromJSON() {
let reader = new FileReader()
const reader = new FileReader()
reader.onload = ({ target }) => {
let content = target.result
const content = target.result
let collections = JSON.parse(content)
if (collections[0]) {
let [name, folders, requests] = Object.keys(collections[0])
if (name === "name" && folders === "folders" && requests === "requests") {
const [name, folders, requests] = Object.keys(collections[0])
if (
name === "name" &&
folders === "folders" &&
requests === "requests"
) {
// Do nothing
}
} else if (collections.info && collections.info.schema.includes("v2.1.0")) {
//replace the variables, postman uses {{var}}, Hoppscotch uses <<var>>
collections = JSON.parse(content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>"))
} else if (
collections.info &&
collections.info.schema.includes("v2.1.0")
) {
// replace the variables, postman uses {{var}}, Hoppscotch uses <<var>>
collections = JSON.parse(
content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>")
)
collections = [this.parsePostmanCollection(collections)]
} else {
this.failedImport()
return
}
if (this.collectionsType.type == "team-collections") {
team_utils
.importFromJSON(this.$apollo, collections, this.collectionsType.selectedTeam.id)
if (this.collectionsType.type === "team-collections") {
teamUtils
.importFromJSON(
this.$apollo,
collections,
this.collectionsType.selectedTeam.id
)
.then((status) => {
if (status) {
this.$emit("update-team-collections")
@@ -332,7 +388,10 @@ export default {
this.failedImport()
})
} else {
this.$store.commit("postwoman/importCollections", { data: collections, flag: "rest" })
this.$store.commit("postwoman/importCollections", {
data: collections,
flag: "rest",
})
this.syncToFBCollections()
this.fileImported()
}
@@ -341,7 +400,7 @@ export default {
this.$refs.inputChooseFileToImportFrom.value = ""
},
importFromMyCollections() {
team_utils
teamUtils
.importFromMyCollections(
this.$apollo,
this.mySelectedCollectionID,
@@ -361,10 +420,14 @@ export default {
})
},
async getJSONCollection() {
if (this.collectionsType.type == "my-collections") {
this.collectionJson = JSON.stringify(this.$store.state.postwoman.collections, null, 2)
if (this.collectionsType.type === "my-collections") {
this.collectionJson = JSON.stringify(
this.$store.state.postwoman.collections,
null,
2
)
} else {
this.collectionJson = await team_utils.exportAsJSON(
this.collectionJson = await teamUtils.exportAsJSON(
this.$apollo,
this.collectionsType.selectedTeam.id
)
@@ -374,10 +437,10 @@ export default {
exportJSON() {
let text = this.collectionJson
text = text.replace(/\n/g, "\r\n")
let blob = new Blob([text], {
const blob = new Blob([text], {
type: "text/json",
})
let anchor = document.createElement("a")
const anchor = document.createElement("a")
anchor.download = "hoppscotch-collection.json"
anchor.href = window.URL.createObjectURL(blob)
anchor.target = "_blank"
@@ -415,7 +478,7 @@ export default {
})
},
parsePostmanCollection({ info, name, item }) {
let postwomanCollection = {
const postwomanCollection = {
name: "",
folders: [],
requests: [],
@@ -424,26 +487,39 @@ export default {
postwomanCollection.name = info ? info.name : name
if (item && item.length > 0) {
for (let collectionItem of item) {
for (const collectionItem of item) {
if (collectionItem.request) {
if (postwomanCollection.hasOwnProperty("folders")) {
if (
Object.prototype.hasOwnProperty.call(
postwomanCollection,
"folders"
)
) {
postwomanCollection.name = info ? info.name : name
postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
postwomanCollection.requests.push(
this.parsePostmanRequest(collectionItem)
)
} else {
postwomanCollection.name = name ? name : ""
postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
postwomanCollection.name = name || ""
postwomanCollection.requests.push(
this.parsePostmanRequest(collectionItem)
)
}
} else if (this.hasFolder(collectionItem)) {
postwomanCollection.folders.push(this.parsePostmanCollection(collectionItem))
postwomanCollection.folders.push(
this.parsePostmanCollection(collectionItem)
)
} else {
postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
postwomanCollection.requests.push(
this.parsePostmanRequest(collectionItem)
)
}
}
}
return postwomanCollection
},
parsePostmanRequest({ name, request }) {
let pwRequest = {
const pwRequest = {
url: "",
path: "",
method: "",
@@ -464,21 +540,27 @@ export default {
pwRequest.name = name
if (request.url) {
let requestObjectUrl = request.url.raw.match(/^(.+:\/\/[^\/]+|{[^\/]+})(\/[^\?]+|).*$/)
const requestObjectUrl = request.url.raw.match(
/^(.+:\/\/[^/]+|{[^/]+})(\/[^?]+|).*$/
)
if (requestObjectUrl) {
pwRequest.url = requestObjectUrl[1]
pwRequest.path = requestObjectUrl[2] ? requestObjectUrl[2] : ""
}
}
pwRequest.method = request.method
let itemAuth = request.auth ? request.auth : ""
let authType = itemAuth ? itemAuth.type : ""
const itemAuth = request.auth ? request.auth : ""
const authType = itemAuth ? itemAuth.type : ""
if (authType === "basic") {
pwRequest.auth = "Basic Auth"
pwRequest.httpUser =
itemAuth.basic[0].key === "username" ? itemAuth.basic[0].value : itemAuth.basic[1].value
itemAuth.basic[0].key === "username"
? itemAuth.basic[0].value
: itemAuth.basic[1].value
pwRequest.httpPassword =
itemAuth.basic[0].key === "password" ? itemAuth.basic[0].value : itemAuth.basic[1].value
itemAuth.basic[0].key === "password"
? itemAuth.basic[0].value
: itemAuth.basic[1].value
} else if (authType === "oauth2") {
pwRequest.auth = "OAuth 2.0"
pwRequest.bearerToken =
@@ -489,28 +571,28 @@ export default {
pwRequest.auth = "Bearer Token"
pwRequest.bearerToken = itemAuth.bearer[0].value
}
let requestObjectHeaders = request.header
const requestObjectHeaders = request.header
if (requestObjectHeaders) {
pwRequest.headers = requestObjectHeaders
for (let header of pwRequest.headers) {
for (const header of pwRequest.headers) {
delete header.name
delete header.type
}
}
if (request.url) {
let requestObjectParams = request.url.query
const requestObjectParams = request.url.query
if (requestObjectParams) {
pwRequest.params = requestObjectParams
for (let param of pwRequest.params) {
for (const param of pwRequest.params) {
delete param.disabled
}
}
}
if (request.body) {
if (request.body.mode === "urlencoded") {
let params = request.body.urlencoded
pwRequest.bodyParams = params ? params : []
for (let param of pwRequest.bodyParams) {
const params = request.body.urlencoded
pwRequest.bodyParams = params || []
for (const param of pwRequest.bodyParams) {
delete param.type
}
} else if (request.body.mode === "raw") {
@@ -521,7 +603,7 @@ export default {
return pwRequest
},
hasFolder(item) {
return item.hasOwnProperty("item")
return Object.prototype.hasOwnProperty.call(item, "item")
},
},
}

View File

@@ -13,9 +13,9 @@
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"
id="selectLabel"
v-model="name"
type="text"
:placeholder="$t('my_new_collection')"
@keyup.enter="addNewCollection"
/>
@@ -53,7 +53,9 @@ export default {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}

View File

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" @close="show = false">
<SmartModal v-if="show" @close="$emit('hide-modal')">
<div slot="header">
<div class="row-wrapper">
<h3 class="title">{{ $t("new_folder") }}</h3>
@@ -13,9 +13,9 @@
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"
id="selectLabel"
v-model="name"
type="text"
:placeholder="$t('my_new_folder')"
@keyup.enter="addFolder"
/>
@@ -40,9 +40,9 @@
export default {
props: {
show: Boolean,
folder: Object,
folderPath: String,
collectionIndex: Number,
folder: { type: Object, default: () => {} },
folderPath: { type: String, default: null },
collectionIndex: { type: Number, default: null },
},
data() {
return {

View File

@@ -1,7 +1,10 @@
<template>
<div>
<div
:class="['row-wrapper transition duration-150 ease-in-out', { 'bg-bgDarkColor': dragging }]"
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging },
]"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -10,43 +13,60 @@
@dragend="dragging = false"
>
<button class="icon" @click="toggleShowChildren">
<i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
<i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i class="material-icons">folder</i>
<span>{{ collection.name }}</span>
</button>
<div>
<button
v-if="doc"
v-tooltip.left="$t('import')"
class="icon"
@click="$emit('select-collection')"
v-tooltip.left="$t('import')"
>
<i class="material-icons">topic</i>
</button>
<v-popover>
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<button v-tooltip.left="$t('more')" class="tooltip-target icon">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
class="icon"
@click="$emit('add-folder', { folder: collection, path: `${collectionIndex}` })"
v-close-popover
class="icon"
@click="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button class="icon" @click="$emit('edit-collection')" v-close-popover>
<button
v-close-popover
class="icon"
@click="$emit('edit-collection')"
>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="confirmRemove = true" v-close-popover>
<button
v-close-popover
class="icon"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
@@ -68,7 +88,7 @@
:folder-path="`${collectionIndex}/${index}`"
:collection-index="collectionIndex"
:doc="doc"
:isFiltered="isFiltered"
:is-filtered="isFiltered"
@add-folder="$emit('add-folder', $event)"
@edit-folder="$emit('edit-folder', $event)"
@edit-request="$emit('edit-request', $event)"
@@ -94,11 +114,14 @@
</ul>
<ul>
<li
v-if="collection.folders.length === 0 && collection.requests.length === 0"
v-if="
collection.folders.length === 0 && collection.requests.length === 0
"
class="flex ml-8 border-l border-brdColor"
>
<p class="info">
<i class="material-icons">not_interested</i> {{ $t("collection_empty") }}
<i class="material-icons">not_interested</i>
{{ $t("collection_empty") }}
</p>
</li>
</ul>
@@ -117,8 +140,8 @@ import { fb } from "~/helpers/fb"
export default {
props: {
collectionIndex: Number,
collection: Object,
collectionIndex: { type: Number, default: null },
collection: { type: Object, default: () => {} },
doc: Boolean,
isFiltered: Boolean,
},
@@ -135,7 +158,9 @@ export default {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}

View File

@@ -13,9 +13,9 @@
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"
id="selectLabel"
v-model="name"
type="text"
:placeholder="editingCollection.name"
@keyup.enter="saveCollection"
/>
@@ -42,8 +42,8 @@ import { fb } from "~/helpers/fb"
export default {
props: {
show: Boolean,
editingCollection: Object,
editingCollectionIndex: Number,
editingCollection: { type: Object, default: () => {} },
editingCollectionIndex: { type: Number, default: null },
},
data() {
return {
@@ -55,7 +55,9 @@ export default {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}

View File

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" @close="show = false">
<SmartModal v-if="show" @close="$emit('hide-modal')">
<div slot="header">
<div class="row-wrapper">
<h3 class="title">{{ $t("edit_folder") }}</h3>
@@ -13,9 +13,9 @@
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"
id="selectLabel"
v-model="name"
type="text"
:placeholder="folder.name"
@keyup.enter="editFolder"
/>
@@ -42,9 +42,9 @@ import { fb } from "~/helpers/fb"
export default {
props: {
show: Boolean,
collectionIndex: Number,
folder: Object,
folderIndex: Number,
collectionIndex: { type: Number, default: null },
folder: { type: Object, default: () => {} },
folderIndex: { type: Number, default: null },
},
data() {
return {
@@ -56,7 +56,9 @@ export default {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}

View File

@@ -13,11 +13,11 @@
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"
id="selectLabel"
v-model="requestUpdateData.name"
@keyup.enter="saveRequest"
type="text"
:placeholder="request.name"
@keyup.enter="saveRequest"
/>
</div>
<div slot="footer">
@@ -42,11 +42,11 @@ import { fb } from "~/helpers/fb"
export default {
props: {
show: Boolean,
collectionIndex: Number,
folderIndex: Number,
folderName: String,
request: Object,
requestIndex: Number,
collectionIndex: { type: Number, default: null },
folderIndex: { type: Number, default: null },
folderName: { type: String, default: null },
request: { type: Object, default: () => {} },
requestIndex: { type: Number, default: null },
},
data() {
return {
@@ -60,7 +60,9 @@ export default {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}

View File

@@ -1,7 +1,10 @@
<template>
<div>
<div
:class="['row-wrapper transition duration-150 ease-in-out', { 'bg-bgDarkColor': dragging }]"
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging },
]"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -11,22 +14,26 @@
>
<div>
<button class="icon" @click="toggleShowChildren">
<i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
<i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i class="material-icons">folder_open</i>
<span>{{ folder.name }}</span>
</button>
</div>
<v-popover>
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<button v-tooltip.left="$t('more')" class="tooltip-target icon">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-close-popover
class="icon"
@click="$emit('add-folder', { folder, path: folderPath })"
v-close-popover
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
@@ -34,16 +41,18 @@
</div>
<div>
<button
class="icon"
@click="$emit('edit-folder', { folder, folderIndex, collectionIndex })"
v-close-popover
class="icon"
@click="
$emit('edit-folder', { folder, folderIndex, collectionIndex })
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="confirmRemove = true" v-close-popover>
<button v-close-popover class="icon" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
@@ -61,9 +70,10 @@
<CollectionsGraphqlFolder
:folder="subFolder"
:folder-index="subFolderIndex"
:folder-path="`${folderPath}/${subFolderIndex}`"
:collection-index="collectionIndex"
:doc="doc"
:folder-path="`${folderPath}/${subFolderIndex}`"
:is-filtered="isFiltered"
@add-folder="$emit('add-folder', $event)"
@edit-folder="$emit('edit-folder', $event)"
@edit-request="$emit('edit-request', $event)"
@@ -96,7 +106,10 @@
"
>
<li class="flex ml-8 border-l border-brdColor">
<p class="info"><i class="material-icons">not_interested</i> {{ $t("folder_empty") }}</p>
<p class="info">
<i class="material-icons">not_interested</i>
{{ $t("folder_empty") }}
</p>
</li>
</ul>
</div>
@@ -113,12 +126,12 @@
import { fb } from "~/helpers/fb"
export default {
name: "folder",
name: "Folder",
props: {
folder: Object,
folderIndex: Number,
collectionIndex: Number,
folderPath: String,
folder: { type: Object, default: () => {} },
folderIndex: { type: Number, default: null },
collectionIndex: { type: Number, default: null },
folderPath: { type: String, default: null },
doc: Boolean,
isFiltered: Boolean,
},
@@ -134,7 +147,9 @@ export default {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}

View File

@@ -5,12 +5,16 @@
<h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div>
<v-popover>
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<button v-tooltip.left="$t('more')" class="tooltip-target icon">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button class="icon" @click="readCollectionGist" v-close-popover>
<button
v-close-popover
class="icon"
@click="readCollectionGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
@@ -25,12 +29,16 @@
}"
>
<button
v-close-popover
:disabled="
!fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
!fb.currentUser
? true
: fb.currentUser.provider !== 'github.com'
? true
: false
"
class="icon"
@click="createCollectionGist"
v-close-popover
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
@@ -48,42 +56,48 @@
<div class="flex flex-col items-start p-2">
<span
v-tooltip="{
content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
content: !fb.currentUser
? $t('login_first')
: $t('replace_current'),
}"
>
<button :disabled="!fb.currentUser" class="icon" @click="syncCollections">
<button
:disabled="!fb.currentUser"
class="icon"
@click="syncCollections"
>
<i class="material-icons">folder_shared</i>
<span>{{ $t("import_from_sync") }}</span>
</button>
</span>
<button
v-tooltip="$t('replace_current')"
class="icon"
@click="openDialogChooseFileToReplaceWith"
v-tooltip="$t('replace_current')"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("replace_json") }}</span>
<input
type="file"
@change="replaceWithJSON"
style="display: none"
ref="inputChooseFileToReplaceWith"
type="file"
style="display: none"
accept="application/json"
@change="replaceWithJSON"
/>
</button>
<button
v-tooltip="$t('preserve_current')"
class="icon"
@click="openDialogChooseFileToImportFrom"
v-tooltip="$t('preserve_current')"
>
<i class="material-icons">folder_special</i>
<span>{{ $t("import_json") }}</span>
<input
type="file"
@change="importFromJSON"
style="display: none"
ref="inputChooseFileToImportFrom"
type="file"
style="display: none"
accept="application/json"
@change="importFromJSON"
/>
</button>
</div>
@@ -102,7 +116,11 @@
<button class="icon" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
<button
v-tooltip="$t('download_file')"
class="icon primary"
@click="exportJSON"
>
{{ $t("export") }}
</button>
</span>
@@ -115,18 +133,22 @@
import { fb } from "~/helpers/fb"
export default {
props: {
show: Boolean,
},
data() {
return {
fb,
showJsonCode: false,
}
},
props: {
show: Boolean,
},
computed: {
collectionJson() {
return JSON.stringify(this.$store.state.postwoman.collectionsGraphql, null, 2)
return JSON.stringify(
this.$store.state.postwoman.collectionsGraphql,
null,
2
)
},
},
methods: {
@@ -148,11 +170,11 @@ export default {
},
}
)
.then(({ html_url }) => {
.then((res) => {
this.$toast.success(this.$t("gist_created"), {
icon: "done",
})
window.open(html_url)
window.open(res.html_url)
})
.catch((error) => {
this.$toast.error(this.$t("something_went_wrong"), {
@@ -162,7 +184,7 @@ export default {
})
},
async readCollectionGist() {
let gist = prompt(this.$t("enter_gist_url"))
const gist = prompt(this.$t("enter_gist_url"))
if (!gist) return
await this.$axios
.$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
@@ -171,8 +193,11 @@ export default {
},
})
.then(({ files }) => {
let collections = JSON.parse(Object.values(files)[0].content)
this.$store.commit("postwoman/replaceCollections", { data: collections, flag: "graphql" })
const collections = JSON.parse(Object.values(files)[0].content)
this.$store.commit("postwoman/replaceCollections", {
data: collections,
flag: "graphql",
})
this.fileImported()
this.syncToFBCollections()
})
@@ -191,22 +216,32 @@ export default {
this.$refs.inputChooseFileToImportFrom.click()
},
replaceWithJSON() {
let reader = new FileReader()
const reader = new FileReader()
reader.onload = ({ target }) => {
let content = target.result
const content = target.result
let collections = JSON.parse(content)
if (collections[0]) {
let [name, folders, requests] = Object.keys(collections[0])
if (name === "name" && folders === "folders" && requests === "requests") {
const [name, folders, requests] = Object.keys(collections[0])
if (
name === "name" &&
folders === "folders" &&
requests === "requests"
) {
// Do nothing
}
} else if (collections.info && collections.info.schema.includes("v2.1.0")) {
} else if (
collections.info &&
collections.info.schema.includes("v2.1.0")
) {
collections = [this.parsePostmanCollection(collections)]
} else {
this.failedImport()
return
}
this.$store.commit("postwoman/replaceCollections", { data: collections, flag: "graphql" })
this.$store.commit("postwoman/replaceCollections", {
data: collections,
flag: "graphql",
})
this.fileImported()
this.syncToFBCollections()
}
@@ -214,24 +249,36 @@ export default {
this.$refs.inputChooseFileToReplaceWith.value = ""
},
importFromJSON() {
let reader = new FileReader()
const reader = new FileReader()
reader.onload = ({ target }) => {
let content = target.result
const content = target.result
let collections = JSON.parse(content)
if (collections[0]) {
let [name, folders, requests] = Object.keys(collections[0])
if (name === "name" && folders === "folders" && requests === "requests") {
const [name, folders, requests] = Object.keys(collections[0])
if (
name === "name" &&
folders === "folders" &&
requests === "requests"
) {
// Do nothing
}
} else if (collections.info && collections.info.schema.includes("v2.1.0")) {
//replace the variables, postman uses {{var}}, Hoppscotch uses <<var>>
collections = JSON.parse(content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>"))
} else if (
collections.info &&
collections.info.schema.includes("v2.1.0")
) {
// replace the variables, postman uses {{var}}, Hoppscotch uses <<var>>
collections = JSON.parse(
content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>")
)
collections = [this.parsePostmanCollection(collections)]
} else {
this.failedImport()
return
}
this.$store.commit("postwoman/importCollections", { data: collections, flag: "graphql" })
this.$store.commit("postwoman/importCollections", {
data: collections,
flag: "graphql",
})
this.fileImported()
this.syncToFBCollections()
}
@@ -241,10 +288,10 @@ export default {
exportJSON() {
let text = this.collectionJson
text = text.replace(/\n/g, "\r\n")
let blob = new Blob([text], {
const blob = new Blob([text], {
type: "text/json",
})
let anchor = document.createElement("a")
const anchor = document.createElement("a")
anchor.download = "hoppscotch-collection.json"
anchor.href = window.URL.createObjectURL(blob)
anchor.target = "_blank"
@@ -267,7 +314,9 @@ export default {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
@@ -284,7 +333,7 @@ export default {
})
},
parsePostmanCollection({ info, name, item }) {
let postwomanCollection = {
const postwomanCollection = {
name: "",
folders: [],
requests: [],
@@ -293,26 +342,39 @@ export default {
postwomanCollection.name = info ? info.name : name
if (item && item.length > 0) {
for (let collectionItem of item) {
for (const collectionItem of item) {
if (collectionItem.request) {
if (postwomanCollection.hasOwnProperty("folders")) {
if (
Object.prototype.hasOwnProperty.call(
postwomanCollection,
"folders"
)
) {
postwomanCollection.name = info ? info.name : name
postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
postwomanCollection.requests.push(
this.parsePostmanRequest(collectionItem)
)
} else {
postwomanCollection.name = name ? name : ""
postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
postwomanCollection.name = name || ""
postwomanCollection.requests.push(
this.parsePostmanRequest(collectionItem)
)
}
} else if (this.hasFolder(collectionItem)) {
postwomanCollection.folders.push(this.parsePostmanCollection(collectionItem))
postwomanCollection.folders.push(
this.parsePostmanCollection(collectionItem)
)
} else {
postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
postwomanCollection.requests.push(
this.parsePostmanRequest(collectionItem)
)
}
}
}
return postwomanCollection
},
parsePostmanRequest({ name, request }) {
let pwRequest = {
const pwRequest = {
url: "",
path: "",
method: "",
@@ -332,20 +394,26 @@ export default {
}
pwRequest.name = name
let requestObjectUrl = request.url.raw.match(/^(.+:\/\/[^\/]+|{[^\/]+})(\/[^\?]+|).*$/)
const requestObjectUrl = request.url.raw.match(
/^(.+:\/\/[^/]+|{[^/]+})(\/[^?]+|).*$/
)
if (requestObjectUrl) {
pwRequest.url = requestObjectUrl[1]
pwRequest.path = requestObjectUrl[2] ? requestObjectUrl[2] : ""
}
pwRequest.method = request.method
let itemAuth = request.auth ? request.auth : ""
let authType = itemAuth ? itemAuth.type : ""
const itemAuth = request.auth ? request.auth : ""
const authType = itemAuth ? itemAuth.type : ""
if (authType === "basic") {
pwRequest.auth = "Basic Auth"
pwRequest.httpUser =
itemAuth.basic[0].key === "username" ? itemAuth.basic[0].value : itemAuth.basic[1].value
itemAuth.basic[0].key === "username"
? itemAuth.basic[0].value
: itemAuth.basic[1].value
pwRequest.httpPassword =
itemAuth.basic[0].key === "password" ? itemAuth.basic[0].value : itemAuth.basic[1].value
itemAuth.basic[0].key === "password"
? itemAuth.basic[0].value
: itemAuth.basic[1].value
} else if (authType === "oauth2") {
pwRequest.auth = "OAuth 2.0"
pwRequest.bearerToken =
@@ -356,26 +424,26 @@ export default {
pwRequest.auth = "Bearer Token"
pwRequest.bearerToken = itemAuth.bearer[0].value
}
let requestObjectHeaders = request.header
const requestObjectHeaders = request.header
if (requestObjectHeaders) {
pwRequest.headers = requestObjectHeaders
for (let header of pwRequest.headers) {
for (const header of pwRequest.headers) {
delete header.name
delete header.type
}
}
let requestObjectParams = request.url.query
const requestObjectParams = request.url.query
if (requestObjectParams) {
pwRequest.params = requestObjectParams
for (let param of pwRequest.params) {
for (const param of pwRequest.params) {
delete param.disabled
}
}
if (request.body) {
if (request.body.mode === "urlencoded") {
let params = request.body.urlencoded
pwRequest.bodyParams = params ? params : []
for (let param of pwRequest.bodyParams) {
const params = request.body.urlencoded
pwRequest.bodyParams = params || []
for (const param of pwRequest.bodyParams) {
delete param.type
}
} else if (request.body.mode === "raw") {
@@ -386,7 +454,7 @@ export default {
return pwRequest
},
hasFolder(item) {
return item.hasOwnProperty("item")
return Object.prototype.hasOwnProperty.call(item, "item")
},
},
}

View File

@@ -1,7 +1,10 @@
<template>
<div>
<div
:class="['row-wrapper transition duration-150 ease-in-out', { 'bg-bgDarkColor': dragging }]"
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging },
]"
draggable="true"
@dragstart="dragStart"
@dragover.stop
@@ -10,20 +13,22 @@
>
<div>
<button
v-tooltip="!doc ? $t('use_request') : ''"
class="icon"
@click="!doc ? selectRequest() : {}"
v-tooltip="!doc ? $t('use_request') : ''"
>
<i class="material-icons">description</i>
<span>{{ request.name }}</span>
</button>
</div>
<v-popover>
<button class="tooltip-target icon" v-tooltip="$t('more')">
<button v-tooltip="$t('more')" class="tooltip-target icon">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-close-popover
class="icon"
@click="
$emit('edit-request', {
@@ -34,14 +39,13 @@
requestIndex,
})
"
v-close-popover
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="confirmRemove = true" v-close-popover>
<button v-close-popover class="icon" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
@@ -63,11 +67,11 @@ import { fb } from "~/helpers/fb"
export default {
props: {
request: Object,
collectionIndex: Number,
folderIndex: Number,
folderName: String,
requestIndex: Number,
request: { type: Object, default: () => {} },
collectionIndex: { type: Number, default: null },
folderIndex: { type: Number, default: null },
folderName: { type: String, default: null },
requestIndex: { type: Number, default: null },
doc: Boolean,
},
data() {
@@ -81,14 +85,18 @@ export default {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
}
},
selectRequest() {
this.$store.commit("postwoman/selectGraphqlRequest", { request: this.request })
this.$store.commit("postwoman/selectGraphqlRequest", {
request: this.request,
})
},
dragStart({ dataTransfer }) {
this.dragging = !this.dragging

View File

@@ -12,17 +12,33 @@
</div>
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("token_req_name") }}</label>
<input type="text" id="selectLabel" v-model="requestData.name" @keyup.enter="saveRequestAs" />
<input
id="selectLabel"
v-model="requestData.name"
type="text"
@keyup.enter="saveRequestAs"
/>
<ul>
<li>
<label for="selectCollection">{{ $t("collection") }}</label>
<span class="select-wrapper">
<select type="text" id="selectCollection" v-model="requestData.collectionIndex">
<option :key="undefined" :value="undefined" hidden disabled selected>
<select
id="selectCollection"
v-model="requestData.collectionIndex"
type="text"
>
<option
:key="undefined"
:value="undefined"
hidden
disabled
selected
>
{{ $t("select_collection") }}
</option>
<option
v-for="(collection, index) in $store.state.postwoman.collectionsGraphql"
v-for="(collection, index) in $store.state.postwoman
.collectionsGraphql"
:key="index"
:value="index"
>
@@ -34,18 +50,26 @@
</ul>
<label>{{ $t("folder") }}</label>
<SmartAutoComplete
v-model="requestData.folderName"
:placeholder="$t('search')"
:source="folders"
:spellcheck="false"
v-model="requestData.folderName"
/>
<ul>
<li>
<label for="selectRequest">{{ $t("request") }}</label>
<span class="select-wrapper">
<select type="text" id="selectRequest" v-model="requestData.requestIndex">
<select
id="selectRequest"
v-model="requestData.requestIndex"
type="text"
>
<option :key="undefined" :value="undefined">/</option>
<option v-for="(folder, index) in requests" :key="index" :value="index">
<option
v-for="(folder, index) in requests"
:key="index"
:value="index"
>
{{ folder.name }}
</option>
</select>
@@ -75,7 +99,7 @@ import { fb } from "~/helpers/fb"
export default {
props: {
show: Boolean,
editingRequest: Object,
editingRequest: { type: Object, default: () => {} },
},
data() {
return {
@@ -88,20 +112,6 @@ export default {
},
}
},
watch: {
"requestData.collectionIndex": function resetFolderAndRequestIndex() {
// if user has chosen some folder, than selected other collection, which doesn't have any folders
// than `requestUpdateData.folderName` won't be reseted
this.$data.requestData.folderName = undefined
this.$data.requestData.requestIndex = undefined
},
"requestData.folderName": function resetRequestIndex() {
this.$data.requestData.requestIndex = undefined
},
editingRequest({ name }) {
this.$data.requestData.name = name || this.$data.defaultRequestName
},
},
computed: {
folders() {
const collections = this.$store.state.postwoman.collectionsGraphql
@@ -124,7 +134,8 @@ export default {
return []
}
const userSelectedAnyFolder = folderName !== undefined && folderName !== ""
const userSelectedAnyFolder =
folderName !== undefined && folderName !== ""
if (userSelectedAnyFolder) {
const collection = collections[collectionIndex]
@@ -142,19 +153,36 @@ export default {
}
},
},
watch: {
"requestData.collectionIndex": function resetFolderAndRequestIndex() {
// if user has chosen some folder, than selected other collection, which doesn't have any folders
// than `requestUpdateData.folderName` won't be reseted
this.$data.requestData.folderName = undefined
this.$data.requestData.requestIndex = undefined
},
"requestData.folderName": function resetRequestIndex() {
this.$data.requestData.requestIndex = undefined
},
editingRequest({ name }) {
this.$data.requestData.name = name || this.$data.defaultRequestName
},
},
methods: {
syncCollections() {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
}
},
saveRequestAs() {
const userDidntSpecifyCollection = this.$data.requestData.collectionIndex === undefined
const userDidntSpecifyCollection =
this.$data.requestData.collectionIndex === undefined
if (userDidntSpecifyCollection) {
this.$toast.error(this.$t("select_collection"), {
icon: "error",

View File

@@ -1,5 +1,5 @@
import field from "../Field"
import { shallowMount } from "@vue/test-utils"
import field from "../Field"
const gqlField = {
name: "testField",

View File

@@ -1,7 +1,11 @@
import type from "../Type"
import { shallowMount } from "@vue/test-utils"
import {GraphQLEnumType, GraphQLInputObjectType, GraphQLInterfaceType, GraphQLObjectType} from "graphql"
import {
GraphQLEnumType,
GraphQLInputObjectType,
GraphQLInterfaceType,
GraphQLObjectType,
} from "graphql"
import type from "../Type"
const gqlType = {
name: "TestType",
@@ -77,11 +81,11 @@ describe("type", () => {
test("prepends 'input' to type name for Input Types", () => {
const testType = new GraphQLInputObjectType({
name: "TestType",
fields: {}
fields: {},
})
const wrapper = factory({
gqlType: testType
gqlType: testType,
})
expect(wrapper.find(".type-title").text().startsWith("input")).toEqual(true)
@@ -90,24 +94,26 @@ describe("type", () => {
test("prepends 'interface' to type name for Interface Types", () => {
const testType = new GraphQLInterfaceType({
name: "TestType",
fields: {}
fields: {},
})
const wrapper = factory({
gqlType: testType
gqlType: testType,
})
expect(wrapper.find(".type-title").text().startsWith("interface")).toEqual(true)
expect(wrapper.find(".type-title").text().startsWith("interface")).toEqual(
true
)
})
test("prepends 'enum' to type name for Enum Types", () => {
const testType = new GraphQLEnumType({
name: "TestType",
values: {}
values: {},
})
const wrapper = factory({
gqlType: testType
gqlType: testType,
})
expect(wrapper.find(".type-title").text().startsWith("enum")).toEqual(true)
@@ -116,34 +122,36 @@ describe("type", () => {
test("'interfaces' computed property returns all the related interfaces", () => {
const testInterfaceA = new GraphQLInterfaceType({
name: "TestInterfaceA",
fields: {}
fields: {},
})
const testInterfaceB = new GraphQLInterfaceType({
name: "TestInterfaceB",
fields: {}
fields: {},
})
const type = new GraphQLObjectType({
name: "TestType",
interfaces: [testInterfaceA, testInterfaceB],
fields: {}
fields: {},
})
const wrapper = factory({
gqlType: type
gqlType: type,
})
expect(wrapper.vm.interfaces).toEqual(expect.arrayContaining([testInterfaceA, testInterfaceB]))
expect(wrapper.vm.interfaces).toEqual(
expect.arrayContaining([testInterfaceA, testInterfaceB])
)
})
test("'interfaces' computed property returns an empty array if there are no interfaces", () => {
const type = new GraphQLObjectType({
name: "TestType",
fields: {}
fields: {},
})
const wrapper = factory({
gqlType: type
gqlType: type,
})
expect(wrapper.vm.interfaces).toEqual([])
@@ -152,11 +160,11 @@ describe("type", () => {
test("'interfaces' computed property returns an empty array if the type is an enum", () => {
const type = new GraphQLEnumType({
name: "TestType",
values: {}
values: {},
})
const wrapper = factory({
gqlType: type
gqlType: type,
})
expect(wrapper.vm.interfaces).toEqual([])
@@ -165,24 +173,24 @@ describe("type", () => {
test("'children' computed property returns all the types implementing an interface", () => {
const testInterface = new GraphQLInterfaceType({
name: "TestInterface",
fields: {}
fields: {},
})
const typeA = new GraphQLObjectType({
name: "TypeA",
interfaces: [testInterface],
fields: {}
fields: {},
})
const typeB = new GraphQLObjectType({
name: "TypeB",
interfaces: [testInterface],
fields: {}
fields: {},
})
const wrapper = factory({
gqlType: testInterface,
gqlTypes: [testInterface, typeA, typeB]
gqlTypes: [testInterface, typeA, typeB],
})
expect(wrapper.vm.children).toEqual(expect.arrayContaining([typeA, typeB]))
@@ -191,22 +199,22 @@ describe("type", () => {
test("'children' computed property returns an empty array if there are no types implementing the interface", () => {
const testInterface = new GraphQLInterfaceType({
name: "TestInterface",
fields: {}
fields: {},
})
const typeA = new GraphQLObjectType({
name: "TypeA",
fields: {}
fields: {},
})
const typeB = new GraphQLObjectType({
name: "TypeB",
fields: {}
fields: {},
})
const wrapper = factory({
gqlType: testInterface,
gqlTypes: [testInterface, typeA, typeB]
gqlTypes: [testInterface, typeA, typeB],
})
expect(wrapper.vm.children).toEqual([])
@@ -215,20 +223,19 @@ describe("type", () => {
test("'children' computed property returns an empty array if the type is an enum", () => {
const testInterface = new GraphQLInterfaceType({
name: "TestInterface",
fields: {}
fields: {},
})
const testType = new GraphQLEnumType({
name: "TestEnum",
values: {}
values: {},
})
const wrapper = factory({
gqlType: testType,
gqlTypes: [testInterface, testType]
gqlTypes: [testInterface, testType],
})
expect(wrapper.vm.children).toEqual([])
})
})

View File

@@ -1,6 +1,6 @@
import typelink from "../TypeLink.vue"
import { shallowMount } from "@vue/test-utils"
import {GraphQLInt} from "graphql"
import { GraphQLInt } from "graphql"
import typelink from "../TypeLink.vue"
const factory = (props) =>
shallowMount(typelink, {
@@ -39,7 +39,7 @@ describe("typelink", () => {
const wrapper = factory({
gqlType: GraphQLInt,
jumpTypeCallback: callback
jumpTypeCallback: callback,
})
await wrapper.trigger("click")

View File

@@ -78,7 +78,7 @@ import { codegens } from "~/helpers/codegen/codegen"
export default {
props: {
show: Boolean,
requestCode: { type: String, default: "" },
requestCode: { type: String, default: null },
requestTypeProp: { type: String, default: "curl" },
},
data() {

View File

@@ -62,8 +62,8 @@ import { getEditorLangForMimeType } from "~/helpers/editorutils"
export default {
props: {
rawParams: { type: String, default: "{}" },
contentType: { type: String, default: "" },
rawParams: { type: String, default: null },
contentType: { type: String, default: null },
rawInput: { type: Boolean, default: false },
},
data() {

View File

@@ -33,7 +33,7 @@
export default {
props: {
show: Boolean,
title: { type: String, default: "" },
title: { type: String, default: null },
yes: {
type: String,
default() {

View File

@@ -7,9 +7,9 @@
<script>
export default {
props: {
label: { type: String, default: "" },
icon: { type: String, default: "" },
id: { type: String, default: "", required: true },
label: { type: String, default: null },
icon: { type: String, default: null },
id: { type: String, default: null, required: true },
selected: {
type: Boolean,
default: false,

View File

@@ -5,7 +5,7 @@
<script>
export default {
props: {
value: { type: String, default: "" },
value: { type: String, default: null },
},
data() {
return {

View File

@@ -53,7 +53,7 @@ export default {
text: this.$t("reload"),
onClick: (_, toastObject) => {
toastObject.goAway(0)
this.$router.push("/", () => window.location.reload())
window.location.reload()
},
},
],

View File

@@ -177,7 +177,9 @@ describe("DispatchingStore", () => {
})
store.dispatches$.subscribe((value) => {
if (isEqual(value, { dispatcher: "testDispatcher", payload: testPayload })) {
if (
isEqual(value, { dispatcher: "testDispatcher", payload: testPayload })
) {
done()
}
})

View File

@@ -2,7 +2,7 @@
<div class="page">
<div class="content">
<div class="page-columns inner-left">
<AppSection :label="$t('import')" ref="import" no-legend>
<AppSection ref="import" :label="$t('import')" no-legend>
<div class="flex flex-col">
<label>{{ $t("collection") }}</label>
<p class="info">
@@ -10,7 +10,11 @@
</p>
<div class="row-wrapper">
<label for="collectionUpload">
<button class="icon" @click="$refs.collectionUpload.click()" v-tooltip="'JSON'">
<button
v-tooltip="'JSON'"
class="icon"
@click="$refs.collectionUpload.click()"
>
<i class="material-icons">folder</i>
<span>{{ $t("import_collections") }}</span>
</button>
@@ -22,7 +26,11 @@
@change="uploadCollection"
/>
<div>
<button class="icon" @click="collectionJSON = '[]'" v-tooltip.bottom="$t('clear')">
<button
v-tooltip.bottom="$t('clear')"
class="icon"
@click="collectionJSON = '[]'"
>
<i class="material-icons">clear_all</i>
</button>
</div>
@@ -47,10 +55,10 @@
</div>
</AppSection>
<AppSection :label="$t('documentation')" ref="documentation" no-legend>
<AppSection ref="documentation" :label="$t('documentation')" no-legend>
<div class="flex flex-col">
<label>{{ $t("documentation") }}</label>
<p v-if="this.items.length === 0" class="info">
<p v-if="items.length === 0" class="info">
{{ $t("generate_docs_first") }}
</p>
<div v-else class="row-wrapper">
@@ -65,7 +73,11 @@
>
<button
:disabled="
!fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
!fb.currentUser
? true
: fb.currentUser.provider !== 'github.com'
? true
: false
"
class="icon"
@click="createDocsGist"
@@ -76,7 +88,10 @@
</div>
</div>
<div>
<span v-for="(collection, index) in this.items" :key="`collection-${index}`">
<span
v-for="(collection, index) in items"
:key="`collection-${index}`"
>
<DocsCollection :collection="collection" />
</span>
</div>
@@ -87,9 +102,9 @@
<aside class="sticky-inner inner-right lg:max-w-md">
<Collections
:selected="selected"
:doc="true"
@use-collection="useSelectedCollection($event)"
@remove-collection="removeSelectedCollection($event)"
:doc="true"
/>
</aside>
</div>
@@ -97,8 +112,8 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import Mustache from "mustache"
import { fb } from "~/helpers/fb"
import DocsTemplate from "~/assets/md/docs.md"
import folderContents from "~/assets/md/folderContents.md"
import folderBody from "~/assets/md/folderBody.md"
@@ -113,6 +128,11 @@ export default {
selected: [],
}
},
head() {
return {
title: `Documentation • Hoppscotch`,
}
},
methods: {
async createDocsGist() {
await this.$axios
@@ -132,11 +152,11 @@ export default {
},
}
)
.then(({ html_url }) => {
.then((res) => {
this.$toast.success(this.$t("gist_created"), {
icon: "done",
})
window.open(html_url)
window.open(res.html_url)
})
.catch((error) => {
this.$toast.error(this.$t("something_went_wrong"), {
@@ -147,9 +167,9 @@ export default {
},
uploadCollection() {
let file = this.$refs.collectionUpload.files[0]
const file = this.$refs.collectionUpload.files[0]
if (file !== undefined && file !== null) {
let reader = new FileReader()
const reader = new FileReader()
reader.onload = ({ target }) => {
this.collectionJSON = target.result
}
@@ -165,16 +185,22 @@ export default {
this.$refs.collectionUpload.value = ""
},
assignIDs(items, pref, nesting_level) {
for (var i = 0; i < items.length; ++i) {
assignIDs(items, pref, nestingLevel) {
for (let i = 0; i < items.length; ++i) {
items[i].id = `&emsp;${pref}${i + 1}.`
items[i].ref = `${items[i].name.split(" ").join("-")}`
items[i].nesting_level = nesting_level
items[i].folders = this.assignIDs(items[i].folders, items[i].id, nesting_level + "#")
for (var j = 0; j < items[i].requests.length; ++j) {
items[i].nestingLevel = nestingLevel
items[i].folders = this.assignIDs(
items[i].folders,
items[i].id,
nestingLevel + "#"
)
for (let j = 0; j < items[i].requests.length; ++j) {
items[i].requests[j].id = `&emsp;${items[i].id}${i + 1}`
items[i].requests[j].ref = `${items[i].requests[j].name.split(" ").join("-")}`
items[i].requests[j].nesting_level = nesting_level + "#"
items[i].requests[j].ref = `${items[i].requests[j].name
.split(" ")
.join("-")}`
items[i].requests[j].nestingLevel = nestingLevel + "#"
}
}
return items
@@ -210,16 +236,19 @@ export default {
isPreRequestScript() {
return (
this.preRequestScript &&
this.preRequestScript != `// pw.env.set('variable', 'value');`
this.preRequestScript !== `// pw.env.set('variable', 'value');`
)
},
isTestScript() {
return this.testScript && this.testScript != `// pw.expect('variable').toBe('value');`
return (
this.testScript &&
this.testScript !== `// pw.expect('variable').toBe('value');`
)
},
},
{
folderContents: folderContents,
folderBody: folderBody,
folderContents,
folderBody,
}
)
this.docsMarkdown = docsMarkdown.replace(/^\s*[\r\n]/gm, "\n\n")
@@ -231,24 +260,27 @@ export default {
},
useSelectedCollection(collection) {
if (this.selected.find((coll) => coll == collection)) {
if (this.selected.find((coll) => coll === collection)) {
return
}
this.selected.push(collection)
let importCollection = JSON.stringify(this.selected, null, 2)
this.collectionJSON = JSON.stringify(JSON.parse(importCollection), null, 2)
const importCollection = JSON.stringify(this.selected, null, 2)
this.collectionJSON = JSON.stringify(
JSON.parse(importCollection),
null,
2
)
},
removeSelectedCollection(collection) {
this.selected = this.selected.filter((coll) => coll != collection)
let importCollection = JSON.stringify(this.selected, null, 2)
this.collectionJSON = JSON.stringify(JSON.parse(importCollection), null, 2)
this.selected = this.selected.filter((coll) => coll !== collection)
const importCollection = JSON.stringify(this.selected, null, 2)
this.collectionJSON = JSON.stringify(
JSON.parse(importCollection),
null,
2
)
},
},
head() {
return {
title: `Documentation • Hoppscotch`,
}
},
}
</script>

View File

@@ -4,7 +4,7 @@
<Teams />
</div>
<AppSection :label="$t('account')" ref="account" no-legend>
<AppSection ref="account" :label="$t('account')" no-legend>
<div class="flex flex-col">
<label>{{ $t("account") }}</label>
<div v-if="fb.currentUser">
@@ -49,7 +49,10 @@
</p>
<p>
<SmartToggle :on="SYNC_HISTORY" @change="toggleSettings('syncHistory', !SYNC_HISTORY)">
<SmartToggle
:on="SYNC_HISTORY"
@change="toggleSettings('syncHistory', !SYNC_HISTORY)"
>
{{ $t("syncHistory") + " " + $t("sync") }}
{{ SYNC_HISTORY ? $t("enabled") : $t("disabled") }}
</SmartToggle>
@@ -71,13 +74,16 @@
</div>
</AppSection>
<AppSection :label="$t('theme')" ref="theme" no-legend>
<AppSection ref="theme" :label="$t('theme')" no-legend>
<div class="flex flex-col">
<label>{{ $t("theme") }}</label>
<SmartColorModePicker />
<SmartAccentModePicker />
<span>
<SmartToggle :on="SCROLL_INTO_ENABLED" @change="toggleSetting('SCROLL_INTO_ENABLED')">
<SmartToggle
:on="SCROLL_INTO_ENABLED"
@change="toggleSetting('SCROLL_INTO_ENABLED')"
>
{{ $t("scrollInto_use_toggle") }}
{{ SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
</SmartToggle>
@@ -85,16 +91,21 @@
</div>
</AppSection>
<AppSection :label="$t('extensions')" ref="extensions" no-legend>
<AppSection ref="extensions" :label="$t('extensions')" no-legend>
<div class="flex flex-col">
<label>{{ $t("extensions") }}</label>
<div class="row-wrapper">
<SmartToggle :on="EXTENSIONS_ENABLED" @change="toggleSetting('EXTENSIONS_ENABLED')">
<SmartToggle
:on="EXTENSIONS_ENABLED"
@change="toggleSetting('EXTENSIONS_ENABLED')"
>
{{ $t("extensions_use_toggle") }}
</SmartToggle>
</div>
<p v-if="extensionVersion != null" class="info">
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{ extensionVersion.minor }}
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{
extensionVersion.minor
}}
</p>
<p v-else class="info">
{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}
@@ -102,12 +113,15 @@
</div>
</AppSection>
<AppSection :label="$t('proxy')" ref="proxy" no-legend>
<AppSection ref="proxy" :label="$t('proxy')" no-legend>
<div class="flex flex-col">
<label>{{ $t("proxy") }}</label>
<div class="row-wrapper">
<span>
<SmartToggle :on="PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
<SmartToggle
:on="PROXY_ENABLED"
@change="toggleSetting('PROXY_ENABLED')"
>
{{ $t("proxy") }}
{{ PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
</SmartToggle>
@@ -117,21 +131,25 @@
target="_blank"
rel="noopener"
>
<button class="icon" v-tooltip="$t('wiki')">
<button v-tooltip="$t('wiki')" class="icon">
<i class="material-icons">help_outline</i>
</button>
</a>
</div>
<div class="row-wrapper">
<label for="url">{{ $t("url") }}</label>
<button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
<button
v-tooltip.bottom="$t('reset_default')"
class="icon"
@click="resetProxy"
>
<i class="material-icons">clear_all</i>
</button>
</div>
<input
id="url"
type="url"
v-model="PROXY_URL"
type="url"
:disabled="!PROXY_ENABLED"
:placeholder="$t('url')"
/>
@@ -166,7 +184,7 @@
-->
</AppSection>
<AppSection :label="$t('experiments')" ref="experiments" no-legend>
<AppSection ref="experiments" :label="$t('experiments')" no-legend>
<div class="flex flex-col">
<label>{{ $t("experiments") }}</label>
<p class="info">
@@ -193,8 +211,9 @@
</template>
<script lang="ts">
import { fb } from "~/helpers/fb"
import Vue from "vue"
import { hasExtensionInstalled } from "../helpers/strategies/ExtensionStrategy"
import { fb } from "~/helpers/fb"
import {
getSettingSubject,
applySetting,
@@ -204,8 +223,6 @@ import {
import type { KeysMatching } from "~/types/ts-utils"
import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
import Vue from "vue"
type SettingsType = typeof defaultSettings
export default Vue.extend({
@@ -239,7 +256,9 @@ export default Vue.extend({
EXTENSIONS_ENABLED: getSettingSubject("EXTENSIONS_ENABLED"),
EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject("EXPERIMENTAL_URL_BAR_ENABLED"),
EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject(
"EXPERIMENTAL_URL_BAR_ENABLED"
),
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
@@ -249,6 +268,19 @@ export default Vue.extend({
currentUser: currentUserInfo$,
}
},
head() {
return {
title: `Settings • Hoppscotch`,
}
},
computed: {
proxySettings(): { url: string; key: string } {
return {
url: this.PROXY_URL,
key: this.PROXY_KEY,
}
},
},
watch: {
proxySettings: {
deep: true,
@@ -271,7 +303,10 @@ export default Vue.extend({
}
toggleSetting(key)
},
toggleSettings<K extends KeysMatching<SettingsType, boolean>>(name: K, value: SettingsType[K]) {
toggleSettings<K extends KeysMatching<SettingsType, boolean>>(
name: K,
value: SettingsType[K]
) {
this.applySetting(name, value)
if (name === "syncCollections" && value) {
@@ -293,7 +328,10 @@ export default Vue.extend({
this.$toast.info(this.$t("cleared"), {
icon: "clear_all",
})
setTimeout(() => (target.innerHTML = '<i class="material-icons">clear_all</i>'), 1000)
setTimeout(
() => (target.innerHTML = '<i class="material-icons">clear_all</i>'),
1000
)
},
syncCollections(): void {
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
@@ -304,29 +342,20 @@ export default Vue.extend({
)
if (this.$store.state.postwoman.collectionsGraphql)
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
},
syncEnvironments(): void {
if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments)))
fb.writeEnvironments(
JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
)
}
},
},
computed: {
proxySettings(): { url: string; key: string } {
return {
url: this.PROXY_URL,
key: this.PROXY_KEY,
}
},
},
head() {
return {
title: `Settings • Hoppscotch`,
}
},
})
</script>

View File

@@ -1,6 +1,6 @@
import RegexWorker from "~/assets/js/regex.worker"
export default (context, inject) => {
export default (_, inject) => {
inject("worker", {
createRejexWorker() {
return new RegexWorker()

View File

@@ -11,7 +11,9 @@ export default {
setCollapsedSection({ theme }, value) {
theme.collapsedSections.includes(value)
? (theme.collapsedSections = theme.collapsedSections.filter((section) => section !== value))
? (theme.collapsedSections = theme.collapsedSections.filter(
(section) => section !== value
))
: theme.collapsedSections.push(value)
},
@@ -20,7 +22,7 @@ export default {
},
setActiveGQLHeader({ gql }, { index, value }) {
if (!gql.headers[index].hasOwnProperty("active")) {
if (!Object.prototype.hasOwnProperty.call(gql.headers[index], "active")) {
Vue.set(gql.headers[index], "active", value)
} else {
gql.headers[index].active = value
@@ -56,7 +58,9 @@ export default {
},
setActiveHeader({ request }, { index, value }) {
if (!request.headers[index].hasOwnProperty("active")) {
if (
!Object.prototype.hasOwnProperty.call(request.headers[index], "active")
) {
Vue.set(request.headers[index], "active", value)
} else {
request.headers[index].active = value
@@ -84,7 +88,9 @@ export default {
},
setActiveParams({ request }, { index, value }) {
if (!request.params[index].hasOwnProperty("active")) {
if (
!Object.prototype.hasOwnProperty.call(request.params[index], "active")
) {
Vue.set(request.params[index], "active", value)
} else {
request.params[index].active = value
@@ -124,7 +130,9 @@ export default {
},
setActiveBodyParams({ request }, { index, value }) {
if (!request.bodyParams[index].hasOwnProperty("active")) {
if (
!Object.prototype.hasOwnProperty.call(request.bodyParams[index], "active")
) {
Vue.set(request.bodyParams[index], "active", value)
} else {
request.bodyParams[index].active = value