db diff filter row

packages/web/src/forms/RowsFilterSwitcher.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import InlineButton from '../elements/InlineButton.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let icon;
+  export let label;
+  export let values;
+  export let field;
+  export let count;
+</script>
+
+{#if count > 0}
+  <InlineButton
+    on:click={() => {
+      $values = { ...$values, [field]: !$values[field] };
+    }}
+  >
+    <FontIcon {icon} />
+    <span class="switch">{label} ({count})</span>
+    <FontIcon icon={$values && !$values[field] ? 'icon checkbox-marked' : 'icon checkbox-blank'} />
+  </InlineButton>
+{/if}
+
+<style>
+  .switch {
+    margin-left: 5px;
+  }
+</style>

packages/web/src/icons/FontIcon.svelte

@@ -64,6 +64,8 @@
     'icon preview': 'mdi mdi-file-find',
     'icon eye': 'mdi mdi-eye',
     'icon check-all': 'mdi mdi-check-all',
+    'icon checkbox-blank': 'mdi mdi-checkbox-blank-outline',
+    'icon checkbox-marked': 'mdi mdi-checkbox-marked-outline',
 
     'icon run': 'mdi mdi-play',
     'icon chevron-down': 'mdi mdi-chevron-down',
@@ -105,6 +107,11 @@
     'img yaml': 'mdi mdi-code-brackets color-icon-red',
     'img compare': 'mdi mdi-compare color-icon-red',
 
+    'img add': 'mdi mdi-plus-circle color-icon-green',
+    'img minus': 'mdi mdi-minus-circle color-icon-red',
+    'img equal': 'mdi mdi-equal',
+    'img changed': 'mdi mdi-file-edit color-icon-yellow',
+
     'img free-table': 'mdi mdi-table color-icon-green',
     'img macro': 'mdi mdi-hammer-wrench',
 

packages/web/src/tabs/CompareModelTab.svelte

@@ -79,6 +79,23 @@
     if (newObject) dmp.createSqlObject(newObject);
     return { sql: dmp.s };
   }
+
+  function filterDiffRows(rows, values, filter) {
+    let res = rows
+      .filter(row => filterName(filter, row.sourcePureName, row.targetPureName))
+      .filter(row => !values?.hideAdded || row.state != 'added')
+      .filter(row => !values?.hideRemoved || row.state != 'removed')
+      .filter(row => !values?.hideChanged || row.state != 'changed')
+      .filter(row => !values?.hideEqual || row.state != 'equal');
+
+    for (const objectTypeField of _.keys(DbDiffCompareDefs)) {
+      if (values && values[`hide_${objectTypeField}`]) {
+        res = res.filter(row => row.objectTypeField != objectTypeField);
+      }
+    }
+
+    return res;
+  }
 </script>
 
 <script lang="ts">
@@ -91,6 +108,8 @@
     computeTableDiffColumns,
     getCreateObjectScript,
     modelCompareDbDiffOptions,
+    filterName,
+    DbDiffCompareDefs,
   } from 'dbgate-tools';
 
   import _, { startsWith } from 'lodash';
@@ -99,12 +118,14 @@
   import DiffView from '../elements/DiffView.svelte';
   import InlineButton from '../elements/InlineButton.svelte';
   import ScrollableTableControl from '../elements/ScrollableTableControl.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
   import TabControl from '../elements/TabControl.svelte';
   import TableControl from '../elements/TableControl.svelte';
   import VerticalSplitter from '../elements/VerticalSplitter.svelte';
   import FormFieldTemplateTiny from '../forms/FormFieldTemplateTiny.svelte';
   import FormProviderCore from '../forms/FormProviderCore.svelte';
   import FormSelectField from '../forms/FormSelectField.svelte';
+  import RowsFilterSwitcher from '../forms/RowsFilterSwitcher.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import FormConnectionSelect from '../impexp/FormConnectionSelect.svelte';
   import FormDatabaseSelect from '../impexp/FormDatabaseSelect.svelte';
@@ -125,16 +146,10 @@
   export let tabid;
 
   let pairIndex = 0;
+  let filter = '';
 
   export const activator = createActivator('CompareModelTab', true);
 
-  // let values = writable({
-  //   sourceConid: null,
-  //   sourceDatabase: null,
-  //   targetConid: null,
-  //   targetDatabase: null,
-  // });
-
   $: dbDiffOptions = $values?.sourceConid == '__model' ? modelCompareDbDiffOptions : {};
 
   $: sourceDbValue = useDatabaseInfo({ conid: $values?.sourceConid, database: $values?.sourceDatabase });
@@ -147,7 +162,10 @@
   $: driver = findEngineDriver($connection, $extensions);
 
   $: targetDbPaired = matchPairedObjects(sourceDb, targetDb, dbDiffOptions);
-  $: diffRows = _.sortBy(computeDbDiffRows(sourceDb, targetDbPaired, dbDiffOptions, driver), x => stateOrder(x.state));
+  $: diffRowsAll = _.sortBy(computeDbDiffRows(sourceDb, targetDbPaired, dbDiffOptions, driver), x =>
+    stateOrder(x.state)
+  );
+  $: diffRows = filterDiffRows(diffRowsAll, $values, filter);
   $: diffColumns = computeTableDiffColumns(
     diffRows[pairIndex]?.source,
     diffRows[pairIndex]?.target,
@@ -339,6 +357,48 @@
             />
           </div>
         </div>
+        <div class="filters">
+          <SearchInput placeholder="Search tables or objects" bind:value={filter} />
+
+          <RowsFilterSwitcher
+            icon="img add"
+            label="Added"
+            {values}
+            field="hideAdded"
+            count={diffRowsAll.filter(x => x.state == 'added').length}
+          />
+          <RowsFilterSwitcher
+            icon="img minus"
+            label="Removed"
+            {values}
+            field="hideRemoved"
+            count={diffRowsAll.filter(x => x.state == 'removed').length}
+          />
+          <RowsFilterSwitcher
+            icon="img changed"
+            label="Changed"
+            {values}
+            field="hideChanged"
+            count={diffRowsAll.filter(x => x.state == 'changed').length}
+          />
+          <RowsFilterSwitcher
+            icon="img equal"
+            label="Equal"
+            {values}
+            field="hideEqual"
+            count={diffRowsAll.filter(x => x.state == 'equal').length}
+          />
+
+          {#each _.keys(DbDiffCompareDefs) as objectTypeField}
+            <RowsFilterSwitcher
+              icon={DbDiffCompareDefs[objectTypeField].icon}
+              label={DbDiffCompareDefs[objectTypeField].plural}
+              {values}
+              field={'hide_' + objectTypeField}
+              count={diffRowsAll.filter(x => x.objectTypeField == objectTypeField).length}
+            />
+          {/each}
+        </div>
       </FormProviderCore>
 
       <div class="tableWrapper">
@@ -468,4 +528,9 @@
     width: 100%;
     flex: 1;
   }
+
+  .filters {
+    display: flex;
+    flex-wrap: wrap;
+  }
 </style>