Merge pull request #82 from SpeciesFileGroup/development

Add DwC download

src/components/Icon/IconDownload.global.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+    />
+  </svg>
+</template>

src/modules/otus/components/DWCDownload.vue

@@ -0,0 +1,30 @@
+<template>
+  <VButton
+    primary
+    class="text-sm flex"
+    @click="download"
+  >
+    <IconDownload class="w-4 h-4 mr-1" />
+    DwC
+  </VButton>
+</template>
+
+<script setup>
+import TaxonWorks from '../services/TaxonWorks'
+import { downloadTextFile } from '../utils/files'
+
+const props = defineProps({
+  otu: {
+    type: Object,
+    required: true
+  }
+})
+
+function download() {
+  TaxonWorks.getDwC(props.otu.id).then(({ data }) => {
+    downloadTextFile(data, 'text/csv', 'dwc_records')
+  })
+}
+
+downloadTextFile
+</script>

src/modules/otus/services/TaxonWorks.js

@@ -64,4 +64,8 @@ export default class TaxonWorks {
       extend: ['depiction']
     })
   }
+
+  static getDwC(otuId) {
+    return makeAPIRequest.get(`/otus/${otuId}/inventory/dwc`)
+  }
 }

src/modules/otus/utils/files.js

@@ -0,0 +1,29 @@
+function downloadTextFile(text, fileType, fileName) {
+  const blob = new Blob([text], { type: fileType })
+  const a = document.createElement('a')
+
+  a.download = fileName
+  a.href = URL.createObjectURL(blob)
+  a.dataset.downloadurl = [fileType, a.download, a.href].join(':')
+  a.style.display = 'none'
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  setTimeout(() => {
+    URL.revokeObjectURL(a.href)
+  }, 1500)
+}
+
+function blobToArrayBuffer(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.addEventListener('loadend', (_) => {
+      resolve(reader.result)
+    })
+    reader.addEventListener('error', reject)
+    reader.readAsArrayBuffer(blob)
+  })
+}
+
+export { blobToArrayBuffer, downloadTextFile }

src/modules/otus/utils/index.js

@@ -1,3 +1,4 @@
+export * from './files'
 export * from './isRankGroup'
 export * from './makeGeoJSONFeature'
 export * from './removeDuplicateShapes'

src/modules/otus/views/Index.vue

@@ -24,7 +24,7 @@
           />
         </div>
 
-        <div class="mt-8 flex justify-between middle">
+        <div class="mt-8 flex justify-between items-end">
           <VSkeleton
             :lines="2"
             class="w-96"
@@ -35,6 +35,12 @@
               :otu-id="otu.id"
             />
           </VSkeleton>
+          <div>
+            <DWCDownload
+              v-if="isReady"
+              :otu="otu"
+            />
+          </div>
         </div>
 
         <TabMenu
@@ -74,6 +80,7 @@ import { useOtuStore } from '../store/store'
 import { useHead } from 'unhead'
 import Breadcrumb from '../components/Breadcrumb/Breadcrumb.vue'
 import TaxaInfo from '../components/TaxaInfo.vue'
+import DWCDownload from '../components/DWCDownload.vue'
 
 //import useChildrenRoutes from '../composables/useChildrenRoutes'