MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updates for screen refactor - finishing off getting everything over to the class based system.

This commit is contained in:
mike12345567 2020-11-17 13:25:57 +00:00
parent f162ce6f03
commit e793c46097
6 changed files with 307 additions and 561 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
View File

@ -1,8 +1,7 @@
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 +16,25 @@ 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 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)
.table(table._id)
.route(newRowUrl(table))
.instanceName(`${table.name} - New`)
.name("")
.addChild(container)
.json()
}

304
packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
View File

@ -1,5 +1,8 @@
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 +20,21 @@ 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 +44,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 +69,29 @@ 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()
}

230
packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
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,17 @@ 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()
}

125
packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
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)
}

2
packages/client/src/render/screenRouter.js
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

2
packages/server/src/utilities/security/accessLevels.js
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"),