reactive model data table

packages/builder/rollup.config.js

@@ -105,7 +105,9 @@ const lodash_fp_exports = [
   "toPairs",
   "remove",
   "findIndex",
-  "compose"
+  "compose",
+  "get",
+  "tap"
 ]
 
 const lodash_exports = [

packages/builder/src/PackageRoot.svelte

@@ -4,7 +4,7 @@
   import UserInterfaceRoot from "./userInterface/UserInterfaceRoot.svelte"
   import BackendRoot from "./BackendRoot.svelte"
   import { fade } from "svelte/transition"
-  import { SettingsIcon, PreviewIcon, HelpIcon } from "./common/Icons/"
+  import { SettingsIcon, PreviewIcon } from "./common/Icons/"
 
   const TABS = {
     BACKEND: "backend",

packages/builder/src/builderStore/store/backend.js

@@ -23,7 +23,6 @@ export const getBackendUiStore = () => {
       name: ""
     },
     breadcrumbs: [],
-    selectedRecord: {},
     selectedDatabase: {},
     selectedModel: {},
   }
@@ -49,6 +48,12 @@ export const getBackendUiStore = () => {
         return state
       }),
     },
+    views: {
+      select: view => store.update(state => { 
+        state.selectedView = { ...state.selectedView, ...view }
+        return state
+      })
+    },
     modals: {
       show: modal => store.update(state => ({ ...state, visibleModal: modal })),
       hide: () => store.update(state => ({ ...state, visibleModal: null }))

packages/builder/src/database/ModelDataTable/ModelDataTable.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { store, backendUiStore } from "../../builderStore"
-  import { last } from "lodash/fp";
+  import { tap, get, find, last, compose, flatten, map } from "lodash/fp"
   import Select from "../../common/Select.svelte"
   import { getIndexSchema } from "../../common/core"
   import ActionButton from "../../common/ActionButton.svelte"
@@ -15,58 +15,70 @@
 
   let selectedView = ""
   let modalOpen = false
+  let data = []
   let headers = []
-  let selectedRecord
+  let views = []
   let currentPage = 0
 
-  $: views = $store.hierarchy.indexes
+  $: views = $backendUiStore.selectedRecord
+    ? childViewsForRecord($store.hierarchy)
+    : $store.hierarchy.indexes
+
   $: currentAppInfo = {
     appname: $store.appname,
     instanceId: $backendUiStore.selectedDatabase.id,
   }
-  $: data = $backendUiStore.selectedView.records.slice(
-    currentPage * ITEMS_PER_PAGE,
-    currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
+  // $: data =
+  //   $backendUiStore.selectedDatabase &&
+  //   $backendUiStore.selectedView.records.slice(
+  //     currentPage * ITEMS_PER_PAGE,
+  //     currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
+  //   )
+
+  $: fetchRecordsForView(
+    $backendUiStore.selectedView,
+    $backendUiStore.selectedDatabase
+  ).then(records => {
+    data = records
+    headers = getSchema($backendUiStore.selectedView).map(get("name"))
+  })
+
+  const childViewsForRecord = compose(
+    flatten,
+    map("indexes"),
+    get("children")
   )
-  $: showTable = currentAppInfo.instanceId && views.length > 0
 
   const getSchema = getIndexSchema($store.hierarchy)
 
-  async function fetchRecordsForView(viewName) {
-    const recordsForIndex = await api.fetchDataForView(viewName, currentAppInfo)
-    backendUiStore.update(state => {
-      state.selectedView.records = recordsForIndex
-      if (state.selectedView.records.length > 0) {
-        headers = Object.keys(recordsForIndex[0]) 
-      }
-      return state
+  async function fetchRecordsForView(view, instance) {
+    const viewName = $backendUiStore.selectedRecord
+      ? `${$backendUiStore.selectedRecord.type}/`
+      : view.name
+    return await api.fetchDataForView(view.name, {
+      appname: $store.appname,
+      instanceId: instance.id,
     })
   }
 
   function drillIntoRecord(record) {
     backendUiStore.update(state => {
-      state.selectedRecord = record 
+      state.selectedRecord = record
       state.breadcrumbs = [state.selectedDatabase.name, record.id]
-      // Update the dropdown with the child indexes for that record
       return state
     })
   }
-
-  onMount(async () => {
-    if (views.length > 0) {
-      await fetchRecordsForView(views[0].name, currentAppInfo)
-    }
-  })
 </script>
 
 <section>
   <div class="table-controls">
-    <h4 class="budibase__title--3">
-      {last($backendUiStore.breadcrumbs)}
-    </h4>
+    <h4 class="budibase__title--3">{last($backendUiStore.breadcrumbs)}</h4>
     <Select
       icon="ri-eye-line"
-      on:change={e => fetchRecordsForView(e.target.value)}>
+      on:change={e => {
+        const view = e.target.value
+        backendUiStore.actions.views.select(view)
+      }}>
       {#each views as view}
         <option value={view.name}>{view.name}</option>
       {/each}

packages/builder/src/database/ModelDataTable/modals/CreateUser.svelte

@@ -2,15 +2,15 @@
   import Modal from "../../../common/Modal.svelte"
   import { store } from "../../../builderStore"
   import ActionButton from "../../../common/ActionButton.svelte"
-  import * as api from "../api"
+  // import * as api from "../api"
 
   export let onClosed
 
   let userName
 
   async function createUser() {
-    const response = await api.createUser($store.appname, userName)
-    store.createUserForInstance(response)
+    // const response = await api.createUser($store.appname, userName)
+    // store.createUserForInstance(response)
     onClosed()
   }
 </script>