archive widgets design

packages/api/src/controllers/archive.js

@@ -115,7 +115,8 @@ module.exports = {
 
   saveFreeTable_meta: 'post',
   async saveFreeTable({ folder, file, data }) {
-    saveFreeTableData(path.join(resolveArchiveFolder(folder), `${file}.jsonl`), data);
+    await saveFreeTableData(path.join(resolveArchiveFolder(folder), `${file}.jsonl`), data);
+    socket.emitChanged(`archive-files-changed-${folder}`);
     return true;
   },
 

packages/web/src/widgets/ArchiveFilesList.svelte

@@ -11,18 +11,27 @@
 </script>
 
 <script lang="ts">
+  import { createFreeTableModel } from 'dbgate-datalib';
+
   import _ from 'lodash';
 
   import AppObjectList from '../appobj/AppObjectList.svelte';
   import * as archiveFileAppObject from '../appobj/ArchiveFileAppObject.svelte';
+  import CloseSearchButton from '../elements/CloseSearchButton.svelte';
+  import DropDownButton from '../elements/DropDownButton.svelte';
 
   import InlineButton from '../elements/InlineButton.svelte';
 
   import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
   import SearchInput from '../elements/SearchInput.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import InputTextModal from '../modals/InputTextModal.svelte';
+  import { showModal } from '../modals/modalTools';
   import { currentArchive } from '../stores';
+  import { markArchiveFileAsDataSheet } from '../utility/archiveTools';
   import axiosInstance from '../utility/axiosInstance';
   import { useArchiveFiles, useArchiveFolders } from '../utility/metadataLoaders';
+  import openNewTab from '../utility/openNewTab';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
 
   let filter = '';
@@ -33,11 +42,53 @@
   const handleRefreshFiles = () => {
     axiosInstance.post('archive/refresh-files', { folder });
   };
+
+  function handleNewDataSheet() {
+    showModal(InputTextModal, {
+      value: '',
+      label: 'New file name',
+      header: 'Create new data sheet',
+      onConfirm: async file => {
+        await axiosInstance.post('archive/save-free-table', {
+          folder: $currentArchive,
+          file,
+          data: createFreeTableModel(),
+        });
+        markArchiveFileAsDataSheet($currentArchive, file);
+
+        openNewTab({
+          title: file,
+          icon: 'img free-table',
+          tabComponent: 'FreeTableTab',
+          props: {
+            initialArgs: {
+              functionName: 'archiveReader',
+              props: {
+                fileName: file,
+                folderName: $currentArchive,
+              },
+            },
+            archiveFile: file,
+            archiveFolder: $currentArchive,
+          },
+        });
+      },
+    });
+  }
+
+  function createAddMenu() {
+    return [{ text: 'New data sheet', onClick: handleNewDataSheet }];
+  }
 </script>
 
 <SearchBoxWrapper>
   <SearchInput placeholder="Search archive files" bind:value={filter} />
-  <InlineButton on:click={handleRefreshFiles}>Refresh</InlineButton>
+
+  <CloseSearchButton bind:filter />
+  <DropDownButton icon="icon plus-thick" menu={createAddMenu} />
+  <InlineButton on:click={handleRefreshFiles} title="Refresh files of selected archive folder">
+    <FontIcon icon="icon refresh" />
+  </InlineButton>
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
   <AppObjectList

packages/web/src/widgets/ArchiveFolderList.svelte

@@ -4,6 +4,7 @@
   import AppObjectList from '../appobj/AppObjectList.svelte';
   import * as archiveFolderAppObject from '../appobj/ArchiveFolderAppObject.svelte';
   import runCommand from '../commands/runCommand';
+  import CloseSearchButton from '../elements/CloseSearchButton.svelte';
 
   import InlineButton from '../elements/InlineButton.svelte';
 
@@ -25,6 +26,7 @@
 
 <SearchBoxWrapper>
   <SearchInput placeholder="Search archive folders" bind:value={filter} />
+  <CloseSearchButton bind:filter />
   <InlineButton on:click={() => runCommand('new.archiveFolder')} title="Add new archive folder">
     <FontIcon icon="icon plus-thick" />
   </InlineButton>