Files
windmill/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
T
Faton Ramadani 78bab01226 feat(frontend): Extract publish to hub button (#620)
* feature(frontend): Extract publish to hub button

* feat(frontend): Extract Publish to hub button
2022-09-23 12:23:37 +02:00

60 lines
2.1 KiB
Svelte

<script lang="ts">
import Drawer from '$lib/components/common/drawer/Drawer.svelte'
import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
import Menu from '$lib/components/common/menu/Menu.svelte'
import MenuItem from '$lib/components/common/menu/MenuItem.svelte'
import FlowViewer from '$lib/components/FlowViewer.svelte'
import SimpleEditor from '$lib/components/SimpleEditor.svelte'
import { sendUserToast } from '$lib/utils'
import { faFileExport, faFileImport, faGlobe } from '@fortawesome/free-solid-svg-icons'
import Icon from 'svelte-awesome'
import { flowStore, initFlow } from '../flowStore'
import { cleanInputs } from '../utils'
let jsonSetterDrawer: Drawer
let jsonViewerDrawer: Drawer
let pendingJson: string
function importJson() {
Object.assign($flowStore, JSON.parse(pendingJson))
initFlow($flowStore)
sendUserToast('OpenFlow imported from JSON')
jsonSetterDrawer.toggleDrawer()
}
</script>
<Menu placement="bottom-end">
<button
slot="trigger"
class="flex items-center h-8 text-xs border focus:outline-none focus:ring-4 font-medium rounded-md text-gray-800 bg-white hover:bg-gray-100 focus:ring-gray-300 px-4 py-2"
>
Import/Export flow
</button>
<div class="divide-y divide-gray-200">
<MenuItem on:click={() => jsonSetterDrawer.toggleDrawer()}>
<Icon data={faFileImport} scale={0.6} class="inline mr-2" />
Import from a JSON OpenFlow
</MenuItem>
<MenuItem on:click={() => jsonViewerDrawer.toggleDrawer()}>
<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
Export to a JSON OpenFlow
</MenuItem>
</div>
</Menu>
<Drawer bind:this={jsonSetterDrawer} size="800px">
<DrawerContent title="Import JSON" on:close={() => jsonSetterDrawer.toggleDrawer()}>
<button class="default-button px-4 py-2 font-semibold" on:click={() => importJson()}>
Import
</button>
<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" />
</DrawerContent>
</Drawer>
<Drawer bind:this={jsonViewerDrawer} size="800px">
<DrawerContent title="See JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
<FlowViewer flow={cleanInputs($flowStore)} tab="json" />
</DrawerContent>
</Drawer>