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