Skip to content
Snippets Groups Projects
Commit 024b5d65 authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

search and filter 2 input different

parent 363df2aa
No related branches found
No related tags found
2 merge requests!131Merge relevant Abstract and references,!123Resolve "Wizzard to create db filters"
Pipeline #117398 failed
This commit is part of merge request !123. Comments created here will be created in the context of that merge request.
......@@ -137,7 +137,8 @@ const msError = computed(() => {
async function searchOrFilter() {
try {
loading.value = true
const q = queryInputValue.value === null ? "" : queryInputValue.value
// const q = queryInputValue.value === null ? "" : queryInputValue.value
const q = search.value
await msSearch(q, { ...reactiveParams, filter: msFilter.value, sort: msSortBy.value })
} catch (error: any) {
filterError.value = error
......@@ -188,10 +189,11 @@ watch(filterInputValues, (newSoF) => {
}
})
watch(queryInputValue, (newQuery) => {
searchOrFilter()
watch(search, () => { searchOrFilter() })
// watch(queryInputValue, (newQuery) => {
// searchOrFilter()
})
// })
const filterStep = computed(() => {
return filterInputValues.value !== null && filterInputValues.value.length > 0 ? filterInputValues.value?.length % 3 : null
......@@ -322,40 +324,41 @@ function runTextSearch() {
</script>
<template>
<v-card flat>
<v-toolbar floating color="transparent">
<v-col cols="5">
<v-text-field label="Search..." hide-details prepend-inner-icon="mdi-magnify" single-line></v-text-field>
</v-col>
<v-col>
<v-autocomplete ref="autocompleteInput" hide-details single-line v-model:search="search"
v-model:model-value="filterOrSearch" auto-select-first chips clearable label="Filter results..."
:items="autocompleteItems" item-value="value" item-title="title" multiple return-object
append-inner-icon="md:search" @click:appendInner="searchOrFilter" @click:clear="clearFilterOrSearch"
@update:modelValue="() => clearSearch()">
<template #chip="{ props, item, index }">
<v-chip v-bind="props" :text="item.raw.title" :closable="item.props.deletable"
@click:close="item.props.type === 'text' ? deleteTextFilter(index) : deleteOneFilter(index)"></v-chip>
<!-- <v-chip v-if="(index + 1) % 3 === 0" v-bind="props" :text="item.raw.title" closable
<v-card-text>
<v-row>
<v-col cols="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-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"
@click:appendInner="searchOrFilter" @click:clear="clearFilterOrSearch"
@update:modelValue="() => clearSearch()">
<template #chip="{ props, item, index }">
<v-chip v-bind="props" :text="item.raw.title" :closable="item.props.deletable"
@click:close="item.props.type === 'text' ? deleteTextFilter(index) : deleteOneFilter(index)"></v-chip>
<!-- <v-chip v-if="(index + 1) % 3 === 0" v-bind="props" :text="item.raw.title" closable
@click:close="deleteOneFilter(index)"></v-chip>
<v-chip v-else v-bind="props" :text="item.raw.title"></v-chip> -->
</template>
<template #item="{ props, item }">
<v-list-item v-bind="{ ...props, active: false, onClick: () => selectItem(item) }"
:title="item.title" :subtitle="item.raw?.count ? item.raw.count : ''" :value="props.value">
</v-list-item>
</template>
<!-- <template #no-data></template>
</template>
<template #item="{ props, item }">
<v-list-item v-bind="{ ...props, active: false, onClick: () => selectItem(item) }"
:title="item.title" :subtitle="item.raw?.count ? item.raw.count : ''" :value="props.value">
</v-list-item>
</template>
<!-- <template #no-data></template>
<template #prepend-item>
<v-list-item v-if="canAddTextSearch" :title="`Text search: ${search}`" @click="runTextSearch"> </v-list-item>
</template> -->
</v-autocomplete>
</v-col>
</v-toolbar>
</v-autocomplete>
</v-col>
</v-row>
</v-card-text>
<v-data-table-server v-if="!msError" v-model:page="reactiveParams.page"
v-model:items-per-page="reactiveParams.hitsPerPage" v-model:sortBy="sortByRef" fixed-header :loading="loading"
:headers="headers" :items="msResult?.hits ?? []" :items-length="msResult?.totalHits ?? 0"
......
......@@ -10,7 +10,8 @@ const facetStore = useFacetsStore()
const sortBy: Ref<{ key: string, order: string }[]> = ref([{ key: 'type', order: "asc" }])
const itemValue = ref("id");
const { width } = useDisplay();
const distriTaxoFullscreen = ref(false)
const distriSystemFullscreen = ref(false)
const facets = ref([
"type",
"Superkingdom",
......@@ -134,27 +135,34 @@ function capitalize([first, ...rest]) {
</script>
<template>
<v-row>
<v-col cols="6">
<v-card flat class="my-3">
<v-card-title> Systems Distribution</v-card-title>
<v-card-text>
<PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
</v-card-text>
</v-card>
</v-col>
<v-col cols="6">
<v-card flat :loading="pending">
<v-card-title> Taxonomic Distribution</v-card-title>
<v-card-text>
<v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact"
label="Select taxonomic rank"></v-select>
<PlotFigure defer :options="unref(computedDistriTaxoOptions)"></PlotFigure>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-card flat class="mb-2">
<v-row align="start" class="mb-2">
<v-col :cols="distriSystemFullscreen ? 12 : 6" :class="distriTaxoFullscreen ? 'd-none' : null">
<v-card flat class="my-3">
<v-card-title> Systems Distribution <v-btn variant="plain"
:icon="distriSystemFullscreen ? 'md:fullscreen_exit' : 'md:fullscreen'"
@click="distriSystemFullscreen = !distriSystemFullscreen"></v-btn></v-card-title>
<v-card-text>
<PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
</v-card-text>
</v-card>
</v-col>
<v-col :cols="distriTaxoFullscreen ? 12 : 6" :class="distriSystemFullscreen ? 'd-none' : null">
<v-card flat>
<v-card-title> Taxonomic Distribution <v-btn variant="plain"
:icon="distriTaxoFullscreen ? 'md:fullscreen_exit' : 'md:fullscreen'"
@click="distriTaxoFullscreen = !distriTaxoFullscreen"></v-btn></v-card-title>
<v-card-text>
<v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact"
label="Select taxonomic rank"></v-select>
<PlotFigure defer :options="unref(computedDistriTaxoOptions)"></PlotFigure>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-card>
<ServerDbTable title="RefSeq" db="refseq" :sortBy="sortBy" :headers="computedHeaders" :item-value="itemValue"
:facets="facets">
</ServerDbTable>
......
......@@ -5,7 +5,6 @@ navigation: false
# Refseq
::refseq-db
......
......@@ -3,7 +3,6 @@ layout: db
navigation: false
---
# Predicted Structures
::structure-db
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment