Documents: Fix prevent empty page load for non-previewable document links - refs #3540

assets/vue/components/documents/DocumentEntry.vue

@@ -1,6 +1,7 @@
 <template>
   <div v-if="isFile">
     <BaseAppLink
+      v-if="isPreviewable"
       :data-type="dataType"
       :url="data.contentUrl"
       class="flex align-center"
@@ -12,6 +13,18 @@
       />
       {{ data.title }}
     </BaseAppLink>
+    <BaseAppLink
+      v-else
+      :data-type="dataType"
+      :url="data.contentUrl"
+      class="flex align-center"
+    >
+      <ResourceIcon
+        :resource-data="data"
+        class="mr-2"
+      />
+      {{ data.title }}
+    </BaseAppLink>
   </div>
   <div v-else>
     <BaseAppLink
@@ -60,7 +73,7 @@ const dataType = computed(() => {
     return "video"
   }
   if (isAudio(props.data)) {
-    return "video"
+    return "audio"
   }
 
   return "iframe"
@@ -69,4 +82,8 @@ const dataType = computed(() => {
 const isFile = computed(() => {
   return props.data && utilsIsFile(props.data)
 })
+
+const isPreviewable = computed(() => {
+  return useFileUtils().isPreviewable(props.data)
+})
 </script>

assets/vue/composables/fileUtils.js

@@ -1,4 +1,8 @@
 export function useFileUtils() {
+  const isFile = (fileData) => {
+    return fileData.resourceNode && fileData.resourceNode.firstResourceFile
+  }
+
   const isImage = (fileData) => {
     return isFile(fileData) && fileData.resourceNode.firstResourceFile.image
   }
@@ -21,8 +25,9 @@ export function useFileUtils() {
     return mimeType.split("/")[1].toLowerCase() === "html"
   }
 
-  const isFile = (fileData) => {
-    return fileData.resourceNode && fileData.resourceNode.firstResourceFile
+  const isPreviewable = (fileData) => {
+    const mimeType = fileData.resourceNode.firstResourceFile.mimeType.toLowerCase()
+    return isImage(fileData) || isVideo(fileData) || isAudio(fileData) || mimeType === "application/pdf"
   }
 
   return {
@@ -31,5 +36,6 @@ export function useFileUtils() {
     isVideo,
     isAudio,
     isHtml,
+    isPreviewable,
   }
 }