Add navigation bar, links and row detail definitions
This commit is contained in:
Andrew Kingston
parent
dbbe76951d
commit
275f0ca092
|
|
@ -53,6 +53,7 @@ export const getBindableContexts = (rootComponent, componentId) => {
|
|||
readableBinding: `${provider._instanceName}.${table.name}.${key}`,
|
||||
fieldSchema,
|
||||
providerId: provider._id,
|
||||
tableId: provider.datasource.tableId,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -22,11 +22,13 @@
|
|||
},
|
||||
"button",
|
||||
"text",
|
||||
"link",
|
||||
{
|
||||
"name": "Other",
|
||||
"icon": "ri-file-edit-line",
|
||||
"children": [
|
||||
"screenslot"
|
||||
"screenslot",
|
||||
"navigation"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -1,67 +1,53 @@
|
|||
<script>
|
||||
import { DataList } from "@budibase/bbui"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { store, allScreens, backendUiStore, currentAsset } from "builderStore"
|
||||
import fetchBindableProperties from "builderStore/fetchBindableProperties"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
import { store, allScreens, currentAsset } from "builderStore"
|
||||
import { getBindableProperties } from "builderStore/dataBinding"
|
||||
|
||||
export let value = ""
|
||||
|
||||
$: urls = getUrls()
|
||||
$: urls = getUrls($allScreens, $currentAsset, $store.selectedComponentId)
|
||||
|
||||
// Update value on blur
|
||||
const dispatch = createEventDispatcher()
|
||||
const handleBlur = () => dispatch("change", value)
|
||||
|
||||
// this will get urls of all screens, but only
|
||||
// choose detail screens that are usable in the current context
|
||||
// and substitute the :id param for the actual {{ ._id }} binding
|
||||
const getUrls = () => {
|
||||
const urls = [
|
||||
...$allScreens
|
||||
.filter(screen => !screen.props._component.endsWith("/rowdetail"))
|
||||
.map(screen => ({
|
||||
name: screen.props._instanceName,
|
||||
url: screen.routing.route,
|
||||
sort: screen.props._component,
|
||||
})),
|
||||
]
|
||||
// Get all valid screen URL, as well as detail screens which can be used in
|
||||
// the current data context
|
||||
const getUrls = (screens, asset, componentId) => {
|
||||
// Get all screens which aren't detail screens
|
||||
let urls = screens
|
||||
.filter(screen => !screen.props._component.endsWith("/rowdetail"))
|
||||
.map(screen => ({
|
||||
name: screen.props._instanceName,
|
||||
url: screen.routing.route,
|
||||
sort: screen.props._component,
|
||||
}))
|
||||
|
||||
const bindableProperties = fetchBindableProperties({
|
||||
componentInstanceId: $store.selectedComponentId,
|
||||
components: $store.components,
|
||||
screen: $currentAsset,
|
||||
tables: $backendUiStore.tables,
|
||||
})
|
||||
|
||||
const detailScreens = $allScreens.filter(screen =>
|
||||
screen.props._component.endsWith("/rowdetail")
|
||||
)
|
||||
|
||||
for (let detailScreen of detailScreens) {
|
||||
const idBinding = bindableProperties.find(p => {
|
||||
if (
|
||||
p.type === "context" &&
|
||||
p.runtimeBinding.endsWith("._id") &&
|
||||
p.table
|
||||
) {
|
||||
const tableId =
|
||||
typeof p.table === "string" ? p.table : p.table.tableId
|
||||
return tableId === detailScreen.props.table
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
if (idBinding) {
|
||||
urls.push({
|
||||
name: detailScreen.props._instanceName,
|
||||
url: detailScreen.routing.route.replace(
|
||||
":id",
|
||||
`{{ ${idBinding.runtimeBinding} }}`
|
||||
),
|
||||
sort: detailScreen.props._component,
|
||||
// Add detail screens enriched with the current data context
|
||||
const bindableProperties = getBindableProperties(asset.props, componentId)
|
||||
screens
|
||||
.filter(screen => screen.props._component.endsWith("/rowdetail"))
|
||||
.forEach(detailScreen => {
|
||||
// Find any _id bindings that match the detail screen's table
|
||||
const binding = bindableProperties.find(p => {
|
||||
return (
|
||||
p.type === "context" &&
|
||||
p.runtimeBinding.endsWith("._id") &&
|
||||
p.tableId === detailScreen.props.table
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
if (binding) {
|
||||
urls.push({
|
||||
name: detailScreen.props._instanceName,
|
||||
url: detailScreen.routing.route.replace(
|
||||
":id",
|
||||
`{{ ${binding.runtimeBinding} }}`
|
||||
),
|
||||
sort: detailScreen.props._component,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return urls
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
boolean: Checkbox,
|
||||
number: Input,
|
||||
event: EventsEditor,
|
||||
table: TableSelect,
|
||||
}
|
||||
const getControl = type => {
|
||||
return controlMap[type]
|
||||
|
|
|
|||
|
|
@ -754,26 +754,6 @@ export default {
|
|||
settings: [{ label: "URL", key: "url", control: Input }],
|
||||
},
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/link",
|
||||
name: "Link",
|
||||
description: "A basic link component for internal and external links",
|
||||
icon: "ri-link",
|
||||
children: [],
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{ label: "Text", key: "text", control: Input },
|
||||
{ label: "Url", key: "url", control: ScreenSelect },
|
||||
{
|
||||
label: "New Tab",
|
||||
key: "openInNewTab",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/icon",
|
||||
name: "Icon",
|
||||
|
|
@ -838,30 +818,6 @@ export default {
|
|||
commonProps: {},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: "Nav Bar",
|
||||
_component: "@budibase/standard-components/navigation",
|
||||
description:
|
||||
"A component for handling the navigation within your app.",
|
||||
icon: "ri-navigation-line",
|
||||
children: [],
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [{ label: "Logo URL", key: "logoUrl", control: Input }],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Row Detail",
|
||||
_component: "@budibase/standard-components/rowdetail",
|
||||
description:
|
||||
"Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
|
||||
icon: "ri-profile-line",
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [{ label: "Table", key: "table", control: TableSelect }],
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: "New Row",
|
||||
_component: "@budibase/standard-components/newrow",
|
||||
|
|
|
|||
|
|
@ -13,14 +13,6 @@
|
|||
"embed": "string"
|
||||
}
|
||||
},
|
||||
"navigation": {
|
||||
"name": "Navigation",
|
||||
"description": "A basic header navigation component",
|
||||
"children": true,
|
||||
"props": {
|
||||
"logoUrl": "string"
|
||||
}
|
||||
},
|
||||
"richtext": {
|
||||
"name": "Rich Text",
|
||||
"description": "A component that allows the user to enter long form text.",
|
||||
|
|
@ -43,18 +35,6 @@
|
|||
}
|
||||
},
|
||||
|
||||
|
||||
"rowdetail": {
|
||||
"name": "Row Detail",
|
||||
"description": "Loads a row, using an ID in the url",
|
||||
"context": "table",
|
||||
"children": true,
|
||||
"data": true,
|
||||
"baseComponent": true,
|
||||
"props": {
|
||||
"table": "tables"
|
||||
}
|
||||
},
|
||||
"newrow": {
|
||||
"name": "New Row",
|
||||
"description": "Prepares a new row for creation",
|
||||
|
|
@ -411,15 +391,6 @@
|
|||
"placeholder": "string"
|
||||
}
|
||||
},
|
||||
"link": {
|
||||
"name": "Link",
|
||||
"description": "an HTML anchor <a> tag",
|
||||
"props": {
|
||||
"url": "string",
|
||||
"openInNewTab": "bool",
|
||||
"text": "string"
|
||||
}
|
||||
},
|
||||
"image": {
|
||||
"description": "an HTML <img> tag",
|
||||
"props": {
|
||||
|
|
|
|||
|
|
@ -291,5 +291,57 @@
|
|||
"key": "buttonText"
|
||||
}
|
||||
]
|
||||
},
|
||||
"navigation": {
|
||||
"name": "Nav Bar",
|
||||
"description": "A component for handling the navigation within your app.",
|
||||
"icon": "ri-navigation-line",
|
||||
"styleable": true,
|
||||
"hasChildren": true,
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Logo URL",
|
||||
"key": "logoUrl"
|
||||
}
|
||||
]
|
||||
},
|
||||
"link": {
|
||||
"name": "Link",
|
||||
"description": "A basic link component for internal and external links",
|
||||
"icon": "ri-link",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Text",
|
||||
"key": "text"
|
||||
},
|
||||
{
|
||||
"type": "screen",
|
||||
"label": "URL",
|
||||
"key": "url"
|
||||
},
|
||||
{
|
||||
"type": "boolean",
|
||||
"label": "New Tab",
|
||||
"key": "openInNewTab"
|
||||
}
|
||||
]
|
||||
},
|
||||
"rowdetail": {
|
||||
"name": "Row Detail",
|
||||
"description": "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
|
||||
"icon": "ri-profile-line",
|
||||
"styleable": true,
|
||||
"hasChildren": true,
|
||||
"dataProvider": true,
|
||||
"settings": [
|
||||
{
|
||||
"type": "table",
|
||||
"label": "Table",
|
||||
"key": "table"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,15 +18,15 @@ export { default as form } from "./DataFormWide.svelte"
|
|||
export { default as datepicker } from "./DatePicker.svelte"
|
||||
export { default as text } from "./Text.svelte"
|
||||
export { default as login } from "./Login.svelte"
|
||||
export { default as navigation } from "./Navigation.svelte"
|
||||
export { default as link } from "./Link.svelte"
|
||||
export { default as rowdetail } from "./RowDetail.svelte"
|
||||
|
||||
// export { default as heading } from "./Heading.svelte"
|
||||
// export { default as link } from "./Link.svelte"
|
||||
// export { default as image } from "./Image.svelte"
|
||||
// export { default as navigation } from "./Navigation.svelte"
|
||||
// export { default as embed } from "./Embed.svelte"
|
||||
// export { default as cardhorizontal } from "./CardHorizontal.svelte"
|
||||
// export { default as cardstat } from "./CardStat.svelte"
|
||||
// export { default as rowdetail } from "./RowDetail.svelte"
|
||||
// export { default as newrow } from "./NewRow.svelte"
|
||||
// export { default as icon } from "./Icon.svelte"
|
||||
// export * from "./charts"
|
||||
|
|
|
|||
Loading…
Reference in New Issue