WIP: automatic list

components/content/ListSystems.vue

 <script setup lang="ts">
-
 const props = defineProps<{
-    systems: any;
+    headers: Array<Object>
+    systems: Array<Object>
+
 }>();
 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" }
-])
+// const headers = ref([{
+//     title: "Systems",
+//     key: "system"
+// }, { title: "Articles", key: "doi" }
+// ])
 
 </script>
 <template>
@@ -21,14 +22,14 @@ const headers = ref([{
             <v-text-field v-model="search" density="compact" variant="underlined" append-inner-icon="mdi-magnify"
                 label="Search" single-line hide-details class="mx-2"></v-text-field>
         </v-toolbar>
-        <v-data-table :items-per-page="itemsPerParge" v-model:sort-by="sortBy" :headers="headers" :items="props.systems"
+        <v-data-table :items-per-page="itemsPerParge" v-model:sort-by="sortBy" :headers="props.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 }">
-                <ArticleDoiList :items="item.columns.dois" :divider="false" />
+            <template #[`item.doi`]="{ item }">
+                <ArticleDoiList v-if="item.columns?.doi" :items="[item.columns.doi]" :divider="false" />
             </template>
         </v-data-table>
     </v-card>

content/2.defense-systems/abi2.md

 ---
 title: Abi2
+tableDescription:
+    doi: 10.1016/j.mib.2005.06.006
 ---
 
 The Abi2 system is composed of one protein: Abi_2.

pages/defense-systems.vue

 <script setup lang="ts">
 const { data, error, pending } = await useAsyncData('list-defense-systems', () => queryContent('/defense-systems').find())
-const defaultHeaders = ref([{ title: 'System', key: "title" }])
-console.log(data.value)
+const defaultHeaders = ref([{ title: 'System', key: "system" }])
 const tableDescriptionKey = ref("tableDescription")
-const headers = data.value ? ref(Array.from(data.value.reduce((headerSet, df) => {
-    if (df?.[tableDescriptionKey.value]) {
-        return new Set([...headerSet, ...Object.keys(df[tableDescriptionKey.value])])
+const headers = computed(() => {
+    if (data?.value && data.value?.length > 0) {
+        const uniqHeaders = Array.from(data.value.reduce((headerSet, df) => {
+            if (df?.[tableDescriptionKey.value]) {
+                return new Set([...headerSet, ...Object.keys(df[tableDescriptionKey.value])])
+            }
+            else { return headerSet }
+        }, new Set()))
+        return [...defaultHeaders.value, ...uniqHeaders.map(value => { return { title: value, key: value } })]
     }
-    else { return headerSet }
-}, new Set())).map(value => { return { title: value, key: value } })
+    else {
+        return []
+    }
+})
+const systems = computed(() => {
+    if (data?.value && data.value?.length > 0) {
+        return data.value.map(({ title, tableDescription }) => {
+            return {
+                system: title,
+                ...tableDescription
+            }
+        })
+    } else {
+        return []
+    }
+
+})
+
 
-) : defaultHeaders
 console.log(headers.value)
+console.log(systems.value)
 </script>
 <template>
-    <v-card :loading="pending"></v-card>
+    <v-card>
+        <v-card-title>List systems</v-card-title>
+        <v-card-text>
+            <ListSystems :headers=headers :systems="systems"></ListSystems>
+        </v-card-text>
+    </v-card>
 </template>
\ No newline at end of file