display article for list systems

components/content/ListSystems.vue

@@ -3,17 +3,32 @@
 const props = defineProps<{
     systems: any;
 }>();
-
+const itemsPerParge = ref(25)
+const search = ref('')
+const sortBy = ref([{ key: 'system', order: 'asc' }])
 const headers = ref([{
     title: "Systems",
     key: "system"
-}])
+}, { title: "Articles", key: "dois" }
+])
 
 </script>
 <template>
-    <v-card>
-        <v-card-text>
-            <v-data-table items-per-page="5" :headers="headers" :items="props.systems" class="elevation-1"></v-data-table>
-        </v-card-text>
+    <v-card flat color="transparent">
+        <v-card-title>
+            Defense Systems
+            <v-spacer></v-spacer>
+            <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details></v-text-field>
+        </v-card-title>
+        <v-data-table :items-per-page="itemsPerParge" v-model:sort-by="sortBy" :headers="headers" :items="props.systems"
+            :search="search">
+            <template #[`item.system`]="{ item }">
+                <v-chip variant="text" link :to="`/defense-systems/${item.columns.system.toLowerCase()}`">{{
+                    item.columns.system }}</v-chip>
+            </template>
+            <template #[`item.dois`]="{ item }">
+                <ReferencesList :items="item.columns.dois"></ReferencesList>
+            </template>
+        </v-data-table>
     </v-card>
 </template>
\ No newline at end of file

content/3.defense-systems/0.index.md

@@ -8,6 +8,27 @@ layout: article
 
 The knowledge of anti-phage defense systems is ever expanding. The spectacular increase of the number of known systems in the past years suggests that many of them are still to be discovered. As of april 2022, 63 defense systems have been described.
 
+
+::list-systems
+---
+systems:
+    - system: Paris
+      dois: 
+        - 10.1101/2021.01.21.427644
+    - system: AbiE
+      dois: 
+        - 10.1093/nar/gkt1419
+    - system: AVAST
+      dois: 
+        - 10.1126/science.aba0372
+    - system: RM
+      dois:
+        - 10.1093/nar/gku734
+---
+::
+
+
+
 |                                            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **System**                                 | **Article**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
@@ -82,13 +103,7 @@ The knowledge of anti-phage defense systems is ever expanding. The spectacular i
 
 
 
-::list-systems
----
-systems:
-    - system: Paris
-    - system: Abie
----
-::
+
 
 ## References