dbgate/packages/web/src/widgets/ArchiveFilesList.svelte

<script lang="ts" context="module">
  const ARCHIVE_LABELS = {
    jsonl: 'JSON table data',
    'table.yaml': 'Tables',
    'view.sql': 'Views',
    'proc.sql': 'Procedures',
    'func.sql': 'Functions',
    'trigger.sql': 'Triggers',
    'matview.sql': 'Materialized views',
  };
</script>

<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,
      fileType: file.type,
      fileLabel: file.label,
    }))}
    groupFunc={data => ARCHIVE_LABELS[data.fileType] || 'Archive'}
    module={archiveFileAppObject}
    {filter}
  />
</WidgetsInnerContainer>