From 6ea9809b12549ba85142b365b866daff259eaf54 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 15 Oct 2020 16:37:50 +0100 Subject: [PATCH 01/21] Improve login component logo styles --- packages/standard-components/src/Login.svelte | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte index 42db74c02e..1ddefb3f28 100644 --- a/packages/standard-components/src/Login.svelte +++ b/packages/standard-components/src/Login.svelte @@ -91,16 +91,20 @@ .content { display: flex; flex-direction: column; - align-items: center; + align-items: stretch; justify-content: center; } .logo-container { margin-bottom: 10px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; } .logo-container > img { - height: 80px; + max-height: 80px; max-width: 200px; margin-bottom: 20px; } @@ -137,7 +141,7 @@ .form-root { display: flex; flex-direction: column; - align-items: center; + align-items: stretch; width: 300px; } @@ -186,4 +190,8 @@ border-color: #393c44; color: #393c44; } + + h2 { + text-align: center; + } From e871b45a2884e778ae2542e352645cf68249c8fa Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 08:34:17 +0100 Subject: [PATCH 02/21] Change Text component display to inline-block to text-transform works --- packages/standard-components/src/Text.svelte | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte index 55b8fb762b..d1b5c4a567 100644 --- a/packages/standard-components/src/Text.svelte +++ b/packages/standard-components/src/Text.svelte @@ -1,11 +1,7 @@ + +
+ {#if idFields.length === 0} +
+ Delete row can only be used within a component that provides data, such as + a List +
+ {:else} + + + {/if} +
+ + diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/index.js b/packages/builder/src/components/userInterface/EventsEditor/actions/index.js index 109a3104f8..1c07356ee9 100644 --- a/packages/builder/src/components/userInterface/EventsEditor/actions/index.js +++ b/packages/builder/src/components/userInterface/EventsEditor/actions/index.js @@ -1,5 +1,6 @@ import NavigateTo from "./NavigateTo.svelte" import SaveRow from "./SaveRow.svelte" +import DeleteRow from "./DeleteRow.svelte" // defines what actions are available, when adding a new one // the component is the setup panel for the action @@ -11,6 +12,10 @@ export default [ name: "Save Row", component: SaveRow, }, + { + name: "Delete Row", + component: DeleteRow, + }, { name: "Navigate To", component: NavigateTo, diff --git a/packages/client/src/api/index.js b/packages/client/src/api/index.js index 6082accb51..f5f129d9c8 100644 --- a/packages/client/src/api/index.js +++ b/packages/client/src/api/index.js @@ -67,6 +67,11 @@ const updateRow = async (params, state) => { }) } +const deleteRow = async params => + await del({ + url: `/api/${params.tableId}/rows/${params.rowId}/${params.revId}`, + }) + const makeRowRequestBody = (parameters, state) => { // start with the row thats currently in context const body = { ...(state.data || {}) } @@ -103,4 +108,5 @@ export default { authenticate: authenticate(apiOpts), saveRow, updateRow, + deleteRow, } diff --git a/packages/client/src/state/eventHandlers.js b/packages/client/src/state/eventHandlers.js index 629631d001..7461913929 100644 --- a/packages/client/src/state/eventHandlers.js +++ b/packages/client/src/state/eventHandlers.js @@ -8,6 +8,7 @@ export const eventHandlers = routeTo => { "Navigate To": param => routeTo(param && param.url), "Update Row": api.updateRow, "Save Row": api.saveRow, + "Delete Row": api.deleteRow, "Trigger Workflow": api.triggerWorkflow, } From 82b8e3e0ed4a534d40a97784ce6d02364d4327c8 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 08:38:04 +0100 Subject: [PATCH 07/21] Add XS shadow to top nav header to act as a slight border --- .../src/utilities/appDirectoryTemplate/pages/main/page.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json index 436f5b32df..ea605acf34 100644 --- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json +++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json @@ -19,7 +19,8 @@ "justify-content": "flex-start", "align-items": "flex-start", "background": "#fff", - "width": "100%" + "width": "100%", + "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)" }, "hover": {}, "active": {}, From fbe33226c186a049799df9889d56e774c2d02288 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 08:38:27 +0100 Subject: [PATCH 08/21] Add new template for new row autoscreen --- .../store/screenTemplates/newRowScreen.js | 250 +++++++++++++----- 1 file changed, 183 insertions(+), 67 deletions(-) diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js index 571007c092..0097b56dc9 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js @@ -1,10 +1,8 @@ export default function(tables) { return tables.map(table => { - const fields = Object.keys(table.schema) - const heading = fields.length > 0 ? `{{ data.${fields[0]} }}` : "Add Row" return { name: `${table.name} - New`, - create: () => createScreen(table, heading), + create: () => createScreen(table), id: NEW_ROW_TEMPLATE, } }) @@ -12,10 +10,10 @@ export default function(tables) { export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE" -const createScreen = (table, heading) => ({ +const createScreen = table => ({ props: { - _id: "", - _component: "@budibase/standard-components/newrow", + _id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c", + _component: "@budibase/standard-components/rowdetail", _styles: { normal: {}, hover: {}, @@ -25,43 +23,22 @@ const createScreen = (table, heading) => ({ table: table._id, _children: [ { - _id: "", - _component: "@budibase/standard-components/heading", - _styles: { - normal: {}, - hover: {}, - active: {}, - selected: {}, - }, - _code: "", - className: "", - text: heading, - type: "h1", - _instanceName: "Heading 1", - _children: [], - }, - { - _id: "", - _component: "@budibase/standard-components/dataform", - _styles: { - normal: {}, - hover: {}, - active: {}, - selected: {}, - }, - _code: "", - _instanceName: `${table.name} Form`, - _children: [], - }, - { - _id: "", + _id: "ccad6cc135c7947a7ba9c631f655d6e0f", _component: "@budibase/standard-components/container", _styles: { normal: { - display: "flex", - "flex-direction": "row", - "align-items": "center", - "justify-content": "flex-end", + 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: {}, @@ -71,37 +48,187 @@ const createScreen = (table, heading) => ({ className: "", onLoad: [], type: "div", - _instanceName: "Buttons Container", + _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610", + _instanceName: "Container", _children: [ { - _id: "", - _component: "@budibase/standard-components/button", + _id: "c6e91622ba7984f468f70bf4bf5120246", + _component: "@budibase/standard-components/container", _styles: { normal: { - "margin-right": "20px", + "font-size": "14px", + color: "#757575", }, hover: {}, active: {}, selected: {}, }, _code: "", - text: "Back", className: "", - disabled: false, - onClick: [ + onLoad: [], + type: "div", + _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610", + _instanceName: "Breadcrumbs", + _children: [ { - parameters: { - url: `/${table.name.toLowerCase()}`, + _id: "caa33353c252c4931b2a51b48a559a7fc", + _component: "@budibase/standard-components/link", + _styles: { + normal: { + color: "#757575", + "text-transform": "capitalize", + }, + hover: { + color: "#4285f4", + }, + active: {}, + selected: {}, }, - "##eventHandlerType": "Navigate To", + _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", + }, + hover: {}, + active: {}, + selected: {}, + }, + _code: "", + text: "New", + type: "none", + _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610", + _instanceName: "Identifier", + _children: [], }, ], - _instanceName: "Back Button", - _children: [], }, { - _id: "", - _component: "@budibase/standard-components/button", + _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", + }, + hover: {}, + active: {}, + selected: {}, + }, + _code: "", + className: "", + text: "New Row", + type: "h3", + _instanceName: "Title", + _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", + "margin-left": "16px", + }, + hover: { + background: "#9e9e9e", + }, + active: {}, + selected: {}, + }, + _code: "", + text: "Save", + className: "", + disabled: false, + onClick: [ + { + parameters: { + contextPath: "data", + tableId: table._id, + }, + "##eventHandlerType": "Save Row", + }, + { + parameters: { + url: `/${table.name.toLowerCase()}`, + }, + "##eventHandlerType": "Navigate To", + }, + ], + _instanceName: "Save Button", + _children: [], + }, + ], + }, + { + _id: "c5e6c98d7363640f9ad3a7d19c8c10f67", + _component: "@budibase/standard-components/dataformwide", _styles: { normal: {}, hover: {}, @@ -109,19 +236,8 @@ const createScreen = (table, heading) => ({ selected: {}, }, _code: "", - text: "Save", - className: "", - disabled: false, - onClick: [ - { - parameters: { - contextPath: "data", - tableId: table._id, - }, - "##eventHandlerType": "Save Row", - }, - ], - _instanceName: "Save Button", + _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610", + _instanceName: "Form", _children: [], }, ], From cfc823557264e60c96e5fac661d245956c792714 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 08:38:40 +0100 Subject: [PATCH 09/21] Add new template for row details autoscreen --- .../store/screenTemplates/rowDetailScreen.js | 293 ++++++++++++++---- 1 file changed, 229 insertions(+), 64 deletions(-) diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js index 58ca2f6d05..5e30420728 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js @@ -1,7 +1,8 @@ export default function(tables) { return tables.map(table => { - const fields = Object.keys(table.schema) - const heading = fields.length > 0 ? `{{ data.${fields[0]} }}` : "Detail" + const heading = table.primaryDisplay + ? `{{ data.${table.primaryDisplay} }}` + : null return { name: `${table.name} - Detail`, create: () => createScreen(table, heading), @@ -14,7 +15,7 @@ export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE" const createScreen = (table, heading) => ({ props: { - _id: "", + _id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c", _component: "@budibase/standard-components/rowdetail", _styles: { normal: {}, @@ -25,43 +26,22 @@ const createScreen = (table, heading) => ({ table: table._id, _children: [ { - _id: "", - _component: "@budibase/standard-components/heading", - _styles: { - normal: {}, - hover: {}, - active: {}, - selected: {}, - }, - _code: "", - className: "", - text: heading, - type: "h1", - _instanceName: "Heading 1", - _children: [], - }, - { - _id: "", - _component: "@budibase/standard-components/dataform", - _styles: { - normal: {}, - hover: {}, - active: {}, - selected: {}, - }, - _code: "", - _instanceName: `${table.name} Form`, - _children: [], - }, - { - _id: "", + _id: "ccad6cc135c7947a7ba9c631f655d6e0f", _component: "@budibase/standard-components/container", _styles: { normal: { - display: "flex", - "flex-direction": "row", - "align-items": "center", - "justify-content": "flex-end", + 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: {}, @@ -71,37 +51,233 @@ const createScreen = (table, heading) => ({ className: "", onLoad: [], type: "div", - _instanceName: "Buttons Container", + _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610", + _instanceName: "Container", _children: [ { - _id: "", - _component: "@budibase/standard-components/button", + _id: "c6e91622ba7984f468f70bf4bf5120246", + _component: "@budibase/standard-components/container", _styles: { normal: { - "margin-right": "20px", + "font-size": "14px", + color: "#757575", }, hover: {}, active: {}, selected: {}, }, _code: "", - text: "Back", className: "", - disabled: false, - onClick: [ + onLoad: [], + type: "div", + _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610", + _instanceName: "Breadcrumbs", + _children: [ { - parameters: { - url: `/${table.name.toLowerCase()}`, + _id: "caa33353c252c4931b2a51b48a559a7fc", + _component: "@budibase/standard-components/link", + _styles: { + normal: { + color: "#757575", + "text-transform": "capitalize", + }, + hover: { + color: "#4285f4", + }, + active: {}, + selected: {}, }, - "##eventHandlerType": "Navigate To", + _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: [], }, ], - _instanceName: "Back Button", - _children: [], }, { - _id: "", - _component: "@budibase/standard-components/button", + _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: "#000000", + }, + active: {}, + selected: {}, + }, + _code: "", + text: "Delete", + className: "", + disabled: false, + onClick: [ + { + parameters: { + rowId: "{{ data._id }}", + revId: "{{ data._rev }}", + tableId: table._id, + }, + "##eventHandlerType": "Delete Row", + }, + { + parameters: { + url: `/${table.name.toLowerCase()}`, + }, + "##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: "#9e9e9e", + }, + active: {}, + selected: {}, + }, + _code: "", + text: "Save", + className: "", + disabled: false, + onClick: [ + { + parameters: { + contextPath: "data", + tableId: table._id, + }, + "##eventHandlerType": "Save Row", + }, + { + parameters: { + url: `/${table.name.toLowerCase()}`, + }, + "##eventHandlerType": "Navigate To", + }, + ], + _instanceName: "Save Button", + _children: [], + }, + ], + }, + { + _id: "c5e6c98d7363640f9ad3a7d19c8c10f67", + _component: "@budibase/standard-components/dataformwide", _styles: { normal: {}, hover: {}, @@ -109,19 +285,8 @@ const createScreen = (table, heading) => ({ selected: {}, }, _code: "", - text: "Save", - className: "", - disabled: false, - onClick: [ - { - parameters: { - contextPath: "data", - tableId: table._id, - }, - "##eventHandlerType": "Save Row", - }, - ], - _instanceName: "Save Button", + _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610", + _instanceName: "Form", _children: [], }, ], From 92a6bd1a6d70e63f45f48e476f66cf61069a3f1b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 09:16:25 +0100 Subject: [PATCH 10/21] Fix popstate client routing events --- packages/client/src/render/screenRouter.js | 31 +++++++++++++--------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js index 14337c4319..e76c525174 100644 --- a/packages/client/src/render/screenRouter.js +++ b/packages/client/src/render/screenRouter.js @@ -3,21 +3,28 @@ import appStore from "../state/store" import { parseAppIdFromCookie } from "./getAppId" export const screenRouter = ({ screens, onScreenSelected, window }) => { + const isRunningLocally = () => { + const hostname = (window.location && window.location.hostname) || "" + return ( + hostname === "localhost" || + hostname === "127.0.0.1" || + hostname.startsWith("192.168") + ) + } + const makeRootedPath = url => { - const hostname = window.location && window.location.hostname - if (hostname) { - if ( - hostname === "localhost" || - hostname === "127.0.0.1" || - hostname.startsWith("192.168") - ) { - const appId = parseAppIdFromCookie(window.document.cookie) - if (url) { - if (url.startsWith(appId)) return url - return `/${appId}${url.startsWith("/") ? "" : "/"}${url}` + if (isRunningLocally()) { + const appId = parseAppIdFromCookie(window.document.cookie) + if (url) { + if (!url.startsWith("/")) { + url = `/${url}` } - return appId + if (url.startsWith(`/${appId}`)) { + return url + } + return `/${appId}${url}` } + return `/${appId}` } return url } From 853c31594c6a73c08879618e673df7a24007349b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 09:16:36 +0100 Subject: [PATCH 11/21] Fix new row screen template --- .../src/builderStore/store/screenTemplates/newRowScreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js index 0097b56dc9..708c9d80ee 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js @@ -13,7 +13,7 @@ export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE" const createScreen = table => ({ props: { _id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c", - _component: "@budibase/standard-components/rowdetail", + _component: "@budibase/standard-components/newrow", _styles: { normal: {}, hover: {}, From 0c61fe60a2fc5eac3830a846576f7e4c3d2f97fb Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 09:37:19 +0100 Subject: [PATCH 12/21] Fix crashing whenever hitting an API error from client app --- packages/client/src/api/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/api/index.js b/packages/client/src/api/index.js index f5f129d9c8..f16daea139 100644 --- a/packages/client/src/api/index.js +++ b/packages/client/src/api/index.js @@ -37,7 +37,7 @@ const del = apiCall("DELETE") const ERROR_MEMBER = "##error" const error = message => { const err = { [ERROR_MEMBER]: message } - appStore.update(s => s["##error_message"], message) + // appStore.update(s => s["##error_message"], message) return err } From 623836ca1bcbdbf252da5bf662277f20620aad07 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 12:39:26 +0100 Subject: [PATCH 13/21] Bump BBUI version --- packages/builder/package.json | 2 +- packages/builder/yarn.lock | 8 ++++---- packages/standard-components/package.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/builder/package.json b/packages/builder/package.json index 4ddf917bee..854c315580 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -63,7 +63,7 @@ } }, "dependencies": { - "@budibase/bbui": "^1.41.0", + "@budibase/bbui": "^1.43.1", "@budibase/client": "^0.2.1", "@budibase/colorpicker": "^1.0.1", "@fortawesome/fontawesome-free": "^5.14.0", diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock index dfeebc7214..32da0f0c6f 100644 --- a/packages/builder/yarn.lock +++ b/packages/builder/yarn.lock @@ -709,10 +709,10 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" -"@budibase/bbui@^1.41.0": - version "1.41.0" - resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.41.0.tgz#cb239db3071a4a6c6f0ef48ddde55f5eab9808ce" - integrity sha512-pT5u6HDdXcylWgSE1TBt3jETg92GwgAXpUsBVqX+OUE/2lNbmThb8egAckpemHDvm91FAL0nApQYpV7c/qLzvw== +"@budibase/bbui@^1.43.1": + version "1.43.1" + resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.43.1.tgz#d3e5740c2de2bed6817a7f5f05801cbcc150024a" + integrity sha512-SpRoR3fdm1jmrVuKfbayG2RwzRDvZCrL/VowrCOi+S7vveijjzAlQCgYo4EsC+p/OW/r86t+DdMEPynon5XzsA== dependencies: sirv-cli "^0.4.6" svelte-flatpickr "^2.4.0" diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json index 77e1cee746..24048888f4 100644 --- a/packages/standard-components/package.json +++ b/packages/standard-components/package.json @@ -36,7 +36,7 @@ "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691", "dependencies": { "@beyonk/svelte-googlemaps": "^2.2.0", - "@budibase/bbui": "^1.41.0", + "@budibase/bbui": "^1.43.1", "@budibase/svelte-ag-grid": "^0.0.13", "@fortawesome/fontawesome-free": "^5.14.0", "@svelteschool/svelte-forms": "^0.7.0", From ccb4392a67f75231a4b12770992d44119b7e58e2 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 12:55:20 +0100 Subject: [PATCH 14/21] Make detail column sticky and left orientated and fix crash with options inside grid --- packages/standard-components/components.json | 2 +- .../src/DataGrid/Component.svelte | 48 +++++++++++++------ .../src/DataGrid/ViewDetails/Cell.svelte | 19 +++++--- .../src/DataGrid/customRenderer.js | 22 +++++---- 4 files changed, 60 insertions(+), 31 deletions(-) diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 20929de9f4..d19b2ad85f 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -240,7 +240,7 @@ }, "height": { "type": "number", - "default": "500" + "default": "540" }, "pagination": { "type": "bool", diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte index baaebf20aa..4d51da2b4d 100644 --- a/packages/standard-components/src/DataGrid/Component.svelte +++ b/packages/standard-components/src/DataGrid/Component.svelte @@ -81,19 +81,29 @@ autoHeight: true, } }) - columnDefs = [...columnDefs, { - headerName: 'Details', - field: '_id', - width: 25, - flex: 0, - editable: false, - sortable: false, - cellRenderer: getRenderer({ - type: '_id', - options: detailUrl - }), - autoHeight: true, - }] + + if (detailUrl) { + columnDefs = [ + ...columnDefs, + { + headerName: "Detail", + field: "_id", + minWidth: 100, + width: 100, + flex: 0, + editable: false, + sortable: false, + cellRenderer: getRenderer({ + type: "_id", + options: detailUrl, + }), + autoHeight: true, + pinned: "left", + filter: false, + }, + ] + } + dataLoaded = true } }) @@ -148,7 +158,7 @@ href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" /> -
+
{#if dataLoaded} {#if canAddDelete}
@@ -182,6 +192,16 @@
\ No newline at end of file + a { + display: none; + } + diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js index aca4e7d39e..a399d1ae15 100644 --- a/packages/standard-components/src/DataGrid/customRenderer.js +++ b/packages/standard-components/src/DataGrid/customRenderer.js @@ -17,14 +17,18 @@ const renderers = new Map([ export function getRenderer(schema, editable) { if (renderers.get(schema.type)) { - return renderers.get(schema.type)(schema.options, editable) + return renderers.get(schema.type)( + schema.options, + schema.constraints, + editable + ) } else { return false } } /* eslint-disable no-unused-vars */ -function booleanRenderer(options, editable) { +function booleanRenderer(options, constraints, editable) { return params => { const toggle = e => { params.value = !params.value @@ -46,7 +50,7 @@ function booleanRenderer(options, editable) { } } /* eslint-disable no-unused-vars */ -function attachmentRenderer(options, editable) { +function attachmentRenderer(options, constraints, editable) { return params => { const container = document.createElement("div") @@ -68,7 +72,7 @@ function attachmentRenderer(options, editable) { } } /* eslint-disable no-unused-vars */ -function dateRenderer(options, editable) { +function dateRenderer(options, constraints, editable) { return function(params) { const container = document.createElement("div") const toggle = e => { @@ -88,7 +92,7 @@ function dateRenderer(options, editable) { } } -function optionsRenderer({ inclusion }, editable) { +function optionsRenderer(options, constraints, editable) { return params => { if (!editable) return params.value const container = document.createElement("div") @@ -103,7 +107,7 @@ function optionsRenderer({ inclusion }, editable) { target: container, props: { value: params.value, - options: inclusion, + options: constraints.inclusion, }, }) @@ -113,7 +117,7 @@ function optionsRenderer({ inclusion }, editable) { } } /* eslint-disable no-unused-vars */ -function linkedRowRenderer(options, editable) { +function linkedRowRenderer(options, constraints, editable) { return params => { let container = document.createElement("div") container.style.display = "grid" @@ -133,11 +137,11 @@ function linkedRowRenderer(options, editable) { } /* eslint-disable no-unused-vars */ -function viewDetailsRenderer(options) { +function viewDetailsRenderer(options, constraints, editable) { return params => { let container = document.createElement("div") container.style.display = "grid" - container.style.placeItems = "center" + container.style.alignItems = "center" container.style.height = "100%" new ViewDetails({ From 99cd1e4a5160660d21603fcf8fbe88602f56a2a3 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 15:14:36 +0100 Subject: [PATCH 15/21] Bump BBUI version --- packages/builder/package.json | 2 +- packages/builder/yarn.lock | 8 ++++---- packages/standard-components/package.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/builder/package.json b/packages/builder/package.json index 511ab26d0e..d9a4f56ef3 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -63,7 +63,7 @@ } }, "dependencies": { - "@budibase/bbui": "^1.43.1", + "@budibase/bbui": "^1.44.0", "@budibase/client": "^0.2.2", "@budibase/colorpicker": "^1.0.1", "@fortawesome/fontawesome-free": "^5.14.0", diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock index 32da0f0c6f..7da63d089e 100644 --- a/packages/builder/yarn.lock +++ b/packages/builder/yarn.lock @@ -709,10 +709,10 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" -"@budibase/bbui@^1.43.1": - version "1.43.1" - resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.43.1.tgz#d3e5740c2de2bed6817a7f5f05801cbcc150024a" - integrity sha512-SpRoR3fdm1jmrVuKfbayG2RwzRDvZCrL/VowrCOi+S7vveijjzAlQCgYo4EsC+p/OW/r86t+DdMEPynon5XzsA== +"@budibase/bbui@^1.44.0": + version "1.44.0" + resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.44.0.tgz#0c00d98173a8b0ab757f61e349ed366bf640be4b" + integrity sha512-YlcRSgOZct8W07z9IaOXNFrVvG0EUWxzcfuEOfXZRviGxm9TIhe/G6T9Cai1ZgPGicnKXa0dPAT3UrzIVB5xJg== dependencies: sirv-cli "^0.4.6" svelte-flatpickr "^2.4.0" diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json index 54f7ae4167..251f9f605c 100644 --- a/packages/standard-components/package.json +++ b/packages/standard-components/package.json @@ -36,7 +36,7 @@ "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691", "dependencies": { "@beyonk/svelte-googlemaps": "^2.2.0", - "@budibase/bbui": "^1.43.1", + "@budibase/bbui": "^1.44.0", "@budibase/svelte-ag-grid": "^0.0.13", "@fortawesome/fontawesome-free": "^5.14.0", "@svelteschool/svelte-forms": "^0.7.0", From 41d067810f881643dc81e30a153547c05d0c6eaa Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 15:15:00 +0100 Subject: [PATCH 16/21] Update template auto screens --- .../store/screenTemplates/newRowScreen.js | 2 +- .../store/screenTemplates/rowDetailScreen.js | 4 +- .../store/screenTemplates/rowListScreen.js | 158 ++++++++++++------ 3 files changed, 109 insertions(+), 55 deletions(-) diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js index 708c9d80ee..94b80c824f 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js @@ -197,7 +197,7 @@ const createScreen = table => ({ "margin-left": "16px", }, hover: { - background: "#9e9e9e", + background: "#4285f4", }, active: {}, selected: {}, diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js index 5e30420728..6173559fb9 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js @@ -204,7 +204,7 @@ const createScreen = (table, heading) => ({ }, hover: { background: "transparent", - color: "#000000", + color: "#4285f4", }, active: {}, selected: {}, @@ -246,7 +246,7 @@ const createScreen = (table, heading) => ({ "font-size": "14px", }, hover: { - background: "#9e9e9e", + background: "#4285f4", }, active: {}, selected: {}, diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js index c01fc9e3ae..2935d36ce1 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js @@ -12,7 +12,7 @@ export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE" const createScreen = table => ({ props: { - _id: "", + _id: "c7365379815e4457dbe703a886c2da43b", _component: "@budibase/standard-components/container", _styles: { normal: {}, @@ -23,14 +23,23 @@ const createScreen = table => ({ type: "div", _children: [ { - _id: "", + _id: "cf51241fc063d4d87be032dd509fe0244", _component: "@budibase/standard-components/container", _styles: { normal: { - display: "flex", - "flex-direction": "row", - "justify-content": "space-between", - "align-items": "center", + 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", }, hover: {}, active: {}, @@ -40,69 +49,114 @@ const createScreen = table => ({ className: "", onLoad: [], type: "div", - _instanceName: "Header", + _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610", + _instanceName: "Container", _children: [ { - _id: "", - _component: "@budibase/standard-components/heading", + _id: "c73294c301fd145aabe9bbbbd96a150ac", + _component: "@budibase/standard-components/container", _styles: { - normal: {}, + normal: { + display: "flex", + "flex-direction": "row", + "justify-content": "space-between", + "align-items": "center", + "margin-bottom": "32px", + }, hover: {}, active: {}, selected: {}, }, _code: "", className: "", - text: `${table.name} List`, - type: "h1", - _instanceName: "Heading 1", - _children: [], - }, - { - _id: "", - _component: "@budibase/standard-components/button", - _styles: { - normal: {}, - hover: {}, - active: {}, - selected: {}, - }, - _code: "", - text: "Create New", - className: "", - disabled: false, - onClick: [ + onLoad: [], + type: "div", + _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610", + _instanceName: "Title Container", + _children: [ { - parameters: { - url: `/${table.name}/new`, + _id: "c2b77901df95a4d1ca7204c58300bc94b", + _component: "@budibase/standard-components/heading", + _styles: { + normal: { + margin: "0px", + flex: "1 1 auto", + "text-transform": "capitalize", + }, + hover: {}, + active: {}, + selected: {}, }, - "##eventHandlerType": "Navigate To", + _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: `/${table.name.toLowerCase()}/new`, + }, + "##eventHandlerType": "Navigate To", + }, + ], + _instanceName: "New Button", + _children: [], }, ], - _instanceName: "Create New Button", + }, + { + _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`, }, ], }, - { - _id: "", - _component: "@budibase/standard-components/datagrid", - _styles: { - normal: {}, - hover: {}, - active: {}, - selected: {}, - }, - _code: "", - datasource: { - label: "Deals", - name: `all_${table._id}`, - tableId: table._id, - type: "table", - }, - _instanceName: `${table.name} Table`, - _children: [], - }, ], _instanceName: `${table.name} - List`, _code: "", From 4aa9e2d1790f3f22cf93ce5c14bd9cacb824d773 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 15:16:29 +0100 Subject: [PATCH 17/21] Add new DetailScreenSelect component for selecting only detail screens and update detail linking in grids --- .../userInterface/DetailScreenSelect.svelte | 49 +++++++++++++++++++ .../userInterface/temporaryPanelStructure.js | 6 +-- .../src/DataGrid/Component.svelte | 8 +-- .../src/DataGrid/ViewDetails/Cell.svelte | 7 +-- .../src/DataGrid/customRenderer.js | 13 +++-- 5 files changed, 63 insertions(+), 20 deletions(-) create mode 100644 packages/builder/src/components/userInterface/DetailScreenSelect.svelte diff --git a/packages/builder/src/components/userInterface/DetailScreenSelect.svelte b/packages/builder/src/components/userInterface/DetailScreenSelect.svelte new file mode 100644 index 0000000000..1e2908ab54 --- /dev/null +++ b/packages/builder/src/components/userInterface/DetailScreenSelect.svelte @@ -0,0 +1,49 @@ + + +
+ + + {/each} + +
+ + diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index cb35d140c4..a24d101f5d 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -6,6 +6,7 @@ import TableViewSelect from "components/userInterface/TableViewSelect.svelte" import TableViewFieldSelect from "components/userInterface/TableViewFieldSelect.svelte" import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte" import ScreenSelect from "components/userInterface/ScreenSelect.svelte" +import DetailScreenSelect from "components/userInterface/DetailScreenSelect.svelte" import { IconSelect } from "components/userInterface/IconSelect" import Colorpicker from "@budibase/colorpicker" @@ -328,10 +329,9 @@ export default { control: TableViewSelect, }, { - label: "Table URL", + label: "Detail URL", key: "detailUrl", - placeholder: "tableName", - control: ScreenSelect, + control: DetailScreenSelect, }, { label: "Editable", diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte index 9930f90aca..0d80990513 100644 --- a/packages/standard-components/src/DataGrid/Component.svelte +++ b/packages/standard-components/src/DataGrid/Component.svelte @@ -94,7 +94,7 @@ sortable: false, cellRenderer: getRenderer({ type: "_id", - options: detailUrl, + options: { detailUrl }, }), autoHeight: true, pinned: "left", @@ -179,15 +179,9 @@
From a978062a02ae4f12686ebe1521e9294a2d0fd9dc Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 15:32:30 +0100 Subject: [PATCH 19/21] Set default link font weight to 500 --- .../src/utilities/appDirectoryTemplate/pages/main/page.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json index ea605acf34..44d30a65f1 100644 --- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json +++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json @@ -68,7 +68,7 @@ "_styles": { "normal": { "font-family": "Inter", - "font-weight": "400", + "font-weight": "500", "color": "#000000", "text-decoration-line": "none", "font-size": "16px" From b139144b62ba5fbd1bb8d08a6dd9d5423a86cd54 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 15:32:50 +0100 Subject: [PATCH 20/21] Fix default home page overriding detail pages --- .../main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json index 7c94af517e..5afcf244f2 100644 --- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json +++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json @@ -97,6 +97,6 @@ ], "_instanceName": "Home" }, - "route": "/*", + "route": "/", "name": "d834fea2-1b3e-4320-ab34-f9009f5ecc59" } From 19bfa87859f9ca35860695eff309fd2f8eea7d2b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Oct 2020 16:00:26 +0100 Subject: [PATCH 21/21] Fix link --- packages/client/src/api/index.js | 2 +- packages/standard-components/src/DataGrid/customRenderer.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/client/src/api/index.js b/packages/client/src/api/index.js index f16daea139..7d7c9b52c0 100644 --- a/packages/client/src/api/index.js +++ b/packages/client/src/api/index.js @@ -1,5 +1,5 @@ import { authenticate } from "./authenticate" -import appStore from "../state/store" +// import appStore from "../state/store" const apiCall = method => async ({ url, body }) => { const response = await fetch(url, { diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js index 2ed2910545..d54e91f623 100644 --- a/packages/standard-components/src/DataGrid/customRenderer.js +++ b/packages/standard-components/src/DataGrid/customRenderer.js @@ -6,7 +6,6 @@ import ViewDetails from "./ViewDetails/Cell.svelte" import Select from "./Select/Wrapper.svelte" import DatePicker from "./DateTime/Wrapper.svelte" import RelationshipDisplay from "./Relationship/RelationshipDisplay.svelte" -import { detailUrl } from "./Component.svelte" const renderers = new Map([ ["boolean", booleanRenderer],