started drilldown

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

@@ -21,6 +21,7 @@ export const getBackendUiStore = () => {
       records: [],
       name: ""
     },
+    breadcrumbs: [],
     selectedRecord: {},
     selectedDatabase: {},
     selectedModel: {},
@@ -31,11 +32,19 @@ export const getBackendUiStore = () => {
   store.actions = {
     navigate: name => store.update(state => ({ ...state, leftNavItem: name })),
     database: {
-      select: db => store.update(state => ({ ...state, selectedDatabase: db })),
+      select: db => store.update(state => {  
+          state.selectedDatabase = db
+          state.breadcrumbs = [db.name]
+          return state
+      })
     },
     records: {
       delete: record => store.update(state => { 
-        state.selectedView.records = remove(state.selectedView.records, { id: record.id });
+        state.selectedView.records = state.selectedView.records.filter(({ id }) => id !== record.id)
+        return state
+      }),
+      view: record => store.update(state => { 
+        state.breadcrumbs = [state.selectedDatabase.name, record.id]
         return state
       }),
     },

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

@@ -164,6 +164,7 @@ const initialise = (store, initial) => async () => {
   initial.actions = values(pkg.appDefinition.actions)
   initial.triggers = pkg.appDefinition.triggers
   initial.appInstances = pkg.application.instances
+  initial.appId = pkg.application.id
 
   if (!!initial.hierarchy && !isEmpty(initial.hierarchy)) {
     initial.hierarchy = constructHierarchy(initial.hierarchy)

packages/builder/src/common/core.js

@@ -118,6 +118,7 @@ export const getNewInstance = (appId, name) => {
     version: { key: "" },
     isNew: true,
     type: "instance",
+    datastoreconfig: "",
     id,
     name,
   }

packages/builder/src/database/DatabaseRoot.svelte

@@ -33,7 +33,7 @@
   $: databaseOpen = $backendUiStore.visibleModal === "DATABASE"
   $: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD"
   $: userOpen = $backendUiStore.visibleModal === "USER"
-  $: breadcrumbs = $store.currentNode
+  $: breadcrumbs = $backendUiStore.breadcrumbs.join(" / ")
 </script>
 
 <Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>
@@ -61,9 +61,7 @@
   <div class="node-view">
     <div class="database-actions">
       <div class="budibase__label--big">
-        {#if $backendUiStore.selectedDatabase.name}
-          {$backendUiStore.selectedDatabase.name} {breadcrumbs}
-        {/if}
+        {breadcrumbs}
       </div>
       {#if $backendUiStore.selectedDatabase.id}
         <ActionButton

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

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { store, backendUiStore } from "../../builderStore"
+  import { last } from "lodash/fp";
   import Select from "../../common/Select.svelte"
   import { getIndexSchema } from "../../common/core"
   import ActionButton from "../../common/ActionButton.svelte"
@@ -36,12 +37,21 @@
     backendUiStore.update(state => {
       state.selectedView.records = recordsForIndex
       if (state.selectedView.records.length > 0) {
-        headers = Object.keys(recordsForIndex[0])
+        headers = Object.keys(recordsForIndex[0]) 
       }
       return state
     })
   }
 
+  function drillIntoRecord(record) {
+    backendUiStore.update(state => {
+      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)
@@ -52,7 +62,7 @@
 <section>
   <div class="table-controls">
     <h4 class="budibase__title--3">
-      {$backendUiStore.selectedDatabase.name || ''}
+      {last($backendUiStore.breadcrumbs)}
     </h4>
     <Select
       icon="ri-eye-line"
@@ -83,7 +93,7 @@
               <div uk-dropdown="mode: click">
                 <ul class="uk-nav uk-dropdown-nav">
                   <li>
-                    <div on:click={async () => {}}>View</div>
+                    <div on:click={() => drillIntoRecord(row)}>View</div>
                   </li>
                   <li
                     on:click={() => {
@@ -101,14 +111,6 @@
                       Delete
                     </div>
                   </li>
-                  <li>
-                    <div
-                      on:click={async () => {
-                        const response = await api.saveRecord(row)
-                      }}>
-                      Duplicate
-                    </div>
-                  </li>
                 </ul>
               </div>
             </div>

packages/builder/src/database/ModelDataTable/api.js

@@ -2,7 +2,7 @@
   import { getNewRecord, getNewInstance } from "../../common/core"
 
   export async function createDatabase(appname, instanceName) {
-    const CREATE_DATABASE_URL = `/_builder/instance/_master/0/api/record`
+    const CREATE_DATABASE_URL = `/_builder/instance/_master/0/api/record/`
     const database = getNewInstance(appname, instanceName);
     const response = await api.post(CREATE_DATABASE_URL, database);
     return await response.json()
@@ -29,19 +29,6 @@
     return await response.json()
   }
 
-  export async function duplicateRecord(record, { appname, instanceId }) {
-    let recordBase = { ...record }
-
-    delete recordBase.id
-
-    recordBase = getNewRecord(recordBase, recordBase.key)
-    recordBase = overwritePresentProperties(recordBase, record)
-
-    const SAVE_RECORDS_URL = `/_builder/instance/${appname}/${instanceId}/api/record/`
-    const response = await api.post(SAVE_RECORDS_URL, recordBase)
-    return await response.json()
-  }
-
   export async function fetchDataForView(viewName, { appname, instanceId }) {
     const FETCH_RECORDS_URL = `/_builder/instance/${appname}/${instanceId}/api/listRecords/${viewName}`;
 

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

@@ -9,7 +9,7 @@
   let databaseName
 
   async function createDatabase() {
-    const response = await api.createDatabase($store.appname, databaseName)
+    const response = await api.createDatabase($store.appId, databaseName)
     store.createDatabaseForApp(response)
     onClosed()
   }

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

@@ -30,9 +30,14 @@
     )
     backendUiStore.update(state => {
       const idx = findIndex(state.selectedView.records, {
-        id: recordResponse.id,
+        id: recordResponse.id
       })
-      state.selectedView.records.splice(idx, 1, recordResponse)
+
+      if (idx > 0) {
+        state.selectedView.records.splice(idx, 1, recordResponse)
+      } else {
+        state.selectedView.records.push(recordResponse)
+      }
       return state
     })
     onClosed()

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

@@ -47,8 +47,10 @@
   }
   
   .modal-actions {
+    padding: 10px;
     position: absolute;
     bottom: 0;
+    left: 0;
     background: #fafafa;
     border-top: 1px solid #ccc;
     width: 100%;

packages/builder/src/nav/BackendNav.svelte

@@ -7,17 +7,6 @@
   import { hierarchy as hierarchyFunctions } from "../../../core/src"
   import NavItem from "./NavItem.svelte"
   import getIcon from "../common/icon"
-
-  const newDatabase = () => {
-    store.update(state => {})
-  }
-
-  const databaseManagementActions = [
-    {
-      label: "New Database",
-      onclick: newDatabase,
-    },
-  ]
 </script>
 
 <div class="items-root">

packages/builder/src/userInterface/CodeEditor.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { store } from "../builderStore/store"
+  import { store } from "../builderStore"
   import UIkit from "uikit"
   import ActionButton from "../common/ActionButton.svelte"
   import ButtonGroup from "../common/ButtonGroup.svelte"