update countries UI

biogenome-client/src/components/blocks/TableBlock.vue

@@ -86,7 +86,7 @@ const debouncedUpdateSearch = debounce(async (filter: string) => {
     itemStore.stores[model.value].searchForm.filter = filter;
     itemStore.resetPagination();
     await itemStore.fetchItems();
-}, 300);
+}, 200);
 
 
 function debounce(fn: any, delay: number) {

biogenome-client/src/components/common/PageHeader.vue

@@ -1,17 +1,15 @@
 <template>
-    <div class="row align-end justify-space-between">
-        <div class="flex">
-            <h1 v-if="title" class="va-h1">{{ title[mappedLocale] }}</h1>
-            <p v-if="description" style="margin-bottom: 6px" class="va-text-secondary">{{
-                description[mappedLocale] }}</p>
-        </div>
-    </div>
+
+    <h1 v-if="title" class="va-h1">{{ title[mappedLocale] }}</h1>
+    <p v-if="description" style="padding-bottom: 12px" class="va-text-secondary">{{
+        description[mappedLocale] }}</p>
+
 </template>
 <script setup lang="ts">
 import { LangOption } from '../../data/types'
 import { useI18n } from 'vue-i18n'
 
-const { t, locale } = useI18n()
+const { locale } = useI18n()
 
 const mappedLocale = locale.value as 'gb' | 'es-ct'
 

biogenome-client/src/components/inputs/TaxonSearchSelect.vue

@@ -0,0 +1,53 @@
+<template>
+    <VaSelect @click="emits('inputClicked')" :loading="isLoading" hideSelected dropdownIcon="search" searchable
+        highlight-matched-text :textBy="(v: TreeNode) => `${v.name} (${v.rank})`" trackBy="taxid"
+        @update:search="debouncedUpdateSearch" v-model="taxon" :searchPlaceholderText="t('taxon.search.placeholder')"
+        :placeholder="t('taxon.search.placeholder')" :noOptionsText="t('taxon.search.noOptions')" :options="options">
+    </VaSelect>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n'
+import { TreeNode } from '../../data/types';
+import TaxonService from '../../services/clients/TaxonService';
+import { AxiosError } from 'axios';
+
+const props = defineProps<{
+    currentTaxon: TreeNode | null,
+    isLoading?: boolean
+}>()
+
+const emits = defineEmits(['updateTaxon', 'inputClicked'])
+
+const { t } = useI18n()
+const taxon = computed({
+    get() {
+        return props.currentTaxon
+    }, set(taxon: TreeNode) {
+        emits('updateTaxon', taxon)
+    }
+})
+
+const options = ref<TreeNode[]>([])
+
+const debouncedUpdateSearch = debounce(async (filter: string) => {
+    if (!filter && filter.length <= 1) return
+    try {
+        const { data } = await TaxonService.getTaxons({ filter: filter })
+        options.value = [...data.data]
+    } catch (error) {
+        console.log(error)
+        const axiosError = error as AxiosError
+    }
+}, 300);
+
+function debounce(fn: any, delay: number) {
+    let timeoutId: any;
+    return function (...args: any) {
+        if (timeoutId) clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            fn(...args);
+        }, delay);
+    };
+}
+</script>

biogenome-client/src/components/maps/LeafletMap.vue

@@ -1,5 +1,4 @@
 <template>
-
   <div class="container">
     <div class="controls">
       <div class="row justify-space-between align-center">

biogenome-client/src/pages/common/Items.vue

@@ -1,12 +1,8 @@
 <template>
     <div v-if="config">
-        <div class="row align-end justify-space-between">
-            <div class="flex">
-                <h1 v-if="config.title" class="va-h1">{{ config.title[locale] }}</h1>
-                <p v-if="config.description" style="margin-bottom: 6px" class="va-text-secondary">{{
-        config.description[locale] }}</p>
-            </div>
-        </div>
+        <h1 v-if="config.title" class="va-h1">{{ config.title[locale] }}</h1>
+        <p v-if="config.description" style="margin-bottom: 6px" class="va-text-secondary">{{
+            config.description[locale] }}</p>
     </div>
     <FiltersBlock :hasCharts="charts.length > 0" />
     <VaCard outlined>
@@ -21,7 +17,6 @@
 import { useI18n } from 'vue-i18n'
 import { computed, ref, watchEffect } from 'vue'
 import { InfoBlock, ModelConfig } from '../../data/types'
-import general from '../../../configs/general.json'
 import chartsConfig from '../../../configs/charts.json'
 import { useRoute } from 'vue-router'
 import { useItemStore } from '../../stores/items-store'
@@ -34,31 +29,32 @@ const props = defineProps<{
     model?: keyof typeof chartsConfig
 }>()
 
-const { t, locale } = useI18n()
+const { locale } = useI18n()
 const route = useRoute()
 const itemStore = useItemStore()
-const isLoading = ref(false)
 
 watchEffect(() => {
     const path = route.fullPath
-    if (!path.includes('taxonomy')) {
-        itemStore.parentTaxon = ""
-    }
-    if (!path.includes('countries')) {
-        itemStore.country = ""
+
+    const conditions = {
+        parentTaxon: path.includes('taxonomy') || path.includes('countries'),
+        country: path.includes('countries')
     }
+
+    Object.keys(conditions).forEach(key => {
+        const field = key as keyof typeof conditions
+        if (!conditions[field]) {
+            itemStore[field] = ""
+        }
+    })
 })
+
 const currentModel = computed(() => {
     return props.model || route.name as keyof typeof chartsConfig
 })
 
 const charts = computed(() => chartsConfig[currentModel.value] ? chartsConfig[currentModel.value] as InfoBlock[] : [])
 
-const isGoaTActive = computed(() => {
-    return currentModel.value === 'organisms' && general.goat
-})
-
-
 watchEffect(async () => {
     itemStore.currentModel = currentModel.value
     await itemStore.fetchItems()

biogenome-client/src/pages/dashboard/DashboardPage.vue

@@ -1,6 +1,6 @@
 <template>
+  <PageHeader :title="(dashboardInfo.title as LangOption)" :description="(dashboardInfo.description as LangOption)" />
   <div class="dashboard">
-    <PageHeader :title="(dashboardInfo.title as LangOption)" :description="(dashboardInfo.description as LangOption)" />
     <StatsBlock />
     <ChartsBlock v-if="configCharts.length" :charts="configCharts" />
   </div>