archive, export into archive

packages/web/src/utility/forms.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 import Select from 'react-select';
+import Creatable from 'react-select/creatable';
 import { TextField, SelectField } from './inputs';
 import { Field, useFormikContext } from 'formik';
 import FormStyledButton from '../widgets/FormStyledButton';
-import { useConnectionList, useDatabaseList, useDatabaseInfo } from './metadataLoaders';
+import { useConnectionList, useDatabaseList, useDatabaseInfo, useArchiveFolders } from './metadataLoaders';
 import useSocket from './SocketProvider';
 import getAsArray from './getAsArray';
+import axios from './axios';
 
 export const FormRow = styled.div`
   display: flex;
@@ -85,11 +87,11 @@ export function FormRadioGroupItem({ name, text, value }) {
   );
 }
 
-export function FormReactSelect({ options, name, isMulti = false }) {
+export function FormReactSelect({ options, name, isMulti = false, Component = Select, ...other }) {
   const { setFieldValue, values } = useFormikContext();
 
   return (
-    <Select
+    <Component
       options={options}
       value={
         isMulti
@@ -102,6 +104,7 @@ export function FormReactSelect({ options, name, isMulti = false }) {
       menuPortalTarget={document.body}
       isMulti={isMulti}
       closeMenuOnSelect={!isMulti}
+      {...other}
     />
   );
 }
@@ -170,3 +173,25 @@ export function FormTablesSelect({ conidName, databaseName, schemaName, name })
   if (tablesOptions.length == 0) return <div>Not available</div>;
   return <FormReactSelect options={tablesOptions} name={name} isMulti />;
 }
+
+export function FormArchiveFolderSelect({ name }) {
+  const { setFieldValue } = useFormikContext();
+  const folders = useArchiveFolders();
+  const folderOptions = React.useMemo(
+    () =>
+      (folders || []).map((folder) => ({
+        value: folder.name,
+        label: folder.name,
+      })),
+    [folders]
+  );
+
+  const handleCreateOption = (folder) => {
+    axios.post('archive/create-folder', { folder });
+    setFieldValue(name, folder);
+  };
+
+  return (
+    <FormReactSelect options={folderOptions} name={name} Component={Creatable} onCreateOption={handleCreateOption} />
+  );
+}

packages/web/src/utility/globalState.js

@@ -87,12 +87,14 @@ export function useAppObjectParams() {
   const setSavedSqlFiles = useSetSavedSqlFiles();
   const openedConnections = useOpenedConnections();
   const setOpenedConnections = useSetOpenedConnections();
+  const currentArchive = useCurrentArchive();
   const showModal = useShowModal();
   const config = useConfig();
 
   return {
     setOpenedTabs,
     currentDatabase,
+    currentArchive,
     newQuery,
     openedTabs,
     setSavedSqlFiles,
@@ -113,3 +115,7 @@ export { OpenedConnectionsProvider, useOpenedConnections, useSetOpenedConnection
 const [LeftPanelWidthProvider, useLeftPanelWidth, useSetLeftPanelWidth] = createGlobalState(300);
 
 export { LeftPanelWidthProvider, useLeftPanelWidth, useSetLeftPanelWidth };
+
+const [CurrentArchiveProvider, useCurrentArchive, useSetCurrentArchive] = createGlobalState('default');
+
+export { CurrentArchiveProvider, useCurrentArchive, useSetCurrentArchive };

packages/web/src/utility/metadataLoaders.js

@@ -64,6 +64,18 @@ const databaseListLoader = ({ conid }) => ({
   reloadTrigger: `database-list-changed-${conid}`,
 });
 
+const archiveFoldersLoader = () => ({
+  url: 'archive/folders',
+  params: {},
+  reloadTrigger: `archive-folders-changed`,
+});
+
+const archiveFilesLoader = ({ folder }) => ({
+  url: 'archive/files',
+  params: { folder },
+  reloadTrigger: `archive-files-changed-${folder}`,
+});
+
 const serverStatusLoader = () => ({
   url: 'server-connections/server-status',
   params: {},
@@ -217,3 +229,17 @@ export function getConfig() {
 export function useConfig() {
   return useCore(configLoader, {}) || {};
 }
+
+export function getArchiveFiles(args) {
+  return getCore(archiveFilesLoader, args);
+}
+export function useArchiveFiles(args) {
+  return useCore(archiveFilesLoader, args);
+}
+
+export function getArchiveFolders(args) {
+  return getCore(archiveFoldersLoader, args);
+}
+export function useArchiveFolders(args) {
+  return useCore(archiveFoldersLoader, args);
+}