forked from tsai/budibase
Martin McKeaveney
6 years ago
23 changed files with 93 additions and 151 deletions
@ -1,32 +1,39 @@ |
|||||
<script> |
<script> |
||||
import { params, leftover, goto } from "@sveltech/routify" |
import { params, leftover, goto } from "@sveltech/routify" |
||||
|
import { FrontendTypes } from "constants" |
||||
import { store, allScreens } from "builderStore" |
import { store, allScreens } from "builderStore" |
||||
|
|
||||
// Get any leftover params not caught by Routifys params store. |
// Get any leftover params not caught by Routifys params store. |
||||
const componentIds = $leftover.split("/").filter(id => id !== "") |
const componentIds = $leftover.split("/").filter(id => id !== "") |
||||
|
|
||||
const currentLayoutId = decodeURI($params.layout) |
const currentAssetId = decodeURI($params.asset) |
||||
const validLayout = $store.layouts.some(layout => layout._id === currentLayoutId) |
|
||||
|
|
||||
if (!validLayout) { |
let assetList |
||||
const firstLayoutId = $store.layouts[0]?._id |
let actions |
||||
store.actions.layouts.select($params.layout) |
|
||||
$goto(`./${firstLayoutId}`) |
// Determine screens or layouts based on the URL |
||||
|
if ($params.assetType === FrontendTypes.SCREEN) { |
||||
|
assetList = $allScreens |
||||
|
actions = store.actions.screens |
||||
} else { |
} else { |
||||
// Otherwise proceed to set layout |
assetList = $store.layouts |
||||
store.actions.layouts.select($params.layout) |
actions = store.actions.layouts |
||||
|
} |
||||
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it. |
|
||||
if ($leftover) { |
// select the screen or layout in the UI |
||||
// Get the correct layout children. |
actions.select(currentAssetId) |
||||
const layoutChildren = $store.layouts.find( |
|
||||
layout => |
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it. |
||||
layout._id === $params.layout || |
if ($leftover) { |
||||
layout._id === decodeURIComponent($params.layout) |
// Get the correct screen children. |
||||
).props._children |
const assetChildren = assetList.find( |
||||
findComponent(componentIds, layoutChildren) |
asset => |
||||
} |
asset._id === $params.asset || |
||||
|
asset._id === decodeURIComponent($params.asset) |
||||
|
).props._children |
||||
|
findComponent(componentIds, assetChildren) |
||||
} |
} |
||||
|
// } |
||||
|
|
||||
// Find Component with ID and continue |
// Find Component with ID and continue |
||||
function findComponent(ids, children) { |
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> |
<script> |
||||
import { goto } from "@sveltech/routify" |
import { goto } from "@sveltech/routify" |
||||
$goto("../screens") |
import { FrontendTypes } from "constants" |
||||
|
|
||||
|
$goto(`../${FrontendTypes.SCREEN}`) |
||||
</script> |
</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