db sync

packages/web/src/tabs/CompareModelTab.svelte

@@ -3,52 +3,47 @@
 </script>
 
 <script lang="ts">
-  import { findEngineDriver, matchPairedObjects } from 'dbgate-tools';
+  import { findEngineDriver, generateDbPairingId, matchPairedObjects } from 'dbgate-tools';
 
   import _ from 'lodash';
-  import { writable } from 'svelte/store';
+  import { derived, writable } from 'svelte/store';
   import TableControl from '../elements/TableControl.svelte';
+  import FormFieldTemplateTiny from '../forms/FormFieldTemplateTiny.svelte';
   import FormProviderCore from '../forms/FormProviderCore.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import FormConnectionSelect from '../impexp/FormConnectionSelect.svelte';
   import FormDatabaseSelect from '../impexp/FormDatabaseSelect.svelte';
-import useEditorData from '../query/useEditorData';
+  import useEditorData from '../query/useEditorData';
   import { extensions } from '../stores';
   import { computeDiffRows } from '../utility/computeDiffRows';
   import { useConnectionInfo, useDatabaseInfo } from '../utility/metadataLoaders';
 
   export let tabid;
 
-  let values = writable({
-    sourceConid: null,
-    sourceDatabase: null,
-    targetConid: null,
-    targetDatabase: null,
-  });
+  let pairIndex = 0;
+
+  // let values = writable({
+  //   sourceConid: null,
+  //   sourceDatabase: null,
+  //   targetConid: null,
+  //   targetDatabase: null,
+  // });
 
   const dbDiffOptions: any = {
-    ignoreCase: true,
-    schemaMode: 'ignore',
-    ignoreConstraintNames: true,
-
-    noDropTable: true,
-    noDropColumn: true,
-    noDropConstraint: true,
-    noDropSqlObject: true,
-    noRenameTable: true,
-    noRenameColumn: true,
-    ignoreForeignKeyActions: true,
-    ignoreDataTypes: true,
+    // schemaMode: 'ignore',
   };
 
-  $: sourceDb = useDatabaseInfo({ conid: $values.sourceConid, database: $values.sourceDatabase });
-  $: targetDb = useDatabaseInfo({ conid: $values.targetConid, database: $values.targetDatabase });
+  $: sourceDbValue = useDatabaseInfo({ conid: $values?.sourceConid, database: $values?.sourceDatabase });
+  $: targetDbValue = useDatabaseInfo({ conid: $values?.targetConid, database: $values?.targetDatabase });
 
-  $: connection = useConnectionInfo({ conid: $values.targetConid });
+  $: sourceDb = generateDbPairingId($sourceDbValue);
+  $: targetDb = generateDbPairingId($targetDbValue);
+
+  $: connection = useConnectionInfo({ conid: $values?.targetConid });
   $: driver = findEngineDriver($connection, $extensions);
 
-  $: targetDbPaired = matchPairedObjects($sourceDb, $targetDb, dbDiffOptions);
-  $: diffRows = computeDiffRows($sourceDb, targetDbPaired, dbDiffOptions, driver);
+  $: targetDbPaired = matchPairedObjects(sourceDb, targetDb, dbDiffOptions);
+  $: diffRows = computeDiffRows(sourceDb, targetDbPaired, dbDiffOptions, driver);
 
   const { editorState, editorValue, setEditorData } = useEditorData({
     tabid,
@@ -57,31 +52,51 @@ import useEditorData from '../query/useEditorData';
     // },
   });
 
+  const values = {
+    ...editorValue,
+    update: setEditorData,
+    set: setEditorData,
+  };
 </script>
 
 <div class="wrapper">
   <FormProviderCore {values}>
-    <div class="flex">
+    <div class="topbar">
       <div class="col-3">
-        <FormConnectionSelect name="sourceConid" label="Server" />
+        <FormConnectionSelect name="sourceConid" label="Source server" templateProps={{ noMargin: true }} isNative />
       </div>
       <div class="col-3">
-        <FormDatabaseSelect conidName="sourceConid" name="sourceDatabase" label="Database" />
+        <FormDatabaseSelect
+          conidName="sourceConid"
+          name="sourceDatabase"
+          label="Source database"
+          templateProps={{ noMargin: true }}
+          isNative
+        />
       </div>
       <div class="arrow">
         <FontIcon icon="icon arrow-right-bold" />
       </div>
       <div class="col-3">
-        <FormConnectionSelect name="targetConid" label="Target" />
+        <FormConnectionSelect name="targetConid" label="Target server" templateProps={{ noMargin: true }} isNative />
       </div>
       <div class="col-3">
-        <FormDatabaseSelect conidName="targetConid" name="targetDatabase" label="Database" />
+        <FormDatabaseSelect
+          conidName="targetConid"
+          name="targetDatabase"
+          label="Target database"
+          templateProps={{ noMargin: true }}
+          isNative
+        />
       </div>
     </div>
   </FormProviderCore>
 
   <TableControl
     rows={diffRows}
+    bind:selectedIndex={pairIndex}
+    selectable
+    disableFocusOutline
     columns={[
       { fieldName: 'type', header: 'Type' },
       { fieldName: 'sourceSchemaName', header: 'Schema' },
@@ -98,9 +113,16 @@ import useEditorData from '../query/useEditorData';
     overflow: auto;
     flex: 1;
   }
+
+  .topbar {
+    display: flex;
+    margin: 10px 0px;
+  }
   .arrow {
     font-size: 30px;
     color: var(--theme-icon-blue);
     align-self: center;
+    position: relative;
+    top: 10px;
   }
 </style>