From 96a1bc52de9b07151c18c3b5d247c09a57ddd3cc Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 7 May 2020 14:59:06 +0100
Subject: [PATCH] added model props

---
 .../builder/src/builderStore/store/backend.js | 13 +--
 .../builder/src/builderStore/store/index.js   | 10 +-
 .../ModelDataTable/ModelDataTable.svelte      |  9 --
 .../modals/CreateEditRecord.svelte            | 14 ---
 .../src/components/nav/DatabasesList.svelte   |  1 -
 .../userInterface/PropControl.svelte          |  2 +-
 .../userInterface/StateBindingControl.svelte  | 12 ++-
 .../userInterface/pagesParsing/createProps.js | 11 +--
 .../userInterface/pagesParsing/types.js       |  3 +
 .../backend/database/_layout.svelte           |  1 -
 .../[application]/frontend/_layout.svelte     |  1 -
 packages/standard-components/components.json  | 15 +--
 .../standard-components/src/DataChart.svelte  | 99 +++++++++++++++++++
 scripts/symlinkDev.js                         | 17 ++--
 14 files changed, 131 insertions(+), 77 deletions(-)
 create mode 100644 packages/standard-components/src/DataChart.svelte

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index a28be5d982..a7bb363f09 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -80,15 +80,4 @@ export const createDatabaseForApp = store => appInstance => {
     state.appInstances.push(appInstance)
     return state
   })
-}
-
-export const saveBackend = async state => {
-  await api.post(`/_builder/api/${state.appname}/backend`, {
-    appDefinition: {
-      hierarchy: state.hierarchy,
-      actions: state.actions,
-      triggers: state.triggers,
-    },
-    accessLevels: state.accessLevels,
-  })
-}
+}
\ No newline at end of file
diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index d1d4aa3e6d..3baaa2558f 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -24,7 +24,6 @@ export const getStore = () => {
   const initial = {
     apps: [],
     appname: "",
-    hierarchy: {},
     pages: DEFAULT_PAGES_OBJECT,
     mainUi: {},
     unauthenticatedUi: {},
@@ -44,14 +43,7 @@ export const getStore = () => {
 
   store.setPackage = setPackage(store, initial)
 
-  // store.saveLevel = backendStoreActions.saveLevel(store)
-  // store.deleteLevel = backendStoreActions.deleteLevel(store)
   store.createDatabaseForApp = backendStoreActions.createDatabaseForApp(store)
-  // store.saveAction = backendStoreActions.saveAction(store)
-  // store.deleteAction = backendStoreActions.deleteAction(store)
-  // store.saveTrigger = backendStoreActions.saveTrigger(store)
-  // store.deleteTrigger = backendStoreActions.deleteTrigger(store)
-  // store.importAppDefinition = importAppDefinition(store)
 
   store.saveScreen = saveScreen(store)
   store.renameScreen = renameScreen(store)
@@ -364,7 +356,7 @@ const addChildComponent = store => (componentToAdd, presetName) => {
       : state.components[componentToAdd]
 
     const presetProps = presetName ? component.presets[presetName] : {}
-    const newComponent = createProps(component, presetProps)
+    const newComponent = createProps(component, presetProps, state)
 
     state.currentComponentInfo._children = state.currentComponentInfo._children.concat(
       newComponent.props
diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
index b84bd319ee..7729bb23d3 100644
--- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
@@ -80,15 +80,6 @@
     currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
   )
 
-  function drillIntoRecord(record) {
-    backendUiStore.update(state => {
-      state.breadcrumbs = [...state.breadcrumbs, record.type, record.id]
-      state.selectedRecord = record
-      state.selectedView = childViewsForRecord($store.hierarchy)[0]
-      return state
-    })
-  }
-
   onMount(() => {
     if (views.length) {
       backendUiStore.actions.views.select(views[0])
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
index 53cbe5e45c..183c7b3f6e 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
@@ -20,10 +20,6 @@
 
   $: instanceId = $backendUiStore.selectedDatabase.id
 
-  $: models = $backendUiStore.selectedRecord
-    ? childModelsForModel($store.hierarchy)
-    : $store.hierarchy.children
-
   $: modelSchema = $backendUiStore.selectedModel
     ? Object.entries($backendUiStore.selectedModel.schema)
     : []
@@ -65,16 +61,6 @@
   <h4 class="budibase__title--4">Create / Edit Record</h4>
   <ErrorsBox {errors} />
   <form on:submit|preventDefault class="uk-form-stacked">
-    {#if !record}
-      <div class="uk-margin">
-        <label class="uk-form-label" for="form-stacked-text">Model</label>
-        <Select bind:value={selectedModel}>
-          {#each models as model}
-            <option value={model}>{model.name}</option>
-          {/each}
-        </Select>
-      </div>
-    {/if}
     {#each modelSchema as [key, meta]}
       <div class="uk-margin">
         <RecordFieldControl
diff --git a/packages/builder/src/components/nav/DatabasesList.svelte b/packages/builder/src/components/nav/DatabasesList.svelte
index 1a270c3497..65db9e8f2f 100644
--- a/packages/builder/src/components/nav/DatabasesList.svelte
+++ b/packages/builder/src/components/nav/DatabasesList.svelte
@@ -6,7 +6,6 @@
   import { CheckIcon } from "../common/Icons"
 
   $: instances = $store.appInstances
-  // $: views = $store.hierarchy.indexes
 
   async function selectDatabase(database) {
     backendUiStore.actions.database.select(database)
diff --git a/packages/builder/src/components/userInterface/PropControl.svelte b/packages/builder/src/components/userInterface/PropControl.svelte
index 33eac1f92d..d4d30a2058 100644
--- a/packages/builder/src/components/userInterface/PropControl.svelte
+++ b/packages/builder/src/components/userInterface/PropControl.svelte
@@ -20,7 +20,7 @@
     <h5>{prop_name}</h5>
     <StateBindingControl
       value={prop_value}
-      type={prop_definition.type}
+      type={prop_definition.type || prop_definition}
       options={prop_definition.options}
       styleBindingProperty={prop_definition.styleBindingProperty}
       onChanged={v => setProp(prop_name, v)} />
diff --git a/packages/builder/src/components/userInterface/StateBindingControl.svelte b/packages/builder/src/components/userInterface/StateBindingControl.svelte
index 266b61cd50..9dfff26991 100644
--- a/packages/builder/src/components/userInterface/StateBindingControl.svelte
+++ b/packages/builder/src/components/userInterface/StateBindingControl.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { backendUiStore } from "builderStore";
   import IconButton from "../common/IconButton.svelte"
   import Input from "../common/Input.svelte"
   import PropertyCascader from "./PropertyCascader"
@@ -22,7 +23,16 @@
         size="19"
         on:click={() => onChanged(!value)} />
     </div>
-  {:else if type === 'options'}
+  {:else if type === 'models'}
+    <select
+      class="uk-select uk-form-small"
+      {value}
+      on:change={ev => onChanged(ev.target.value)}>
+      {#each $backendUiStore.models || [] as option}
+        <option value={`all_${option._id}`}>{option.name}</option>
+      {/each}
+    </select>
+  {:else if type === 'options' || type === 'models'}
     <select
       class="uk-select uk-form-small"
       {value}
diff --git a/packages/builder/src/components/userInterface/pagesParsing/createProps.js b/packages/builder/src/components/userInterface/pagesParsing/createProps.js
index 6b201ae5ca..f210958da5 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/createProps.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/createProps.js
@@ -26,12 +26,14 @@ export const createProps = (componentDefinition, derivedFromProps) => {
     _component: componentDefinition._component,
     _styles: { position: {}, layout: {} },
     _code: "",
+    _instanceId: "dev-1" // TODO fix
   }
 
   const errors = []
 
-  if (!componentDefinition.name)
+  if (!componentDefinition._component) {
     errorOccurred("_component", "Component name not supplied")
+  }
 
   for (let propName in componentDefinition.props) {
     const parsedPropDef = parsePropDef(componentDefinition.props[propName])
@@ -93,10 +95,3 @@ const parsePropDef = propDef => {
 
 export const arrayElementComponentName = (parentComponentName, arrayPropName) =>
   `${parentComponentName}:${arrayPropName}`
-
-/*
-Allowed propDefOptions
-- type: string, bool, number, array
-- default: default value, when undefined
-- required: field is required
-*/
diff --git a/packages/builder/src/components/userInterface/pagesParsing/types.js b/packages/builder/src/components/userInterface/pagesParsing/types.js
index 4e2ee95ae6..fe49d31727 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/types.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/types.js
@@ -20,4 +20,7 @@ export const TYPE_MAP = {
       "##bbstate": "",
     },
   },
+  models: { 
+    default: [],
+  }
 }
diff --git a/packages/builder/src/pages/[application]/backend/database/_layout.svelte b/packages/builder/src/pages/[application]/backend/database/_layout.svelte
index 71bc607d76..6a5792ad33 100644
--- a/packages/builder/src/pages/[application]/backend/database/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/database/_layout.svelte
@@ -4,7 +4,6 @@
   import { onMount } from "svelte"
 
   $: instances = $store.appInstances
-  $: views = $store.hierarchy.indexes
 
   async function selectDatabase(database) {
     backendUiStore.actions.database.select(database)
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 77a96451ef..67cffb9577 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -16,7 +16,6 @@
   import { AddIcon } from "components/common/Icons"
 
   $: instances = $store.appInstances
-  $: views = $store.hierarchy.indexes
 
   async function selectDatabase(database) {
     backendUiStore.actions.database.select(database)
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 3da502e9fc..80bd42ec21 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -264,23 +264,16 @@
 	},
 	"datatable": {
 		"description": "an HTML table that fetches data from a model or view and displays it.",
+		"data": true,
 		"props": {
-			"_instanceId": "string",
-			"model": {
-				"type": "options",
-				"default": "",
-				"options": [
-					"all_6dc86335-83b7-462c-90ca-1fe7feb08942",
-					"all_fcd00735-01f0-451c-819e-902a3ea53c26"
-				]
-			}
+			"model": "models" 
 		}
 	},
 	"dataform": {
 		"description": "an HTML table that fetches data from a model or view and displays it.",
+		"data": true,
 		"props": {
-			"_viewName": "string",
-			"_instanceId": "string"
+			"model": "models"
 		}
 	},
 	"link": {
diff --git a/packages/standard-components/src/DataChart.svelte b/packages/standard-components/src/DataChart.svelte
new file mode 100644
index 0000000000..4d403ce725
--- /dev/null
+++ b/packages/standard-components/src/DataChart.svelte
@@ -0,0 +1,99 @@
+<script>
+  import { onMount } from "svelte"
+
+  export let _bb
+  export let onLoad
+  export let _instanceId
+  export let model
+
+  let cssVariables
+  let headers = []
+  let data = []
+
+  async function fetchData() {
+    const FETCH_RECORDS_URL = `/api/${_instanceId}/${model}/records`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const json = await response.json()
+
+      data = json
+    } else {
+      throw new Error("Failed to fetch records.", response)
+    }
+  }
+
+  onMount(async () => {
+    await fetchData()
+  })
+</script>
+
+<!-- This prop was in the old one -->
+<!-- use:cssVars={cssVariables} -->
+
+<table class="uk-table">
+  <thead>
+    <tr>
+      {#each headers as header}
+        <th>{header}</th>
+      {/each}
+    </tr>
+  </thead>
+  <tbody>
+    {#each data as row}
+      <tr>
+        {#each headers as header}
+          {#if row[header]}
+            <td>{row[header]}</td>
+          {/if}
+        {/each}
+      </tr>
+    {/each}
+  </tbody>
+</table>
+
+<!-- <button
+  bind:this={theButton}
+  use:cssVars={cssVariables}
+  class="{className}
+  {customClasses}"
+  disabled={disabled || false}
+  on:click={clickHandler}
+  style={buttonStyles}>
+  {#if !_bb.props._children || _bb.props._children.length === 0}
+    {contentText}
+  {/if}
+</button> -->
+
+<style>
+  table {
+    border: 1px solid #ccc;
+    background: #fff;
+    border-radius: 3px;
+    border-collapse: collapse;
+  }
+
+  thead {
+    background: #f9f9f9;
+    border: 1px solid #ccc;
+  }
+
+  thead th {
+    color: var(--button-text);
+    text-transform: capitalize;
+    font-weight: 500;
+    font-size: 14px;
+    text-rendering: optimizeLegibility;
+    letter-spacing: 1px;
+  }
+
+  tbody tr {
+    border-bottom: 1px solid #ccc;
+    transition: 0.3s background-color;
+    color: var(--secondary100);
+    font-size: 14px;
+  }
+
+  tbody tr:hover {
+    background: #fafafa;
+  }
+</style>
diff --git a/scripts/symlinkDev.js b/scripts/symlinkDev.js
index 5c258b84fb..9792a4529e 100755
--- a/scripts/symlinkDev.js
+++ b/scripts/symlinkDev.js
@@ -9,29 +9,28 @@
 
 const fs = require("fs")
 const { resolve } = require("path")
+const rimraf = require("rimraf");
 
-const devDir = "/tmp/.budibase/@budibase"
+const devDir = "/tmp/.budibase"
 
-// create the dev directory if it doesn't exist
-if (!fs.existsSync(devDir)) {
-  fs.mkdirSync(devDir, { recursive: true })
-}
+rimraf.sync(devDir);
+fs.mkdirSync(`${devDir}/@budibase`, { recursive: true })
 
 const SYMLINK_PATHS = [
   {
-    symlink: "/tmp/.budibase/@budibase/materialdesign-components",
+    symlink: `${devDir}/@budibase/materialdesign-components`,
     destination: resolve("packages/materialdesign-components"),
   },
   {
-    symlink: "/tmp/.budibase/@budibase/standard-components",
+    symlink: `${devDir}/@budibase/standard-components`,
     destination: resolve("packages/standard-components"),
   },
   {
-    symlink: "/tmp/.budibase/budibase-client.esm.mjs",
+    symlink: `${devDir}/budibase-client.esm.mjs`,
     destination: resolve("packages/client/dist/budibase-client.esm.mjs"),
   },
   {
-    symlink: "/tmp/.budibase/budibase-client.js",
+    symlink: `${devDir}/budibase-client.js`,
     destination: resolve("packages/client/dist/budibase-client.js"),
   },
 ]