mirror of https://github.com/Budibase/budibase.git
Martin McKeaveney
6 years ago
23 changed files with 93 additions and 151 deletions
@ -1,32 +1,39 @@ |
|||
<script> |
|||
import { params, leftover, goto } from "@sveltech/routify" |
|||
import { FrontendTypes } from "constants" |
|||
import { store, allScreens } from "builderStore" |
|||
|
|||
// Get any leftover params not caught by Routifys params store. |
|||
const componentIds = $leftover.split("/").filter(id => id !== "") |
|||
|
|||
const currentLayoutId = decodeURI($params.layout) |
|||
const validLayout = $store.layouts.some(layout => layout._id === currentLayoutId) |
|||
const currentAssetId = decodeURI($params.asset) |
|||
|
|||
if (!validLayout) { |
|||
const firstLayoutId = $store.layouts[0]?._id |
|||
store.actions.layouts.select($params.layout) |
|||
$goto(`./${firstLayoutId}`) |
|||
let assetList |
|||
let actions |
|||
|
|||
// Determine screens or layouts based on the URL |
|||
if ($params.assetType === FrontendTypes.SCREEN) { |
|||
assetList = $allScreens |
|||
actions = store.actions.screens |
|||
} else { |
|||
// Otherwise proceed to set layout |
|||
store.actions.layouts.select($params.layout) |
|||
|
|||
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it. |
|||
if ($leftover) { |
|||
// Get the correct layout children. |
|||
const layoutChildren = $store.layouts.find( |
|||
layout => |
|||
layout._id === $params.layout || |
|||
layout._id === decodeURIComponent($params.layout) |
|||
).props._children |
|||
findComponent(componentIds, layoutChildren) |
|||
} |
|||
assetList = $store.layouts |
|||
actions = store.actions.layouts |
|||
} |
|||
|
|||
// select the screen or layout in the UI |
|||
actions.select(currentAssetId) |
|||
|
|||
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it. |
|||
if ($leftover) { |
|||
// Get the correct screen children. |
|||
const assetChildren = assetList.find( |
|||
asset => |
|||
asset._id === $params.asset || |
|||
asset._id === decodeURIComponent($params.asset) |
|||
).props._children |
|||
findComponent(componentIds, assetChildren) |
|||
} |
|||
// } |
|||
|
|||
// Find Component with ID and continue |
|||
function findComponent(ids, children) { |
|||
@ -0,0 +1,17 @@ |
|||
<script> |
|||
import { store, allScreens } from "builderStore" |
|||
import { FrontendTypes } from "constants" |
|||
import { goto, params } from "@sveltech/routify" |
|||
|
|||
// Go to first layout |
|||
if ($params.assetType === FrontendTypes.LAYOUT) { |
|||
$goto(`../${$store.layouts[0]?._id}`) |
|||
} |
|||
|
|||
// Go to first screen |
|||
if ($params.assetType === FrontendTypes.SCREEN) { |
|||
$goto(`../${$allScreens[0]?._id}`) |
|||
} |
|||
</script> |
|||
|
|||
<!-- routify:options index=false --> |
|||
@ -1,6 +1,8 @@ |
|||
<script> |
|||
import { goto } from "@sveltech/routify" |
|||
$goto("../screens") |
|||
import { FrontendTypes } from "constants" |
|||
|
|||
$goto(`../${FrontendTypes.SCREEN}`) |
|||
</script> |
|||
|
|||
<!-- routify:options index=false --> |
|||
<!-- routify:options index=1 --> |
|||
|
|||
@ -1,9 +0,0 @@ |
|||
<script> |
|||
import { store } from "builderStore" |
|||
import { goto } from "@sveltech/routify" |
|||
|
|||
// Go to first layout |
|||
$goto(`../${$store.layouts[0]?._id}`) |
|||
</script> |
|||
|
|||
<!-- routify:options index=false --> |
|||
@ -1,59 +0,0 @@ |
|||
<script> |
|||
import { params, leftover, goto } from "@sveltech/routify" |
|||
import { store, allScreens } from "builderStore" |
|||
|
|||
// Get any leftover params not caught by Routifys params store. |
|||
const componentIds = $leftover.split("/").filter(id => id !== "") |
|||
|
|||
const currentScreenId = decodeURI($params.screen) |
|||
const validScreen = $allScreens.some(screen => screen._id === currentScreenId) |
|||
|
|||
if (!validScreen) { |
|||
// Go to main layout if URL set to invalid screen |
|||
console.error("Invalid screen", $params.screen) |
|||
const firstScreenId = $allScreens[0]?._id |
|||
store.actions.screens.select(firstScreenId) |
|||
$goto(`./${firstScreenId}`) |
|||
} else { |
|||
// Otherwise proceed to set screen |
|||
store.actions.screens.select(currentScreenId) |
|||
|
|||
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it. |
|||
if ($leftover) { |
|||
console.log("leftover", $params.screen) |
|||
// Get the correct screen children. |
|||
const screenChildren = $allScreens.find( |
|||
screen => |
|||
screen._id === $params.screen || |
|||
screen._id === decodeURIComponent($params.screen) |
|||
).props._children |
|||
findComponent(componentIds, screenChildren) |
|||
} |
|||
} |
|||
|
|||
// Find Component with ID and continue |
|||
function findComponent(ids, children) { |
|||
// Setup stuff |
|||
let componentToSelect |
|||
let currentChildren = children |
|||
|
|||
// Loop through each ID |
|||
ids.forEach(id => { |
|||
// Find ID |
|||
const component = currentChildren.find(child => child._id === id) |
|||
|
|||
// If it does not exist, ignore (use last valid route) |
|||
if (!component) return |
|||
|
|||
componentToSelect = component |
|||
|
|||
// Update childrens array to selected components children |
|||
currentChildren = componentToSelect._children |
|||
}) |
|||
|
|||
// Select Component! |
|||
if (componentToSelect) store.actions.components.select(componentToSelect) |
|||
} |
|||
</script> |
|||
|
|||
<slot /> |
|||
@ -1,9 +0,0 @@ |
|||
<script> |
|||
import { goto } from "@sveltech/routify" |
|||
import { params, leftover } from "@sveltech/routify" |
|||
import { allScreens } from "builderStore" |
|||
|
|||
$goto(`../${$allScreens[0]?._id}`) |
|||
</script> |
|||
|
|||
<!-- routify:options index=false --> |
|||
Loading…
Reference in new issue