Update systemDb to work with new serverDbTable api

components/content/SystemDb.vue

 <script setup lang="ts">
-import type { SortItem } from "@/components/ServerDbTable.vue"
+import type { SortItem, AutocompleteMeiliFacetProps } from "@/components/ServerDbTable.vue"
 import { ServerDbTable } from "#components"
 const sortBy: Ref<SortItem[]> = ref([{ key: 'title', order: "asc" }])
 const itemValue = ref("title");
-const facets: Ref<string[]> = ref(["title", "Sensor", "Effector", "Activator", "PFAM.AC", "PFAM.DE"])
+const dbName = ref("systems")
+
+onBeforeMount(async () => {
+    const { data } = await useAsyncMeiliSearch({
+        index: toValue(dbName), query: "", params: {
+            facets: ["*"],
+            filter: [],
+            page: 1,
+            hitsPerPage: 25,
+        }
+    })
+
+    autocompleteMeiliFacetsProps.value.facetDistribution = toValue(data)?.facetDistribution
+
+})
+
+const autocompleteMeiliFacetsProps = ref<AutocompleteMeiliFacetProps>({
+    db: toValue(dbName),
+    facets: [
+        { title: "Defense System", type: "subheader" },
+        { title: 'System', value: "title", type: "facet", icon: "" },
+
+        { type: "divider" },
+        { title: "Mechanism", type: "subheader" },
+        { title: 'Sensor', value: "Sensor", type: "facet", icon: "" },
+        { title: 'Effector', value: "Effector", type: "facet", icon: "" },
+        { title: 'Activator', value: "Activator", type: "facet", icon: "" },
+
+
+        { type: "divider" },
+        { title: "PFAM", type: "subheader" },
+        { title: 'Acession', value: "PFAM.AC", type: "facet", icon: "" },
+        { title: 'Description', value: "PFAM.DE", type: "facet", icon: "" }
+    ],
+    facetDistribution: undefined
+})
+
+
+const computedAutocompleteMeiliFacetsProps = computed(() => {
+    const toValFacetDistribution = toValue(autocompleteMeiliFacetsProps).facetDistribution
+    const toValFacets = toValue(autocompleteMeiliFacetsProps).facets
+    if (toValFacetDistribution !== undefined && toValFacets !== undefined) {
+        return {
+            ...toValue(autocompleteMeiliFacetsProps), facets: toValFacets.map(facet => {
+                if (facet.type === "facet") {
+                    const count = toValFacetDistribution?.[facet.value] ? Object.keys(toValFacetDistribution[facet.value]).length : undefined
+
+                    return count ? { ...facet, count } : { ...facet }
+                }
+                else {
+                    return { ...facet }
+                }
+            })
+        }
+    }
+    else {
+        return toValue(autocompleteMeiliFacetsProps)
+    }
+
+
+})
+
 const headers: Ref<Object[]> = ref([
     { title: "System", key: "title", removable: false },
     { title: "Article", key: "doi", removable: false },
@@ -16,7 +77,6 @@ const headers: Ref<Object[]> = ref([
 
 
 ])
-const { search: msSearch, result: msResult } = useMeiliSearch('systems')
 
 const defaultDataTableServerProps = ref({
     showExpand: false
@@ -34,7 +94,7 @@ const columnsToDownload = ref(['title', 'doi', 'Sensor', 'Activator', 'Effector'
 
 </script>
 <template>
-    <ServerDbTable title="List Systems" db="systems" :sortBy="sortBy" :facets="facets"
+    <ServerDbTable title="List Systems" :db="dbName" :sortBy="sortBy" :autocomplete-meili-facets-props="computedAutocompleteMeiliFacetsProps"
         :data-table-server-props="dataTableServerProps" :columns-to-download="columnsToDownload">