macro detail view

packages/web/src/appobj/MacroAppObject.js

@@ -0,0 +1,15 @@
+import _ from 'lodash';
+import { filterName } from '@dbgate/datalib';
+import { StartIcon } from '../icons';
+
+const macroAppObject = () => ({ name, type, title, group }, { setOpenedTabs }) => {
+  const key = name;
+  // const Icon = (props) => <i className="fas fa-archive" />;
+  const Icon = StartIcon;
+  const matcher = (filter) => filterName(filter, name, title);
+  const groupTitle = group;
+
+  return { title, key, Icon, groupTitle, matcher };
+};
+
+export default macroAppObject;

packages/web/src/datagrid/DataGrid.js

@@ -8,8 +8,8 @@ import {
   // WidgetsInnerContainer,
   // Input,
   ManagerMainContainer,
-  ManagerOuterContainer1,
+  ManagerOuterContainer_60,
-  ManagerOuterContainer2,
+  ManagerOuterContainer_40,
   ManagerOuterContainerFull,
   WidgetTitle,
 } from './ManagerStyles';
@@ -43,7 +43,7 @@ const DataGridContainer = styled.div`
 
 export default function DataGrid(props) {
   const { GridCore } = props;
-  const Container1 = props.showReferences ? ManagerOuterContainer1 : ManagerOuterContainerFull;
+  const Container1 = props.showReferences ? ManagerOuterContainer_60 : ManagerOuterContainerFull;
   const [managerSize, setManagerSize] = React.useState(0);
   return (
     <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
@@ -53,9 +53,9 @@ export default function DataGrid(props) {
             <ColumnManager {...props} managerSize={managerSize} />
           </Container1>
           {props.showReferences && (
-            <ManagerOuterContainer2>
+            <ManagerOuterContainer_40>
               <ReferenceManager {...props} managerSize={managerSize} />
-            </ManagerOuterContainer2>
+            </ManagerOuterContainer_40>
           )}
         </ManagerMainContainer>
       </LeftContainer>

packages/web/src/datagrid/ManagerStyles.js

@@ -23,11 +23,11 @@ export const ManagerOuterContainer = styled.div`
   display: flex;
 `;
 
-export const ManagerOuterContainer1 = styled(ManagerOuterContainer)`
+export const ManagerOuterContainer_60 = styled(ManagerOuterContainer)`
   flex: 0 0 60%;
 `;
 
-export const ManagerOuterContainer2 = styled(ManagerOuterContainer)`
+export const ManagerOuterContainer_40 = styled(ManagerOuterContainer)`
   flex: 0 0 40%;
 `;
 

packages/web/src/freetable/FreeTableGrid.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { ManagerMainContainer, ManagerOuterContainerFull } from '../datagrid/ManagerStyles';
+import { ManagerMainContainer, ManagerOuterContainer_60, ManagerOuterContainer_40 } from '../datagrid/ManagerStyles';
-import { HorizontalSplitter } from '../widgets/Splitter';
+import { HorizontalSplitter, VerticalSplitter } from '../widgets/Splitter';
 import FreeTableColumnEditor from './FreeTableColumnEditor';
 import FreeTableGridCore from './FreeTableGridCore';
+import MacroDetail from './MacroDetail';
+import MacroManager from './MacroManager';
 
 const LeftContainer = styled.div`
   background-color: white;
@@ -19,18 +21,38 @@ const DataGridContainer = styled.div`
 
 export default function FreeTableGrid(props) {
   const [managerSize, setManagerSize] = React.useState(0);
+  const [selectedMacro, setSelectedMacro] = React.useState(null);
+  const [macroValues, setMacroValues] = React.useState({});
   return (
     <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
       <LeftContainer>
         <ManagerMainContainer>
-          <ManagerOuterContainerFull>
+          <ManagerOuterContainer_40>
             <FreeTableColumnEditor {...props} />
-          </ManagerOuterContainerFull>
+          </ManagerOuterContainer_40>
+          <ManagerOuterContainer_60>
+            <MacroManager
+              {...props}
+              managerSize={managerSize}
+              selectedMacro={selectedMacro}
+              setSelectedMacro={setSelectedMacro}
+            />
+          </ManagerOuterContainer_60>
         </ManagerMainContainer>
       </LeftContainer>
 
       <DataGridContainer>
-        <FreeTableGridCore {...props} />
+        <VerticalSplitter initialValue="70%">
+          <FreeTableGridCore {...props} macroPreview={selectedMacro} macroValues={macroValues} />
+          {!!selectedMacro && (
+            <MacroDetail
+              selectedMacro={selectedMacro}
+              setSelectedMacro={setSelectedMacro}
+              onChangeValues={setMacroValues}
+              macroValues={macroValues}
+            />
+          )}
+        </VerticalSplitter>
       </DataGridContainer>
     </HorizontalSplitter>
   );

packages/web/src/freetable/FreeTableGridCore.js

@@ -4,7 +4,7 @@ import DataGridCore from '../datagrid/DataGridCore';
 import FreeTableGrider from './FreeTableGrider';
 
 export default function FreeTableGridCore(props) {
-  const { modelState, dispatchModel, config, setConfig } = props;
+  const { modelState, dispatchModel, config, setConfig, macroPreview, macroValues } = props;
   const grider = React.useMemo(() => FreeTableGrider.factory(props), FreeTableGrider.factoryDeps(props));
   const [cache, setCache] = React.useState(createGridCache());
   const display = React.useMemo(() => new FreeTableGridDisplay(modelState.value, config, setConfig, cache, setCache), [

packages/web/src/freetable/MacroDetail.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import ToolbarButton from '../widgets/ToolbarButton';
+import styled from 'styled-components';
+import { ReferenceIcon } from '../icons';
+import { TabPage, TabControl } from '../widgets/TabControl';
+import theme from '../theme';
+import JavaScriptEditor from '../sqleditor/JavaScriptEditor';
+import MacroParameters from './MacroParameters';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #ddeeee;
+  height: ${theme.toolBar.height}px;
+  min-height: ${theme.toolBar.height}px;
+  overflow: hidden;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+`;
+
+const Header = styled.div`
+  font-weight: bold;
+  margin-left: 10px;
+  display: flex;
+`;
+
+const HeaderText = styled.div`
+  margin-left: 10px;
+`;
+
+const MacroDetailContainer = styled.div`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+`;
+
+function MacroHeader({ selectedMacro, setSelectedMacro }) {
+  return (
+    <Container>
+      <Header>
+        <ReferenceIcon />
+        <HeaderText>{selectedMacro.title}</HeaderText>
+      </Header>
+      <ToolbarButton icon="fas fa-times" onClick={() => setSelectedMacro(null)} patchY={6}>
+        Close
+      </ToolbarButton>
+    </Container>
+  );
+}
+
+export default function MacroDetail({ selectedMacro, setSelectedMacro, onChangeValues, macroValues }) {
+  return (
+    <MacroDetailContainer>
+      <MacroHeader selectedMacro={selectedMacro} setSelectedMacro={setSelectedMacro} />
+      <TabControl>
+        <TabPage label="Execute" key="execute">
+          <MacroParameters args={selectedMacro.args} onChangeValues={onChangeValues} initialValues={macroValues} />
+        </TabPage>
+        <TabPage label="JavaScript" key="javascript">
+          <JavaScriptEditor readOnly value={selectedMacro.code} />
+        </TabPage>
+      </TabControl>
+    </MacroDetailContainer>
+  );
+}

packages/web/src/freetable/MacroManager.js

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import _ from 'lodash';
+import React from 'react';
+import { ManagerInnerContainer } from '../datagrid/ManagerStyles';
+import SearchInput from '../widgets/SearchInput';
+import { WidgetTitle } from '../widgets/WidgetStyles';
+import macros from './macros';
+import { AppObjectList } from '../appobj/AppObjectList';
+import macroAppObject from '../appobj/MacroAppObject';
+
+const SearchBoxWrapper = styled.div`
+  display: flex;
+  margin-bottom: 5px;
+`;
+
+// const MacroItemStyled = styled.div`
+//   white-space: nowrap;
+//   padding: 5px;
+//   &:hover {
+//     background-color: lightblue;
+//   }
+// `;
+
+// function MacroListItem({ macro }) {
+//   return <MacroItemStyled>{macro.title}</MacroItemStyled>;
+// }
+
+export default function MacroManager({ managerSize, selectedMacro, setSelectedMacro }) {
+  const inputRef = React.useRef(null);
+  const [filter, setFilter] = React.useState('');
+
+  return (
+    <>
+      <WidgetTitle inputRef={inputRef}>Macros</WidgetTitle>
+      <ManagerInnerContainer style={{ maxWidth: managerSize }}>
+        <SearchBoxWrapper>
+          <SearchInput placeholder="Search macros" filter={filter} setFilter={setFilter} inputRef={inputRef} />
+        </SearchBoxWrapper>
+        <AppObjectList
+          list={_.sortBy(macros, 'title')}
+          makeAppObj={macroAppObject()}
+          onObjectClick={(macro) => setSelectedMacro(macro)}
+          filter={filter}
+          groupFunc={(appobj) => appobj.groupTitle}
+        />
+        {/* {macros.map((macro) => (
+          <MacroListItem key={`${macro.group}/${macro.name}`} macro={macro} />
+        ))} */}
+      </ManagerInnerContainer>
+    </>
+  );
+}

packages/web/src/freetable/MacroParameters.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { FormTextField, FormSubmit, FormArchiveFolderSelect, FormRow, FormLabel } from '../utility/forms';
+import { Formik, Form, useFormikContext } from 'formik';
+
+function MacroArgument({ arg }) {
+  if (arg.type == 'text') {
+    return <FormTextField label={arg.label} name={arg.name} />;
+  }
+  return null;
+}
+
+function MacroArgumentList({ args, onChangeValues }) {
+  const { values } = useFormikContext();
+  React.useEffect(() => {
+    if (onChangeValues) onChangeValues(values);
+  }, [values]);
+  return (
+    <>
+      {' '}
+      {args.map((arg) => (
+        <MacroArgument arg={arg} key={arg.name} />
+      ))}
+    </>
+  );
+}
+
+export default function MacroParameters({ args, onChangeValues, initialValues }) {
+  if (!args || args.length == 0) return null;
+  return (
+    <Formik initialValues={initialValues} onSubmit={() => {}}>
+      <Form>
+        <MacroArgumentList args={args} onChangeValues={onChangeValues} />
+      </Form>
+    </Formik>
+  );
+}

packages/web/src/freetable/macros.js

@@ -0,0 +1,32 @@
+const macros = [
+  {
+    title: 'Remove diacritics',
+    name: 'removeDiacritics',
+    group: 'text',
+    description: 'Removes diacritics from selected cells',
+    type: 'transformValue',
+    code: `value => modules.diacritics.remove(value)`,
+  },
+  {
+    title: 'Search & replace text',
+    name: 'stringReplace',
+    group: 'text',
+    description: 'Search & replace text or regular expression',
+    type: 'transformValue',
+    args: [
+      {
+        type: 'text',
+        label: 'Find',
+        name: 'find',
+      },
+      {
+        type: 'text',
+        label: 'Replace with',
+        name: 'replace',
+      },
+    ],
+    code: `value => value ? value.toString().replace(args.find, args.replace) : value`,
+  },
+];
+
+export default macros;