🎨: use DirectoryDatasetPicker in FolderTopBar and remove outdated…

… stuff

client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue

@@ -7,26 +7,22 @@ import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
 import { Services } from "@/components/Libraries/LibraryFolder/services";
-import mod_add_datasets from "@/components/Libraries/LibraryFolder/TopToolbar/add-datasets";
 import { deleteSelectedItems } from "@/components/Libraries/LibraryFolder/TopToolbar/delete-selected";
 import download from "@/components/Libraries/LibraryFolder/TopToolbar/download";
 import mod_import_collection from "@/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-collection";
 import mod_import_dataset from "@/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-dataset";
 import { useConfig } from "@/composables/config";
-import { type DetailedDatatypes, useDetailedDatatypes } from "@/composables/datatypes";
 import { Toast } from "@/composables/toast";
-import { useDbKeyStore } from "@/stores/dbKeyStore";
 import { useUserStore } from "@/stores/userStore";
 
 import FolderDetails from "@/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue";
 import LibraryBreadcrumb from "@/components/Libraries/LibraryFolder/LibraryBreadcrumb.vue";
 import SearchField from "@/components/Libraries/LibraryFolder/SearchField.vue";
+import DirectoryDatasetPicker from "@/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue";
 import HistoryDatasetPicker from "@/components/Libraries/LibraryFolder/TopToolbar/HistoryDatasetPicker.vue";
 
 library.add(faBook, faCaretDown, faDownload, faHome, faPlus, faTrash);
 
-type GenomesList = { id: string; text: string }[];
-
 interface Props {
     metadata: any;
     selected: any[];
@@ -57,26 +53,8 @@ const { config, isConfigLoaded } = useConfig();
 const userStore = useUserStore();
 const { isAdmin } = storeToRefs(userStore);
 
-const { datatypes } = useDetailedDatatypes();
-
-const dbKeyStore = useDbKeyStore();
-
 type ImportSource = "history" | "userdir" | "importdir" | "path" | "";
 const modalShow = ref<ImportSource>();
-const genomesList = ref<GenomesList>([]);
-const extensionsList = ref<DetailedDatatypes[]>([]);
-const auto = ref({
-    id: "auto",
-    extension: "auto",
-    text: "Auto-detect",
-    description: `This system will try to detect the file type automatically.
-                     If your file is not detected properly as one of the known formats,
-                     it most likely means that it has some format problems (e.g., different
-                     number of columns on different rows). You can still coerce the system
-                     to set your data to the format you think it should be.
-                     You can also upload compressed files, which will automatically be decompressed`,
-    description_url: "",
-});
 
 const services = new Services();
 
@@ -203,46 +181,6 @@ async function importToHistoryModal(isCollection: boolean) {
 function onAddDatasets(source: ImportSource = "") {
     modalShow.value = source;
 }
-
-// TODO: after replacing the selection dialog with the new component that is not using jquery
-async function addDatasets(source: string) {
-    await fetchExtAndGenomes();
-
-    new mod_add_datasets.AddDatasets({
-        source: source,
-        id: props.folderId,
-        updateContent: updateContent,
-        list_genomes: genomesList.value,
-        list_extensions: extensionsList.value,
-    });
-}
-
-function updateContent() {
-    emit("fetchFolderContents");
-}
-// END TODO
-
-async function fetchExtAndGenomes() {
-    try {
-        extensionsList.value = datatypes.value;
-
-        extensionsList.value.sort((a, b) => (a.extension > b.extension ? 1 : a.extension < b.extension ? -1 : 0));
-
-        extensionsList.value = [auto.value, ...extensionsList.value];
-    } catch (err) {
-        console.error(err);
-    }
-
-    try {
-        await dbKeyStore.fetchUploadDbKeys();
-
-        genomesList.value = dbKeyStore.uploadDbKeys;
-
-        genomesList.value.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
-    } catch (err) {
-        console.error(err);
-    }
-}
 </script>
 
 <template>
@@ -284,18 +222,18 @@ async function fetchExtAndGenomes() {
 
                         <BDropdownItem @click="onAddDatasets('history')"> from History </BDropdownItem>
 
-                        <BDropdownItem v-if="userLibraryImportDirAvailable" @click="addDatasets('userdir')">
+                        <BDropdownItem v-if="userLibraryImportDirAvailable" @click="onAddDatasets('userdir')">
                             from User Directory
                         </BDropdownItem>
 
                         <BDropdownDivider v-if="libraryImportDir || allowLibraryPathPaste" />
 
                         <BDropdownGroup v-if="libraryImportDir || allowLibraryPathPaste" header="Admins Only">
-                            <BDropdownItem v-if="libraryImportDir" @click="addDatasets('importdir')">
+                            <BDropdownItem v-if="libraryImportDir" @click="onAddDatasets('importdir')">
                                 from Import Directory
                             </BDropdownItem>
 
-                            <BDropdownItem v-if="allowLibraryPathPaste" @click="addDatasets('path')">
+                            <BDropdownItem v-if="allowLibraryPathPaste" @click="onAddDatasets('path')">
                                 from Path
                             </BDropdownItem>
                         </BDropdownGroup>
@@ -359,5 +297,11 @@ async function fetchExtAndGenomes() {
             :folder-id="props.folderId"
             @onClose="onAddDatasets"
             @reload="emit('fetchFolderContents')" />
+        <DirectoryDatasetPicker
+            v-else-if="modalShow"
+            :target="modalShow"
+            :folder-id="props.folderId"
+            @onClose="onAddDatasets"
+            @reload="emit('fetchFolderContents')" />
     </div>
 </template>