From ed695263756ebcea98b3a980363e6b7dccc8336f Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 25 Sep 2020 11:44:05 +0200
Subject: [PATCH] adds ag-grid component to display data

---
 .../userInterface/temporaryPanelStructure.js  | 17 +++++++
 packages/standard-components/components.json  | 44 +++++++++++++----
 packages/standard-components/package.json     |  2 +-
 .../standard-components/src/DataGrid.svelte   | 48 +++++++++++++++++++
 packages/standard-components/src/index.js     |  1 +
 5 files changed, 103 insertions(+), 9 deletions(-)
 create mode 100644 packages/standard-components/src/DataGrid.svelte

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 296ae26606..ff52882188 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -313,6 +313,23 @@ export default {
           },
           children: [],
         },
+        {
+          name: "Grid",
+          _component: "@budibase/standard-components/datagrid",
+          description: "a datagrid component with functionality to add, remove and edit rows.",
+          icon: "ri-file-list-line",
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                label: "Source",
+                key: "datasource",
+                control: ModelViewSelect,
+              },
+            ],
+          },
+          children: [],
+        },
         {
           _component: "@budibase/standard-components/stackedlist",
           name: "Stacked List",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index e600b264be..a78fd5ec5e 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -199,9 +199,15 @@
 	"icon": {
 		"description": "A HTML icon tag",
 		"props": {
-			"icon": "string",	
-			"size": {"type": "string", "default": "fa-lg"},
-			"color": {"type": "string", "default": "#000"}
+			"icon": "string",
+			"size": {
+				"type": "string",
+				"default": "fa-lg"
+			},
+			"color": {
+				"type": "string",
+				"default": "#000"
+			}
 		}
 	},
 	"datatable": {
@@ -215,6 +221,13 @@
 			"color": "string"
 		}
 	},
+	"datagrid": {
+		"description": "a datagrid component with functionality to add, remove and edit rows.",
+		"data": true,
+		"props": {
+			"datasource": "models"
+		}
+	},
 	"dataform": {
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
@@ -535,19 +548,34 @@
 			"height": "number",
 			"axisTimeCombinations": "string",
 			"color": "string",
-			"grid": {"type":"string", "default": "horizontal"},
+			"grid": {
+				"type": "string",
+				"default": "horizontal"
+			},
 			"aspectRatio": "number",
 			"dateLabel": "string",
-			"isAnimated": {"type": "bool", "default": true},
+			"isAnimated": {
+				"type": "bool",
+				"default": true
+			},
 			"lineCurve": "string",
 			"locale": "string",
 			"numberFormat": "string",
-			"shouldShowAllDataPoints": {"type": "bool", "default": true},
+			"shouldShowAllDataPoints": {
+				"type": "bool",
+				"default": true
+			},
 			"topicLabel": "string",
 			"valueLabel": "string",
-			"xAxisValueType": {"type":"string", "default": "date"},
+			"xAxisValueType": {
+				"type": "string",
+				"default": "date"
+			},
 			"xAxisScale": "string",
-			"xAxisFormat": {"type":"string", "default": "custom"},
+			"xAxisFormat": {
+				"type": "string",
+				"default": "custom"
+			},
 			"xAxisCustomFormat": "string",
 			"xAxisLabel": "string",
 			"yAxisLabel": "string",
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index ba3305d293..71bc33cac8 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -37,8 +37,8 @@
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
     "@budibase/bbui": "^1.34.6",
+    "@budibase/svelte-ag-grid": "^0.0.6",
     "@fortawesome/fontawesome-free": "^5.14.0",
-    "@budibase/bbui": "^1.34.2",
     "britecharts": "^2.16.1",
     "d3-selection": "^1.4.2",
     "fast-sort": "^2.2.0",
diff --git a/packages/standard-components/src/DataGrid.svelte b/packages/standard-components/src/DataGrid.svelte
new file mode 100644
index 0000000000..712e51c430
--- /dev/null
+++ b/packages/standard-components/src/DataGrid.svelte
@@ -0,0 +1,48 @@
+<script>
+  import fetchData from "./fetchData.js"
+  import { isEmpty } from "lodash/fp"
+  import { onMount } from "svelte"
+
+  import AgGrid from "@budibase/svelte-ag-grid"
+
+  export let datasource = {}
+
+  let dataLoaded = false
+  let data
+  let columnDefs
+
+  onMount(async () => {
+    if (!isEmpty(datasource)) {
+      data = await fetchData(datasource)
+      if (data) {
+        // Construct column definitions
+        columnDefs = Object.keys(data[0]).map(key => {
+          return {
+            headerName: key.charAt(0).toUpperCase() + key.slice(1), // Capitalise first letter
+            field: key,
+            hide: shouldHideField(key),
+            sortable: true,
+            editable: true,
+          }
+        })
+      }
+    }
+    dataLoaded = true
+  })
+
+  const shouldHideField = name => {
+    if (name.startsWith("_")) return true
+    // always 'record'
+    if (name === "type") return true
+    // tables are always tied to a single modelId, this is irrelevant
+    if (name === "modelId") return true
+
+    return false
+  }
+</script>
+
+{#if dataLoaded}
+  <AgGrid bind:data {columnDefs} />
+{/if}
+
+<pre>{JSON.stringify(data, 0, 2)}</pre>
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index 0ce5088cb8..955bdfe25e 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -15,6 +15,7 @@ export { default as saveRecordButton } from "./Templates/saveRecordButton"
 export { default as link } from "./Link.svelte"
 export { default as image } from "./Image.svelte"
 export { default as Navigation } from "./Navigation.svelte"
+export { default as datagrid } from "./DataGrid.svelte"
 export { default as datatable } from "./DataTable.svelte"
 export { default as dataform } from "./DataForm.svelte"
 export { default as dataformwide } from "./DataFormWide.svelte"