diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js index 58fb4445a2..1e699dad95 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js @@ -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() } diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js index 2ec985b90a..526f457f3e 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js @@ -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() +} diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js index d9243b9b2f..54a066af9c 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js @@ -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() +} diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/BaseStructure.js b/packages/builder/src/builderStore/store/screenTemplates/utils/BaseStructure.js index 7b2bb8e927..71daca9d1b 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/BaseStructure.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/BaseStructure.js @@ -4,8 +4,7 @@ export class BaseStructure { constructor(isScreen) { this._isScreen = isScreen this._children = [] - this._json = { - } + this._json = {} } addChild(child) { diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js index eae2d7f526..89e08cecdb 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js @@ -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", }) -} \ No newline at end of file +} + +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) +} diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte index f73810c340..f064ff923c 100644 --- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte +++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte @@ -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}`) diff --git a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte index 3de945adc5..3475a14eed 100644 --- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte +++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte @@ -25,7 +25,9 @@ + {/each} {:else} diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js index 7711b53acf..23bfa34944 100644 --- a/packages/client/src/render/screenRouter.js +++ b/packages/client/src/render/screenRouter.js @@ -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 diff --git a/packages/server/src/api/controllers/routing.js b/packages/server/src/api/controllers/routing.js index 3be2e3fd41..bd5d991dfa 100644 --- a/packages/server/src/api/controllers/routing.js +++ b/packages/server/src/api/controllers/routing.js @@ -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 } diff --git a/packages/server/src/api/index.js b/packages/server/src/api/index.js index 500ca50ff2..c76eb82643 100644 --- a/packages/server/src/api/index.js +++ b/packages/server/src/api/index.js @@ -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") diff --git a/packages/server/src/utilities/security/accessLevels.js b/packages/server/src/utilities/security/accessLevels.js index e99b635f39..80cc652390 100644 --- a/packages/server/src/utilities/security/accessLevels.js +++ b/packages/server/src/utilities/security/accessLevels.js @@ -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"),