-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
71 changed files
with
2,163 additions
and
987 deletions.
There are no files selected for viewing
55 changes: 55 additions & 0 deletions
55
hat/assets/js/apps/Iaso/components/files/pdf/DocumentUploadWithPreview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { Grid } from '@mui/material'; | ||
| import { FilesUpload, useSafeIntl } from 'bluesquare-components'; | ||
| import React from 'react'; | ||
| import { PdfPreview } from './PdfPreview'; | ||
| import MESSAGES from './messages'; | ||
| import { acceptPDF } from './utils'; | ||
|
|
||
| type DocumentUploadWithPreviewProps = { | ||
| errors: string[] | undefined; | ||
| onFilesSelect: (files: File[]) => void; | ||
| document?: File[] | string; | ||
| }; | ||
|
|
||
| const DocumentUploadWithPreview: React.FC<DocumentUploadWithPreviewProps> = ({ | ||
| errors, | ||
| onFilesSelect, | ||
| document, | ||
| }) => { | ||
| const { formatMessage } = useSafeIntl(); | ||
|
|
||
| let pdfUrl: string | null = null; | ||
| if (typeof document === 'string') { | ||
| pdfUrl = document; | ||
| } else if ( | ||
| Array.isArray(document) && | ||
| document.length > 0 && | ||
| document[0] instanceof File | ||
| ) { | ||
| pdfUrl = URL.createObjectURL(document[0]); | ||
| } else if (document instanceof File) { | ||
| pdfUrl = URL.createObjectURL(document); | ||
| } | ||
|
|
||
| return ( | ||
| <Grid container spacing={2} alignItems="center"> | ||
| <Grid item xs={document ? 10 : 12}> | ||
| <FilesUpload | ||
| accept={acceptPDF} | ||
| files={document ? [document as unknown as File] : []} | ||
| onFilesSelect={onFilesSelect} | ||
| multi={false} | ||
| errors={errors} | ||
| placeholder={formatMessage(MESSAGES.document)} | ||
| /> | ||
| </Grid> | ||
| {pdfUrl && ( | ||
| <Grid item xs={2} sx={{ textAlign: 'right' }}> | ||
| <PdfPreview pdfUrl={pdfUrl} /> | ||
| </Grid> | ||
| )} | ||
| </Grid> | ||
| ); | ||
| }; | ||
|
|
||
| export default DocumentUploadWithPreview; |
93 changes: 93 additions & 0 deletions
93
hat/assets/js/apps/Iaso/components/files/pdf/PdfPreview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import { | ||
| Button, | ||
| Dialog, | ||
| DialogActions, | ||
| DialogContent, | ||
| IconButton, | ||
| } from '@mui/material'; | ||
| import { useSafeIntl } from 'bluesquare-components'; | ||
| import React, { FunctionComponent, useCallback, useState } from 'react'; | ||
| import { Document, Page, pdfjs } from 'react-pdf'; | ||
| import PdfSvgComponent from '../../svg/PdfSvgComponent'; | ||
| import MESSAGES from './messages'; | ||
|
|
||
| // Set the workerSrc for pdfjs to enable the use of Web Workers. | ||
| // Web Workers allow the PDF.js library to process PDF files in a separate thread, | ||
| // keeping the main thread responsive and ensuring smooth UI interactions. | ||
| // Note: The PDF file itself is not transferred to the worker; only the processing is offloaded. | ||
| // This is necessary for the react-pdf library to function correctly. | ||
| if (!pdfjs.GlobalWorkerOptions.workerSrc) { | ||
| pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`; | ||
| } | ||
|
|
||
| type PdfPreviewProps = { | ||
| pdfUrl?: string; | ||
| }; | ||
|
|
||
| export const PdfPreview: FunctionComponent<PdfPreviewProps> = ({ pdfUrl }) => { | ||
| const [open, setOpen] = useState(false); // State to manage dialog open/close | ||
|
|
||
| const { formatMessage } = useSafeIntl(); | ||
| const handleOpen = () => { | ||
| setOpen(true); | ||
| }; | ||
|
|
||
| const handleClose = () => { | ||
| setOpen(false); | ||
| }; | ||
|
|
||
| const handleDownload = useCallback(() => { | ||
| if (pdfUrl) { | ||
| const link = document.createElement('a'); | ||
| link.href = pdfUrl; | ||
| const urlParts = pdfUrl.split('/'); | ||
| const fileName = urlParts[urlParts.length - 1] || 'document.pdf'; | ||
| link.download = fileName; | ||
| link.click(); | ||
| } | ||
| }, [pdfUrl]); | ||
| return ( | ||
| <> | ||
| <IconButton | ||
| onClick={handleOpen} | ||
| aria-label="preview document" | ||
| disabled={!pdfUrl} | ||
| > | ||
| <PdfSvgComponent /> | ||
| </IconButton> | ||
| {open && ( | ||
| <Dialog | ||
| fullWidth | ||
| maxWidth="md" | ||
| open={open} | ||
| onClose={handleClose} | ||
| > | ||
| <DialogContent | ||
| sx={{ | ||
| px: 0, | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| }} | ||
| > | ||
| <Document file={pdfUrl}> | ||
| <Page | ||
| pageNumber={1} | ||
| width={880} | ||
| renderTextLayer={false} | ||
| renderAnnotationLayer={false} | ||
| /> | ||
| </Document> | ||
| </DialogContent> | ||
| <DialogActions> | ||
| <Button onClick={handleDownload} color="primary"> | ||
| {formatMessage(MESSAGES.download)} | ||
| </Button> | ||
| <Button onClick={handleClose} color="primary"> | ||
| {formatMessage(MESSAGES.close)} | ||
| </Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { defineMessages } from 'react-intl'; | ||
|
|
||
| const MESSAGES = defineMessages({ | ||
| document: { | ||
| id: 'iaso.label.document', | ||
| defaultMessage: 'Document', | ||
| }, | ||
| close: { | ||
| defaultMessage: 'Close', | ||
| id: 'blsq.buttons.label.close', | ||
| }, | ||
| download: { | ||
| defaultMessage: 'Download', | ||
| id: 'iaso.label.download', | ||
| }, | ||
| }); | ||
|
|
||
| export default MESSAGES; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { Accept } from 'react-dropzone'; | ||
|
|
||
| export const acceptPDF: Accept = { | ||
| 'application/pdf': ['.pdf'], | ||
| }; | ||
|
|
||
| export const processErrorDocsBase = err_docs => { | ||
| if (!err_docs) return []; | ||
| if (!Array.isArray(err_docs)) return [err_docs]; | ||
| return err_docs; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| // test/setup.js or in your test file | ||
| const mock = require('mock-require'); | ||
|
|
||
| // Mock pdfjs-dist | ||
| mock('pdfjs-dist', { | ||
| GlobalWorkerOptions: { | ||
| workerSrc: '', | ||
| }, | ||
| getDocument: () => ({ | ||
| promise: Promise.resolve({ | ||
| numPages: 1, | ||
| getPage: () => ({ | ||
| promise: Promise.resolve({ | ||
| getTextContent: () => ({ | ||
| promise: Promise.resolve({ items: [] }), | ||
| }), | ||
| }), | ||
| }), | ||
| }), | ||
| }), | ||
| }); | ||
|
|
||
| // Mock react-pdf | ||
| mock('react-pdf', { | ||
| Document: ({ children }) => <div>{children}</div>, | ||
| Page: () => <div>Page</div>, | ||
| pdfjs: { | ||
| GlobalWorkerOptions: { | ||
| workerSrc: '', | ||
| }, | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,2 @@ | ||
| username,password,email,first_name,last_name,orgunit,orgunit__source_ref,permissions,profile_language,dhis2_id,Organization,projects,user_roles,phone_number | ||
| user name should not contain whitespaces,"Min. 8 characters, should include 1 letter and 1 number",,,,Use Org Unit ID to avoid errors,Org Unit external ID,"Possible values: iaso_forms,iaso_mappings,iaso_completeness,iaso_org_units,iaso_links,iaso_users,iaso_pages,iaso_projects,iaso_sources,iaso_data_tasks,iaso_submissions,iaso_update_submission,iaso_planning,iaso_reports,iaso_teams,iaso_assignments,iaso_entities,iaso_storages,iaso_completeness_stats,iaso_workflows,iaso_registry","Possible values: EN, FR",Optional,Optional,projects,user roles,The phone number as a string (in single or double quote). It has to start with the country code like +1 for US | ||
| username,password,email,first_name,last_name,orgunit,orgunit__source_ref,permissions,profile_language,dhis2_id,organization,projects,user_roles,phone_number,editable_org_unit_types | ||
| user name should not contain whitespaces,"Min. 8 characters, should include 1 letter and 1 number",,,,Use Org Unit ID to avoid errors,Org Unit external ID,"Possible values: iaso_forms,iaso_mappings,iaso_completeness,iaso_org_units,iaso_links,iaso_users,iaso_pages,iaso_projects,iaso_sources,iaso_data_tasks,iaso_submissions,iaso_update_submission,iaso_planning,iaso_reports,iaso_teams,iaso_assignments,iaso_entities,iaso_storages,iaso_completeness_stats,iaso_workflows,iaso_registry","Possible values: EN, FR",Optional,Optional,projects,user roles,The phone number as a string (in single or double quote). It has to start with the country code like +1 for US,"Use comma separated Org Unit Type IDs to avoid errors: 1, 2" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.