json lines tab

packages/api/src/controllers/archive.js

@@ -141,6 +141,13 @@ module.exports = {
     });
   },
 
+  saveText_meta: true,
+  async saveText({ folder, file, text }) {
+    await fs.writeFile(path.join(resolveArchiveFolder(folder), `${file}.jsonl`), text);
+    socket.emitChanged(`archive-files-changed-${folder}`);
+    return true;
+  },
+
   async getNewArchiveFolder({ database }) {
     const isLink = database.endsWith(database);
     const name = isLink ? database.slice(0, -5) : database;

packages/api/src/controllers/jsldata.js

@@ -10,7 +10,10 @@ const socket = require('../utility/socket');
 function readFirstLine(file) {
   return new Promise((resolve, reject) => {
     lineReader.open(file, (err, reader) => {
-      if (err) reject(err);
+      if (err) {
+        reject(err);
+        return;
+      }
       if (reader.hasNextLine()) {
         reader.nextLine((err, line) => {
           if (err) reject(err);
@@ -151,4 +154,10 @@ module.exports = {
     saveFreeTableData(getJslFileName(jslid), data);
     return true;
   },
+
+  saveText_meta: true,
+  async saveText({ jslid, text }) {
+    await fs.promises.writeFile(getJslFileName(jslid), text);
+    return true;
+  },
 };

packages/web/src/appobj/ArchiveFileAppObject.svelte

@@ -157,15 +157,15 @@
   const handleOpenYamlFile = () => {
     openTextFile(data.fileName, data.fileType, data.folderName, 'YamlEditorTab', 'img yaml');
   };
-  const handleOpenJsonText = () => {
-    openTextFile(data.fileName, data.fileType, data.folderName, 'JsonEditorTab', 'img json');
+  const handleOpenJsonLinesText = () => {
+    openTextFile(data.fileName, data.fileType, data.folderName, 'JsonLinesEditorTab', 'img json');
   };
 
   function createMenu() {
     return [
       data.fileType == 'jsonl' && { text: 'Open (readonly)', onClick: handleOpenRead },
       data.fileType == 'jsonl' && { text: 'Open as data sheet', onClick: handleOpenWrite },
-      data.fileType == 'jsonl' && { text: 'Open in text editor', onClick: handleOpenJsonText },
+      data.fileType == 'jsonl' && { text: 'Open in text editor', onClick: handleOpenJsonLinesText },
       { text: 'Delete', onClick: handleDelete },
       { text: 'Rename', onClick: handleRename },
       data.fileType == 'jsonl' &&

packages/web/src/tabs/ArchiveFileTab.svelte

@@ -5,8 +5,9 @@
 <script lang="ts">
   import JslDataGrid from '../datagrid/JslDataGrid.svelte';
 
-  export let archiveFolder;
-  export let archiveFile;
+  export let archiveFolder = undefined;
+  export let archiveFile = undefined;
+  export let jslid = undefined;
 </script>
 
-<JslDataGrid jslid={`archive://${archiveFolder}/${archiveFile}`} />
+<JslDataGrid jslid={jslid || `archive://${archiveFolder}/${archiveFile}`} />

packages/web/src/tabs/FreeTableTab.svelte

@@ -32,6 +32,9 @@
   } from 'dbgate-datalib';
   import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
+  import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+  import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
+import ToolStripExportButton from '../buttons/ToolStripExportButton.svelte';
   import registerCommand from '../commands/registerCommand';
   import DataGrid from '../datagrid/DataGrid.svelte';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
@@ -141,18 +144,24 @@
 {:else if errorMessage}
   <ErrorInfo message={errorMessage} />
 {:else}
-  <DataGrid
-    config={$config}
-    setConfig={config.update}
-    modelState={$modelState}
-    {dispatchModel}
-    focusOnVisible
-    gridCoreComponent={FreeTableGridCore}
-    freeTableColumn
-    showMacros
-    expandMacros
-    onRunMacro={handleRunMacro}
-    isDynamicStructure={$modelState.value?.structure?.__isDynamicStructure}
-    {display}
-  />
+  <ToolStripContainer>
+    <DataGrid
+      config={$config}
+      setConfig={config.update}
+      modelState={$modelState}
+      {dispatchModel}
+      focusOnVisible
+      gridCoreComponent={FreeTableGridCore}
+      freeTableColumn
+      showMacros
+      expandMacros
+      onRunMacro={handleRunMacro}
+      isDynamicStructure={$modelState.value?.structure?.__isDynamicStructure}
+      {display}
+    />
+    <svelte:fragment slot="toolstrip">
+      <ToolStripCommandButton command="freeTable.save" />
+      <ToolStripExportButton command="freeTableGrid.export" />
+    </svelte:fragment>
+  </ToolStripContainer>
 {/if}

packages/web/src/tabs/JsonLinesEditorTab.svelte

@@ -0,0 +1,150 @@
+<script lang="ts" context="module">
+  const getCurrentEditor = () => getActiveComponent('JsonLinesEditorTab');
+
+  registerFileCommands({
+    idPrefix: 'jsonl',
+    category: 'JSON Lines editor',
+    getCurrentEditor,
+    folder: null,
+    format: 'text',
+    fileExtension: 'jsonl',
+
+    save: false,
+    findReplace: true,
+  });
+
+  registerCommand({
+    id: 'jsonl.save',
+    group: 'save',
+    category: 'JSON Lines editor',
+    name: 'Save',
+    toolbar: true,
+    isRelatedToTab: true,
+    icon: 'icon save',
+    testEnabled: () => getCurrentEditor() != null,
+    onClick: () => getCurrentEditor().save(),
+  });
+
+  registerCommand({
+    id: 'jsonl.preview',
+    category: 'JSON Lines editor',
+    name: 'Preview',
+    icon: 'icon preview',
+    testEnabled: () => getCurrentEditor() != null,
+    onClick: () => getCurrentEditor().preview(),
+  });
+</script>
+
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { registerFileCommands } from '../commands/stdCommands';
+  import uuidv1 from 'uuid/v1';
+
+  import AceEditor from '../query/AceEditor.svelte';
+  import useEditorData from '../query/useEditorData';
+  import invalidateCommands from '../commands/invalidateCommands';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+  import { showModal } from '../modals/modalTools';
+  import SaveArchiveModal from '../modals/SaveArchiveModal.svelte';
+  import { changeTab } from '../utility/common';
+  import { apiCall } from '../utility/api';
+  import registerCommand from '../commands/registerCommand';
+  import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
+  import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+  import openNewTab from '../utility/openNewTab';
+
+  export let tabid;
+  export let archiveFolder;
+  export let archiveFile;
+
+  const tabVisible: any = getContext('tabVisible');
+
+  export const activator = createActivator('JsonLinesEditorTab', false);
+
+  let domEditor;
+
+  $: if ($tabVisible && domEditor) {
+    domEditor?.getEditor()?.focus();
+  }
+
+  export function getData() {
+    return $editorState.value || '';
+  }
+
+  export function find() {
+    domEditor.getEditor().execCommand('find');
+  }
+
+  export function replace() {
+    domEditor.getEditor().execCommand('replace');
+  }
+
+  export function getTabId() {
+    return tabid;
+  }
+
+  export function save() {
+    showModal(SaveArchiveModal, {
+      folder: archiveFolder,
+      file: archiveFile,
+      onSave: doSave,
+    });
+  }
+
+  export async function preview() {
+    const jslid = uuidv1();
+    await apiCall('jsldata/save-text', { jslid, text: $editorState.value || '' });
+
+    openNewTab({
+      title: 'Preview #',
+      icon: 'img archive',
+      tabComponent: 'ArchiveFileTab',
+      props: {
+        jslid,
+      },
+    });
+  }
+
+  const doSave = async (folder, file) => {
+    await apiCall('archive/save-text', { folder, file, text: $editorState.value || '' });
+    changeTab(tabid, tab => ({
+      ...tab,
+      title: file,
+      props: { archiveFile: file, archiveFolder: folder },
+      archiveFile: file,
+      archiveFolder: folder,
+    }));
+    archiveFile = file;
+    archiveFolder = folder;
+  };
+
+  const { editorState, editorValue, setEditorData, saveToStorage } = useEditorData({ tabid });
+
+  function createMenu() {
+    return [
+      { command: 'jsonl.save' },
+      { command: 'jsonl.preview' },
+      { divider: true },
+      { command: 'jsonl.find' },
+      { command: 'jsonl.replace' },
+    ];
+  }
+</script>
+
+<ToolStripContainer>
+  <AceEditor
+    value={$editorState.value || ''}
+    menu={createMenu()}
+    on:input={e => setEditorData(e.detail)}
+    on:focus={() => {
+      activator.activate();
+      invalidateCommands();
+    }}
+    bind:this={domEditor}
+    mode="json"
+  />
+  <svelte:fragment slot="toolstrip">
+    <ToolStripCommandButton command="jsonl.save" />
+    <ToolStripCommandButton command="jsonl.preview" />
+  </svelte:fragment>
+</ToolStripContainer>

packages/web/src/tabs/index.js

@@ -16,6 +16,7 @@ import * as QueryDesignTab from './QueryDesignTab.svelte';
 import * as CommandListTab from './CommandListTab.svelte';
 import * as YamlEditorTab from './YamlEditorTab.svelte';
 import * as JsonEditorTab from './JsonEditorTab.svelte';
+import * as JsonLinesEditorTab from './JsonLinesEditorTab.svelte';
 import * as CompareModelTab from './CompareModelTab.svelte';
 import * as JsonTab from './JsonTab.svelte';
 import * as ChangelogTab from './ChangelogTab.svelte';
@@ -40,6 +41,7 @@ export default {
   CommandListTab,
   YamlEditorTab,
   JsonEditorTab,
+  JsonLinesEditorTab,
   CompareModelTab,
   JsonTab,
   ChangelogTab,