free table editor - save and load

packages/web/src/appobj/archiveFileAppObject.js

@@ -7,13 +7,46 @@ import { openNewTab } from '../utility/common';
 import { filterName } from '@dbgate/datalib';
 import axios from '../utility/axios';
 
+function openArchive(setOpenedTabs, fileName, folderName) {
+  openNewTab(setOpenedTabs, {
+    title: fileName,
+    icon: 'archtable.svg',
+    tooltip: `${folderName}\n${fileName}`,
+    tabComponent: 'ArchiveFileTab',
+    props: {
+      archiveFile: fileName,
+      archiveFolder: folderName,
+    },
+  });
+}
+
 function Menu({ data, setOpenedTabs }) {
   const handleDelete = () => {
     axios.post('archive/delete-file', { file: data.fileName, folder: data.folderName });
     // setOpenedTabs((tabs) => tabs.filter((x) => x.tabid != data.tabid));
   };
+  const handleOpenRead = () => {
+    openArchive(setOpenedTabs, data.fileName, data.folderName);
+  };
+  const handleOpenWrite = async () => {
+    const resp = await axios.post('archive/load-free-table', { file: data.fileName, folder: data.folderName });
+
+    openNewTab(setOpenedTabs, {
+      title: data.fileName,
+      icon: 'freetable.svg',
+      tabComponent: 'FreeTableTab',
+      props: {
+        initialData: resp.data,
+        archiveFile: data.fileName,
+        archiveFolder: data.folderName,
+      },
+    });
+  };
+
   return (
     <>
+      <DropDownMenuItem onClick={handleOpenRead}>Open (readonly)</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleOpenWrite}>Open in free table editor</DropDownMenuItem>
       <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>
     </>
   );
@@ -24,16 +57,7 @@ const archiveFileAppObject = () => ({ fileName, folderName }, { setOpenedTabs })
   // const Icon = (props) => <i className="fas fa-archive" />;
   const Icon = ArchiveTableIcon;
   const onClick = () => {
-    openNewTab(setOpenedTabs, {
-      title: fileName,
-      icon: 'archtable.svg',
-      tooltip: `${folderName}\n${fileName}`,
-      tabComponent: 'ArchiveFileTab',
-      props: {
-        archiveFile: fileName,
-        archiveFolder: folderName,
-      },
-    });
+    openArchive(setOpenedTabs, fileName, folderName);
   };
   const matcher = (filter) => filterName(filter, fileName);
 

packages/web/src/freetable/useNewFreeTable.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { useSetOpenedTabs, useCurrentDatabase } from '../utility/globalState';
+import { useSetOpenedTabs } from '../utility/globalState';
 import { openNewTab } from '../utility/common';
 
 export default function useNewFreeTable() {
@@ -10,6 +10,6 @@ export default function useNewFreeTable() {
       title: title || 'Table',
       icon: 'freetable.svg',
       tabComponent: 'FreeTableTab',
-      props: {},
+      props,
     });
 }

packages/web/src/modals/SaveArchiveModal.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import ModalBase from './ModalBase';
+import { FormTextField, FormSubmit, FormArchiveFolderSelect, FormRow, FormLabel } from '../utility/forms';
+import { Formik, Form } from 'formik';
+import styled from 'styled-components';
+import ModalHeader from './ModalHeader';
+import ModalContent from './ModalContent';
+import ModalFooter from './ModalFooter';
+
+const SelectWrapper = styled.div`
+  width: 150px;
+  position: relative;
+  flex: 1;
+`;
+
+export default function SaveArchiveModal({ file = 'new-table', folder = 'default', modalState, onSave }) {
+  const handleSubmit = async (values) => {
+    const { file, folder } = values;
+    modalState.close();
+    if (onSave) onSave(folder, file);
+  };
+  return (
+    <ModalBase modalState={modalState}>
+      <ModalHeader modalState={modalState}>Save to archive</ModalHeader>
+      <Formik onSubmit={handleSubmit} initialValues={{ file, folder }}>
+        <Form>
+          <ModalContent>
+            {/* <Label>Archive folder</Label> */}
+            <FormRow>
+              <FormLabel>Folder</FormLabel>
+              <SelectWrapper>
+                <FormArchiveFolderSelect name="folder" />
+              </SelectWrapper>
+            </FormRow>
+            <FormTextField label="File name" name="file" />
+          </ModalContent>
+          <ModalFooter>
+            <FormSubmit text="Save" />
+          </ModalFooter>
+        </Form>
+      </Formik>
+    </ModalBase>
+  );
+}

packages/web/src/tabs/FreeTableTab.js

@@ -2,15 +2,21 @@ import React from 'react';
 import { createGridCache, createChangeSet, createGridConfig, createFreeTableModel } from '@dbgate/datalib';
 import useUndoReducer from '../utility/useUndoReducer';
 import usePropsCompare from '../utility/usePropsCompare';
-import { useUpdateDatabaseForTab } from '../utility/globalState';
+import { useSetOpenedTabs, useUpdateDatabaseForTab } from '../utility/globalState';
 import TableDataGrid from '../datagrid/TableDataGrid';
 import useGridConfig from '../utility/useGridConfig';
 import FreeTableGrid from '../freetable/FreeTableGrid';
+import SaveArchiveModal from '../modals/SaveArchiveModal';
+import useModalState from '../modals/useModalState';
+import axios from '../utility/axios';
+import { changeTab } from '../utility/common';
 
-export default function FreeDataTab({ conid, database, schemaName, pureName, tabVisible, toolbarPortalRef, tabid }) {
+export default function FreeDataTab({ archiveFolder, archiveFile, tabVisible, toolbarPortalRef, tabid, initialData }) {
   const [config, setConfig] = useGridConfig(tabid);
-  const [modelState, dispatchModel] = useUndoReducer(createFreeTableModel());
+  const [modelState, dispatchModel] = useUndoReducer(initialData || createFreeTableModel());
   const storageKey = `tabdata_freetable_${tabid}`;
+  const saveSqlFileModalState = useModalState();
+  const setOpenedTabs = useSetOpenedTabs();
 
   React.useEffect(() => {
     const existingData = localStorage.getItem(storageKey);
@@ -25,15 +31,32 @@ export default function FreeDataTab({ conid, database, schemaName, pureName, tab
     localStorage.setItem(storageKey, JSON.stringify(modelState.value));
   }, [modelState]);
 
+  const handleSave = async (folder, file) => {
+    await axios.post('archive/save-free-table', { folder, file, data: modelState.value });
+    changeTab(tabid, setOpenedTabs, (tab) => ({
+      ...tab,
+      title: file,
+      props: { archiveFIle: file, archiveFolder: folder },
+    }));
+  };
+
   return (
-    <FreeTableGrid
-      conid={conid}
-      config={config}
-      setConfig={setConfig}
-      modelState={modelState}
-      dispatchModel={dispatchModel}
-      tabVisible={tabVisible}
-      toolbarPortalRef={toolbarPortalRef}
-    />
+    <>
+      <FreeTableGrid
+        config={config}
+        setConfig={setConfig}
+        modelState={modelState}
+        dispatchModel={dispatchModel}
+        tabVisible={tabVisible}
+        toolbarPortalRef={toolbarPortalRef}
+        onSave={() => saveSqlFileModalState.open()}
+      />
+      <SaveArchiveModal
+        modalState={saveSqlFileModalState}
+        folder={archiveFolder}
+        file={archiveFile}
+        onSave={handleSave}
+      />
+    </>
   );
 }

packages/web/src/utility/forms.js

@@ -196,7 +196,7 @@ export function FormArchiveFilesSelect({ folderName, name }) {
   return <FormReactSelect options={filesOptions} name={name} isMulti />;
 }
 
-export function FormArchiveFolderSelect({ name }) {
+export function FormArchiveFolderSelect({ name, ...other }) {
   const { setFieldValue } = useFormikContext();
   const folders = useArchiveFolders();
   const folderOptions = React.useMemo(
@@ -214,6 +214,12 @@ export function FormArchiveFolderSelect({ name }) {
   };
 
   return (
-    <FormReactSelect options={folderOptions} name={name} Component={Creatable} onCreateOption={handleCreateOption} />
+    <FormReactSelect
+      {...other}
+      options={folderOptions}
+      name={name}
+      Component={Creatable}
+      onCreateOption={handleCreateOption}
+    />
   );
 }