mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
5 years ago
3 changed files with 151 additions and 141 deletions
@ -1,110 +0,0 @@ |
|||
<script> |
|||
import { onMount } from "svelte" |
|||
import { get } from "svelte/store" |
|||
import { params, leftover, goto } from "@sveltech/routify" |
|||
import { FrontendTypes } from "constants" |
|||
import { store, allScreens, currentAsset } from "builderStore" |
|||
import { findComponent, findComponentPath } from "builderStore/storeUtils" |
|||
|
|||
let initialised = false |
|||
|
|||
// Cache previous values so we don't update the URL more than necessary |
|||
let previousType |
|||
let previousAsset |
|||
let previousComponentId |
|||
|
|||
// Hydrate state from query param on mount |
|||
onMount(() => { |
|||
const assetId = decodeURI($params.asset) |
|||
let assetList |
|||
let actions |
|||
|
|||
// Determine screens or layouts based on the URL |
|||
if ($params.assetType === FrontendTypes.SCREEN) { |
|||
assetList = $allScreens |
|||
actions = store.actions.screens |
|||
} else { |
|||
assetList = $store.layouts |
|||
actions = store.actions.layouts |
|||
} |
|||
|
|||
// Find and select the current asset |
|||
const asset = assetList.find(asset => asset._id === assetId) |
|||
if (asset) { |
|||
actions.select(assetId) |
|||
|
|||
// Select the component ID if one is present in the URL |
|||
const selectedComponentId = $leftover.split("/").pop() |
|||
if (selectedComponentId) { |
|||
const component = findComponent(asset.props, selectedComponentId) |
|||
if (component) { |
|||
store.actions.components.select(component) |
|||
} |
|||
} |
|||
} |
|||
|
|||
initialised = true |
|||
}) |
|||
|
|||
// Updates the route params in the URL to the specified values |
|||
const updateParams = (assetType, asset, componentId) => { |
|||
// Wait until the initial state rehydration to avoid a wasted update |
|||
if (!initialised) { |
|||
return |
|||
} |
|||
|
|||
// Check we have different params than last invocation |
|||
if ( |
|||
assetType === previousType && |
|||
asset === previousAsset && |
|||
componentId === previousComponentId |
|||
) { |
|||
return |
|||
} else { |
|||
previousType = assetType |
|||
previousAsset = asset |
|||
previousComponentId = componentId |
|||
} |
|||
|
|||
// Extract current URL params |
|||
const currentParams = get(params) |
|||
const currentLeftover = get(leftover) |
|||
const paramAssetType = currentParams.assetType |
|||
const paramAssetId = currentParams.asset |
|||
const paramComponentId = currentLeftover.split("/").pop() |
|||
|
|||
// Only update params if the params actually changed |
|||
if ( |
|||
assetType !== paramAssetType || |
|||
asset?._id !== paramAssetId || |
|||
componentId !== paramComponentId |
|||
) { |
|||
// Build and navigate to a valid URL |
|||
let url = "../../" |
|||
if ([FrontendTypes.SCREEN, FrontendTypes.LAYOUT].includes(assetType)) { |
|||
url += `${assetType}` |
|||
if (asset?._id) { |
|||
url += `/${asset._id}` |
|||
if (componentId) { |
|||
const componentPath = findComponentPath(asset.props, componentId) |
|||
const componentURL = componentPath |
|||
.slice(1) |
|||
.map(comp => comp._id) |
|||
.join("/") |
|||
url += `/${componentURL}` |
|||
} |
|||
} |
|||
} |
|||
$goto(url) |
|||
} |
|||
} |
|||
|
|||
// Automatically keep URL up to date with state |
|||
$: updateParams( |
|||
$store.currentFrontEndType, |
|||
$currentAsset, |
|||
$store.selectedComponentId |
|||
) |
|||
</script> |
|||
|
|||
<slot /> |
|||
@ -1,45 +1,51 @@ |
|||
<script> |
|||
import { onMount } from "svelte" |
|||
import { goto } from "@sveltech/routify" |
|||
import { store, allScreens } from "builderStore" |
|||
import { get } from "svelte/store" |
|||
import { store, allScreens, selectedAccessRole } from "builderStore" |
|||
import { FrontendTypes } from "constants" |
|||
import { params } from "@sveltech/routify" |
|||
|
|||
onMount(() => { |
|||
let id |
|||
$: selectValidAsset($params.assetType) |
|||
|
|||
// Get valid asset type |
|||
let assetType = $params.assetType |
|||
if (![FrontendTypes.LAYOUT, FrontendTypes.SCREEN].includes(assetType)) { |
|||
assetType = FrontendTypes.SCREEN |
|||
} |
|||
// If we ever land on this index page we want to correctly update state |
|||
// to select a valid asset. The layout page will in turn update the URL |
|||
// to reflect state. |
|||
const selectValidAsset = assetType => { |
|||
let id |
|||
const state = get(store) |
|||
const screens = get(allScreens) |
|||
const role = get(selectedAccessRole) |
|||
|
|||
// Get ID or first correct asset type |
|||
// Get ID or first correct asset type and select it |
|||
if (assetType === FrontendTypes.LAYOUT) { |
|||
if ( |
|||
$store.selectedLayoutId && |
|||
$store.layouts.find(layout => layout._id === $store.selectedLayoutId) |
|||
state.selectedLayoutId && |
|||
state.layouts.find(layout => layout._id === state.selectedLayoutId) |
|||
) { |
|||
id = $store.selectedLayoutId |
|||
id = state.selectedLayoutId |
|||
} else { |
|||
id = $store.layouts[0]?._id |
|||
id = state.layouts[0]?._id |
|||
} |
|||
if (id) { |
|||
store.actions.layouts.select(id) |
|||
} |
|||
} else if (assetType === FrontendTypes.SCREEN) { |
|||
if ( |
|||
$store.selectedScreenId && |
|||
$allScreens.find(screen => screen._id === $store.selectedScreenId) |
|||
state.selectedScreenId && |
|||
screens.find(screen => screen._id === state.selectedScreenId) |
|||
) { |
|||
id = $store.selectedScreenId |
|||
id = state.selectedScreenId |
|||
} else { |
|||
id = $allScreens[0]?._id |
|||
// Select the first screen matching the selected role ID |
|||
const filteredScreens = screens.filter(screen => { |
|||
return screen.routing?.roleId === role |
|||
}) |
|||
id = filteredScreens[0]?._id |
|||
} |
|||
if (id) { |
|||
store.actions.screens.select(id) |
|||
} |
|||
} |
|||
|
|||
// Send correct URL which will then update state |
|||
if (id) { |
|||
$goto(`../../${assetType}/${id}`) |
|||
} |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<!-- routify:options index=false --> |
|||
|
|||
Loading…
Reference in new issue