DocumentLibraryView

__tests__/helpers/query-all-survey-files.test.ts

@@ -0,0 +1,115 @@
+import { deleteSurveyResultFiles, queryAllSurveyFiles, SurveyUploadedFile } from  "../../src/helpers";
+import MyDataHelps, { SurveyAnswer } from '@careevolution/mydatahelps-js';
+
+jest.mock('@careevolution/mydatahelps-js', () => {
+    const answers : SurveyAnswer[] = [
+        {id: "abc123", surveyResultID: "abc123", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2021-01-01", stepIdentifier: "step1", resultIdentifier: "fileName", answers: ["Colonoscopy Report"], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "def456", surveyResultID: "abc123", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2021-01-01", stepIdentifier: "step1", resultIdentifier: "file", answers: ["Colon.txt"], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "ghi789", surveyResultID: "abc123", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2021-01-01", stepIdentifier: "step1", resultIdentifier: "fileNotes", answers: ["Notes on colonoscopy"], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "jkl012", surveyResultID: "abc123", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2021-01-01", stepIdentifier: "step1", resultIdentifier: "fileType", answers: ["Other"], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "mno345", surveyResultID: "abc123", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2021-01-01", stepIdentifier: "step1", resultIdentifier: "fileDate", answers: ["2025-01-01"], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "pqr678", surveyResultID: "pqr678", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2021-01-01", stepIdentifier: "step1", resultIdentifier: "fileName", answers: ["BCBS Insurance"], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "stu901", surveyResultID: "pqr678", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2021-01-01", stepIdentifier: "step1", resultIdentifier: "file", answers: ["BCBS.png"], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "vwx234", surveyResultID: "pqr678", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2021-01-01", stepIdentifier: "step1", resultIdentifier: "fileNotes", answers: [], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "yza567", surveyResultID: "pqr6789", surveyName: "wrong-test-survey", surveyDisplayName: "Test Survey", date: "2021-01-01", stepIdentifier: "step1", resultIdentifier: "fileType", answers: ["Insurance"], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "bcd890", surveyResultID: "pqr678", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2021-01-01", stepIdentifier: "step1", resultIdentifier: "fileDate", answers: ["2025-02-01"], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "efg123", surveyResultID: "pqr678", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2021-01-01", stepIdentifier: "step1", resultIdentifier: "result11", answers: ["answer11"], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "a3c123", surveyResultID: "456abc", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2025-01-01", stepIdentifier: "step1", resultIdentifier: "fileName", answers: ["Mammography Report"], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "d3f456", surveyResultID: "456abc", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2025-01-01", stepIdentifier: "step1", resultIdentifier: "file", answers: ["TestsResults.pdf"], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "g3i789", surveyResultID: "456abc", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2025-01-01", stepIdentifier: "step1", resultIdentifier: "fileNotes", answers: ["These are in the portal"], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "j3l012", surveyResultID: "456abc", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2025-01-01", stepIdentifier: "step1", resultIdentifier: "fileType", answers: ["Results"], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+        {id: "m3o345", surveyResultID: "456abc", surveyName: "test-survey", surveyDisplayName: "Test Survey", date: "2024-01-01", stepIdentifier: "step1", resultIdentifier: "fileDate", answers: [""], insertedDate: "2021-01-01", surveyID: "123456", surveyVersion: 1},
+    ];
+
+    const answersPage = {
+        surveyAnswers: answers
+    };
+
+    return {
+        __esModule: true,
+        default: {
+            token: { access_token: '1' },
+            getCurrentLanguage: () => jest.fn(),
+            deleteSurveyResult: jest.fn().mockResolvedValue(undefined),
+            deleteFile: jest.fn().mockResolvedValue(undefined),
+            querySurveyAnswers: jest.fn(() => {
+                return Promise.resolve(answersPage);
+            }),
+            on: jest.fn(),
+            off: jest.fn()
+        }
+    }
+});
+
+afterEach(() => {
+    jest.clearAllMocks();
+});
+
+const colonoscopyReport : SurveyUploadedFile = {
+    surveyResultId: "abc123",
+    fileCategory: "surveyresult_abc123",
+    title: "Colonoscopy Report",
+    fileName: "Colon.txt",
+    type: "Other",
+    notes: "Notes on colonoscopy",
+    date: new Date("2025-01-01T00:00:00")
+};
+
+const mammographyReport : SurveyUploadedFile = {
+    surveyResultId: "456abc",
+    fileCategory: "surveyresult_456abc",
+    title: "Mammography Report",
+    fileName: "TestsResults.pdf",
+    type: "Results",
+    notes: "These are in the portal",
+    date: new Date("2024-01-01T00:00:00") //confirms use of result date when answer not on file
+};
+
+const emptyOptionalFieldsReport : SurveyUploadedFile = {
+    surveyResultId: "pqr678",
+    fileCategory: "surveyresult_pqr678",
+    title: "BCBS Insurance",
+    fileName: "BCBS.png",
+    date: new Date("2025-02-01T00:00:00")
+};
+
+test("a SurveyUploadedFile is returned when all required fields are on file", async () => {
+    const surveyFiles = await queryAllSurveyFiles({
+        uploadDocumentSurveyName: "test-survey",
+        fileResultIdentifier: "file",
+        typeResultIdentifier: "fileType",
+        nameResultIdentifier: "fileName",
+        dateResultIdentifier: "fileDate",
+        notesResultIdentifier: "fileNotes"
+    });
+
+    expect(surveyFiles).toHaveLength(3);
+    expect(surveyFiles).toContainEqual(mammographyReport);
+    expect(surveyFiles).toContainEqual(colonoscopyReport);
+    expect(surveyFiles).toContainEqual(emptyOptionalFieldsReport);
+});
+
+test("should call both MyDataHelps.deleteSurveyResult and MyDataHelps.deleteFile", async () => {
+    await deleteSurveyResultFiles("test-id", "test-file-key");
+    expect(MyDataHelps.deleteSurveyResult).toHaveBeenCalledWith("test-id");
+    expect(MyDataHelps.deleteFile).toHaveBeenCalledWith("test-file-key");
+});
+
+test("should not delete file if MyDataHelps.deleteSurveyResult fails", async () => {
+    (MyDataHelps.deleteSurveyResult as jest.Mock).mockRejectedValueOnce(new Error("Failed to delete survey result"));
+    await deleteSurveyResultFiles("test-id", "test-file-key");
+    expect(MyDataHelps.deleteSurveyResult).toHaveBeenCalledWith("test-id");
+    expect(MyDataHelps.deleteFile).toHaveBeenCalledTimes(0);
+});
+
+test("should not call either MyDataHelps.deleteSurveyResult and MyDataHelps.deleteFile if surveyResultId is empty string", async () => {
+    await deleteSurveyResultFiles("", "test-file-key");
+    expect(MyDataHelps.deleteSurveyResult).toHaveBeenCalledTimes(0);
+    expect(MyDataHelps.deleteFile).toHaveBeenCalledTimes(0);
+});
+
+test("should not call either MyDataHelps.deleteSurveyResult and MyDataHelps.deleteFile if fileKey is empty string", async () => {
+    await deleteSurveyResultFiles("test-id", "");
+    expect(MyDataHelps.deleteSurveyResult).toHaveBeenCalledTimes(0);
+    expect(MyDataHelps.deleteFile).toHaveBeenCalledTimes(0);
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@careevolution/mydatahelps-ui",
-  "version": "2.72.0",
+  "version": "2.72.1-DocumentLibaryView.15",
   "description": "MyDataHelps UI Library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/components/container/DocumentLibraryPreview/DocumentLibraryPreview.css

@@ -0,0 +1,4 @@
+.mdhui-document-library-preview .file-title {
+    font-size: .88em;
+    color: var(--mdhui-text-color-2);
+}

src/components/container/DocumentLibraryPreview/DocumentLibraryPreview.previewData.ts

@@ -0,0 +1,7 @@
+export function getPreviewData(): string[] {
+    return [
+        "Insurance Card",
+        "Mammogram Results",
+        "Blood Test Results",
+    ];
+}

src/components/container/DocumentLibraryPreview/DocumentLibraryPreview.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Description } from "@storybook/blocks"
+import DocumentLibraryPreview, { DocumentLibraryPreviewProps } from "./DocumentLibraryPreview";
+import { Layout } from "../../presentational";
+
+const meta: Meta<typeof DocumentLibraryPreview> = {
+    title: "Container/DocumentLibraryPreview",
+    component: DocumentLibraryPreview,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            Description: <Description />
+        }
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof DocumentLibraryPreview>;
+
+const render = (args: DocumentLibraryPreviewProps) =>
+    <Layout colorScheme="auto">
+        <DocumentLibraryPreview {...args} />
+    </Layout>;
+
+const defaultProps: DocumentLibraryPreviewProps = {
+    uploadDocumentSurveyName: 'UploadDocument',
+    fileResultIdentifier: 'document',
+    typeResultIdentifier: 'document_type',
+    nameResultIdentifier: 'document_name',
+    dateResultIdentifier: 'document_date',
+    notesResultIdentifier: 'document_notes',
+    documentLibraryViewBaseUrl: ''
+};
+
+export const NoUploadedFiles: Story = {
+    args: { ...defaultProps, preview: 'PreviewNoDocuments' },
+    render: render
+};
+
+export const UploadedFiles: Story = {
+    args: { ...defaultProps, preview: 'PreviewDocuments' },
+    render: render
+};
+
+export const Loading: Story = {
+    args: { ...defaultProps, preview: 'PreviewLoading' },
+    render: render
+};
+
+export const Live: Story = {
+    args: { ...defaultProps },
+    render: render
+};

src/components/container/DocumentLibraryPreview/DocumentLibraryPreview.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { language, queryAllSurveyFiles, SurveyUploadedFile, SurveyUploadedFileQueryParameters, useInitializeView } from "../../../helpers";
+import { Action, Button, Card, LoadingIndicator } from "../../presentational";
+import { FontAwesomeSvgIcon } from "react-fontawesome-svg-icon";
+import { faCamera } from "@fortawesome/free-solid-svg-icons";
+import MyDataHelps from "@careevolution/mydatahelps-js";
+import { getPreviewData } from "./DocumentLibraryPreview.previewData";
+import "./DocumentLibraryPreview.css";
+import { noop } from "../../../helpers/functions";
+
+export interface DocumentLibraryPreviewProps {
+    preview?: "PreviewNoDocuments" | "PreviewDocuments" | "PreviewLoading",
+    uploadDocumentSurveyName: string,
+    fileResultIdentifier: string,
+    typeResultIdentifier: string,
+    nameResultIdentifier: string,
+    dateResultIdentifier: string,
+    notesResultIdentifier: string,
+    documentLibraryViewBaseUrl: string,
+    innerRef?: React.Ref<HTMLDivElement>;
+}
+
+export default function DocumentLibraryPreview(props: DocumentLibraryPreviewProps) {
+    const [surveyFiles, setSurveyFiles] = React.useState<string[] | undefined>(undefined);
+    const [surveyCount, setSurveyCount] = React.useState<number>(0);
+
+    async function initialize() {
+        if (props.preview) {
+            if (props.preview === "PreviewNoDocuments") {
+                setSurveyCount(0);
+                setSurveyFiles([]);
+            } else if (props.preview === "PreviewDocuments") {
+                setSurveyCount(6);
+                setSurveyFiles(getPreviewData());
+            }
+            return;
+        }
+
+        const params: SurveyUploadedFileQueryParameters = {
+            uploadDocumentSurveyName: props.uploadDocumentSurveyName,
+            fileResultIdentifier: props.fileResultIdentifier,
+            typeResultIdentifier: props.typeResultIdentifier,
+            nameResultIdentifier: props.nameResultIdentifier,
+            dateResultIdentifier: props.dateResultIdentifier,
+            notesResultIdentifier: props.notesResultIdentifier
+        };
+
+        queryAllSurveyFiles({ ...params }).then((uploadedFiles: SurveyUploadedFile[]) => {
+            const sortedFiles = uploadedFiles.sort((a, b) => {
+                return a.date > b.date ? -1 : 1;
+            });
+
+            setSurveyCount(uploadedFiles.length);
+            const top3Files = sortedFiles.slice(0, 3).map((file: SurveyUploadedFile, index: number) =>
+                file.title
+            );
+            setSurveyFiles(top3Files);
+        });
+    }
+
+    const onShowDocumentLibraryClick = () => {
+        if (props.preview || !props.documentLibraryViewBaseUrl) {
+            console.log("onShowDocumentLibraryClick");
+            return;
+        }
+
+        const params = new URLSearchParams({
+            uploadDocumentSurveyName: props.uploadDocumentSurveyName,
+            fileResultIdentifier: props.fileResultIdentifier,
+            typeResultIdentifier: props.typeResultIdentifier,
+            nameResultIdentifier: props.nameResultIdentifier,
+            dateResultIdentifier: props.dateResultIdentifier,
+            notesResultIdentifier: props.notesResultIdentifier
+        });
+
+        const separator = props.documentLibraryViewBaseUrl.includes('?') ? '&' : '?';
+        const documentLibraryViewUrl = `${props.documentLibraryViewBaseUrl}${separator}${params.toString()}`;
+        MyDataHelps.openApplication(documentLibraryViewUrl);
+    }
+
+    const onUploadClick = () => {
+        if (props.preview) {
+            console.log("onUploadClick");
+            return;
+        }
+
+        MyDataHelps.startSurvey(props.uploadDocumentSurveyName);
+    }
+
+    useInitializeView(() => {
+        initialize();
+    }, [], []);
+
+    return (
+        <div ref={props.innerRef} className="mdhui-document-library-preview">
+            {!surveyFiles && <LoadingIndicator />}
+            {surveyFiles &&
+                <Card>
+                    <Action title={` ${language("uploaded-documents")}`}
+                        renderAs="div"
+                        className="font-size"
+                        indicatorPosition="default"
+                        subtitle={surveyFiles.length === 0
+                            ? language("upload-documents-subtitle")
+                            : ""}
+                        titleIcon={<FontAwesomeSvgIcon icon={faCamera} />}
+                        indicatorValue={surveyCount > 0 ? surveyCount.toString() : undefined}
+                        onClick={surveyFiles.length === 0
+                            ? undefined :
+                            onShowDocumentLibraryClick}
+                        indicator={surveyFiles.length === 0
+                            ? <Button variant="default" fullWidth={false} onClick={onUploadClick}>{language("upload")}</Button>
+                            : undefined}
+                    >
+                        {surveyFiles.length > 0
+                            ? surveyFiles.map((file, index) => <div className="file-title" key={index}>{file}</div>)
+                            : undefined
+                        }
+                    </Action>
+                </Card>
+            }
+        </div>
+    )
+}

src/components/container/DocumentLibraryPreview/index.ts

@@ -0,0 +1 @@
+export { default } from "./DocumentLibraryPreview";

src/components/container/SurveyTaskList/SurveyTaskList.previewdata.tsx

@@ -37,7 +37,7 @@ export var previewIncompleteTasks: SurveyTask[] =
 			"surveyDescription": "10 minutes",
 			"status": "incomplete",
 			"hasSavedProgress": false,
-			"dueDate": null,
+			"dueDate": undefined,
 			"insertedDate": "2022-03-15T16:56:26.703Z",
 			"modifiedDate": "2022-03-15T16:56:26.703Z",
 			linkIdentifier: "1"

src/components/container/index.ts

@@ -14,6 +14,7 @@ export { default as DailyDataChart } from "./DailyDataChart"
 export { default as DailyDataGoal } from "./DailyDataGoal"
 export { default as DeviceDataMonthChart, DeviceDataChartLine } from "./DeviceDataMonthChart"
 export { default as DeviceDataMonthCharts } from "./DeviceDataMonthCharts"
+export { default as DocumentLibraryPreview } from "./DocumentLibraryPreview"
 export { default as EhrNewsFeed, EhrNewsFeedEventReference } from "./EhrNewsFeed"
 export { default as EhrNewsFeedEventDetail } from "./EhrNewsFeedEventDetail"
 export { default as ExternalAccountConnectionAlert } from "./ExternalAccountConnectionAlert"