-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
PRMDR 294 (Partial) Upload component seperation (#89)
- Loading branch information
1 parent
78edf3f
commit a986afe
Showing
2 changed files
with
208 additions
and
169 deletions.
There are no files selected for viewing
189 changes: 189 additions & 0 deletions
189
app/src/components/blocks/lgRecordStage/LgRecordStage.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,189 @@ | ||
| import React, { useRef, useState } from 'react'; | ||
| import { PatientDetails } from '../../../types/generic/patientDetails'; | ||
| import { BackLink, Card, Details } from 'nhsuk-react-components'; | ||
| import { getFormattedDate } from '../../../helpers/utils/formatDate'; | ||
| import { DOWNLOAD_STAGE } from '../../../types/generic/downloadStage'; | ||
| import PdfViewer from '../../generic/pdfViewer/PdfViewer'; | ||
| import formatFileSize from '../../../helpers/utils/formatFileSize'; | ||
| import { PdfActionLink } from '../../../pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage'; | ||
| import { ReactComponent as Chevron } from '../../../styles/down-chevron.svg'; | ||
| import { useOnClickOutside } from 'usehooks-ts'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| type Props = { | ||
| patientDetails: PatientDetails; | ||
| downloadStage: DOWNLOAD_STAGE; | ||
| lloydGeorgeUrl: string; | ||
| lastUpdated: string; | ||
| numberOfFiles: number; | ||
| totalFileSizeInByte: number; | ||
| actionLinks: Array<PdfActionLink>; | ||
| }; | ||
|
|
||
| function LgRecordStage({ | ||
| patientDetails, | ||
| downloadStage, | ||
| lloydGeorgeUrl, | ||
| lastUpdated, | ||
| numberOfFiles, | ||
| totalFileSizeInByte, | ||
| actionLinks, | ||
| }: Props) { | ||
| const [fullScreen, setFullScreen] = useState(false); | ||
| const handleMoreActions = () => { | ||
| setShowActionsMenu(!showActionsMenu); | ||
| }; | ||
|
|
||
| const [showActionsMenu, setShowActionsMenu] = useState(false); | ||
| const dob: String = patientDetails?.birthDate | ||
| ? getFormattedDate(new Date(patientDetails.birthDate)) | ||
| : ''; | ||
|
|
||
| const nhsNumber: String = | ||
| patientDetails?.nhsNumber.slice(0, 3) + | ||
| ' ' + | ||
| patientDetails?.nhsNumber.slice(3, 6) + | ||
| ' ' + | ||
| patientDetails?.nhsNumber.slice(6, 10); | ||
| const actionsRef = useRef(null); | ||
| useOnClickOutside(actionsRef, (e) => { | ||
| setShowActionsMenu(false); | ||
| }); | ||
|
|
||
| const PdfCardDetails = () => ( | ||
| <> | ||
| <div> | ||
| <div style={{ marginBottom: 16 }}>Last updated: {lastUpdated}</div> | ||
| <div style={{ color: '#4C6272' }}> | ||
| {numberOfFiles} files | File size: {formatFileSize(totalFileSizeInByte)} | File | ||
| format: PDF | ||
| </div> | ||
| </div> | ||
| <div className="lg-actions"> | ||
| <div | ||
| className={`nhsuk-select lg-actions-select ${ | ||
| showActionsMenu ? 'lg-actions-select--selected' : '' | ||
| }`} | ||
| onClick={handleMoreActions} | ||
| style={{ background: '#fff' }} | ||
| > | ||
| <div | ||
| className={`lg-actions-select_border ${ | ||
| showActionsMenu ? 'lg-actions-select_border--selected' : '' | ||
| }`} | ||
| /> | ||
| <span className="lg-actions-select_placeholder">Select an action...</span> | ||
| <Chevron className="lg-actions-select_icon" /> | ||
| </div> | ||
| {showActionsMenu && ( | ||
| <div ref={actionsRef}> | ||
| <Card className="lg-actions-menu"> | ||
| <Card.Content> | ||
| <ol> | ||
| {actionLinks.map((link, i) => ( | ||
| <li key={link.label + i}> | ||
| <Link | ||
| to="#" | ||
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| link.handler(); | ||
| }} | ||
| > | ||
| {link.label} | ||
| </Link> | ||
| </li> | ||
| ))} | ||
| </ol> | ||
| </Card.Content> | ||
| </Card> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </> | ||
| ); | ||
|
|
||
| const PdfCardDescription = () => { | ||
| if (downloadStage === DOWNLOAD_STAGE.SUCCEEDED) { | ||
| return <PdfCardDetails />; | ||
| } else if (downloadStage === DOWNLOAD_STAGE.FAILED) { | ||
| return <span>No documents are available</span>; | ||
| } else { | ||
| return <span> Loading...</span>; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| {fullScreen && ( | ||
| <BackLink | ||
| data-cy="back-link" | ||
| href="#" | ||
| onClick={() => { | ||
| setFullScreen(false); | ||
| }} | ||
| > | ||
| Go back | ||
| </BackLink> | ||
| )} | ||
| <div id="patient-info"> | ||
| <p style={{ marginBottom: 5, fontWeight: '700' }} data-cy="patient-name"> | ||
| {`${patientDetails?.givenName} ${patientDetails?.familyName}`} | ||
| </p> | ||
| <p style={{ fontSize: '16px', marginBottom: 5 }} data-cy="patient-nhs-number"> | ||
| NHS number: {nhsNumber} | ||
| </p> | ||
| <p style={{ fontSize: '16px' }} data-cy="patient-dob"> | ||
| Date of birth: {dob} | ||
| </p> | ||
| </div> | ||
| {!fullScreen ? ( | ||
| <> | ||
| <Card style={{ marginBottom: 0 }}> | ||
| <Card.Content style={{ position: 'relative' }} data-cy="pdf-card"> | ||
| <Card.Heading style={{ fontWeight: '700', fontSize: '24px' }}> | ||
| Lloyd George record | ||
| </Card.Heading> | ||
| <PdfCardDescription /> | ||
| </Card.Content> | ||
| </Card> | ||
| {downloadStage === DOWNLOAD_STAGE.SUCCEEDED && ( | ||
| <> | ||
| <Details | ||
| expander | ||
| open | ||
| style={{ position: 'relative', borderTop: 'none' }} | ||
| > | ||
| <Details.Summary | ||
| style={{ display: 'inline-block' }} | ||
| data-cy="view-record-bin" | ||
| > | ||
| View record | ||
| </Details.Summary> | ||
| <button | ||
| style={{ | ||
| display: 'inline-block', | ||
| position: 'absolute', | ||
| right: '28px', | ||
| top: '30px', | ||
| }} | ||
| className="link-button" | ||
| data-cy="full-screen-btn" | ||
| onClick={() => { | ||
| setFullScreen(true); | ||
| }} | ||
| > | ||
| View in full screen | ||
| </button> | ||
| <PdfViewer fileUrl={lloydGeorgeUrl} /> | ||
| </Details> | ||
| </> | ||
| )} | ||
| </> | ||
| ) : ( | ||
| <PdfViewer fileUrl={lloydGeorgeUrl} /> | ||
| )} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default LgRecordStage; |
Oops, something went wrong.