From e8b993b14cb8dac1c13b8d2ca717c35e91ea457b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 17 Nov 2022 10:16:45 +0000
Subject: [PATCH] Add working side panels to table blocks

---
 .../store/screenTemplates/rowListScreen.js    |   2 +-
 .../design/settings/componentSettings.js      |   3 +-
 .../settings/ComponentSettingsSection.svelte  |   4 +-
 packages/client/manifest.json                 | 230 ++++++++++--------
 .../src/components/app/SidePanel.svelte       |   8 +-
 .../components/app/blocks/TableBlock.svelte   | 112 +++++++--
 .../src/components/app/forms/Form.svelte      |   2 +-
 .../src/components/app/table/Table.svelte     |   3 +-
 8 files changed, 242 insertions(+), 122 deletions(-)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
index b04d588ded..8231133bdf 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
+++ b/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: {
diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index 441993fe1c..641f506332 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/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,
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
index 12a7eea87d..d91f435f08 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
+++ b/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
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 34ca6baa0e..eae7cf4b55 100644
--- a/packages/client/manifest.json
+++ b/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",
-        "label": "On row click",
-        "key": "onClick",
-        "context": [
+        "section": true,
+        "name": "On Row Click",
+        "settings": [
           {
-            "label": "Clicked row",
-            "key": "row"
+            "type": "event",
+            "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",
-            "label": "Scroll Limit",
-            "key": "rowCount",
-            "defaultValue": 8
+            "type": "dataSource",
+            "label": "Data",
+            "key": "dataSource",
+            "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",
-            "defaultValue": false
-          },
-          {
-            "type": "boolean",
-            "label": "Open link in modal",
-            "key": "titleButtonPeek"
+            "label": "Show button above table",
+            "defaultValue": true
           },
           {
             "type": "text",
             "key": "titleButtonText",
-            "label": "Button text"
+            "label": "Text",
+            "defaultValue": "Create row",
+            "dependsOn": "showTitleButton"
           },
           {
-            "type": "url",
-            "label": "Button link",
-            "key": "titleButtonURL"
+            "type": "radio",
+            "key": "titleButtonClickBehaviour",
+            "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"
+            }
           }
         ]
       }
diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte
index 77e853725f..39579bdabb 100644
--- a/packages/client/src/components/app/SidePanel.svelte
+++ b/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>
diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte
index c85fbbc2ad..f9a125637b 100644
--- a/packages/client/src/components/app/blocks/TableBlock.svelte
+++ b/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 titleButtonPeek
+  export let titleButtonClickBehaviour
+  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 = [
-    {
-      "##eventHandlerType": "Navigate To",
-      parameters: {
-        peek: titleButtonPeek,
-        url: titleButtonURL,
-      },
-    },
-  ]
+  $: normalFields = getNormalFields(schema)
+  $: rowClickActions =
+    clickBehaviour === "actions"
+      ? onClick
+      : [
+          {
+            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>
diff --git a/packages/client/src/components/app/forms/Form.svelte b/packages/client/src/components/app/forms/Form.svelte
index 8eddc11fa5..8950661bd8 100644
--- a/packages/client/src/components/app/forms/Form.svelte
+++ b/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>
 
diff --git a/packages/client/src/components/app/table/Table.svelte b/packages/client/src/components/app/table/Table.svelte
index eabbdcdfdb..8cedfb2323 100644
--- a/packages/client/src/components/app/table/Table.svelte
+++ b/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,