Clean up CSS & integrate w/ backend

TritonSE · Feb 27, 2024 · 4645a73 · 4645a73
1 parent 8e69b8d
commit 4645a73
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 137 deletions.
diff --git 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<APIResult<VSR>>
   }
 }
 
-export async function getAllVSRs(): Promise<APIResult<VSR>> {
+export async function getAllVSRs(): Promise<APIResult<VSR[]>> {
   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
@@ -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
@@ -12,9 +12,7 @@ export default function VSRTableView() {
     <div className={styles.page}>
       <HeaderBar></HeaderBar>
       <div className={styles.column}>
-        <div className={styles.title_row}>
-          <PageTitle></PageTitle>
-        </div>
+        <PageTitle></PageTitle>
         <div className={styles.button_row}>
           <div className={styles.row_left}>
             <SearchKeyword></SearchKeyword>

diff --git 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
@@ -6,7 +6,7 @@ export default function SearchKeyword() {
   return (
     <div className={styles.search}>
       {/* image */}
-      <Image src="/search.svg" alt="Search" className={styles.icons} />
+      <Image width={24} height={24} src="/search.svg" alt="Search" className={styles.icons} />
       <input className={styles.searchInput} placeholder="Search Keyword..." />
     </div>
   );

diff --git 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,15 +28,15 @@ const columns: GridColDef[] = [
     field: "military",
     headerName: "Military ID (Last 4)",
     type: "string",
-    width: 206,
+    flex: 1,
     headerClassName: "header",
     disableColumnMenu: true,
     hideSortIcons: true,
   },
   {
     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<VSR[]>();
+
   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 (
     <Box
+      style={{ width: "100%" }}
       sx={{
         "& .header": {
           color: "rgba(247, 247, 247, 1)",
           backgroundColor: "var(--color-tse-accent-blue-1)",
+          // Customize color of checkboxes in header
+          ".MuiCheckbox-root": {
+            color: "white !important",
+          },
+          // Customize styles of text in header
+          ".MuiDataGrid-columnHeaderTitle": {
+            fontSize: "1.125rem",
+            fontWeight: 600,
+          },
         },
+        // Hide the default white bar column separators
         ".MuiDataGrid-columnSeparator": {
-          display: "none",
+          display: "none !important",
+        },
+        ".MuiDataGrid-cellContent": {
+          fontSize: "1rem",
         },
         "&.MuiDataGrid-root": {
           border: "none",
@@ -198,10 +139,20 @@ export default function VSRTable() {
             },
           },
         },
+        // Customize color of checkboxes
+        "& .MuiCheckbox-root": {
+          color: "#0C2B35 !important",
+        },
       }}
     >
       <DataGrid
-        rows={rows}
+        rows={
+          // Each row needs a unique "id" property; we can use the MongoDB "_id" for this
+          vsrs?.map((vsr) => ({
+            ...vsr,
+            id: vsr._id,
+          })) ?? []
+        }
         columns={columns}
         initialState={{
           pagination: {