"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "packages/hoppscotch-app/components/collections/graphql/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': savingMode }"> <div :class="{ 'rounded border border-divider': savingMode }">
<div <div
class="divide-dividerLight divide-y border-b border-dividerLight flex flex -col top-0 z-10 sticky" class="sticky top-0 z-10 flex flex-col border-b divide-y divide-dividerLig ht border-dividerLight"
:class="{ 'bg-primary': !savingMode }" :class="{ 'bg-primary': !savingMode }"
> >
<input <input
v-if="showCollActions" v-if="showCollActions"
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 flex py-2 px-4" class="flex px-4 py-2 bg-transparent"
/> />
<div class="flex flex-1 justify-between"> <div class="flex justify-between flex-1">
<ButtonSecondary <ButtonSecondary
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)"
/> />
<div class="flex"> <div 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="showCollActions" v-if="showCollActions"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('modal.import_export')" :title="t('modal.import_export')"
svg="archive" :icon="IconArchive"
@click.native="displayModalImportExport(true)" @click="displayModalImportExport(true)"
/> />
</div> </div>
</div> </div>
</div> </div>
<div class="flex-col"> <div class="flex-col">
<CollectionsGraphqlCollection <CollectionsGraphqlCollection
v-for="(collection, index) in filteredCollections" v-for="(collection, index) in filteredCollections"
:key="`collection-${index}`" :key="`collection-${index}`"
:picked="picked" :picked="picked"
:name="collection.name" :name="collection.name"
:collection-index="index" :collection-index="index"
:collection="collection" :collection="collection"
:doc="doc"
:is-filtered="filterText.length > 0" :is-filtered="filterText.length > 0"
:saving-mode="savingMode" :saving-mode="savingMode"
@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)"
@select-collection="$emit('use-collection', collection)" @select-collection="$emit('use-collection', collection)"
@select="$emit('select', $event)" @select="$emit('select', $event)"
/> />
</div> </div>
<div <div
v-if="collections.length === 0" v-if="collections.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"
> >
<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
:label="$t('add.new')" :label="t('add.new')"
filled filled
@click.native="displayModalAdd(true)" @click="displayModalAdd(true)"
/> />
</div> </div>
<div <div
v-if="!(filteredCollections.length !== 0 || collections.length === 0)" v-if="!(filteredCollections.length !== 0 || collections.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>
<CollectionsGraphqlAdd <CollectionsGraphqlAdd
:show="showModalAdd" :show="showModalAdd"
@hide-modal="displayModalAdd(false)" @hide-modal="displayModalAdd(false)"
/> />
<CollectionsGraphqlEdit <CollectionsGraphqlEdit
:show="showModalEdit" :show="showModalEdit"
:editing-collection="editingCollection" :editing-collection="editingCollection"
:editing-collection-index="editingCollectionIndex" :editing-collection-index="editingCollectionIndex"
:editing-collection-name="editingCollection ? editingCollection.name : ''" :editing-collection-name="editingCollection ? editingCollection.name : ''"
@hide-modal="displayModalEdit(false)" @hide-modal="displayModalEdit(false)"
/> />
<CollectionsGraphqlAddRequest
:show="showModalAddRequest"
:folder-path="editingFolderPath"
@add-request="onAddRequest($event)"
@hide-modal="displayModalAddRequest(false)"
/>
<CollectionsGraphqlAddFolder <CollectionsGraphqlAddFolder
:show="showModalAddFolder" :show="showModalAddFolder"
:folder-path="editingFolderPath" :folder-path="editingFolderPath"
@add-folder="onAddFolder($event)" @add-folder="onAddFolder($event)"
@hide-modal="displayModalAddFolder(false)" @hide-modal="displayModalAddFolder(false)"
/> />
<CollectionsGraphqlEditFolder <CollectionsGraphqlEditFolder
:show="showModalEditFolder" :show="showModalEditFolder"
:collection-index="editingCollectionIndex" :collection-index="editingCollectionIndex"
:folder="editingFolder" :folder="editingFolder"
skipping to change at line 129 skipping to change at line 135
:editing-request-name="editingRequest ? editingRequest.name : ''" :editing-request-name="editingRequest ? editingRequest.name : ''"
@hide-modal="displayModalEditRequest(false)" @hide-modal="displayModalEditRequest(false)"
/> />
<CollectionsGraphqlImportExport <CollectionsGraphqlImportExport
:show="showModalImportExport" :show="showModalImportExport"
@hide-modal="displayModalImportExport(false)" @hide-modal="displayModalImportExport(false)"
/> />
</div> </div>
</template> </template>
<script> <script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api" // TODO: TypeScript + Script Setup this :)
import cloneDeep from "lodash/cloneDeep" import { defineComponent } from "vue"
import clone from "lodash/clone" import { cloneDeep, clone } from "lodash-es"
import { useReadonlyStream } from "~/helpers/utils/composables"
import { import {
graphqlCollections$, graphqlCollections$,
addGraphqlFolder, addGraphqlFolder,
saveGraphqlRequestAs, saveGraphqlRequestAs,
} from "~/newstore/collections" } from "~/newstore/collections"
import { getGQLSession, setGQLSession } from "~/newstore/GQLSession"
import IconPlus from "~icons/lucide/plus"
import IconHelpCircle from "~icons/lucide/help-circle"
import IconArchive from "~icons/lucide/archive"
import { useI18n } from "@composables/i18n"
import { useReadonlyStream } from "@composables/stream"
import { useColorMode } from "@composables/theming"
export default defineComponent({ export default defineComponent({
props: { props: {
// Whether to activate the ability to pick items (activates 'select' events) // Whether to activate the ability to pick items (activates 'select' events)
savingMode: { type: Boolean, default: false }, savingMode: { type: Boolean, default: false },
doc: { type: Boolean, default: false },
picked: { type: Object, default: null }, picked: { type: Object, default: null },
// Whether to show the 'New' and 'Import/Export' actions // Whether to show the 'New' and 'Import/Export' actions
showCollActions: { type: Boolean, default: true }, showCollActions: { type: Boolean, default: true },
}, },
emits: ["select", "use-collection"],
setup() { setup() {
const collections = useReadonlyStream(graphqlCollections$, [], "deep")
const colorMode = useColorMode()
const t = useI18n()
return { return {
collections: useReadonlyStream(graphqlCollections$, []), collections,
colorMode,
t,
IconPlus,
IconHelpCircle,
IconArchive,
} }
}, },
data() { data() {
return { return {
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,
editingCollection: undefined, editingCollection: undefined,
editingCollectionIndex: undefined, editingCollectionIndex: undefined,
editingFolder: undefined, editingFolder: undefined,
editingFolderName: undefined, editingFolderName: undefined,
editingFolderIndex: undefined, editingFolderIndex: undefined,
editingFolderPath: undefined, editingFolderPath: undefined,
editingRequest: undefined, editingRequest: undefined,
skipping to change at line 225 skipping to change at line 248
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()
}, },
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)
}, },
onAddRequest({ name, path }) {
const newRequest = {
...getGQLSession().request,
name,
}
saveGraphqlRequestAs(path, newRequest)
setGQLSession({
request: newRequest,
schema: "",
response: "",
})
this.displayModalAddRequest(false)
},
addRequest(payload) {
const { path } = payload
this.$data.editingFolderPath = path
this.displayModalAddRequest(true)
},
onAddFolder({ name, path }) { onAddFolder({ name, path }) {
addGraphqlFolder(name, path) addGraphqlFolder(name, path)
this.displayModalAddFolder(false) this.displayModalAddFolder(false)
}, },
addFolder(payload) { addFolder(payload) {
const { path } = payload const { path } = payload
this.$data.editingFolderPath = path this.$data.editingFolderPath = path
this.displayModalAddFolder(true) this.displayModalAddFolder(true)
}, },
editFolder(payload) { editFolder(payload) {
skipping to change at line 288 skipping to change at line 336
this.$data.editingCollection = undefined this.$data.editingCollection = undefined
this.$data.editingCollectionIndex = undefined this.$data.editingCollectionIndex = undefined
this.$data.editingFolder = undefined this.$data.editingFolder = 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
}, },
duplicateRequest({ folderPath, request }) { duplicateRequest({ folderPath, request }) {
saveGraphqlRequestAs(folderPath, { saveGraphqlRequestAs(folderPath, {
...cloneDeep(request), ...cloneDeep(request),
name: `${request.name} - ${this.$t("action.duplicate")}`, name: `${request.name} - ${this.t("action.duplicate")}`,
}) })
}, },
}, },
}) })
</script> </script>
 End of changes. 29 change blocks. 
32 lines changed or deleted 80 lines changed or added

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