From 700f6c2944589729496609a5432592245ae8ebb9 Mon Sep 17 00:00:00 2001 From: Megan Chun <107379096+meganchun@users.noreply.github.com> Date: Sat, 2 Nov 2024 15:25:44 -0400 Subject: [PATCH 1/2] added preview modal component to common table --- .../src/components/common/CommonTable.tsx | 60 +++++++++++++++++-- .../src/components/common/ModalContainer.tsx | 7 ++- .../pages/residents/ResidentsPage.tsx | 7 +++ 3 files changed, 69 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/common/CommonTable.tsx b/frontend/src/components/common/CommonTable.tsx index dc1146b..a4d4ffc 100644 --- a/frontend/src/components/common/CommonTable.tsx +++ b/frontend/src/components/common/CommonTable.tsx @@ -13,12 +13,15 @@ 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; @@ -27,7 +30,7 @@ export type ColumnInfoTypes = { header: string; key: string }; export interface TableData { [key: string]: TableTypes; } - + type Props = { data: TableData[]; columnInfo: ColumnInfoTypes[]; @@ -40,6 +43,8 @@ type SortState = { [key: string]: number; }; + + const CommonTable = ({ columnInfo, data, @@ -53,6 +58,8 @@ const CommonTable = ({ const [sortingColumn, setSortingColumn] = useState({}); const [originalData, setOriginalData] = useState(data); const [sortedData, setSortedData] = useState(data); + const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false); + const [selectedRow, setSelectedRow] = useState({}); useEffect(() => { return Math.ceil(data.length / maxResults) >= 5 @@ -70,6 +77,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 = {}; @@ -223,7 +248,7 @@ const CommonTable = ({ .slice((page - 1) * maxResults, page * maxResults) .map((row, index) => { return ( - + {isSelectable ? ( ) : null} {columnInfo.map((column, i) => ( - {String(row[column.key])} + { + handleRowClick(row); + }} + key={i} + >{String(row[column.key])} ))} - onEdit(row)}> + { + e.stopPropagation(); + onEdit(row); + }}> @@ -255,6 +289,24 @@ const CommonTable = ({ + {isPreviewModalOpen && selectedRow && ( + + + {colData.slice(1).map((column, index) => ( + + + {column.header}: {' '} + {column.value} + + ))} + + + )} + {`Showing ${(page - 1) * maxResults + 1} to ${page * maxResults} of ${ diff --git a/frontend/src/components/common/ModalContainer.tsx b/frontend/src/components/common/ModalContainer.tsx index 8f696d9..fa44d63 100644 --- 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,11 @@ const ModalContainer = ({ Delete - ) : null} + ) : ( + + )} {children} diff --git a/frontend/src/components/pages/residents/ResidentsPage.tsx b/frontend/src/components/pages/residents/ResidentsPage.tsx index 6b76042..3fc5d9e 100644 --- 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); From 06fc4f4dd7d6d69b51f170fd6f224400e974c131 Mon Sep 17 00:00:00 2001 From: Jesse Huang <87463074+jeessh@users.noreply.github.com> Date: Sat, 16 Nov 2024 09:46:14 -0500 Subject: [PATCH 2/2] ran linter --- .../src/components/common/CommonTable.tsx | 45 ++++++++++--------- .../src/components/common/ModalContainer.tsx | 11 +++-- .../src/components/pages/tasks/TasksPage.tsx | 4 +- 3 files changed, 33 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/common/CommonTable.tsx b/frontend/src/components/common/CommonTable.tsx index a4d4ffc..bff4e13 100644 --- a/frontend/src/components/common/CommonTable.tsx +++ b/frontend/src/components/common/CommonTable.tsx @@ -22,7 +22,6 @@ import KeyboardArrowUpOutlinedIcon from "@mui/icons-material/KeyboardArrowUpOutl import KeyboardArrowDownOutlinedIcon from "@mui/icons-material/KeyboardArrowDownOutlined"; import ModalContainer from "./ModalContainer"; - type TableTypes = string | number | boolean | Date; export type ColumnInfoTypes = { header: string; key: string }; @@ -30,7 +29,7 @@ export type ColumnInfoTypes = { header: string; key: string }; export interface TableData { [key: string]: TableTypes; } - + type Props = { data: TableData[]; columnInfo: ColumnInfoTypes[]; @@ -43,8 +42,6 @@ type SortState = { [key: string]: number; }; - - const CommonTable = ({ columnInfo, data, @@ -80,7 +77,7 @@ const CommonTable = ({ const handleRowClick = (row: TableData) => { setSelectedRow(row); setIsPreviewModalOpen(true); - } + }; interface ColumnInfo { header: string; @@ -88,7 +85,7 @@ const CommonTable = ({ } const colData: ColumnInfo[] = columnInfo.map((col, index) => { - const value = Object.entries(selectedRow)[index]?.[1] || " "; + const value = Object.entries(selectedRow)[index]?.[1] || " "; return { header: String(col.header), value: String(value), @@ -248,7 +245,7 @@ const CommonTable = ({ .slice((page - 1) * maxResults, page * maxResults) .map((row, index) => { return ( - + {isSelectable ? ( ) : null} {columnInfo.map((column, i) => ( - { - handleRowClick(row); - }} - key={i} - >{String(row[column.key])} + { + handleRowClick(row); + }} + key={i} + > + {String(row[column.key])} + ))} - { - e.stopPropagation(); - onEdit(row); - }}> + { + e.stopPropagation(); + onEdit(row); + }} + > @@ -296,13 +296,14 @@ const CommonTable = ({ setIsOpen={setIsPreviewModalOpen} > - {colData.slice(1).map((column, index) => ( + {colData.slice(1).map((column, index) => ( - {column.header}: {' '} - {column.value} + {column.header}:{" "} + {" "} + {column.value} - ))} + ))} )} diff --git a/frontend/src/components/common/ModalContainer.tsx b/frontend/src/components/common/ModalContainer.tsx index fa44d63..37c898f 100644 --- a/frontend/src/components/common/ModalContainer.tsx +++ b/frontend/src/components/common/ModalContainer.tsx @@ -8,7 +8,7 @@ import { Button, } from "@chakra-ui/react"; import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined"; -import CloseIcon from '@mui/icons-material/Close'; +import CloseIcon from "@mui/icons-material/Close"; type Props = { title: string; @@ -41,8 +41,13 @@ const ModalContainer = ({ Delete ) : ( - )} diff --git a/frontend/src/components/pages/tasks/TasksPage.tsx b/frontend/src/components/pages/tasks/TasksPage.tsx index f889d47..6a8e4b0 100644 --- a/frontend/src/components/pages/tasks/TasksPage.tsx +++ b/frontend/src/components/pages/tasks/TasksPage.tsx @@ -128,7 +128,7 @@ const TasksPage = (): React.ReactElement => { // const tasksByAssigneeId = React.useMemo(() => { // return tasksByAssigneeIdData; // }, [tasksByAssigneeIdData]); - + // const { // loading: tasksByAssignerIdLoading, // error: tasksByAssignerIdError, @@ -151,7 +151,7 @@ const TasksPage = (): React.ReactElement => { // const tasksByStartDate = React.useMemo(() => { // return taskByStartDateData; // }, [taskByStartDateData]); - + // const { // loading: tasksByStatusLoading, // error: tasksByStatusError,