Add working side panels to table blocks

packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js

@@ -25,7 +25,7 @@ const generateTableBlock = table => {
       linkURL: `${rowListUrl(table)}/:id`,
       showAutoColumns: false,
       showTitleButton: true,
-      titleButtonText: "Create new",
+      titleButtonText: "Create row",
       titleButtonURL: newRowUrl(table),
       title: table.name,
       dataSource: {

packages/builder/src/components/design/settings/componentSettings.js

@@ -1,4 +1,4 @@
-import { Checkbox, Select, Stepper } from "@budibase/bbui"
+import { Checkbox, Select, RadioGroup, Stepper } from "@budibase/bbui"
 import DataSourceSelect from "./controls/DataSourceSelect.svelte"
 import S3DataSourceSelect from "./controls/S3DataSourceSelect.svelte"
 import DataProviderSelect from "./controls/DataProviderSelect.svelte"
@@ -24,6 +24,7 @@ import BarButtonList from "./controls/BarButtonList.svelte"
 const componentMap = {
   text: DrawerBindableCombobox,
   select: Select,
+  radio: RadioGroup,
   dataSource: DataSourceSelect,
   "dataSource/s3": S3DataSourceSelect,
   dataProvider: DataProviderSelect,

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte

@@ -36,7 +36,9 @@
       section.settings.forEach(setting => {
         setting.visible = canRenderControl(instance, setting, isScreen)
       })
-      section.visible = section.settings.some(setting => setting.visible)
+      section.visible =
+        section.name === "General" ||
+        section.settings.some(setting => setting.visible)
     })
 
     return sections

packages/client/manifest.json

@@ -3733,12 +3733,6 @@
         "key": "dataProvider",
         "required": true
       },
-      {
-        "type": "number",
-        "label": "Row count",
-        "key": "rowCount",
-        "defaultValue": 8
-      },
       {
         "type": "columns",
         "label": "Columns",
@@ -3762,6 +3756,12 @@
           }
         ]
       },
+      {
+        "type": "number",
+        "label": "Row count",
+        "key": "rowCount",
+        "defaultValue": 8
+      },
       {
         "type": "boolean",
         "label": "Quiet",
@@ -3772,12 +3772,6 @@
         "label": "Compact",
         "key": "compact"
       },
-      {
-        "type": "boolean",
-        "label": "Show auto columns",
-        "key": "showAutoColumns",
-        "defaultValue": false
-      },
       {
         "type": "boolean",
         "label": "Allow row selection",
@@ -3785,14 +3779,20 @@
         "defaultValue": false,
         "info": "Row selection is only compatible with internal or SQL tables"
       },
+
       {
-        "type": "event",
+        "section": true,
-        "label": "On row click",
+        "name": "On Row Click",
-        "key": "onClick",
+        "settings": [
-        "context": [
           {
-            "label": "Clicked row",
+            "type": "event",
-            "key": "row"
+            "key": "onClick",
+            "context": [
+              {
+                "label": "Clicked row",
+                "key": "row"
+              }
+            ]
           }
         ]
       }
@@ -4445,70 +4445,15 @@
         "label": "Title",
         "key": "title"
       },
-      {
-        "type": "dataSource",
-        "label": "Data",
-        "key": "dataSource",
-        "required": true
-      },
-      {
-        "type": "searchfield",
-        "label": "Search Columns",
-        "key": "searchColumns",
-        "placeholder": "Choose search columns",
-        "info": "Only the first 5 search columns will be used"
-      },
-      {
-        "type": "filter",
-        "label": "Filtering",
-        "key": "filter"
-      },
-      {
-        "type": "field/sortable",
-        "label": "Sort Column",
-        "key": "sortColumn"
-      },
-      {
-        "type": "select",
-        "label": "Sort Order",
-        "key": "sortOrder",
-        "options": [
-          "Ascending",
-          "Descending"
-        ],
-        "defaultValue": "Descending"
-      },
-      {
-        "type": "select",
-        "label": "Size",
-        "key": "size",
-        "defaultValue": "spectrum--medium",
-        "options": [
-          {
-            "label": "Medium",
-            "value": "spectrum--medium"
-          },
-          {
-            "label": "Large",
-            "value": "spectrum--large"
-          }
-        ]
-      },
-      {
-        "type": "boolean",
-        "label": "Paginate",
-        "key": "paginate",
-        "defaultValue": true
-      },
       {
         "section": true,
         "name": "Table",
         "settings": [
           {
-            "type": "number",
+            "type": "dataSource",
-            "label": "Scroll Limit",
+            "label": "Data",
-            "key": "rowCount",
+            "key": "dataSource",
-            "defaultValue": 8
+            "required": true
           },
           {
             "type": "columns",
@@ -4518,9 +4463,52 @@
             "placeholder": "All columns",
             "nested": true
           },
+          {
+            "type": "field/sortable",
+            "label": "Sort By",
+            "key": "sortColumn"
+          },
+          {
+            "type": "select",
+            "label": "Sort Order",
+            "key": "sortOrder",
+            "options": [
+              "Ascending",
+              "Descending"
+            ],
+            "defaultValue": "Descending"
+          },
+          {
+            "type": "select",
+            "label": "Size",
+            "key": "size",
+            "defaultValue": "spectrum--medium",
+            "options": [
+              {
+                "label": "Medium",
+                "value": "spectrum--medium"
+              },
+              {
+                "label": "Large",
+                "value": "spectrum--large"
+              }
+            ]
+          },
+          {
+            "type": "number",
+            "label": "Scroll Limit",
+            "key": "rowCount",
+            "defaultValue": 8
+          },
           {
             "type": "boolean",
-            "label": "Quiet table variant",
+            "label": "Paginate",
+            "key": "paginate",
+            "defaultValue": true
+          },
+          {
+            "type": "boolean",
+            "label": "Quiet",
             "key": "quiet"
           },
           {
@@ -4528,21 +4516,53 @@
             "label": "Compact",
             "key": "compact"
           },
-          {
-            "type": "boolean",
-            "label": "Show auto columns",
-            "key": "showAutoColumns"
-          },
           {
             "type": "boolean",
             "label": "Allow row selection",
             "key": "allowSelectRows",
             "info": "Row selection is only compatible with internal or SQL tables"
           },
+          {
+            "type": "filter",
+            "label": "Filtering",
+            "key": "filter"
+          },
+          {
+            "type": "searchfield",
+            "label": "Search Fields",
+            "key": "searchColumns",
+            "placeholder": "Choose search fields",
+            "info": "Only the first 5 search fields will be used"
+          }
+        ]
+      },
+      {
+        "section": true,
+        "name": "On row click",
+        "settings": [
+          {
+            "type": "radio",
+            "key": "clickBehaviour",
+            "defaultValue": "details",
+            "options": [
+              {
+                "label": "Show details side panel",
+                "value": "details"
+              },
+              {
+                "label": "Run actions",
+                "value": "actions"
+              }
+            ]
+          },
           {
             "type": "event",
-            "label": "On row click",
             "key": "onClick",
+            "nested": true,
+            "dependsOn": {
+              "setting": "clickBehaviour",
+              "value": "actions"
+            },
             "context": [{
               "label": "Clicked row",
               "key": "row"
@@ -4552,28 +4572,46 @@
       },
       {
         "section": true,
-        "name": "Title button",
+        "name": "Button",
         "settings": [
           {
             "type": "boolean",
             "key": "showTitleButton",
-            "label": "Show link button",
+            "label": "Show button above table",
-            "defaultValue": false
+            "defaultValue": true
-          },
-          {
-            "type": "boolean",
-            "label": "Open link in modal",
-            "key": "titleButtonPeek"
           },
           {
             "type": "text",
             "key": "titleButtonText",
-            "label": "Button text"
+            "label": "Text",
+            "defaultValue": "Create row",
+            "dependsOn": "showTitleButton"
           },
           {
-            "type": "url",
+            "type": "radio",
-            "label": "Button link",
+            "key": "titleButtonClickBehaviour",
-            "key": "titleButtonURL"
+            "label": "On Click",
+            "dependsOn": "showTitleButton",
+            "defaultValue": "new",
+            "options": [
+              {
+                "label": "Show new row side panel",
+                "value": "new"
+              },
+              {
+                "label": "Run actions",
+                "value": "actions"
+              }
+            ]
+          },
+          {
+            "type": "event",
+            "key": "onClickTitleButton",
+            "nested": true,
+            "dependsOn": {
+              "setting": "titleButtonClickBehaviour",
+              "value": "actions"
+            }
           }
         ]
       }

packages/client/src/components/app/SidePanel.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getContext } from "svelte"
+  import { getContext, onMount } from "svelte"
 
   const component = getContext("component")
   const { styleable, sidePanelStore, builderStore } = getContext("sdk")
@@ -15,11 +15,9 @@
     }
     const update = visible => {
       if (visible) {
-        sidePanelStore.actions.open($component.id)
         target.appendChild(el)
         el.hidden = false
       } else {
-        sidePanelStore.actions.close()
         destroy()
         el.hidden = true
       }
@@ -41,7 +39,9 @@
   hidden
   class="side-panel"
 >
-  <slot />
+  {#if open}
+    <slot />
+  {/if}
 </div>
 
 <style>

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -13,37 +13,68 @@
   export let sortOrder
   export let paginate
   export let tableColumns
-  export let showAutoColumns
   export let rowCount
   export let quiet
   export let compact
   export let size
   export let allowSelectRows
+  export let clickBehaviour
   export let onClick
   export let showTitleButton
   export let titleButtonText
-  export let titleButtonURL
+  export let titleButtonClickBehaviour
-  export let titleButtonPeek
+  export let onClickTitleButton
 
   const { fetchDatasourceSchema } = getContext("sdk")
+  const stateKey = `${Math.random()}-id`
 
   let formId
   let dataProviderId
+  let detailsSidePanelId
+  let newRowSidePanelId
   let schema
   let schemaLoaded = false
 
   $: fetchSchema(dataSource)
   $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
   $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
-  $: titleButtonAction = [
+  $: normalFields = getNormalFields(schema)
-    {
+  $: rowClickActions =
-      "##eventHandlerType": "Navigate To",
+    clickBehaviour === "actions"
-      parameters: {
+      ? onClick
-        peek: titleButtonPeek,
+      : [
-        url: titleButtonURL,
+          {
-      },
+            id: 0,
-    },
+            "##eventHandlerType": "Update State",
-  ]
+            parameters: {
+              key: stateKey,
+              type: "set",
+              persist: false,
+              value: `{{ ${safe("eventContext")}.${safe("row")}.${safe(
+                "_id"
+              )} }}`,
+            },
+          },
+          {
+            id: 1,
+            "##eventHandlerType": "Open Side Panel",
+            parameters: {
+              id: detailsSidePanelId,
+            },
+          },
+        ]
+  $: buttonClickActions =
+    titleButtonClickBehaviour === "actions"
+      ? onClickTitleButton
+      : [
+          {
+            id: 0,
+            "##eventHandlerType": "Open Side Panel",
+            parameters: {
+              id: newRowSidePanelId,
+            },
+          },
+        ]
 
   // Load the datasource schema so we can determine column types
   const fetchSchema = async dataSource => {
@@ -54,6 +85,17 @@
     }
     schemaLoaded = true
   }
+
+  const getNormalFields = schema => {
+    if (!schema) {
+      return []
+    }
+    return Object.entries(schema)
+      .filter(entry => {
+        return !entry[1].autocolumn
+      })
+      .map(entry => entry[0])
+  }
 </script>
 
 {#if schemaLoaded}
@@ -126,7 +168,7 @@
               <BlockComponent
                 type="button"
                 props={{
-                  onClick: titleButtonAction,
+                  onClick: buttonClickActions,
                   text: titleButtonText,
                   type: "cta",
                 }}
@@ -142,7 +184,7 @@
         props={{
           dataSource,
           filter: enrichedFilter,
-          sortColumn,
+          sortColumn: sortColumn || normalFields?.[0],
           sortOrder,
           paginate,
           limit: rowCount,
@@ -155,13 +197,51 @@
           props={{
             dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
             columns: tableColumns,
-            showAutoColumns,
             rowCount,
             quiet,
             compact,
             allowSelectRows,
             size,
-            onClick,
+            onClick: rowClickActions,
+          }}
+        />
+      </BlockComponent>
+      <BlockComponent
+        type="sidepanel"
+        bind:id={detailsSidePanelId}
+        context="details-side-panel"
+        order={2}
+      >
+        <BlockComponent
+          type="formblock"
+          props={{
+            dataSource,
+            showSaveButton: true,
+            showDeleteButton: true,
+            actionType: "Update",
+            rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`,
+            fields: normalFields,
+            title: "Row Details",
+            labelPosition: "left",
+          }}
+        />
+      </BlockComponent>
+      <BlockComponent
+        type="sidepanel"
+        bind:id={newRowSidePanelId}
+        context="new-side-panel"
+        order={3}
+      >
+        <BlockComponent
+          type="formblock"
+          props={{
+            dataSource,
+            showSaveButton: true,
+            showDeleteButton: false,
+            actionType: "Create",
+            fields: normalFields,
+            title: "Create Row",
+            labelPosition: "left",
           }}
         />
       </BlockComponent>

packages/client/src/components/app/forms/Form.svelte

@@ -66,7 +66,7 @@
 
   $: initialValues = getInitialValues(actionType, dataSource, $context)
   $: resetKey = Helpers.hashString(
-    JSON.stringify(initialValues) + JSON.stringify(schema) + disabled
+    JSON.stringify(initialValues) + JSON.stringify(dataSource) + disabled
   )
 </script>
 

packages/client/src/components/app/table/Table.svelte

@@ -7,7 +7,6 @@
 
   export let dataProvider
   export let columns
-  export let showAutoColumns
   export let rowCount
   export let quiet
   export let size
@@ -32,7 +31,7 @@
   $: loading = dataProvider?.loading ?? false
   $: data = dataProvider?.rows || []
   $: fullSchema = dataProvider?.schema ?? {}
-  $: fields = getFields(fullSchema, columns, showAutoColumns)
+  $: fields = getFields(fullSchema, columns, false)
   $: schema = getFilteredSchema(fullSchema, fields, hasChildren)
   $: setSorting = getAction(
     dataProvider?.id,