Add file upload to Data Extraction page

closes #52 Signed-off-by: Sean Sundberg <[email protected]>
ibm-ecosystem-engineering · Sep 23, 2023 · a85ec43 · a85ec43
1 parent d1a9c96
commit a85ec43
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 16 deletions.
diff --git a/src/services/file-upload/file-upload.api.ts b/src/services/file-upload/file-upload.api.ts
@@ -1,5 +1,7 @@
 import {DocumentModel} from "../../models";
 
+export type FileUploadContext = 'data-extraction' | 'kyc-case';
+
 export abstract class FileUploadApi {
-    abstract uploadFile(caseId: string, name: string, file: File): Promise<DocumentModel>;
+    abstract uploadFile(caseId: string, name: string, file: File, context?: FileUploadContext): Promise<DocumentModel>;
 }
diff --git a/src/services/file-upload/file-upload.rest.ts b/src/services/file-upload/file-upload.rest.ts
@@ -1,15 +1,16 @@
 import axios from "axios";
 
-import {FileUploadApi} from "./file-upload.api";
+import {FileUploadApi, FileUploadContext} from "./file-upload.api";
 import {DocumentModel} from "../../models";
 
 export class FileUploadRest implements FileUploadApi {
-    uploadFile(caseId: string, name: string, file: File): Promise<DocumentModel> {
+    uploadFile(caseId: string, name: string, file: File, context: FileUploadContext = 'kyc-case'): Promise<DocumentModel> {
         const url = '/api/document/upload'
 
         const form = new FormData();
         form.append('name', name);
         form.append('parentId', caseId);
+        form.append('context', context);
         form.append('file', file);
 
         return axios

diff --git a/src/views/DataExtraction/DataExtraction.tsx b/src/views/DataExtraction/DataExtraction.tsx
@@ -2,7 +2,17 @@
 // @ts-ignore
 import React, {ChangeEvent, FormEvent, useState} from 'react';
 import {useAtomValue, useSetAtom} from "jotai";
-import {Button, Checkbox, DataTableHeader, Form, FormGroup, Loading, TextInput} from "@carbon/react";
+import {
+    Button,
+    Checkbox, Column,
+    DataTableHeader,
+    FileUploader,
+    Form,
+    FormGroup,
+    Grid,
+    Loading,
+    TextInput
+} from "@carbon/react";
 
 import './DataExtraction.scss';
 import {
@@ -14,6 +24,7 @@ import {DataExtractionApi, dataExtractionApi} from "../../services";
 import {DataTable, Stack} from "../../components";
 import {DataExtractionQuestionModel} from "../../models";
 import {Loadable} from "jotai/vanilla/utils/loadable";
+import {handleFileUploaderChange} from "../KYC/KYCCaseDetail/util";
 
 export interface DataExtractionProps {
 }
@@ -37,6 +48,7 @@ const createEmptyDataExtractionValues = (questionLoadable: Loadable<Promise<Data
 export const DataExtraction: React.FunctionComponent<DataExtractionProps> = () => {
     const questionLoadable = useAtomValue(dataExtractionQuestionAtomLoadable)
     const [dataExtraction, setDataExtraction] = useState<DataExtractionValues>(createEmptyDataExtractionValues(questionLoadable))
+    const [fileStatus, setFileStatus] = useState<'edit' | 'complete' | 'uploading'>('edit')
     const setResults = useSetAtom(dataExtractionResultsAtom)
 
     const service: DataExtractionApi = dataExtractionApi()
@@ -116,7 +128,9 @@ export const DataExtraction: React.FunctionComponent<DataExtractionProps> = () =
                     onChange={handleCustomer}
                     required={true}
                 />
-                <FormGroup legendText="Select checklist" style={{textAlign: 'left'}}>
+                <Grid narrow style={{padding: '0'}}>
+                    <Column sm={16} md={8}>
+                <FormGroup legendText="Select checklist" style={{textAlign: 'left', paddingBottom: '15px'}}>
                     {questions.map(question => {
                         return (<Checkbox
                             id={'question-' + question.id}
@@ -127,6 +141,25 @@ export const DataExtraction: React.FunctionComponent<DataExtractionProps> = () =
                         />)
                     })}
                 </FormGroup>
+                    </Column>
+                    <Column sm={16} md={8}>
+                <FormGroup legendText="Upload files to Discovery" style={{textAlign: 'left'}}>
+                <FileUploader
+                    labelTitle="Add documents"
+                    labelDescription="Max file size is 500mb."
+                    buttonLabel="Add file"
+                    buttonKind="primary"
+                    size="md"
+                    filenameStatus={fileStatus}
+                    // accept={['.jpg', '.png', '.pdf']}
+                    multiple={true}
+                    disabled={false}
+                    iconDescription="Delete file"
+                    onChange={handleFileUploaderChange('0', () => {}, setFileStatus, 'data-extraction')}
+                    name="" />
+                </FormGroup>
+                    </Column>
+                </Grid>
                 <div><Button kind="tertiary" onClick={handleReset}>Reset</Button> <Button type="submit">Submit</Button></div>
             </Stack>
         </Form>

diff --git a/src/views/KYC/KYCCaseDetail/KYCCaseReview/KYCCaseReview.tsx b/src/views/KYC/KYCCaseDetail/KYCCaseReview/KYCCaseReview.tsx
@@ -7,7 +7,7 @@ import {default as setValue} from "set-value";
 
 import './KYCCaseReview.scss';
 import {CountrySelect, DocumentList, EntityTypeSelect, IndustryTypeSelect, Stack} from "../../../../components";
-import {createEmptyReviewCase, FormOptionModel, KycCaseModel, ReviewCaseModel} from "../../../../models";
+import {createEmptyReviewCase, DocumentModel, FormOptionModel, KycCaseModel, ReviewCaseModel} from "../../../../models";
 import {KycCaseManagementApi, kycCaseManagementApi} from "../../../../services";
 import {handleFileUploaderChange} from "../util";
 import {leftOuter} from "../../../../utils";
@@ -69,6 +69,12 @@ export const KYCCaseReview: React.FunctionComponent<KYCCaseReviewProps> = (props
         }
     }
 
+    const handleDocuments = (newDocuments: DocumentModel[]) => {
+        const documents = updatedCase.documents.concat(newDocuments)
+
+        setUpdatedCase(Object.assign({}, updatedCase, {documents}))
+    }
+
     return (
         <Form onSubmit={handleSubmit}>
         <Stack gap={5}>
@@ -139,7 +145,7 @@ export const KYCCaseReview: React.FunctionComponent<KYCCaseReviewProps> = (props
                 multiple={true}
                 disabled={false}
                 iconDescription="Delete file"
-                onChange={handleFileUploaderChange(props.currentCase.id, updatedCase, setUpdatedCase, setFileStatus)}
+                onChange={handleFileUploaderChange(props.currentCase.id, handleDocuments, setFileStatus, 'data-extraction')}
                 name="" />
             <div><Button kind="tertiary" onClick={handleCancel}>Cancel</Button> <Button type="submit">Submit</Button></div>
         </Stack>

diff --git a/src/views/KYC/KYCCaseDetail/util/event-handler.util.ts b/src/views/KYC/KYCCaseDetail/util/event-handler.util.ts
@@ -1,8 +1,8 @@
-import {DocumentedCase, DocumentModel} from "../../../../models";
-import {fileUploadApi, FileUploadApi} from "../../../../services";
+import {DocumentModel} from "../../../../models";
+import {fileUploadApi, FileUploadApi, FileUploadContext} from "../../../../services";
 import {fileListUtil} from "../../../../utils";
 
-export const handleFileUploaderChange = <T extends DocumentedCase> (caseId: string, updatedCase: T, setUpdatedCase, setFileStatus) => {
+export const handleFileUploaderChange = (id: string, handleNewDocuments: (newDocuments: DocumentModel[]) => void, setFileStatus: (status: unknown) => void, context: FileUploadContext = 'kyc-case') => {
     const fileUploadService: FileUploadApi = fileUploadApi();
 
     return (event: {target: {files: FileList, filenameStatus: string}}) => {
@@ -14,17 +14,13 @@ export const handleFileUploaderChange = <T extends DocumentedCase> (caseId: stri
         setFileStatus('uploading')
 
         // TODO handle document remove
-        Promise.all(files.map(f => fileUploadService.uploadFile(caseId, f.name, f)))
+        Promise.all(files.map(f => fileUploadService.uploadFile(id, f.name, f, context)))
             .then((result: DocumentModel[]) => {
                 setFileStatus('complete');
 
                 return result.filter(doc => !!doc);
             })
-            .then((newDocuments: DocumentModel[]) => {
-                const documents = updatedCase.documents.concat(newDocuments)
-
-                setUpdatedCase(Object.assign({}, updatedCase, {documents}))
-            })
+            .then(handleNewDocuments)
             .catch(() => setFileStatus('error'))
     }
 }