Merge branch 'feature/backend-routing' of github.com:Budibase/budibase into routing-ui
This commit is contained in:
commit
0f7594e3e2
|
@ -1,8 +1,12 @@
|
|||
import sanitizeUrl from "./utils/sanitizeUrl"
|
||||
import { rowListUrl } from "./rowListScreen"
|
||||
import { Component } from "./utils/Component"
|
||||
import { Screen } from "./utils/Screen"
|
||||
import { linkComponent } from "./utils/commonComponents"
|
||||
import {
|
||||
makeBreadcrumbContainer,
|
||||
makeMainContainer,
|
||||
makeTitleContainer,
|
||||
makeSaveButton,
|
||||
} from "./utils/commonComponents"
|
||||
|
||||
export default function(tables) {
|
||||
return tables.map(table => {
|
||||
|
@ -17,133 +21,26 @@ export default function(tables) {
|
|||
export const newRowUrl = table => sanitizeUrl(`/${table.name}/new`)
|
||||
export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
|
||||
|
||||
function breadcrumbContainer(table) {
|
||||
const link = linkComponent(table.name).instanceName("Back Link")
|
||||
|
||||
const arrowText = new Component("@budibase/standard-components/text")
|
||||
.type("none")
|
||||
.normalStyle({
|
||||
"margin-right": "4px",
|
||||
"margin-left": "4px",
|
||||
})
|
||||
.text(">")
|
||||
.instanceName("Arrow")
|
||||
|
||||
const newText = new Component("@budibase/standard-components/text")
|
||||
.type("none")
|
||||
.normalStyle({
|
||||
color: "#000000",
|
||||
})
|
||||
.text("New")
|
||||
.instanceName("Identifier")
|
||||
|
||||
return new Component("@budibase/standard-components/container")
|
||||
.type("div")
|
||||
.normalStyle({
|
||||
"font-size": "14px",
|
||||
color: "#757575",
|
||||
})
|
||||
.instanceName("Breadcrumbs")
|
||||
.addChild(link)
|
||||
.addChild(arrowText)
|
||||
.addChild(newText)
|
||||
}
|
||||
|
||||
function titleContainer(table) {
|
||||
const heading = new Component("@budibase/standard-components/heading")
|
||||
.normalStyle({
|
||||
margin: "0px",
|
||||
"margin-bottom": "0px",
|
||||
"margin-right": "0px",
|
||||
"margin-top": "0px",
|
||||
"margin-left": "0px",
|
||||
flex: "1 1 auto",
|
||||
})
|
||||
.type("h3")
|
||||
.instanceName("Title")
|
||||
.text("New Row")
|
||||
|
||||
const button = new Component("@budibase/standard-components/button")
|
||||
.normalStyle({
|
||||
background: "#000000",
|
||||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#fff",
|
||||
"font-family": "Inter",
|
||||
"font-weight": "500",
|
||||
"font-size": "14px",
|
||||
"margin-left": "16px",
|
||||
})
|
||||
.hoverStyle({
|
||||
background: "#4285f4",
|
||||
})
|
||||
.text("Save")
|
||||
.customProps({
|
||||
className: "",
|
||||
disabled: false,
|
||||
onClick: [
|
||||
{
|
||||
parameters: {
|
||||
contextPath: "data",
|
||||
tableId: table._id,
|
||||
},
|
||||
"##eventHandlerType": "Save Row",
|
||||
},
|
||||
{
|
||||
parameters: {
|
||||
url: rowListUrl(table),
|
||||
},
|
||||
"##eventHandlerType": "Navigate To",
|
||||
},
|
||||
],
|
||||
})
|
||||
.instanceName("Save Button")
|
||||
|
||||
return new Component("@budibase/standard-components/container")
|
||||
.type("div")
|
||||
.normalStyle({
|
||||
display: "flex",
|
||||
"flex-direction": "row",
|
||||
"justify-content": "space-between",
|
||||
"align-items": "center",
|
||||
"margin-top": "32px",
|
||||
"margin-bottom": "32px",
|
||||
})
|
||||
.instanceName("Title Container")
|
||||
.addChild(heading)
|
||||
.addChild(button)
|
||||
function generateTitleContainer(table) {
|
||||
return makeTitleContainer("New Row").addChild(makeSaveButton(table))
|
||||
}
|
||||
|
||||
const createScreen = table => {
|
||||
const dataform = new Component("@budibase/standard-components/dataformwide")
|
||||
.instanceName("Form")
|
||||
const dataform = new Component(
|
||||
"@budibase/standard-components/dataformwide"
|
||||
).instanceName("Form")
|
||||
|
||||
const mainContainer = new Component("@budibase/standard-components/container")
|
||||
.type("div")
|
||||
.normalStyle({
|
||||
width: "700px",
|
||||
padding: "0px",
|
||||
background: "white",
|
||||
"border-radius": "0.5rem",
|
||||
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
||||
margin: "auto",
|
||||
"margin-top": "20px",
|
||||
"padding-top": "48px",
|
||||
"padding-bottom": "48px",
|
||||
"padding-right": "48px",
|
||||
"padding-left": "48px",
|
||||
"margin-bottom": "20px",
|
||||
})
|
||||
.instanceName("Container")
|
||||
.addChild(breadcrumbContainer(table))
|
||||
.addChild(titleContainer(table))
|
||||
const container = makeMainContainer()
|
||||
.addChild(makeBreadcrumbContainer(table.name, "New"))
|
||||
.addChild(generateTitleContainer(table))
|
||||
.addChild(dataform)
|
||||
|
||||
return new Screen().component("@budibase/standard-components/newrow")
|
||||
.addChild(mainContainer)
|
||||
return new Screen()
|
||||
.component("@budibase/standard-components/newrow")
|
||||
.table(table._id)
|
||||
.route(newRowUrl(table))
|
||||
.instanceName(`${table.name} - New`)
|
||||
.name("")
|
||||
.addChild(container)
|
||||
.json()
|
||||
}
|
||||
|
|
|
@ -1,5 +1,13 @@
|
|||
import sanitizeUrl from "./utils/sanitizeUrl"
|
||||
import { rowListUrl } from "./rowListScreen"
|
||||
import { Screen } from "./utils/Screen"
|
||||
import { Component } from "./utils/Component"
|
||||
import {
|
||||
makeMainContainer,
|
||||
makeBreadcrumbContainer,
|
||||
makeTitleContainer,
|
||||
makeSaveButton,
|
||||
} from "./utils/commonComponents"
|
||||
|
||||
export default function(tables) {
|
||||
return tables.map(table => {
|
||||
|
@ -17,291 +25,78 @@ export default function(tables) {
|
|||
export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
|
||||
export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
|
||||
|
||||
const createScreen = (table, heading) => ({
|
||||
props: {
|
||||
_id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c",
|
||||
_component: "@budibase/standard-components/rowdetail",
|
||||
_styles: {
|
||||
normal: {},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
table: table._id,
|
||||
_children: [
|
||||
{
|
||||
_id: "ccad6cc135c7947a7ba9c631f655d6e0f",
|
||||
_component: "@budibase/standard-components/container",
|
||||
_styles: {
|
||||
normal: {
|
||||
width: "700px",
|
||||
padding: "0px",
|
||||
background: "white",
|
||||
"border-radius": "0.5rem",
|
||||
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
||||
margin: "auto",
|
||||
"margin-top": "20px",
|
||||
"padding-top": "48px",
|
||||
"padding-bottom": "48px",
|
||||
"padding-right": "48px",
|
||||
"padding-left": "48px",
|
||||
"margin-bottom": "20px",
|
||||
function generateTitleContainer(table, title) {
|
||||
// have to override style for this, its missing margin
|
||||
const saveButton = makeSaveButton(table).normalStyle({
|
||||
background: "#000000",
|
||||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#fff",
|
||||
"font-family": "Inter",
|
||||
"font-weight": "500",
|
||||
"font-size": "14px",
|
||||
})
|
||||
|
||||
const deleteButton = new Component("@budibase/standard-components/button")
|
||||
.normalStyle({
|
||||
background: "transparent",
|
||||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#9e9e9e",
|
||||
"font-family": "Inter",
|
||||
"font-weight": "500",
|
||||
"font-size": "14px",
|
||||
"margin-right": "8px",
|
||||
"margin-left": "16px",
|
||||
})
|
||||
.hoverStyle({
|
||||
background: "transparent",
|
||||
color: "#4285f4",
|
||||
})
|
||||
.text("Delete")
|
||||
.customProps({
|
||||
className: "",
|
||||
disabled: false,
|
||||
onClick: [
|
||||
{
|
||||
parameters: {
|
||||
rowId: "{{ data._id }}",
|
||||
revId: "{{ data._rev }}",
|
||||
tableId: table._id,
|
||||
},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
"##eventHandlerType": "Delete Row",
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
onLoad: [],
|
||||
type: "div",
|
||||
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
|
||||
_instanceName: "Container",
|
||||
_children: [
|
||||
{
|
||||
_id: "c6e91622ba7984f468f70bf4bf5120246",
|
||||
_component: "@budibase/standard-components/container",
|
||||
_styles: {
|
||||
normal: {
|
||||
"font-size": "14px",
|
||||
color: "#757575",
|
||||
},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
onLoad: [],
|
||||
type: "div",
|
||||
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
|
||||
_instanceName: "Breadcrumbs",
|
||||
_children: [
|
||||
{
|
||||
_id: "caa33353c252c4931b2a51b48a559a7fc",
|
||||
_component: "@budibase/standard-components/link",
|
||||
_styles: {
|
||||
normal: {
|
||||
color: "#757575",
|
||||
"text-transform": "capitalize",
|
||||
},
|
||||
hover: {
|
||||
color: "#4285f4",
|
||||
},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
url: `/${table.name.toLowerCase()}`,
|
||||
openInNewTab: false,
|
||||
text: table.name,
|
||||
color: "",
|
||||
hoverColor: "",
|
||||
underline: false,
|
||||
fontSize: "",
|
||||
fontFamily: "initial",
|
||||
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
|
||||
_instanceName: "Back Link",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_id: "c6e218170201040e7a74e2c8304fe1860",
|
||||
_component: "@budibase/standard-components/text",
|
||||
_styles: {
|
||||
normal: {
|
||||
"margin-right": "4px",
|
||||
"margin-left": "4px",
|
||||
},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
text: ">",
|
||||
type: "none",
|
||||
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
|
||||
_instanceName: "Arrow",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_id: "c799da1fa3a84442e947cc9199518f64c",
|
||||
_component: "@budibase/standard-components/text",
|
||||
_styles: {
|
||||
normal: {
|
||||
color: "#000000",
|
||||
"text-transform": "capitalize",
|
||||
},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
text: heading || "Edit",
|
||||
type: "none",
|
||||
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
|
||||
_instanceName: "Identifier",
|
||||
_children: [],
|
||||
},
|
||||
],
|
||||
{
|
||||
parameters: {
|
||||
url: rowListUrl(table),
|
||||
},
|
||||
{
|
||||
_id: "cbd1637cd1e274287a3c28ef0bf235d08",
|
||||
_component: "@budibase/standard-components/container",
|
||||
_styles: {
|
||||
normal: {
|
||||
display: "flex",
|
||||
"flex-direction": "row",
|
||||
"justify-content": "space-between",
|
||||
"align-items": "center",
|
||||
"margin-top": "32px",
|
||||
"margin-bottom": "32px",
|
||||
},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
onLoad: [],
|
||||
type: "div",
|
||||
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
|
||||
_instanceName: "Title Container",
|
||||
_children: [
|
||||
{
|
||||
_id: "c98d3675d04114558bbf28661c5ccfb8e",
|
||||
_component: "@budibase/standard-components/heading",
|
||||
_styles: {
|
||||
normal: {
|
||||
margin: "0px",
|
||||
"margin-bottom": "0px",
|
||||
"margin-right": "0px",
|
||||
"margin-top": "0px",
|
||||
"margin-left": "0px",
|
||||
flex: "1 1 auto",
|
||||
"text-transform": "capitalize",
|
||||
},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
text: heading || "Edit Row",
|
||||
type: "h3",
|
||||
_instanceName: "Title",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_id: "c0a162cfb7d1c4bcfa8d24c290ccd1fd6",
|
||||
_component: "@budibase/standard-components/button",
|
||||
_styles: {
|
||||
normal: {
|
||||
background: "transparent",
|
||||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#9e9e9e",
|
||||
"font-family": "Inter",
|
||||
"font-weight": "500",
|
||||
"font-size": "14px",
|
||||
"margin-right": "8px",
|
||||
"margin-left": "16px",
|
||||
},
|
||||
hover: {
|
||||
background: "transparent",
|
||||
color: "#4285f4",
|
||||
},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
text: "Delete",
|
||||
className: "",
|
||||
disabled: false,
|
||||
onClick: [
|
||||
{
|
||||
parameters: {
|
||||
rowId: "{{ data._id }}",
|
||||
revId: "{{ data._rev }}",
|
||||
tableId: table._id,
|
||||
},
|
||||
"##eventHandlerType": "Delete Row",
|
||||
},
|
||||
{
|
||||
parameters: {
|
||||
url: rowListUrl(table),
|
||||
},
|
||||
"##eventHandlerType": "Navigate To",
|
||||
},
|
||||
],
|
||||
_instanceName: "Delete Button",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_id: "cae402bd3c6a44618a8341bf7ab9ab086",
|
||||
_component: "@budibase/standard-components/button",
|
||||
_styles: {
|
||||
normal: {
|
||||
background: "#000000",
|
||||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#fff",
|
||||
"font-family": "Inter",
|
||||
"font-weight": "500",
|
||||
"font-size": "14px",
|
||||
},
|
||||
hover: {
|
||||
background: "#4285f4",
|
||||
},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
text: "Save",
|
||||
className: "",
|
||||
disabled: false,
|
||||
onClick: [
|
||||
{
|
||||
parameters: {
|
||||
contextPath: "data",
|
||||
tableId: table._id,
|
||||
},
|
||||
"##eventHandlerType": "Save Row",
|
||||
},
|
||||
{
|
||||
parameters: {
|
||||
url: rowListUrl(table),
|
||||
},
|
||||
"##eventHandlerType": "Navigate To",
|
||||
},
|
||||
],
|
||||
_instanceName: "Save Button",
|
||||
_children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
_id: "c5e6c98d7363640f9ad3a7d19c8c10f67",
|
||||
_component: "@budibase/standard-components/dataformwide",
|
||||
_styles: {
|
||||
normal: {},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
|
||||
_instanceName: "Form",
|
||||
_children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
_instanceName: `${table.name} - Detail`,
|
||||
_code: "",
|
||||
},
|
||||
routing: {
|
||||
route: rowDetailUrl(table),
|
||||
accessLevelId: "",
|
||||
},
|
||||
name: "",
|
||||
})
|
||||
"##eventHandlerType": "Navigate To",
|
||||
},
|
||||
],
|
||||
})
|
||||
.instanceName("Delete Button")
|
||||
|
||||
return makeTitleContainer(title)
|
||||
.addChild(deleteButton)
|
||||
.addChild(saveButton)
|
||||
}
|
||||
|
||||
const createScreen = (table, heading) => {
|
||||
const dataform = new Component(
|
||||
"@budibase/standard-components/dataformwide"
|
||||
).instanceName("Form")
|
||||
|
||||
const container = makeMainContainer()
|
||||
.addChild(makeBreadcrumbContainer(table.name, heading || "Edit"))
|
||||
.addChild(generateTitleContainer(table, heading || "Edit Row"))
|
||||
.addChild(dataform)
|
||||
|
||||
return new Screen()
|
||||
.component("@budibase/standard-components/rowdetail")
|
||||
.table(table._id)
|
||||
.instanceName(`${table.name} - Detail`)
|
||||
.route(rowDetailUrl(table))
|
||||
.name("")
|
||||
.addChild(container)
|
||||
.json()
|
||||
}
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
import sanitizeUrl from "./utils/sanitizeUrl"
|
||||
import { newRowUrl } from "./newRowScreen"
|
||||
import { Screen } from "./utils/Screen"
|
||||
import { Component } from "./utils/Component"
|
||||
|
||||
export default function(tables) {
|
||||
return tables.map(table => {
|
||||
|
@ -14,162 +16,103 @@ export default function(tables) {
|
|||
export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
|
||||
export const rowListUrl = table => sanitizeUrl(`/${table.name}`)
|
||||
|
||||
const createScreen = table => ({
|
||||
props: {
|
||||
_id: "c7365379815e4457dbe703a886c2da43b",
|
||||
_component: "@budibase/standard-components/container",
|
||||
_styles: {
|
||||
normal: {},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
type: "div",
|
||||
_children: [
|
||||
{
|
||||
_id: "cf51241fc063d4d87be032dd509fe0244",
|
||||
_component: "@budibase/standard-components/container",
|
||||
_styles: {
|
||||
normal: {
|
||||
background: "white",
|
||||
"border-radius": "0.5rem",
|
||||
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
||||
margin: "auto",
|
||||
"margin-top": "20px",
|
||||
"border-width": "2px",
|
||||
"border-color": "rgba(0, 0, 0, 0.1)",
|
||||
"border-style": "None",
|
||||
"padding-top": "48px",
|
||||
"padding-bottom": "48px",
|
||||
"padding-right": "48px",
|
||||
"padding-left": "48px",
|
||||
"margin-bottom": "20px",
|
||||
function generateTitleContainer(table) {
|
||||
const newButton = new Component("@budibase/standard-components/button")
|
||||
.normalStyle({
|
||||
background: "#000000",
|
||||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#fff",
|
||||
"font-family": "Inter",
|
||||
"font-weight": "500",
|
||||
"font-size": "14px",
|
||||
})
|
||||
.hoverStyle({
|
||||
background: "#4285f4",
|
||||
})
|
||||
.text("Create New")
|
||||
.customProps({
|
||||
className: "",
|
||||
disabled: false,
|
||||
onClick: [
|
||||
{
|
||||
parameters: {
|
||||
url: newRowUrl(table),
|
||||
},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
"##eventHandlerType": "Navigate To",
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
onLoad: [],
|
||||
type: "div",
|
||||
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
|
||||
_instanceName: "Container",
|
||||
_children: [
|
||||
{
|
||||
_id: "c73294c301fd145aabe9bbbbd96a150ac",
|
||||
_component: "@budibase/standard-components/container",
|
||||
_styles: {
|
||||
normal: {
|
||||
display: "flex",
|
||||
"flex-direction": "row",
|
||||
"justify-content": "space-between",
|
||||
"align-items": "center",
|
||||
"margin-bottom": "32px",
|
||||
},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
onLoad: [],
|
||||
type: "div",
|
||||
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
|
||||
_instanceName: "Title Container",
|
||||
_children: [
|
||||
{
|
||||
_id: "c2b77901df95a4d1ca7204c58300bc94b",
|
||||
_component: "@budibase/standard-components/heading",
|
||||
_styles: {
|
||||
normal: {
|
||||
margin: "0px",
|
||||
flex: "1 1 auto",
|
||||
"text-transform": "capitalize",
|
||||
},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
text: table.name,
|
||||
type: "h3",
|
||||
_instanceName: "Title",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_id: "c12a82d77baf24ca9922ea0af7cd4f723",
|
||||
_component: "@budibase/standard-components/button",
|
||||
_styles: {
|
||||
normal: {
|
||||
background: "#000000",
|
||||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#fff",
|
||||
"font-family": "Inter",
|
||||
"font-weight": "500",
|
||||
"font-size": "14px",
|
||||
},
|
||||
hover: {
|
||||
background: "#4285f4",
|
||||
},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
text: "Create New",
|
||||
className: "",
|
||||
disabled: false,
|
||||
onClick: [
|
||||
{
|
||||
parameters: {
|
||||
url: newRowUrl(table),
|
||||
},
|
||||
"##eventHandlerType": "Navigate To",
|
||||
},
|
||||
],
|
||||
_instanceName: "New Button",
|
||||
_children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
_id: "ca686a2ed89c943e6bafb63fa66a3ead3",
|
||||
_component: "@budibase/standard-components/datagrid",
|
||||
_styles: {
|
||||
normal: {},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
datasource: {
|
||||
label: table.name,
|
||||
name: `all_${table._id}`,
|
||||
tableId: table._id,
|
||||
type: "table",
|
||||
},
|
||||
editable: false,
|
||||
theme: "alpine",
|
||||
height: "540",
|
||||
pagination: true,
|
||||
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
|
||||
_instanceName: "Grid",
|
||||
_children: [],
|
||||
detailUrl: `${table.name.toLowerCase()}/:id`,
|
||||
},
|
||||
],
|
||||
],
|
||||
})
|
||||
.instanceName("New Button")
|
||||
|
||||
const heading = new Component("@budibase/standard-components/heading")
|
||||
.normalStyle({
|
||||
margin: "0px",
|
||||
flex: "1 1 auto",
|
||||
"text-transform": "capitalize",
|
||||
})
|
||||
.type("h3")
|
||||
.instanceName("Title")
|
||||
.text(table.name)
|
||||
|
||||
return new Component("@budibase/standard-components/container")
|
||||
.type("div")
|
||||
.normalStyle({
|
||||
display: "flex",
|
||||
"flex-direction": "row",
|
||||
"justify-content": "space-between",
|
||||
"align-items": "center",
|
||||
"margin-bottom": "32px",
|
||||
})
|
||||
.instanceName("Title Container")
|
||||
.addChild(heading)
|
||||
.addChild(newButton)
|
||||
}
|
||||
|
||||
const createScreen = table => {
|
||||
const datagrid = new Component("@budibase/standard-components/datagrid")
|
||||
.customProps({
|
||||
datasource: {
|
||||
label: table.name,
|
||||
name: `all_${table._id}`,
|
||||
tableId: table._id,
|
||||
type: "table",
|
||||
},
|
||||
],
|
||||
_instanceName: `${table.name} - List`,
|
||||
_code: "",
|
||||
className: "",
|
||||
onLoad: [],
|
||||
},
|
||||
routing: {
|
||||
route: rowListUrl(table),
|
||||
accessLevelId: "",
|
||||
},
|
||||
name: "",
|
||||
})
|
||||
editable: false,
|
||||
theme: "alpine",
|
||||
height: "540",
|
||||
pagination: true,
|
||||
detailUrl: `${table.name.toLowerCase()}/:id`,
|
||||
})
|
||||
.instanceName("Grid")
|
||||
|
||||
const mainContainer = new Component("@budibase/standard-components/container")
|
||||
.normalStyle({
|
||||
background: "white",
|
||||
"border-radius": "0.5rem",
|
||||
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
||||
margin: "auto",
|
||||
"margin-top": "20px",
|
||||
"border-width": "2px",
|
||||
"border-color": "rgba(0, 0, 0, 0.1)",
|
||||
"border-style": "None",
|
||||
"padding-top": "48px",
|
||||
"padding-bottom": "48px",
|
||||
"padding-right": "48px",
|
||||
"padding-left": "48px",
|
||||
"margin-bottom": "20px",
|
||||
})
|
||||
.type("div")
|
||||
.instanceName("Container")
|
||||
.addChild(generateTitleContainer(table))
|
||||
.addChild(datagrid)
|
||||
|
||||
return new Screen()
|
||||
.component("@budibase/standard-components/container")
|
||||
.mainType("div")
|
||||
.route(rowListUrl(table))
|
||||
.instanceName(`${table.name} - List`)
|
||||
.name("")
|
||||
.addChild(mainContainer)
|
||||
.json()
|
||||
}
|
||||
|
|
|
@ -4,8 +4,7 @@ export class BaseStructure {
|
|||
constructor(isScreen) {
|
||||
this._isScreen = isScreen
|
||||
this._children = []
|
||||
this._json = {
|
||||
}
|
||||
this._json = {}
|
||||
}
|
||||
|
||||
addChild(child) {
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { Component } from "./Component"
|
||||
import { rowListUrl } from "../rowListScreen"
|
||||
|
||||
export function linkComponent(tableName) {
|
||||
export function makeLinkComponent(tableName) {
|
||||
return new Component("@budibase/standard-components/link")
|
||||
.normalStyle({
|
||||
color: "#757575",
|
||||
|
@ -19,4 +20,126 @@ export function linkComponent(tableName) {
|
|||
fontSize: "",
|
||||
fontFamily: "initial",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export function makeMainContainer() {
|
||||
return new Component("@budibase/standard-components/container")
|
||||
.type("div")
|
||||
.normalStyle({
|
||||
width: "700px",
|
||||
padding: "0px",
|
||||
background: "white",
|
||||
"border-radius": "0.5rem",
|
||||
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
||||
margin: "auto",
|
||||
"margin-top": "20px",
|
||||
"padding-top": "48px",
|
||||
"padding-bottom": "48px",
|
||||
"padding-right": "48px",
|
||||
"padding-left": "48px",
|
||||
"margin-bottom": "20px",
|
||||
})
|
||||
.instanceName("Container")
|
||||
}
|
||||
|
||||
export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
|
||||
const link = makeLinkComponent(tableName).instanceName("Back Link")
|
||||
|
||||
const arrowText = new Component("@budibase/standard-components/text")
|
||||
.type("none")
|
||||
.normalStyle({
|
||||
"margin-right": "4px",
|
||||
"margin-left": "4px",
|
||||
})
|
||||
.text(">")
|
||||
.instanceName("Arrow")
|
||||
|
||||
const textStyling = {
|
||||
color: "#000000",
|
||||
}
|
||||
if (capitalise) {
|
||||
textStyling["text-transform"] = "capitalize"
|
||||
}
|
||||
const identifierText = new Component("@budibase/standard-components/text")
|
||||
.type("none")
|
||||
.normalStyle(textStyling)
|
||||
.text(text)
|
||||
.instanceName("Identifier")
|
||||
|
||||
return new Component("@budibase/standard-components/container")
|
||||
.type("div")
|
||||
.normalStyle({
|
||||
"font-size": "14px",
|
||||
color: "#757575",
|
||||
})
|
||||
.instanceName("Breadcrumbs")
|
||||
.addChild(link)
|
||||
.addChild(arrowText)
|
||||
.addChild(identifierText)
|
||||
}
|
||||
|
||||
export function makeSaveButton(table) {
|
||||
return new Component("@budibase/standard-components/button")
|
||||
.normalStyle({
|
||||
background: "#000000",
|
||||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#fff",
|
||||
"font-family": "Inter",
|
||||
"font-weight": "500",
|
||||
"font-size": "14px",
|
||||
"margin-left": "16px",
|
||||
})
|
||||
.hoverStyle({
|
||||
background: "#4285f4",
|
||||
})
|
||||
.text("Save")
|
||||
.customProps({
|
||||
className: "",
|
||||
disabled: false,
|
||||
onClick: [
|
||||
{
|
||||
parameters: {
|
||||
contextPath: "data",
|
||||
tableId: table._id,
|
||||
},
|
||||
"##eventHandlerType": "Save Row",
|
||||
},
|
||||
{
|
||||
parameters: {
|
||||
url: rowListUrl(table),
|
||||
},
|
||||
"##eventHandlerType": "Navigate To",
|
||||
},
|
||||
],
|
||||
})
|
||||
.instanceName("Save Button")
|
||||
}
|
||||
|
||||
export function makeTitleContainer(title) {
|
||||
const heading = new Component("@budibase/standard-components/heading")
|
||||
.normalStyle({
|
||||
margin: "0px",
|
||||
"margin-bottom": "0px",
|
||||
"margin-right": "0px",
|
||||
"margin-top": "0px",
|
||||
"margin-left": "0px",
|
||||
flex: "1 1 auto",
|
||||
})
|
||||
.type("h3")
|
||||
.instanceName("Title")
|
||||
.text(title)
|
||||
|
||||
return new Component("@budibase/standard-components/container")
|
||||
.type("div")
|
||||
.normalStyle({
|
||||
display: "flex",
|
||||
"flex-direction": "row",
|
||||
"justify-content": "space-between",
|
||||
"align-items": "center",
|
||||
"margin-top": "32px",
|
||||
"margin-bottom": "32px",
|
||||
})
|
||||
.instanceName("Title Container")
|
||||
.addChild(heading)
|
||||
}
|
||||
|
|
|
@ -62,7 +62,10 @@
|
|||
const listScreen = screens.find(screen =>
|
||||
screen.props._instanceName.endsWith("List")
|
||||
)
|
||||
await store.actions.components.links.save(listScreen.routing.route, table.name)
|
||||
await store.actions.components.links.save(
|
||||
listScreen.routing.route,
|
||||
table.name
|
||||
)
|
||||
|
||||
// Navigate to new table
|
||||
$goto(`./table/${table._id}`)
|
||||
|
|
|
@ -25,7 +25,9 @@
|
|||
<DataList on:change bind:value={parameter.value}>
|
||||
<option value="" />
|
||||
{#each $allScreens as screen}
|
||||
<option value={screen.routing.route}>{screen.props._instanceName}</option>
|
||||
<option value={screen.routing.route}>
|
||||
{screen.props._instanceName}
|
||||
</option>
|
||||
{/each}
|
||||
</DataList>
|
||||
{:else}
|
||||
|
|
|
@ -43,7 +43,7 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
|
|||
return sanitize(url)
|
||||
}
|
||||
|
||||
const routes = screens.map(s => makeRootedPath(s.route))
|
||||
const routes = screens.map(s => makeRootedPath(s.routing?.route))
|
||||
let fallback = routes.findIndex(([p]) => p === makeRootedPath("*"))
|
||||
if (fallback < 0) fallback = 0
|
||||
|
||||
|
|
|
@ -2,8 +2,38 @@ const { getRoutingInfo } = require("../../utilities/routing")
|
|||
const { AccessController } = require("../../utilities/security/accessLevels")
|
||||
|
||||
async function getRoutingStructure(appId) {
|
||||
let baseRouting = await getRoutingInfo(appId)
|
||||
return baseRouting
|
||||
const screenRoutes = await getRoutingInfo(appId)
|
||||
const routing = {}
|
||||
for (let screenRoute of screenRoutes) {
|
||||
const fullpath = screenRoute.routing.route
|
||||
// replace the first value with the home route
|
||||
const subpaths = ["/"].concat(fullpath.split("/").splice(1))
|
||||
// special case for when it is simply the home route "/", this creates a weird scenario
|
||||
if (subpaths[1] === "") {
|
||||
subpaths.splice(1, 1)
|
||||
}
|
||||
const accessLevel = screenRoute.routing.accessLevelId
|
||||
// iterate through the tree initially to flesh out all the required subpaths
|
||||
let currentPath = routing,
|
||||
nextSubpath = routing
|
||||
for (let subpath of subpaths) {
|
||||
if (!nextSubpath[subpath]) {
|
||||
nextSubpath[subpath] = {
|
||||
subpaths: {},
|
||||
}
|
||||
}
|
||||
currentPath = nextSubpath ? nextSubpath : currentPath[subpath]
|
||||
nextSubpath = currentPath[subpath].subpaths
|
||||
}
|
||||
const correctPath = currentPath[subpaths[subpaths.length - 1]]
|
||||
if (!correctPath.screens) {
|
||||
correctPath.screens = {}
|
||||
}
|
||||
correctPath.screens[accessLevel] = screenRoute.id
|
||||
correctPath.fullpath = fullpath
|
||||
}
|
||||
|
||||
return { routes: routing }
|
||||
}
|
||||
|
||||
exports.fetch = async ctx => {
|
||||
|
@ -14,4 +44,5 @@ exports.clientFetch = async ctx => {
|
|||
const routing = getRoutingStructure(ctx.appId)
|
||||
// use the access controller to pick which access level is applicable to this user
|
||||
const accessController = new AccessController(ctx.appId)
|
||||
// TODO: iterate through the routes and pick which the user can access
|
||||
}
|
||||
|
|
|
@ -4,7 +4,7 @@ const compress = require("koa-compress")
|
|||
const zlib = require("zlib")
|
||||
const { budibaseAppsDir } = require("../utilities/budibaseDir")
|
||||
const { isDev } = require("../utilities")
|
||||
const {mainRoutes, authRoutes, staticRoutes} = require("./routes")
|
||||
const { mainRoutes, authRoutes, staticRoutes } = require("./routes")
|
||||
|
||||
const router = new Router()
|
||||
const env = require("../environment")
|
||||
|
|
|
@ -18,7 +18,7 @@ function AccessLevel(id, name, inherits = null) {
|
|||
|
||||
exports.BUILTIN_LEVELS = {
|
||||
ADMIN: new AccessLevel(BUILTIN_IDS.ADMIN, "Admin", BUILTIN_IDS.POWER),
|
||||
POWER: new AccessLevel(BUILTIN_IDS.POWER, "Admin", BUILTIN_IDS.BASIC),
|
||||
POWER: new AccessLevel(BUILTIN_IDS.POWER, "Power", BUILTIN_IDS.BASIC),
|
||||
BASIC: new AccessLevel(BUILTIN_IDS.BASIC, "Basic", BUILTIN_IDS.ANON),
|
||||
ANON: new AccessLevel(BUILTIN_IDS.ANON, "Anonymous"),
|
||||
BUILDER: new AccessLevel(BUILTIN_IDS.BUILDER, "Builder"),
|
||||
|
|
Loading…
Reference in New Issue