diff --git a/frontend/e2e/App.spec.ts b/frontend/e2e/App.spec.ts index 35de4648..30a3d4d4 100644 --- a/frontend/e2e/App.spec.ts +++ b/frontend/e2e/App.spec.ts @@ -1,12 +1,6 @@ import { test, expect } from '@playwright/test'; -test.beforeEach(async ({ page }) => { - await page.route("*/**/templates", async (route) => { - route.fulfill({}); - }) -}); - test('has STLT Name', async ({ page }) => { await page.goto('/'); @@ -24,45 +18,40 @@ test('has new template button', async ({ page , baseURL}) => { test.describe('when templates exist', async () => { test.beforeEach(async ({page}) => { - await page.route("*/**/templates", async (route) => { - route.fulfill({ - status: 200, - body: JSON.stringify({ - _embedded: { - templates: [ - { - name: "MumpsQuestV1", - lab: "Quest", - createdBy: "J.Smith", - status: "Completed", - updatedAt: new Date(Date.parse("2025-03-24T12:00:00.000-05:00")) - }, - { - name: "LBTIRadar", - lab: "Radar", - createdBy: "C.Alex", - status: "Completed", - updatedAt: new Date(Date.parse("2025-05-30T12:00:00.000-05:00")) - }, - { - name: "COVIDBaylor1", - lab: "Emory", - createdBy: "A.Bryant", - status: "Completed", - updatedAt: new Date(Date.parse("2025-06-21T12:00:00.000-05:00")) - }, - { - name: "COVIDEMory", - lab: "Baylor", - createdBy: "D.Smith", - status: "Completed", - updatedAt: new Date(Date.parse("2024-06-21T12:00:00.000-05:00")) - }, - ] - } - }) - }) - }); + await page.goto('/') + await page.evaluate(() => { + const templates = [ + { + name: "MumpsQuestV1", + lab: "Quest", + createdBy: "J.Smith", + status: "Completed", + lastUpdated: new Date(Date.parse("2025-03-24T12:00:00.000-05:00")) + }, + { + name: "LBTIRadar", + lab: "Radar", + createdBy: "C.Alex", + status: "Completed", + lastUpdated: new Date(Date.parse("2025-05-30T12:00:00.000-05:00")) + }, + { + name: "COVIDBaylor1", + lab: "Emory", + createdBy: "A.Bryant", + status: "Completed", + lastUpdated: new Date(Date.parse("2025-06-21T12:00:00.000-05:00")) + }, + { + name: "COVIDEMory", + lab: "Baylor", + createdBy: "D.Smith", + status: "Completed", + lastUpdated: new Date(Date.parse("2024-06-21T12:00:00.000-05:00")) + }, + ]; + localStorage.setItem('templates', JSON.stringify(templates)) + }) }) test('displays list of templates if they exist and sorting functions', async ({page}) => { await page.goto('/') diff --git a/frontend/src/components/ExtractUploadFile.tsx b/frontend/src/components/ExtractUploadFile.tsx index 0c7f25bb..e9590b19 100644 --- a/frontend/src/components/ExtractUploadFile.tsx +++ b/frontend/src/components/ExtractUploadFile.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, useId, useState } from "react"; +import React, { ChangeEvent, useEffect, useId, useState } from "react"; import { Button, Select } from "@trussworks/react-uswds"; import { useFiles } from "../contexts/FilesContext"; import { useNavigate } from "react-router-dom"; @@ -24,23 +24,23 @@ interface IFilesObj { files: File[]; } -// interface Template { -// name: string; -// description: string; -// pages: { -// image: string; -// fieldNames: string[]; -// }[]; -// } +interface Template { + name: string; + description: string; + pages: { + image: string; + fieldNames: string[]; + }[]; +} export const ExtractUploadFile: React.FC = ({ onUploadComplete, }) => { const id = useId(); - const { addFile, files, setSelectedTemplates, selectedTemplates , clearTemplates} = useFiles(); + const { addFile, files, setSelectedTemplates, selectedTemplates , clearTemplates,} = useFiles(); const navigate = useNavigate(); - // const [templates, setTemplates] = useState([]); - const templates = useQuery( + const [templates, setTemplates] = useState([]); + const _templates = useQuery( { queryKey: ['templates'], queryFn: TemplateAPI.getTemplates @@ -49,6 +49,49 @@ export const ExtractUploadFile: React.FC = ({ const [isUploadComplete, setIsUploadComplete] = useState(false); const [uploadedFile, setUploadedFile] = useState([]); + const loadTemplatesTestData = () => { + const sampleTemplates: Template[] = [ + { + name: "Test Template COVID", + description: "This is the first sample template.", + pages: [ + { + image: "base64encodedimage1", + fieldNames: ["patient_name", "patient_dob"], + }, + ], + }, + { + name: "Test Template Syph", + description: "This is the second sample template.", + pages: [ + { + image: "base64encodedimage2", + fieldNames: ["patient_name", "address"], + }, + ], + }, + ]; + setTemplates(sampleTemplates); + }; + + + useEffect(() => { + // Load templates from local storage, and if none are found, load test data + const loadTemplatesFromLocalStorage = () => { + const storedTemplates = localStorage.getItem("templates"); + if (_templates.length > 0) { + setTemplates(_templates); + } else if (storedTemplates) { + const parsedTemplates = JSON.parse(storedTemplates); + setTemplates(parsedTemplates); + } else { + loadTemplatesTestData(); + } + }; + loadTemplatesFromLocalStorage(); + + }, []); const simulateFileUpload = async(files: File[]) => { onUploadComplete(true); files.forEach(file => addFile(file)); diff --git a/frontend/src/components/TemplatesIndex/TemplatesIndex.tsx b/frontend/src/components/TemplatesIndex/TemplatesIndex.tsx index 9d7727f0..0d45ea8d 100644 --- a/frontend/src/components/TemplatesIndex/TemplatesIndex.tsx +++ b/frontend/src/components/TemplatesIndex/TemplatesIndex.tsx @@ -19,16 +19,25 @@ export const TemplatesIndex: FC = () => { } ) useEffect(() => { - const templatesJSON = localStorage.getItem("templates") - setTemplates(JSON.parse(templatesJSON)) - }, []); - + const getTemplates = async () => { + const templatesJSON = localStorage.getItem("templates") || "[]" + if (templateQuery.data && templateQuery.data?.length > 0) { + setTemplates(templateQuery.data as []) + } else if (templatesJSON) { + setTemplates(JSON.parse(templatesJSON).map(template => ({ ...template, updatedAt: template.lastUpdated }))) + } else { + setTemplates([]) + } + } + getTemplates(); + }, [templateQuery.data]); + useEffect(() => { const localStorageEvent = (event) => { if (event.storageArea === localStorage) { const templatesJSON = localStorage.getItem("templates") - setTemplates(JSON.parse(templatesJSON)) + setTemplates(JSON.parse(templatesJSON || '[]')) } } window.addEventListener("storage", localStorageEvent, false) @@ -42,6 +51,8 @@ export const TemplatesIndex: FC = () => { const templateColumnNames = { 'name': 'Name', 'labName': 'Lab', + 'lab': 'Lab', + 'createdBy': 'Creator', 'status': 'Status', 'updatedAt': 'Updated On' } @@ -55,15 +66,64 @@ export const TemplatesIndex: FC = () => { } return new Date(date).toLocaleDateString() + }, + 'lastUpdated': (d) => { + const date = Date.parse(d) + if (isNaN(date)) { + return new Date().toLocaleDateString() + } + return new Date(date).toLocaleDateString() + } } const templateColumns = [ - 'name', 'updatedAt', 'createdBy', 'labName', 'status' + 'name', 'updatedAt', 'createdBy', 'lab', 'status', 'labName' ] + useEffect(() => { + console.debug(` + The following methods have been added to the window: + + LoadNiceTemplates - this will load some pre-formatted templates that display nicely + SaveTemplates - this will save the current templates to 'oldTemplates' + LoadSavedTemplates - this will load the templates saved in 'oldTemplates' + ClearTemplates - this will delete the current templates + + `) + window.LoadNiceTemplates = () => { + const oldTemplates = localStorage.getItem('templates') + localStorage.setItem('oldTemplates', oldTemplates) + localStorage.setItem('templates', JSON.stringify(templates2)) + setTemplates(templates2) + } + window.SaveTemplates = () => { + const oldTemplates = localStorage.getItem('templates') + if (!oldTemplates) { + return + } + localStorage.setItem('oldTemplates', oldTemplates) + } + window.ClearTemplates = () => { + localStorage.removeItem('templates') + setTemplates([]) + } + window.LoadSavedTemplates = () => { + const oldTemplates = localStorage.getItem('oldTemplates') + if (oldTemplates) { + localStorage.setItem('templates', oldTemplates) + setTemplates(JSON.parse(oldTemplates)) + } + } + return () => { + delete window.LoadNiceTemplates + delete window.SaveTemplates + delete window.ClearTemplates + delete window.LoadSavedTemplates + } + }); - if (!templateQuery.data || templateQuery.data.length === 0) { + if (!templates || templates.length === 0) { return ( <> = () => {

Saved Templates

-