Refactor facet autocomplete

• Better code structure
• Add OR between filters

components/content/SystemDb.vue

@@ -35,7 +35,10 @@ const autocompleteMeiliFacetsProps = ref<AutocompleteMeiliFacetProps>({
         { type: "divider" },
         { title: "PFAM", type: "subheader" },
         { title: 'Acession', value: "PFAM.AC", type: "facet", icon: "" },
-        { title: 'Description', value: "PFAM.DE", type: "facet", icon: "" }
+        { title: 'Description', value: "PFAM.DE", type: "facet", icon: "" },
+
+        { type: "divider" },
+        { title: 'Contributor', value: "contributors", type: "facet", icon: "" },
     ],
     facetDistribution: undefined
 })
@@ -94,7 +97,8 @@ const columnsToDownload = ref(['title', 'doi', 'Sensor', 'Activator', 'Effector'
 
 </script>
 <template>
-    <ServerDbTable title="List Systems" :db="dbName" :sortBy="sortBy" :autocomplete-meili-facets-props="computedAutocompleteMeiliFacetsProps"
+    <ServerDbTable title="List Systems" :db="dbName" :sortBy="sortBy"
+        :autocomplete-meili-facets-props="computedAutocompleteMeiliFacetsProps"
         :data-table-server-props="dataTableServerProps" :columns-to-download="columnsToDownload">
 
 
@@ -108,8 +112,10 @@ const columnsToDownload = ref(['title', 'doi', 'Sensor', 'Activator', 'Effector'
             <ArticleDoi v-if="item?.doi" :doi="item.doi" :abstract="item?.abstract" :divider="false" :enumerate="false" />
         </template>
         <template #[`item.PFAM`]="{ item }">
-
             <pfam-chips v-if="item?.PFAM" :pfams="item.PFAM"></pfam-chips>
         </template>
-    </ServerDbTable>
-</template>
\ No newline at end of file
+        <template #[`item.contributors`]="{ item }">
+            <CollapsibleChips v-if="item?.contributors" :items="item.contributors.map(it => ({ title: it }))">
+            </CollapsibleChips>
+        </template>
+    </ServerDbTable></template>
\ No newline at end of file