From 1e59576a309eb8c9cf36c7a4f35e8b8f656df989 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 25 Apr 2022 19:33:43 +0100 Subject: [PATCH] Update routify structure to prevent remounting full page when changing URL params and update nav item wrapping --- .../bbui/src/StatusLight/StatusLight.svelte | 5 ++ packages/builder/src/builderStore/index.js | 16 ++---- .../src/builderStore/store/frontend.js | 3 +- .../popovers/EditTablePopover.svelte | 4 +- .../src/components/common/NavItem.svelte | 27 +++++---- .../design/AppPanel/AppPreview.svelte | 4 +- .../FrontendNavigatePane.svelte | 9 +-- .../NavigationPanel/NavigationPanel.svelte | 3 +- .../ScreenSettingsSection.svelte | 6 +- .../design/SettingsPanel/SettingsPanel.svelte | 55 +++++++++++++++++++ packages/builder/src/helpers/urlStateSync.js | 20 ++++--- .../design/[screenId]/index.svelte | 5 -- .../design/[screenId]/screens/_layout.svelte | 1 - .../design/{[screenId] => }/_layout.svelte | 24 +------- .../{[screenId] => }/components/index.svelte | 0 .../app/[application]/design/index.svelte | 16 +----- .../{[screenId] => }/layouts/index.svelte | 0 .../{[screenId] => }/navigation/index.svelte | 0 .../[screenId].svelte} | 49 ++++++++++++----- .../_components/DatasourceModal.svelte | 0 .../screens/_components/NewScreenModal.svelte | 0 .../_components/ScreenDetailsModal.svelte | 4 +- .../_components/ScreenDropdownMenu.svelte | 4 +- .../screens/_components/ScreenWizard.svelte | 0 .../_old/[assetType]/[asset]/_fallback.svelte | 0 .../screens/_old/[assetType]/_layout.svelte | 7 +-- .../screens/_old/[assetType]/index.svelte | 0 .../[application]/design/screens/index.svelte | 19 +++++++ .../{[screenId] => }/theme/index.svelte | 0 29 files changed, 166 insertions(+), 115 deletions(-) create mode 100644 packages/builder/src/components/design/SettingsPanel/SettingsPanel.svelte delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_layout.svelte rename packages/builder/src/pages/builder/app/[application]/design/{[screenId] => }/_layout.svelte (70%) rename packages/builder/src/pages/builder/app/[application]/design/{[screenId] => }/components/index.svelte (100%) rename packages/builder/src/pages/builder/app/[application]/design/{[screenId] => }/layouts/index.svelte (100%) rename packages/builder/src/pages/builder/app/[application]/design/{[screenId] => }/navigation/index.svelte (100%) rename packages/builder/src/pages/builder/app/[application]/design/{[screenId]/screens/index.svelte => screens/[screenId].svelte} (70%) rename packages/builder/src/pages/builder/app/[application]/design/{[screenId] => }/screens/_components/DatasourceModal.svelte (100%) rename packages/builder/src/pages/builder/app/[application]/design/{[screenId] => }/screens/_components/NewScreenModal.svelte (100%) rename packages/builder/src/pages/builder/app/[application]/design/{[screenId] => }/screens/_components/ScreenDetailsModal.svelte (94%) rename packages/builder/src/pages/builder/app/[application]/design/{[screenId] => }/screens/_components/ScreenDropdownMenu.svelte (96%) rename packages/builder/src/pages/builder/app/[application]/design/{[screenId] => }/screens/_components/ScreenWizard.svelte (100%) rename packages/builder/src/pages/builder/app/[application]/design/{[screenId] => }/screens/_old/[assetType]/[asset]/_fallback.svelte (100%) rename packages/builder/src/pages/builder/app/[application]/design/{[screenId] => }/screens/_old/[assetType]/_layout.svelte (98%) rename packages/builder/src/pages/builder/app/[application]/design/{[screenId] => }/screens/_old/[assetType]/index.svelte (100%) create mode 100644 packages/builder/src/pages/builder/app/[application]/design/screens/index.svelte rename packages/builder/src/pages/builder/app/[application]/design/{[screenId] => }/theme/index.svelte (100%) diff --git a/packages/bbui/src/StatusLight/StatusLight.svelte b/packages/bbui/src/StatusLight/StatusLight.svelte index 8d88e7973a..eb065ab99a 100644 --- a/packages/bbui/src/StatusLight/StatusLight.svelte +++ b/packages/bbui/src/StatusLight/StatusLight.svelte @@ -39,6 +39,7 @@ class:spectrum-StatusLight--negative={negative} class:spectrum-StatusLight--disabled={disabled} class:spectrum-StatusLight--active={active} + class:withText={!!$$slots.default} > @@ -49,6 +50,10 @@ flex-direction: row; justify-content: center; align-items: center; + --spectrum-statuslight-info-text-gap: 4px; + } + .spectrum-StatusLight.withText::before { + margin-right: 12px; } .custom::before { background: var(--color) !important; diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js index 619bdd94a1..3fb8eb7ab6 100644 --- a/packages/builder/src/builderStore/index.js +++ b/packages/builder/src/builderStore/index.js @@ -9,10 +9,13 @@ export const store = getFrontendStore() export const automationStore = getAutomationStore() export const themeStore = getThemeStore() +export const selectedScreen = derived(store, $store => { + return $store.screens.find(screen => screen._id === $store.selectedScreenId) +}) + export const currentAsset = derived(store, $store => { const type = $store.currentFrontEndType if (type === FrontendTypes.SCREEN) { - return $store.screens.find(screen => screen._id === $store.selectedScreenId) } else if (type === FrontendTypes.LAYOUT) { return $store.layouts.find(layout => layout._id === $store.selectedLayoutId) } @@ -39,21 +42,10 @@ export const selectedComponentPath = derived( } ) -export const currentAssetId = derived(store, $store => { - return $store.currentFrontEndType === FrontendTypes.SCREEN - ? $store.selectedScreenId - : $store.selectedLayoutId -}) - export const currentAssetName = derived(currentAsset, $currentAsset => { return $currentAsset?.name }) -// leave this as before for consistency -export const allScreens = derived(store, $store => { - return $store.screens -}) - export const mainLayout = derived(store, $store => { return $store.layouts?.find( layout => layout._id === LAYOUT_NAMES.MASTER.PRIVATE diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 909bbcf9f8..fe6721324e 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -1,7 +1,6 @@ import { get, writable } from "svelte/store" import { cloneDeep } from "lodash/fp" import { - allScreens, currentAsset, mainLayout, selectedComponent, @@ -148,7 +147,7 @@ export const getFrontendStore = () => { screens: { select: screenId => { store.update(state => { - let screens = get(allScreens) + let screens = state.screens let screen = screens.find(screen => screen._id === screenId) || screens[0] if (!screen) return state diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte index b4035ba6e4..c23dcc1235 100644 --- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte +++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte @@ -1,6 +1,6 @@ + +
+ {#if title} +
+ {#if icon} + + {/if} +
+ {title || ""} +
+
+ {/if} + +
+ + diff --git a/packages/builder/src/helpers/urlStateSync.js b/packages/builder/src/helpers/urlStateSync.js index cbe4ad0e4a..2e043fbcf5 100644 --- a/packages/builder/src/helpers/urlStateSync.js +++ b/packages/builder/src/helpers/urlStateSync.js @@ -2,7 +2,7 @@ import { get } from "svelte/store" import { isChangingPage } from "@roxi/routify" export const syncURLToState = options => { - const { keys, params, store, goto, redirect } = options || {} + const { keys, params, store, goto, redirect, baseUrl = "." } = options || {} if ( !keys?.length || !params?.subscribe || @@ -22,13 +22,15 @@ export const syncURLToState = options => { let cachedGoto = get(goto) let cachedRedirect = get(redirect) let hydrated = false + let debug = false + const log = (...params) => debug && console.log(...params) // Navigate to a certain URL const gotoUrl = url => { if (get(isChangingPage) && hydrated) { return } - console.log("Navigating to", url) + log("Navigating to", url) cachedGoto(url) } @@ -37,7 +39,7 @@ export const syncURLToState = options => { if (get(isChangingPage) && hydrated) { return } - console.log("Redirecting to", url) + log("Redirecting to", url) cachedRedirect(url) } @@ -50,7 +52,7 @@ export const syncURLToState = options => { const urlValue = params?.[key.url] const stateValue = state?.[key.state] if (urlValue && urlValue !== stateValue) { - console.log( + log( `state.${key.state} (${stateValue}) <= url.${key.url} (${urlValue})` ) stateUpdates.push(state => { @@ -58,7 +60,7 @@ export const syncURLToState = options => { }) if (key.validate && key.fallbackUrl) { if (!key.validate(urlValue)) { - console.log("Invalid URL param!") + log("Invalid URL param!") redirectUrl(key.fallbackUrl) hydrated = true return @@ -77,7 +79,7 @@ export const syncURLToState = options => { } // Apply the required state updates - console.log("Performing", stateUpdates.length, "state updates") + log("Performing", stateUpdates.length, "state updates") store.update(state => { for (let update of stateUpdates) { update(state) @@ -89,7 +91,7 @@ export const syncURLToState = options => { // Updates the URL with new state values const mapStateToUrl = state => { // Determine new URL while checking for changes - let url = ".." + let url = baseUrl let needsUpdate = false for (let key of keys) { const urlValue = cachedParams?.[key.url] @@ -97,12 +99,12 @@ export const syncURLToState = options => { url += `/${stateValue}` if (stateValue !== urlValue) { needsUpdate = true - console.log( + log( `url.${key.url} (${urlValue}) <= state.${key.state} (${stateValue})` ) if (key.validate && key.fallbackUrl) { if (!key.validate(stateValue)) { - console.log("Invalid state param!") + log("Invalid state param!") redirectUrl(key.fallbackUrl) return } diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte deleted file mode 100644 index d70922c14a..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_layout.svelte deleted file mode 100644 index 4fa864ce7a..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_layout.svelte +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte similarity index 70% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte rename to packages/builder/src/pages/builder/app/[application]/design/_layout.svelte index ad17c127b6..01b21d8cc5 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte @@ -1,30 +1,8 @@ -
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/components/index.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte rename to packages/builder/src/pages/builder/app/[application]/design/components/index.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/index.svelte index ff5cb19fdc..d70922c14a 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/index.svelte @@ -1,19 +1,5 @@ - -{#if loaded} - You need to create a screen! -{/if} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/layouts/index.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte rename to packages/builder/src/pages/builder/app/[application]/design/layouts/index.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/navigation/index.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte rename to packages/builder/src/pages/builder/app/[application]/design/navigation/index.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/screens/[screenId].svelte similarity index 70% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte rename to packages/builder/src/pages/builder/app/[application]/design/screens/[screenId].svelte index b40f246f5b..a56978404b 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/screens/[screenId].svelte @@ -2,18 +2,26 @@ import { Search, Layout, Select } from "@budibase/bbui" import NavigationPanel from "components/design/NavigationPanel/NavigationPanel.svelte" import { roles } from "stores/backend" - import { store, allScreens } from "builderStore" + import { store, selectedScreen } from "builderStore" import NavItem from "components/common/NavItem.svelte" import ScreenDropdownMenu from "./_components/ScreenDropdownMenu.svelte" - import AppPanel from "components/design/AppPanel/AppPanel.svelte" import { RoleColours } from "constants" import ScreenWizard from "./_components/ScreenWizard.svelte" + import { onDestroy } from "svelte" + import { syncURLToState } from "helpers/urlStateSync" + import { goto, params, redirect } from "@roxi/routify" + import AppPanel from "components/design/AppPanel/AppPanel.svelte" + import SettingsPanel from "components/design/SettingsPanel/SettingsPanel.svelte" let searchString let accessRole = "all" let showNewScreenModal - $: filteredScreens = getFilteredScreens($allScreens, searchString, accessRole) + $: filteredScreens = getFilteredScreens( + $store.screens, + searchString, + accessRole + ) const getFilteredScreens = (screens, search, role) => { return screens @@ -32,6 +40,24 @@ const getRoleColor = roleId => { return RoleColours[roleId] || "pink" } + + // Keep URL and state in sync for selected screen ID + const stopSyncing = syncURLToState({ + keys: [ + { + url: "screenId", + state: "selectedScreenId", + validate: screenId => $store.screens.some(x => x._id === screenId), + fallbackUrl: "../", + }, + ], + store, + params, + goto, + redirect, + }) + + onDestroy(stopSyncing) - - - - - - - - {/each} - - + + + + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/screens/_components/DatasourceModal.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte rename to packages/builder/src/pages/builder/app/[application]/design/screens/_components/DatasourceModal.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/screens/_components/NewScreenModal.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte rename to packages/builder/src/pages/builder/app/[application]/design/screens/_components/NewScreenModal.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenDetailsModal.svelte similarity index 94% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte rename to packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenDetailsModal.svelte index 42bc68f7c4..f8f390c582 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenDetailsModal.svelte @@ -1,7 +1,7 @@ + +{#if loaded} + You need to create a screen! +{/if} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte rename to packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte