From 8a8762760a7712bf98aa91ffad8506f4bcd07efa Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 15 Oct 2020 18:54:08 +0200
Subject: [PATCH] starts work on adding view details link to grid component

---
 .../src/DataGrid/Component.svelte             |  3 +-
 .../src/DataGrid/ViewDetails/Cell.svelte      |  6 ++++
 .../src/DataGrid/customRenderer.js            | 36 +++++++++++++++----
 3 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte

diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 0d86808961..0c75b46bca 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -20,6 +20,7 @@
   export let theme = "alpine"
   export let height = 500
   export let pagination
+  export let detailUrl = 'https://someurl.com/'
 
   // These can never change at runtime so don't need to be reactive
   let canEdit = editable && datasource && datasource.type !== "view"
@@ -91,7 +92,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/ViewDetails/Cell.svelte b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
new file mode 100644
index 0000000000..e4e79c2b89
--- /dev/null
+++ b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
@@ -0,0 +1,6 @@
+<script>
+    import { Icon } from '@budibase/bbui'
+    export let url
+</script>
+
+<a href={url}><Icon name="view" /></a>
\ No newline at end of file
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index 607a4f8432..6998e27b03 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -2,6 +2,7 @@
 // https://www.ag-grid.com/javascript-grid-cell-rendering-components/
 
 import AttachmentCell from "./AttachmentCell/Button.svelte"
+import ViewDetails from "./ViewDetails/Cell.svelte"
 import Select from "./Select/Wrapper.svelte"
 import DatePicker from "./DateTime/Wrapper.svelte"
 import RelationshipDisplay from "./Relationship/RelationshipDisplay.svelte"
@@ -11,18 +12,19 @@ const renderers = new Map([
   ["attachment", attachmentRenderer],
   ["options", optionsRenderer],
   ["link", linkedRowRenderer],
+  ["tableId", viewDetailsRenderer]
 ])
 
-export function getRenderer({ type, constraints }, editable) {
-  if (renderers.get(type)) {
-    return renderers.get(type)(constraints, editable)
+export function getRenderer(schema, editable) {
+  if (renderers.get(schema.type)) {
+    return renderers.get(schema.type)(schema.options, editable)
   } else {
     return false
   }
 }
 
 /* eslint-disable no-unused-vars */
-function booleanRenderer(constraints, editable) {
+function booleanRenderer(options, editable) {
   return params => {
     const toggle = e => {
       params.value = !params.value
@@ -44,7 +46,7 @@ function booleanRenderer(constraints, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function attachmentRenderer(constraints, editable) {
+function attachmentRenderer(options, editable) {
   return params => {
     const container = document.createElement("div")
 
@@ -66,7 +68,7 @@ function attachmentRenderer(constraints, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function dateRenderer(constraints, editable) {
+function dateRenderer(options, editable) {
   return function(params) {
     const container = document.createElement("div")
     const toggle = e => {
@@ -111,7 +113,7 @@ function optionsRenderer({ inclusion }, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function linkedRowRenderer(constraints, editable) {
+function linkedRowRenderer(options, editable) {
   return params => {
     let container = document.createElement("div")
     container.style.display = "grid"
@@ -129,3 +131,23 @@ function linkedRowRenderer(constraints, editable) {
     return container
   }
 }
+
+/* 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"
+    container.style.height = "100%"
+
+    new ViewDetails({
+      target: container,
+      props: {
+        url: options.url + params.value
+      },
+    })
+
+    return container
+  }
+}
\ No newline at end of file