predicted structures use ServerDbTable

components/ServerDbTable.vue

@@ -206,7 +206,8 @@ const operatorItems = ref([
             type: "operator",
             deletable: false
         }
-    }
+    },
+
 ])
 
 const autocompleteItems = computed(() => {
@@ -314,8 +315,6 @@ function runTextSearch() {
             filterOrSearch.value = [item]
         }
         search.value = ""
-        console.log(filterOrSearch.value.length)
-        console.log(filterOrSearch.value)
         searchOrFilter()
     }
 }
@@ -323,32 +322,39 @@ function runTextSearch() {
 </script>
 <template>
     <v-card flat>
-        <v-toolbar>
-            <v-autocomplete ref="autocompleteInput" v-model:search="search" v-model:model-value="filterOrSearch"
-                auto-select-first chips clearable label="Search or 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-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
                         @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-autocomplete>
+            </v-col>
+
         </v-toolbar>
         <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"

components/content/StructureDb.vue

+<script setup lang="ts">
+
+import { useFacetsStore } from '~~/stores/facets'
+const sortBy: Ref<{ key: string, order: string }[]> = ref([{ key: 'system', order: "asc" }])
+const itemValue = ref("id");
+const facets = ref(["system", "completed",
+    "plddts",])
+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" }
+])
+
+</script>
+<template>
+    <ServerDbTable title="Predicted Strucutres" db="structure" :sortBy="sortBy" :headers="computedHeaders"
+        :item-value="itemValue" :facets="facets">
+    </ServerDbTable>
+</template>
\ No newline at end of file

content/5.predicted-structure.md

@@ -3,3 +3,8 @@ layout: db
 navigation: false
 ---
 
+# Predicted Structures
+
+
+::structure-db
+::
\ No newline at end of file