2021-11-17 01:18:13 +13:00
|
|
|
<script>
|
2021-11-17 23:24:14 +13:00
|
|
|
import ScreenDetailsModal from "components/design/NavigationPanel/ScreenDetailsModal.svelte"
|
2021-11-17 01:18:13 +13:00
|
|
|
import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
|
2022-04-06 21:10:53 +12:00
|
|
|
import DatasourceModal from "components/design/NavigationPanel/DatasourceModal.svelte"
|
2021-11-23 22:01:12 +13:00
|
|
|
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
|
2022-04-22 23:22:21 +12:00
|
|
|
import { Modal, ModalContent, Select, notifications } from "@budibase/bbui"
|
2022-03-03 08:10:18 +13:00
|
|
|
import { store, selectedAccessRole } from "builderStore"
|
2021-11-25 22:41:40 +13:00
|
|
|
import analytics, { Events } from "analytics"
|
2022-03-03 08:10:18 +13:00
|
|
|
import { get } from "svelte/store"
|
2022-04-06 21:10:53 +12:00
|
|
|
import getTemplates from "builderStore/store/screenTemplates"
|
2022-04-22 23:22:21 +12:00
|
|
|
import { tables, roles } from "stores/backend"
|
2021-11-17 01:18:13 +13:00
|
|
|
|
2022-03-03 08:10:18 +13:00
|
|
|
let pendingScreen
|
|
|
|
|
|
|
|
// Modal refs
|
2021-11-17 23:24:14 +13:00
|
|
|
let newScreenModal
|
|
|
|
let screenDetailsModal
|
2022-04-06 21:10:53 +12:00
|
|
|
let datasourceModal
|
2022-04-22 23:22:21 +12:00
|
|
|
let screenAccessRoleModal
|
|
|
|
|
|
|
|
// Cache variables for workflow
|
|
|
|
let screenAccessRole = $selectedAccessRole + ""
|
|
|
|
let selectedTemplates = null
|
|
|
|
let blankScreenUrl = null
|
|
|
|
|
|
|
|
let screenMode = null
|
2021-11-23 22:01:12 +13:00
|
|
|
|
2022-03-03 08:10:18 +13:00
|
|
|
// External handler to show the screen wizard
|
|
|
|
export const showModal = () => {
|
2022-04-22 23:22:21 +12:00
|
|
|
selectedTemplates = null
|
|
|
|
blankScreenUrl = null
|
|
|
|
screenMode = null
|
2022-03-03 08:10:18 +13:00
|
|
|
|
2022-04-22 23:22:21 +12:00
|
|
|
newScreenModal.show()
|
2022-03-03 08:10:18 +13:00
|
|
|
// Reset state when showing modal again
|
|
|
|
pendingScreen = null
|
2021-11-23 22:01:12 +13:00
|
|
|
}
|
2021-11-30 00:53:46 +13:00
|
|
|
|
2022-03-03 08:10:18 +13:00
|
|
|
// Creates an array of screens, checking and sanitising their URLs
|
2022-04-06 21:10:53 +12:00
|
|
|
const createScreens = async ({ screens, screenAccessRole }) => {
|
2022-03-03 08:10:18 +13:00
|
|
|
if (!screens?.length) {
|
|
|
|
return
|
2021-11-23 22:01:12 +13:00
|
|
|
}
|
|
|
|
|
2022-03-03 08:10:18 +13:00
|
|
|
try {
|
|
|
|
for (let screen of screens) {
|
|
|
|
// Check we aren't clashing with an existing URL
|
|
|
|
if (hasExistingUrl(screen.routing.route)) {
|
|
|
|
let suffix = 2
|
|
|
|
let candidateUrl = makeCandidateUrl(screen, suffix)
|
|
|
|
while (hasExistingUrl(candidateUrl)) {
|
|
|
|
candidateUrl = makeCandidateUrl(screen, ++suffix)
|
|
|
|
}
|
|
|
|
screen.routing.route = candidateUrl
|
2021-11-23 22:01:12 +13:00
|
|
|
}
|
|
|
|
|
2022-03-03 08:10:18 +13:00
|
|
|
// Sanitise URL
|
|
|
|
screen.routing.route = sanitizeUrl(screen.routing.route)
|
2021-11-23 22:01:12 +13:00
|
|
|
|
2022-03-03 08:10:18 +13:00
|
|
|
// Use the currently selected role
|
2022-04-06 21:10:53 +12:00
|
|
|
screen.routing.roleId = screenAccessRole
|
|
|
|
? screenAccessRole
|
|
|
|
: get(selectedAccessRole) || "BASIC"
|
2022-03-03 08:10:18 +13:00
|
|
|
|
|
|
|
// Create the screen
|
|
|
|
await store.actions.screens.save(screen)
|
2021-11-23 22:01:12 +13:00
|
|
|
|
2022-03-03 08:10:18 +13:00
|
|
|
// Analytics
|
|
|
|
if (screen.template) {
|
|
|
|
analytics.captureEvent(Events.SCREEN.CREATED, {
|
|
|
|
template: screen.template,
|
2022-04-07 20:35:12 +12:00
|
|
|
datasource: screen.datasource,
|
|
|
|
screenAccessRole,
|
2022-03-03 08:10:18 +13:00
|
|
|
})
|
|
|
|
}
|
2021-11-23 22:01:12 +13:00
|
|
|
|
2022-03-03 08:10:18 +13:00
|
|
|
// Add link in layout for list screens
|
|
|
|
if (screen.props._instanceName.endsWith("List")) {
|
2022-01-25 07:40:06 +13:00
|
|
|
await store.actions.components.links.save(
|
2022-03-03 08:10:18 +13:00
|
|
|
screen.routing.route,
|
|
|
|
screen.routing.route.split("/")[1]
|
2022-01-25 07:40:06 +13:00
|
|
|
)
|
|
|
|
}
|
2021-11-23 22:01:12 +13:00
|
|
|
}
|
2022-03-03 08:10:18 +13:00
|
|
|
} catch (error) {
|
|
|
|
notifications.error("Error creating screens")
|
2021-11-23 22:01:12 +13:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-03-03 08:10:18 +13:00
|
|
|
// Checks if any screens exist in the store with the given route and
|
|
|
|
// currently selected role
|
|
|
|
const hasExistingUrl = url => {
|
|
|
|
const roleId = get(selectedAccessRole) || "BASIC"
|
|
|
|
const screens = get(store).screens.filter(s => s.routing.roleId === roleId)
|
|
|
|
return !!screens.find(s => s.routing?.route === url)
|
2021-11-17 23:24:14 +13:00
|
|
|
}
|
|
|
|
|
2022-03-03 08:10:18 +13:00
|
|
|
// Constructs a candidate URL for a new screen, suffixing the base of the
|
|
|
|
// screen's URL with a given suffix.
|
|
|
|
// e.g. "/sales/:id" => "/sales-1/:id"
|
|
|
|
const makeCandidateUrl = (screen, suffix) => {
|
|
|
|
let url = screen.routing?.route || ""
|
|
|
|
if (url.startsWith("/")) {
|
|
|
|
url = url.slice(1)
|
|
|
|
}
|
|
|
|
if (!url.includes("/")) {
|
|
|
|
return `/${url}-${suffix}`
|
|
|
|
} else {
|
|
|
|
const split = url.split("/")
|
2022-03-09 03:14:57 +13:00
|
|
|
return `/${split[0]}-${suffix}/${split.slice(1).join("/")}`
|
2022-03-03 08:10:18 +13:00
|
|
|
}
|
2021-11-30 00:53:46 +13:00
|
|
|
}
|
|
|
|
|
2022-03-03 08:10:18 +13:00
|
|
|
// Handler for NewScreenModal
|
2022-04-06 21:10:53 +12:00
|
|
|
const confirmScreenSelection = async mode => {
|
2022-04-22 23:22:21 +12:00
|
|
|
screenMode = mode
|
|
|
|
|
2022-04-06 21:10:53 +12:00
|
|
|
if (mode == "autoCreate") {
|
|
|
|
datasourceModal.show()
|
|
|
|
} else {
|
|
|
|
let templates = getTemplates($store, $tables.list)
|
|
|
|
const blankScreenTemplate = templates.find(
|
|
|
|
t => t.id === "createFromScratch"
|
|
|
|
)
|
|
|
|
pendingScreen = blankScreenTemplate.create()
|
|
|
|
screenDetailsModal.show()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-22 23:22:21 +12:00
|
|
|
// Handler for DatasourceModal confirmation, move to screen access select
|
|
|
|
const confirmScreenDatasources = async ({ templates }) => {
|
|
|
|
selectedTemplates = templates
|
|
|
|
screenAccessRoleModal.show()
|
|
|
|
}
|
|
|
|
|
|
|
|
// Handler for Datasource Screen Creation
|
|
|
|
const completeDatasourceScreenCreation = async () => {
|
2022-04-06 21:10:53 +12:00
|
|
|
// // Handle template selection
|
2022-04-22 23:22:21 +12:00
|
|
|
if (selectedTemplates?.length > 1) {
|
2022-03-03 08:10:18 +13:00
|
|
|
// Autoscreens, so create immediately
|
2022-04-22 23:22:21 +12:00
|
|
|
const screens = selectedTemplates.map(template => {
|
2022-04-07 20:35:12 +12:00
|
|
|
let screenTemplate = template.create()
|
|
|
|
screenTemplate.datasource = template.datasource
|
|
|
|
return screenTemplate
|
|
|
|
})
|
2022-04-06 21:10:53 +12:00
|
|
|
await createScreens({ screens, screenAccessRole })
|
2021-11-17 23:24:14 +13:00
|
|
|
}
|
2021-11-17 01:18:13 +13:00
|
|
|
}
|
2022-03-03 08:10:18 +13:00
|
|
|
|
2022-04-22 23:22:21 +12:00
|
|
|
const confirmScreenBlank = async ({ screenUrl }) => {
|
|
|
|
blankScreenUrl = screenUrl
|
|
|
|
screenAccessRoleModal.show()
|
|
|
|
}
|
|
|
|
|
|
|
|
// Submit request for a blank screen
|
|
|
|
const confirmBlankScreenCreation = async ({
|
|
|
|
screenUrl,
|
|
|
|
screenAccessRole,
|
|
|
|
}) => {
|
2022-03-03 08:10:18 +13:00
|
|
|
if (!pendingScreen) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
pendingScreen.routing.route = screenUrl
|
2022-04-06 21:10:53 +12:00
|
|
|
await createScreens({ screens: [pendingScreen], screenAccessRole })
|
2022-03-03 08:10:18 +13:00
|
|
|
}
|
2022-04-22 23:22:21 +12:00
|
|
|
|
|
|
|
// Submit screen config for creation.
|
|
|
|
const confirmScreenCreation = async () => {
|
|
|
|
if (screenMode === "blankScreen") {
|
|
|
|
confirmBlankScreenCreation({
|
|
|
|
screenUrl: blankScreenUrl,
|
|
|
|
screenAccessRole,
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
completeDatasourceScreenCreation()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const roleSelectBack = () => {
|
|
|
|
if (screenMode === "blankScreen") {
|
2022-04-23 01:57:13 +12:00
|
|
|
screenDetailsModal.show()
|
2022-04-22 23:22:21 +12:00
|
|
|
} else {
|
|
|
|
datasourceModal.show()
|
|
|
|
}
|
|
|
|
}
|
2021-11-17 01:18:13 +13:00
|
|
|
</script>
|
|
|
|
|
2021-11-17 23:24:14 +13:00
|
|
|
<Modal bind:this={newScreenModal}>
|
2022-04-06 21:10:53 +12:00
|
|
|
<NewScreenModal onConfirm={confirmScreenSelection} />
|
|
|
|
</Modal>
|
|
|
|
|
|
|
|
<Modal bind:this={datasourceModal}>
|
|
|
|
<DatasourceModal
|
|
|
|
onConfirm={confirmScreenDatasources}
|
|
|
|
onCancel={() => newScreenModal.show()}
|
2022-04-22 23:22:21 +12:00
|
|
|
initalScreens={!selectedTemplates ? [] : [...selectedTemplates]}
|
2022-04-06 21:10:53 +12:00
|
|
|
/>
|
2021-11-17 01:18:13 +13:00
|
|
|
</Modal>
|
|
|
|
|
2022-04-22 23:22:21 +12:00
|
|
|
<Modal bind:this={screenAccessRoleModal}>
|
|
|
|
<ModalContent
|
|
|
|
title={"Create CRUD Screens"}
|
|
|
|
confirmText={"Done"}
|
|
|
|
cancelText={"Back"}
|
|
|
|
onConfirm={confirmScreenCreation}
|
|
|
|
onCancel={roleSelectBack}
|
|
|
|
>
|
|
|
|
Select which level of access you want your screens to have
|
|
|
|
<Select
|
|
|
|
bind:value={screenAccessRole}
|
|
|
|
on:change={() => {
|
|
|
|
analytics.captureEvent(Events.SCREEN.CREATE_ROLE_UPDATED, {
|
|
|
|
screenAccessRole,
|
|
|
|
})
|
|
|
|
}}
|
|
|
|
label="Access"
|
|
|
|
getOptionLabel={role => role.name}
|
|
|
|
getOptionValue={role => role._id}
|
|
|
|
getOptionColor={role => role.color}
|
|
|
|
options={$roles}
|
|
|
|
/>
|
|
|
|
</ModalContent>
|
|
|
|
</Modal>
|
|
|
|
|
2021-11-17 23:24:14 +13:00
|
|
|
<Modal bind:this={screenDetailsModal}>
|
2021-11-24 09:14:28 +13:00
|
|
|
<ScreenDetailsModal
|
2022-04-22 23:22:21 +12:00
|
|
|
onConfirm={confirmScreenBlank}
|
2022-03-03 08:10:18 +13:00
|
|
|
onCancel={() => newScreenModal.show()}
|
2022-04-22 23:22:21 +12:00
|
|
|
initialUrl={blankScreenUrl}
|
2021-11-24 09:14:28 +13:00
|
|
|
/>
|
2021-11-17 01:18:13 +13:00
|
|
|
</Modal>
|