From 9266cfac3e6050a238229e5fbfe77415438d2eb9 Mon Sep 17 00:00:00 2001
From: Remi  PLANEL <rplanel@pasteur.fr>
Date: Wed, 22 Nov 2023 16:34:59 +0100
Subject: [PATCH] add download btn but need to serialize content

---
 components/content/ListSystems.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/components/content/ListSystems.vue b/components/content/ListSystems.vue
index ed19ba4b..82a224ea 100644
--- a/components/content/ListSystems.vue
+++ b/components/content/ListSystems.vue
@@ -1,5 +1,6 @@
 <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"
-- 
GitLab