Implement report feature suggestions

package.json

@@ -17,7 +17,7 @@
     "test-ct": "playwright test -c playwright-ct.config.ts"
   },
   "dependencies": {
-    "@deltares/fews-pi-requests": "^1.2.7",
+    "@deltares/fews-pi-requests": "^1.2.8",
     "@deltares/fews-ssd-requests": "^1.0.1",
     "@deltares/fews-ssd-webcomponent": "^1.0.2",
     "@deltares/fews-web-oc-charts": "^3.0.3-beta.6",

src/lib/download/downloadFiles.ts

@@ -1,15 +1,9 @@
 import { DocumentFormat } from '@deltares/fews-pi-requests'
-import { toISOString } from '../date'
 
 function downloadWithLink(url: string, fileName: string) {
   const encodedFileName = encodeURIComponent(fileName)
   url = `${url}&downloadAsFile=${encodedFileName}`
-  const link = document.createElement('a')
-  link.href = url
-  link.setAttribute('download', fileName)
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
+  clickDownloadUrl(url, fileName)
 }
 
 async function downloadFileWithFetch(
@@ -25,12 +19,7 @@ async function downloadFileWithFetch(
   })
   if (response.ok) {
     const blob = await response.blob()
-    const link = document.createElement('a')
-    link.href = URL.createObjectURL(blob)
-    link.setAttribute('download', fileName)
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
+    clickDownloadBlob(blob, fileName)
   } else {
     console.error('Error downloading file')
   }
@@ -70,7 +59,7 @@ export async function downloadFileAttachment(
 
 export async function downloadFileWithXhr(
   url: string,
-  fileNameSuffix?: string,
+  fileName: string,
 ): Promise<void> {
   return new Promise((resolve, reject) => {
     const req = new XMLHttpRequest()
@@ -93,24 +82,8 @@ export async function downloadFileWithXhr(
         ?.split('filename=')[1]
         .split(';')[0]
 
-      // For when backend does not set 'Access-Control-Expose-Headers: Content-Disposition'
-      const now = toISOString(new Date())
-        .replaceAll('-', '')
-        .replaceAll(':', '')
-      const fallBackFileName = `${now}${fileNameSuffix ?? '_DATA'}`
-
-      const downloadFileName = headerFileName ?? fallBackFileName
-      const blobUrl = window.URL.createObjectURL(req.response)
-
-      const a = document.createElement('a')
-      a.href = blobUrl
-      a.setAttribute('download', downloadFileName)
-
-      document.body.appendChild(a)
-      a.click()
-
-      a.remove()
-      window.URL.revokeObjectURL(blobUrl)
+      const downloadFileName = headerFileName ?? fileName
+      clickDownloadBlob(req.response, downloadFileName)
 
       resolve()
     }
@@ -125,3 +98,19 @@ export async function downloadFileWithXhr(
     req.send()
   })
 }
+
+export function clickDownloadBlob(blob: Blob, fileName: string) {
+  const blobUrl = window.URL.createObjectURL(blob)
+  clickDownloadUrl(blobUrl, fileName)
+  window.URL.revokeObjectURL(blobUrl)
+}
+
+export function clickDownloadUrl(url: string, fileName: string) {
+  const a = document.createElement('a')
+  a.href = url
+  a.setAttribute('download', fileName)
+
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+}

src/stores/workflows.ts

@@ -10,6 +10,7 @@ import { createTransformRequestFn } from '@/lib/requests/transformRequest'
 import { configManager } from '@/services/application-config'
 import type { BoundingBox } from '@/services/useBoundingBox'
 import type { LngLat } from 'maplibre-gl'
+import { toISOString } from '@/lib/date'
 
 interface WorkflowsState {
   workflowId: string | null
@@ -86,7 +87,13 @@ const useWorkflowsStore = defineStore('workflows', {
           const url = webServiceProvider.processDataUrl(
             completeFilter as ProcessDataFilter,
           )
-          await downloadFileWithXhr(url.toString(), options?.fileName)
+
+          const now = toISOString(new Date())
+            .replaceAll('-', '')
+            .replaceAll(':', '')
+          const fileName = `${now}${options?.fileName ?? '_DATA'}`
+
+          await downloadFileWithXhr(url.toString(), fileName)
         }
       } finally {
         this.numActiveWorkflows--

src/views/ReportsDisplayView.vue

@@ -1,20 +1,21 @@
 <template>
   <div v-if="reports?.length" class="d-flex flex-column h-100">
-    <v-toolbar
-      class="py-1"
-      :title="reports.length === 1 ? reports[0].moduleInstanceId : undefined"
-      density="compact"
-    >
+    <v-toolbar class="py-1" density="compact">
+      <template v-if="reports.length === 1">
+        <div class="ml-5">{{ reportToTitle(reports[0]) }}</div>
+        <v-spacer />
+      </template>
       <v-select
-        v-if="reports.length > 1"
+        v-else
         v-model="selectedReport"
         :items="reports"
         return-object
-        :item-title="(item) => item.moduleInstanceId"
+        :item-title="(item) => reportToTitle(item)"
         :item-value="(item) => item.moduleInstanceId"
         hide-details
         label="Report"
         class="px-2"
+        menu-icon="mdi-chevron-down"
         variant="solo-filled"
         density="compact"
       />
@@ -27,9 +28,11 @@
         hide-details
         label="Analysis time"
         class="pe-2 flex-0-0"
+        menu-icon="mdi-chevron-down"
         variant="solo-filled"
         density="compact"
       />
+      <v-btn @click="downloadFile" icon="mdi-download" />
     </v-toolbar>
     <iframe :key="url" :src="url" class="html-content" />
   </div>
@@ -47,6 +50,7 @@ import {
 import { computed, ref, watch } from 'vue'
 import { configManager } from '@/services/application-config'
 import { filterToParams } from '@deltares/fews-wms-requests'
+import { downloadFileWithXhr } from '@/lib/download'
 
 interface Props {
   topologyNode?: TopologyNode
@@ -104,6 +108,18 @@ function reportItemToId(item: ReportItem) {
 function reportItemToTitle(item: ReportItem) {
   return `${item.timeZero} - ${item.reportId}`
 }
+
+function reportToTitle(item: Report) {
+  return item.moduleInstanceName ?? item.moduleInstanceId
+}
+
+async function downloadFile() {
+  const report = selectedReportItem.value
+  if (!report || !url.value) return
+
+  const fileName = `${report.timeZero}-${report.moduleInstanceId}`
+  downloadFileWithXhr(url.value, fileName)
+}
 </script>
 
 <style scoped>