adds options type support to grid component

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

@@ -1,7 +1,7 @@
 <script>
   // Import valueSetters and custom renderers
   import { number } from "./valueSetters"
-  import renderers from "./customRenderer"
+  import { getRenderer } from "./customRenderer"
 
   // These maps need to be set up to handle whatever types that are used in the models.
   const setters = new Map([["number", number]])
@@ -28,7 +28,6 @@
       const jsonModel = await _bb.api.get(`/api/models/${datasource.modelId}`)
       model = await jsonModel.json()
       const { schema } = model
-      console.log(schema)
       if (!isEmpty(datasource)) {
         data = await fetchData(datasource)
         columnDefs = Object.keys(schema).map((key, i) => {
@@ -40,11 +39,12 @@
             field: key,
             hide: shouldHideField(key),
             sortable: true,
-            editable:
-              schema[key].type !== "boolean" &&
-              schema[key].type !== "attachment",
-            cellRenderer: renderers.get(schema[key].type),
-            autoHeight: schema[key].type === "attachment",
+            editable: isEditable(schema[key].type),
+            cellRenderer: getRenderer(
+              schema[key].type, // type
+              schema[key].constraints.inclusion // options
+            ),
+            autoHeight: true,
           }
         })
       }
@@ -52,6 +52,12 @@
     }
   })
 
+  const isEditable = type =>
+    type !== "boolean" &&
+    type !== "options" &&
+    type !== "attachment" &&
+    type !== "datetime"
+
   const shouldHideField = name => {
     if (name.startsWith("_")) return true
     // always 'record'

packages/standard-components/src/DataGrid/Select/Wrapper.svelte

@@ -0,0 +1,17 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  const dispatch = createEventDispatcher()
+
+  export let value
+  export let options
+
+  $: dispatch("change", value)
+</script>
+
+<Select label={false} bind:value>
+  <option value="">Choose an option</option>
+  {#each options as option}
+    <option value={option}>{option}</option>
+  {/each}
+</Select>

packages/standard-components/src/DataGrid/customRenderer.js

@@ -2,15 +2,18 @@
 // https://www.ag-grid.com/javascript-grid-cell-rendering-components/
 
 import AttachmentCell from './AttachmentCell/Button.svelte'
+import Select from './Select/Wrapper.svelte'
 import { DatePicker } from "@budibase/bbui"
 
-export default new Map([
+const renderers = new Map([
     ["boolean", booleanRenderer],
     ["attachment", attachmentRenderer],
     ["datetime", dateRenderer],
+    ["options", optionsRenderer],
 ])
 
-function booleanRenderer(params) {
+function booleanRenderer(options) {
+    return params => {
         const toggle = (e) => {
             params.value = !params.value
             params.setValue(e.currentTarget.checked)
@@ -22,7 +25,9 @@ function booleanRenderer(params) {
 
         return input
     }
-function attachmentRenderer(params) {
+}
+function attachmentRenderer(options) {
+    return params => {
         const container = document.createElement("div")
 
         const attachmentInstance = new AttachmentCell({
@@ -34,7 +39,9 @@ function attachmentRenderer(params) {
 
         return container
     }
-function dateRenderer(params) {
+}
+function dateRenderer(options) {
+    return params => {
         const container = document.createElement("div")
         const toggle = (e) => {
             params.setValue(e.detail[0][0])
@@ -51,3 +58,38 @@ function dateRenderer(params) {
 
         return container
     }
+}
+
+
+function optionsRenderer(options) {
+    return params => {
+        const container = document.createElement("div")
+        const change = (e) => {
+            params.setValue(e.detail)
+        }
+
+        const selectInstance = new Select({
+            target: container,
+            props: {
+                value: params.value,
+                options
+            }
+        });
+
+        selectInstance.$on('change', change)
+
+        return container
+    }
+}
+
+export function getRenderer(type, options) {
+    // Complicated thing to set options for renderers
+    let customRenderer
+    if (type === "options" || type === 'datetime') {
+        customRenderer = renderers.get(type)(options)
+    } else {
+        let rendererGenerator = renderers.get(type)
+        customRenderer = rendererGenerator ? rendererGenerator() : false
+    }
+    return customRenderer
+}