archive widget

packages/web/src/widgets/ArchiveFilesList.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import * as archiveFileAppObject from '../appobj/ArchiveFileAppObject.svelte';
+
+  import InlineButton from '../elements/InlineButton.svelte';
+
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import { currentArchive } from '../stores';
+  import axiosInstance from '../utility/axiosInstance';
+  import { useArchiveFiles, useArchiveFolders } from '../utility/metadataLoaders';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+
+  let filter = '';
+
+  $: folder = $currentArchive;
+  $: files = useArchiveFiles({ folder });
+
+  const handleRefreshFiles = () => {
+    axiosInstance.post('archive/refresh-files', { folder });
+  };
+</script>
+
+<SearchBoxWrapper>
+  <SearchInput placeholder="Search archive files" bind:value={filter} />
+  <InlineButton on:click={handleRefreshFiles}>Refresh</InlineButton>
+</SearchBoxWrapper>
+<WidgetsInnerContainer>
+  <AppObjectList
+    list={($files || []).map(file => ({
+      fileName: file.name,
+      folderName: folder,
+    }))}
+    module={archiveFileAppObject}
+    {filter}
+  />
+</WidgetsInnerContainer>

packages/web/src/widgets/ArchiveFolderList.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import * as archiveFolderAppObject from '../appobj/ArchiveFolderAppObject.svelte';
+
+  import InlineButton from '../elements/InlineButton.svelte';
+
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import axiosInstance from '../utility/axiosInstance';
+  import { useArchiveFolders } from '../utility/metadataLoaders';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+
+  let filter = '';
+
+  $: folders = useArchiveFolders();
+
+  const handleRefreshFolders = () => {
+    axiosInstance.post('archive/refresh-folders', {});
+  };
+</script>
+
+<SearchBoxWrapper>
+  <SearchInput placeholder="Search archive folders" bind:value={filter} />
+  <InlineButton on:click={handleRefreshFolders}>Refresh</InlineButton>
+</SearchBoxWrapper>
+<WidgetsInnerContainer>
+  <AppObjectList list={_.sortBy($folders, 'name')} module={archiveFolderAppObject} {filter} />
+</WidgetsInnerContainer>

packages/web/src/widgets/ArchiveWidget.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import ArchiveFilesList from './ArchiveFilesList.svelte';
+
+  import ArchiveFolderList from './ArchiveFolderList.svelte';
+
+  import WidgetColumnBar from './WidgetColumnBar.svelte';
+  import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
+</script>
+
+<WidgetColumnBar>
+  <WidgetColumnBarItem title="Archive folders" name="folders" height="50%">
+    <ArchiveFolderList />
+  </WidgetColumnBarItem>
+  <WidgetColumnBarItem title="Archive files" name="files">
+    <ArchiveFilesList />
+  </WidgetColumnBarItem>
+</WidgetColumnBar>

packages/web/src/widgets/WidgetContainer.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import { selectedWidget } from '../stores';
+  import ArchiveWidget from './ArchiveWidget.svelte';
   import DatabaseWidget from './DatabaseWidget.svelte';
   import FilesWidget from './FilesWidget.svelte';
-
-
 </script>
 
 {#if $selectedWidget == 'database'}
@@ -12,3 +11,6 @@
 {#if $selectedWidget == 'file'}
   <FilesWidget />
 {/if}
+{#if $selectedWidget == 'archive'}
+  <ArchiveWidget />
+{/if}