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

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

pull/4023/head
mike12345567 6 years ago
parent
f162ce6f03
commit
e793c46097
6 changed files with 307 additions and 561 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 125
      packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
  2. 360
      packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
  3. 254
      packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
  4. 125
      packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
  5. 2
      packages/client/src/render/screenRouter.js
  6. 2
      packages/server/src/utilities/security/accessLevels.js

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

360
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,291 +20,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: [],
},
],
},
{
_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: [],
{
parameters: {
url: rowListUrl(table),
},
],
},
],
_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()
}

254
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,162 +16,102 @@ 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()
}

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

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

Write Preview
Loading…
Cancel
Save