From 98495932d5d694e3d28fff15659bad4351e1d359 Mon Sep 17 00:00:00 2001 From: Rio Knightley Date: Wed, 11 Oct 2023 16:32:14 +0100 Subject: [PATCH 01/14] Add custom select box --- app/package-lock.json | 14 ++++++ app/package.json | 1 + .../LloydGeorgeRecordPage.tsx | 33 +++++++++++++- app/src/styles/App.scss | 43 +++++++++++++++++++ app/src/styles/down-chevron.svg | 6 +++ 5 files changed, 95 insertions(+), 2 deletions(-) create mode 100644 app/src/styles/down-chevron.svg diff --git a/app/package-lock.json b/app/package-lock.json index c1513a074..6ffcc11a8 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -28,6 +28,7 @@ "sass": "^1.66.1", "serve": "^14.2.1", "typescript": "^4.9.5", + "usehooks-ts": "^2.9.1", "util": "^0.12.5", "web-vitals": "^2.1.4" }, @@ -25545,6 +25546,19 @@ } } }, + "node_modules/usehooks-ts": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz", + "integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==", + "engines": { + "node": ">=16.15.0", + "npm": ">=8" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", diff --git a/app/package.json b/app/package.json index 7ab7a58ec..ad1176198 100644 --- a/app/package.json +++ b/app/package.json @@ -35,6 +35,7 @@ "sass": "^1.66.1", "serve": "^14.2.1", "typescript": "^4.9.5", + "usehooks-ts": "^2.9.1", "util": "^0.12.5", "web-vitals": "^2.1.4" }, diff --git a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx index 0588a5b6d..af7ca01e3 100644 --- a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx +++ b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { usePatientDetailsContext } from '../../providers/patientProvider/PatientProvider'; import { getFormattedDate } from '../../helpers/utils/formatDate'; import { useNavigate } from 'react-router'; -import { Card, Details } from 'nhsuk-react-components'; +import { Card, Details, Select } from 'nhsuk-react-components'; import { useBaseAPIUrl } from '../../providers/configProvider/ConfigProvider'; import getLloydGeorgeRecord from '../../helpers/requests/getLloydGeorgeRecord'; import PdfViewer from '../../components/generic/pdfViewer/PdfViewer'; @@ -10,6 +10,8 @@ import { getFormattedDatetime } from '../../helpers/utils/formatDatetime'; import { DOWNLOAD_STAGE } from '../../types/generic/downloadStage'; import formatFileSize from '../../helpers/utils/formatFileSize'; import useBaseAPIHeaders from '../../helpers/hooks/useBaseAPIHeaders'; +import { useOnClickOutside } from 'usehooks-ts'; +import { ReactComponent as Chevron } from '../../styles/down-chevron.svg'; function LloydGeorgeRecordPage() { const [patientDetails] = usePatientDetailsContext(); @@ -22,6 +24,9 @@ function LloydGeorgeRecordPage() { const baseUrl = useBaseAPIUrl(); const baseHeaders = useBaseAPIHeaders(); const mounted = useRef(false); + const actionsRef = useRef(null); + + useOnClickOutside(actionsRef, () => setSelectExpanded(false)); const dob: String = patientDetails?.birthDate ? getFormattedDate(new Date(patientDetails.birthDate)) @@ -82,7 +87,7 @@ function LloydGeorgeRecordPage() { setNumberOfFiles, setTotalFileSizeInByte, ]); - + const [selectExpanded, setSelectExpanded] = useState(false); const pdfCardDescription = ( <> Last updated: {lastUpdated} @@ -102,8 +107,32 @@ function LloydGeorgeRecordPage() { } }; + const handleMoreActions = () => { + setSelectExpanded(!selectExpanded); + }; + return ( + //nhsuk-select--error <> + +
+
+ Select an action... + +
<>{patientInfo} diff --git a/app/src/styles/App.scss b/app/src/styles/App.scss index adb41da1d..f2a51df4e 100644 --- a/app/src/styles/App.scss +++ b/app/src/styles/App.scss @@ -114,3 +114,46 @@ .table-column-header { font-size: 24px; } + +.lg-actions-select { + border-color: #000; + position: relative; + box-sizing: border-box; + border: none; + padding: 0; + width: 182.5px; + @media (max-width: 640px) { + width: 161.5px; + } + &_border { + border: solid black 2px; + width: 100%; + height: 100%; + &--selected { + border-width: 4px; + } + } + &:focus, + &:active, + &--selected { + box-shadow: 0px 0px 0px 4px #ffeb3b; + } + &_placeholder { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 10px; + box-sizing: border-box; + } + &_icon { + height: 9px; + width: auto; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 5px; + box-sizing: border-box; + } + + cursor: pointer; +} diff --git a/app/src/styles/down-chevron.svg b/app/src/styles/down-chevron.svg new file mode 100644 index 000000000..1781fb49f --- /dev/null +++ b/app/src/styles/down-chevron.svg @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file From df0ebf79da971217eaa5065a7d3115aa0eed91fc Mon Sep 17 00:00:00 2001 From: Rio Knightley Date: Thu, 12 Oct 2023 11:45:52 +0100 Subject: [PATCH 02/14] Add open dialog menu --- .../LloydGeorgeRecordPage.tsx | 67 ++++++++++----- app/src/styles/App.scss | 85 +++++++++++-------- 2 files changed, 97 insertions(+), 55 deletions(-) diff --git a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx index af7ca01e3..9814ffa58 100644 --- a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx +++ b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { usePatientDetailsContext } from '../../providers/patientProvider/PatientProvider'; import { getFormattedDate } from '../../helpers/utils/formatDate'; import { useNavigate } from 'react-router'; -import { Card, Details, Select } from 'nhsuk-react-components'; +import { Card, Details } from 'nhsuk-react-components'; import { useBaseAPIUrl } from '../../providers/configProvider/ConfigProvider'; import getLloydGeorgeRecord from '../../helpers/requests/getLloydGeorgeRecord'; import PdfViewer from '../../components/generic/pdfViewer/PdfViewer'; @@ -12,6 +12,7 @@ import formatFileSize from '../../helpers/utils/formatFileSize'; import useBaseAPIHeaders from '../../helpers/hooks/useBaseAPIHeaders'; import { useOnClickOutside } from 'usehooks-ts'; import { ReactComponent as Chevron } from '../../styles/down-chevron.svg'; +import { Link } from 'react-router-dom'; function LloydGeorgeRecordPage() { const [patientDetails] = usePatientDetailsContext(); @@ -25,8 +26,15 @@ function LloydGeorgeRecordPage() { const baseHeaders = useBaseAPIHeaders(); const mounted = useRef(false); const actionsRef = useRef(null); + const [showActionsMenu, setShowActionsMenu] = useState(false); - useOnClickOutside(actionsRef, () => setSelectExpanded(false)); + useOnClickOutside(actionsRef, (e) => { + const el = e?.target as HTMLElement; + const isOutside = !Array.from(el.classList).includes('lg-actions'); + if (isOutside) { + setShowActionsMenu(false); + } + }); const dob: String = patientDetails?.birthDate ? getFormattedDate(new Date(patientDetails.birthDate)) @@ -87,7 +95,6 @@ function LloydGeorgeRecordPage() { setNumberOfFiles, setTotalFileSizeInByte, ]); - const [selectExpanded, setSelectExpanded] = useState(false); const pdfCardDescription = ( <> Last updated: {lastUpdated} @@ -108,32 +115,52 @@ function LloydGeorgeRecordPage() { }; const handleMoreActions = () => { - setSelectExpanded(!selectExpanded); + setShowActionsMenu(!showActionsMenu); }; return ( //nhsuk-select--error <> - -
+
- Select an action... - + ref={actionsRef} + onClick={handleMoreActions} + style={{ background: '#fff' }} + > +
+ Select an action... + +
+ {showActionsMenu && ( + + +
    + {[ + 'See all files', + 'Download all files', + 'Delete a selection of files', + 'Delete file', + ].map((link, i) => ( +
  1. + + {link} + +
    2. + ))} +
+ + + )}
<>{patientInfo} + diff --git a/app/src/styles/App.scss b/app/src/styles/App.scss index f2a51df4e..b00b28b11 100644 --- a/app/src/styles/App.scss +++ b/app/src/styles/App.scss @@ -115,45 +115,60 @@ font-size: 24px; } -.lg-actions-select { - border-color: #000; +.lg-actions { position: relative; - box-sizing: border-box; - border: none; - padding: 0; - width: 182.5px; - @media (max-width: 640px) { - width: 161.5px; - } - &_border { - border: solid black 2px; - width: 100%; - height: 100%; + &-select { + border-color: #000; + position: relative; + box-sizing: border-box; + border: none; + padding: 0; + width: 182.5px; + @media (max-width: 640px) { + width: 161.5px; + } + &_border { + border: solid black 2px; + width: 100%; + height: 100%; + &--selected { + border-width: 4px; + } + } + &:focus, + &:active, &--selected { - border-width: 4px; + box-shadow: 0px 0px 0px 4px #ffeb3b; } + &_placeholder { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 10px; + box-sizing: border-box; + } + &_icon { + height: 9px; + width: auto; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 5px; + box-sizing: border-box; + } + + cursor: pointer; } - &:focus, - &:active, - &--selected { - box-shadow: 0px 0px 0px 4px #ffeb3b; - } - &_placeholder { - position: absolute; - top: 50%; - transform: translateY(-50%); - left: 10px; - box-sizing: border-box; - } - &_icon { - height: 9px; - width: auto; + &-menu { position: absolute; - top: 50%; - transform: translateY(-50%); - right: 5px; - box-sizing: border-box; + z-index: 1000; + width: unset; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); + ol { + li { + font-size: 16px; + list-style-type: none; + } + } } - - cursor: pointer; } From 1ffc356566e440d509964cfa3d7d17b98cb35e7a Mon Sep 17 00:00:00 2001 From: Rio Knightley Date: Thu, 12 Oct 2023 11:47:01 +0100 Subject: [PATCH 03/14] Revert padding remove from card --- app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx index 9814ffa58..dd1ec0388 100644 --- a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx +++ b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx @@ -140,8 +140,8 @@ function LloydGeorgeRecordPage() {
{showActionsMenu && ( - -
    + +
      {[ 'See all files', 'Download all files', From 222aa69711015200c83f669e2074f4faff4adb5d Mon Sep 17 00:00:00 2001 From: Rio Knightley Date: Thu, 12 Oct 2023 15:36:03 +0100 Subject: [PATCH 04/14] Add action links const --- .../LloydGeorgeRecordPage.tsx | 47 +++++++++---------- 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx index dd1ec0388..9c50629e8 100644 --- a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx +++ b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx @@ -29,11 +29,7 @@ function LloydGeorgeRecordPage() { const [showActionsMenu, setShowActionsMenu] = useState(false); useOnClickOutside(actionsRef, (e) => { - const el = e?.target as HTMLElement; - const isOutside = !Array.from(el.classList).includes('lg-actions'); - if (isOutside) { - setShowActionsMenu(false); - } + setShowActionsMenu(false); }); const dob: String = patientDetails?.birthDate @@ -118,6 +114,15 @@ function LloydGeorgeRecordPage() { setShowActionsMenu(!showActionsMenu); }; + const downloadAllHandler = () => {}; + + const actionLinks = [ + { label: 'See all files', handler: () => null }, + { label: 'Download all files', handler: downloadAllHandler }, + { label: 'Delete a selection of files', handler: () => null }, + { label: 'Delete file', handler: () => null }, + ]; + return ( //nhsuk-select--error <> @@ -126,7 +131,6 @@ function LloydGeorgeRecordPage() { className={`nhsuk-select lg-actions-select ${ showActionsMenu ? 'lg-actions-select--selected' : '' }`} - ref={actionsRef} onClick={handleMoreActions} style={{ background: '#fff' }} > @@ -139,24 +143,19 @@ function LloydGeorgeRecordPage() {
{showActionsMenu && ( - - -
    - {[ - 'See all files', - 'Download all files', - 'Delete a selection of files', - 'Delete file', - ].map((link, i) => ( -
  1. - - {link} - -
    2. - ))} -
- - +
+ + +
    + {actionLinks.map((link, i) => ( +
  1. + {link.label} +
    2. + ))} +
+ + +
)}
<>{patientInfo} From 6fd8607a437055e517481dddc2b3592f68bc09ea Mon Sep 17 00:00:00 2001 From: Rio Knightley Date: Thu, 12 Oct 2023 15:38:16 +0100 Subject: [PATCH 05/14] Fix action link style --- app/src/styles/App.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/src/styles/App.scss b/app/src/styles/App.scss index b00b28b11..3a8b9a6f1 100644 --- a/app/src/styles/App.scss +++ b/app/src/styles/App.scss @@ -165,6 +165,7 @@ width: unset; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); ol { + padding-left: 0; li { font-size: 16px; list-style-type: none; From 4e654d03df06a4a821d365463389943e701b50d6 Mon Sep 17 00:00:00 2001 From: AlexHerbertNHS Date: Thu, 12 Oct 2023 16:20:23 +0100 Subject: [PATCH 06/14] PRMDR-279 WIP commit - adding some frontend stuff --- .../LloydGeorgeRecordPage.tsx | 33 ++++++++++++++++--- 1 file changed, 29 insertions(+), 4 deletions(-) diff --git a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx index 9c50629e8..4f6be8b0e 100644 --- a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx +++ b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx @@ -14,6 +14,11 @@ import { useOnClickOutside } from 'usehooks-ts'; import { ReactComponent as Chevron } from '../../styles/down-chevron.svg'; import { Link } from 'react-router-dom'; +enum LG_RECORD_STAGE { + RECORD = 0, + DOWNLOAD_ALL = 1, +} + function LloydGeorgeRecordPage() { const [patientDetails] = usePatientDetailsContext(); const [downloadStage, setDownloadStage] = useState(DOWNLOAD_STAGE.INITIAL); @@ -27,6 +32,7 @@ function LloydGeorgeRecordPage() { const mounted = useRef(false); const actionsRef = useRef(null); const [showActionsMenu, setShowActionsMenu] = useState(false); + const [stage, setStage] = useState(LG_RECORD_STAGE.RECORD); useOnClickOutside(actionsRef, (e) => { setShowActionsMenu(false); @@ -114,7 +120,9 @@ function LloydGeorgeRecordPage() { setShowActionsMenu(!showActionsMenu); }; - const downloadAllHandler = () => {}; + const downloadAllHandler = () => { + setStage(LG_RECORD_STAGE.DOWNLOAD_ALL); + }; const actionLinks = [ { label: 'See all files', handler: () => null }, @@ -123,8 +131,7 @@ function LloydGeorgeRecordPage() { { label: 'Delete file', handler: () => null }, ]; - return ( - //nhsuk-select--error + const RecordStage = () => ( <>
{actionLinks.map((link, i) => (
  • - {link.label} + + {link.label} +
    • ))} @@ -178,6 +187,22 @@ function LloydGeorgeRecordPage() { )} ); + const DownloadAllStage = () => ( + <> +

    Downloading documents

    +

    Alex Cool Bloggs

    +

    NHS number: 1428571428

    + + ); + + switch (stage) { + case LG_RECORD_STAGE.RECORD: + return ; + break; + case LG_RECORD_STAGE.DOWNLOAD_ALL: + return ; + break; + } } export default LloydGeorgeRecordPage; From 132e3b51b9bf0803df5acf627ad505c1fee82806 Mon Sep 17 00:00:00 2001 From: Rio Knightley Date: Fri, 13 Oct 2023 10:50:57 +0100 Subject: [PATCH 07/14] Move action list to description --- .../LloydGeorgeRecordPage.tsx | 106 +++++++++--------- app/src/styles/App.scss | 5 + 2 files changed, 58 insertions(+), 53 deletions(-) diff --git a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx index 4f6be8b0e..a3ae49c30 100644 --- a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx +++ b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx @@ -97,25 +97,6 @@ function LloydGeorgeRecordPage() { setNumberOfFiles, setTotalFileSizeInByte, ]); - const pdfCardDescription = ( - <> - Last updated: {lastUpdated} - - {numberOfFiles} files | File size: {formatFileSize(totalFileSizeInByte)} | File - format: PDF - - - ); - const displayPdfCardDescription = () => { - if (downloadStage === DOWNLOAD_STAGE.SUCCEEDED) { - return pdfCardDescription; - } else if (downloadStage === DOWNLOAD_STAGE.FAILED) { - return 'No documents are available'; - } else { - return 'Loading...'; - } - }; - const handleMoreActions = () => { setShowActionsMenu(!showActionsMenu); }; @@ -131,42 +112,63 @@ function LloydGeorgeRecordPage() { { label: 'Delete file', handler: () => null }, ]; - const RecordStage = () => ( - <> -
    -
    + const PdfCardDescription = () => ( +
    +
    + Last updated: {lastUpdated} + + {numberOfFiles} files | File size: {formatFileSize(totalFileSizeInByte)} | File + format: PDF + +
    +
    +
    - Select an action... - -
    - {showActionsMenu && ( -
    - - -
      - {actionLinks.map((link, i) => ( -
    1. - - {link.label} - -
      2. - ))} -
    -     -     + onClick={handleMoreActions} + style={{ background: '#fff' }} + > +
    + Select an action... +
    - )} + {showActionsMenu && ( +
    + + +
      + {actionLinks.map((link, i) => ( +
    1. + {link.label} +
      2. + ))} +
    +     +     +
    + )} +
    +
    + ); + const displayPdfCardDescription = () => { + if (downloadStage === DOWNLOAD_STAGE.SUCCEEDED) { + return ; + } else if (downloadStage === DOWNLOAD_STAGE.FAILED) { + return No documents are available; + } else { + return Loading...; + } + }; + + const RecordStage = () => ( + <> <>{patientInfo} @@ -198,10 +200,8 @@ function LloydGeorgeRecordPage() { switch (stage) { case LG_RECORD_STAGE.RECORD: return ; - break; case LG_RECORD_STAGE.DOWNLOAD_ALL: return ; - break; } } diff --git a/app/src/styles/App.scss b/app/src/styles/App.scss index 3a8b9a6f1..d1566422a 100644 --- a/app/src/styles/App.scss +++ b/app/src/styles/App.scss @@ -173,3 +173,8 @@ } } } + +.lg-pdf-description { + display: flex; + flex-flow: row nowrap; +} From d30f62c3249c01102d0d113f15bce27c6f1247cb Mon Sep 17 00:00:00 2001 From: Rio Knightley Date: Fri, 13 Oct 2023 11:29:16 +0100 Subject: [PATCH 08/14] Add dropdown to description pdf --- .../LloydGeorgeRecordPage.tsx | 82 +++++++++---------- app/src/styles/App.scss | 15 ++-- 2 files changed, 47 insertions(+), 50 deletions(-) diff --git a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx index a3ae49c30..2073800e6 100644 --- a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx +++ b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx @@ -112,54 +112,52 @@ function LloydGeorgeRecordPage() { { label: 'Delete file', handler: () => null }, ]; - const PdfCardDescription = () => ( -
    -
    - Last updated: {lastUpdated} - + const PdfCardDetails = () => ( + <> +
    +
    Last updated: {lastUpdated}
    +
    {numberOfFiles} files | File size: {formatFileSize(totalFileSizeInByte)} | File format: PDF - +
    -
    -
    +
    +
    -
    - Select an action... - -
    - {showActionsMenu && ( -
    - - -
      - {actionLinks.map((link, i) => ( -
    1. - {link.label} -
      2. - ))} -
    -     -     -
    - )} + /> + Select an action... +
    + {showActionsMenu && ( +
    + + +
      + {actionLinks.map((link, i) => ( +
    1. + {link.label} +
      2. + ))} +
    +     +     +
    + )}
    -
    + ); - const displayPdfCardDescription = () => { + const PdfCardDescription = () => { if (downloadStage === DOWNLOAD_STAGE.SUCCEEDED) { - return ; + return ; } else if (downloadStage === DOWNLOAD_STAGE.FAILED) { return No documents are available; } else { @@ -172,13 +170,11 @@ function LloydGeorgeRecordPage() { <>{patientInfo} - + Lloyd George record - - {displayPdfCardDescription()} - + {downloadStage === DOWNLOAD_STAGE.SUCCEEDED && ( diff --git a/app/src/styles/App.scss b/app/src/styles/App.scss index d1566422a..3fad2d843 100644 --- a/app/src/styles/App.scss +++ b/app/src/styles/App.scss @@ -116,7 +116,9 @@ } .lg-actions { - position: relative; + position: absolute; + top: 32px; + right: 32px; &-select { border-color: #000; position: relative; @@ -127,6 +129,9 @@ @media (max-width: 640px) { width: 161.5px; } + @media (max-width: 480px) { + display: none; + } &_border { border: solid black 2px; width: 100%; @@ -161,8 +166,9 @@ } &-menu { position: absolute; + right: 0px; z-index: 1000; - width: unset; + width: 252.5px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); ol { padding-left: 0; @@ -173,8 +179,3 @@ } } } - -.lg-pdf-description { - display: flex; - flex-flow: row nowrap; -} From 42fa8deb1b4e1cb53343e9392e81e7139ba3f912 Mon Sep 17 00:00:00 2001 From: Rio Knightley Date: Fri, 13 Oct 2023 11:52:34 +0100 Subject: [PATCH 09/14] Fix failing test --- app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx index c8eedfeae..4446bf4fe 100644 --- a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx +++ b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx @@ -158,7 +158,7 @@ function LloydGeorgeRecordPage() { ); const PdfCardDescription = () => { if (downloadStage === DOWNLOAD_STAGE.SUCCEEDED) { - return; + return ; } else if (downloadStage === DOWNLOAD_STAGE.FAILED) { return No documents are available; } else { From 2af6e0d42c961dc39a5bf3adb3c4333f3c71b820 Mon Sep 17 00:00:00 2001 From: Rio Knightley Date: Fri, 13 Oct 2023 12:05:23 +0100 Subject: [PATCH 10/14] Add handler to actions list --- .../lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx index 4446bf4fe..9c09bad57 100644 --- a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx +++ b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx @@ -145,7 +145,15 @@ function LloydGeorgeRecordPage() {
      {actionLinks.map((link, i) => (
    1. - {link.label} + { + e.preventDefault(); + link.handler(); + }} + > + {link.label} +
      2. ))}
    From c57cc17ab45468c9dc22d2c13d9b54971ab017b8 Mon Sep 17 00:00:00 2001 From: Rio Knightley Date: Fri, 13 Oct 2023 12:33:18 +0100 Subject: [PATCH 11/14] Migrate pdf record into new component --- .../blocks/lgRecordStage/LgRecordStage.tsx | 183 ++++++++++++++++++ .../LloydGeorgeRecordPage.tsx | 180 ++--------------- 2 files changed, 204 insertions(+), 159 deletions(-) create mode 100644 app/src/components/blocks/lgRecordStage/LgRecordStage.tsx diff --git a/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx b/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx new file mode 100644 index 000000000..64c108eda --- /dev/null +++ b/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx @@ -0,0 +1,183 @@ +import React, { Dispatch, SetStateAction, 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; + setShowActionsMenu: Dispatch>; + showActionsMenu: boolean; +}; + +function LgRecordStage({ + patientDetails, + downloadStage, + lloydGeorgeUrl, + lastUpdated, + numberOfFiles, + totalFileSizeInByte, + showActionsMenu, + setShowActionsMenu, + actionLinks, +}: Props) { + const [fullScreen, setFullScreen] = useState(false); + const handleMoreActions = () => { + setShowActionsMenu(!showActionsMenu); + }; + + 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 = () => ( + <> +
    +
    Last updated: {lastUpdated}
    +
    + {numberOfFiles} files | File size: {formatFileSize(totalFileSizeInByte)} | File + format: PDF +
    +
    +
    +
    +
    + Select an action... + +
    + {showActionsMenu && ( +
    + + +
      + {actionLinks.map((link, i) => ( +
    1. + { + e.preventDefault(); + link.handler(); + }} + > + {link.label} + +
      2. + ))} +
    +     +     +
    + )} +
    + + ); + + const PdfCardDescription = () => { + if (downloadStage === DOWNLOAD_STAGE.SUCCEEDED) { + return ; + } else if (downloadStage === DOWNLOAD_STAGE.FAILED) { + return No documents are available; + } else { + return Loading...; + } + }; + + return ( + <> + {fullScreen && ( + { + setFullScreen(false); + }} + > + Go back + + )} + <> +

    + {`${patientDetails?.givenName} ${patientDetails?.familyName}`} +

    +

    NHS number: {nhsNumber}

    +

    Date of birth: {dob}

    + + {!fullScreen ? ( + <> + + + + Lloyd George record + + + + + {downloadStage === DOWNLOAD_STAGE.SUCCEEDED && ( + <> +
    + + View record + + + +
    + + )} + + ) : ( + + )} + + ); +} + +export default LgRecordStage; diff --git a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx index 9c09bad57..f4bbe39c8 100644 --- a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx +++ b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx @@ -1,24 +1,21 @@ import React, { useEffect, useRef, useState } from 'react'; import { usePatientDetailsContext } from '../../providers/patientProvider/PatientProvider'; -import { getFormattedDate } from '../../helpers/utils/formatDate'; import { useNavigate } from 'react-router'; -import { BackLink, Card, Details } from 'nhsuk-react-components'; import { useBaseAPIUrl } from '../../providers/configProvider/ConfigProvider'; -import PdfViewer from '../../components/generic/pdfViewer/PdfViewer'; import { DOWNLOAD_STAGE } from '../../types/generic/downloadStage'; -import formatFileSize from '../../helpers/utils/formatFileSize'; import useBaseAPIHeaders from '../../helpers/hooks/useBaseAPIHeaders'; -import { useOnClickOutside } from 'usehooks-ts'; -import { ReactComponent as Chevron } from '../../styles/down-chevron.svg'; -import { Link } from 'react-router-dom'; import { getFormattedDatetime } from '../../helpers/utils/formatDatetime'; import getLloydGeorgeRecord from '../../helpers/requests/getLloydGeorgeRecord'; +import LgRecordStage from '../../components/blocks/lgRecordStage/LgRecordStage'; enum LG_RECORD_STAGE { RECORD = 0, DOWNLOAD_ALL = 1, } - +export type PdfActionLink = { + label: string; + handler: () => void; +}; function LloydGeorgeRecordPage() { const [patientDetails] = usePatientDetailsContext(); const [downloadStage, setDownloadStage] = useState(DOWNLOAD_STAGE.INITIAL); @@ -26,40 +23,13 @@ function LloydGeorgeRecordPage() { const [totalFileSizeInByte, setTotalFileSizeInByte] = useState(0); const [lastUpdated, setLastUpdated] = useState(''); const [lloydGeorgeUrl, setLloydGeorgeUrl] = useState(''); - const [fullScreen, setFullScreen] = useState(false); const navigate = useNavigate(); const baseUrl = useBaseAPIUrl(); const baseHeaders = useBaseAPIHeaders(); const mounted = useRef(false); - const actionsRef = useRef(null); const [showActionsMenu, setShowActionsMenu] = useState(false); const [stage, setStage] = useState(LG_RECORD_STAGE.RECORD); - useOnClickOutside(actionsRef, (e) => { - setShowActionsMenu(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 patientInfo = ( - <> -

    - {`${patientDetails?.givenName} ${patientDetails?.familyName}`} -

    -

    NHS number: {nhsNumber}

    -

    Date of birth: {dob}

    - - ); - useEffect(() => { const search = async () => { setDownloadStage(DOWNLOAD_STAGE.PENDING); @@ -98,139 +68,17 @@ function LloydGeorgeRecordPage() { setNumberOfFiles, setTotalFileSizeInByte, ]); - const handleMoreActions = () => { - setShowActionsMenu(!showActionsMenu); - }; - const downloadAllHandler = () => { setStage(LG_RECORD_STAGE.DOWNLOAD_ALL); }; - const actionLinks = [ + const actionLinks: Array = [ { label: 'See all files', handler: () => null }, { label: 'Download all files', handler: downloadAllHandler }, { label: 'Delete a selection of files', handler: () => null }, { label: 'Delete file', handler: () => null }, ]; - const PdfCardDetails = () => ( - <> -
    -
    Last updated: {lastUpdated}
    -
    - {numberOfFiles} files | File size: {formatFileSize(totalFileSizeInByte)} | File - format: PDF -
    -
    -
    -
    -
    - Select an action... - -
    - {showActionsMenu && ( -
    - - -
      - {actionLinks.map((link, i) => ( -
    1. - { - e.preventDefault(); - link.handler(); - }} - > - {link.label} - -
      2. - ))} -
    -     -     -
    - )} -
    - - ); - const PdfCardDescription = () => { - if (downloadStage === DOWNLOAD_STAGE.SUCCEEDED) { - return ; - } else if (downloadStage === DOWNLOAD_STAGE.FAILED) { - return No documents are available; - } else { - return Loading...; - } - }; - - const RecordStage = () => ( - <> - {fullScreen && ( - { - setFullScreen(false); - }} - > - Go back - - )} - <>{patientInfo} - {!fullScreen ? ( - <> - - - - Lloyd George record - - - - - {downloadStage === DOWNLOAD_STAGE.SUCCEEDED && ( - <> -
    - - View record - - - -
    - - )} - - ) : ( - - )} - - ); const DownloadAllStage = () => ( <>

    Downloading documents

    @@ -241,7 +89,21 @@ function LloydGeorgeRecordPage() { switch (stage) { case LG_RECORD_STAGE.RECORD: - return ; + return ( + patientDetails && ( + + ) + ); case LG_RECORD_STAGE.DOWNLOAD_ALL: return ; } From 04504a37ac72adf1c661a9a2a11b34367c678245 Mon Sep 17 00:00:00 2001 From: Rio Knightley Date: Fri, 13 Oct 2023 15:33:50 +0100 Subject: [PATCH 12/14] Update state for dialog --- app/src/components/blocks/lgRecordStage/LgRecordStage.tsx | 7 ++----- .../pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx | 3 --- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx b/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx index 64c108eda..40854a770 100644 --- a/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx +++ b/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx @@ -1,4 +1,4 @@ -import React, { Dispatch, SetStateAction, useRef, useState } from 'react'; +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'; @@ -18,8 +18,6 @@ type Props = { numberOfFiles: number; totalFileSizeInByte: number; actionLinks: Array; - setShowActionsMenu: Dispatch>; - showActionsMenu: boolean; }; function LgRecordStage({ @@ -29,8 +27,6 @@ function LgRecordStage({ lastUpdated, numberOfFiles, totalFileSizeInByte, - showActionsMenu, - setShowActionsMenu, actionLinks, }: Props) { const [fullScreen, setFullScreen] = useState(false); @@ -38,6 +34,7 @@ function LgRecordStage({ setShowActionsMenu(!showActionsMenu); }; + const [showActionsMenu, setShowActionsMenu] = useState(false); const dob: String = patientDetails?.birthDate ? getFormattedDate(new Date(patientDetails.birthDate)) : ''; diff --git a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx index f4bbe39c8..12a465f67 100644 --- a/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx +++ b/app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx @@ -27,7 +27,6 @@ function LloydGeorgeRecordPage() { const baseUrl = useBaseAPIUrl(); const baseHeaders = useBaseAPIHeaders(); const mounted = useRef(false); - const [showActionsMenu, setShowActionsMenu] = useState(false); const [stage, setStage] = useState(LG_RECORD_STAGE.RECORD); useEffect(() => { @@ -98,8 +97,6 @@ function LloydGeorgeRecordPage() { lloydGeorgeUrl={lloydGeorgeUrl} patientDetails={patientDetails} downloadStage={downloadStage} - showActionsMenu={showActionsMenu} - setShowActionsMenu={setShowActionsMenu} actionLinks={actionLinks} /> ) From 3ccb33a7a350f954ba4d9d3b4b3126b2db0f367c Mon Sep 17 00:00:00 2001 From: Rio Knightley Date: Fri, 13 Oct 2023 16:05:34 +0100 Subject: [PATCH 13/14] Restore removed cy labels --- .../blocks/lgRecordStage/LgRecordStage.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx b/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx index 40854a770..54fd1aafb 100644 --- a/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx +++ b/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx @@ -124,13 +124,17 @@ function LgRecordStage({ Go back )} - <> -

    +

    +

    {`${patientDetails?.givenName} ${patientDetails?.familyName}`}

    -

    NHS number: {nhsNumber}

    -

    Date of birth: {dob}

    - +

    + NHS number: {nhsNumber} +

    +

    + Date of birth: {dob} +

    +
    {!fullScreen ? ( <> From 15a4d37662eb548107c7e2d0705ba6f10f5bee25 Mon Sep 17 00:00:00 2001 From: Rio Knightley Date: Fri, 13 Oct 2023 16:23:54 +0100 Subject: [PATCH 14/14] Add missing data cy tags --- .../components/blocks/lgRecordStage/LgRecordStage.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx b/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx index 54fd1aafb..dc953fc43 100644 --- a/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx +++ b/app/src/components/blocks/lgRecordStage/LgRecordStage.tsx @@ -116,6 +116,7 @@ function LgRecordStage({ <> {fullScreen && ( { setFullScreen(false); @@ -138,7 +139,7 @@ function LgRecordStage({ {!fullScreen ? ( <> - + Lloyd George record @@ -152,7 +153,10 @@ function LgRecordStage({ open style={{ position: 'relative', borderTop: 'none' }} > - + View record