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 |
|---|
"Fossies" - the Fresh Open Source Software Archive 