Resolve "Wizzard to create db filters"

Closes #323 (closed)

pages/_predicted-structure-bak.vue

-<script setup lang="ts">
-import { useRuntimeConfig, useFetch, type MaybeRefOrGetter, ref, computed, toValue, type Ref } from '#imports'
-
-import JsonCSV from 'vue-json-csv'
-import { useDisplay } from "vuetify";
-import { useFacetsStore, type Facets } from '~~/stores/facets'
-
-
-const facetStore = useFacetsStore()
-
-const { height } = useDisplay();
-const minTableHeight = ref(400)
-const computedTableHeight = computed(() => {
-    const computedHeight = height.value - 500
-    return computedHeight > minTableHeight.value ? computedHeight : minTableHeight.value
-})
-
-
-// SORTING
-const sortBy: Ref<{ key: string, order: string }[]> = ref([{ key: 'system', order: "asc" }])
-const msSortBy = computed(() => {
-    if (sortBy.value.length > 0) {
-        return sortBy.value.map((curr) => {
-            if (curr?.key && curr?.order) {
-                return `${curr.key}:${curr.order}`
-            }
-            else { return "" }
-        })
-    } else { return [""] }
-})
-
-
-
-const itemValue = ref("id");
-const search: Ref<string> = ref("");
-const filter: Ref<string> = ref('')
-const hitsPerPage: Ref<number> = ref(25)
-const limit: Ref<number> = ref(500000)
-const facets = ref(["system"])
-const page = ref(1)
-const headers: Ref<Object[]> = ref([
-    { title: "System", key: "system" },
-    { title: "Completed", key: "completed" },
-    { title: "Predition type", key: "prediction_type" },
-    { title: "Num of genes", key: "system_number_of_genes" },
-    { title: "pLDDT", key: "plddts" },
-    { title: "Type", key: "type" }
-])
-const {
-    hits: items,
-    pending,
-    totalHits: itemsLength,
-    filterError,
-    facetDistribution
-} = useFetchMsDocument(
-    "structure", search, filter, limit, hitsPerPage, page, facets, msSortBy)
-
-watch(facetDistribution, (facetDistri) => {
-
-    facetStore.setFacets({ facetDistribution: facetDistri, facetStat: undefined })
-})
-
-</script>
-
-<template>
-    <v-card flat>
-        <v-card-text>
-            text here
-        </v-card-text>
-        <v-toolbar color="primary" density="compact">
-            <v-app-bar-nav-icon></v-app-bar-nav-icon>
-            <v-toolbar-title>Predicted Structures summary ({{ itemsLength }})
-            </v-toolbar-title>
-            <JsonCSV :data="items" name="predicted-structures-summary-defense-system.csv">
-                <v-btn disabled icon>
-                    <v-icon icon="md:download"></v-icon>
-                    <v-tooltip activator="parent" location="bottom">Download {{ itemsLength }} entries</v-tooltip>
-                </v-btn>
-            </JsonCSV>
-        </v-toolbar>
-        <v-card-text>
-            text here
-        </v-card-text>
-        <v-col>
-            <v-text-field v-model="search" prepend-inner-icon="mdi-magnify"
-                label="Search for defense systems predicted structures" hide-details class="mx-2"
-                clearable></v-text-field></v-col>
-        <v-col cols="auto">
-            <v-text-field v-model="filter" prepend-inner-icon="mdi-magnify" label="Filter" hide-details="auto" class="mx-2"
-                clearable :error-messages="filterError"></v-text-field></v-col>
-        <v-data-table-server v-model:page="page" v-model:items-per-page="hitsPerPage" v-model:sortBy="sortBy"
-            ref="datatable" fixed-header :loading="pending" :headers="headers" :items="items" :item-value="itemValue"
-            :items-length="itemsLength" multi-sort density="compact" :height="computedTableHeight" class="elevation-1 mt-2">
-            <!-- <template v-if="refseqData?.length >= 10000" #top>
-        <v-alert type="warning" variant="tonal" title="Results table"
-          text="Results won't be displayed since there is over 10000 hits"></v-alert>
-      </template> -->
-
-            <template #[`item.completed`]="{ item }">
-                <v-icon v-if="item.completed" color="success" icon="md:check"></v-icon>
-                <v-icon v-else color="warning" icon="md:dangerous"></v-icon>
-            </template>
-        </v-data-table-server>
-    </v-card>
-</template>
\ No newline at end of file