diff --git a/packages/builder/package.json b/packages/builder/package.json index 52df8902c5..d9a4f56ef3 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -63,7 +63,7 @@ } }, "dependencies": { - "@budibase/bbui": "^1.41.0", + "@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/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js index 571007c092..94b80c824f 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,9 +10,9 @@ export default function(tables) { export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE" -const createScreen = (table, heading) => ({ +const createScreen = table => ({ props: { - _id: "", + _id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c", _component: "@budibase/standard-components/newrow", _styles: { normal: {}, @@ -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: "#4285f4", + }, + 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: [], }, ], diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js index 58ca2f6d05..6173559fb9 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: "#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: `/${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: "#4285f4", + }, + 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: [], }, ], 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: "", 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/EventsEditor/actions/DeleteRow.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte new file mode 100644 index 0000000000..6e6f6b6b21 --- /dev/null +++ b/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte @@ -0,0 +1,91 @@ + + +
+ {#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/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 00b67890fb..d13558f405 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -81,6 +81,7 @@ export const layout = [ { label: "16px", value: "16px" }, { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, + { label: "48px", value: "48px" }, { label: "64px", value: "64px" }, ], }, @@ -98,6 +99,7 @@ export const margin = [ { label: "16px", value: "16px" }, { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, + { label: "48px", value: "48px" }, { label: "64px", value: "64px" }, { label: "128px", value: "128px" }, { label: "256px", value: "256px" }, @@ -116,6 +118,7 @@ export const margin = [ { label: "16px", value: "16px" }, { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, + { label: "48px", value: "48px" }, { label: "64px", value: "64px" }, { label: "128px", value: "128px" }, { label: "256px", value: "256px" }, @@ -134,6 +137,7 @@ export const margin = [ { label: "16px", value: "16px" }, { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, + { label: "48px", value: "48px" }, { label: "64px", value: "64px" }, { label: "Auto", value: "auto" }, { label: "100%", value: "100%" }, @@ -150,6 +154,7 @@ export const margin = [ { label: "16px", value: "16px" }, { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, + { label: "48px", value: "48px" }, { label: "64px", value: "64px" }, { label: "128px", value: "128px" }, { label: "256px", value: "256px" }, @@ -168,6 +173,7 @@ export const margin = [ { label: "16px", value: "16px" }, { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, + { label: "48px", value: "48px" }, { label: "64px", value: "64px" }, { label: "128px", value: "128px" }, { label: "256px", value: "256px" }, @@ -189,6 +195,7 @@ export const padding = [ { label: "16px", value: "16px" }, { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, + { label: "48px", value: "48px" }, { label: "64px", value: "64px" }, { label: "Auto", value: "auto" }, { label: "100%", value: "100%" }, @@ -205,6 +212,7 @@ export const padding = [ { label: "16px", value: "16px" }, { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, + { label: "48px", value: "48px" }, { label: "64px", value: "64px" }, { label: "Auto", value: "auto" }, { label: "100%", value: "100%" }, @@ -221,6 +229,7 @@ export const padding = [ { label: "16px", value: "16px" }, { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, + { label: "48px", value: "48px" }, { label: "64px", value: "64px" }, { label: "Auto", value: "auto" }, { label: "100%", value: "100%" }, @@ -237,6 +246,7 @@ export const padding = [ { label: "16px", value: "16px" }, { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, + { label: "48px", value: "48px" }, { label: "64px", value: "64px" }, { label: "Auto", value: "auto" }, { label: "100%", value: "100%" }, @@ -253,6 +263,7 @@ export const padding = [ { label: "16px", value: "16px" }, { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, + { label: "48px", value: "48px" }, { label: "64px", value: "64px" }, { label: "Auto", value: "auto" }, { label: "100%", value: "100%" }, 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/builder/yarn.lock b/packages/builder/yarn.lock index dfeebc7214..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.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.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/client/src/api/index.js b/packages/client/src/api/index.js index 6082accb51..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, { @@ -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 } @@ -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/render/screenRouter.js b/packages/client/src/render/screenRouter.js index 6af4f5491a..164cd840aa 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 } 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, } diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json index 436f5b32df..44d30a65f1 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": {}, @@ -67,7 +68,7 @@ "_styles": { "normal": { "font-family": "Inter", - "font-weight": "400", + "font-weight": "500", "color": "#000000", "text-decoration-line": "none", "font-size": "16px" 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" } 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/package.json b/packages/standard-components/package.json index cd18e8d769..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.41.0", + "@budibase/bbui": "^1.44.0", "@budibase/svelte-ag-grid": "^0.0.13", "@fortawesome/fontawesome-free": "^5.14.0", "@svelteschool/svelte-forms": "^0.7.0", diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte index 7441f478d1..cde82ce37e 100644 --- a/packages/standard-components/src/Button.svelte +++ b/packages/standard-components/src/Button.svelte @@ -25,12 +25,10 @@ diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js index aca4e7d39e..d54e91f623 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 => { @@ -76,8 +80,7 @@ function dateRenderer(options, editable) { } // Options need to be passed in with minTime and maxTime! Needs bbui update. - - const datePickerInstance = new DatePicker({ + new DatePicker({ target: container, props: { value: params.value, @@ -88,7 +91,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 +106,7 @@ function optionsRenderer({ inclusion }, editable) { target: container, props: { value: params.value, - options: inclusion, + options: constraints.inclusion, }, }) @@ -113,7 +116,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,18 +136,21 @@ 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%" + let url = "/" + if (options.detailUrl) { + url = options.detailUrl.replace(":id", params.data._id) + } + new ViewDetails({ target: container, - props: { - url: `${options}/${params.data._id}`, - }, + props: { url }, }) return container diff --git a/packages/standard-components/src/Form.svelte b/packages/standard-components/src/Form.svelte index 29401e8ad4..a95d64d35c 100644 --- a/packages/standard-components/src/Form.svelte +++ b/packages/standard-components/src/Form.svelte @@ -23,9 +23,7 @@ {#each fields as field}
{#if !(schema[field].type === 'boolean' && !wide)} - + {/if} {#if schema[field].type === 'options'}