Update table autoscreens to use grid layout

packages/builder/src/templates/Component.js

@@ -54,4 +54,28 @@ export class Component extends BaseStructure {
   getId() {
     return this._json._id
   }
+
+  gridDesktopColSpan(start, end) {
+    this._json._styles.normal["--grid-desktop-col-start"] = start
+    this._json._styles.normal["--grid-desktop-col-end"] = end
+    return this
+  }
+
+  gridDesktopRowSpan(start, end) {
+    this._json._styles.normal["--grid-desktop-row-start"] = start
+    this._json._styles.normal["--grid-desktop-row-end"] = end
+    return this
+  }
+
+  gridMobileColSpan(start, end) {
+    this._json._styles.normal["--grid-mobile-col-start"] = start
+    this._json._styles.normal["--grid-mobile-col-end"] = end
+    return this
+  }
+
+  gridMobileRowSpan(start, end) {
+    this._json._styles.normal["--grid-mobile-row-start"] = start
+    this._json._styles.normal["--grid-mobile-row-end"] = end
+    return this
+  }
 }

packages/builder/src/templates/screenTemplating/table/inline.js

@@ -9,16 +9,21 @@ const inline = ({ tableOrView, permissions, screens }) => {
     .customProps({
       text: tableOrView.name,
     })
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(1, 3)
 
   const tableBlock = new Component("@budibase/standard-components/gridblock")
     .instanceName(`${tableOrView.name} - Table`)
     .customProps({
       table: tableOrView.datasourceSelectFormat,
     })
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(3, 21)
 
   const screenTemplate = new Screen()
     .route(getValidRoute(screens, tableOrView.name, permissions.write))
     .instanceName(`${tableOrView.name} - List`)
+    .customProps({ layout: "grid" })
     .role(permissions.write)
     .autoTableId(tableOrView.id)
     .addChild(heading)

packages/builder/src/templates/screenTemplating/table/modal.js

@@ -33,26 +33,22 @@ const modal = ({ tableOrView, permissions, screens }) => {
     type: "cta",
   })
 
-  buttonGroup.instanceName(`${tableOrView.name} - Create`).customProps({
+  buttonGroup
+    .instanceName(`${tableOrView.name} - Create`)
+    .customProps({
       hAlign: "right",
       buttons: [createButton.json()],
     })
-
-  const tableHeader = new Component("@budibase/standard-components/container")
-    .instanceName("Heading container")
-    .customProps({
-      direction: "row",
-      hAlign: "stretch",
-    })
+    .gridDesktopColSpan(7, 13)
+    .gridDesktopRowSpan(1, 3)
 
   const heading = new Component("@budibase/standard-components/heading")
     .instanceName("Table heading")
     .customProps({
       text: tableOrView.name,
     })
-
-  tableHeader.addChild(heading)
-  tableHeader.addChild(buttonGroup)
+    .gridDesktopColSpan(1, 7)
+    .gridDesktopRowSpan(1, 3)
 
   const createFormBlock = new Component(
     "@budibase/standard-components/formblock"
@@ -134,13 +130,17 @@ const modal = ({ tableOrView, permissions, screens }) => {
       ],
     })
     .instanceName(`${tableOrView.name} - Table`)
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(3, 21)
 
   const template = new Screen()
     .route(getValidRoute(screens, tableOrView.name, permissions.write))
     .instanceName(`${tableOrView.name} - List and details`)
+    .customProps({ layout: "grid" })
     .role(permissions.write)
     .autoTableId(tableOrView.id)
-    .addChild(tableHeader)
+    .addChild(buttonGroup)
+    .addChild(heading)
     .addChild(tableBlock)
     .addChild(createRowModal)
     .addChild(detailsModal)

packages/builder/src/templates/screenTemplating/table/newScreen.js

@@ -4,6 +4,7 @@ import { capitalise } from "helpers"
 import { makePropSafe as safe } from "@budibase/string-templates"
 import getValidRoute from "../getValidRoute"
 import { Helpers } from "@budibase/bbui"
+import { head } from "lodash"
 
 const getTableScreenTemplate = ({
   route,
@@ -11,11 +12,12 @@ const getTableScreenTemplate = ({
   createScreenRoute,
   tableOrView,
   permissions,
+  gridLayout,
 }) => {
-  const newButton = new Component("@budibase/standard-components/button")
-    .instanceName("New button")
-    .customProps({
-      text: "Create row",
+  const buttonGroup = new Component("@budibase/standard-components/buttongroup")
+  const createButton = new Component("@budibase/standard-components/button")
+
+  createButton.customProps({
     onClick: [
       {
         "##eventHandlerType": "Navigate To",
@@ -25,22 +27,26 @@ const getTableScreenTemplate = ({
         },
       },
     ],
+    text: "Create row",
+    type: "cta",
   })
 
+  buttonGroup
+    .instanceName(`${tableOrView.name} - Create`)
+    .customProps({
+      hAlign: "right",
+      buttons: [createButton.json()],
+    })
+    .gridDesktopColSpan(7, 13)
+    .gridDesktopRowSpan(1, 3)
+
   const heading = new Component("@budibase/standard-components/heading")
     .instanceName("Table heading")
     .customProps({
       text: tableOrView.name,
     })
-
-  const tableHeader = new Component("@budibase/standard-components/container")
-    .instanceName("Heading container")
-    .customProps({
-      direction: "row",
-      hAlign: "stretch",
-    })
-    .addChild(heading)
-    .addChild(newButton)
+    .gridDesktopColSpan(1, 7)
+    .gridDesktopRowSpan(1, 3)
 
   const updateScreenRouteSegments = updateScreenRoute.split(":id")
   if (updateScreenRouteSegments.length !== 2) {
@@ -67,14 +73,18 @@ const getTableScreenTemplate = ({
         },
       ],
     })
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(3, 21)
 
   const template = new Screen()
     .route(route)
     .instanceName(`${tableOrView.name} - List`)
+    .customProps({ layout: gridLayout ? "grid" : "flex" })
     .role(permissions.write)
     .autoTableId(tableOrView.id)
-    .addChild(tableHeader)
     .addChild(tableBlock)
+    .addChild(heading)
+    .addChild(buttonGroup)
     .json()
 
   return {
@@ -300,6 +310,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => {
     createScreenRoute,
     permissions,
     tableOrView,
+    gridLayout: true,
   })
 
   const updateScreenTemplate = getUpdateScreenTemplate({
@@ -307,6 +318,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => {
     tableScreenRoute,
     tableOrView,
     permissions,
+    gridLayout: false,
   })
 
   const createScreenTemplate = getCreateScreenTemplate({
@@ -314,6 +326,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => {
     tableScreenRoute,
     tableOrView,
     permissions,
+    gridLayout: false,
   })
 
   return [tableScreenTemplate, updateScreenTemplate, createScreenTemplate]

packages/builder/src/templates/screenTemplating/table/sidePanel.js

@@ -31,27 +31,22 @@ const sidePanel = ({ tableOrView, permissions, screens }) => {
     type: "cta",
   })
 
-  buttonGroup.instanceName(`${tableOrView.name} - Create`).customProps({
+  buttonGroup
+    .instanceName(`${tableOrView.name} - Create`)
+    .customProps({
       hAlign: "right",
       buttons: [createButton.json()],
     })
-
-  const tableHeader = new Component("@budibase/standard-components/container")
-    .instanceName("Heading container")
-    .customProps({
-      layout: "flex",
-      direction: "row",
-      hAlign: "stretch",
-    })
+    .gridDesktopColSpan(7, 13)
+    .gridDesktopRowSpan(1, 3)
 
   const heading = new Component("@budibase/standard-components/heading")
     .instanceName("Table heading")
     .customProps({
       text: tableOrView.name,
     })
-
-  tableHeader.addChild(heading)
-  tableHeader.addChild(buttonGroup)
+    .gridDesktopColSpan(1, 7)
+    .gridDesktopRowSpan(1, 3)
 
   const createFormBlock = new Component(
     "@budibase/standard-components/formblock"
@@ -131,13 +126,17 @@ const sidePanel = ({ tableOrView, permissions, screens }) => {
       ],
     })
     .instanceName(`${tableOrView.name} - Table`)
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(3, 21)
 
   const template = new Screen()
     .route(getValidRoute(screens, tableOrView.name, permissions.write))
     .instanceName(`${tableOrView.name} - List and details`)
+    .customProps({ layout: "grid" })
     .role(permissions.write)
     .autoTableId(tableOrView.id)
-    .addChild(tableHeader)
+    .addChild(heading)
+    .addChild(buttonGroup)
     .addChild(tableBlock)
     .addChild(createRowSidePanel)
     .addChild(detailsSidePanel)