Improve route handling when creating new components and screens

This commit is contained in:
Andrew Kingston 2023-08-23 11:03:00 +01:00
parent f72f3f88f7
commit 607a36e2e4
4 changed files with 24 additions and 8 deletions

View File

@ -67,7 +67,8 @@
}
}
$goto(`./${screenId}`)
// Select and go to new screen
store.actions.screens.select(screenId)
} catch (error) {
console.log(error)
notifications.error("Error creating screens")

View File

@ -56,6 +56,11 @@ export const syncURLToState = options => {
// Navigate to a certain URL
const gotoUrl = (url, params) => {
// Clean URL
if (url?.endsWith("/index")) {
url = url.replace("/index", "")
}
// Allow custom URL handling
if (beforeNavigate) {
const res = beforeNavigate(url, params)
if (res?.url) {
@ -65,10 +70,6 @@ export const syncURLToState = options => {
params = res.params
}
}
// Clean URL
if (url?.endsWith("/index")) {
url = url.replace("/index", "")
}
log("Navigating to", url, "with params", params)
cachedGoto(url, params)
}

View File

@ -1,12 +1,12 @@
<script>
import ScreenList from "./ScreenList/index.svelte"
import ComponentList from "./ComponentList/index.svelte"
import { isActive } from "@roxi/routify"
import { selectedScreen } from "builderStore"
</script>
<div class="panel">
<ScreenList />
{#if $isActive("./:componentId")}
{#if $selectedScreen}
<ComponentList />
{/if}
</div>

View File

@ -11,6 +11,7 @@
import DropdownMenu from "./DropdownMenu.svelte"
import NewScreen from "components/design/NewScreen/index.svelte"
import { onMount, tick } from "svelte"
import { beforeUrlChange } from "@roxi/routify"
let newScreen = false
let search = false
@ -25,6 +26,14 @@
$: filteredScreens = getFilteredScreens($sortedScreens, searchValue)
// Close new screen when URL changes
$beforeUrlChange(() => {
if (newScreen) {
newScreen = false
}
return true
})
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
const openSearch = async () => {
@ -176,7 +185,12 @@
</div>
<div class="newScreen" class:newScreenVisible={newScreen}>
<NewScreen onClose={() => (newScreen = false)} />
<NewScreen
onClose={() => {
console.log("close")
newScreen = false
}}
/>
</div>
<style>