indicator of changed rows in save button

packages/datalib/src/ChangeSet.ts

@@ -530,3 +530,7 @@ export function changeSetContainsChanges(changeSet: ChangeSet) {
     changeSet.dataUpdateCommands?.length > 0
   );
 }
+
+export function changeSetChangedCount(changeSet: ChangeSet) {
+  return changeSet.deletes.length + changeSet.updates.length + changeSet.inserts.length;
+}

packages/web/src/buttons/ToolStripButton.svelte

@@ -5,6 +5,7 @@
   export let disabled = false;
   export let icon = null;
   export let title = null;
+  export let iconAfter = null;
 
   const dispatch = createEventDispatcher();
 
@@ -18,6 +19,9 @@
   <div class="inner" class:disabled on:click={handleClick}>
     <span class="icon" class:disabled><FontIcon {icon} /></span>
     <slot />
+    {#if iconAfter}
+      <span class="icon" class:disabled><FontIcon icon={iconAfter} /></span>
+    {/if}
   </div>
 </div>
 

packages/web/src/buttons/ToolStripCommandButton.svelte

@@ -17,6 +17,7 @@
   export let component = ToolStripButton;
   export let hideDisabled = false;
   export let buttonLabel = null;
+  export let iconAfter = null;
 
   $: cmd = Object.values($commandsCustomized).find((x: any) => x.id == command) as any;
 </script>
@@ -28,6 +29,7 @@
     icon={cmd.icon}
     on:click={cmd.onClick}
     disabled={!cmd.enabled}
+    {iconAfter}
     {...$$restProps}
   >
     {buttonLabel || cmd.toolbarName || cmd.name}

packages/web/src/icons/FontIcon.svelte

@@ -1,3 +1,30 @@
+<script context="module">
+  export function getNumberIcon(number) {
+    switch (number) {
+      case 1:
+        return 'mdi mdi-numeric-1-circle';
+      case 2:
+        return 'mdi mdi-numeric-2-circle';
+      case 3:
+        return 'mdi mdi-numeric-3-circle';
+      case 4:
+        return 'mdi mdi-numeric-4-circle';
+      case 5:
+        return 'mdi mdi-numeric-5-circle';
+      case 6:
+        return 'mdi mdi-numeric-6-circle';
+      case 7:
+        return 'mdi mdi-numeric-7-circle';
+      case 8:
+        return 'mdi mdi-numeric-8-circle';
+      case 9:
+        return 'mdi mdi-numeric-9-circle';
+    }
+    if (number > 9) return 'mdi mdi-numeric-9-plus-circle';
+    return null;
+  }
+</script>
+
 <script>
   export let icon;
   export let title = null;

packages/web/src/tabs/CollectionDataTab.svelte

@@ -29,6 +29,7 @@
     CollectionGridDisplay,
     changeSetContainsChanges,
     runMacroOnChangeSet,
+    changeSetChangedCount,
   } from 'dbgate-datalib';
   import { findEngineDriver } from 'dbgate-tools';
   import { writable } from 'svelte/store';
@@ -54,6 +55,7 @@
   import { getBoolSettingsValue } from '../settings/settingsTools';
   import useEditorData from '../query/useEditorData';
   import { markTabSaved, markTabUnsaved } from '../utility/common';
+  import { getNumberIcon } from '../icons/FontIcon.svelte';
 
   export let tabid;
   export let conid;
@@ -197,7 +199,10 @@
   <svelte:fragment slot="toolstrip">
     <ToolStripCommandButton command="dataGrid.refresh" hideDisabled />
     <ToolStripCommandButton command="dataForm.refresh" hideDisabled />
-    <ToolStripCommandButton command="collectionTable.save" />
+    <ToolStripCommandButton
+      command="collectionTable.save"
+      iconAfter={getNumberIcon(changeSetChangedCount($changeSetStore?.value))}
+    />
     <ToolStripCommandButton command="dataGrid.revertAllChanges" hideDisabled />
     <ToolStripCommandButton command="dataGrid.insertNewRow" hideDisabled />
     <ToolStripCommandButton command="dataGrid.deleteSelectedRows" hideDisabled />

packages/web/src/tabs/TableDataTab.svelte

@@ -66,6 +66,7 @@
   import TableDataGrid from '../datagrid/TableDataGrid.svelte';
   import useGridConfig from '../utility/useGridConfig';
   import {
+    changeSetChangedCount,
     changeSetContainsChanges,
     changeSetToSql,
     createChangeSet,
@@ -103,6 +104,7 @@
   import useEditorData from '../query/useEditorData';
   import { markTabSaved, markTabUnsaved } from '../utility/common';
   import ToolStripButton from '../buttons/ToolStripButton.svelte';
+  import { getNumberIcon } from '../icons/FontIcon.svelte';
 
   export let tabid;
   export let conid;
@@ -277,7 +279,10 @@
     <ToolStripCommandButton command="dataForm.goToNext" hideDisabled />
     <ToolStripCommandButton command="dataForm.goToLast" hideDisabled />
 
-    <ToolStripCommandButton command="tableData.save" />
+    <ToolStripCommandButton
+      command="tableData.save"
+      iconAfter={getNumberIcon(changeSetChangedCount($changeSetStore?.value))}
+    />
     <ToolStripCommandButton command="dataGrid.revertAllChanges" hideDisabled />
     <ToolStripCommandButton command="dataGrid.insertNewRow" hideDisabled />
     <ToolStripCommandButton command="dataGrid.deleteSelectedRows" hideDisabled />