free table - save to archive

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;
 }