Automatic systems list

Closes #126 (closed)

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" }
-])
 
+function filterOnlyCapsText(value, query, item) {
+    if (value != null && query != null) {
+        if (typeof value === 'string') {
+            return value.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1
+        }
+        if (typeof value == 'object') {
+            if (value?.name) {
+                return value.name.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1
+            }
+        }
+    }
+    return false
+}
 </script>
 <template>
     <v-card flat color="transparent" class="my-5">
         <v-toolbar>
             <v-toolbar-title>Defense Systems</v-toolbar-title>
 
-            <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-text-field v-model="search" density="compact" variant="underlined" prepend-inner-icon="mdi-magnify"
+                label="Search for defense systems" single-line hide-details class="mx-2" clearable></v-text-field>
         </v-toolbar>
-        <v-data-table :items-per-page="itemsPerParge" v-model:sort-by="sortBy" :headers="headers" :items="props.systems"
-            :search="search">
+        <v-data-table :items-per-page="itemsPerParge" v-model:sort-by="sortBy" :headers="props.headers"
+            :custom-filter="filterOnlyCapsText" :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>
+                <v-chip variant="text" link :to="`${item.columns.system.path}`">{{
+                    item.columns.system.name }}</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>