106 lines
2.8 KiB
Svelte
106 lines
2.8 KiB
Svelte
<script>
|
|
import { goto } from "@roxi/routify"
|
|
import { store, allScreens } from "builderStore"
|
|
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
|
import {
|
|
ActionMenu,
|
|
MenuItem,
|
|
Icon,
|
|
Modal,
|
|
Helpers,
|
|
notifications,
|
|
} from "@budibase/bbui"
|
|
import ScreenDetailsModal from "../ScreenDetailsModal.svelte"
|
|
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
|
|
import analytics, { Events } from "analytics"
|
|
import { makeComponentUnique } from "builderStore/componentUtils"
|
|
|
|
export let screenId
|
|
|
|
let confirmDeleteDialog
|
|
let screenDetailsModal
|
|
|
|
$: screen = $allScreens.find(screen => screen._id === screenId)
|
|
|
|
const duplicateScreen = () => {
|
|
screenDetailsModal.show()
|
|
}
|
|
|
|
const createDuplicateScreen = async ({ screenName, screenUrl }) => {
|
|
// Create a dupe and ensure it is unique
|
|
let duplicateScreen = Helpers.cloneDeep(screen)
|
|
delete duplicateScreen._id
|
|
delete duplicateScreen._rev
|
|
makeComponentUnique(duplicateScreen.props)
|
|
|
|
// Attach the new name and URL
|
|
duplicateScreen.routing.route = sanitizeUrl(screenUrl)
|
|
duplicateScreen.props._instanceName = screenName
|
|
|
|
try {
|
|
// Create the screen
|
|
await store.actions.screens.save(duplicateScreen)
|
|
|
|
// Analytics
|
|
if (screen.template) {
|
|
analytics.captureEvent(Events.SCREEN.CREATED, {
|
|
template: "createFromScratch",
|
|
})
|
|
}
|
|
} catch (error) {
|
|
notifications.error("Error duplicating screen")
|
|
console.log(error)
|
|
}
|
|
}
|
|
|
|
const deleteScreen = async () => {
|
|
try {
|
|
await store.actions.screens.delete(screen)
|
|
$goto("../")
|
|
notifications.success("Deleted screen successfully.")
|
|
} catch (err) {
|
|
notifications.error("Error deleting screen")
|
|
}
|
|
}
|
|
|
|
const pasteComponent = mode => {
|
|
try {
|
|
store.actions.components.paste(screen?.props, mode)
|
|
} catch (error) {
|
|
notifications.error("Error saving component")
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<ActionMenu>
|
|
<div slot="control" class="icon">
|
|
<Icon size="S" hoverable name="MoreSmallList" />
|
|
</div>
|
|
<MenuItem icon="Duplicate" on:click={duplicateScreen}>Duplicate</MenuItem>
|
|
<MenuItem
|
|
icon="ShowOneLayer"
|
|
on:click={() => pasteComponent("inside")}
|
|
disabled={!$store.componentToPaste}
|
|
>
|
|
Paste inside
|
|
</MenuItem>
|
|
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
|
</ActionMenu>
|
|
|
|
<ConfirmDialog
|
|
bind:this={confirmDeleteDialog}
|
|
title="Confirm Deletion"
|
|
body={"Are you sure you wish to delete this screen?"}
|
|
okText="Delete screen"
|
|
onOk={deleteScreen}
|
|
/>
|
|
|
|
<Modal bind:this={screenDetailsModal}>
|
|
<ScreenDetailsModal
|
|
onConfirm={createDuplicateScreen}
|
|
screenName={screen?.props._instanceName}
|
|
screenUrl={screen?.routing.route}
|
|
confirmText="Duplicate"
|
|
/>
|
|
</Modal>
|