#140: Fixed a bug that hindered download of large amounts of study data

Dockerfile

@@ -15,6 +15,6 @@ COPY --from=build-stage /app/dist /usr/share/nginx/html
 COPY docker/nginx/*.conf.template /etc/nginx/templates/
 EXPOSE 80
 
-ENV MORE_BACKEND_URL=https://studymanager.more.redlink.io/
+ENV VITE_MORE_BACKEND_URL=https://studymanager.more.redlink.io/
 
 CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -80,6 +80,10 @@ Make sure that the enum structure within `openapi/StudyManagerApi.yml` is
 Otherwise, the generated enums will be duplicated, leading to errors.
 
 ## Testing Environment with Vitest
+
+To test the frontend with a deployed backend server, you have to set environment variable `VITE_MORE_BACKEND_URL` to the desired backend.
+For testing with a local backend use `npm run dev:local`
+
 Run
 
 ```

docker/nginx/default.conf.template

@@ -21,13 +21,13 @@ server {
 
     # Proxy API and other backend services
     location /api {
-        proxy_pass ${MORE_BACKEND_URL}/api;
+        proxy_pass ${VITE_MORE_BACKEND_URL}/api;
     }
     location /login {
-        proxy_pass ${MORE_BACKEND_URL}/login;
+        proxy_pass ${VITE_MORE_BACKEND_URL}/login;
     }
     location /logout {
-        proxy_pass ${MORE_BACKEND_URL}/logout;
+        proxy_pass ${VITE_MORE_BACKEND_URL}/logout;
     }
 
 }

eslint.config.mjs

@@ -23,6 +23,7 @@ export default tseslint.config(
       'docs',
       'src/generated-sources',
       '**/*.gitignore',
+      'vite.config.ts',
     ],
   },
   {

src/main.ts

@@ -74,9 +74,9 @@ const uiConfig = await uiConfigApi
     return {
       title: 'Unknown Legacy Backend',
       auth: {
-        server: 'https://auth.more.redlink.io',
-        realm: 'Auth-Client-Test',
-        clientId: 'oauth2-pkce-client',
+        server: 'https://auth.more.redlink.io/',
+        realm: 'UMM',
+        clientId: 'oauth2-umm-client',
       },
     } as FrontendConfiguration;
   });
@@ -88,7 +88,7 @@ const authService = new AuthService({
 });
 const loggedIn = await authService.init();
 if (!loggedIn) {
-  window.location.reload();
+  // window.location.reload();
 }
 
 axios.interceptors.request.use(

src/stores/studyStore.ts

@@ -8,7 +8,7 @@
  */
 import { computed, ComputedRef, ref, Ref } from 'vue';
 import { defineStore } from 'pinia';
-import { AuditLogMetadata, AuditLogEntry, Study, StudyRole, StudyStatus, DataExportInner } from '@gs';
+import { AuditLogEntry, AuditLogMetadata, DataExportInner, Study, StudyRole, StudyStatus } from '@gs';
 import { useAuditLogApi, useImportExportApi, useStudiesApi } from '../composable/useApi';
 import { AxiosError, AxiosResponse } from 'axios';
 import { useErrorHandling } from '../composable/useErrorHandling';
@@ -164,25 +164,35 @@ export const useStudyStore = defineStore('study', () => {
       )
       .then(async (rs) => {
         if (rs && rs?.data?.token) {
-          await importExportApi.exportStudyData(
-            studyId,
-            rs.data.token,
-            studyGroupId,
-            participantId,
-            observationId,
-            from,
-            to
-          ).then((response) => {
-            window.open(response.headers.location);
-            const filename: string = 'study_data_' + studyId + '.json';
-            downloadJSON(filename, response.data);
+          await importExportApi
+            .exportStudyData(
+              studyId,
+              rs.data.token,
+              studyGroupId,
+              participantId,
+              observationId,
+              from,
+              to,
+              { responseType: 'blob' },
+            )
+            .then((response) => {
+              const blob = response.data as unknown as Blob;
 
-          }).catch((e: AxiosError) => {
-            handleIndividualError(
-              e,
-              'cannot export data despite of existing download token',
-            );
-          } );
+              const url = URL.createObjectURL(blob);
+              const link = document.createElement('a');
+              link.href = url;
+              link.download = `study_data_${studyId}.json`;
+              document.body.appendChild(link);
+              link.click();
+              document.body.removeChild(link);
+              URL.revokeObjectURL(url);
+            })
+            .catch((e: AxiosError) => {
+              handleIndividualError(
+                e,
+                'cannot export data despite of existing download token',
+              );
+            });
         }
       })
       .catch((e: AxiosError) => {
@@ -194,11 +204,12 @@ export const useStudyStore = defineStore('study', () => {
   }
 
   async function exportAuditLog(studyId: number): Promise<void> {
-    await auditLogApi.exportAuditLog(studyId)
-      .then((response:AxiosResponse<AuditLogEntry[]>) => {
+    await auditLogApi
+      .exportAuditLog(studyId)
+      .then((response: AxiosResponse<AuditLogEntry[]>) => {
         window.open(response.headers.location);
         const filename: string = `study_auditlog_${studyId}.json`;
-        downloadJSON(filename, response.data)
+        downloadJSON(filename, response.data);
       })
       .catch((e: AxiosError) => {
         handleIndividualError(
@@ -225,8 +236,9 @@ export const useStudyStore = defineStore('study', () => {
   }
 
   async function getAuditLogMetadata(studyId: number): Promise<void> {
-    auditLogMetadata.value = await auditLogApi.getAuditLogMetadata(studyId)
-      .then((response: AxiosResponse) => response.data)
+    auditLogMetadata.value = await auditLogApi
+      .getAuditLogMetadata(studyId)
+      .then((response: AxiosResponse) => response.data);
   }
 
   // Getters
@@ -257,6 +269,6 @@ export const useStudyStore = defineStore('study', () => {
     auditLogMetadata,
     auditLogEntries,
     getAuditLogMetadata,
-    exportAuditLog
+    exportAuditLog,
   };
 });

vite.config.ts

@@ -1,49 +1,48 @@
 /// <reference types="vitest" />
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 
-
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  build: {
-    //TODO maybe remove on cleanup session
-    target: 'esnext',
-  },
-  define: {
-    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
-    __BUILD_DATE__: JSON.stringify(new Date().toISOString()),
-    __BUILD_BRANCH__: JSON.stringify(process.env.VITE_GIT_BRANCH),
-    __BUILD_REVISION__: JSON.stringify(process.env.VITE_GIT_REVISION),
-  },
-  resolve: {
-    alias: {
-      '@gs': resolve(__dirname, './src/generated-sources'),
-    }
-  },
-  server: {
-    port: 3000,
-    proxy: {
-      '/api': {
-        target: process.env.VITE_LOCAL_BACKEND
-          ? 'http://localhost:8080/api'
-          : 'https://studymanager.platform-test.more.redlink.io/api',
-        changeOrigin: true,
-        secure: false,
-        rewrite: (path) => {
-          return path.replace(/^\/api/, '');
-        },
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+  return {
+    plugins: [vue()],
+    build: {
+      //TODO maybe remove on cleanup session
+      target: 'esnext',
+    },
+    define: {
+      __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
+      __BUILD_DATE__: JSON.stringify(new Date().toISOString()),
+      __BUILD_BRANCH__: JSON.stringify(process.env.VITE_GIT_BRANCH),
+      __BUILD_REVISION__: JSON.stringify(process.env.VITE_GIT_REVISION),
+    },
+    resolve: {
+      alias: {
+        '@gs': resolve(__dirname, './src/generated-sources'),
       },
     },
-  },
-  test: {
-    include: ['tests/**/*.spec.ts'],
-    environment: 'jsdom',
-    coverage: {
-      provider: 'v8',
-      reportsDirectory: 'tests/coverage',
-      exclude: ['src/generated-sources/**'],
+    server: {
+      port: 3000,
+      proxy: {
+        '/api': {
+          target: process.env.VITE_LOCAL_BACKEND
+            ? 'http://localhost:8080/api'
+            : env.VITE_MORE_BACKEND_URL,
+          changeOrigin: true,
+          secure: false,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        },
+      },
+      watch: {
+        ignored: [
+          '**/tests/coverage/**',
+          '**/node_modules/**',
+          '**/dist/**',
+          '**/src/generated/**', '**/src/generated-sources/**', '**/openapi/**'
+        ],
+      },
     },
-  },
+  };
 });

vitest.config.ts

@@ -0,0 +1,22 @@
+// vitest.config.ts
+import { defineConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@gs': resolve(__dirname, './src/generated-sources'),
+    },
+  },
+  test: {
+    include: ['tests/**/*.spec.ts'],
+    environment: 'jsdom',
+    coverage: {
+      provider: 'v8',
+      reportsDirectory: 'tests/coverage',
+      exclude: ['src/generated-sources/**'],
+    },
+  },
+});