feat: add download links

ICIJ · Oct 25, 2024 · 512f606 · 512f606
1 parent aa7b873
commit 512f606
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/src/components/Document/DocumentActionsGroup/DocumentActionsGroupEntryDownload.vue b/src/components/Document/DocumentActionsGroup/DocumentActionsGroupEntryDownload.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { computed, useTemplateRef, nextTick } from 'vue'
-import { useStore } from 'vuex'
 
 import DocumentActionsGroupEntry from './DocumentActionsGroupEntry'
 
+import { useDocumentDownload } from '@/composables/document-download'
 import DocumentDownloadPopover from '@/components/Document/DocumentDownloadPopover/DocumentDownloadPopover'
 
 const { document } = defineProps({
@@ -28,15 +28,10 @@ const { document } = defineProps({
   }
 })
 
+const { isDownloadAllowed, isRootTooBig, documentFullUrl } = useDocumentDownload(document)
 const elementRef = useTemplateRef('element')
-
-const store = useStore()
-
-const isDownloadAllowed = computed(() => {
-  // Use nullish coalescing operator to allow download if the store/getter is undefined
-  return store?.getters['downloads/isDownloadAllowed'](document) ?? true
-})
-
+const hasDownload = computed(() => isDownloadAllowed.value && !isRootTooBig.value)
+const href = computed(() => (hasDownload.value ? documentFullUrl.value : null))
 const blur = () => nextTick(() => window.document?.activeElement.blur())
 </script>
 
@@ -45,10 +40,12 @@ const blur = () => nextTick(() => window.document?.activeElement.blur())
     <document-actions-group-entry
       ref="element"
       icon="download-simple"
-      :label="$t('documentActionsGroup.download')"
+      download
       hide-tooltip
+      :label="$t('documentActionsGroup.download')"
       :vertical="vertical"
       :disabled="!isDownloadAllowed"
+      :href="href"
       @focus="blur"
     />
     <document-download-popover

diff --git a/src/components/Document/DocumentDownloadPopover/DocumentDownloadPopover.vue b/src/components/Document/DocumentDownloadPopover/DocumentDownloadPopover.vue
@@ -56,6 +56,7 @@ defineExpose({
         :label="$t('documentDownloadPopover.download')"
         icon-left="download-simple"
         class="document-download-popover__body__button"
+        download
       />
       <button-icon
         v-if="hasCleanableContentType"
@@ -64,13 +65,15 @@ defineExpose({
         :label="$t('documentDownloadPopover.downloadWithoutMetadata')"
         variant="outline-action"
         class="document-download-popover__body__button"
+        download
       />
       <button-icon
         icon-left="download-simple"
         :href="document"
         :label="$t('documentDownloadPopover.downloadExtractText')"
         variant="outline-action"
         class="document-download-popover__body__button"
+        download
       />
       <button-icon
         v-if="hasRoot"
@@ -79,6 +82,7 @@ defineExpose({
         :label="$t('documentDownloadPopover.downloadRoot')"
         variant="outline-action"
         class="document-download-popover__body__button"
+        download
       />
       <div class="document-download-popover__body__sections">
         <document-download-popover-section

diff --git a/src/composables/document-download.js b/src/composables/document-download.js
@@ -1,11 +1,13 @@
 import { computed, toRef } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
 import { useCore } from '@/composables/core'
 import settings from '@/utils/settings'
 import byteSize from '@/utils/byteSize'
 
 export function useDocumentDownload(document) {
+  const store = useStore()
   const { core } = useCore()
   const { locale, t } = useI18n()
 
@@ -59,6 +61,11 @@ export function useDocumentDownload(document) {
     return hasRoot.value && rootContentLength.value > maxRootContentLength.value
   })
 
+  const isDownloadAllowed = computed(() => {
+    // Use nullish coalescing operator to allow download if the store/getter is undefined
+    return store?.getters['downloads/isDownloadAllowed'](documentRef.value) ?? true
+  })
+
   const rootContentLength = computed(() => {
     return documentRef.value?.root?.contentLength
   })
@@ -79,6 +86,7 @@ export function useDocumentDownload(document) {
     hasCleanableContentType,
     embeddedDocumentDownloadMaxSize,
     isRootTooBig,
+    isDownloadAllowed,
     rootContentLength,
     maxRootContentLength
   }