Merge branch 'feature/backend-routing' of github.com:Budibase/budibase into routing-ui

This commit is contained in:
Martin McKeaveney 2020-11-18 13:55:08 +00:00
commit 0f7594e3e2
11 changed files with 365 additions and 572 deletions

View File

@ -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()
}

View File

@ -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,185 +25,20 @@ 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",
},
hover: {},
active: {},
selected: {},
},
_code: "",
className: "",
onLoad: [],
type: "div",
_instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
_instanceName: "Container",
_children: [
{
_id: "c6e91622ba7984f468f70bf4bf5120246",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
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",
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: [],
},
],
},
{
_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: {
})
const deleteButton = new Component("@budibase/standard-components/button")
.normalStyle({
background: "transparent",
"border-width": "0",
"border-style": "None",
@ -205,16 +48,13 @@ const createScreen = (table, heading) => ({
"font-size": "14px",
"margin-right": "8px",
"margin-left": "16px",
},
hover: {
})
.hoverStyle({
background: "transparent",
color: "#4285f4",
},
active: {},
selected: {},
},
_code: "",
text: "Delete",
})
.text("Delete")
.customProps({
className: "",
disabled: false,
onClick: [
@ -233,75 +73,30 @@ const createScreen = (table, heading) => ({
"##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: "",
})
})
.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()
}

View File

@ -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,23 +16,78 @@ 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: [
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: [
{
_id: "cf51241fc063d4d87be032dd509fe0244",
_component: "@budibase/standard-components/container",
_styles: {
normal: {
parameters: {
url: newRowUrl(table),
},
"##eventHandlerType": "Navigate To",
},
],
})
.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",
},
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)",
@ -44,132 +101,18 @@ const createScreen = table => ({
"padding-right": "48px",
"padding-left": "48px",
"margin-bottom": "20px",
},
hover: {},
active: {},
selected: {},
},
_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: `${table.name} - List`,
_code: "",
className: "",
onLoad: [],
},
routing: {
route: rowListUrl(table),
accessLevelId: "",
},
name: "",
})
})
.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()
}

View File

@ -4,8 +4,7 @@ export class BaseStructure {
constructor(isScreen) {
this._isScreen = isScreen
this._children = []
this._json = {
}
this._json = {}
}
addChild(child) {

View File

@ -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",
@ -20,3 +21,125 @@ export function linkComponent(tableName) {
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)
}

View File

@ -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}`)

View File

@ -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}

View File

@ -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

View File

@ -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
}

View File

@ -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")

View File

@ -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"),