free table - save to archive

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