WIP: download data

components/ServerDbTable.vue

@@ -51,7 +51,7 @@ const msFilter: Ref<string | undefined> = ref(undefined)
 const page = ref(1)
 let loading = ref(false)
 const expanded = ref([])
-const { height } = useDisplay();
+const { height, mobile } = useDisplay();
 const minTableHeight = ref(400)
 const computedTableHeight = computed(() => {
     const computedHeight = height.value - 350
@@ -314,6 +314,7 @@ function clearSearch() {
     search.value = ""
 }
 
+const { pending: pendingDownloadData, downloadCsv } = useCsvDownload(props.db)
 
 
 
@@ -331,11 +332,11 @@ function clearSearch() {
         </v-card-text>
         <v-card-text>
             <v-row>
-                <v-col cols="5">
+                <v-col :cols="mobile ? 12 : 5">
                     <v-text-field v-model="search" label="Search..." hide-details prepend-inner-icon="mdi-magnify"
                         single-line clearable></v-text-field>
                 </v-col>
-                <v-col>
+                <v-col :cols="mobile ? 12 : 6">
                     <v-autocomplete ref="autocompleteInput" hide-details v-model:model-value="filterOrSearch"
                         auto-select-first chips clearable label="Filter results..." :items="autocompleteItems" single-line
                         item-value="value" item-title="title" multiple return-object prepend-inner-icon="md:search"
@@ -353,9 +354,17 @@ function clearSearch() {
                         </template>
                     </v-autocomplete>
                 </v-col>
+                <v-col :cols="mobile ? 'auto' : 1">
+                    <v-badge :content="totalHits" color="primary">
+                        <v-btn icon="md:download"
+                            @click="downloadCsv(props.db, toValue(search), { ...notPaginatedParams.value, filter: toValue(computedFilter), sort: msSortBy.value })">
+                        </v-btn>
+                    </v-badge>
+                </v-col>
             </v-row>
             <v-row v-if="props.db === 'structure'">
                 <v-col>
+
                     <v-range-slider v-model="plddtRange" density="compact" hide-details="auto" label="pLDDT" step="0.1"
                         @update:modelValue="throttleSearch()">
                         <template v-slot:prepend>
@@ -371,11 +380,14 @@ function clearSearch() {
                 </v-col>
             </v-row>
         </v-card-text>
+        <v-toolbar flat color="transparent"> </v-toolbar>
         <v-data-table-server v-if="!msError" v-model:page="page" color="primary" v-bind="dataTableServerProps"
             v-model:items-per-page="hitsPerPage" v-model:sortBy="sortByRef" v-model:expanded="expanded" fixed-header
             :loading="loading" :items="msResult?.hits ?? []" :items-length="totalHits" density="compact"
             :items-per-page-options="itemsPerPage" :height="computedTableHeight" class="elevation-1 mt-2">
 
+
+
             <template v-for="(slot, index) of Object.keys(slots)" :key="index" v-slot:[slot]="data">
                 <slot :name="slot" v-bind="data"></slot>
             </template>

components/content/RefseqDb.vue

@@ -11,6 +11,8 @@ const itemValue = ref("id");
 const { width } = useDisplay();
 const scaleTransform: Ref<string[]> = ref([])
 
+
+
 const facets = ref([
     "replicon",
     "type",
@@ -80,10 +82,7 @@ onMounted(async () => {
 
 async function getAllHits(params) {
     if (params.index === 'refseq') {
-        console.log(params.index)
         const { data, error } = await useAsyncMeiliSearch(params)
-        console.log(error.value)
-        console.log(data.value)
         allHits.value = data.value
     }
 }
@@ -281,12 +280,11 @@ const scaleType = ref("linear")
             </v-expansion-panels>
 
             <ServerDbTable title="RefSeq" db="refseq" :sortBy="sortBy" :facets="facets"
-                :data-table-server-props="dataTableServerProps" @refresh:search="getAllHits">
+                :data-table-server-props="dataTableServerProps">
                 <template #top>
                     <v-toolbar><v-toolbar-title class="text-capitalize">
                             RefSeq
                         </v-toolbar-title><v-spacer></v-spacer>
-
                     </v-toolbar>
                 </template>
                 <template #[`item.accession_in_sys`]="{ item }">

composables/useCsvDownload.ts

@@ -2,31 +2,29 @@ import { ref } from 'vue';
 import Papa from 'papaparse';
 import { saveAs } from "file-saver";
 
-export function useCsvDownload(index: MaybeRef<string>, baseName: MaybeRef<string> = "df"
+export function useCsvDownload(baseName: MaybeRef<string> = "df"
 ) {
   const pending = ref(false)
-  const { search: msSearch, result: msResult } = useMeiliSearch(toValue(index))
+
+  // const { search: msSearch, result: msResult } = useMeiliSearch(toValue(index))
   const filename = ref(`${toValue(baseName)}-data.csv`)
   const downloadCsv = async (
-
+    index: MaybeRef<string>,
     query: MaybeRef<string>,
-    filter: MaybeRef<string>,
-    sortBy: MaybeRef<string[]>,
     params: MaybeRef<Record<string, any>>,
   ) => {
 
 
-    filename.value = `${toValue(baseName)}-${toValue(filter)}.csv`
+    filename.value = `${toValue(baseName)}-${toValue(params).filter}.csv`
     pending.value = true
     try {
-      await msSearch(
-        toValue(query),
-        {
-          ...toValue(params),
-          filter: toValue(filter),
-          sort: toValue(sortBy)
-        })
-      const csvContent = Papa.unparse(toValue(msResult).hits);
+      const { data, error } = await useAsyncMeiliSearch({
+        index: toValue(index),
+        params: toValue(params),
+        query: toValue(query)
+      })
+
+      const csvContent = Papa.unparse(toValue(data).hits);
       // console.log(csvContent)
       const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
       saveAs(blob, `${toValue(filename)}`);