feat: CLIN-621 update metadata file

Ferlab-Ste-Justine · Mar 30, 2022 · 675ad0b · 675ad0b
1 parent a493aaf
commit 675ad0b
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 92 deletions.
diff --git a/client/src/components/screens/Patient/components/FilesTab/components/ActionDropdown.tsx b/client/src/components/screens/Patient/components/FilesTab/components/ActionDropdown.tsx
@@ -5,15 +5,17 @@ import { DownOutlined } from '@ant-design/icons';
 import { getPatientFileURL } from 'actions/patient';
 import { Button, Dropdown, Menu } from 'antd';
 
-import { PatientResponse } from '../index'
+import { PatientResponse } from '../index';
+
+import MetadataButton from './MetadataButton';
 
 interface Props {
-    format: string,
-    url: {
-      file: string;
-      index: string;
-    },
-    metadata: PatientResponse,
+  format: string;
+  url: {
+    file: string;
+    index: string;
+  };
+  metadata: PatientResponse;
 }
 
 enum PatientFileFormat {
@@ -22,82 +24,60 @@ enum PatientFileFormat {
   tgz = 'TGZ',
 }
 
-const ActionDropdown = ({
-    format,
-    metadata,
-    url,
-}: Props): React.ReactElement => {
+const ActionDropdown = ({ format, metadata, url }: Props): React.ReactElement => {
   const dispatch = useDispatch();
-  
+
   const makeDropdownOptions = (
-      format: string,
-      url: {
-          file: string;
-          index: string;
-      },
-      metadata: PatientResponse,
+    format: string,
+    url: {
+      file: string;
+      index: string;
+    },
+    metadata: PatientResponse,
   ) => {
-      const onClickInitiDownload = (url:string) => dispatch(getPatientFileURL(url));
-      const options = [
-      (
-      <Menu.Item key='file'>
-          <Button
+    const onClickInitiDownload = (url: string) => dispatch(getPatientFileURL(url));
+    const options = [
+      <Menu.Item key="file">
+        <Button
           className="link--underline"
           onClick={() => onClickInitiDownload(url.file)}
           target="_blank"
           type="link"
-          >
-          { intl.get('screen.patient.details.file.download.file') }
-          </Button>
-      </Menu.Item>
-      ),
-      (
-      <Menu.Item key='metadata'>
+        >
+          {intl.get('screen.patient.details.file.download.file')}
+        </Button>
+      </Menu.Item>,
+      <Menu.Item key="metadata">
+        <MetadataButton
+          filename={`${metadata.aliquot.resource[0].external_id}_${metadata.content[0].format}_META.json`}
+          taskId={metadata.task.id}
+        />
+      </Menu.Item>,
+    ];
+
+    if (format === PatientFileFormat.cram || format === PatientFileFormat.vcf) {
+      options.push(
+        <Menu.Item key="index">
           <Button
-          className="link--underline"
-          download={`${metadata.aliquot.resource[0].external_id}_${metadata.content[0].format}_META.json`}
-          href={`data:text/json;charset=utf-8,${encodeURIComponent(
-              JSON.stringify(metadata, null, 4)
-          )}`}
-          type="link"
+            className="link--underline"
+            onClick={() => onClickInitiDownload(url.index)}
+            target="_blank"
+            type="link"
           >
-          Metadata
+            Index
           </Button>
-      </Menu.Item>
-      ),];
-
-      if (format === PatientFileFormat.cram || format === PatientFileFormat.vcf) {
-      options.push(
-          (
-          <Menu.Item key='index'>
-              <Button
-              className="link--underline"
-              onClick={() => onClickInitiDownload(url.index)}
-              target="_blank"
-              type="link"
-              >
-
-              Index
-              </Button>
-          </Menu.Item>
-          ),
+        </Menu.Item>,
       );
-      }
-      return options
+    }
+    return options;
   };
   return (
     <Dropdown
       className="files-tab__dropdownAction"
-      overlay={(
-        <Menu>
-          {
-            makeDropdownOptions(format, url, metadata)
-          }
-        </Menu>
-      )}
+      overlay={<Menu>{makeDropdownOptions(format, url, metadata)}</Menu>}
     >
       <Button type="link">
-        { intl.get('screen.patient.details.file.download') } 
+        {intl.get('screen.patient.details.file.download')}
         <DownOutlined />
       </Button>
     </Dropdown>

diff --git a/client/src/components/screens/Patient/components/FilesTab/components/MetadataButton.tsx b/client/src/components/screens/Patient/components/FilesTab/components/MetadataButton.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import intl from 'react-intl-universal';
+import { Button, message } from 'antd';
+import Api from 'helpers/api';
+import capitalize from 'lodash/capitalize';
+
+type Props = {
+  filename: string;
+  taskId: string;
+};
+
+const displayErrorMessage = () => message.error(capitalize(intl.get('download.error')));
+
+const MetadataButton = ({ filename, taskId }: Props): React.ReactElement => {
+  const [loading, setLoading] = useState(false);
+  return (
+    <Button
+      className="link--underline"
+      disabled={loading}
+      loading={loading}
+      onClick={async () => {
+        setLoading(true);
+        try {
+          const response = await Api.downloadFileMetadata(taskId, filename);
+          if ('error' in response) {
+            displayErrorMessage();
+          }
+        } catch {
+          displayErrorMessage();
+        } finally {
+          setLoading(false);
+        }
+      }}
+      type="link"
+    >
+      Metadata
+    </Button>
+  );
+};
+
+export default MetadataButton;
diff --git a/client/src/helpers/FileDownload.ts b/client/src/helpers/FileDownload.ts
@@ -1,10 +1,11 @@
-const FileDownload = (data: Blob, fileName: string) => {
+const FileDownload = (data: Blob, fileName: string): void => {
   const downloadLinkElement = window.document.createElement('a');
   downloadLinkElement.href = window.URL.createObjectURL(data);
   downloadLinkElement.download = fileName;
   document.body.appendChild(downloadLinkElement);
   downloadLinkElement.click();
   document.body.removeChild(downloadLinkElement);
+  window.URL.revokeObjectURL(downloadLinkElement.href);
 }
 
 export default FileDownload;
diff --git a/client/src/helpers/api.ts b/client/src/helpers/api.ts
@@ -1,24 +1,26 @@
+import FileDownload from 'helpers/FileDownload';
 import get from 'lodash/get';
+
+import { StatusType } from 'components/screens/Patient/components/StatusChangeModal';
+
 import keycloak from '../keycloak';
 
 import { getPatientByIdentifier } from './fhir/api/PatientChecker';
 import { getUserPractitionerData } from './fhir/api/UserResources';
 import { BundleBuilder } from './fhir/builder/BundleBuilder';
+import { ServiceRequestBuilder } from './fhir/builder/ServiceRequestBuilder';
 import { getExtension } from './fhir/builder/Utils';
 import {
   createGetMultiplePatientDataBundle,
   createGetMultiplePractitionerDataBundle,
   createGetPatientDataBundle,
   createGetPractitionersDataBundle,
 } from './fhir/fhir';
-import { ServiceRequestBuilder } from './fhir/builder/ServiceRequestBuilder';
 import { generateGroupStatus, GroupMemberStatusCode } from './fhir/patientHelper';
 import { Bundle, Group, Patient, ServiceRequest } from './fhir/types';
 import { PatientAutocompleteOptionalParams, PatientAutoCompleteResponse } from './search/types';
 import Http from './http-client';
 import { userAuthPermissions } from './keycloak-api';
-import { StatusType } from 'components/screens/Patient/components/StatusChangeModal';
-import FileDownload from 'helpers/FileDownload';
 
 type Payload = any;
 type PayloadCb = { payload: Payload };
@@ -77,7 +79,7 @@ const getGroupByMemberId = (
 
 const updateGroup = (
   groupId: string,
-  updatedGroup: Group
+  updatedGroup: Group,
 ): Promise<{
   payload?: {
     data: Bundle;
@@ -155,10 +157,7 @@ const getUserProfile = () =>
     .then(successCallback)
     .catch(errorCallback);
 
-const createUserProfile = (
-  defaultStatement = '',
-  patientTableConfig = {},
-) =>
+const createUserProfile = (defaultStatement = '', patientTableConfig = {}) =>
   Http.secureClinAxios
     .post(`${window.CLIN.metaServiceApiUrl}/profile`, {
       defaultStatement,
@@ -167,11 +166,7 @@ const createUserProfile = (
     .then(successCallback)
     .catch(errorCallback);
 
-const updateUserProfile = (
-  uid: string,
-  defaultStatement: any,
-  patientTableConfig = {},
-) =>
+const updateUserProfile = (uid: string, defaultStatement: any, patientTableConfig = {}) =>
   Http.secureClinAxios
     .put(`${window.CLIN.metaServiceApiUrl}/profile`, {
       defaultStatement,
@@ -208,19 +203,18 @@ const updateServiceRequestStatus = async (
   status: StatusType,
   note: string,
 ) => {
+  const { practitioner, practitionerRole } = user.practitionerData;
 
-  const { practitioner, practitionerRole } = user.practitionerData
-
   const builder = new ServiceRequestBuilder(serviceRequest)
     .withStatus(status)
     .withNoteStatus(note, practitioner.id)
     .withPerformer(practitionerRole.id)
-    .withSubmitted(status !== StatusType['on-hold'])
-  
-    if (status === StatusType.active) {
-      builder.withProcedureDirectedBy(practitionerRole.id)
-    }
-  
+    .withSubmitted(status !== StatusType['on-hold']);
+
+  if (status === StatusType.active) {
+    builder.withProcedureDirectedBy(practitionerRole.id);
+  }
+
   return Http.secureClinAxios
     .put(`${window.CLIN.fhirBaseUrl}/ServiceRequest/${serviceRequest.id}`, builder.build())
     .then(successCallback)
@@ -335,10 +329,10 @@ const getFileURL = async (file: string) =>
 
 const downloadPrescriptionPDF = async (serviceRequestId: string) =>
   Http.secureClinAxios
-    .get(`${window.CLIN.rendererBaseUrl}/${serviceRequestId}`, {responseType: 'blob'})
-    .then((response: { data: Blob, headers: any }) => {
+    .get(`${window.CLIN.rendererBaseUrl}/${serviceRequestId}`, { responseType: 'blob' })
+    .then((response: { data: Blob; headers: any }) => {
       const fileName = response.headers['content-disposition']?.split('filename=')?.[1];
-      FileDownload(response.data, fileName || `${serviceRequestId}.pdf`)
+      FileDownload(response.data, fileName || `${serviceRequestId}.pdf`);
     })
     .then(successCallback)
     .catch(errorCallback);
@@ -348,7 +342,18 @@ const fetchServiceRequestCode = async () =>
     .get(`${window.CLIN.fhirBaseUrl}/CodeSystem/service-request-code`)
     .then(successCallback)
     .catch(errorCallback);
-
+
+const downloadFileMetadata = (taskId: string, filename: string) =>
+  Http.secureClinAxios
+    .get(
+      `${window.CLIN.fhirBaseUrl}/Task?_id=${taskId}&_include=Task:input_specimen&_include=Task:output-documentreference&_pretty=true`,
+      { responseType: 'blob' },
+    )
+    .then((response: { data: Blob }) => {
+      FileDownload(response.data, filename);
+    })
+    .then(successCallback)
+    .catch(errorCallback);
 
 export default {
   addOrUpdatePatientToGroup,
@@ -379,4 +384,5 @@ export default {
   updatePatientsGroup,
   updateServiceRequestStatus,
   updateUserProfile,
+  downloadFileMetadata,
 };
diff --git a/client/src/locales/en.js b/client/src/locales/en.js
@@ -39,6 +39,7 @@ const en = {
   'components.table.action.search': 'Search',
   'components.variantNavigation.moreResults': 'Refine your search to see other results',
   'components.variantNavigation.searchInput.resultsCount': '{count} results',
+  'download.error': 'download error',
   'filters.__missing__': 'Missing',
   'filters.false': 'False',
   'filters.header.practitioner.lastNameFirstName': 'Approver',

diff --git a/client/src/locales/fr.js b/client/src/locales/fr.js
@@ -43,6 +43,7 @@ const fr = {
   'components.variantNavigation.searchInput.moreResults':
     "Précisez votre recherche pour voir d'autres résultats.",
   'components.variantNavigation.searchInput.resultsCount': '{count} résultats',
+  'download.error': 'erreur de téléchargement',
   'filters.__missing__': 'Manquant',
   'filters.false': 'Faux',
   'filters.header.practitioner.lastNameFirstName': 'Médecin approbateur',