Add btn to download peaks

client-nuxt/pages/projects/_id/analysis/_analysisId/results/peaks/index.vue

@@ -2,6 +2,7 @@
   <v-card flat color="transparent" class="mt-3">
     <v-card>
       <error-alert v-if="error" :error-message="error"></error-alert>
+
       <Peaks
         v-if="sanitizedPeaks.length > 0"
         :title="titleList"
@@ -11,11 +12,19 @@
         :headers="headers"
         :selected-item="selectedItem"
       />
+      <v-card-actions
+        ><download-csv :data="exportPeak" :name="exportFileName">
+          <v-btn class="mx-2" color="secondary" small fab>
+            <v-icon>mdi-table-arrow-down</v-icon>
+          </v-btn>
+        </download-csv></v-card-actions
+      >
     </v-card>
     <nuxt-child />
   </v-card>
 </template>
 <script>
+import JsonCSV from 'vue-json-csv'
 import ErrorAlert from '@/components/ErrorAlert'
 import Peaks from '~/components/DataTableActions.vue'
 
@@ -23,6 +32,7 @@ export default {
   components: {
     Peaks,
     ErrorAlert,
+    downloadCsv: JsonCSV,
   },
 
   async asyncData({ $axios, params, $auth, route }) {
@@ -78,9 +88,25 @@ export default {
         itemRoute: this.getItemRoute(peak),
       }))
     },
+    exportPeak() {
+      return this.peaks.map(
+        // eslint-disable-next-line camelcase
+        ({ ci_hi, ci_lo, lod, p_value, position, variable_name }) => ({
+          ci_hi,
+          ci_lo,
+          lod,
+          p_value,
+          position,
+          variable_name,
+        })
+      )
+    },
     selectedItem() {
       return parseInt(this.$route.params?.peakId)
     },
+    exportFileName() {
+      return `${this.projectId}-${this.analysisId}-significant-peaks.csv`
+    },
   },
   methods: {
     getItemRoute({ id: peakId }) {