From 77ca6aedb3ce2cc3232a4d64e53c341f0c9afca8 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 9 Dec 2021 13:58:31 +0100
Subject: [PATCH] archive widgets design

---
 packages/api/src/controllers/archive.js       |  3 +-
 .../web/src/widgets/ArchiveFilesList.svelte   | 53 ++++++++++++++++++-
 .../web/src/widgets/ArchiveFolderList.svelte  |  2 +
 3 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/packages/api/src/controllers/archive.js b/packages/api/src/controllers/archive.js
index 89c5d9bf..371f1bd6 100644
--- a/packages/api/src/controllers/archive.js
+++ b/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;
   },
 
diff --git a/packages/web/src/widgets/ArchiveFilesList.svelte b/packages/web/src/widgets/ArchiveFilesList.svelte
index cca2340a..f4db5d3b 100644
--- a/packages/web/src/widgets/ArchiveFilesList.svelte
+++ b/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
diff --git a/packages/web/src/widgets/ArchiveFolderList.svelte b/packages/web/src/widgets/ArchiveFolderList.svelte
index 5179bc71..90449ea8 100644
--- a/packages/web/src/widgets/ArchiveFolderList.svelte
+++ b/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>