Merge pull request #120 from uwblueprint/megan/preview-modal

Preview Modal For CommonTable Component
uwblueprint · Nov 16, 2024 · 16641db · 16641db
2 parents 610fd05 + 06fc4f4
commit 16641db
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 3 deletions.
diff --git a/frontend/src/components/common/CommonTable.tsx b/frontend/src/components/common/CommonTable.tsx
@@ -13,12 +13,14 @@ import {
   Flex,
   IconButton,
   Icon,
+  Text,
 } from "@chakra-ui/react";
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import ChevronLeftOutlinedIcon from "@mui/icons-material/ChevronLeftOutlined";
 import ChevronRightOutlinedIcon from "@mui/icons-material/ChevronRightOutlined";
 import KeyboardArrowUpOutlinedIcon from "@mui/icons-material/KeyboardArrowUpOutlined";
 import KeyboardArrowDownOutlinedIcon from "@mui/icons-material/KeyboardArrowDownOutlined";
+import ModalContainer from "./ModalContainer";
 
 type TableTypes = string | number | boolean | Date | string[];
 
@@ -53,6 +55,8 @@ const CommonTable = ({
   const [sortingColumn, setSortingColumn] = useState<SortState>({});
   const [originalData, setOriginalData] = useState(data);
   const [sortedData, setSortedData] = useState(data);
+  const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false);
+  const [selectedRow, setSelectedRow] = useState<TableData>({});
 
   useEffect(() => {
     return Math.ceil(data.length / maxResults) >= 5
@@ -70,6 +74,24 @@ const CommonTable = ({
     setSortedData(data);
   }, [data]);
 
+  const handleRowClick = (row: TableData) => {
+    setSelectedRow(row);
+    setIsPreviewModalOpen(true);
+  };
+
+  interface ColumnInfo {
+    header: string;
+    value: string;
+  }
+
+  const colData: ColumnInfo[] = columnInfo.map((col, index) => {
+    const value = Object.entries(selectedRow)[index]?.[1] || " ";
+    return {
+      header: String(col.header),
+      value: String(value),
+    };
+  });
+
   // sorting the columns by ascending and descending order based on column indicated
   const sortColumn = (column: string) => {
     const newSortingColumn: SortState = {};
@@ -240,9 +262,21 @@ const CommonTable = ({
                       </Td>
                     ) : null}
                     {columnInfo.map((column, i) => (
-                      <Td key={i}>{String(row[column.key])}</Td>
+                      <Td
+                        onClick={() => {
+                          handleRowClick(row);
+                        }}
+                        key={i}
+                      >
+                        {String(row[column.key])}
+                      </Td>
                     ))}
-                    <Td onClick={() => onEdit(row)}>
+                    <Td
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onEdit(row);
+                      }}
+                    >
                       <Icon
                         as={EditOutlinedIcon}
                         _hover={{ cursor: "pointer" }}
@@ -255,6 +289,25 @@ const CommonTable = ({
         </Table>
       </TableContainer>
 
+      {isPreviewModalOpen && selectedRow && (
+        <ModalContainer
+          title={colData[0].value}
+          isOpen={isPreviewModalOpen}
+          setIsOpen={setIsPreviewModalOpen}
+        >
+          <Flex flexDir="column" gap="5px" mt="10px">
+            {colData.slice(1).map((column, index) => (
+              <Text key={index}>
+                <Text as="span" fontWeight="700">
+                  {column.header}:{" "}
+                </Text>{" "}
+                {column.value}
+              </Text>
+            ))}
+          </Flex>
+        </ModalContainer>
+      )}
+
       <Box h="50px" position="relative">
         <Box position="absolute" w="250px" h="50px" ml="10px">
           {`Showing ${(page - 1) * maxResults + 1} to ${Math.min(

diff --git a/frontend/src/components/common/ModalContainer.tsx b/frontend/src/components/common/ModalContainer.tsx
@@ -8,6 +8,7 @@ import {
   Button,
 } from "@chakra-ui/react";
 import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
+import CloseIcon from "@mui/icons-material/Close";
 
 type Props = {
   title: string;
@@ -39,7 +40,16 @@ const ModalContainer = ({
               <DeleteOutlinedIcon />
               Delete
             </Button>
-          ) : null}
+          ) : (
+            <Button
+              bg="transparent"
+              h="auto"
+              _hover={{ bg: "transparent" }}
+              onClick={() => setIsOpen(false)}
+            >
+              <CloseIcon />
+            </Button>
+          )}
         </ModalHeader>
         <ModalBody>{children}</ModalBody>
       </ModalContent>

diff --git a/frontend/src/components/pages/residents/ResidentsPage.tsx b/frontend/src/components/pages/residents/ResidentsPage.tsx
@@ -148,6 +148,13 @@ const ResidentsPage = (): React.ReactElement => {
     setEditInfo(row);
   };
 
+  // CHANGE
+  const handleRowClick = (row: any) => {
+    setIsModalOpen("edit");
+    // console.log(row);
+    setEditInfo(row);
+  };
+
   const handleResidentSubmitEdit = () => {
     setEditInfo(undefined);