perspective custom join editing & removing

packages/web/src/perspectives/CustomJoinModal.svelte

@@ -10,12 +10,12 @@
   import _ from 'lodash';
   import { useConnectionList, useDatabaseInfo, useDatabaseList, useTableInfo } from '../utility/metadataLoaders';
   import { onMount, tick } from 'svelte';
-  import TargetApplicationSelect from '../forms/TargetApplicationSelect.svelte';
-  import { apiCall } from '../utility/api';
-  import { saveDbToApp } from '../utility/appTools';
-  import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveTreeNode } from 'dbgate-datalib';
-  import FormConnectionSelect from '../impexp/FormConnectionSelect.svelte';
-  import FormDatabaseSelect from '../impexp/FormDatabaseSelect.svelte';
+  import {
+    ChangePerspectiveConfigFunc,
+    PerspectiveConfig,
+    PerspectiveCustomJoinConfig,
+    PerspectiveTreeNode,
+  } from 'dbgate-datalib';
   import getConnectionLabel from '../utility/getConnectionLabel';
   import uuidv1 from 'uuid/v1';
   import TextField from '../forms/TextField.svelte';
@@ -25,15 +25,16 @@
   export let root: PerspectiveTreeNode;
   export let setConfig: ChangePerspectiveConfigFunc;
   export let config: PerspectiveConfig;
+  export let editValue: PerspectiveCustomJoinConfig = null;
 
-  let conidOverride = null;
-  let databaseOverride = null;
-  let joinid = uuidv1();
+  let conidOverride = editValue?.conid || null;
+  let databaseOverride = editValue?.database || null;
+  let joinid = editValue?.joinid || uuidv1();
 
-  $: fromDbInfo = useDatabaseInfo({
-    conid,
-    database,
-  });
+  // $: fromDbInfo = useDatabaseInfo({
+  //   conid,
+  //   database,
+  // });
   //   $: fromTableInfo = useTableInfo({
   //     conid: conidOverride || conid,
   //     database: databaseOverride || database,
@@ -52,15 +53,16 @@
     pureName: refTableName,
   });
 
-  let columns = [];
+  let columns = editValue?.columns || [];
   //   let fromTableName = pureName;
   //   let fromSchemaName = schemaName;
-  let fromUniuqeName = root.uniqueName;
-  let refTableName = null;
-  let refSchemaName = null;
-  let joinName;
+  let fromUniuqeName = editValue?.baseUniqueName || root.uniqueName;
+  let refTableName = editValue?.refTableName || null;
+  let refSchemaName = editValue?.refSchemaName || null;
+  let joinName = editValue?.joinName || '';
 
   onMount(() => {
+    if (editValue) return;
     let index = 1;
     while (config.customJoins?.find(x => x.joinName == `Custom join ${index}`)) {
       index += 1;
@@ -240,9 +242,9 @@
       {#each columns as column, index}
         <div class="row">
           <div class="col-5 mr-1">
-            {#key column.columnName}
+            {#key column.baseColumnName}
               <SelectField
-                value={column.columnName}
+                value={column.baseColumnName}
                 isNative
                 notSelected
                 options={(fromTableInfo?.columns || []).map(col => ({
@@ -251,7 +253,7 @@
                 }))}
                 on:change={e => {
                   if (e.detail) {
-                    columns = columns.map((col, i) => (i == index ? { ...col, columnName: e.detail } : col));
+                    columns = columns.map((col, i) => (i == index ? { ...col, baseColumnName: e.detail } : col));
                   }
                 }}
               />
@@ -292,7 +294,13 @@
         type="button"
         value="Add column"
         on:click={() => {
-          columns = [...columns, {}];
+          columns = [
+            ...columns,
+            {
+              baseColumnName: '',
+              refColumnName: '',
+            },
+          ];
         }}
       />
     </div>
@@ -301,20 +309,19 @@
       <FormSubmit
         value={'Save'}
         on:click={async () => {
+          const newJoin = {
+            joinid,
+            joinName,
+            baseUniqueName: fromUniuqeName,
+            refTableName,
+            refSchemaName,
+            columns,
+          };
           setConfig(cfg => ({
             ...cfg,
-            customJoins: [
-              ...(cfg.customJoins || []),
-              {
-                baseUniqueName: fromUniuqeName,
-                refTableName,
-                refSchemaName,
-                columns: columns.map(col => ({
-                  baseColumnName: col.columnName,
-                  refColumnName: col.refColumnName,
-                })),
-              },
-            ],
+            customJoins: editValue
+              ? cfg.customJoins.map(x => (x.joinid == editValue.joinid ? newJoin : x))
+              : [...(cfg.customJoins || []), newJoin],
           }));
           closeCurrentModal();
         }}

packages/web/src/perspectives/PerspectiveNodeRow.svelte

@@ -1,14 +1,48 @@
 <script lang="ts">
-  import { PerspectiveTreeNode } from 'dbgate-datalib';
+  import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveTreeNode } from 'dbgate-datalib';
 
   import ColumnLabel from '../elements/ColumnLabel.svelte';
   import { plusExpandIcon } from '../icons/expandIcons';
   import FontIcon from '../icons/FontIcon.svelte';
+  import { showModal } from '../modals/modalTools';
+  import contextMenu from '../utility/contextMenu';
+  import CustomJoinModal from './CustomJoinModal.svelte';
 
+  export let conid;
+  export let database;
   export let node: PerspectiveTreeNode;
+  export let root: PerspectiveTreeNode;
+  export let config: PerspectiveConfig;
+  export let setConfig: ChangePerspectiveConfigFunc;
+
+  function createMenu() {
+    const customJoin = node.customJoinConfig;
+    return [
+      customJoin && {
+        text: 'Remove custom join',
+        onClick: () =>
+          setConfig(cfg => ({
+            ...cfg,
+            customJoins: (cfg.customJoins || []).filter(x => x.joinid != customJoin.joinid),
+          })),
+      },
+      customJoin && {
+        text: 'Edit custom join',
+        onClick: () =>
+          showModal(CustomJoinModal, {
+            config,
+            setConfig,
+            conid,
+            database,
+            root,
+            editValue: customJoin,
+          }),
+      },
+    ];
+  }
 </script>
 
-<div class="row">
+<div class="row" use:contextMenu={createMenu}>
   <span class="expandColumnIcon" style={`margin-right: ${5 + node.level * 10}px`}>
     <FontIcon
       icon={node.isExpandable ? plusExpandIcon(node.isExpanded) : 'icon invisible-box'}

packages/web/src/perspectives/PerspectiveTree.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
+  import { ChangeConfigFunc, ChangePerspectiveConfigFunc, GridConfig, PerspectiveConfig } from 'dbgate-datalib';
+
   import PerspectiveNodeRow from './PerspectiveNodeRow.svelte';
 
   export let root;
+  export let config: PerspectiveConfig;
+  export let setConfig: ChangePerspectiveConfigFunc;
+  export let conid;
+  export let database;
 
   function processFlatColumns(res, columns) {
     for (const col of columns) {
@@ -20,5 +26,5 @@
 </script>
 
 {#each getFlatColumns(root) as node}
-  <PerspectiveNodeRow {node} />
+  <PerspectiveNodeRow {node} {config} {setConfig} {root} {conid} {database} />
 {/each}

packages/web/src/perspectives/PerspectiveView.svelte

@@ -15,7 +15,11 @@
 
 <script lang="ts">
   import {
+    ChangeConfigFunc,
+    ChangePerspectiveConfigFunc,
     getTableChildPerspectiveNodes,
+    GridConfig,
+    PerspectiveConfig,
     PerspectiveDataLoadProps,
     PerspectiveDataProvider,
     PerspectiveTableColumnNode,
@@ -53,8 +57,8 @@
   export let schemaName;
   export let pureName;
 
-  export let config;
-  export let setConfig;
+  export let config: PerspectiveConfig;
+  export let setConfig: ChangePerspectiveConfigFunc;
   export let loadedCounts;
 
   export let cache;
@@ -106,7 +110,7 @@
       <WidgetColumnBarItem title="Choose data" name="perspectiveTree" height="45%">
         <ManagerInnerContainer width={managerSize}>
           {#if root}
-            <PerspectiveTree {root} />
+            <PerspectiveTree {root} {config} {setConfig} {conid} {database} />
           {/if}
         </ManagerInnerContainer>
       </WidgetColumnBarItem>