"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "packages/hoppscotch-app/components/collections/index.vue" between
hoppscotch-2.2.1.tar.gz and hoppscotch-3.0.0.tar.gz

About: Hoppscotch is a light-weight, web based API development suite.

index.vue  (hoppscotch-2.2.1):index.vue  (hoppscotch-3.0.0)
<template> <template>
<div :class="{ 'rounded border border-divider': saveRequest }"> <div :class="{ 'rounded border border-divider': saveRequest }">
<div <div
class="divide-dividerLight divide-y bg-primary border-b border-dividerLigh class="sticky z-10 flex flex-col border-b rounded-t bg-primary border-divi
t rounded-t flex flex-col z-10 sticky" derLight"
:style="saveRequest ? 'top: calc(-1 * var(--font-size-body))' : 'top: 0'" :style="
saveRequest ? 'top: calc(-1.35 * var(--font-size-body))' : 'top: 0'
"
> >
<div v-if="!saveRequest" class="flex flex-col"> <div class="flex flex-col border-b border-dividerLight">
<input <input
v-model="filterText" v-model="filterText"
type="search" type="search"
autocomplete="off" autocomplete="off"
:placeholder="$t('action.search')" :placeholder="t('action.search')"
class="bg-transparent py-2 pr-2 pl-4" class="py-2 pl-4 pr-2 bg-transparent"
:disabled="collectionsType.type == 'team-collections'"
/> />
</div> </div>
<CollectionsChooseType <CollectionsChooseType
:collections-type="collectionsType" :collections-type="collectionsType"
:show="showTeamCollections" :show="showTeamCollections"
:doc="doc"
@update-collection-type="updateCollectionType" @update-collection-type="updateCollectionType"
@update-selected-team="updateSelectedTeam" @update-selected-team="updateSelectedTeam"
/> />
<div class="flex flex-1 justify-between"> <div class="flex justify-between flex-1">
<ButtonSecondary <ButtonSecondary
v-if=" v-if="
collectionsType.type == 'team-collections' && collectionsType.type == 'team-collections' &&
(collectionsType.selectedTeam == undefined || (collectionsType.selectedTeam == undefined ||
collectionsType.selectedTeam.myRole == 'VIEWER') collectionsType.selectedTeam.myRole == 'VIEWER')
" "
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
disabled disabled
class="!rounded-none" class="!rounded-none"
svg="plus" :icon="IconPlus"
:title="$t('team.no_access')" :title="t('team.no_access')"
:label="$t('action.new')" :label="t('action.new')"
/> />
<ButtonSecondary <ButtonSecondary
v-else v-else
svg="plus" :icon="IconPlus"
:label="$t('action.new')" :label="t('action.new')"
class="!rounded-none" class="!rounded-none"
@click.native="displayModalAdd(true)" @click="displayModalAdd(true)"
/> />
<span class="flex"> <span class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/collections" to="https://docs.hoppscotch.io/features/collections"
blank blank
:title="$t('app.wiki')" :title="t('app.wiki')"
svg="help-circle" :icon="IconHelpCircle"
/> />
<ButtonSecondary <ButtonSecondary
v-if="!saveRequest" v-if="!saveRequest"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:disabled=" :disabled="
collectionsType.type == 'team-collections' && collectionsType.type == 'team-collections' &&
collectionsType.selectedTeam == undefined collectionsType.selectedTeam == undefined
" "
svg="archive" :icon="IconArchive"
:title="$t('modal.import_export')" :title="t('modal.import_export')"
@click.native="displayModalImportExport(true)" @click="displayModalImportExport(true)"
/> />
</span> </span>
</div> </div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col flex-1">
<component <component
:is=" :is="
collectionsType.type == 'my-collections' collectionsType.type == 'my-collections'
? 'CollectionsMyCollection' ? 'CollectionsMyCollection'
: 'CollectionsTeamsCollection' : 'CollectionsTeamsCollection'
" "
v-for="(collection, index) in filteredCollections" v-for="(collection, index) in filteredCollections"
:key="`collection-${index}`" :key="`collection-${index}`"
:collection-index="index" :collection-index="parseInt(index)"
:collection="collection" :collection="collection"
:doc="doc"
:is-filtered="filterText.length > 0" :is-filtered="filterText.length > 0"
:selected="selected.some((coll) => coll == collection)"
:save-request="saveRequest" :save-request="saveRequest"
:collections-type="collectionsType" :collections-type="collectionsType"
:picked="picked" :picked="picked"
:loading-collection-i-ds="loadingCollectionIDs"
@edit-collection="editCollection(collection, index)" @edit-collection="editCollection(collection, index)"
@add-request="addRequest($event)"
@add-folder="addFolder($event)" @add-folder="addFolder($event)"
@edit-folder="editFolder($event)" @edit-folder="editFolder($event)"
@edit-request="editRequest($event)" @edit-request="editRequest($event)"
@duplicate-request="duplicateRequest($event)" @duplicate-request="duplicateRequest($event)"
@update-team-collections="updateTeamCollections" @update-team-collections="updateTeamCollections"
@select-collection="$emit('use-collection', collection)" @select-collection="$emit('use-collection', collection)"
@unselect-collection="$emit('remove-collection', collection)" @unselect-collection="$emit('remove-collection', collection)"
@select="$emit('select', $event)" @select="$emit('select', $event)"
@expand-collection="expandCollection" @expand-collection="expandCollection"
@remove-collection="removeCollection" @remove-collection="removeCollection"
@remove-request="removeRequest" @remove-request="removeRequest"
@remove-folder="removeFolder"
/> />
</div> </div>
<div <div
v-if="filteredCollections.length === 0 && filterText.length === 0" v-if="loadingCollectionIDs.includes('root')"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4"
>
<SmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div
v-else-if="filteredCollections.length === 0 && filterText.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/pack.svg`" :src="`/images/states/${colorMode.value}/pack.svg`"
loading="lazy" loading="lazy"
class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="$t('empty.collections')" :alt="t('empty.collections')"
/> />
<span class="text-center pb-4"> <span class="pb-4 text-center">
{{ $t("empty.collections") }} {{ t("empty.collections") }}
</span> </span>
<ButtonSecondary <ButtonSecondary
v-if=" v-if="
collectionsType.type == 'team-collections' && collectionsType.type == 'team-collections' &&
(collectionsType.selectedTeam == undefined || (collectionsType.selectedTeam == undefined ||
collectionsType.selectedTeam.myRole == 'VIEWER') collectionsType.selectedTeam.myRole == 'VIEWER')
" "
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('team.no_access')" :title="t('team.no_access')"
:label="$t('add.new')" :label="t('add.new')"
class="mb-4" class="mb-4"
filled filled
/> />
<ButtonSecondary <ButtonSecondary
v-else v-else
:label="$t('add.new')" :label="t('add.new')"
filled filled
class="mb-4" class="mb-4"
@click.native="displayModalAdd(true)" @click="displayModalAdd(true)"
/> />
</div> </div>
<div <div
v-if="filterText.length !== 0 && filteredCollections.length === 0" v-if="filterText.length !== 0 && filteredCollections.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<i class="opacity-75 pb-2 material-icons">manage_search</i> <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<span class="my-2 text-center"> <span class="my-2 text-center">
{{ $t("state.nothing_found") }} "{{ filterText }}" {{ t("state.nothing_found") }} "{{ filterText }}"
</span> </span>
</div> </div>
<CollectionsAdd <CollectionsAdd
:show="showModalAdd" :show="showModalAdd"
:loading-state="modalLoadingState"
@submit="addNewRootCollection" @submit="addNewRootCollection"
@hide-modal="displayModalAdd(false)" @hide-modal="displayModalAdd(false)"
/> />
<CollectionsEdit <CollectionsEdit
:show="showModalEdit" :show="showModalEdit"
:editing-collection-name=" :editing-collection-name="
editingCollection editingCollection
? editingCollection.name || editingCollection.title ? editingCollection.name || editingCollection.title
: '' : ''
" "
:loading-state="modalLoadingState"
@hide-modal="displayModalEdit(false)" @hide-modal="displayModalEdit(false)"
@submit="updateEditingCollection" @submit="updateEditingCollection"
/> />
<CollectionsAddRequest
:show="showModalAddRequest"
:folder="editingFolder"
:folder-path="editingFolderPath"
:loading-state="modalLoadingState"
@add-request="onAddRequest($event)"
@hide-modal="displayModalAddRequest(false)"
/>
<CollectionsAddFolder <CollectionsAddFolder
:show="showModalAddFolder" :show="showModalAddFolder"
:folder="editingFolder" :folder="editingFolder"
:folder-path="editingFolderPath" :folder-path="editingFolderPath"
:loading-state="modalLoadingState"
@add-folder="onAddFolder($event)" @add-folder="onAddFolder($event)"
@hide-modal="displayModalAddFolder(false)" @hide-modal="displayModalAddFolder(false)"
/> />
<CollectionsEditFolder <CollectionsEditFolder
:show="showModalEditFolder" :show="showModalEditFolder"
:editing-folder-name=" :editing-folder-name="
editingFolder ? editingFolder.name || editingFolder.title : '' editingFolder ? editingFolder.name || editingFolder.title : ''
" "
:loading-state="modalLoadingState"
@submit="updateEditingFolder" @submit="updateEditingFolder"
@hide-modal="displayModalEditFolder(false)" @hide-modal="displayModalEditFolder(false)"
/> />
<CollectionsEditRequest <CollectionsEditRequest
:show="showModalEditRequest" :show="showModalEditRequest"
:editing-request-name="editingRequest ? editingRequest.name : ''" :editing-request-name="editingRequest ? editingRequest.name : ''"
:loading-state="modalLoadingState"
@submit="updateEditingRequest" @submit="updateEditingRequest"
@hide-modal="displayModalEditRequest(false)" @hide-modal="displayModalEditRequest(false)"
/> />
<CollectionsImportExport <CollectionsImportExport
:show="showModalImportExport" :show="showModalImportExport"
:collections-type="collectionsType" :collections-type="collectionsType"
@hide-modal="displayModalImportExport(false)" @hide-modal="displayModalImportExport(false)"
@update-team-collections="updateTeamCollections" @update-team-collections="updateTeamCollections"
/> />
<SmartConfirmModal
:show="showConfirmModal"
:title="confirmModalTitle"
:loading-state="modalLoadingState"
@hide-modal="showConfirmModal = false"
@resolve="resolveConfirmModal"
/>
</div> </div>
</template> </template>
<script> <script>
import gql from "graphql-tag" import IconArchive from "~icons/lucide/archive"
import cloneDeep from "lodash/cloneDeep" import IconPlus from "~icons/lucide/plus"
import { defineComponent } from "@nuxtjs/composition-api" import IconHelpCircle from "~icons/lucide/help-circle"
import { cloneDeep } from "lodash-es"
import { defineComponent, markRaw } from "vue"
import { makeCollection } from "@hoppscotch/data"
import { useColorMode } from "@composables/theming"
import * as E from "fp-ts/Either"
import CollectionsMyCollection from "./my/Collection.vue" import CollectionsMyCollection from "./my/Collection.vue"
import CollectionsTeamsCollection from "./teams/Collection.vue" import CollectionsTeamsCollection from "./teams/Collection.vue"
import { currentUser$ } from "~/helpers/fb/auth" import { currentUser$ } from "~/helpers/fb/auth"
import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter" import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
import * as teamUtils from "~/helpers/teams/utils"
import { import {
restCollections$, restCollections$,
addRESTCollection, addRESTCollection,
editRESTCollection, editRESTCollection,
addRESTFolder, addRESTFolder,
removeRESTCollection, removeRESTCollection,
removeRESTFolder,
editRESTFolder, editRESTFolder,
removeRESTRequest, removeRESTRequest,
editRESTRequest, editRESTRequest,
saveRESTRequestAs, saveRESTRequestAs,
} from "~/newstore/collections" } from "~/newstore/collections"
import { import {
useReadonlyStream, setRESTRequest,
useStreamSubscriber, getRESTRequest,
} from "~/helpers/utils/composables" getRESTSaveContext,
} from "~/newstore/RESTSession"
import { useReadonlyStream, useStreamSubscriber } from "@composables/stream"
import { runMutation } from "~/helpers/backend/GQLClient"
import {
CreateChildCollectionDocument,
CreateNewRootCollectionDocument,
CreateRequestInCollectionDocument,
DeleteCollectionDocument,
DeleteRequestDocument,
RenameCollectionDocument,
UpdateRequestDocument,
} from "~/helpers/backend/graphql"
import { useToast } from "@composables/toast"
import { useI18n } from "~/composables/i18n"
export default defineComponent({ export default defineComponent({
components: { components: {
CollectionsMyCollection, CollectionsMyCollection,
CollectionsTeamsCollection, CollectionsTeamsCollection,
}, },
props: { props: {
doc: Boolean,
selected: { type: Array, default: () => [] },
saveRequest: Boolean, saveRequest: Boolean,
picked: { type: Object, default: () => {} }, picked: { type: Object, default: () => ({}) },
}, },
emits: [
"update-collection",
"update-coll-type",
"update-team-collections",
"select-request",
"select",
"use-collection",
"remove-collection",
],
setup() { setup() {
const { subscribeToStream } = useStreamSubscriber() const { subscribeToStream } = useStreamSubscriber()
return { return {
subscribeTo: subscribeToStream, subscribeTo: subscribeToStream,
collections: useReadonlyStream(restCollections$, []), collections: useReadonlyStream(restCollections$, [], "deep"),
currentUser: useReadonlyStream(currentUser$, null), currentUser: useReadonlyStream(currentUser$, null),
colorMode: useColorMode(),
toast: useToast(),
t: useI18n(),
} }
}, },
data() { data() {
return { return {
IconArchive: markRaw(IconArchive),
IconHelpCircle: markRaw(IconHelpCircle),
IconPlus: markRaw(IconPlus),
showModalAdd: false, showModalAdd: false,
showModalEdit: false, showModalEdit: false,
showModalImportExport: false, showModalImportExport: false,
showModalAddRequest: false,
showModalAddFolder: false, showModalAddFolder: false,
showModalEditFolder: false, showModalEditFolder: false,
showModalEditRequest: false, showModalEditRequest: false,
showConfirmModal: false,
modalLoadingState: false,
editingCollection: undefined, editingCollection: undefined,
editingCollectionIndex: undefined, editingCollectionIndex: undefined,
editingCollectionID: undefined,
editingFolder: undefined, editingFolder: undefined,
editingFolderName: undefined, editingFolderName: undefined,
editingFolderIndex: undefined, editingFolderIndex: undefined,
editingFolderPath: undefined, editingFolderPath: undefined,
editingRequest: undefined, editingRequest: undefined,
editingRequestIndex: undefined, editingRequestIndex: undefined,
confirmModalTitle: undefined,
filterText: "", filterText: "",
collectionsType: { collectionsType: {
type: "my-collections", type: "my-collections",
selectedTeam: undefined, selectedTeam: undefined,
}, },
teamCollectionAdapter: new TeamCollectionAdapter(null), teamCollectionAdapter: new TeamCollectionAdapter(null),
teamCollectionsNew: [], teamCollectionsNew: [],
loadingCollectionIDs: [],
} }
}, },
computed: { computed: {
showTeamCollections() { showTeamCollections() {
if (this.currentUser == null) { if (this.currentUser == null) {
return false return false
} }
return true return true
}, },
filteredCollections() { filteredCollections() {
skipping to change at line 322 skipping to change at line 390
return filteredCollections return filteredCollections
}, },
}, },
watch: { watch: {
"collectionsType.type": function emitstuff() { "collectionsType.type": function emitstuff() {
this.$emit("update-collection", this.$data.collectionsType.type) this.$emit("update-collection", this.$data.collectionsType.type)
}, },
"collectionsType.selectedTeam"(value) { "collectionsType.selectedTeam"(value) {
if (value?.id) this.teamCollectionAdapter.changeTeamID(value.id) if (value?.id) this.teamCollectionAdapter.changeTeamID(value.id)
}, },
currentUser(newValue) {
if (!newValue) this.updateCollectionType("my-collections")
},
},
beforeUnmount() {
this.teamCollectionAdapter.unsubscribeSubscriptions()
}, },
mounted() { mounted() {
this.subscribeTo(this.teamCollectionAdapter.collections$, (colls) => { this.subscribeTo(this.teamCollectionAdapter.collections$, (colls) => {
this.teamCollectionsNew = cloneDeep(colls) this.teamCollectionsNew = cloneDeep(colls)
}) })
this.subscribeTo(
this.teamCollectionAdapter.loadingCollections$,
(collectionsIDs) => {
this.loadingCollectionIDs = collectionsIDs
}
)
}, },
methods: { methods: {
updateTeamCollections() { updateTeamCollections() {
// TODO: Remove this at some point // TODO: Remove this at some point
}, },
updateSelectedTeam(newSelectedTeam) { updateSelectedTeam(newSelectedTeam) {
this.collectionsType.selectedTeam = newSelectedTeam this.collectionsType.selectedTeam = newSelectedTeam
this.$emit("update-coll-type", this.collectionsType) this.$emit("update-coll-type", this.collectionsType)
}, },
updateCollectionType(newCollectionType) { updateCollectionType(newCollectionType) {
this.collectionsType.type = newCollectionType this.collectionsType.type = newCollectionType
this.$emit("update-coll-type", this.collectionsType) this.$emit("update-coll-type", this.collectionsType)
}, },
// Intented to be called by the CollectionAdd modal submit event // Intented to be called by the CollectionAdd modal submit event
addNewRootCollection(name) { addNewRootCollection(name) {
if (this.collectionsType.type === "my-collections") { if (this.collectionsType.type === "my-collections") {
addRESTCollection({ addRESTCollection(
name, makeCollection({
folders: [], name,
requests: [], folders: [],
}) requests: [],
})
)
this.displayModalAdd(false)
} else if ( } else if (
this.collectionsType.type === "team-collections" && this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER" this.collectionsType.selectedTeam.myRole !== "VIEWER"
) { ) {
teamUtils this.modalLoadingState = true
.createNewRootCollection( runMutation(CreateNewRootCollectionDocument, {
this.$apollo, title: name,
name, teamID: this.collectionsType.selectedTeam.id,
this.collectionsType.selectedTeam.id })().then((result) => {
) this.modalLoadingState = false
.then(() => { if (E.isLeft(result)) {
this.$toast.success(this.$t("collection.created")) if (result.left.error === "team_coll/short_title")
}) this.toast.error(this.t("collection.name_length_insufficient"))
.catch((e) => { else this.toast.error(this.t("error.something_went_wrong"))
this.$toast.error(this.$t("error.something_went_wrong")) console.error(result.left.error)
console.error(e) } else {
}) this.toast.success(this.t("collection.created"))
this.displayModalAdd(false)
}
})
} }
this.displayModalAdd(false)
}, },
// Intented to be called by CollectionEdit modal submit event // Intented to be called by CollectionEdit modal submit event
updateEditingCollection(newName) { updateEditingCollection(newName) {
if (!newName) { if (!newName) {
this.$toast.error(this.$t("collection.invalid_name")) this.toast.error(this.t("collection.invalid_name"))
return return
} }
if (this.collectionsType.type === "my-collections") { if (this.collectionsType.type === "my-collections") {
const collectionUpdated = { const collectionUpdated = {
...this.editingCollection, ...this.editingCollection,
name: newName, name: newName,
} }
editRESTCollection(this.editingCollectionIndex, collectionUpdated) editRESTCollection(this.editingCollectionIndex, collectionUpdated)
this.displayModalEdit(false)
} else if ( } else if (
this.collectionsType.type === "team-collections" && this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER" this.collectionsType.selectedTeam.myRole !== "VIEWER"
) { ) {
teamUtils this.modalLoadingState = true
.renameCollection(this.$apollo, newName, this.editingCollection.id)
.then(() => { runMutation(RenameCollectionDocument, {
this.$toast.success(this.$t("collection.renamed")) collectionID: this.editingCollection.id,
}) newTitle: newName,
.catch((e) => { })().then((result) => {
this.$toast.error(this.$t("error.something_went_wrong")) this.modalLoadingState = false
console.error(e)
}) if (E.isLeft(result)) {
this.toast.error(this.t("error.something_went_wrong"))
console.error(result.left.error)
} else {
this.toast.success(this.t("collection.renamed"))
this.displayModalEdit(false)
}
})
} }
this.displayModalEdit(false)
}, },
// Intended to be called by CollectionEditFolder modal submit event // Intended to be called by CollectionEditFolder modal submit event
updateEditingFolder(name) { updateEditingFolder(name) {
if (this.collectionsType.type === "my-collections") { if (this.collectionsType.type === "my-collections") {
editRESTFolder(this.editingFolderPath, { ...this.editingFolder, name }) editRESTFolder(this.editingFolderPath, { ...this.editingFolder, name })
this.displayModalEditFolder(false)
} else if ( } else if (
this.collectionsType.type === "team-collections" && this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER" this.collectionsType.selectedTeam.myRole !== "VIEWER"
) { ) {
teamUtils this.modalLoadingState = true
.renameCollection(this.$apollo, name, this.editingFolder.id)
.then(() => {
this.$toast.success(this.$t("folder.renamed"))
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
})
}
this.displayModalEditFolder(false) runMutation(RenameCollectionDocument, {
collectionID: this.editingFolder.id,
newTitle: name,
})().then((result) => {
this.modalLoadingState = false
if (E.isLeft(result)) {
if (result.left.error === "team_coll/short_title")
this.toast.error(this.t("folder.name_length_insufficient"))
else this.toast.error(this.t("error.something_went_wrong"))
console.error(result.left.error)
} else {
this.toast.success(this.t("folder.renamed"))
this.displayModalEditFolder(false)
}
})
}
}, },
// Intented to by called by CollectionsEditRequest modal submit event // Intented to by called by CollectionsEditRequest modal submit event
updateEditingRequest(requestUpdateData) { updateEditingRequest(requestUpdateData) {
const saveCtx = getRESTSaveContext()
const requestUpdated = { const requestUpdated = {
...this.editingRequest, ...this.editingRequest,
name: requestUpdateData.name || this.editingRequest.name, name: requestUpdateData.name || this.editingRequest.name,
} }
if (this.collectionsType.type === "my-collections") { if (this.collectionsType.type === "my-collections") {
// Update REST Session with the updated state
if (
saveCtx &&
saveCtx.originLocation === "user-collection" &&
saveCtx.requestIndex === this.editingRequestIndex &&
saveCtx.folderPath === this.editingFolderPath
) {
setRESTRequest({
...getRESTRequest(),
name: requestUpdateData.name,
})
}
editRESTRequest( editRESTRequest(
this.editingFolderPath, this.editingFolderPath,
this.editingRequestIndex, this.editingRequestIndex,
requestUpdated requestUpdated
) )
this.displayModalEditRequest(false)
} else if ( } else if (
this.collectionsType.type === "team-collections" && this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER" this.collectionsType.selectedTeam.myRole !== "VIEWER"
) { ) {
this.modalLoadingState = true
const requestName = requestUpdateData.name || this.editingRequest.name const requestName = requestUpdateData.name || this.editingRequest.name
teamUtils
.updateRequest( // Update REST Session with the updated state
this.$apollo, if (
requestUpdated, saveCtx &&
requestName, saveCtx.originLocation === "team-collection" &&
this.editingRequestIndex saveCtx.requestID === this.editingRequestIndex
) ) {
.then(() => { setRESTRequest({
this.$toast.success(this.$t("request.renamed")) ...getRESTRequest(),
this.$emit("update-team-collections") name: requestUpdateData.name,
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
}) })
} }
this.displayModalEditRequest(false) runMutation(UpdateRequestDocument, {
data: {
request: JSON.stringify(requestUpdated),
title: requestName,
},
requestID: this.editingRequestIndex,
})().then((result) => {
this.modalLoadingState = false
if (E.isLeft(result)) {
this.toast.error(this.t("error.something_went_wrong"))
console.error(result.left.error)
} else {
this.toast.success(this.t("request.renamed"))
this.$emit("update-team-collections")
this.displayModalEditRequest(false)
}
})
}
}, },
displayModalAdd(shouldDisplay) { displayModalAdd(shouldDisplay) {
this.showModalAdd = shouldDisplay this.showModalAdd = shouldDisplay
}, },
displayModalEdit(shouldDisplay) { displayModalEdit(shouldDisplay) {
this.showModalEdit = shouldDisplay this.showModalEdit = shouldDisplay
if (!shouldDisplay) this.resetSelectedData() if (!shouldDisplay) this.resetSelectedData()
}, },
displayModalImportExport(shouldDisplay) { displayModalImportExport(shouldDisplay) {
this.showModalImportExport = shouldDisplay this.showModalImportExport = shouldDisplay
}, },
displayModalAddRequest(shouldDisplay) {
this.showModalAddRequest = shouldDisplay
if (!shouldDisplay) this.resetSelectedData()
},
displayModalAddFolder(shouldDisplay) { displayModalAddFolder(shouldDisplay) {
this.showModalAddFolder = shouldDisplay this.showModalAddFolder = shouldDisplay
if (!shouldDisplay) this.resetSelectedData() if (!shouldDisplay) this.resetSelectedData()
}, },
displayModalEditFolder(shouldDisplay) { displayModalEditFolder(shouldDisplay) {
this.showModalEditFolder = shouldDisplay this.showModalEditFolder = shouldDisplay
if (!shouldDisplay) this.resetSelectedData() if (!shouldDisplay) this.resetSelectedData()
}, },
displayModalEditRequest(shouldDisplay) { displayModalEditRequest(shouldDisplay) {
this.showModalEditRequest = shouldDisplay this.showModalEditRequest = shouldDisplay
if (!shouldDisplay) this.resetSelectedData() if (!shouldDisplay) this.resetSelectedData()
}, },
displayConfirmModal(shouldDisplay) {
this.showConfirmModal = shouldDisplay
if (!shouldDisplay) this.resetSelectedData()
},
editCollection(collection, collectionIndex) { editCollection(collection, collectionIndex) {
this.$data.editingCollection = collection this.$data.editingCollection = collection
this.$data.editingCollectionIndex = collectionIndex this.$data.editingCollectionIndex = collectionIndex
this.displayModalEdit(true) this.displayModalEdit(true)
}, },
onAddFolder({ name, folder, path }) { onAddFolder({ name, folder, path }) {
if (this.collectionsType.type === "my-collections") { if (this.collectionsType.type === "my-collections") {
addRESTFolder(name, path) addRESTFolder(name, path)
} else if (this.collectionsType.type === "team-collections") { this.displayModalAddFolder(false)
if (this.collectionsType.selectedTeam.myRole !== "VIEWER") { } else if (
this.$apollo this.collectionsType.type === "team-collections" &&
.mutate({ this.collectionsType.selectedTeam.myRole !== "VIEWER"
mutation: gql` ) {
mutation CreateChildCollection( this.modalLoadingState = true
$childTitle: String! runMutation(CreateChildCollectionDocument, {
$collectionID: ID! childTitle: name,
) { collectionID: folder.id,
createChildCollection( })().then((result) => {
childTitle: $childTitle this.modalLoadingState = false
collectionID: $collectionID if (E.isLeft(result)) {
) { if (result.left.error === "team_coll/short_title")
id this.toast.error(this.t("folder.name_length_insufficient"))
} else this.toast.error(this.t("error.something_went_wrong"))
} console.error(result.left.error)
`, } else {
// Parameters this.toast.success(this.t("folder.created"))
variables: { this.displayModalAddFolder(false)
childTitle: name, this.$emit("update-team-collections")
collectionID: folder.id, }
}, })
})
.then(() => {
this.$toast.success(this.$t("folder.created"))
this.$emit("update-team-collections")
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
})
}
} }
this.displayModalAddFolder(false)
}, },
addFolder(payload) { addFolder(payload) {
const { folder, path } = payload const { folder, path } = payload
this.$data.editingFolder = folder this.$data.editingFolder = folder
this.$data.editingFolderPath = path this.$data.editingFolderPath = path
this.displayModalAddFolder(true) this.displayModalAddFolder(true)
}, },
editFolder(payload) { editFolder(payload) {
const { collectionIndex, folder, folderIndex, folderPath } = payload const { collectionIndex, folder, folderIndex, folderPath } = payload
this.$data.editingCollectionIndex = collectionIndex this.$data.editingCollectionIndex = collectionIndex
skipping to change at line 561 skipping to change at line 692
this.$data.editingFolderName = folderName this.$data.editingFolderName = folderName
this.$data.editingRequest = request this.$data.editingRequest = request
this.$data.editingRequestIndex = requestIndex this.$data.editingRequestIndex = requestIndex
this.editingFolderPath = folderPath this.editingFolderPath = folderPath
this.$emit("select-request", requestIndex) this.$emit("select-request", requestIndex)
this.displayModalEditRequest(true) this.displayModalEditRequest(true)
}, },
resetSelectedData() { resetSelectedData() {
this.$data.editingCollection = undefined this.$data.editingCollection = undefined
this.$data.editingCollectionIndex = undefined this.$data.editingCollectionIndex = undefined
this.$data.editingCollectionID = undefined
this.$data.editingFolder = undefined this.$data.editingFolder = undefined
this.$data.editingFolderPath = undefined
this.$data.editingFolderIndex = undefined this.$data.editingFolderIndex = undefined
this.$data.editingRequest = undefined this.$data.editingRequest = undefined
this.$data.editingRequestIndex = undefined this.$data.editingRequestIndex = undefined
this.$data.confirmModalTitle = undefined
}, },
expandCollection(collectionID) { expandCollection(collectionID) {
this.teamCollectionAdapter.expandCollection(collectionID) this.teamCollectionAdapter.expandCollection(collectionID)
}, },
removeCollection({ collectionsType, collectionIndex, collectionID }) { removeCollection({ collectionIndex, collectionID }) {
if (collectionsType.type === "my-collections") { this.$data.editingCollectionIndex = collectionIndex
this.$data.editingCollectionID = collectionID
this.confirmModalTitle = `${this.t("confirm.remove_collection")}`
this.displayConfirmModal(true)
},
onRemoveCollection() {
const collectionIndex = this.$data.editingCollectionIndex
const collectionID = this.$data.editingCollectionID
if (this.collectionsType.type === "my-collections") {
// Cancel pick if picked collection is deleted // Cancel pick if picked collection is deleted
if ( if (
this.picked && this.picked &&
this.picked.pickedType === "my-collection" && this.picked.pickedType === "my-collection" &&
this.picked.collectionIndex === collectionIndex this.picked.collectionIndex === collectionIndex
) { ) {
this.$emit("select", { picked: null }) this.$emit("select", { picked: null })
} }
removeRESTCollection(collectionIndex) removeRESTCollection(collectionIndex)
this.$toast.success(this.$t("state.deleted"))
} else if (collectionsType.type === "team-collections") { this.toast.success(this.t("state.deleted"))
this.displayConfirmModal(false)
} else if (this.collectionsType.type === "team-collections") {
this.modalLoadingState = true
// Cancel pick if picked collection is deleted // Cancel pick if picked collection is deleted
if ( if (
this.picked && this.picked &&
this.picked.pickedType === "teams-collection" && this.picked.pickedType === "teams-collection" &&
this.picked.collectionID === collectionID this.picked.collectionID === collectionID
) { ) {
this.$emit("select", { picked: null }) this.$emit("select", { picked: null })
} }
if (collectionsType.selectedTeam.myRole !== "VIEWER") { if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
this.$apollo runMutation(DeleteCollectionDocument, {
.mutate({ collectionID,
// Query })().then((result) => {
mutation: gql` this.modalLoadingState = false
mutation ($collectionID: ID!) { if (E.isLeft(result)) {
deleteCollection(collectionID: $collectionID) this.toast.error(this.t("error.something_went_wrong"))
} console.error(result.left.error)
`, } else {
// Parameters this.toast.success(this.t("state.deleted"))
variables: { this.displayConfirmModal(false)
collectionID, }
}, })
}) }
.then(() => { }
this.$toast.success(this.$t("state.deleted")) },
}) removeFolder({ collectionID, folder, folderPath }) {
.catch((e) => { this.$data.editingCollectionID = collectionID
this.$toast.error(this.$t("error.something_went_wrong")) this.$data.editingFolder = folder
console.error(e) this.$data.editingFolderPath = folderPath
}) this.confirmModalTitle = `${this.t("confirm.remove_folder")}`
this.displayConfirmModal(true)
},
onRemoveFolder() {
const folder = this.$data.editingFolder
const folderPath = this.$data.editingFolderPath
if (this.collectionsType.type === "my-collections") {
// Cancel pick if picked folder was deleted
if (
this.picked &&
this.picked.pickedType === "my-folder" &&
this.picked.folderPath === folderPath
) {
this.$emit("select", { picked: null })
}
removeRESTFolder(folderPath)
this.toast.success(this.t("state.deleted"))
this.displayConfirmModal(false)
} else if (this.collectionsType.type === "team-collections") {
this.modalLoadingState = true
// Cancel pick if picked collection folder was deleted
if (
this.picked &&
this.picked.pickedType === "teams-folder" &&
this.picked.folderID === folder.id
) {
this.$emit("select", { picked: null })
}
if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
runMutation(DeleteCollectionDocument, {
collectionID: folder.id,
})().then((result) => {
this.modalLoadingState = false
if (E.isLeft(result)) {
this.toast.error(`${this.t("error.something_went_wrong")}`)
console.error(result.left.error)
} else {
this.toast.success(`${this.t("state.deleted")}`)
this.displayConfirmModal(false)
this.updateTeamCollections()
}
})
} }
} }
}, },
removeRequest({ requestIndex, folderPath }) { removeRequest({ requestIndex, folderPath }) {
this.$data.editingRequestIndex = requestIndex
this.$data.editingFolderPath = folderPath
this.confirmModalTitle = `${this.t("confirm.remove_request")}`
this.displayConfirmModal(true)
},
onRemoveRequest() {
const requestIndex = this.$data.editingRequestIndex
const folderPath = this.$data.editingFolderPath
if (this.collectionsType.type === "my-collections") { if (this.collectionsType.type === "my-collections") {
// Cancel pick if the picked item is being deleted // Cancel pick if the picked item is being deleted
if ( if (
this.picked && this.picked &&
this.picked.pickedType === "my-request" && this.picked.pickedType === "my-request" &&
this.picked.folderPath === folderPath && this.picked.folderPath === folderPath &&
this.picked.requestIndex === requestIndex this.picked.requestIndex === requestIndex
) { ) {
this.$emit("select", { picked: null }) this.$emit("select", { picked: null })
} }
removeRESTRequest(folderPath, requestIndex) removeRESTRequest(folderPath, requestIndex)
this.$toast.success(this.$t("state.deleted"))
this.toast.success(this.t("state.deleted"))
this.displayConfirmModal(false)
} else if (this.collectionsType.type === "team-collections") { } else if (this.collectionsType.type === "team-collections") {
this.modalLoadingState = true
// Cancel pick if the picked item is being deleted // Cancel pick if the picked item is being deleted
if ( if (
this.picked && this.picked &&
this.picked.pickedType === "teams-request" && this.picked.pickedType === "teams-request" &&
this.picked.requestID === requestIndex this.picked.requestID === requestIndex
) { ) {
this.$emit("select", { picked: null }) this.$emit("select", { picked: null })
} }
teamUtils runMutation(DeleteRequestDocument, {
.deleteRequest(this.$apollo, requestIndex) requestID: requestIndex,
.then(() => { })().then((result) => {
this.$toast.success(this.$t("state.deleted")) this.modalLoadingState = false
}) if (E.isLeft(result)) {
.catch((e) => { this.toast.error(this.t("error.something_went_wrong"))
this.$toast.error(this.$t("error.something_went_wrong")) console.error(result.left.error)
console.error(e) } else {
}) this.toast.success(this.t("state.deleted"))
this.displayConfirmModal(false)
}
})
}
},
addRequest(payload) {
// TODO: check if the request being worked on
// is being overwritten (selected or not)
const { folder, path } = payload
this.$data.editingFolder = folder
this.$data.editingFolderPath = path
this.displayModalAddRequest(true)
},
onAddRequest({ name, folder, path }) {
const newRequest = {
...cloneDeep(getRESTRequest()),
name,
}
if (this.collectionsType.type === "my-collections") {
const insertionIndex = saveRESTRequestAs(path, newRequest)
// point to it
setRESTRequest(newRequest, {
originLocation: "user-collection",
folderPath: path,
requestIndex: insertionIndex,
})
this.displayModalAddRequest(false)
} else if (
this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER"
) {
this.modalLoadingState = true
runMutation(CreateRequestInCollectionDocument, {
collectionID: folder.id,
data: {
request: JSON.stringify(newRequest),
teamID: this.collectionsType.selectedTeam.id,
title: name,
},
})().then((result) => {
this.modalLoadingState = false
if (E.isLeft(result)) {
this.toast.error(this.t("error.something_went_wrong"))
console.error(result.left.error)
} else {
const { createRequestInCollection } = result.right
// point to it
setRESTRequest(newRequest, {
originLocation: "team-collection",
requestID: createRequestInCollection.id,
collectionID: createRequestInCollection.collection.id,
teamID: createRequestInCollection.collection.team.id,
})
this.displayModalAddRequest(false)
}
})
} }
}, },
duplicateRequest({ folderPath, request, collectionID }) { duplicateRequest({ folderPath, request, collectionID }) {
if (this.collectionsType.type === "team-collections") { if (this.collectionsType.type === "team-collections") {
const newReq = { const newReq = {
...cloneDeep(request), ...cloneDeep(request),
name: `${request.name} - ${this.$t("action.duplicate")}`, name: `${request.name} - ${this.t("action.duplicate")}`,
} }
teamUtils.saveRequestAsTeams( // Error handling ?
this.$apollo, runMutation(CreateRequestInCollectionDocument, {
JSON.stringify(newReq), collectionID,
`${request.name} - ${this.$t("action.duplicate")}`, data: {
this.collectionsType.selectedTeam.id, request: JSON.stringify(newReq),
collectionID teamID: this.collectionsType.selectedTeam.id,
) title: `${request.name} - ${this.t("action.duplicate")}`,
},
})()
} else if (this.collectionsType.type === "my-collections") { } else if (this.collectionsType.type === "my-collections") {
saveRESTRequestAs(folderPath, { saveRESTRequestAs(folderPath, {
...cloneDeep(request), ...cloneDeep(request),
name: `${request.name} - ${this.$t("action.duplicate")}`, name: `${request.name} - ${this.t("action.duplicate")}`,
}) })
} }
}, },
resolveConfirmModal(title) {
if (title === `${this.t("confirm.remove_collection")}`)
this.onRemoveCollection()
else if (title === `${this.t("confirm.remove_request")}`)
this.onRemoveRequest()
else if (title === `${this.t("confirm.remove_folder")}`)
this.onRemoveFolder()
else {
console.error(
`Confirm modal title ${title} is not handled by the component`
)
this.toast.error(this.t("error.something_went_wrong"))
this.displayConfirmModal(false)
}
},
}, },
}) })
// request inside folder is not being deleted, you dumb fuck
</script> </script>
 End of changes. 87 change blocks. 
183 lines changed or deleted 469 lines changed or added

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)