macro - previre modified cells

packages/web/src/datagrid/ChangeSetGrider.ts

@@ -56,9 +56,8 @@ export default class ChangeSetGrider extends Grider {
     if (insertedRowIndex != null) status = 'inserted';
     const rowStatus = {
       status,
-      modifiedFields: new Set(
-        matchedChangeSetItem && matchedChangeSetItem.fields ? Object.keys(matchedChangeSetItem.fields) : []
-      ),
+      modifiedFields:
+        matchedChangeSetItem && matchedChangeSetItem.fields ? new Set(Object.keys(matchedChangeSetItem.fields)) : null,
     };
     this.rowDataCache[index] = rowUpdated;
     this.rowStatusCache[index] = rowStatus;

packages/web/src/datagrid/DataGridCore.js

@@ -110,6 +110,7 @@ export default function DataGridCore(props) {
     isLoading,
     grider,
     onSelectionChanged,
+    frameSelection,
   } = props;
   // console.log('RENDER GRID', display.baseTable.pureName);
   const columns = React.useMemo(() => display.allColumns, [display]);
@@ -997,6 +998,7 @@ export default function DataGridCore(props) {
                 autofillMarkerCell={filterCellForRow(autofillMarkerCell, rowIndex)}
                 display={display}
                 focusedColumn={display.focusedColumn}
+                frameSelection={frameSelection}
               />
             )
           )}

packages/web/src/datagrid/DataGridRow.js

@@ -25,6 +25,12 @@ const TableBodyCell = styled.td`
     background-color: deepskyblue;
     color: white;`}
 
+  ${(props) =>
+    props.isFrameSelected &&
+    `
+      outline: 3px solid cyan;
+      outline-offset: -3px;`}
+  
   ${(props) =>
     props.isAutofillSelected &&
     !props.isFocusedColumn &&
@@ -59,7 +65,7 @@ const TableBodyCell = styled.td`
     `
       background-color: #DBFFDB;`}
 
-    ${(props) =>
+  ${(props) =>
     !props.isSelected &&
     !props.isAutofillSelected &&
     !props.isFocusedColumn &&
@@ -175,6 +181,7 @@ function DataGridRow(props) {
     autofillSelectedCells,
     focusedColumn,
     grider,
+    frameSelection,
   } = props;
   // usePropsCompare({
   //   rowHeight,
@@ -200,7 +207,7 @@ function DataGridRow(props) {
   const hintFieldsAllowed = visibleRealColumns
     .filter((col) => {
       if (!col.hintColumnName) return false;
-      if (rowStatus.status == 'updated' && rowStatus.modifiedFields.has(col.uniqueName)) return false;
+      if (rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)) return false;
       return true;
     })
     .map((col) => col.uniqueName);
@@ -222,13 +229,18 @@ function DataGridRow(props) {
           }}
           data-row={rowIndex}
           data-col={col.colIndex}
-          isSelected={cellIsSelected(rowIndex, col.colIndex, selectedCells)}
+          isSelected={frameSelection ? false : cellIsSelected(rowIndex, col.colIndex, selectedCells)}
+          isFrameSelected={frameSelection ? cellIsSelected(rowIndex, col.colIndex, selectedCells) : false}
           isAutofillSelected={cellIsSelected(rowIndex, col.colIndex, autofillSelectedCells)}
           isModifiedRow={rowStatus.status == 'updated'}
           isFocusedColumn={col.uniqueName == focusedColumn}
-          isModifiedCell={rowStatus.status == 'updated' && rowStatus.modifiedFields.has(col.uniqueName)}
-          isInsertedRow={rowStatus.status == 'inserted'}
-          isDeletedRow={rowStatus.status == 'deleted'}
+          isModifiedCell={rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)}
+          isInsertedRow={
+            rowStatus.status == 'inserted' || (rowStatus.insertedFields && rowStatus.insertedFields.has(col.uniqueName))
+          }
+          isDeletedRow={
+            rowStatus.status == 'deleted' || (rowStatus.deletedFields && rowStatus.deletedFields.has(col.uniqueName))
+          }
         >
           {inplaceEditorState.cell &&
           rowIndex == inplaceEditorState.cell[0] &&

packages/web/src/datagrid/Grider.ts

@@ -1,6 +1,8 @@
 export interface GriderRowStatus {
   status: 'regular' | 'updated' | 'deleted' | 'inserted';
-  modifiedFields: Set<string>;
+  modifiedFields?: Set<string>;
+  insertedFields?: Set<string>;
+  deletedFields?: Set<string>;
 }
 
 export default abstract class Grider {
@@ -10,7 +12,6 @@ export default abstract class Grider {
   getRowStatus(index): GriderRowStatus {
     const res: GriderRowStatus = {
       status: 'regular',
-      modifiedFields: new Set(),
     };
     return res;
   }

packages/web/src/freetable/FreeTableGridCore.js

@@ -40,6 +40,7 @@ export default function FreeTableGridCore(props) {
       grider={grider}
       display={display}
       onSelectionChanged={macroPreview ? handleSelectionChanged : null}
+      frameSelection={!!macroPreview}
     />
   );
 }

packages/web/src/freetable/MacroPreviewGrider.ts

@@ -1,5 +1,5 @@
 import { FreeTableModel, MacroDefinition, MacroSelectedCell, runMacro } from '@dbgate/datalib';
-import Grider from '../datagrid/Grider';
+import Grider, { GriderRowStatus } from '../datagrid/Grider';
 
 export default class MacroPreviewGrider extends Grider {
   model: FreeTableModel;
@@ -8,6 +8,14 @@ export default class MacroPreviewGrider extends Grider {
     this.model = runMacro(macro, macroArgs, model, true, selectedCells);
   }
 
+  getRowStatus(index): GriderRowStatus {
+    const row = this.model.rows[index];
+    return {
+      status: 'regular',
+      modifiedFields: row ? row.__modifiedFields : null,
+    };
+  }
+
   getRowData(index: any) {
     return this.model.rows[index];
   }