Selects for Screens in Events and Settings

packages/builder/src/builderStore/store/index.js

@@ -104,6 +104,10 @@ const setPackage = (store, initial) => async pkg => {
   initial.pages = pkg.pages
   initial.hasAppPackage = true
   initial.screens = values(pkg.screens)
+  initial.allScreens = [
+    ...Object.values(main_screens),
+    ...Object.values(unauth_screens),
+  ]
   initial.builtins = [getBuiltin("##builtin/screenslot")]
   initial.appInstances = pkg.application.instances
   initial.appId = pkg.application._id
@@ -112,6 +116,18 @@ const setPackage = (store, initial) => async pkg => {
   return initial
 }
 
+// const getAllScreens = store => async pkg => {
+//   const [main_screens, unauth_screens] = await Promise.all([
+//     api
+//       .get(`/_builder/api/${pkg.application._id}/pages/main/screens`)
+//       .then(r => r.json()),
+//     api
+//       .get(`/_builder/api/${pkg.application._id}/pages/unauthenticated/screens`)
+//       .then(r => r.json()),
+//   ])
+//   return { main_screens, unauth_screens }
+// }
+
 const saveScreen = store => screen => {
   store.update(state => {
     return _saveScreen(store, state, screen)
@@ -132,6 +148,7 @@ const _saveScreen = async (store, s, screen) => {
         innerState.pages[s.currentPageName]._screens = screens
         innerState.screens = screens
         innerState.currentPreviewItem = screen
+        innerState.allScreens = [...innerState.allScreens, screen]
         const safeProps = makePropsSafe(
           innerState.components[screen.props._component],
           screen.props

packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte

@@ -28,6 +28,13 @@
         <option value={workflow._id}>{workflow.name}</option>
       {/each}
     </Select>
+  {:else if parameter.name === 'url'}
+    <Select on:change bind:value={parameter.value}>
+      <option value="" />
+      {#each $store.allScreens as screen}
+        <option value={screen.route}>{screen.props._instanceName}</option>
+      {/each}
+    </Select>
   {:else}
     <Input
       name={parameter.name}

packages/builder/src/components/userInterface/ScreenSelect.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import { store } from "builderStore"
+  import OptionSelect from "./OptionSelect.svelte"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+
+  function handleSelect(selected) {
+    value = selected
+    dispatch("change", value)
+  }
+
+  let options = $store.allScreens.map(s => ({
+    value: s.route,
+    label: s.props._instanceName,
+  }))
+</script>
+
+<OptionSelect {options} {value} onChange={handleSelect} />

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -5,6 +5,7 @@ import ModelSelect from "components/userInterface/ModelSelect.svelte"
 import ModelViewSelect from "components/userInterface/ModelViewSelect.svelte"
 import ModelViewFieldSelect from "components/userInterface/ModelViewFieldSelect.svelte"
 import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
+import ScreenSelect from "components/userInterface/ScreenSelect.svelte"
 
 import { all } from "./propertyCategories.js"
 /* 
@@ -239,7 +240,7 @@ export default {
             design: { ...all },
             settings: [
               { label: "Text", key: "text", control: Input },
-              { label: "Url", key: "url", control: Input },
+              { label: "Url", key: "url", control: ScreenSelect },
               {
                 label: "Open New Tab",
                 key: "openInNewTab",