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

refactor: lint

Browse Source
This commit is contained in:
liyasthomas
2021-05-19 10:24:57 +05:30
parent 40ddfa8def
commit 44df9b3be8
20 changed files with 1080 additions and 690 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
components/collections/SaveRequest.vue
View File

@@ -12,15 +12,20 @@
</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"
/>
<label for="selectLabel">Select location</label>
<!-- <input readonly :value="path" /> -->
<Collections
:picked="picked"
:save-request="true"
@select="onSelect"
@update-collection="collectionsType.type = $event"
@update-coll-type="onUpdateCollType"
:picked="picked"
:saveRequest="true"
/>
</div>
<div slot="footer">
@@ -42,12 +47,12 @@
<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,
editingRequest: Object,
editingRequest: { type: Object, default: () => {} },
},
data() {
return {
@@ -71,20 +76,6 @@ export default {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
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.collections
@@ -107,7 +98,8 @@ export default {
return []
}
const userSelectedAnyFolder = folderName !== undefined && folderName !== ""
const userSelectedAnyFolder =
folderName !== undefined && folderName !== ""
if (userSelectedAnyFolder) {
const collection = collections[collectionIndex]
@@ -125,6 +117,20 @@ 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: {
onUpdateCollType(newCollType) {
this.collectionsType = newCollType
@@ -188,14 +194,14 @@ export default {
this.syncCollections()
} else if (this.picked.pickedType === "teams-request") {
team_utils.overwriteRequestTeams(
teamUtils.overwriteRequestTeams(
this.$apollo,
JSON.stringify(requestUpdated),
requestUpdated.name,
this.picked.requestID
)
} else if (this.picked.pickedType === "teams-folder") {
team_utils.saveRequestAsTeams(
teamUtils.saveRequestAsTeams(
this.$apollo,
JSON.stringify(requestUpdated),
requestUpdated.name,
@@ -203,7 +209,7 @@ export default {
this.picked.folderID
)
} else if (this.picked.pickedType === "teams-collection") {
team_utils.saveRequestAsTeams(
teamUtils.saveRequestAsTeams(
this.$apollo,
JSON.stringify(requestUpdated),
requestUpdated.name,

71
components/collections/graphql/index.vue
View File

@@ -1,15 +1,23 @@
<template>
<AppSection class="yellow" :label="$t('collections')" ref="collections" no-legend>
<AppSection
ref="collections"
class="yellow"
:label="$t('collections')"
no-legend
>
<div class="show-on-large-screen">
<input
v-model="filterText"
aria-label="Search"
type="search"
:placeholder="$t('search')"
v-model="filterText"
class="rounded-t-lg"
/>
</div>
<CollectionsGraphqlAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
<CollectionsGraphqlAdd
:show="showModalAdd"
@hide-modal="displayModalAdd(false)"
/>
<CollectionsGraphqlEdit
:show="showModalEdit"
:editing-collection="editingCollection"
@@ -53,17 +61,21 @@
</button>
</div>
<p v-if="collections.length === 0" class="info">
<i class="material-icons">help_outline</i> {{ $t("create_new_collection") }}
<i class="material-icons">help_outline</i>
{{ $t("create_new_collection") }}
</p>
<div class="virtual-list">
<ul class="flex-col">
<li v-for="(collection, index) in filteredCollections" :key="collection.name">
<li
v-for="(collection, index) in filteredCollections"
:key="collection.name"
>
<CollectionsGraphqlCollection
:name="collection.name"
:collection-index="index"
:collection="collection"
:doc="doc"
:isFiltered="filterText.length > 0"
:is-filtered="filterText.length > 0"
@edit-collection="editCollection(collection, index)"
@add-folder="addFolder($event)"
@edit-folder="editFolder($event)"
@@ -74,17 +86,13 @@
</ul>
</div>
<p v-if="filterText && filteredCollections.length === 0" class="info">
<i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{ filterText }}"
<i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
filterText
}}"
</p>
</AppSection>
</template>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
</style>
<script>
import { fb } from "~/helpers/fb"
@@ -128,15 +136,16 @@ export default {
const filterText = this.filterText.toLowerCase()
const filteredCollections = []
for (let collection of collections) {
for (const collection of collections) {
const filteredRequests = []
const filteredFolders = []
for (let request of collection.requests) {
if (request.name.toLowerCase().includes(filterText)) filteredRequests.push(request)
for (const request of collection.requests) {
if (request.name.toLowerCase().includes(filterText))
filteredRequests.push(request)
}
for (let folder of collection.folders) {
for (const folder of collection.folders) {
const filteredFolderRequests = []
for (let request of folder.requests) {
for (const request of folder.requests) {
if (request.name.toLowerCase().includes(filterText))
filteredFolderRequests.push(request)
}
@@ -158,7 +167,7 @@ export default {
return filteredCollections
},
},
async mounted() {
mounted() {
this._keyListener = function (e) {
if (e.key === "Escape") {
e.preventDefault()
@@ -173,6 +182,9 @@ export default {
}
document.addEventListener("keydown", this._keyListener.bind(this))
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
methods: {
displayModalAdd(shouldDisplay) {
this.showModalAdd = shouldDisplay
@@ -232,7 +244,13 @@ export default {
this.syncCollections()
},
editRequest(payload) {
const { collectionIndex, folderIndex, folderName, request, requestIndex } = payload
const {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
} = payload
this.$data.editingCollectionIndex = collectionIndex
this.$data.editingFolderIndex = folderIndex
this.$data.editingFolderName = folderName
@@ -253,15 +271,20 @@ 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"
)
}
}
},
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
}
</script>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
</style>

202
components/collections/index.vue
View File

@@ -1,17 +1,17 @@
<template>
<AppSection :label="$t('collections')" ref="collections" no-legend>
<AppSection ref="collections" :label="$t('collections')" no-legend>
<div class="show-on-large-screen">
<input
v-if="!saveRequest"
v-model="filterText"
aria-label="Search"
type="search"
:placeholder="$t('search')"
v-if="!saveRequest"
v-model="filterText"
class="rounded-t-lg"
/>
</div>
<CollectionsChooseType
:collectionsType="collectionsType"
:collections-type="collectionsType"
:show="showTeamCollections"
:doc="doc"
@update-collection-type="updateCollectionType"
@@ -48,7 +48,7 @@
/>
<CollectionsImportExport
:show="showModalImportExport"
:collectionsType="collectionsType"
:collections-type="collectionsType"
@hide-modal="displayModalImportExport(false)"
@update-team-collections="updateTeamCollections"
/>
@@ -61,22 +61,27 @@
!saveRequest
"
class="icon"
@click="displayModalAdd(true)"
disabled
@click="displayModalAdd(true)"
>
<i class="material-icons">add</i>
<div v-tooltip.left="$t('disable_new_collection')">
<span>{{ $t("new") }}</span>
</div>
</button>
<button v-else-if="!saveRequest" class="icon" @click="displayModalAdd(true)">
<button
v-else-if="!saveRequest"
class="icon"
@click="displayModalAdd(true)"
>
<i class="material-icons">add</i>
<span>{{ $t("new") }}</span>
</button>
<button
v-if="!saveRequest"
:disabled="
collectionsType.type == 'team-collections' && collectionsType.selectedTeam == undefined
collectionsType.type == 'team-collections' &&
collectionsType.selectedTeam == undefined
"
class="icon"
@click="displayModalImportExport(true)"
@@ -85,11 +90,15 @@
</button>
</div>
<p v-if="collections.length === 0" class="info">
<i class="material-icons">help_outline</i> {{ $t("create_new_collection") }}
<i class="material-icons">help_outline</i>
{{ $t("create_new_collection") }}
</p>
<div class="virtual-list">
<ul class="flex-col">
<li v-for="(collection, index) in filteredCollections" :key="collection.name">
<li
v-for="(collection, index) in filteredCollections"
:key="collection.name"
>
<component
:is="
collectionsType.type == 'my-collections'
@@ -100,10 +109,10 @@
:collection-index="index"
:collection="collection"
:doc="doc"
:isFiltered="filterText.length > 0"
:is-filtered="filterText.length > 0"
:selected="selected.some((coll) => coll == collection)"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:save-request="saveRequest"
:collections-type="collectionsType"
:picked="picked"
@edit-collection="editCollection(collection, index)"
@add-folder="addFolder($event)"
@@ -112,25 +121,6 @@
@update-team-collections="updateTeamCollections"
@select-collection="$emit('use-collection', collection)"
@unselect-collection="$emit('remove-collection', collection)"
@select-folder="
$emit('select-folder', {
folderName:
(collectionsType.type == 'my-collections' ? collection.name : collection.title) +
'/' +
$event.name,
collectionIndex: collectionsType.type == 'my-collections' ? index : $event.id,
reqIdx: $event.reqIdx,
collectionsType: collectionsType,
folderId: $event.id,
})
if (collectionsType.type == 'my-collections') {
if ($event.folderPath) {
picked = $event.folderPath
} else picked = index
} else {
picked = $event.id
}
"
@select="$emit('select', $event)"
@expand-collection="expandCollection"
@remove-collection="removeCollection"
@@ -140,31 +130,27 @@
</ul>
</div>
<p v-if="filterText && filteredCollections.length === 0" class="info">
<i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{ filterText }}"
<i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
filterText
}}"
</p>
</AppSection>
</template>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
</style>
<script>
import gql from "graphql-tag"
import cloneDeep from "lodash/cloneDeep"
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import gql from "graphql-tag"
import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
import * as team_utils from "~/helpers/teams/utils"
import cloneDeep from "lodash/cloneDeep"
import * as teamUtils from "~/helpers/teams/utils"
export default {
props: {
doc: Boolean,
selected: { type: Array, default: () => [] },
saveRequest: Boolean,
picked: Object,
picked: { type: Object, default: () => {} },
},
data() {
return {
@@ -196,20 +182,12 @@ export default {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
watch: {
"collectionsType.type": function emitstuff() {
this.$emit("update-collection", this.$data.collectionsType.type)
},
"collectionsType.selectedTeam": function (value) {
if (value?.id) this.teamCollectionAdapter.changeTeamID(value.id)
},
},
computed: {
showTeamCollections() {
if (fb.currentUser == null) {
this.collectionsType.type = "my-collections"
return false
}
return fb.currentUser !== null
return true
},
collections() {
return fb.currentUser !== null
@@ -218,9 +196,11 @@ export default {
},
filteredCollections() {
let collections = null
if (this.collectionsType.type == "my-collections") {
if (this.collectionsType.type === "my-collections") {
collections =
fb.currentUser !== null ? fb.currentCollections : this.$store.state.postwoman.collections
fb.currentUser !== null
? fb.currentCollections
: this.$store.state.postwoman.collections
} else {
collections = this.teamCollectionsNew
}
@@ -229,24 +209,25 @@ export default {
return collections
}
if (this.collectionsType.type == "team-collections") {
if (this.collectionsType.type === "team-collections") {
return []
}
const filterText = this.filterText.toLowerCase()
const filteredCollections = []
for (let collection of collections) {
for (const collection of collections) {
const filteredRequests = []
const filteredFolders = []
for (let request of collection.requests) {
if (request.name.toLowerCase().includes(filterText)) filteredRequests.push(request)
for (const request of collection.requests) {
if (request.name.toLowerCase().includes(filterText))
filteredRequests.push(request)
}
for (let folder of this.collectionsType.type === "team-collections"
for (const folder of this.collectionsType.type === "team-collections"
? collection.children
: collection.folders) {
const filteredFolderRequests = []
for (let request of folder.requests) {
for (const request of folder.requests) {
if (request.name.toLowerCase().includes(filterText))
filteredFolderRequests.push(request)
}
@@ -271,7 +252,15 @@ export default {
return filteredCollections
},
},
async mounted() {
watch: {
"collectionsType.type": function emitstuff() {
this.$emit("update-collection", this.$data.collectionsType.type)
},
"collectionsType.selectedTeam"(value) {
if (value?.id) this.teamCollectionAdapter.changeTeamID(value.id)
},
},
mounted() {
this._keyListener = function (e) {
if (e.key === "Escape") {
e.preventDefault()
@@ -290,6 +279,9 @@ export default {
this.teamCollectionsNew = cloneDeep(colls)
})
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
methods: {
updateTeamCollections() {
// TODO: Remove this at some point
@@ -319,8 +311,12 @@ export default {
this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER"
) {
team_utils
.createNewRootCollection(this.$apollo, name, this.collectionsType.selectedTeam.id)
teamUtils
.createNewRootCollection(
this.$apollo,
name,
this.collectionsType.selectedTeam.id
)
.then(() => {
this.$toast.success(this.$t("collection_added"), {
icon: "done",
@@ -356,7 +352,7 @@ export default {
this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER"
) {
team_utils
teamUtils
.renameCollection(this.$apollo, newName, this.editingCollection.id)
.then(() => {
// TODO: $t translations ?
@@ -375,20 +371,20 @@ export default {
},
// Intended to be called by CollectionEditFolder modal submit event
updateEditingFolder(name) {
if (this.collectionsType.type == "my-collections") {
if (this.collectionsType.type === "my-collections") {
this.$store.commit("postwoman/editFolder", {
collectionIndex: this.editingCollectionIndex,
folder: { ...this.editingFolder, name: name },
folder: { ...this.editingFolder, name },
folderIndex: this.editingFolderIndex,
folderName: this.editingFolder.name,
flag: "rest",
})
this.syncCollections()
} else if (
this.collectionsType.type == "team-collections" &&
this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER"
) {
team_utils
teamUtils
.renameCollection(this.$apollo, name, this.editingFolder.id)
.then(() => {
// Result
@@ -414,7 +410,7 @@ export default {
name: requestUpdateData.name || this.editingRequest.name,
}
if (this.collectionsType.type == "my-collections") {
if (this.collectionsType.type === "my-collections") {
this.$store.commit("postwoman/editRequest", {
requestCollectionIndex: this.editingCollectionIndex,
requestFolderName: this.editingFolderName,
@@ -428,9 +424,14 @@ export default {
this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER"
) {
let requestName = requestUpdateData.name || this.editingRequest.name
team_utils
.updateRequest(this.$apollo, requestUpdated, requestName, this.editingRequestIndex)
const requestName = requestUpdateData.name || this.editingRequest.name
teamUtils
.updateRequest(
this.$apollo,
requestUpdated,
requestName,
this.editingRequestIndex
)
.then(() => {
this.$toast.success("Request Renamed", {
icon: "done",
@@ -489,12 +490,18 @@ export default {
})
this.syncCollections()
} else if (this.collectionsType.type === "team-collections") {
if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
this.$apollo
.mutate({
mutation: gql`
mutation CreateChildCollection($childTitle: String!, $collectionID: String!) {
createChildCollection(childTitle: $childTitle, collectionID: $collectionID) {
mutation CreateChildCollection(
$childTitle: String!
$collectionID: String!
) {
createChildCollection(
childTitle: $childTitle
collectionID: $collectionID
) {
id
}
}
@@ -540,7 +547,13 @@ export default {
this.syncCollections()
},
editRequest(payload) {
const { collectionIndex, folderIndex, folderName, request, requestIndex } = payload
const {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
} = payload
this.$data.editingCollectionIndex = collectionIndex
this.$data.editingFolderIndex = folderIndex
this.$data.editingFolderName = folderName
@@ -570,17 +583,17 @@ export default {
this.teamCollectionAdapter.expandCollection(collectionID)
},
removeCollection({ collectionsType, collectionIndex, collectionID }) {
if (collectionsType.type == "my-collections") {
if (collectionsType.type === "my-collections") {
this.$store.commit("postwoman/removeCollection", {
collectionIndex: collectionIndex,
collectionIndex,
flag: "rest",
})
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
this.syncCollections()
} else if (collectionsType.type == "team-collections") {
if (collectionsType.selectedTeam.myRole != "VIEWER") {
} else if (collectionsType.type === "team-collections") {
if (collectionsType.selectedTeam.myRole !== "VIEWER") {
this.$apollo
.mutate({
// Query
@@ -591,10 +604,10 @@ export default {
`,
// Parameters
variables: {
collectionID: collectionID,
collectionID,
},
})
.then((data) => {
.then(() => {
// Result
this.$toast.success(this.$t("deleted"), {
icon: "delete",
@@ -611,21 +624,21 @@ export default {
}
},
removeRequest({ collectionIndex, folderName, requestIndex }) {
if (this.collectionsType.type == "my-collections") {
if (this.collectionsType.type === "my-collections") {
this.$store.commit("postwoman/removeRequest", {
collectionIndex: collectionIndex,
folderName: folderName,
requestIndex: requestIndex,
collectionIndex,
folderName,
requestIndex,
flag: "rest",
})
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
this.syncCollections()
} else if (this.collectionsType.type == "team-collections") {
team_utils
} else if (this.collectionsType.type === "team-collections") {
teamUtils
.deleteRequest(this.$apollo, requestIndex)
.then((data) => {
.then(() => {
// Result
this.$toast.success(this.$t("deleted"), {
icon: "delete",
@@ -641,8 +654,11 @@ export default {
}
},
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
}
</script>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
</style>

71
components/collections/my/Collection.vue
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,10 +13,16 @@
@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 v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder</i>
<span>{{ collection.name }}</span>
@@ -21,43 +30,56 @@
<div>
<button
v-if="doc && !selected"
v-tooltip.left="$t('import')"
class="icon"
@click="$emit('select-collection')"
v-tooltip.left="$t('import')"
>
<i class="material-icons">check_box_outline_blank</i>
</button>
<button
v-if="doc && selected"
v-tooltip.left="$t('delete')"
class="icon"
@click="$emit('unselect-collection')"
v-tooltip.left="$t('delete')"
>
<i class="material-icons">check_box</i>
</button>
<v-popover v-if="!saveRequest">
<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>
@@ -79,9 +101,9 @@
:folder-path="`${collectionIndex}/${index}`"
:collection-index="collectionIndex"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:isFiltered="isFiltered"
:save-request="saveRequest"
:collections-type="collectionsType"
:is-filtered="isFiltered"
:picked="picked"
@add-folder="$emit('add-folder', $event)"
@edit-folder="$emit('edit-folder', $event)"
@@ -105,8 +127,8 @@
:folder-path="collectionIndex.toString()"
:request-index="index"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:save-request="saveRequest"
:collections-type="collectionsType"
:picked="picked"
@edit-request="editRequest($event)"
@select="$emit('select', $event)"
@@ -117,13 +139,16 @@
<ul>
<li
v-if="
(collection.folders == undefined || collection.folders.length === 0) &&
(collection.requests == undefined || collection.requests.length === 0)
(collection.folders == undefined ||
collection.folders.length === 0) &&
(collection.requests == undefined ||
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>
@@ -143,14 +168,14 @@ import { getSettingSubject } from "~/newstore/settings"
export default {
props: {
collectionIndex: Number,
collection: Object,
collectionIndex: { type: Number, default: null },
collection: { type: Object, default: () => {} },
doc: Boolean,
isFiltered: Boolean,
selected: Boolean,
saveRequest: Boolean,
collectionsType: Object,
picked: Object,
collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} },
},
data() {
return {

56
components/collections/my/Folder.vue
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,23 +14,29 @@
>
<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-if="isSelected" class="text-green-400 material-icons">check_circle</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 v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name ? folder.name : folder.title }}</span>
</button>
</div>
<v-popover v-if="!saveRequest">
<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>
@@ -35,16 +44,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>
@@ -64,8 +75,8 @@
:folder-index="subFolderIndex"
:collection-index="collectionIndex"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:save-request="saveRequest"
:collections-type="collectionsType"
:folder-path="`${folderPath}/${subFolderIndex}`"
:picked="picked"
@add-folder="$emit('add-folder', $event)"
@@ -92,8 +103,8 @@
:folder-path="folderPath"
:doc="doc"
:picked="picked"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:save-request="saveRequest"
:collections-type="collectionsType"
@edit-request="$emit('edit-request', $event)"
@select="$emit('select', $event)"
@remove-request="removeRequest"
@@ -109,7 +120,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>
@@ -127,17 +141,17 @@ import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
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,
saveRequest: Boolean,
isFiltered: Boolean,
collectionsType: Object,
picked: Object,
collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} },
},
data() {
return {

64
components/collections/my/Request.vue
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,23 +13,28 @@
>
<div>
<button
v-tooltip="!doc ? $t('use_request') : ''"
class="icon"
@click="!doc ? selectRequest() : {}"
v-tooltip="!doc ? $t('use_request') : ''"
>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons">check_circle</i>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<span v-else :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
<span v-else :class="getRequestLabelColor(request.method)">{{
request.method
}}</span>
<span>{{ request.name }}</span>
</button>
</div>
<v-popover v-if="!saveRequest">
<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', {
@@ -37,14 +45,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>
@@ -64,26 +71,17 @@
<script>
export default {
props: {
request: Object,
collectionIndex: Number,
folderIndex: Number,
folderName: String,
request: { type: Object, default: () => {} },
collectionIndex: { type: Number, default: null },
folderIndex: { type: Number, default: null },
folderName: { type: String, default: null },
// eslint-disable-next-line vue/require-default-prop
requestIndex: [Number, String],
doc: Boolean,
saveRequest: Boolean,
collectionsType: Object,
folderPath: String,
picked: Object,
},
computed: {
isSelected() {
return (
this.picked &&
this.picked.pickedType === "my-request" &&
this.picked.folderPath === this.folderPath &&
this.picked.requestIndex === this.requestIndex
)
},
collectionsType: { type: Object, default: () => {} },
folderPath: { type: String, default: null },
picked: { type: Object, default: () => {} },
},
data() {
return {
@@ -98,6 +96,16 @@ export default {
confirmRemove: false,
}
},
computed: {
isSelected() {
return (
this.picked &&
this.picked.pickedType === "my-request" &&
this.picked.folderPath === this.folderPath &&
this.picked.requestIndex === this.requestIndex
)
},
},
methods: {
selectRequest() {
if (this.$props.saveRequest)
@@ -110,7 +118,8 @@ export default {
requestIndex: this.requestIndex,
},
})
else this.$store.commit("postwoman/selectRequest", { request: this.request })
else
this.$store.commit("postwoman/selectRequest", { request: this.request })
},
dragStart({ dataTransfer }) {
this.dragging = !this.dragging
@@ -127,7 +136,10 @@ export default {
})
},
getRequestLabelColor(method) {
return this.requestMethodLabels[method.toLowerCase()] || this.requestMethodLabels.default
return (
this.requestMethodLabels[method.toLowerCase()] ||
this.requestMethodLabels.default
)
},
},
}

58
components/collections/teams/Collection.vue
View File

@@ -2,10 +2,16 @@
<div>
<div class="transition duration-150 ease-in-out row-wrapper">
<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 v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder</i>
<span>{{ collection.title }}</span>
@@ -13,25 +19,25 @@
<div>
<button
v-if="doc && !selected"
v-tooltip.left="$t('import')"
class="icon"
@click="$emit('select-collection')"
v-tooltip.left="$t('import')"
>
<i class="material-icons">check_box_outline_blank</i>
</button>
<button
v-if="doc && selected"
v-tooltip.left="$t('delete')"
class="icon"
@click="$emit('unselect-collection')"
v-tooltip.left="$t('delete')"
>
<i class="material-icons">check_box</i>
</button>
<v-popover v-if="!saveRequest">
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="tooltip-target icon"
v-tooltip.left="$t('more')"
class="tooltip-target icon"
>
<i class="material-icons">more_vert</i>
</button>
@@ -39,9 +45,14 @@
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
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>
@@ -50,9 +61,9 @@
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-close-popover
class="icon"
@click="$emit('edit-collection')"
v-close-popover
>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
@@ -61,9 +72,9 @@
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-close-popover
class="icon"
@click="confirmRemove = true"
v-close-popover
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
@@ -86,9 +97,9 @@
:folder-path="`${collectionIndex}/${index}`"
:collection-index="collectionIndex"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:isFiltered="isFiltered"
:save-request="saveRequest"
:collections-type="collectionsType"
:is-filtered="isFiltered"
:picked="picked"
@add-folder="$emit('add-folder', $event)"
@edit-folder="$emit('edit-folder', $event)"
@@ -112,8 +123,8 @@
:folder-name="collection.name"
:request-index="request.id"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:save-request="saveRequest"
:collections-type="collectionsType"
:picked="picked"
@edit-request="editRequest($event)"
@select="$emit('select', $event)"
@@ -124,13 +135,16 @@
<ul>
<li
v-if="
(collection.children == undefined || collection.children.length === 0) &&
(collection.requests == undefined || collection.requests.length === 0)
(collection.children == undefined ||
collection.children.length === 0) &&
(collection.requests == undefined ||
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>
@@ -147,14 +161,14 @@
<script>
export default {
props: {
collectionIndex: Number,
collection: Object,
collectionIndex: { type: Number, default: null },
collection: { type: Object, default: () => {} },
doc: Boolean,
isFiltered: Boolean,
selected: Boolean,
saveRequest: Boolean,
collectionsType: Object,
picked: Object,
collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} },
},
data() {
return {

59
components/collections/teams/Folder.vue
View File

@@ -3,10 +3,16 @@
<div class="transition duration-150 ease-in-out row-wrapper">
<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 v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name ? folder.name : folder.title }}</span>
@@ -15,8 +21,8 @@
<v-popover v-if="!saveRequest">
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="tooltip-target icon"
v-tooltip.left="$t('more')"
class="tooltip-target icon"
>
<i class="material-icons">more_vert</i>
</button>
@@ -24,9 +30,9 @@
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
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>
@@ -35,9 +41,11 @@
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
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>
@@ -46,9 +54,9 @@
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-close-popover
class="icon"
@click="confirmRemove = true"
v-close-popover
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
@@ -69,8 +77,8 @@
:folder-index="subFolderIndex"
:collection-index="collectionIndex"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:save-request="saveRequest"
:collections-type="collectionsType"
:folder-path="`${folderPath}/${subFolderIndex}`"
:picked="picked"
@add-folder="$emit('add-folder', $event)"
@@ -96,8 +104,8 @@
:folder-name="folder.name"
:request-index="request.id"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:save-request="saveRequest"
:collections-type="collectionsType"
:picked="picked"
@edit-request="$emit('edit-request', $event)"
@select="$emit('select', $event)"
@@ -112,7 +120,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>
@@ -126,20 +137,20 @@
</template>
<script>
import * as team_utils from "~/helpers/teams/utils"
import * as teamUtils from "~/helpers/teams/utils"
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,
saveRequest: Boolean,
isFiltered: Boolean,
collectionsType: Object,
picked: Object,
collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} },
},
data() {
return {
@@ -172,10 +183,10 @@ export default {
this.showChildren = !this.showChildren
},
removeFolder() {
if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
team_utils
if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
teamUtils
.deleteCollection(this.$apollo, this.folder.id)
.then((data) => {
.then(() => {
// Result
this.$toast.success(this.$t("deleted"), {
icon: "delete",

37
components/collections/teams/Request.vue
View File

@@ -3,27 +3,32 @@
<div class="transition duration-150 ease-in-out row-wrapper">
<div>
<button
v-tooltip="!doc ? $t('use_request') : ''"
class="icon"
@click="!doc ? selectRequest() : {}"
v-tooltip="!doc ? $t('use_request') : ''"
>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons">check_circle</i>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<span v-else :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
<span v-else :class="getRequestLabelColor(request.method)">{{
request.method
}}</span>
<span>{{ request.name }}</span>
</button>
</div>
<v-popover v-if="!saveRequest">
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="tooltip-target icon"
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>
@@ -61,15 +65,16 @@
<script>
export default {
props: {
request: Object,
collectionIndex: Number,
folderIndex: Number,
folderName: String,
request: { type: Object, default: () => {} },
collectionIndex: { type: Number, default: null },
folderIndex: { type: Number, default: null },
folderName: { type: String, default: null },
// eslint-disable-next-line vue/require-default-prop
requestIndex: [Number, String],
doc: Boolean,
saveRequest: Boolean,
collectionsType: Object,
picked: Object,
collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} },
},
data() {
return {
@@ -102,7 +107,8 @@ export default {
requestID: this.requestIndex,
},
})
else this.$store.commit("postwoman/selectRequest", { request: this.request })
else
this.$store.commit("postwoman/selectRequest", { request: this.request })
},
removeRequest() {
this.$emit("remove-request", {
@@ -112,7 +118,10 @@ export default {
})
},
getRequestLabelColor(method) {
return this.requestMethodLabels[method.toLowerCase()] || this.requestMethodLabels.default
return (
this.requestMethodLabels[method.toLowerCase()] ||
this.requestMethodLabels.default
)
},
},
}

42
components/graphql/Field.vue
View File

@@ -6,17 +6,24 @@
(
<span v-for="(field, index) in fieldArgs" :key="index">
{{ field.name }}:
<GraphqlTypeLink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
<GraphqlTypeLink
:gql-type="field.type"
:jump-type-callback="jumpTypeCallback"
/>
<span v-if="index !== fieldArgs.length - 1"> , </span>
</span>
) </span
>:
<GraphqlTypeLink :gqlType="gqlField.type" :jumpTypeCallback="jumpTypeCallback" />
<GraphqlTypeLink
:gql-type="gqlField.type"
:jump-type-callback="jumpTypeCallback"
/>
</div>
<div class="mt-2 text-fgLightColor field-desc" v-if="gqlField.description">
<div v-if="gqlField.description" class="mt-2 text-fgLightColor field-desc">
{{ gqlField.description }}
</div>
<div
v-if="gqlField.isDeprecated"
class="
inline-block
px-4
@@ -29,7 +36,6 @@
rounded-lg
field-deprecated
"
v-if="gqlField.isDeprecated"
>
{{ $t("deprecated") }}
</div>
@@ -38,8 +44,14 @@
<div class="px-4 border-l-2 border-acColor">
<div v-for="(field, index) in fieldArgs" :key="index">
{{ field.name }}:
<GraphqlTypeLink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
<div class="mt-2 text-fgLightColor field-desc" v-if="field.description">
<GraphqlTypeLink
:gql-type="field.type"
:jump-type-callback="jumpTypeCallback"
/>
<div
v-if="field.description"
class="mt-2 text-fgLightColor field-desc"
>
{{ field.description }}
</div>
</div>
@@ -48,18 +60,11 @@
</div>
</template>
<style scoped lang="scss">
.field-highlighted {
@apply border-b-2;
@apply border-acColor;
}
</style>
<script>
export default {
props: {
gqlField: Object,
jumpTypeCallback: Function,
gqlField: { type: Object, default: () => {} },
jumpTypeCallback: { type: Function, default: () => {} },
isHighlighted: { type: Boolean, default: false },
},
computed: {
@@ -73,3 +78,10 @@ export default {
},
}
</script>
<style scoped lang="scss">
.field-highlighted {
@apply border-b-2;
@apply border-acColor;
}
</style>

81
components/graphql/QueryEditor.vue
View File

@@ -4,27 +4,15 @@
</div>
</template>
<style scoped lang="scss">
.show-if-initialized {
&.initialized {
@apply opacity-100;
}
& > * {
@apply transition-none;
}
}
</style>
<script>
import ace from "ace-builds"
import "ace-builds/webpack-resolver"
import "ace-builds/src-noconflict/ext-language_tools"
import "ace-builds/src-noconflict/mode-graphqlschema"
import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode"
import * as gql from "graphql"
import { getAutocompleteSuggestions } from "graphql-language-service-interface"
import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode"
import debounce from "~/helpers/utils/debounce"
export default {
@@ -44,7 +32,7 @@ export default {
},
options: {
type: Object,
default: {},
default: () => {},
},
styles: {
type: String,
@@ -84,7 +72,7 @@ export default {
mounted() {
defineGQLLanguageMode(ace)
let langTools = ace.require("ace/ext/language_tools")
const langTools = ace.require("ace/ext/language_tools")
const editor = ace.edit(this.$refs.editor, {
mode: `ace/mode/gql-query`,
@@ -108,12 +96,22 @@ export default {
})
const completer = {
getCompletions: (editor, _session, { row, column }, _prefix, callback) => {
getCompletions: (
editor,
_session,
{ row, column },
_prefix,
callback
) => {
if (this.validationSchema) {
const completions = getAutocompleteSuggestions(this.validationSchema, editor.getValue(), {
line: row,
character: column,
})
const completions = getAutocompleteSuggestions(
this.validationSchema,
editor.getValue(),
{
line: row,
character: column,
}
)
callback(
null,
@@ -165,10 +163,14 @@ export default {
this.parseContents(this.value)
},
beforeDestroy() {
this.editor.destroy()
},
methods: {
prettifyQuery() {
try {
this.value = gql.print(gql.parse(this.editor.getValue()))
this.$emit("update-query", gql.print(gql.parse(this.editor.getValue())))
} catch (e) {
this.$toast.error(`${this.$t("gql_prettify_invalid_query")}`, {
icon: "error",
@@ -180,9 +182,12 @@ export default {
if (this.theme) {
return this.theme
}
const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
const strip = (str) =>
str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
return strip(
window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
window
.getComputedStyle(document.documentElement)
.getPropertyValue("--editor-theme")
)
},
@@ -198,12 +203,14 @@ export default {
if (this.validationSchema) {
this.editor.session.setAnnotations(
gql.validate(this.validationSchema, doc).map(({ locations, message }) => ({
row: locations[0].line - 1,
column: locations[0].column - 1,
text: message,
type: "error",
}))
gql
.validate(this.validationSchema, doc)
.map(({ locations, message }) => ({
row: locations[0].line - 1,
column: locations[0].column - 1,
text: message,
type: "error",
}))
)
}
} catch (e) {
@@ -221,9 +228,17 @@ export default {
}
}, 2000),
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style scoped lang="scss">
.show-if-initialized {
&.initialized {
@apply opacity-100;
}
& > * {
@apply transition-none;
}
}
</style>

76
components/graphql/Type.vue
View File

@@ -1,65 +1,79 @@
<template>
<div :id="`type_${gqlType.name}`" class="p-2 m-2">
<div class="font-bold type-title" :class="{ 'type-highlighted': isHighlighted }">
<div
class="font-bold type-title"
:class="{ 'type-highlighted': isHighlighted }"
>
<span v-if="isInput" class="font-normal text-acColor">input </span>
<span v-else-if="isInterface" class="font-normal text-acColor">interface </span>
<span v-else-if="isInterface" class="font-normal text-acColor"
>interface
</span>
<span v-else-if="isEnum" class="font-normal text-acColor">enum </span>
{{ gqlType.name }}
</div>
<div class="mt-2 text-fgLightColor type-desc" v-if="gqlType.description">
<div v-if="gqlType.description" class="mt-2 text-fgLightColor type-desc">
{{ gqlType.description }}
</div>
<div v-if="interfaces.length > 0" class="mb-2">
<h5>{{ $t("interfaces") }}</h5>
<div v-for="gqlInterface in interfaces" :key="gqlInterface.name" class="m-2 ml-4">
<GraphqlTypeLink :gqlType="gqlInterface" :jumpTypeCallback="jumpTypeCallback" />
<div
v-for="gqlInterface in interfaces"
:key="gqlInterface.name"
class="m-2 ml-4"
>
<GraphqlTypeLink
:gql-type="gqlInterface"
:jump-type-callback="jumpTypeCallback"
/>
</div>
</div>
<div v-if="children.length > 0" class="mb-2">
<h5>{{ $t("children") }}</h5>
<div v-for="child in children" :key="child.name" class="m-2 ml-4">
<GraphqlTypeLink :gqlType="child" :jumpTypeCallback="jumpTypeCallback" />
<GraphqlTypeLink
:gql-type="child"
:jump-type-callback="jumpTypeCallback"
/>
</div>
</div>
<div v-if="gqlType.getFields">
<h5>{{ $t("fields") }}</h5>
<div v-for="field in gqlType.getFields()" :key="field.name">
<GraphqlField
:gqlField="field"
:isHighlighted="isFieldHighlighted({ field })"
:jumpTypeCallback="jumpTypeCallback"
:gql-field="field"
:is-highlighted="isFieldHighlighted({ field })"
:jump-type-callback="jumpTypeCallback"
/>
</div>
</div>
<div v-if="isEnum">
<h5>{{ $t("values") }}</h5>
<div :key="value.name" v-for="value in gqlType.getValues()" class="m-4" v-text="value.name" />
<div
v-for="value in gqlType.getValues()"
:key="value.name"
class="m-4"
v-text="value.name"
></div>
</div>
</div>
</template>
<style scoped lang="scss">
.type-highlighted {
@apply text-acColor;
}
</style>
<script>
import { GraphQLEnumType, GraphQLInputObjectType, GraphQLInterfaceType } from "graphql"
import {
GraphQLEnumType,
GraphQLInputObjectType,
GraphQLInterfaceType,
} from "graphql"
export default {
props: {
// eslint-disable-next-line vue/require-default-prop, vue/require-prop-types
gqlType: {},
gqlTypes: Array,
jumpTypeCallback: Function,
gqlTypes: { type: Array, default: () => [] },
jumpTypeCallback: { type: Function, default: () => {} },
isHighlighted: { type: Boolean, default: false },
highlightedFields: { type: Array, default: () => [] },
},
methods: {
isFieldHighlighted({ field }) {
return !!this.highlightedFields.find(({ name }) => name === field.name)
},
},
computed: {
isInput() {
return this.gqlType instanceof GraphQLInputObjectType
@@ -75,9 +89,21 @@ export default {
},
children() {
return this.gqlTypes.filter(
(type) => type.getInterfaces && type.getInterfaces().includes(this.gqlType)
(type) =>
type.getInterfaces && type.getInterfaces().includes(this.gqlType)
)
},
},
methods: {
isFieldHighlighted({ field }) {
return !!this.highlightedFields.find(({ name }) => name === field.name)
},
},
}
</script>
<style scoped lang="scss">
.type-highlighted {
@apply text-acColor;
}
</style>

258
components/history/index.vue
View File

@@ -1,11 +1,11 @@
<template>
<AppSection icon="history" :label="$t('history')" ref="history" no-legend>
<AppSection ref="history" icon="history" :label="$t('history')" no-legend>
<div class="show-on-large-screen">
<input
v-model="filterText"
aria-label="Search"
type="search"
:placeholder="$t('search')"
v-model="filterText"
class="rounded-t-lg"
/>
</div>
@@ -16,9 +16,9 @@
<ul v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
<HistoryRestCard
v-if="page == 'rest'"
:entry="entry"
:id="index"
:showMore="showMore"
:entry="entry"
:show-more="showMore"
@toggle-star="toggleStar(entry)"
@delete-entry="deleteHistory(entry)"
@use-entry="useHistory(entry)"
@@ -26,21 +26,24 @@
<HistoryGraphqlCard
v-if="page == 'graphql'"
:entry="entry"
:showMore="showMore"
:show-more="showMore"
@toggle-star="toggleStar(entry)"
@delete-entry="deleteHistory(entry)"
@use-entry="useHistory(entry)"
/>
</ul>
</div>
<p :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }" class="info">
<p
:class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
class="info"
>
{{ $t("nothing_found") }} "{{ filterText }}"
</p>
<p v-if="history.length === 0" class="info">
<i class="material-icons">schedule</i> {{ $t("history_empty") }}
</p>
<div v-if="history.length !== 0" class="rounded-b-lg bg-bgDarkColor">
<div class="row-wrapper" v-if="!isClearingHistory">
<div v-if="!isClearingHistory" class="row-wrapper">
<button
data-testid="clear_history"
class="icon"
@@ -60,22 +63,24 @@
</i>
</button>
</div>
<div class="row-wrapper" v-else>
<p class="info"><i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}</p>
<div v-else class="row-wrapper">
<p class="info">
<i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
</p>
<div>
<button
v-tooltip="$t('yes')"
data-testid="confirm_clear_history"
class="icon"
@click="clearHistory"
v-tooltip="$t('yes')"
>
<i class="material-icons">done</i>
</button>
<button
v-tooltip="$t('no')"
data-testid="reject_clear_history"
class="icon"
@click="disableHistoryClearing"
v-tooltip="$t('no')"
>
<i class="material-icons">close</i>
</button>
@@ -85,6 +90,134 @@
</AppSection>
</template>
<script>
import { fb } from "~/helpers/fb"
const updateOnLocalStorage = (propertyName, property) =>
window.localStorage.setItem(propertyName, JSON.stringify(property))
export default {
props: {
page: { type: String, default: null },
},
data() {
return {
history:
fb.currentUser !== null
? this.page === "rest"
? fb.currentHistory
: fb.currentGraphqlHistory
: JSON.parse(
window.localStorage.getItem(
this.page === "rest" ? "history" : "graphqlHistory"
)
) || [],
filterText: "",
showFilter: false,
isClearingHistory: false,
showMore: false,
}
},
computed: {
filteredHistory() {
const filteringHistory =
fb.currentUser !== null
? this.page === "rest"
? fb.currentHistory
: fb.currentGraphqlHistory
: JSON.parse(
window.localStorage.getItem(
this.page === "rest" ? "history" : "graphqlHistory"
)
) || []
return filteringHistory.filter((entry) => {
const filterText = this.filterText.toLowerCase()
return Object.keys(entry).some((key) => {
let value = entry[key]
value = typeof value !== "string" ? value.toString() : value
return value.toLowerCase().includes(filterText)
})
})
},
},
methods: {
async clearHistory() {
if (fb.currentUser !== null) {
this.page === "rest"
? await fb.clearHistory()
: await fb.clearGraphqlHistory()
}
this.history = []
this.filterText = ""
this.disableHistoryClearing()
updateOnLocalStorage(
this.page === "rest" ? "history" : "graphqlHistory",
this.history
)
this.$toast.error(this.$t("history_deleted"), {
icon: "delete",
})
},
useHistory(entry) {
this.$emit("useHistory", entry)
},
async deleteHistory(entry) {
if (this.history.length === 0) {
this.filterText = ""
}
if (fb.currentUser !== null) {
await (this.page === "rest"
? fb.deleteHistory(entry)
: fb.deleteGraphqlHistory(entry))
this.history = fb.currentHistory
updateOnLocalStorage(
this.page === "rest" ? "history" : "graphqlHistory",
this.history
)
} else {
this.history.splice(this.history.indexOf(entry), 1)
updateOnLocalStorage(
this.page === "rest" ? "history" : "graphqlHistory",
this.history
)
}
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
},
addEntry(entry) {
this.history.push(entry)
updateOnLocalStorage(
this.page === "rest" ? "history" : "graphqlHistory",
this.history
)
},
enableHistoryClearing() {
if (!this.history || !this.history.length) return
this.isClearingHistory = true
},
disableHistoryClearing() {
this.isClearingHistory = false
},
toggleCollapse() {
this.showMore = !this.showMore
},
async toggleStar(entry) {
if (fb.currentUser !== null) {
this.page === "rest"
? await fb.toggleStar(entry, !entry.star)
: await fb.toggleGraphqlHistoryStar(entry, !entry.star)
}
entry.star = !entry.star
updateOnLocalStorage(
this.page === "rest" ? "history" : "graphqlHistory",
this.history
)
},
},
}
</script>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
@@ -105,106 +238,3 @@ ol {
}
}
</style>
<script>
import { fb } from "~/helpers/fb"
const updateOnLocalStorage = (propertyName, property) =>
window.localStorage.setItem(propertyName, JSON.stringify(property))
export default {
props: {
page: String,
},
data() {
return {
history:
fb.currentUser !== null
? fb.currentHistory
: JSON.parse(
window.localStorage.getItem(this.page == "rest" ? "history" : "graphqlHistory")
) || [],
filterText: "",
showFilter: false,
isClearingHistory: false,
showMore: false,
}
},
computed: {
filteredHistory() {
this.history =
fb.currentUser !== null
? this.page == "rest"
? fb.currentHistory
: fb.currentGraphqlHistory
: JSON.parse(
window.localStorage.getItem(this.page == "rest" ? "history" : "graphqlHistory")
) || []
return this.history.filter((entry) => {
const filterText = this.filterText.toLowerCase()
return Object.keys(entry).some((key) => {
let value = entry[key]
value = typeof value !== "string" ? value.toString() : value
return value.toLowerCase().includes(filterText)
})
})
},
},
methods: {
async clearHistory() {
if (fb.currentUser !== null) {
this.page == "rest" ? await fb.clearHistory() : await fb.clearGraphqlHistory()
}
this.history = []
this.filterText = ""
this.disableHistoryClearing()
updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
this.$toast.error(this.$t("history_deleted"), {
icon: "delete",
})
},
useHistory(entry) {
this.$emit("useHistory", entry)
},
async deleteHistory(entry) {
if (this.history.length === 0) {
this.filterText = ""
}
if (fb.currentUser !== null) {
await (this.page == "rest" ? fb.deleteHistory(entry) : fb.deleteGraphqlHistory(entry))
this.history = fb.currentHistory
updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
} else {
this.history.splice(this.history.indexOf(entry), 1)
updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
}
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
},
addEntry(entry) {
this.history.push(entry)
updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
},
enableHistoryClearing() {
if (!this.history || !this.history.length) return
this.isClearingHistory = true
},
disableHistoryClearing() {
this.isClearingHistory = false
},
toggleCollapse() {
this.showMore = !this.showMore
},
async toggleStar(entry) {
if (fb.currentUser !== null) {
this.page == "rest"
? await fb.toggleStar(entry, !entry.star)
: await fb.toggleGraphqlHistoryStar(entry, !entry.star)
}
entry.star = !entry.star
updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
},
},
}
</script>