Draft: Resolve "Download button for the table in list of defense systems"

Closes #150 (closed)

components/content/ListSystems.vue

 <script setup lang="ts">
 import { usePfamStore } from "@/stores/pfam";
+import JsonCSV from 'vue-json-csv';
 
 export interface Props {
   headers: Array<Object>;
@@ -16,6 +17,7 @@ const search = ref("");
 const sortBy = ref([{ key: "system", order: "asc" }]);
 const expanded = ref([]);
 
+
 function filterOnlyCapsText(value, query, item) {
   if (value != null && query != null) {
     if (typeof value === "string") {
@@ -44,6 +46,12 @@ onMounted(() => {
 
       <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>
+      <JsonCSV :data="props.systems" name="defense-systems.csv">
+        <v-btn icon>
+          <v-icon icon="md:download"></v-icon>
+          <v-tooltip activator="parent" location="bottom">Download {{ itemsLength }} entries</v-tooltip>
+        </v-btn>
+      </JsonCSV>
     </v-toolbar>
     <v-data-table-virtual fixed-header :height="height" :items-per-page="itemsPerParge" v-model:sort-by="sortBy"
       :headers="props.headers" density="compact" :custom-filter="filterOnlyCapsText" :items="props.systems"