diff --git a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte index ded80a7d5c..c5157101b9 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte @@ -8,14 +8,41 @@ 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 - function setAssetProps(name, value, parser) { - if (parser && typeof parser === "function") { + let errors = {} + + const routeExists = url => { + const roleId = get(selectedAccessRole) || "BASIC" + 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 => { @@ -38,7 +65,6 @@ } const screenSettings = [ - // { key: "description", label: "Description", control: Input }, { key: "routing.route", label: "Route", @@ -49,6 +75,13 @@ } return sanitizeUrl(val) }, + validate: val => { + const exisingValue = deepGet($currentAsset, "routing.route") + if (val !== exisingValue && routeExists(val)) { + return "That URL is already in use" + } + return null + }, }, { key: "routing.roleId", label: "Access", control: RoleSelect }, { key: "layoutId", label: "Layout", control: LayoutSelect }, @@ -62,9 +95,11 @@ control={def.control} label={def.label} key={def.key} + error="asdasds" value={deepGet($currentAsset, def.key)} - onChange={val => setAssetProps(def.key, val, def.parser)} + onChange={val => setAssetProps(def.key, val, def.parser, def.validate)} {bindings} + props={{ error: errors[def.key] }} /> {/each}