Merge pull request #300 from Budibase/fix-data-components

fix datalist, datatable and chart component

packages/builder/src/components/common/Input.svelte

@@ -1,5 +1,5 @@
 <script>
-  import {onMount} from "svelte"
+  import { onMount } from "svelte"
   import { buildStyle } from "../../helpers.js"
   export let value = ""
   export let textAlign = "left"
@@ -7,22 +7,30 @@
   export let placeholder = ""
   export let suffix = ""
   export let onChange = val => {}
-  
+
   let centerPlaceholder = textAlign === "center"
 
   let style = buildStyle({ width, textAlign })
-  
+
   function handleChange(val) {
     value = val
     let _value = value !== "auto" ? value + suffix : value
     onChange(_value)
   }
 
-  $: displayValue = suffix && value && value.endsWith(suffix) ? value.replace(new RegExp(`${suffix}$`), "") : (value || "")
-  
+  $: displayValue =
+    suffix && value && value.endsWith(suffix)
+      ? value.replace(new RegExp(`${suffix}$`), "")
+      : value || ""
 </script>
 
-<input class:centerPlaceholder type="text" value={displayValue} {placeholder} {style} on:change={e => handleChange(e.target.value)} />
+<input
+  class:centerPlaceholder
+  type="text"
+  value={displayValue}
+  {placeholder}
+  {style}
+  on:change={e => handleChange(e.target.value)} />
 
 <style>
   input {
@@ -43,7 +51,7 @@
     outline: none;
   }
 
-  input::placeholder {    
+  input::placeholder {
     text-align: left;
   }
 

packages/builder/src/components/common/Inputs/InputGroup.svelte

@@ -11,9 +11,11 @@
 
   function handleChange(val, idx) {
     value.splice(idx, 1, val !== "auto" ? val + suffix : val)
-    
+
     value = value
-    let _value = value.map(v => (!v.endsWith(suffix) && v !== "auto" ? v + suffix : v))
+    let _value = value.map(v =>
+      !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
+    )
     onChange(_value)
   }
 
@@ -44,5 +46,4 @@
   .inputs-group {
     flex: 1;
   }
-
 </style>

packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte

@@ -151,7 +151,7 @@
   }
 </script>
 
-<div class="root" on:click|stopPropagation={() => {}}>
+<div class="root boundary" on:click|stopPropagation={() => {}}>
   <button>
     <MoreIcon />
   </button>

packages/builder/src/components/userInterface/FlatButton.svelte

@@ -1,5 +1,5 @@
 <script>
-  import {buildStyle} from "../../helpers.js"
+  import { buildStyle } from "../../helpers.js"
   export let value = ""
   export let text = ""
   export let icon = ""
@@ -8,19 +8,24 @@
   export let selected = false
   export let fontWeight = ""
 
-  $: style = buildStyle({padding, fontWeight})
+  $: style = buildStyle({ padding, fontWeight })
   $: useIcon = !!icon
 </script>
 
-<div class="flatbutton" {style} class:selected on:click={() => onClick(value || text)}>
+<div
+  class="flatbutton"
+  {style}
+  class:selected
+  on:click={() => onClick(value || text)}>
   {#if useIcon}
     <i class={icon} />
   {:else}
-    <span>{@html text}</span>
+    <span>
+      {@html text}
+    </span>
   {/if}
 </div>
 
-
 <style>
   .flatbutton {
     cursor: pointer;
@@ -41,8 +46,8 @@
     background: var(--ink-light);
     color: #ffffff;
   }
-  
-  i{
+
+  i {
     font-size: 20px;
   }
 </style>

packages/builder/src/components/userInterface/FlatButtonGroup.svelte

@@ -28,10 +28,8 @@
     onChange(val)
   }
 
-
   const checkSelected = val =>
     isMultiSelect ? value.includes(val) : value === val
-
 </script>
 
 <div class="flatbutton-group">

packages/builder/src/components/userInterface/ModelSelect.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { backendUiStore } from "builderStore"
+
+  export let value
+</script>
+
+<div class="uk-margin block-field">
+  <div class="uk-form-controls">
+    <select class="budibase__input" on:change {value}>
+      {#each $backendUiStore.models as model}
+        <option value={model._id}>{model.name}</option>
+      {/each}
+    </select>
+  </div>
+</div>

packages/builder/src/components/userInterface/OptionSelect.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount, beforeUpdate } from "svelte"
-  import {buildStyle} from "../../helpers.js"
+  import { buildStyle } from "../../helpers.js"
   export let options = []
   export let value = ""
   export let styleBindingProperty
@@ -214,10 +214,10 @@
     height: auto;
     padding: 5px 0px;
     cursor: pointer;
-    padding-left: 10px
+    padding-left: 10px;
   }
 
   li:hover {
-    background-color:#e6e6e6
+    background-color: #e6e6e6;
   }
 </style>

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

@@ -1,6 +1,7 @@
 import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import Checkbox from "../common/Checkbox.svelte"
+import ModelSelect from "components/userInterface/ModelSelect.svelte"
 
 import { all } from "./propertyCategories.js"
 
@@ -273,14 +274,20 @@ export default {
           _component: "@budibase/standard-components/datatable",
           description: "A component that generates a table from your data.",
           icon: "ri-archive-drawer-fill",
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
           children: [],
         },
         {
           name: "Form",
           description: "A component that generates a form from your data.",
           icon: "ri-file-edit-fill",
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
           _component: "@budibase/standard-components/dataform",
           template: {
             component: "@budibase/materialdesign-components/Form",
@@ -294,7 +301,10 @@ export default {
           _component: "@budibase/standard-components/datachart",
           description: "Shiny chart",
           icon: "ri-bar-chart-fill",
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
           children: [],
         },
         {
@@ -302,7 +312,10 @@ export default {
           _component: "@budibase/standard-components/datalist",
           description: "Shiny list",
           icon: "ri-file-list-fill",
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
           children: [],
         },
         {

packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte

@@ -5,7 +5,6 @@
 </script>
 
 <div class="uk-margin block-field">
-  <label class="uk-form-label">Model</label>
   <div class="uk-form-controls">
     <select class="budibase__input" bind:value>
       {#each $backendUiStore.models as model}

packages/standard-components/src/DataChart.svelte

@@ -20,17 +20,17 @@
     height: "400",
     dataFormat: "json",
     dataSource: {
-      data: $store[model._id] || [],
+      data: $store[model] || [],
     },
   }
 
   async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
+    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()
       store.update(state => {
-        state[model._id] = json
+        state[model] = json
         return state
       })
     } else {

packages/standard-components/src/DataList.svelte

@@ -10,13 +10,15 @@
   let store = _bb.store
 
   async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
+    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()
 
       store.update(state => {
-        state[model._id] = json
+        state[model] = json
         return state
       })
     } else {
@@ -24,7 +26,8 @@
     }
   }
 
-  $: data = $store[model._id] || []
+  $: data = $store[model] || []
+  $: if (model) fetchData()
 
   onMount(async () => {
     await fetchData()

packages/standard-components/src/DataTable.svelte

@@ -10,13 +10,14 @@
   let store = _bb.store
 
   async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
+    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()
 
       store.update(state => {
-        state[model._id] = json
+        state[model] = json
         return state
       })
 
@@ -26,7 +27,8 @@
     }
   }
 
-  $: data = $store[model._id] || []
+  $: data = $store[model] || []
+  $: if (model) fetchData()
 
   onMount(async () => {
     await fetchData()