From 49597b4b01b72d72ae48280081ec744c94c5fc3c Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Fri, 9 Aug 2024 17:36:22 +0200
Subject: [PATCH] indicator of changed rows in save button

---
 packages/datalib/src/ChangeSet.ts             |  4 +++
 .../web/src/buttons/ToolStripButton.svelte    |  4 +++
 .../src/buttons/ToolStripCommandButton.svelte |  2 ++
 packages/web/src/icons/FontIcon.svelte        | 27 +++++++++++++++++++
 .../web/src/tabs/CollectionDataTab.svelte     |  7 ++++-
 packages/web/src/tabs/TableDataTab.svelte     |  7 ++++-
 6 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/packages/datalib/src/ChangeSet.ts b/packages/datalib/src/ChangeSet.ts
index 0d9947be..89fb29a6 100644
--- a/packages/datalib/src/ChangeSet.ts
+++ b/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;
+}
diff --git a/packages/web/src/buttons/ToolStripButton.svelte b/packages/web/src/buttons/ToolStripButton.svelte
index bc52c596..07b30220 100644
--- a/packages/web/src/buttons/ToolStripButton.svelte
+++ b/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>
 
diff --git a/packages/web/src/buttons/ToolStripCommandButton.svelte b/packages/web/src/buttons/ToolStripCommandButton.svelte
index 107fb46c..8d2e92ae 100644
--- a/packages/web/src/buttons/ToolStripCommandButton.svelte
+++ b/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}
diff --git a/packages/web/src/icons/FontIcon.svelte b/packages/web/src/icons/FontIcon.svelte
index 46711ff3..c64332de 100644
--- a/packages/web/src/icons/FontIcon.svelte
+++ b/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;
diff --git a/packages/web/src/tabs/CollectionDataTab.svelte b/packages/web/src/tabs/CollectionDataTab.svelte
index 6270d482..04a9030e 100644
--- a/packages/web/src/tabs/CollectionDataTab.svelte
+++ b/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 />
diff --git a/packages/web/src/tabs/TableDataTab.svelte b/packages/web/src/tabs/TableDataTab.svelte
index 5d133f99..d2094f96 100644
--- a/packages/web/src/tabs/TableDataTab.svelte
+++ b/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 />