From 85fe1cdcfe68fec5b8660ef4e0e395649e05a709 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 30 Jun 2020 14:12:37 +0100
Subject: [PATCH] backend - routing based on models

---
 .../builder/src/builderStore/store/backend.js |  3 --
 .../builder/src/builderStore/store/index.js   |  2 +-
 .../nav/ModelNavigator/ModelNavigator.svelte  |  2 +-
 .../[selectedDatabase]/_layout.svelte         |  1 -
 .../backend/database/_layout.svelte           | 36 -------------------
 .../backend/database/index.svelte             | 20 -----------
 .../pages/[application]/backend/index.svelte  |  2 +-
 .../model/[selectedModel]/_layout.svelte      | 14 ++++++++
 .../[selectedModel]}/index.svelte             |  2 +-
 .../backend/model/_layout.svelte              | 33 +++++++++++++++++
 .../[application]/backend/model/index.svelte  | 21 +++++++++++
 11 files changed, 72 insertions(+), 64 deletions(-)
 delete mode 100644 packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/_layout.svelte
 delete mode 100644 packages/builder/src/pages/[application]/backend/database/_layout.svelte
 delete mode 100644 packages/builder/src/pages/[application]/backend/database/index.svelte
 create mode 100644 packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte
 rename packages/builder/src/pages/[application]/backend/{database/[selectedDatabase] => model/[selectedModel]}/index.svelte (95%)
 create mode 100644 packages/builder/src/pages/[application]/backend/model/_layout.svelte
 create mode 100644 packages/builder/src/pages/[application]/backend/model/index.svelte

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 7f156e8c39..12e94aea60 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/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
diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 11f2ed365e..a6386c29c2 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/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
 }
 
diff --git a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
index 55a6610243..abb1ad7906 100644
--- a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
+++ b/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
diff --git a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/_layout.svelte b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/_layout.svelte
deleted file mode 100644
index 4fa864ce7a..0000000000
--- a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/_layout.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<slot />
diff --git a/packages/builder/src/pages/[application]/backend/database/_layout.svelte b/packages/builder/src/pages/[application]/backend/database/_layout.svelte
deleted file mode 100644
index 94453e3943..0000000000
--- a/packages/builder/src/pages/[application]/backend/database/_layout.svelte
+++ /dev/null
@@ -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>
diff --git a/packages/builder/src/pages/[application]/backend/database/index.svelte b/packages/builder/src/pages/[application]/backend/database/index.svelte
deleted file mode 100644
index 09c7c773f8..0000000000
--- a/packages/builder/src/pages/[application]/backend/database/index.svelte
+++ /dev/null
@@ -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
diff --git a/packages/builder/src/pages/[application]/backend/index.svelte b/packages/builder/src/pages/[application]/backend/index.svelte
index 82c0f9e069..488c67ff0e 100644
--- a/packages/builder/src/pages/[application]/backend/index.svelte
+++ b/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 -->
diff --git a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte
new file mode 100644
index 0000000000..a3ce7c6bf9
--- /dev/null
+++ b/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 />
diff --git a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
similarity index 95%
rename from packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
rename to packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
index a9f5589caf..232a569caa 100644
--- a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
+++ b/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"
diff --git a/packages/builder/src/pages/[application]/backend/model/_layout.svelte b/packages/builder/src/pages/[application]/backend/model/_layout.svelte
new file mode 100644
index 0000000000..7f36f26d22
--- /dev/null
+++ b/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>
diff --git a/packages/builder/src/pages/[application]/backend/model/index.svelte b/packages/builder/src/pages/[application]/backend/model/index.svelte
new file mode 100644
index 0000000000..da83f587f5
--- /dev/null
+++ b/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}