2019-08-07 20:03:49 +12:00
|
|
|
<script>
|
2021-06-08 22:42:39 +12:00
|
|
|
import { store, allScreens, selectedAccessRole } from "builderStore"
|
2021-08-26 21:11:48 +12:00
|
|
|
import { tables } from "stores/backend"
|
|
|
|
import { roles } from "stores/backend"
|
2020-12-10 03:53:17 +13:00
|
|
|
import { Input, Select, ModalContent, Toggle } from "@budibase/bbui"
|
2020-10-09 03:46:29 +13:00
|
|
|
import getTemplates from "builderStore/store/screenTemplates"
|
2021-09-22 07:21:15 +12:00
|
|
|
import analytics, { Events } from "analytics"
|
2021-09-17 21:43:27 +12:00
|
|
|
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
|
2020-10-09 02:53:06 +13:00
|
|
|
|
|
|
|
const CONTAINER = "@budibase/standard-components/container"
|
|
|
|
|
2020-02-03 22:50:30 +13:00
|
|
|
let name = ""
|
2020-08-19 04:14:35 +12:00
|
|
|
let routeError
|
2020-10-09 02:53:06 +13:00
|
|
|
let baseComponent = CONTAINER
|
2020-10-09 23:58:46 +13:00
|
|
|
let templateIndex
|
2020-10-09 03:46:29 +13:00
|
|
|
let draftScreen
|
2020-10-18 06:20:31 +13:00
|
|
|
let createLink = true
|
2021-06-08 22:42:39 +12:00
|
|
|
let roleId = $selectedAccessRole || "BASIC"
|
2020-02-26 04:21:23 +13:00
|
|
|
|
2021-08-26 21:11:48 +12:00
|
|
|
$: templates = getTemplates($store, $tables.list)
|
2020-11-06 06:47:27 +13:00
|
|
|
$: route = !route && $allScreens.length === 0 ? "*" : route
|
2020-10-09 23:58:46 +13:00
|
|
|
$: {
|
|
|
|
if (templates && templateIndex === undefined) {
|
|
|
|
templateIndex = 0
|
|
|
|
templateChanged(0)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-05-04 22:32:22 +12:00
|
|
|
const templateChanged = newTemplateIndex => {
|
2020-10-09 23:58:46 +13:00
|
|
|
if (newTemplateIndex === undefined) return
|
2020-10-09 03:46:29 +13:00
|
|
|
draftScreen = templates[newTemplateIndex].create()
|
|
|
|
if (draftScreen.props._instanceName) {
|
|
|
|
name = draftScreen.props._instanceName
|
|
|
|
}
|
|
|
|
|
|
|
|
if (draftScreen.props._component) {
|
|
|
|
baseComponent = draftScreen.props._component
|
|
|
|
}
|
|
|
|
|
2020-11-14 04:35:20 +13:00
|
|
|
if (draftScreen.routing) {
|
|
|
|
route = draftScreen.routing.route
|
2020-10-09 03:46:29 +13:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-18 06:20:31 +13:00
|
|
|
const save = async () => {
|
2020-08-19 07:59:34 +12:00
|
|
|
if (!route) {
|
2020-12-10 07:39:49 +13:00
|
|
|
routeError = "URL is required"
|
2020-08-19 04:14:35 +12:00
|
|
|
} else {
|
2020-12-10 07:39:49 +13:00
|
|
|
if (routeExists(route, roleId)) {
|
|
|
|
routeError = "This URL is already taken for this access role"
|
2020-08-19 04:14:35 +12:00
|
|
|
} else {
|
|
|
|
routeError = ""
|
|
|
|
}
|
|
|
|
}
|
2020-10-09 02:53:06 +13:00
|
|
|
|
|
|
|
if (routeError) return false
|
|
|
|
|
2020-10-09 03:46:29 +13:00
|
|
|
draftScreen.props._instanceName = name
|
|
|
|
draftScreen.props._component = baseComponent
|
2020-12-10 03:53:17 +13:00
|
|
|
draftScreen.routing = { route, roleId }
|
2020-10-09 03:46:29 +13:00
|
|
|
|
2021-01-16 03:23:27 +13:00
|
|
|
await store.actions.screens.create(draftScreen)
|
2020-10-18 06:20:31 +13:00
|
|
|
if (createLink) {
|
2020-11-06 00:44:18 +13:00
|
|
|
await store.actions.components.links.save(route, name)
|
2020-10-18 06:20:31 +13:00
|
|
|
}
|
2020-11-21 00:41:17 +13:00
|
|
|
await store.actions.routing.fetch()
|
2020-10-09 03:46:29 +13:00
|
|
|
|
2020-10-13 03:51:03 +13:00
|
|
|
if (templateIndex !== undefined) {
|
|
|
|
const template = templates[templateIndex]
|
2021-09-22 07:21:15 +12:00
|
|
|
analytics.captureEvent(Events.SCREEN.CREATED, {
|
2020-10-13 03:51:03 +13:00
|
|
|
template: template.id || template.name,
|
|
|
|
})
|
|
|
|
}
|
2020-02-03 22:50:30 +13:00
|
|
|
}
|
|
|
|
|
2020-12-10 07:39:49 +13:00
|
|
|
const routeExists = (route, roleId) => {
|
2020-11-06 06:47:27 +13:00
|
|
|
return $allScreens.some(
|
2021-05-04 22:32:22 +12:00
|
|
|
screen =>
|
2020-12-10 07:39:49 +13:00
|
|
|
screen.routing.route.toLowerCase() === route.toLowerCase() &&
|
|
|
|
screen.routing.roleId === roleId
|
2020-05-07 21:53:34 +12:00
|
|
|
)
|
2020-02-25 23:01:07 +13:00
|
|
|
}
|
|
|
|
|
2021-05-04 22:32:22 +12:00
|
|
|
const routeChanged = event => {
|
2021-04-20 23:48:37 +12:00
|
|
|
if (!event.detail.startsWith("/")) {
|
|
|
|
route = "/" + event.detail
|
2020-02-25 23:01:07 +13:00
|
|
|
}
|
2021-09-17 21:43:27 +12:00
|
|
|
route = sanitizeUrl(route)
|
2020-02-25 23:01:07 +13:00
|
|
|
}
|
2019-08-07 20:03:49 +12:00
|
|
|
</script>
|
|
|
|
|
2020-10-08 21:34:22 +13:00
|
|
|
<ModalContent title="New Screen" confirmText="Create Screen" onConfirm={save}>
|
2020-10-09 04:15:12 +13:00
|
|
|
<Select
|
|
|
|
label="Choose a Template"
|
|
|
|
bind:value={templateIndex}
|
2021-05-04 22:32:22 +12:00
|
|
|
on:change={ev => templateChanged(ev.detail)}
|
2021-04-20 23:48:37 +12:00
|
|
|
options={templates}
|
|
|
|
placeholder={null}
|
2021-05-04 22:32:22 +12:00
|
|
|
getOptionLabel={x => x.name}
|
2021-05-04 22:04:42 +12:00
|
|
|
getOptionValue={(x, idx) => idx}
|
|
|
|
/>
|
2020-10-05 23:13:09 +13:00
|
|
|
<Input label="Name" bind:value={name} />
|
|
|
|
<Input
|
|
|
|
label="Url"
|
|
|
|
error={routeError}
|
|
|
|
bind:value={route}
|
2021-05-04 22:04:42 +12:00
|
|
|
on:change={routeChanged}
|
|
|
|
/>
|
2021-04-20 23:48:37 +12:00
|
|
|
<Select
|
|
|
|
label="Access"
|
|
|
|
bind:value={roleId}
|
|
|
|
options={$roles}
|
2021-05-04 22:32:22 +12:00
|
|
|
getOptionLabel={x => x.name}
|
|
|
|
getOptionValue={x => x._id}
|
2021-05-04 22:04:42 +12:00
|
|
|
/>
|
2021-04-20 23:48:37 +12:00
|
|
|
<Toggle text="Create link in navigation bar" bind:value={createLink} />
|
2020-10-08 21:34:22 +13:00
|
|
|
</ModalContent>
|