From ea458639b390fac3a4572186b09ce7c6f53afc7d Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 15 May 2023 09:14:18 +0100
Subject: [PATCH] Navigation updates

---
 .../DataTable/ExternalDataSourceTable.svelte  | 10 ++-
 .../components/backend/DataTable/Table.svelte |  2 +
 .../src/components/deploy/RevertModal.svelte  |  3 +
 .../components/integration/QueryViewer.svelte | 72 +++++++++----------
 4 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
index 53a71f2afe..bc18bf1b41 100644
--- a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
@@ -3,6 +3,7 @@
 
   export let query = {}
   export let data = []
+  export let editRows = false
 
   let loading = false
   let error = false
@@ -12,7 +13,14 @@
 {#if error}
   <div class="errors">{error}</div>
 {/if}
-<Table schema={query.schema} {data} {loading} {type} rowCount={5} />
+<Table
+  schema={query.schema}
+  {data}
+  {loading}
+  {type}
+  rowCount={5}
+  allowEditing={editRows}
+/>
 
 <style>
   .errors {
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 4df6e9a306..5dc2e6f83a 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -22,6 +22,7 @@
   export let rowCount
   export let disableSorting = false
   export let customPlaceholder = false
+  export let allowEditing = true
 
   const dispatch = createEventDispatcher()
 
@@ -109,6 +110,7 @@
         {rowCount}
         {disableSorting}
         {customPlaceholder}
+        {allowEditing}
         showAutoColumns={!hideAutocolumns}
         on:clickrelationship={e => selectRelationship(e.detail)}
         on:sort
diff --git a/packages/builder/src/components/deploy/RevertModal.svelte b/packages/builder/src/components/deploy/RevertModal.svelte
index 0c3372f8ec..364add9053 100644
--- a/packages/builder/src/components/deploy/RevertModal.svelte
+++ b/packages/builder/src/components/deploy/RevertModal.svelte
@@ -9,6 +9,8 @@
   import { store } from "builderStore"
   import { API } from "api"
 
+  export let disabled = false
+
   let revertModal
   let appName
 
@@ -34,6 +36,7 @@
   size="M"
   tooltip="Revert changes"
   on:click={revertModal.show}
+  {disabled}
 />
 
 <Modal bind:this={revertModal}>
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 2542588f30..c9b5d64952 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { goto, beforeUrlChange, route, getDirection } from "@roxi/routify"
+  import { goto, beforeUrlChange, route } from "@roxi/routify"
   import {
     Icon,
     Select,
@@ -29,13 +29,14 @@
   import { fieldsToSchema, schemaToFields } from "helpers/data/utils"
   import AccessLevelSelect from "./AccessLevelSelect.svelte"
 
-  // $: lastRoute = $route.last
-  // $: console.log("lastRoute", lastRoute)
-  // $: direction = getDirection($route, lastRoute)
-  // $: console.log("directioon ", direction)
-
   export let query
 
+  const resumeNavigation = () => {
+    if (typeof navigateTo == "string") {
+      $goto(typeof navigateTo == "string" ? `${navigateTo}` : navigateTo)
+    }
+  }
+
   const transformerDocs = "https://docs.budibase.com/docs/transformers"
 
   let fields = query?.schema ? schemaToFields(query.schema) : []
@@ -45,21 +46,19 @@
   let currentTab = "JSON"
   let saveModal
   let queryStr = JSON.stringify(query)
-  let discard = false
+  let override = false
 
   let navigateTo = null
-  $: console.log("GO ", navigateTo)
-  $: console.log("DISCARD ", discard)
 
-  $beforeUrlChange((event, route) => {
+  $beforeUrlChange((event, targetRoute) => {
     const updated = JSON.stringify(query)
-    console.log("route ", route)
-    console.log("event ", event)
-    // if (updated !== queryStr && !discard) {
-    //   navigateTo = event.url
-    //   saveModal.show()
-    //   return false
-    // } else return true
+
+    if (updated !== queryStr && !override) {
+      navigateTo = event.type == "pushstate" ? event.url : null
+      saveModal.show()
+      return false
+    } else return true
+
     return true
   })
 
@@ -130,16 +129,13 @@
   // return the query.
   async function saveQuery() {
     try {
-      // const { _id } = await queries.save(query.datasourceId, query)
       const response = await queries.save(query.datasourceId, query)
       saveId = response._id
 
-      // notifications.success(`Query saved successfully`)
+      if (response?._rev) {
+        queryStr = JSON.stringify(query)
+      }
 
-      // // Go to the correct URL if we just created a new query
-      // if (!query._rev) {
-      //   $goto(`../../${_id}`)
-      // }
       return response
     } catch (error) {
       notifications.error("Error saving query")
@@ -150,8 +146,7 @@
 <Modal
   bind:this={saveModal}
   on:hide={() => {
-    console.log("running")
-    //navigateTo = null
+    navigateTo = null
   }}
 >
   <ModalContent
@@ -160,15 +155,13 @@
     cancelText="Discard Changes"
     size="L"
     onConfirm={async () => {
-      console.log("CONFIRM")
-      saveQuery() //needs ascertain success?
-      discard = true
-      $goto(`${navigateTo}`)
+      const saveResponse = await saveQuery()
+      override = true
+      resumeNavigation()
     }}
-    onCancel={() => {
-      console.log("CANCEL")
-      discard = true
-      $goto(`${navigateTo}`)
+    onCancel={async () => {
+      override = true
+      resumeNavigation()
     }}
   >
     <Body>Leaving this section will mean losing and changes to your query</Body>
@@ -183,7 +176,13 @@
     <div class="config">
       <div class="config-field">
         <Label>Query Name</Label>
-        <Input bind:value={query.name} />
+        <Input
+          value={query.name}
+          on:input={e => {
+            let newValue = e.target.value || ""
+            query.name = newValue.trim()
+          }}
+        />
       </div>
       {#if queryConfig}
         <div class="config-field">
@@ -268,9 +267,10 @@
             disabled={queryInvalid}
             on:click={async () => {
               const saveResponse = await saveQuery()
+              notifications.success(`Query saved successfully`)
               // Go to the correct URL if we just created a new query
-              if (saveResponse && !saveResponse._rev) {
-                $goto(`../../${saveResponse._id}`)
+              if (!query._rev) {
+                $goto(`../../${query._id}`)
               }
             }}
           >