execute macro

packages/datalib/src/runMacro.ts

@@ -27,17 +27,21 @@ export function runMacro(
     const rows = data.rows.map((row, rowIndex) => {
       const selectedRow = selectedRows[rowIndex];
       if (selectedRow) {
-        const columnSet = new Set(selectedRow.map((item) => item.column));
         const changedValues = [];
-        const res = _.mapValues(row, (value, key) => {
+        let res = null;
-          if (columnSet.has(key)) {
+        for (const cell of selectedRow) {
-            const newValue = func(value, macroArgs, modules, rowIndex, row, key);
+          const { column } = cell;
-            if (preview && newValue != value) changedValues.push(key);
+          const oldValue = row[column];
-            return newValue;
+          const newValue = func(oldValue, macroArgs, modules, rowIndex, row, column);
-          } else {
+          if (newValue != oldValue) {
-            return value;
+            if (res == null) {
+              res = { ...row };
             }
-        });
+            res[column] = newValue;
+            if (preview) changedValues.push(column);
+          }
+        }
+        if (res) {
           if (changedValues.length > 0) {
             return {
               ...res,
@@ -45,6 +49,8 @@ export function runMacro(
             };
           }
           return res;
+        }
+        return row;
       } else {
         return row;
       }

packages/web/src/freetable/FreeTableGrid.js

@@ -1,3 +1,4 @@
+import { runMacro } from '@dbgate/datalib';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -20,9 +21,16 @@ const DataGridContainer = styled.div`
 `;
 
 export default function FreeTableGrid(props) {
+  const { modelState, dispatchModel } = props;
   const [managerSize, setManagerSize] = React.useState(0);
   const [selectedMacro, setSelectedMacro] = React.useState(null);
   const [macroValues, setMacroValues] = React.useState({});
+  const [selectedCells, setSelectedCells] = React.useState([]);
+  const handleExecuteMacro = () => {
+    const newModel = runMacro(selectedMacro, macroValues, modelState.value, false, selectedCells);
+    dispatchModel({ type: 'set', value: newModel });
+    setSelectedMacro(null);
+  };
   return (
     <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
       <LeftContainer>
@@ -43,13 +51,19 @@ export default function FreeTableGrid(props) {
 
       <DataGridContainer>
         <VerticalSplitter initialValue="70%">
-          <FreeTableGridCore {...props} macroPreview={selectedMacro} macroValues={macroValues} />
+          <FreeTableGridCore
+            {...props}
+            macroPreview={selectedMacro}
+            macroValues={macroValues}
+            onSelectionChanged={setSelectedCells}
+          />
           {!!selectedMacro && (
             <MacroDetail
               selectedMacro={selectedMacro}
               setSelectedMacro={setSelectedMacro}
               onChangeValues={setMacroValues}
               macroValues={macroValues}
+              onExecute={handleExecuteMacro}
             />
           )}
         </VerticalSplitter>

packages/web/src/freetable/FreeTableGridCore.js

@@ -5,7 +5,7 @@ import FreeTableGrider from './FreeTableGrider';
 import MacroPreviewGrider from './MacroPreviewGrider';
 
 export default function FreeTableGridCore(props) {
-  const { modelState, dispatchModel, config, setConfig, macroPreview, macroValues } = props;
+  const { modelState, dispatchModel, config, setConfig, macroPreview, macroValues, onSelectionChanged } = props;
   const [cache, setCache] = React.useState(createGridCache());
   const [selectedCells, setSelectedCells] = React.useState([]);
   const grider = React.useMemo(
@@ -26,12 +26,20 @@ export default function FreeTableGridCore(props) {
     cache,
   ]);
 
+  const handleSelectionChanged = React.useCallback(
+    (cells) => {
+      if (onSelectionChanged) onSelectionChanged(cells);
+      setSelectedCells(cells);
+    },
+    [setSelectedCells]
+  );
+
   return (
     <DataGridCore
       {...props}
       grider={grider}
       display={display}
-      onSelectionChanged={macroPreview ? setSelectedCells : null}
+      onSelectionChanged={macroPreview ? handleSelectionChanged : null}
     />
   );
 }

packages/web/src/freetable/MacroDetail.js

@@ -6,6 +6,9 @@ import { TabPage, TabControl } from '../widgets/TabControl';
 import theme from '../theme';
 import JavaScriptEditor from '../sqleditor/JavaScriptEditor';
 import MacroParameters from './MacroParameters';
+import { WidgetTitle } from '../widgets/WidgetStyles';
+import { FormButton } from '../utility/forms';
+import FormStyledButton from '../widgets/FormStyledButton';
 
 const Container = styled.div`
   display: flex;
@@ -39,27 +42,70 @@ const MacroDetailContainer = styled.div`
   bottom: 0;
 `;
 
-function MacroHeader({ selectedMacro, setSelectedMacro }) {
+const MacroDetailTabWrapper = styled.div`
+  display: flex;
+`;
+
+const MacroSection = styled.div`
+  margin: 5px;
+`;
+
+const TextWrapper = styled.div`
+  margin: 5px;
+`;
+
+const Buttons = styled.div`
+  display: flex;
+`;
+
+function MacroHeader({ selectedMacro, setSelectedMacro, onExecute }) {
   return (
     <Container>
       <Header>
         <ReferenceIcon />
         <HeaderText>{selectedMacro.title}</HeaderText>
       </Header>
+      <Buttons>
+        <ToolbarButton icon="fas fa-check" onClick={onExecute} patchY={6}>
+          Execute
+        </ToolbarButton>
         <ToolbarButton icon="fas fa-times" onClick={() => setSelectedMacro(null)} patchY={6}>
           Close
         </ToolbarButton>
+      </Buttons>
     </Container>
   );
 }
 
-export default function MacroDetail({ selectedMacro, setSelectedMacro, onChangeValues, macroValues }) {
+export default function MacroDetail({ selectedMacro, setSelectedMacro, onChangeValues, macroValues, onExecute }) {
   return (
     <MacroDetailContainer>
-      <MacroHeader selectedMacro={selectedMacro} setSelectedMacro={setSelectedMacro} />
+      <MacroHeader selectedMacro={selectedMacro} setSelectedMacro={setSelectedMacro} onExecute={onExecute} />
       <TabControl>
-        <TabPage label="Execute" key="execute">
+        <TabPage label="Macro detail" key="detail">
-          <MacroParameters args={selectedMacro.args} onChangeValues={onChangeValues} initialValues={macroValues} />
+          <MacroDetailTabWrapper>
+            <MacroSection>
+              <WidgetTitle>Execute</WidgetTitle>
+              <FormStyledButton value="Execute" onClick={onExecute} />
+            </MacroSection>
+
+            <MacroSection>
+              <WidgetTitle>Parameters</WidgetTitle>
+              {selectedMacro.args && selectedMacro.args.length > 0 ? (
+                <MacroParameters
+                  args={selectedMacro.args}
+                  onChangeValues={onChangeValues}
+                  initialValues={macroValues}
+                />
+              ) : (
+                <TextWrapper>This macro has no parameters</TextWrapper>
+              )}
+            </MacroSection>
+            <MacroSection>
+              <WidgetTitle>Description</WidgetTitle>
+              <TextWrapper>{selectedMacro.description}</TextWrapper>
+            </MacroSection>
+          </MacroDetailTabWrapper>
         </TabPage>
         <TabPage label="JavaScript" key="javascript">
           <JavaScriptEditor readOnly value={selectedMacro.code} />

packages/web/src/freetable/macros.js

@@ -47,7 +47,7 @@ const macros = [
     title: 'Row index',
     name: 'rowIndex',
     group: 'Tools',
-    description: 'index of row from 1 (autoincrement)',
+    description: 'Index of row from 1 (autoincrement)',
     type: 'transformValue',
     code: `return rowIndex + 1`,
   },