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