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

feat: init new import and export ui

Browse Source
This commit is contained in:
liyasthomas
2021-12-22 16:56:23 +05:30
committed by Andrew Bastin
parent ac979239e8
commit b6e05d42f3
5 changed files with 109 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/hoppscotch-app/assets/icons/insomnia.svg Normal file
View File

@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M12 0C5.417 0 0 5.417 0 12s5.417 12 12 12 12-5.417 12-12S18.583 0 12 0zm0 2.478c5.256 0 9.522 4.266 9.522 9.522S17.256 21.522 12 21.522 2.478 17.256 2.478 12c0-.885.12-1.741.347-2.554a4.76 4.76 0 0 0 3.925 2.066 4.764 4.764 0 0 0 4.762-4.762 4.758 4.758 0 0 0-2.067-3.925A9.526 9.526 0 0 1 12 2.478Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 398 B

1
packages/hoppscotch-app/assets/icons/postman.svg Normal file
View File

@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M13.527.099C6.955-.744.942 3.9.099 10.473c-.843 6.572 3.8 12.584 10.373 13.428 6.573.843 12.587-3.801 13.428-10.374C24.744 6.955 20.101.943 13.527.099zm2.471 7.485a.855.855 0 0 0-.593.25l-4.453 4.453-.307-.307-.643-.643c4.389-4.376 5.18-4.418 5.996-3.753zm-4.863 4.861 4.44-4.44a.62.62 0 1 1 .847.903l-4.699 4.125-.588-.588zm.33.694-1.1.238a.06.06 0 0 1-.067-.032.06.06 0 0 1 .01-.073l.645-.645.512.512zm-2.803-.459 1.172-1.172.879.878-1.979.426a.074.074 0 0 1-.085-.039.072.072 0 0 1 .013-.093zm-3.646 6.058a.076.076 0 0 1-.069-.083.077.077 0 0 1 .022-.046h.002l.946-.946 1.222 1.222-2.123-.147zm2.425-1.256a.228.228 0 0 0-.117.256l.203.865a.125.125 0 0 1-.211.117h-.003l-.934-.934-.294-.295 3.762-3.758 1.82-.393.874.874c-1.255 1.102-2.971 2.201-5.1 3.268zm5.279-3.428h-.002l-.839-.839 4.699-4.125a.952.952 0 0 0 .119-.127c-.148 1.345-2.029 3.245-3.977 5.091zm3.657-6.46-.003-.002a1.822 1.822 0 0 1 2.459-2.684l-1.61 1.613a.119.119 0 0 0 0 .169l1.247 1.247a1.817 1.817 0 0 1-2.093-.343zm2.578 0a1.714 1.714 0 0 1-.271.218h-.001l-1.207-1.207 1.533-1.533c.661.72.637 1.832-.054 2.522zm-.1-1.544a.143.143 0 0 0-.053.157.416.416 0 0 1-.053.45.14.14 0 0 0 .023.197.141.141 0 0 0 .084.03.14.14 0 0 0 .106-.05.691.691 0 0 0 .087-.751.138.138 0 0 0-.194-.033z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

175
packages/hoppscotch-app/components/collections/ImportExport.vue
View File

@@ -18,103 +18,53 @@
}
"
/>
<span>
<tippy
v-if="
mode == 'import_export' && collectionsType.type == 'my-collections'
"
ref="options"
interactive
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.more')"
svg="more-vertical"
/>
</template>
<SmartItem
icon="assignment_returned"
:label="t('import.from_gist')"
@click.native="
() => {
readCollectionGist()
options.tippy().hide()
}
"
/>
<span
v-tippy="{ theme: 'tooltip' }"
:title="
!currentUser
? `${t('export.require_github')}`
: currentUser.provider !== 'github.com'
? `${t('export.require_github')}`
: undefined
"
>
<SmartItem
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="t('export.create_secret_gist')"
@click.native="
() => {
createCollectionGist()
options.tippy().hide()
}
"
/>
</span>
</tippy>
</span>
</template>
<template #body>
<div v-if="mode == 'import_export'" class="flex flex-col space-y-2 px-2">
<SmartItem
v-tippy="{ theme: 'tooltip' }"
:title="t('action.preserve_current')"
svg="folder-plus"
:label="t('import.json')"
@click.native="openDialogChooseFileToImportFrom"
/>
<input
ref="inputChooseFileToImportFrom"
class="input"
type="file"
accept="application/json"
@change="importFromJSON"
/>
<SmartItem
v-if="collectionsType.type == 'team-collections'"
v-tippy="{ theme: 'tooltip' }"
:title="t('action.preserve_current')"
svg="user"
:label="t('import.from_my_collections')"
@click.native="mode = 'import_from_my_collections'"
/>
<SmartItem
v-tippy="{ theme: 'tooltip' }"
:title="t('action.replace_current')"
svg="file"
:label="t('action.replace_json')"
@click.native="openDialogChooseFileToReplaceWith"
/>
<input
ref="inputChooseFileToReplaceWith"
class="input"
type="file"
accept="application/json"
@change="replaceWithJSON"
/>
<SmartExpand>
<template #body>
<SmartItem
svg="folder-plus"
:label="t('import.json')"
@click.native="openDialogChooseFileToImportFrom"
/>
<input
ref="inputChooseFileToImportFrom"
class="input"
type="file"
accept="application/json"
@change="importFromJSON"
/>
<SmartItem
v-if="collectionsType.type == 'team-collections'"
v-tippy="{ theme: 'tooltip' }"
:title="t('action.preserve_current')"
svg="user"
:label="t('import.from_my_collections')"
@click.native="mode = 'import_from_my_collections'"
/>
<SmartItem svg="link-2" :label="t('import.from_url')" />
<SmartItem
svg="github"
:label="t('import.from_gist')"
@click.native="
() => {
readCollectionGist()
}
"
/>
<SmartItem svg="file" :label="t('import.from_openapi')" />
<SmartItem svg="insomnia" :label="t('import.from_insomnia')" />
<SmartItem svg="postman" :label="t('import.from_postman')" />
<input
ref="inputChooseFileToReplaceWith"
class="input"
type="file"
accept="application/json"
@change="replaceWithJSON"
/>
</template>
</SmartExpand>
<hr />
<SmartItem
v-tippy="{ theme: 'tooltip' }"
@@ -123,6 +73,34 @@
:label="t('export.as_json')"
@click.native="exportJSON"
/>
<span
v-tippy="{ theme: 'tooltip' }"
:title="
!currentUser
? `${t('export.require_github')}`
: currentUser.provider !== 'github.com'
? `${t('export.require_github')}`
: undefined
"
class="flex"
>
<SmartItem
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
svg="github"
:label="t('export.create_secret_gist')"
@click.native="
() => {
createCollectionGist()
}
"
/>
</span>
</div>
<div
v-if="mode == 'import_from_my_collections'"
@@ -224,7 +202,6 @@ const mySelectedCollectionID = ref(undefined)
const collectionJson = ref("")
// Template refs
const options = ref<any>()
const inputChooseFileToReplaceWith = ref<HTMLInputElement>()
const inputChooseFileToImportFrom = ref<HTMLInputElement>()
@@ -319,10 +296,10 @@ const hideModal = () => {
emit("hide-modal")
}
const openDialogChooseFileToReplaceWith = () => {
if (inputChooseFileToReplaceWith.value)
inputChooseFileToReplaceWith.value.click()
}
// const openDialogChooseFileToReplaceWith = () => {
// if (inputChooseFileToReplaceWith.value)
// inputChooseFileToReplaceWith.value.click()
// }
const openDialogChooseFileToImportFrom = () => {
if (inputChooseFileToImportFrom.value)

26
packages/hoppscotch-app/components/smart/Expand.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<div
class="relative flex flex-col space-y-2 overflow-hidden"
:class="expand ? 'h-full' : 'max-h-32'"
>
<slot name="body"></slot>
<div class="flex sticky bottom-0 inset-x-0 items-center justify-center">
<ButtonSecondary
:icon="expand ? 'expand_less' : 'expand_more'"
:label="expand ? t('action.less') : t('action.more')"
filled
rounded
@click.native="expand = !expand"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "@nuxtjs/composition-api"
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
const expand = ref(false)
</script>

8
packages/hoppscotch-app/locales/en.json
View File

@@ -16,13 +16,11 @@
"label": "Label",
"learn_more": "Learn more",
"more": "More",
"less": "Less",
"new": "New",
"no": "No",
"preserve_current": "Preserve current",
"prettify": "Prettify",
"remove": "Remove",
"replace_current": "Replace current",
"replace_json": "Replace with JSON",
"restore": "Restore",
"save": "Save",
"search": "Search",
@@ -232,7 +230,11 @@
"curl": "Import cURL",
"failed": "Error while importing: format not recognized",
"from_gist": "Import from Gist",
"from_insomnia": "Import from Insomnia",
"from_my_collections": "Import from My Collections",
"from_openapi": "Import from OpenAPI",
"from_postman": "Import from Postman",
"from_url": "Import from URL",
"gist_url": "Enter Gist URL",
"json": "Import from JSON",
"title": "Import"