127 lines
3.5 KiB
Svelte
127 lines
3.5 KiB
Svelte
<script>
|
|
import { get } from "svelte/store"
|
|
import { get as deepGet, setWith } from "lodash"
|
|
import { Input, DetailSummary, notifications } from "@budibase/bbui"
|
|
import PropertyControl from "./PropertyControls/PropertyControl.svelte"
|
|
import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
|
|
import RoleSelect from "./PropertyControls/RoleSelect.svelte"
|
|
import { currentAsset, store } from "builderStore"
|
|
import { FrontendTypes } from "constants"
|
|
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
|
|
import { allScreens, selectedAccessRole } from "builderStore"
|
|
|
|
export let componentInstance
|
|
export let bindings
|
|
|
|
let errors = {}
|
|
|
|
const routeTaken = url => {
|
|
const roleId = get(selectedAccessRole) || "BASIC"
|
|
return get(allScreens).some(
|
|
screen =>
|
|
screen.routing.route.toLowerCase() === url.toLowerCase() &&
|
|
screen.routing.roleId === roleId
|
|
)
|
|
}
|
|
|
|
const roleTaken = roleId => {
|
|
const url = get(currentAsset)?.routing.route
|
|
return get(allScreens).some(
|
|
screen =>
|
|
screen.routing.route.toLowerCase() === url.toLowerCase() &&
|
|
screen.routing.roleId === roleId
|
|
)
|
|
}
|
|
|
|
const setAssetProps = (name, value, parser, validate) => {
|
|
if (parser) {
|
|
value = parser(value)
|
|
}
|
|
if (validate) {
|
|
const error = validate(value)
|
|
errors = {
|
|
...errors,
|
|
[name]: error,
|
|
}
|
|
if (error) {
|
|
return
|
|
}
|
|
} else {
|
|
errors = {
|
|
...errors,
|
|
[name]: null,
|
|
}
|
|
}
|
|
|
|
const selectedAsset = get(currentAsset)
|
|
store.update(state => {
|
|
if (
|
|
name === "_instanceName" &&
|
|
state.currentFrontEndType === FrontendTypes.SCREEN
|
|
) {
|
|
selectedAsset.props._instanceName = value
|
|
} else {
|
|
setWith(selectedAsset, name.split("."), value, Object)
|
|
}
|
|
return state
|
|
})
|
|
|
|
try {
|
|
store.actions.preview.saveSelected()
|
|
} catch (error) {
|
|
notifications.error("Error saving settings")
|
|
}
|
|
}
|
|
|
|
const screenSettings = [
|
|
{
|
|
key: "routing.route",
|
|
label: "Route",
|
|
control: Input,
|
|
parser: val => {
|
|
if (!val.startsWith("/")) {
|
|
val = "/" + val
|
|
}
|
|
return sanitizeUrl(val)
|
|
},
|
|
validate: val => {
|
|
const exisingValue = get(currentAsset)?.routing.route
|
|
if (val !== exisingValue && routeTaken(val)) {
|
|
return "That URL is already in use for this role"
|
|
}
|
|
return null
|
|
},
|
|
},
|
|
{
|
|
key: "routing.roleId",
|
|
label: "Access",
|
|
control: RoleSelect,
|
|
validate: val => {
|
|
const exisingValue = get(currentAsset)?.routing.roleId
|
|
if (val !== exisingValue && roleTaken(val)) {
|
|
return "That role is already in use for this URL"
|
|
}
|
|
return null
|
|
},
|
|
},
|
|
{ key: "layoutId", label: "Layout", control: LayoutSelect },
|
|
]
|
|
</script>
|
|
|
|
{#if $store.currentView !== "component" && $currentAsset && $store.currentFrontEndType === FrontendTypes.SCREEN}
|
|
<DetailSummary name="Screen" collapsible={false}>
|
|
{#each screenSettings as def (`${componentInstance._id}-${def.key}`)}
|
|
<PropertyControl
|
|
control={def.control}
|
|
label={def.label}
|
|
key={def.key}
|
|
error="asdasds"
|
|
value={deepGet($currentAsset, def.key)}
|
|
onChange={val => setAssetProps(def.key, val, def.parser, def.validate)}
|
|
{bindings}
|
|
props={{ error: errors[def.key] }}
|
|
/>
|
|
{/each}
|
|
</DetailSummary>
|
|
{/if}
|