dbgate/packages/web/src/appobj/ArchiveFileAppObject.svelte

<script lang="ts" context="module">
  function openArchive(fileName, folderName) {
    openNewTab({
      title: fileName,
      icon: 'img archive',
      tooltip: `${folderName}\n${fileName}`,
      tabComponent: 'ArchiveFileTab',
      props: {
        archiveFile: fileName,
        archiveFolder: folderName,
      },
    });
  }

  async function openTextFile(fileName, fileType, folderName, tabComponent, icon) {
    const connProps: any = {};
    let tooltip = undefined;

    const resp = await axiosInstance.post('files/load', {
      folder: 'archive:' + folderName,
      file: fileName + '.' + fileType,
      format: 'text',
    });

    openNewTab(
      {
        title: fileName,
        icon,
        tabComponent,
        tooltip,
        props: {
          savedFile: fileName + '.' + fileType,
          savedFolder: 'archive:' + folderName,
          savedFormat: 'text',
          archiveFolder: folderName,
          ...connProps,
        },
      },
      { editor: resp.data }
    );
  }

  export const extractKey = data => data.fileName;
  export const createMatcher = ({ fileName }) => filter => filterName(filter, fileName);
  const ARCHIVE_ICONS = {
    jsonl: 'img archive',
    'table.yaml': 'img table',
    'view.sql': 'img view',
    'proce.sql': 'img procedure',
    'func.sql': 'img function',
    'trigger.sql': 'img sql-file',
    'matview.sql': 'img view',
  };
</script>

<script lang="ts">
  import _ from 'lodash';
  import { filterName } from 'dbgate-tools';
  import ImportExportModal from '../modals/ImportExportModal.svelte';
  import { showModal } from '../modals/modalTools';

  import { currentArchive, extensions, getCurrentDatabase } from '../stores';

  import axiosInstance from '../utility/axiosInstance';
  import createQuickExportMenu from '../utility/createQuickExportMenu';
  import { exportElectronFile } from '../utility/exportElectronFile';
  import openNewTab from '../utility/openNewTab';
  import AppObjectCore from './AppObjectCore.svelte';
  import getConnectionLabel from '../utility/getConnectionLabel';
  import InputTextModal from '../modals/InputTextModal.svelte';
  import ConfirmModal from '../modals/ConfirmModal.svelte';

  export let data;

  const handleRename = () => {
    showModal(InputTextModal, {
      value: data.fileName,
      label: 'New file name',
      header: 'Rename file',
      onConfirm: newFile => {
        axiosInstance.post('archive/rename-file', {
          file: data.fileName,
          folder: data.folderName,
          fileType: data.fileType,
          newFile,
        });
      },
    });
  };

  const handleDelete = () => {
    showModal(ConfirmModal, {
      message: `Really delete file ${data.fileName}?`,
      onConfirm: () => {
        axiosInstance.post('archive/delete-file', {
          file: data.fileName,
          folder: data.folderName,
          fileType: data.fileType,
        });
      },
    });
  };
  const handleOpenRead = () => {
    openArchive(data.fileName, data.folderName);
  };
  const handleOpenWrite = () => {
    openNewTab({
      title: data.fileName,
      icon: 'img archive',
      tabComponent: 'FreeTableTab',
      props: {
        initialArgs: {
          functionName: 'archiveReader',
          props: {
            fileName: data.fileName,
            folderName: data.folderName,
          },
        },
        archiveFile: data.fileName,
        archiveFolder: data.folderName,
      },
    });
  };
  const handleClick = () => {
    if (data.fileType == 'jsonl') openArchive(data.fileName, data.folderName);
    if (data.fileType.endsWith('.sql')) {
      handleOpenSqlFile();
    }
    if (data.fileType.endsWith('.yaml')) {
      handleOpenYamlFile();
    }
  };
  const handleOpenSqlFile = () => {
    openTextFile(data.fileName, data.fileType, data.folderName, 'QueryTab', 'img sql-file');
  };
  const handleOpenYamlFile = () => {
    openTextFile(data.fileName, data.fileType, data.folderName, 'YamlEditorTab', 'img yaml');
  };

  function createMenu() {
    return [
      data.fileType == 'jsonl' && { text: 'Open (readonly)', onClick: handleOpenRead },
      data.fileType == 'jsonl' && { text: 'Open in free table editor', onClick: handleOpenWrite },
      { text: 'Delete', onClick: handleDelete },
      { text: 'Rename', onClick: handleRename },
      data.fileType == 'jsonl' &&
        createQuickExportMenu($extensions, fmt => async () => {
          exportElectronFile(
            data.fileName,
            {
              functionName: 'archiveReader',
              props: {
                fileName: data.fileName,
                folderName: data.folderName,
              },
            },
            fmt
          );
        }),
      data.fileType == 'jsonl' && {
        text: 'Export',
        onClick: () => {
          showModal(ImportExportModal, {
            initialValues: {
              sourceStorageType: 'archive',
              sourceArchiveFolder: data.folderName,
              sourceList: [data.fileName],
            },
          });
        },
      },
      data.fileType.endsWith('.sql') && { text: 'Open SQL', onClick: handleOpenSqlFile },
      data.fileType.endsWith('.yaml') && { text: 'Open YAML', onClick: handleOpenYamlFile },
    ];
  }
</script>

<AppObjectCore
  {...$$restProps}
  {data}
  title={data.fileName}
  icon={ARCHIVE_ICONS[data.fileType]}
  menu={createMenu}
  on:click={handleClick}
/>