From 4645a73eb87f2cea9526634492866069b3a2a3d4 Mon Sep 17 00:00:00 2001 From: benjaminjohnson2204 Date: Tue, 27 Feb 2024 09:52:31 -0800 Subject: [PATCH] Clean up CSS & integrate w/ backend --- frontend/src/api/VSRs.ts | 10 +- frontend/src/app/staff/vsr/page.module.css | 31 +--- frontend/src/app/staff/vsr/page.tsx | 4 +- .../src/components/SearchKeyword.module.css | 10 -- frontend/src/components/SearchKeyword.tsx | 2 +- frontend/src/components/VSRTable.tsx | 137 ++++++------------ 6 files changed, 57 insertions(+), 137 deletions(-) diff --git a/frontend/src/api/VSRs.ts b/frontend/src/api/VSRs.ts index e50f260..a8cd7cd 100644 --- a/frontend/src/api/VSRs.ts +++ b/frontend/src/api/VSRs.ts @@ -16,6 +16,10 @@ export interface VSRJson { sizeOfHome: string; } +export interface VSRListJson { + vsrs: VSRJson[]; +} + export interface VSR { _id: string; name: string; @@ -74,11 +78,11 @@ export async function createVSR(vsr: CreateVSRRequest): Promise> } } -export async function getAllVSRs(): Promise> { +export async function getAllVSRs(): Promise> { try { const response = await get("/api/vsr"); - const json = (await response.json()) as VSRJson; - return { success: true, data: parseVSR(json) }; + const json = (await response.json()) as VSRListJson; + return { success: true, data: json.vsrs.map(parseVSR) }; } catch (error) { return handleAPIError(error); } diff --git a/frontend/src/app/staff/vsr/page.module.css b/frontend/src/app/staff/vsr/page.module.css index fc5e2c5..33912eb 100644 --- a/frontend/src/app/staff/vsr/page.module.css +++ b/frontend/src/app/staff/vsr/page.module.css @@ -1,21 +1,16 @@ .page { background-color: var(--color-background); padding-bottom: 67px; - /* display: flex; - flex-direction: column; - justify-content: center; */ } .column { display: flex; flex-direction: column; justify-content: center; - margin-top: 105px; - margin-left: 95px; - margin-right: 95px; + margin: 105px auto 0; padding: 0px; gap: 40px; - /* background-color: red; */ + max-width: 1200px; } .flex { @@ -24,31 +19,14 @@ align-items: center; } -.title_row { - display: flex; - flex-direction: column; - align-items: center; - /* background-color: green; */ - /* width: max-content; */ - /* width: 80%; */ - /* gap: 200px; */ -} .button_row { display: flex; flex-direction: row; align-items: flex-start; - /* min-width: 80%; */ + justify-content: space-between; gap: 430px; - /* background-color: red; */ } -/* .row_max { - display: flex; - flex-direction: row; - width: max-content; - align-items: center; -} */ - .row_left { gap: 40px; display: flex; @@ -92,7 +70,6 @@ .table { display: flex; flex-direction: column; - /* padding: 6px 0px; */ align-items: center; - /* align-self: stretch; */ + width: 100%; } diff --git a/frontend/src/app/staff/vsr/page.tsx b/frontend/src/app/staff/vsr/page.tsx index 460f6a1..666afbd 100644 --- a/frontend/src/app/staff/vsr/page.tsx +++ b/frontend/src/app/staff/vsr/page.tsx @@ -12,9 +12,7 @@ export default function VSRTableView() {
-
- -
+
diff --git a/frontend/src/components/SearchKeyword.module.css b/frontend/src/components/SearchKeyword.module.css index 0f4a769..325ffbc 100644 --- a/frontend/src/components/SearchKeyword.module.css +++ b/frontend/src/components/SearchKeyword.module.css @@ -1,7 +1,6 @@ .search { display: flex; flex-direction: row; - /* background-color: var(--color-tse-primary-light); */ gap: 8px; padding: 8px; padding-right: 30px; @@ -31,12 +30,3 @@ font-weight: 400; line-height: normal; } - -.icons { - width: 24px; - height: 24px; -} - -/* ::placeholder { - color: 909090; -} */ diff --git a/frontend/src/components/SearchKeyword.tsx b/frontend/src/components/SearchKeyword.tsx index 6a4a7d2..9d98d26 100644 --- a/frontend/src/components/SearchKeyword.tsx +++ b/frontend/src/components/SearchKeyword.tsx @@ -6,7 +6,7 @@ export default function SearchKeyword() { return (
{/* image */} - Search + Search
); diff --git a/frontend/src/components/VSRTable.tsx b/frontend/src/components/VSRTable.tsx index 651c801..89fdd40 100644 --- a/frontend/src/components/VSRTable.tsx +++ b/frontend/src/components/VSRTable.tsx @@ -6,6 +6,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from "@mui/x-data-grid"; import { DataGrid, GridColDef } from "@mui/x-data-grid"; import { useEffect } from "react"; +import { VSR, getAllVSRs } from "@/api/VSRs"; const columns: GridColDef[] = [ { @@ -14,10 +15,10 @@ const columns: GridColDef[] = [ headerClassName: "header", }, { - field: "caseid", + field: "_id", headerName: "Case ID", type: "string", - width: 147, + flex: 1, headerAlign: "left", headerClassName: "header", disableColumnMenu: true, @@ -27,7 +28,7 @@ const columns: GridColDef[] = [ field: "military", headerName: "Military ID (Last 4)", type: "string", - width: 206, + flex: 1, headerClassName: "header", disableColumnMenu: true, hideSortIcons: true, @@ -35,7 +36,7 @@ const columns: GridColDef[] = [ { field: "name", headerName: "Name", - width: 233, + flex: 1, headerClassName: "header", disableColumnMenu: true, hideSortIcons: true, @@ -46,7 +47,7 @@ const columns: GridColDef[] = [ headerName: "Date Received", type: "date", sortable: true, - width: 160, + flex: 1, headerClassName: "header", disableColumnMenu: true, hideSortIcons: true, @@ -55,110 +56,50 @@ const columns: GridColDef[] = [ field: "status", headerName: "Status", type: "string", - width: 210, + flex: 1, headerClassName: "header", disableColumnMenu: true, hideSortIcons: true, }, ]; -const rows = [ - { - id: 1, - caseid: "0001", - military: 1234, - name: "Justin Timberlake", - date: new Date("2024-12-18"), - status: "Received", - }, - { - id: 2, - caseid: "0002", - military: 2234, - name: "Justin Timberlake", - date: new Date("2024-12-18"), - status: "Received", - }, - { - id: 3, - caseid: "0003", - military: 3234, - name: "Justin Timberlake", - date: new Date("2024-12-18"), - status: "Received", - }, - { - id: 4, - caseid: "0004", - military: 4234, - name: "Justin Timberlake", - date: new Date("2024-12-18"), - status: "Received", - }, - { - id: 5, - caseid: "0005", - military: 5234, - name: "Justin Timberlake", - date: new Date("2024-12-18"), - status: "Received", - }, - { - id: 6, - caseid: "0006", - military: 6234, - name: "Justin Timberlake", - date: new Date("2024-12-18"), - status: "Received", - }, - { - id: 7, - caseid: "0007", - military: 7234, - name: "Justin Timberlake", - date: new Date("2024-12-18"), - status: "Received", - }, - { - id: 8, - caseid: "0008", - military: 8234, - name: "Justin Timberlake", - date: new Date("2024-12-18"), - status: "Received", - }, - { - id: 9, - caseid: "0009", - military: 9234, - name: "Justin Timberlake", - date: new Date("2024-12-18"), - status: "Received", - }, - { - id: 10, - caseid: "00010", - military: 10234, - name: "Justin Timberlake", - date: new Date("2024-12-18"), - status: "Received", - }, -]; - export default function VSRTable() { + const [vsrs, setVsrs] = React.useState(); + useEffect(() => { - // This function will run when the component is first loaded - console.log("Page has been refreshed or loaded for the first time"); + getAllVSRs().then((result) => { + if (result.success) { + setVsrs(result.data); + } else { + // TODO better error handling + alert(`Could not fetch VSRs: ${result.error}`); + } + }); }, []); + return ( ({ + ...vsr, + id: vsr._id, + })) ?? [] + } columns={columns} initialState={{ pagination: {