hotungkhanh · dh-giang-vu · Aug 24, 2024 · Aug 22, 2024 · Aug 22, 2024 · Aug 23, 2024
diff --git a/frontend/index.html b/frontend/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-router-test",
+  "name": "frontend",
   "private": true,
   "version": "0.0.0",
   "type": "module",

diff --git a/frontend/src/assets/frontpage.jpg b/frontend/src/assets/frontpage.jpg
diff --git a/frontend/src/components/BackButton.tsx b/frontend/src/components/BackButton.tsx
@@ -0,0 +1,20 @@
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { Button } from '@mui/material';
+
+export default function BackButton() {
+  return (
+    <Button 
+      variant='outlined' 
+      startIcon={<ArrowBackIcon/>}
+      sx={{
+      color: 'white',
+      borderColor: 'white',
+      '&:hover': {
+        borderColor: 'white',
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+      },
+    }}>
+      Back
+    </Button>
+  )
+}
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
@@ -1,9 +1,19 @@
 import { Box } from "@mui/material";
-export default function Footer() {
+
+export default function Footer({ children } : { children?: React.ReactNode }) {
   const footerStyle = {
     backgroundColor: "#f05a22",
-    padding: "30px",
     textAlign: "center",
+    position: "fixed",
+    bottom: 0,
+    left: 0,
+    width: 100+"%",
+    height: 60+"px",
+    zIndex: 10000,
   };
-  return <Box sx={footerStyle}></Box>;
+
+  return (
+  <Box sx={footerStyle}>
+    {children}
+  </Box>);
 }
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -1,17 +1,19 @@
 import { Box } from "@mui/material";
+import VIT_Logo from '../assets/logo.png';
+
 export default function Header() {
     const headerStyle = {
         backgroundColor: "#F5F5f5",
         color: "white",
-        padding: "35px",
+        padding: "20px",
         textAlign: "left",
     };
     return (
       <Box className="header" sx={headerStyle}>
         <img
-          src="src/assets/logo.png"
+          src={VIT_Logo}
           alt="logo.exe"
-          width="200"
+          width="150"
           height="auto"
         />
       </Box>

diff --git a/frontend/src/components/NextButton.tsx b/frontend/src/components/NextButton.tsx
@@ -0,0 +1,20 @@
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { Button } from '@mui/material';
+
+export default function NextButton() {
+  return (
+    <Button 
+      variant='outlined' 
+      endIcon={<ArrowForwardIcon/>}
+      sx={{
+      color: 'white',
+      borderColor: 'white',
+      '&:hover': {
+        borderColor: 'white',
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+      },
+    }}>
+      Next
+    </Button>
+  )
+}
diff --git a/frontend/src/components/ProceedButton.tsx b/frontend/src/components/ProceedButton.tsx
@@ -10,6 +10,6 @@ export default function ProceedButton({ fileChosen }:ProceedButtonProps) {
       if (fileChosen === null) {
         return <Button disabled> Proceed </Button>
       } else {
-        return <Button onClick={() => navigate("/seminfo")}> Proceed</Button>;
+        return <Button onClick={() => navigate("/seminfo/campus")}> Proceed</Button>;
       }
 }`      `
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
@@ -9,17 +9,23 @@ import InboxIcon from "@mui/icons-material/MoveToInbox";
 
 import { Link } from "react-router-dom";
 
+
+interface SidebarProps {
+  marginTop: number,
+  width: number,
+}
 const drawerWidth = 240;
 
-export default function Sidebar() {
+export default function Sidebar({ marginTop, width }: SidebarProps) {
   return (
     <Drawer
       sx={{
-        width: drawerWidth,
+        width: width,
         flexShrink: 0,
         "& .MuiDrawer-paper": {
           width: drawerWidth,
           boxSizing: "border-box",
+          marginTop: marginTop,
         },
       }}
       variant="permanent"

diff --git a/frontend/src/components/Spreadsheet.tsx b/frontend/src/components/Spreadsheet.tsx
@@ -0,0 +1,189 @@
+import { useRef, useEffect } from "react";
+import jspreadsheet, { CellValue, JspreadsheetInstance, JspreadsheetInstanceElement, JSpreadsheetOptions } from "jspreadsheet-ce";
+import "../../node_modules/jspreadsheet-ce/dist/jspreadsheet.css";
+import "../styles/spreadsheet.css"
+import Button from "@mui/material/Button";
+
+interface SpreadsheetProps {
+  headers: string[];
+  storageKey: string;
+}
+
+type SavedSpreadsheetOpt = {
+  cellvalues: CellValue[][];
+}
+
+export default function Spreadsheet({ headers, storageKey }: SpreadsheetProps) {
+  const jRef = useRef<null | JspreadsheetInstanceElement>(null);
+
+  // spreadsheet init options: columns property
+  const columns = headers.map((headerName) => {
+    return { title: headerName, width: 200 };
+  });
+
+  // spreadsheet init options: contextMenu property
+  const contextMenu = (instance: JspreadsheetInstance, _col: string | null, row: string | null, _evn: PointerEvent) => {
+
+    var items: object[] = [];
+    if (row === null) {
+      return items;
+    }
+
+    if (!instance.options.text) {
+      return items;
+    }
+
+    // insert row before
+    items.push({
+      title: instance.options.text.insertANewRowBefore,
+      onclick: function () {
+        instance.insertRow(1, parseInt(row), 1);
+      }
+    });
+
+    // insert row after
+    items.push({
+      title: instance.options.text.insertANewRowAfter,
+      onclick: function () {
+        instance.insertRow(1, parseInt(row));
+      }
+    });
+
+    // delete selected rows
+    items.push({
+      title: instance.options.text.deleteSelectedRows,
+      onclick: function () {
+        instance.deleteRow(instance.getSelectedRows().length ? undefined : parseInt(row));
+      }
+    });
+
+    // clear value of selected cells
+    items.push({
+      title: "Clear selected cells",
+      onclick: function () {
+        const selectedCols = instance.getSelectedColumns();
+        const selectedRows = instance.getSelectedRows(true) as number[];
+        for (let i of selectedCols) {
+          for (let j of selectedRows) {
+            instance.setValueFromCoords(i, j, "", false);
+          }
+        }
+      }
+    });
+
+    return items;
+  };
+
+  // spreadsheet init: options
+  const options: jspreadsheet.JSpreadsheetOptions = {
+    columns: columns,
+    data: [[]],
+    minDimensions: [headers.length, 10],
+    minSpareRows: 1,
+    allowManualInsertColumn: false,
+    allowInsertColumn: false,
+    includeHeadersOnDownload: true,
+    tableOverflow: true,
+    tableWidth: '1150px',
+    tableHeight: '400px',
+    contextMenu: contextMenu,
+    // toolbar:[
+    //   {
+    //       type: 'i',
+    //       id: 'undo',
+    //       content: 'undo',
+    //       onclick: function() {
+    //           undo();
+    //       }
+    //   },
+    //   {
+    //     type: 'i',
+    //     id: 'redo',
+    //     content: 'redo',
+    //     onclick: function() {
+    //         redo();
+    //     }
+    //   },
+    // ],
+  };
+
+  // mount: create spreadsheet using data from sessionStorage (if exist),
+  //        otherwise create a blank default.
+  useEffect(() => {
+    // console.log(`Mount ${storageKey}`);
+    if (jRef.current && !jRef.current.jspreadsheet) {
+      const savedSpreadsheetData = sessionStorage.getItem(storageKey);
+
+      if (savedSpreadsheetData) {
+        const ssd: SavedSpreadsheetOpt = JSON.parse(savedSpreadsheetData);
+        options.data = ssd.cellvalues;
+      }
+
+      jspreadsheet(jRef.current, options);
+    }
+  });
+
+  // unmount: save spreadsheet data to sessionStorage
+  useEffect(() => {
+    const instanceElem: JspreadsheetInstanceElement | null = jRef.current;
+
+    function cleanup() {
+      // console.log(`Unmount ${storageKey}`);
+      if (instanceElem) {
+        const newOpts: SavedSpreadsheetOpt = {
+          cellvalues: instanceElem.jspreadsheet.getData(),
+        };
+        sessionStorage.setItem(storageKey, JSON.stringify(newOpts));
+      }
+      else {
+        throw new Error(
+          "JspreadsheetInstanceElement is null"
+        )
+      }
+    }
+
+    return cleanup;
+  })
+
+  const addRow = () => {
+    if (jRef.current && jRef.current.jexcel) {
+      jRef.current.jexcel.insertRow();
+    }
+  };
+
+  // const undo = () => {
+  //   if (jRef.current && jRef.current.jexcel) {
+  //     jRef.current.jexcel.undo();
+  //   }
+  // }
+
+  // const redo = () => {
+  //   if (jRef.current && jRef.current.jexcel) {
+  //     jRef.current.jexcel.redo();
+  //   }
+  // }
+
+  return (
+    <div>
+      <div ref={jRef} />
+      <br />
+      <Button
+        variant="outlined"
+        size="small"
+        onClick={addRow}
+        sx={{
+          color: "black",
+          borderColor: "black",
+          '&:hover': {
+            color: "#f05a22",
+            borderColor: "#f05a22",
+            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+          },
+          borderRadius: "3px",
+          marginTop: "5px",
+        }}>
+        Add new row
+      </Button>
+    </div >
+  );
+}
diff --git a/frontend/src/components/UploadPopUp.tsx b/frontend/src/components/UploadPopUp.tsx
@@ -37,7 +37,7 @@ export default function UploadPopUp() {
         onClose={handleClose}
         slots={{ backdrop: StyledBackdrop }}
       >
-        <ModalContent sx={{ width: 600, height: 400 }}>
+        <ModalContent sx={{ width: 500, height: 120 }}>
           <DisplayFile fileChosen={fileChosen}/>
           <UploadButton setFileChosen={setFileChosen}></UploadButton>
           <ProceedButton fileChosen={fileChosen}></ProceedButton>

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -1,6 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
+import './styles/global.css'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>