Merge pull request #734 from Budibase/feature/add-edit-button-custom-renderer-for-grid-component

Feature/add details button custom renderer for grid component

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -327,6 +327,12 @@ export default {
                 key: "datasource",
                 control: TableViewSelect,
               },
+              {
+                label: "Table URL",
+                key: "detailUrl",
+                placeholder: "tableName",
+                control: ScreenSelect,
+              },
               {
                 label: "Editable",
                 key: "editable",

packages/standard-components/components.json

@@ -245,7 +245,8 @@
 			"pagination": {
 				"type": "bool",
 				"default": true
-			}
+			},
+			"detailUrl": "string"
 		}
 	},
 	"dataform": {

packages/standard-components/src/DataGrid/Component.svelte

@@ -24,7 +24,8 @@
   export let editable
   export let theme = "alpine"
   export let height = 500
-  export let pagination = true
+  export let pagination
+  export let detailUrl
 
   // These can never change at runtime so don't need to be reactive
   let canEdit = editable && datasource && datasource.type !== "view"
@@ -80,6 +81,19 @@
           autoHeight: true,
         }
       })
+      columnDefs = [...columnDefs, {
+          headerName: 'Details',
+          field: '_id',
+          width: 25,
+          flex: 0,
+          editable: false,
+          sortable: false,
+          cellRenderer: getRenderer({
+            type: '_id',
+            options: detailUrl
+          }),
+          autoHeight: true,
+      }]
       dataLoaded = true
     }
   })

packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte

@@ -0,0 +1,12 @@
+<script>
+    import { Icon } from '@budibase/bbui'
+    export let url
+</script>
+
+<a href={url}><Icon name="view" /></a>
+
+<style>
+    a {
+        color: var(--grey-6)
+    }
+</style>

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],
+  ["_id", 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,22 @@ function linkedRowRenderer(constraints, editable) {
     return container
   }
 }
+
+/* eslint-disable no-unused-vars */
+function viewDetailsRenderer(options) {
+  return 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}/${params.data._id}`,
+      },
+    })
+
+    return container
+  }
+}