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
)
},
},
}