feat(datatrakWeb): RN-1407: PDF export of survey responses

packages/datatrak-web-server/src/app/createApp.ts

@@ -58,6 +58,8 @@ import {
   UserRoute,
   ResubmitSurveyResponseRequest,
   ResubmitSurveyResponseRoute,
+  ExportSurveyResponseRequest,
+  ExportSurveyResponseRoute,
 } from '../routes';
 import { attachAccessPolicy } from './middleware';
 import { API_CLIENT_PERMISSIONS } from '../constants';
@@ -110,6 +112,10 @@ export async function createApp() {
       handleWith(ResubmitSurveyResponseRoute),
     )
     .post<GenerateLoginTokenRequest>('generateLoginToken', handleWith(GenerateLoginTokenRoute))
+    .post<ExportSurveyResponseRequest>(
+      'export/:surveyResponseId',
+      handleWith(ExportSurveyResponseRoute),
+    )
     // Forward auth requests to web-config
     .use('signup', forwardRequest(WEB_CONFIG_API_URL, { authHandlerProvider }))
     .use('resendEmail', forwardRequest(WEB_CONFIG_API_URL, { authHandlerProvider }))

packages/datatrak-web-server/src/routes/ExportSurveyResponseRoute.ts

@@ -0,0 +1,49 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ *
+ */
+
+import { Request } from 'express';
+import { Route } from '@tupaia/server-boilerplate';
+import { downloadPageAsPDF } from '@tupaia/server-utils';
+
+export type ExportSurveyResponseRequest = Request<
+  {
+    surveyResponseId: string;
+  },
+  {
+    contents: Buffer;
+    type: string;
+  },
+  {
+    baseUrl: string;
+    cookieDomain: string;
+    locale: string;
+    timezone: string;
+  },
+  Record<string, unknown>
+>;
+
+export class ExportSurveyResponseRoute extends Route<ExportSurveyResponseRequest> {
+  protected type = 'download' as const;
+
+  public async buildResponse() {
+    const { surveyResponseId } = this.req.params;
+    const { baseUrl, cookieDomain, locale, timezone } = this.req.body;
+    const { cookie } = this.req.headers;
+
+    if (!cookie) {
+      throw new Error(`Must have a valid session to export a dashboard`);
+    }
+
+    const pdfPageUrl = `${baseUrl}/export/${surveyResponseId}?locale=${locale}`;
+
+    const buffer = await downloadPageAsPDF(pdfPageUrl, cookie, cookieDomain, false, true, timezone);
+
+    return {
+      contents: buffer,
+      type: 'application/pdf',
+    };
+  }
+}

packages/datatrak-web-server/src/routes/SingleSurveyResponseRoute.ts

@@ -20,6 +20,7 @@ const DEFAULT_FIELDS = [
   'assessor_name',
   'country.name',
   'data_time',
+  'end_time',
   'entity.name',
   'entity.id',
   'id',

packages/datatrak-web-server/src/routes/SurveyResponsesRoute.ts

@@ -1,13 +1,7 @@
 import { Request } from 'express';
 import camelcaseKeys from 'camelcase-keys';
 import { Route } from '@tupaia/server-boilerplate';
-import {
-  DatatrakWebSurveyResponsesRequest,
-  SurveyResponse,
-  Country,
-  Entity,
-  Survey,
-} from '@tupaia/types';
+import { DatatrakWebSurveyResponsesRequest } from '@tupaia/types';
 
 export type SurveyResponsesRequest = Request<
   DatatrakWebSurveyResponsesRequest.Params,
@@ -16,16 +10,6 @@ export type SurveyResponsesRequest = Request<
   DatatrakWebSurveyResponsesRequest.ReqQuery
 >;
 
-type SurveyResponseT = Record<string, any> & {
-  assessor_name: SurveyResponse['assessor_name'];
-  'country.name': Country['name'];
-  data_time: Date;
-  'entity.name': Entity['name'];
-  id: SurveyResponse['id'];
-  'survey.name': Survey['name'];
-  'survey.project_id': Survey['project_id'];
-};
-
 const DEFAULT_FIELDS = [
   'assessor_name',
   'country.name',

packages/datatrak-web-server/src/routes/index.ts

@@ -32,3 +32,7 @@ export {
   PermissionGroupUsersRequest,
   PermissionGroupUsersRoute,
 } from './PermissionGroupUsersRoute';
+export {
+  ExportSurveyResponseRequest,
+  ExportSurveyResponseRoute,
+} from './ExportSurveyResponseRoute';

packages/datatrak-web/src/api/mutations/index.ts

@@ -15,3 +15,4 @@ export * from './useExportSurveyResponses';
 export { useTupaiaRedirect } from './useTupaiaRedirect';
 export { useCreateTask } from './useCreateTask';
 export { useCreateTaskComment } from './useCreateTaskComment';
+export { useExportSurveyResponse } from './useExportSurveyResponse';

packages/datatrak-web/src/api/mutations/useExportSurveyResponse.ts

@@ -0,0 +1,36 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import { useMutation } from '@tanstack/react-query';
+import download from 'downloadjs';
+import { API_URL, post } from '../api';
+import { successToast } from '../../utils';
+
+// Requests a survey response PDF export from the server, and returns the response
+export const useExportSurveyResponse = (surveyResponseId: string, timezone?: string | null) => {
+  return useMutation<any, Error, unknown, unknown>(
+    () => {
+      const baseUrl = `${window.location.protocol}//${window.location.host}`;
+
+      // Auth cookies are saved against this domain. Pass this to server, so that when it pretends to be us, it can do the same.
+      const cookieDomain = new URL(API_URL).hostname;
+
+      return post(`export/${surveyResponseId}`, {
+        responseType: 'blob',
+        data: {
+          cookieDomain,
+          baseUrl,
+          locale: window.navigator.language,
+          timezone: timezone,
+        },
+      });
+    },
+    {
+      onSuccess: data => {
+        download(data, `survey_response_${surveyResponseId}.pdf`);
+        successToast('Survey response downloaded');
+      },
+    },
+  );
+};

packages/datatrak-web/src/constants/url.ts

@@ -28,6 +28,7 @@ export const ROUTES = {
   TASKS: '/tasks',
   TASK_DETAILS: '/tasks/:taskId',
   NOT_AUTHORISED: '/not-authorised',
+  EXPORT_SURVEY_RESPONSE: 'export/:surveyResponseId',
 };
 
 export const PASSWORD_RESET_TOKEN_PARAM = 'passwordResetToken';

packages/datatrak-web/src/features/Survey/Components/SurveyQuestion.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { useFormContext, Controller } from 'react-hook-form';
 import { FormHelperText } from '@material-ui/core';
+import { stripTimezoneFromDate } from '@tupaia/utils';
 import {
   BinaryQuestion,
   DateQuestion,
@@ -88,7 +89,9 @@ export const SurveyQuestion = ({
   const getDefaultValue = () => {
     if (formData[name] !== undefined) return formData[name];
     // This is so that the default value gets carried through to the component, and dates that have a visible value of 'today' have that value recognised when validating
-    if (type?.includes('Date')) return isResubmit ? null : new Date();
+    if (type?.includes('Date')) {
+      return isResubmit ? null : stripTimezoneFromDate(new Date());
+    }
     return undefined;
   };
 

packages/datatrak-web/src/features/SurveyResponseModal.tsx

@@ -3,29 +3,21 @@ import { useForm, FormProvider } from 'react-hook-form';
 import { useSearchParams } from 'react-router-dom';
 import styled from 'styled-components';
 import { Dialog, Typography } from '@material-ui/core';
-import {
-  ModalContentProvider,
-  ModalFooter,
-  ModalHeader,
-  SpinningLoader,
-} from '@tupaia/ui-components';
+import { ModalContentProvider, ModalFooter, SpinningLoader } from '@tupaia/ui-components';
 import { DatatrakWebSingleSurveyResponseRequest } from '@tupaia/types';
 import { useSurveyResponse } from '../api/queries';
-import { Button, SurveyTickIcon } from '../components';
+import { Button, DownloadIcon, SurveyTickIcon } from '../components';
 import { displayDate } from '../utils';
 import { SurveyReviewSection, useSurveyResponseWithForm } from './Survey';
 import { SurveyContext } from '.';
+import { useExportSurveyResponse } from '../api';
 
 const Header = styled.div`
   display: flex;
   align-items: center;
-  padding: 0.5rem;
+  justify-content: space-between;
+  padding: 1.5rem 1.8rem 1.2rem;
   width: 100%;
-
-  .MuiSvgIcon-root {
-    font-size: 2.5em;
-    margin-right: 0.35em;
-  }
 `;
 
 const Heading = styled(Typography).attrs({
@@ -50,15 +42,32 @@ const SubHeading = styled(Typography)`
 `;
 
 const Loader = styled(SpinningLoader)`
-  width: 25rem;
+  padding-block: 3rem;
   max-width: 100%;
 `;
 
 const Content = styled.div`
+  min-height: 10rem;
   width: 62rem;
   max-width: 100%;
 `;
 
+const Icon = styled(SurveyTickIcon)`
+  font-size: 2.5rem;
+  margin-right: 0.35rem;
+`;
+
+const DownloadButton = styled(Button).attrs({
+  variant: 'outlined',
+})`
+  margin-left: auto;
+  &.Mui-disabled.MuiButtonBase-root {
+    opacity: 0.5;
+    color: ${({ theme }) => theme.palette.primary.main};
+    border-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
+
 const getSubHeadingText = surveyResponse => {
   if (!surveyResponse) {
     return null;
@@ -85,20 +94,32 @@ const SurveyResponseModalContent = ({
   const { surveyLoading } = useSurveyResponseWithForm(surveyResponse);
   const subHeading = getSubHeadingText(surveyResponse);
   const showLoading = isLoading || surveyLoading;
+  const [urlSearchParams] = useSearchParams();
+  const surveyResponseId = urlSearchParams.get('responseId');
+  const { mutate: downloadSurveyResponse, isLoading: isDownloadingSurveyResponse } =
+    useExportSurveyResponse(surveyResponseId!, surveyResponse?.timezone);
 
   return (
     <>
-      <ModalHeader onClose={onClose} title={error ? 'Error loading survey response' : ''}>
+      <Header>
         {!showLoading && !error && (
-          <Header>
-            <SurveyTickIcon />
+          <>
+            <Icon />
             <div>
               <Heading>{surveyResponse?.surveyName}</Heading>
               <SubHeading>{subHeading}</SubHeading>
             </div>
-          </Header>
+            <DownloadButton
+              onClick={downloadSurveyResponse}
+              isLoading={isDownloadingSurveyResponse}
+              loadingText="Downloading"
+              startIcon={<DownloadIcon />}
+            >
+              Download
+            </DownloadButton>
+          </>
         )}
-      </ModalHeader>
+      </Header>
       <ModalContentProvider error={error as Error}>
         <Content>
           {showLoading && <Loader />}

packages/datatrak-web/src/routes/Routes.tsx

@@ -17,6 +17,7 @@ import {
   TasksDashboardPage,
   TaskDetailsPage,
   NotAuthorisedPage,
+  ExportSurveyResponsePage,
 } from '../views';
 import { useCurrentUserContext } from '../api';
 import { ROUTES } from '../constants';
@@ -53,6 +54,7 @@ const AuthViewLoggedInRedirect = ({ children }) => {
 export const Routes = () => {
   return (
     <RouterRoutes>
+      <Route path={ROUTES.EXPORT_SURVEY_RESPONSE} element={<ExportSurveyResponsePage />} />
       <Route path="/" element={<MainPageLayout />}>
         {/* PRIVATE ROUTES */}
         <Route path="/" element={<PrivateRoute />}>

packages/datatrak-web/src/utils/date.ts

@@ -1,18 +1,22 @@
-import { format } from 'date-fns';
-
-export const displayDate = (date?: Date | null) => {
+export const displayDate = (date?: Date | string | null, localeCode?: string) => {
   if (!date) {
     return '';
   }
-  return new Date(date).toLocaleDateString();
+  return new Date(date).toLocaleDateString(localeCode);
 };
 
-export const displayDateTime = (date?: Date | null) => {
+export const displayDateTime = (date?: Date | string | null, locale?: string) => {
   if (!date) {
     return '';
   }
 
-  const dateDisplay = displayDate(date);
-  const timeDisplay = format(new Date(date), 'p');
-  return `${dateDisplay} ${timeDisplay}`;
+  return new Date(date)
+    .toLocaleString(locale, {
+      hour: '2-digit',
+      minute: '2-digit',
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+    })
+    .replace(',', ' ');
 };