From 5f83cfc9c5518d46de0625bd6e0b0a65d75a8ed4 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 19:59:46 +0200
Subject: [PATCH] adds detail link column to grid component

---
 .../userInterface/temporaryPanelStructure.js  |  6 ++++++
 packages/standard-components/components.json  |  3 ++-
 .../src/DataGrid/Component.svelte             | 20 +++++++++++++++++--
 .../src/DataGrid/customRenderer.js            |  5 ++---
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 458c35116a..9a4e91fc43 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -327,6 +327,12 @@ export default {
                 key: "datasource",
                 control: TableViewSelect,
               },
+              {
+                label: "Detail URL",
+                key: "detailUrl",
+                placeholder: "tableName/",
+                control: Input,
+              },
               {
                 label: "Editable",
                 key: "editable",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 7d64f49c84..20929de9f4 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -245,7 +245,8 @@
 			"pagination": {
 				"type": "bool",
 				"default": true
-			}
+			},
+			"detailUrl": "string"
 		}
 	},
 	"dataform": {
diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 0c75b46bca..a8d6653e38 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -20,7 +20,7 @@
   export let theme = "alpine"
   export let height = 500
   export let pagination
-  export let detailUrl = 'https://someurl.com/'
+  export let detailUrl
 
   // These can never change at runtime so don't need to be reactive
   let canEdit = editable && datasource && datasource.type !== "view"
@@ -60,6 +60,10 @@
         const jsonTable = await _bb.api.get(`/api/tables/${datasource.tableId}`)
         table = await jsonTable.json()
         schema = table.schema
+        // schema._id = {
+        //   type: '_id',
+        //   options: detailUrl
+        // }
       }
 
       columnDefs = Object.keys(schema).map((key, i) => {
@@ -76,6 +80,18 @@
           autoHeight: true,
         }
       })
+      columnDefs = [...columnDefs, {
+          headerName: 'Details',
+          field: '_id',
+          width: 50,
+          flex: 0,
+          editable: false,
+          cellRenderer: getRenderer({
+            type: '_id',
+            options: detailUrl || 'someTableName'
+          }),
+          autoHeight: true,
+      }]
       dataLoaded = true
     }
   })
@@ -92,7 +108,7 @@
     // always 'row'
     if (name === "type") return true
     // tables are always tied to a single tableId, this is irrelevant
-    // if (name === "tableId") return true
+    if (name === "tableId") return true
 
     return false
   }
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index 6998e27b03..e99ece9d84 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -12,7 +12,7 @@ const renderers = new Map([
   ["attachment", attachmentRenderer],
   ["options", optionsRenderer],
   ["link", linkedRowRenderer],
-  ["tableId", viewDetailsRenderer]
+  ["_id", viewDetailsRenderer]
 ])
 
 export function getRenderer(schema, editable) {
@@ -135,7 +135,6 @@ function linkedRowRenderer(options, editable) {
 /* eslint-disable no-unused-vars */
 function viewDetailsRenderer(options) {
   return params => {
-    console.log('Params: ', params)
     let container = document.createElement("div")
     container.style.display = "grid"
     container.style.placeItems = "center"
@@ -144,7 +143,7 @@ function viewDetailsRenderer(options) {
     new ViewDetails({
       target: container,
       props: {
-        url: options.url + params.value
+        url: `${options}${params.data._id}`
       },
     })