db sync

packages/web/src/elements/TableControl.svelte

@@ -23,6 +23,7 @@
   export let selectable = false;
   export let selectedIndex = 0;
   export let clickable = false;
+  export let disableFocusOutline = false;
 
   export let domTable;
 
@@ -47,6 +48,7 @@
 <table
   bind:this={domTable}
   class:selectable
+  class:disableFocusOutline
   on:keydown
   tabindex={selectable ? -1 : undefined}
   on:keydown={handleKeyDown}
@@ -101,6 +103,9 @@
 </table>
 
 <style>
+  table.disableFocusOutline:focus {
+    outline: none;
+  }
   table {
     border-collapse: collapse;
     width: 100%;

packages/web/src/forms/FormSelectFieldRaw.svelte

@@ -15,7 +15,7 @@
 
 <SelectField
   {...$$restProps}
-  value={$values[name]}
+  value={$values && $values[name]}
   options={_.compact(options)}
   on:change={e => {
     setFieldValue(name, e.detail);

packages/web/src/impexp/FormDatabaseSelect.svelte

@@ -8,7 +8,7 @@
   export let conidName;
 
   const { values } = getFormContext();
-  $: databases = useDatabaseList({ conid: $values[conidName] });
+  $: databases = useDatabaseList({ conid: $values && $values[conidName] });
 
   $: databaseOptions = _.sortBy(
     ($databases || []).map(db => ({

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>

packages/web/src/utility/computeDiffRows.ts

@@ -7,7 +7,7 @@ export function computeDiffRows(
   opts: DbDiffOptions,
   driver: EngineDriver
 ) {
-  if (!sourceDb || !targetDb) return [];
+  if (!sourceDb || !targetDb || !driver) return [];
   const res = [];
   for (const obj of sourceDb.tables) {
     const paired = targetDb.tables.find(x => x.pairingId == obj.pairingId);