From 8149ad848f503a1028eb04e79656e73096091148 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 16 Oct 2020 15:16:29 +0100
Subject: [PATCH] Add new DetailScreenSelect component for selecting only
 detail screens and update detail linking in grids

---
 .../userInterface/DetailScreenSelect.svelte   | 49 +++++++++++++++++++
 .../userInterface/temporaryPanelStructure.js  |  6 +--
 .../src/DataGrid/Component.svelte             |  8 +--
 .../src/DataGrid/ViewDetails/Cell.svelte      |  7 +--
 .../src/DataGrid/customRenderer.js            | 13 +++--
 5 files changed, 63 insertions(+), 20 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/DetailScreenSelect.svelte

diff --git a/packages/builder/src/components/userInterface/DetailScreenSelect.svelte b/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
new file mode 100644
index 0000000000..1e2908ab54
--- /dev/null
+++ b/packages/builder/src/components/userInterface/DetailScreenSelect.svelte
@@ -0,0 +1,49 @@
+<script>
+  import { DataList } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { store } from "builderStore"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+
+  $: urls = getUrls()
+
+  const handleBlur = () => dispatch("change", value)
+
+  const getUrls = () => {
+    return [
+      ...$store.screens
+        .filter(
+          screen =>
+            screen.props._component.endsWith("/rowdetail") ||
+            screen.route.endsWith(":id")
+        )
+        .map(screen => ({
+          name: screen.props._instanceName,
+          url: screen.route,
+          sort: screen.props._component,
+        })),
+    ]
+  }
+</script>
+
+<div>
+  <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
+    <option value="" />
+    {#each urls as url}
+      <option value={url.url}>{url.name}</option>
+    {/each}
+  </DataList>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+  }
+  div :global(> div) {
+    flex: 1 1 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index cb35d140c4..a24d101f5d 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -6,6 +6,7 @@ import TableViewSelect from "components/userInterface/TableViewSelect.svelte"
 import TableViewFieldSelect from "components/userInterface/TableViewFieldSelect.svelte"
 import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
 import ScreenSelect from "components/userInterface/ScreenSelect.svelte"
+import DetailScreenSelect from "components/userInterface/DetailScreenSelect.svelte"
 import { IconSelect } from "components/userInterface/IconSelect"
 import Colorpicker from "@budibase/colorpicker"
 
@@ -328,10 +329,9 @@ export default {
                 control: TableViewSelect,
               },
               {
-                label: "Table URL",
+                label: "Detail URL",
                 key: "detailUrl",
-                placeholder: "tableName",
-                control: ScreenSelect,
+                control: DetailScreenSelect,
               },
               {
                 label: "Editable",
diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 9930f90aca..0d80990513 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -94,7 +94,7 @@
             sortable: false,
             cellRenderer: getRenderer({
               type: "_id",
-              options: detailUrl,
+              options: { detailUrl },
             }),
             autoHeight: true,
             pinned: "left",
@@ -179,15 +179,9 @@
 </div>
 
 <style>
-  .container :global(.ag-pinned-left-header) {
-    border-right-color: #dde2eb !important;
-  }
   .container :global(.ag-pinned-left-header .ag-header-cell-label) {
     justify-content: center;
   }
-  .container :global(.ag-cell-last-left-pinned) {
-    border-right-color: #dde2eb !important;
-  }
 
   .controls {
     min-height: 15px;
diff --git a/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
index d17f7425a2..b4b1eed8b7 100644
--- a/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
+++ b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte
@@ -1,14 +1,11 @@
 <script>
-  import { createEventDispatcher } from "svelte"
-  import { Icon, Button } from "@budibase/bbui"
-  const dispatch = createEventDispatcher()
-
+  import { Button } from "@budibase/bbui"
   export let url
   let link
 </script>
 
 <a href={url} bind:this={link} />
-<Button small secondary on:click={() => link.click()}>View</Button>
+<Button small translucent on:click={() => link.click()}>View</Button>
 
 <style>
   a {
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index a399d1ae15..2ed2910545 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -6,6 +6,7 @@ import ViewDetails from "./ViewDetails/Cell.svelte"
 import Select from "./Select/Wrapper.svelte"
 import DatePicker from "./DateTime/Wrapper.svelte"
 import RelationshipDisplay from "./Relationship/RelationshipDisplay.svelte"
+import { detailUrl } from "./Component.svelte"
 
 const renderers = new Map([
   ["boolean", booleanRenderer],
@@ -80,8 +81,7 @@ function dateRenderer(options, constraints, editable) {
     }
 
     // Options need to be passed in with minTime and maxTime! Needs bbui update.
-
-    const datePickerInstance = new DatePicker({
+    new DatePicker({
       target: container,
       props: {
         value: params.value,
@@ -144,11 +144,14 @@ function viewDetailsRenderer(options, constraints, editable) {
     container.style.alignItems = "center"
     container.style.height = "100%"
 
+    let url = "/"
+    if (options.detailUrl) {
+      url = options.detailUrl.replace(":id", params.data._id)
+    }
+
     new ViewDetails({
       target: container,
-      props: {
-        url: `${options}/${params.data._id}`,
-      },
+      props: { url },
     })
 
     return container