free table - save to archive

packages/web/src/commands/stdCommands.ts

@@ -95,6 +95,20 @@ registerCommand({
   },
 });
 
+registerCommand({
+  id: 'new.freetable',
+  category: 'New',
+  icon: 'img markdown',
+  name: 'Free table editor',
+  onClick: () => {
+    openNewTab({
+      title: 'Data #',
+      icon: 'img free-table',
+      tabComponent: 'FreeTableTab',
+    });
+  },
+});
+
 export function registerFileCommands({
   idPrefix,
   category,

packages/web/src/datagrid/DataGridCore.svelte

@@ -13,7 +13,7 @@
     keyText: 'F5',
     toolbar: true,
     icon: 'icon reload',
-    enabledStore: derived(currentDataGrid, grid => grid?.getDisplay().supportsReload),
+    enabledStore: derived(currentDataGrid, grid => grid?.getDisplay()?.supportsReload),
     onClick: () => get(currentDataGrid).refresh(),
   });
 
@@ -24,7 +24,10 @@
     keyText: 'Ctrl+S',
     toolbar: true,
     icon: 'icon save',
-    enabledStore: derived(currentDataGridChangeSet, (changeSet: any) => changeSetContainsChanges(changeSet?.value)),
+    enabledStore: derived(
+      [currentDataGrid, currentDataGridChangeSet],
+      ([grid, changeSet]) => grid?.getGeneralAllowSave() || changeSetContainsChanges((changeSet as any)?.value)
+    ),
     onClick: () => get(currentDataGrid).save(),
   });
 
@@ -194,6 +197,7 @@
   export let isLoadedAll;
   export let loadedTime;
   export let changeSetStore;
+  export let generalAllowSave = false;
 
   const wheelRowCount = 5;
   const instance = get_current_component();
@@ -325,6 +329,10 @@
     }
   }
 
+  export function getGeneralAllowSave() {
+    return generalAllowSave;
+  }
+
   $: autofillMarkerCell =
     selectedCells && selectedCells.length > 0 && _.uniq(selectedCells.map(x => x[0])).length == 1
       ? [_.max(selectedCells.map(x => x[0])), _.max(selectedCells.map(x => x[1]))]

packages/web/src/forms/FormArchiveFolderSelect.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import InputTextModal from '../modals/InputTextModal.svelte';
+
+  import { showModal } from '../modals/modalTools';
+  import axiosInstance from '../utility/axiosInstance';
+
+  import { useArchiveFolders } from '../utility/metadataLoaders';
+  import { getFormContext } from './FormProviderCore.svelte';
+
+  import FormSelectField from './FormSelectField.svelte';
+
+  export let additionalFolders = [];
+  export let name;
+
+  const { setFieldValue } = getFormContext();
+
+  const folders = useArchiveFolders();
+
+  $: folderOptions = [
+    ...($folders || []).map(folder => ({
+      value: folder.name,
+      label: folder.name,
+    })),
+    ...additionalFolders
+      .filter(x => !($folders || []).find(y => y.name == x))
+      .map(folder => ({
+        value: folder,
+        label: folder,
+      })),
+    {
+      label: '(Create new)',
+      value: '@create',
+    },
+  ];
+
+  const createOption = folder => {
+    axiosInstance.post('archive/create-folder', { folder });
+    setFieldValue(name, folder);
+  };
+
+  function handleChange(e) {
+    if (e.detail == '@create') {
+      showModal(InputTextModal, {
+        header: 'Archive',
+        label: 'Name of new folder',
+        onConfirm: createOption,
+      });
+    }
+  }
+</script>
+
+<FormSelectField {...$$props} options={folderOptions} on:change={handleChange} />

packages/web/src/forms/FormSelectField.svelte

@@ -10,5 +10,5 @@
 </script>
 
 <svelte:component this={template} type="select" {label} {...templateProps}>
-  <FormSelectFieldRaw {name} {...$$restProps} />
+  <FormSelectFieldRaw {name} {...$$restProps} on:change />
 </svelte:component>

packages/web/src/forms/FormSelectFieldRaw.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { getFormContext } from './FormProviderCore.svelte';
   import SelectField from './SelectField.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
 
   export let name;
   export let isClearable = false;
@@ -11,7 +14,9 @@
 <SelectField
   {...$$restProps}
   value={$values[name]}
-  on:change={e => setFieldValue(name, e.detail)}
+  on:change={e => {
+    setFieldValue(name, e.detail);
+    dispatch('change', e.detail);
+  }}
   {isClearable}
-  
 />

packages/web/src/modals/ModalBase.svelte

@@ -1,6 +1,6 @@
 <script>
   import FontIcon from '../icons/FontIcon.svelte';
-  import { closeModal } from './modalTools';
+  import { closeModal, getActiveModalId } from './modalTools';
   import clickOutside from '../utility/clickOutside';
   import keycodes from '../utility/keycodes';
   import { onMount } from 'svelte';
@@ -12,12 +12,14 @@
   export let skipFooter = false;
 
   function handleCloseModal() {
-    closeModal(modalId);
+    if (modalId == getActiveModalId()) {
+      closeModal(modalId);
+    }
   }
 
   function handleEscape(e) {
     if (e.keyCode == keycodes.escape) {
-      closeModal(modalId);
+      handleCloseModal();
     }
   }
 

packages/web/src/modals/SaveArchiveModal.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import FormArchiveFolderSelect from '../forms/FormArchiveFolderSelect.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSelectField from '../forms/FormSelectField.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let file = 'new-table';
+  export let folder = 'default';
+  export let onSave;
+
+  const handleSubmit = async e => {
+    const { file, folder } = e.detail;
+    closeCurrentModal();
+    if (onSave) onSave(folder, file);
+  };
+</script>
+
+<FormProvider initialValues={{ file, folder }}>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">Save to archive</svelte:fragment>
+
+    <FormArchiveFolderSelect label="Folder" name="folder" isNative />
+    <FormTextField label="File name" name="file" />
+
+    <svelte:fragment slot="footer">
+      <FormSubmit value="Save" on:click={handleSubmit} />
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>

packages/web/src/modals/modalTools.ts

@@ -1,4 +1,5 @@
 import { openedModals } from '../stores';
+import { get } from 'svelte/store';
 import uuidv1 from 'uuid/v1';
 import _ from 'lodash';
 
@@ -12,5 +13,10 @@ export function closeModal(modalId) {
 }
 
 export function closeCurrentModal() {
-  openedModals.update(x => _.dropRight(x));
+  openedModals.update(modals => modals.slice(0, modals.length - 1));
+}
+
+export function getActiveModalId() {
+  const modals = get(openedModals);
+  return modals[modals.length - 1]?.modalId;
 }

packages/web/src/tabs/FreeTableTab.svelte

@@ -4,13 +4,18 @@
   import LoadingInfo from '../elements/LoadingInfo.svelte';
 
   import FreeTableGrid from '../freetable/FreeTableGrid.svelte';
+  import { showModal } from '../modals/modalTools';
+  import SaveArchiveModal from '../modals/SaveArchiveModal.svelte';
   import useEditorData from '../query/useEditorData';
   import axiosInstance from '../utility/axiosInstance';
+  import { changeTab } from '../utility/common';
   import createUndoReducer from '../utility/createUndoReducer';
   import useGridConfig from '../utility/useGridConfig';
 
   export let tabid;
   export let initialArgs;
+  export let archiveFolder;
+  export let archiveFile;
 
   const config = useGridConfig(tabid);
   const [modelState, dispatchModel] = createUndoReducer(createFreeTableModel());
@@ -31,7 +36,22 @@
 
   $: setEditorData($modelState.value);
 
-  function handleSave() {}
+  function handleSave() {
+    showModal(SaveArchiveModal, {
+      folder: archiveFolder,
+      file: archiveFile,
+      onSave: doSave,
+    });
+  }
+
+  const doSave = async (folder, file) => {
+    await axiosInstance.post('archive/save-free-table', { folder, file, data: $modelState.value });
+    changeTab(tabid, tab => ({
+      ...tab,
+      title: file,
+      props: { archiveFile: file, archiveFolder: folder },
+    }));
+  };
 </script>
 
 {#if isLoading}
@@ -45,5 +65,7 @@
     modelState={$modelState}
     {dispatchModel}
     onSave={handleSave}
+    generalAllowSave
+    focusOnVisible
   />
 {/if}