backend - routing based on models

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

@@ -27,9 +27,6 @@ export const getBackendUiStore = () => {
         const views = await viewsResponse.json()
         store.update(state => {
           state.selectedDatabase = db
-          if (models && models.length > 0) {
-            store.actions.models.select(models[0])
-          }
           state.models = models
           state.views = views
           return state

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

@@ -109,8 +109,8 @@ const setPackage = (store, initial) => async pkg => {
   initial.builtins = [getBuiltin("##builtin/screenslot")]
   initial.appInstances = pkg.application.instances
   initial.appId = pkg.application._id
-
   store.set(initial)
+  await backendUiStore.actions.database.select(initial.appInstances[0])
   return initial
 }
 

packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte

@@ -25,7 +25,7 @@
 
   function selectModel(model, fieldId) {
     backendUiStore.actions.models.select(model)
-
+    $goto(`./model/${model._id}`)
     if (fieldId) {
       backendUiStore.update(state => {
         state.selectedField = fieldId

packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/_layout.svelte

@@ -1 +0,0 @@
-<slot />

packages/builder/src/pages/[application]/backend/database/_layout.svelte

@@ -1,36 +0,0 @@
-<script>
-  import { store, backendUiStore } from "builderStore"
-  import { goto } from "@sveltech/routify"
-  import { onMount } from "svelte"
-
-  $: instances = $store.appInstances
-
-  async function selectDatabase(database) {
-    backendUiStore.actions.database.select(database)
-  }
-
-  onMount(async () => {
-    if ($store.appInstances.length > 0) {
-      await selectDatabase($store.appInstances[0])
-      $goto(`./${$backendUiStore.selectedDatabase._id}`)
-    }
-  })
-</script>
-
-<div class="root">
-  <div class="node-view">
-    <slot />
-  </div>
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    position: relative;
-  }
-
-  .node-view {
-    overflow-y: auto;
-    flex: 1 1 auto;
-  }
-</style>

packages/builder/src/pages/[application]/backend/database/index.svelte

@@ -1,20 +0,0 @@
-<script>
-  import { store, backendUiStore } from "builderStore"
-  import { goto } from "@sveltech/routify"
-  import { onMount } from "svelte"
-
-  $: instances = $store.appInstances
-
-  async function selectDatabase(database) {
-    backendUiStore.actions.database.select(database)
-  }
-
-  onMount(async () => {
-    if ($store.appInstances.length > 0) {
-      await selectDatabase($store.appInstances[0])
-      $goto(`../${$backendUiStore.selectedDatabase._id}`)
-    }
-  })
-</script>
-
-Please select a database

packages/builder/src/pages/[application]/backend/index.svelte

@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  $goto("../database")
+  $goto("../model")
 </script>
 
 <!-- routify:options index=false -->

packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte

@@ -0,0 +1,14 @@
+<script>
+import { params } from "@sveltech/routify"
+import { backendUiStore } from "builderStore"
+
+if ($params.selectedModel) {
+  const model = $backendUiStore.models.find(m => m._id === $params.selectedModel)
+  if (model) {
+    backendUiStore.actions.models.select(model)
+  }
+}
+
+</script>
+
+<slot />

packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte → packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte

@@ -3,7 +3,7 @@
   import { Button } from "@budibase/bbui"
   import EmptyModel from "components/nav/ModelNavigator/EmptyModel.svelte"
   import ModelDataTable from "components/database/ModelDataTable"
-  import { store, backendUiStore } from "builderStore"
+  import { backendUiStore } from "builderStore"
   import ActionButton from "components/common/ActionButton.svelte"
   import * as api from "components/database/ModelDataTable/api"
   import { CreateEditRecordModal } from "components/database/ModelDataTable/modals"

packages/builder/src/pages/[application]/backend/model/_layout.svelte

@@ -0,0 +1,33 @@
+<script>
+  import { backendUiStore } from "builderStore"
+  import { goto, leftover } from "@sveltech/routify"
+  import { onMount } from "svelte"
+
+  async function selectModel(model) {
+    backendUiStore.actions.models.select(model)
+  }
+
+  onMount(async () => {
+    if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
+      $goto(`./${$backendUiStore.models[0]._id}`)
+    }
+  })
+</script>
+
+<div class="root">
+  <div class="node-view">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .root {
+    height: 100%;
+    position: relative;
+  }
+
+  .node-view {
+    overflow-y: auto;
+    flex: 1 1 auto;
+  }
+</style>

packages/builder/src/pages/[application]/backend/model/index.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { store, backendUiStore } from "builderStore"
+  import { goto, leftover } from "@sveltech/routify"
+  import { onMount } from "svelte"
+
+  async function selectModel(model) {
+    backendUiStore.actions.models.select(model)
+  }
+
+  onMount(async () => {
+    if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
+      $goto(`../${$backendUiStore.models[0]._id}`)
+    }
+  })
+</script>
+
+{#if $backendUiStore.models.length === 0}
+Please create a model
+{:else}
+Please select a model
+{/if}