toolbar

packages/datalib/src/ChangeSet.ts

@@ -304,3 +304,7 @@ export function changeSetInsertNewRow(changeSet: ChangeSet, name?: NamedObjectIn
     ],
   };
 }
+
+export function changeSetContainsChanges(changeSet: ChangeSet) {
+  return changeSet.deletes.length > 0 || changeSet.updates.length > 0 || changeSet.inserts.length > 0;
+}

packages/web/src/datagrid/DataGridCore.js

@@ -510,6 +510,10 @@ export default function DataGridCore(props) {
     setChangeSet(updatedChangeSet);
   }
 
+  function revertAllChanges() {
+    setChangeSet(createChangeSet());
+  }
+
   function deleteCurrentRow() {
     const updatedChangeSet = getSelectedRowDefinitions().reduce((chs, row) => deleteChangeSetRows(chs, row), changeSet);
     setChangeSet(updatedChangeSet);
@@ -910,7 +914,16 @@ export default function DataGridCore(props) {
       />
       {props.toolbarPortalRef &&
         tabVisible &&
-        ReactDOM.createPortal(<DataGridToolbar reload={reload} />, props.toolbarPortalRef.current)}
+        ReactDOM.createPortal(
+          <DataGridToolbar
+            reload={reload}
+            save={handleSave}
+            changeSetState={changeSetState}
+            dispatchChangeSet={dispatchChangeSet}
+            revert={revertAllChanges}
+          />,
+          props.toolbarPortalRef.current
+        )}
     </GridContainer>
   );
 }

packages/web/src/datagrid/DataGridToolbar.js

@@ -1,6 +1,19 @@
 import React from 'react';
 import { ToolbarButton } from '../widgets/Toolbar';
+import { changeSetContainsChanges } from '@dbgate/datalib';
 
-export default function DataGridToolbar({ reload }) {
-  return <ToolbarButton onClick={reload}>Refresh</ToolbarButton>;
+export default function DataGridToolbar({ reload, changeSetState, dispatchChangeSet, save, revert }) {
+  return (
+    <>
+      {changeSetState.canUndo && (
+        <ToolbarButton onClick={() => dispatchChangeSet({ type: 'undo' })}>Undo</ToolbarButton>
+      )}
+      {changeSetState.canRedo && (
+        <ToolbarButton onClick={() => dispatchChangeSet({ type: 'redo' })}>Redo</ToolbarButton>
+      )}
+      {changeSetContainsChanges(changeSetState.value) && <ToolbarButton onClick={save}>Save</ToolbarButton>}
+      {changeSetContainsChanges(changeSetState.value) && <ToolbarButton onClick={revert}>Revert</ToolbarButton>}
+      <ToolbarButton onClick={reload}>Refresh</ToolbarButton>
+    </>
+  );
 }

packages/web/src/utility/useUndoReducer.js

@@ -8,6 +8,8 @@ function reducer(state, action) {
         history: [...state.history.slice(0, state.current + 1), action.value],
         current: state.current + 1,
         value: action.value,
+        canUndo: true,
+        canRedo: false,
       };
     case 'undo':
       if (state.current > 0)
@@ -15,6 +17,8 @@ function reducer(state, action) {
           history: state.history,
           current: state.current - 1,
           value: state.history[state.current - 1],
+          canUndo: state.current > 1,
+          canRedo: true,
         };
       return state;
     case 'redo':
@@ -23,6 +27,8 @@ function reducer(state, action) {
           history: state.history,
           current: state.current + 1,
           value: state.history[state.current + 1],
+          canUndo: true,
+          canRedo: state.current < state.history.length - 2,
         };
       return state;
     case 'reset':