From 9c258da57920cebe336462fad6542c5079d34b79 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 2 Jun 2020 23:26:06 +0100
Subject: [PATCH] spike - list that accepts children

---
 .../userInterface/temporaryPanelStructure.js  | 11 +++
 packages/client/src/render/attachChildren.js  | 30 +++++---
 .../src/render/prepareRenderComponent.js      |  4 +-
 packages/standard-components/components.json  | 15 ++++
 packages/standard-components/src/List.svelte  | 74 +++++++++++++++++++
 packages/standard-components/src/index.js     |  1 +
 6 files changed, 125 insertions(+), 10 deletions(-)
 create mode 100644 packages/standard-components/src/List.svelte

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 55036b2da5..1c809e0aab 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -318,6 +318,17 @@ export default {
           },
           children: [],
         },
+        {
+          name: "Another List",
+          _component: "@budibase/standard-components/list",
+          description: "Shiny list",
+          icon: "ri-file-list-fill",
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
+          children: [],
+        },
         {
           name: "Map",
           _component: "@budibase/standard-components/datamap",
diff --git a/packages/client/src/render/attachChildren.js b/packages/client/src/render/attachChildren.js
index db3c3a212c..3e4ebef103 100644
--- a/packages/client/src/render/attachChildren.js
+++ b/packages/client/src/render/attachChildren.js
@@ -14,6 +14,7 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
   const anchor = options && options.anchor ? options.anchor : null
   const force = options ? options.force : false
   const hydrate = options ? options.hydrate : true
+  const context = options && options.context
 
   if (!force && treeNode.children.length > 0) return treeNode.children
 
@@ -37,16 +38,27 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
 
     const ComponentConstructor = componentLibraries[libName][componentName]
 
-    const childNodesThisIteration = prepareRenderComponent({
-      props: childProps,
-      parentNode: treeNode,
-      ComponentConstructor,
-      htmlElement,
-      anchor,
-    })
+    const prepareNodes = ctx => {
+      const childNodesThisIteration = prepareRenderComponent({
+        props: childProps,
+        parentNode: treeNode,
+        ComponentConstructor,
+        htmlElement,
+        anchor,
+        context: ctx,
+      })
 
-    for (let childNode of childNodesThisIteration) {
-      childNodes.push(childNode)
+      for (let childNode of childNodesThisIteration) {
+        childNodes.push(childNode)
+      }
+    }
+
+    if (Array.isArray(context)) {
+      for (let singleCtx of context) {
+        prepareNodes(singleCtx)
+      }
+    } else {
+      prepareNodes(context)
     }
   }
 
diff --git a/packages/client/src/render/prepareRenderComponent.js b/packages/client/src/render/prepareRenderComponent.js
index 6e8ae123d0..c8b9c5d14c 100644
--- a/packages/client/src/render/prepareRenderComponent.js
+++ b/packages/client/src/render/prepareRenderComponent.js
@@ -7,11 +7,12 @@ export const prepareRenderComponent = ({
   anchor,
   props,
   parentNode,
+  context,
 }) => {
   const parentContext = (parentNode && parentNode.context) || {}
 
   let nodesToRender = []
-  const createNodeAndRender = context => {
+  const createNodeAndRender = () => {
     let componentContext = parentContext
     if (context) {
       componentContext = { ...context }
@@ -48,6 +49,7 @@ export const prepareRenderComponent = ({
             if (typeof propValue === "string") {
               storeBoundProps[prop] = mustache.render(propValue, {
                 state,
+                context: componentContext,
               })
             }
           }
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index f9c800489e..574cbd5446 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -216,6 +216,21 @@
 			}
 		}
 	},
+	"list": {
+		"description": "A configurable data list that attaches to your backend models.",
+		"data": true,
+		"props": {
+			"model": "models",
+			"layout": {
+				"type": "options",
+				"default": "list",
+				"options": [
+					"list",
+					"grid"
+				]
+			}
+		}
+	},
 	"datamap": {
 		"description": "shiny chart",
 		"data": true,
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
new file mode 100644
index 0000000000..8ab738fae8
--- /dev/null
+++ b/packages/standard-components/src/List.svelte
@@ -0,0 +1,74 @@
+<script>
+  import { onMount } from "svelte"
+
+  export let _bb
+  export let _instanceId
+  export let model
+  export let layout = "list"
+
+  let headers = []
+  let store = _bb.store
+  let target
+
+  async function fetchData() {
+    if (!model || !model.length) return
+
+    const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const json = await response.json()
+
+      _bb.attachChildren(target, {
+        hydrate: false,
+        context: json,
+      })
+    } else {
+      throw new Error("Failed to fetch records.", response)
+    }
+
+  }
+
+  $: if (model) fetchData()
+
+  onMount(async () => {
+    await fetchData()
+  })
+</script>
+
+<section class:grid={layout === 'grid'} class:list={layout === 'list'}>
+  <div class="data-card" bind:this={target}>
+  </div>
+</section>
+
+<style>
+  .list {
+    display: flex;
+    flex-direction: column;
+    font-family: Roboto;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  ul {
+    list-style-type: none;
+  }
+
+  li {
+    margin: 5px 0 5px 0;
+  }
+
+  .data-card {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 10px;
+  }
+
+  .data-key {
+    font-weight: bold;
+    font-size: 20px;
+    text-transform: capitalize;
+  }
+</style>
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index a201c1afae..2284ab1fcb 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -18,5 +18,6 @@ export { default as datatable } from "./DataTable.svelte"
 export { default as dataform } from "./DataForm.svelte"
 export { default as datachart } from "./DataChart.svelte"
 export { default as datalist } from "./DataList.svelte"
+export { default as list } from "./List.svelte"
 export { default as datasearch } from "./DataSearch.svelte"
 export { default as datamap } from "./DataMap.svelte"