From 238c632f9cddbbdac6a42fcbaf86bebaed4198b9 Mon Sep 17 00:00:00 2001 From: Cindy Li Date: Thu, 26 Sep 2024 22:00:52 -0400 Subject: [PATCH 1/9] added weekly and daily tasks lists --- .../pages/schedule/SchedulePage.tsx | 186 +++++++++- .../pages/schedule/ScheduleTable.tsx | 337 ++++++++++++++++++ .../components/pages/schedule/columnKeys.ts | 22 ++ frontend/src/mocks/scheduletasks.ts | 169 +++++++++ 4 files changed, 712 insertions(+), 2 deletions(-) create mode 100644 frontend/src/components/pages/schedule/ScheduleTable.tsx create mode 100644 frontend/src/components/pages/schedule/columnKeys.ts create mode 100644 frontend/src/mocks/scheduletasks.ts diff --git a/frontend/src/components/pages/schedule/SchedulePage.tsx b/frontend/src/components/pages/schedule/SchedulePage.tsx index 3e73bc9..458d372 100644 --- a/frontend/src/components/pages/schedule/SchedulePage.tsx +++ b/frontend/src/components/pages/schedule/SchedulePage.tsx @@ -1,8 +1,37 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { Flex, + Input, + Button, + InputGroup, + InputLeftElement, + Tabs, + TabList, + Tab, + Icon, + Checkbox, } from "@chakra-ui/react"; +import { + tasksColumnTypes +} from "./columnKeys"; + +import { + scheduleTasksMockData, + sundayScheduleTasksMockData, + mondayScheduleTasksMockData, + tuesdayScheduleTasksMockData, + wednesdayScheduleTasksMockData, + thursdayScheduleTasksMockData, + fridayScheduleTasksMockData, + saturdayScheduleTasksMockData, +} from "../../../mocks/scheduletasks"; + +import ScheduleTable, { + ColumnInfoTypes, + TableData, +} from "./ScheduleTable"; + import RoomCard from "../home/HomeRoomCard" import { residentsMockData } from "../../../mocks/residents"; @@ -14,8 +43,79 @@ const renderRoomCards = residentsMockData.map(resident => /> ) - const SchedulePage = (): React.ReactElement => { + const enum Dates { + SUNDAY = "SUNDAY", + MONDAY = "MONDAY", + TUESDAY = "TUESDAY", + WEDNESDAY = "WEDNESDAY", + THURSDAY = "THURSDAY", + FRIDAY = "FRIDAY", + SATURDAY = "SATURDAY", + } + + const [taskData, setTaskData] = useState([]); + const [storedTaskData, setStoredTaskData] = useState([]); + const [taskDataColumns, setTaskDataColumns] = useState([]); + const [taskDate, setTaskDate] = useState(Dates.SUNDAY); + const [dailyTaskData, setDailyTaskData] = useState([]); + + useEffect(() => { + setTaskDataColumns(tasksColumnTypes); + setTaskData(scheduleTasksMockData); + if (taskDate === Dates.SUNDAY) { + setDailyTaskData(sundayScheduleTasksMockData); + } + else if (taskDate === Dates.MONDAY) { + setDailyTaskData(mondayScheduleTasksMockData); + } + else if (taskDate === Dates.TUESDAY) { + setDailyTaskData(tuesdayScheduleTasksMockData); + } + else if (taskDate === Dates.WEDNESDAY) { + setDailyTaskData(wednesdayScheduleTasksMockData); + } + else if (taskDate === Dates.THURSDAY) { + setDailyTaskData(thursdayScheduleTasksMockData); + } + else if (taskDate === Dates.FRIDAY) { + setDailyTaskData(fridayScheduleTasksMockData); + } + else if (taskDate === Dates.SATURDAY) { + setDailyTaskData(saturdayScheduleTasksMockData); + } + else { + setDailyTaskData(sundayScheduleTasksMockData); + } + }, []); + + useEffect(() => { + if (taskDate === Dates.SUNDAY) { + setDailyTaskData(sundayScheduleTasksMockData); + } + else if (taskDate === Dates.MONDAY) { + setDailyTaskData(mondayScheduleTasksMockData); + } + else if (taskDate === Dates.TUESDAY) { + setDailyTaskData(tuesdayScheduleTasksMockData); + } + else if (taskDate === Dates.WEDNESDAY) { + setDailyTaskData(wednesdayScheduleTasksMockData); + } + else if (taskDate === Dates.THURSDAY) { + setDailyTaskData(thursdayScheduleTasksMockData); + } + else if (taskDate === Dates.FRIDAY) { + setDailyTaskData(fridayScheduleTasksMockData); + } + else if (taskDate === Dates.SATURDAY) { + setDailyTaskData(saturdayScheduleTasksMockData); + } + else { + setDailyTaskData(sundayScheduleTasksMockData); + } + }, [taskDate]) + return (

Schedule Page

@@ -25,6 +125,88 @@ const SchedulePage = (): React.ReactElement => { > {renderRoomCards} + Weekly Tasks + + {}} + isSelectable + /> + + + + + { + setTaskDate(Dates.SUNDAY); + }} + > + Sunday + + { + setTaskDate(Dates.MONDAY); + }} + > + Monday + + { + setTaskDate(Dates.TUESDAY); + }} + > + Tuesday + + { + setTaskDate(Dates.WEDNESDAY); + }} + > + Wednesday + + { + setTaskDate(Dates.THURSDAY); + }} + > + Thursday + + { + setTaskDate(Dates.FRIDAY); + }} + > + Friday + + { + setTaskDate(Dates.SATURDAY); + }} + > + Saturday + + + + Daily Tasks + + {}} + isSelectable + /> + + ); }; diff --git a/frontend/src/components/pages/schedule/ScheduleTable.tsx b/frontend/src/components/pages/schedule/ScheduleTable.tsx new file mode 100644 index 0000000..94dcaa7 --- /dev/null +++ b/frontend/src/components/pages/schedule/ScheduleTable.tsx @@ -0,0 +1,337 @@ +import React, { useState, useEffect } from "react"; +import { + Table, + Thead, + Tbody, + Tr, + Th, + Td, + TableContainer, + Checkbox, + Center, + Box, + Flex, + IconButton, + Icon, +} from "@chakra-ui/react"; +import ModeCommentOutlinedIcon from '@mui/icons-material/ModeCommentOutlined'; +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"; + +type TableTypes = string | number | boolean | Date; + +export type ColumnInfoTypes = { header: string; key: string }; + +export interface TableData { + [key: string]: TableTypes; +} + +type Props = { + data: TableData[]; + columnInfo: ColumnInfoTypes[]; + onEdit: (row: unknown) => unknown; + maxResults?: number; + isSelectable?: boolean; +}; + +type SortState = { + [key: string]: number; +}; + +const ScheduleTable = ({ + columnInfo, + data, + onEdit, + maxResults = 10, + isSelectable = false, +}: Props): React.ReactElement => { + const [checked, setChecked] = useState(data.map(() => false)); + const [page, setPage] = useState(1); + const [pageArray, setPageArray] = useState([]); + const [sortingColumn, setSortingColumn] = useState({}); + const [originalData, setOriginalData] = useState(data); + const [sortedData, setSortedData] = useState(data); + + useEffect(() => { + return Math.ceil(data.length / maxResults) >= 5 + ? setPageArray([1, 2, 3, 4, 5]) + : setPageArray( + Array.from( + { length: Math.ceil(data.length / maxResults) }, + (_, i) => i + 1, + ), + ); + }, [data, maxResults]); + + useEffect(() => { + setOriginalData(data); + setSortedData(data); + }, [data]); + + // sorting the columns by ascending and descending order based on column indicated + const sortColumn = (column: string) => { + const newSortingColumn: SortState = {}; + columnInfo.forEach((col) => { + newSortingColumn[col.key] = + col.key === column ? sortingColumn[column] : 0; + }); + + // increment column sorting state + sortingColumn[column] = sortingColumn[column] + ? sortingColumn[column] + 1 + : 1; + + // if at the end, go back to 0 + if (sortingColumn[column] === 3) { + setSortingColumn({ ...sortingColumn, [column]: 0 }); + setSortedData(originalData); + return; + } + setSortingColumn({ + ...newSortingColumn, + [column]: sortingColumn[column], + }); + + // apply sorting based on which sorting state the column's in + const sorted = [...originalData].sort((a, b) => { + if (sortingColumn[column] === 1) { + return a[column] > b[column] ? 1 : -1; + } + if (sortingColumn[column] === 2) { + return a[column] < b[column] ? 1 : -1; + } + return 0; + }); + setSortedData(sorted); + }; + + // constants for pagination UI + const checkedPage = checked.slice((page - 1) * maxResults, page * maxResults); + const allChecked = checkedPage.every(Boolean); + const isIndeterminate = checkedPage.some(Boolean) && !allChecked; + + // pagination functions + const leftPaginate = () => { + if (page > 1) setPage(page - 1); + if (pageArray[0] > 1 && pageArray.length === 5) { + setPageArray(pageArray.map((item) => item - 1)); + } + }; + + const rightPaginate = () => { + if (page < Math.ceil(data.length / maxResults)) setPage(page + 1); + if ( + pageArray[pageArray.length - 1] < Math.ceil(data.length / maxResults) && + pageArray.length === 5 + ) { + setPageArray(pageArray.map((item) => item + 1)); + } + }; + + const numberPaginate = (n: number) => { + setPage(n); + // Sets n as the center of the page array when possible. + if ( + n - 2 >= 1 && + n + 2 <= Math.ceil(data.length / maxResults) && + pageArray.length === 5 + ) { + setPageArray([n - 2, n - 1, n, n + 1, n + 2]); + } + }; + + return ( + + + + + + {isSelectable ? ( + + ) : null} + {columnInfo.map((header, index) => ( + + ))} + + + + {sortedData + .slice((page - 1) * maxResults, page * maxResults) + .map((row, index) => { + return ( + + {isSelectable ? ( + + ) : null} + {columnInfo.map((column, i) => { + const getColor = (status: string) => { + if (status === "Completed") return "#0D8312"; + if (status === "Excused") return "#B07D18"; + if (status === "Incomplete") return "#B21D2F"; + return "black"; + }; + + const getBoxColor = (status: string) => { + if (status === "Completed") return "#CDEECE"; + if (status === "Excused") return "#FFE5B2"; + if (status === "Incomplete") return "#F8D7DB"; + return "black"; + }; + + return column.key === "status" ? ( + + ) : ( + + ); + })} + + + ); + })} + +
+ {null} + + + {header.header} + + { + sortColumn(header.key); + }} + /> + { + sortColumn(header.key); + }} + /> + + + +
+ { + const newChecked = [...checked]; + newChecked[index + (page - 1) * maxResults] = + e.target.checked; + setChecked(newChecked); + }} + /> + + {row[column.key] ? {String(row[column.key])} : ''} + + {row[column.key] ? String(row[column.key]) : ''} onEdit(row)}> + +
+ + + + + {`Showing ${(page - 1) * maxResults + 1} to ${page * maxResults} of ${ + data.length + } entries`} + + + + } + onClick={() => leftPaginate()} + /> + {pageArray.map((item, index) => { + return ( +
numberPaginate(item)} + key={index} + > + {item} +
+ ); + })} + } + onClick={() => rightPaginate()} + /> + + + + + ); +}; + +export default ScheduleTable; diff --git a/frontend/src/components/pages/schedule/columnKeys.ts b/frontend/src/components/pages/schedule/columnKeys.ts new file mode 100644 index 0000000..25bebb2 --- /dev/null +++ b/frontend/src/components/pages/schedule/columnKeys.ts @@ -0,0 +1,22 @@ +import { ColumnInfoTypes } from "../../common/CommonTable"; + +export const tasksColumnTypes: ColumnInfoTypes[] = [ + { + header: " Name", + key: "title", + }, + { + header: "Status", + key: "status", + }, + { + header: "Time", + key: "time", + }, + { + header: "Marillac Bucks", + key: "creditValue", + }, +]; + +export default {}; diff --git a/frontend/src/mocks/scheduletasks.ts b/frontend/src/mocks/scheduletasks.ts new file mode 100644 index 0000000..343bb26 --- /dev/null +++ b/frontend/src/mocks/scheduletasks.ts @@ -0,0 +1,169 @@ +export const scheduleTasksMockData = [ + { + title: "Weekly Review with CM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, +]; + +export const sundayScheduleTasksMockData = [ + { + title: "Weekly Review with CM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, +]; + +export const mondayScheduleTasksMockData = [ + { + title: "Weekly Review with CM", + status: "Excused", + time: "All day", + creditValue: "$10.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, +]; + +export const tuesdayScheduleTasksMockData = [ + { + title: "Weekly Review with CM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, +]; + +export const wednesdayScheduleTasksMockData = [ + { + title: "Weekly Review with CM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, +]; + +export const thursdayScheduleTasksMockData = [ + { + title: "Weekly Review with CM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, +]; + +export const fridayScheduleTasksMockData = [ + { + title: "Weekly Review with CM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, +]; + +export const saturdayScheduleTasksMockData = [ + { + title: "Weekly Review with CM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, +]; + +export default {}; \ No newline at end of file From 9fb1ff5d2cc701da0a83dbad649d82d55c44bbf7 Mon Sep 17 00:00:00 2001 From: Cindy Li Date: Sat, 28 Sep 2024 10:41:28 -0400 Subject: [PATCH 2/9] Fixed tabs and spacing --- .../pages/schedule/SchedulePage.tsx | 37 +++++++++++-------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/pages/schedule/SchedulePage.tsx b/frontend/src/components/pages/schedule/SchedulePage.tsx index 458d372..adcc71f 100644 --- a/frontend/src/components/pages/schedule/SchedulePage.tsx +++ b/frontend/src/components/pages/schedule/SchedulePage.tsx @@ -1,15 +1,10 @@ import React, { useEffect, useState } from "react"; import { Flex, - Input, - Button, - InputGroup, - InputLeftElement, Tabs, TabList, Tab, - Icon, - Checkbox, + Text, } from "@chakra-ui/react"; import { @@ -125,8 +120,10 @@ const SchedulePage = (): React.ReactElement => { > {renderRoomCards} - Weekly Tasks + + Weekly Tasks + { isSelectable /> - - - - + + Daily Tasks + + + + { setTaskDate(Dates.SUNDAY); }} - > + > Sunday - + { setTaskDate(Dates.MONDAY); }} @@ -156,6 +158,7 @@ const SchedulePage = (): React.ReactElement => { { setTaskDate(Dates.TUESDAY); }} @@ -164,6 +167,7 @@ const SchedulePage = (): React.ReactElement => { { setTaskDate(Dates.WEDNESDAY); }} @@ -172,6 +176,7 @@ const SchedulePage = (): React.ReactElement => { { setTaskDate(Dates.THURSDAY); }} @@ -180,6 +185,7 @@ const SchedulePage = (): React.ReactElement => { { setTaskDate(Dates.FRIDAY); }} @@ -188,6 +194,7 @@ const SchedulePage = (): React.ReactElement => { { setTaskDate(Dates.SATURDAY); }} @@ -196,8 +203,6 @@ const SchedulePage = (): React.ReactElement => { - Daily Tasks - Date: Sat, 28 Sep 2024 10:59:01 -0400 Subject: [PATCH 3/9] added task model fields --- backend/prisma/schema.prisma | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma index db1d651..2fed220 100644 --- a/backend/prisma/schema.prisma +++ b/backend/prisma/schema.prisma @@ -66,6 +66,12 @@ enum TaskType { ACHIEVEMENT } +enum TaskFrequency { + WEEKLY + BIWEEKLY + MONTHLY +} + model Task { id Int @id @default(autoincrement()) type TaskType @@ -76,6 +82,10 @@ model Task { locationId Int @map("location_id") tasksAssigned TaskAssigned[] relatedWarnings Warning[] + frequency TaskFrequency? @map("frequency") + startDate DateTime? @map("start_date") + endDate DateTime? @map("end_date") + allDay Boolean @default(false) @map("all_day") @@map("tasks") } From 542fb1ad60ff21921e0b810606b401a1d17220ef Mon Sep 17 00:00:00 2001 From: Cindy Li Date: Sat, 28 Sep 2024 11:04:03 -0400 Subject: [PATCH 4/9] Revert "added task model fields" This reverts commit a61eeb6994716cc69b22b8cbcaee94e194bc74c4. --- backend/prisma/schema.prisma | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma index 2fed220..db1d651 100644 --- a/backend/prisma/schema.prisma +++ b/backend/prisma/schema.prisma @@ -66,12 +66,6 @@ enum TaskType { ACHIEVEMENT } -enum TaskFrequency { - WEEKLY - BIWEEKLY - MONTHLY -} - model Task { id Int @id @default(autoincrement()) type TaskType @@ -82,10 +76,6 @@ model Task { locationId Int @map("location_id") tasksAssigned TaskAssigned[] relatedWarnings Warning[] - frequency TaskFrequency? @map("frequency") - startDate DateTime? @map("start_date") - endDate DateTime? @map("end_date") - allDay Boolean @default(false) @map("all_day") @@map("tasks") } From 89a7f29b6ffbc5ec38490be4f56dc720ec5e0ed8 Mon Sep 17 00:00:00 2001 From: Jesse Huang <87463074+jeessh@users.noreply.github.com> Date: Thu, 3 Oct 2024 20:37:51 -0400 Subject: [PATCH 5/9] Removed comments for "Incomplete" tasks & ran lint --- .../pages/schedule/SchedulePage.tsx | 207 +++++-------- .../pages/schedule/ScheduleTable.tsx | 45 ++- frontend/src/mocks/scheduletasks.ts | 290 +++++++++--------- 3 files changed, 252 insertions(+), 290 deletions(-) diff --git a/frontend/src/components/pages/schedule/SchedulePage.tsx b/frontend/src/components/pages/schedule/SchedulePage.tsx index adcc71f..5f99dc8 100644 --- a/frontend/src/components/pages/schedule/SchedulePage.tsx +++ b/frontend/src/components/pages/schedule/SchedulePage.tsx @@ -1,15 +1,7 @@ import React, { useEffect, useState } from "react"; -import { - Flex, - Tabs, - TabList, - Tab, - Text, -} from "@chakra-ui/react"; +import { Flex, Tabs, TabList, Tab, Text } from "@chakra-ui/react"; -import { - tasksColumnTypes -} from "./columnKeys"; +import { tasksColumnTypes } from "./columnKeys"; import { scheduleTasksMockData, @@ -22,21 +14,18 @@ import { saturdayScheduleTasksMockData, } from "../../../mocks/scheduletasks"; -import ScheduleTable, { - ColumnInfoTypes, - TableData, -} from "./ScheduleTable"; +import ScheduleTable, { ColumnInfoTypes, TableData } from "./ScheduleTable"; -import RoomCard from "../home/HomeRoomCard" +import RoomCard from "../home/HomeRoomCard"; import { residentsMockData } from "../../../mocks/residents"; -const renderRoomCards = residentsMockData.map(resident => +const renderRoomCards = residentsMockData.map((resident) => ( -) +)); const SchedulePage = (): React.ReactElement => { const enum Dates { @@ -60,64 +49,27 @@ const SchedulePage = (): React.ReactElement => { setTaskData(scheduleTasksMockData); if (taskDate === Dates.SUNDAY) { setDailyTaskData(sundayScheduleTasksMockData); - } - else if (taskDate === Dates.MONDAY) { + } else if (taskDate === Dates.MONDAY) { setDailyTaskData(mondayScheduleTasksMockData); - } - else if (taskDate === Dates.TUESDAY) { + } else if (taskDate === Dates.TUESDAY) { setDailyTaskData(tuesdayScheduleTasksMockData); - } - else if (taskDate === Dates.WEDNESDAY) { + } else if (taskDate === Dates.WEDNESDAY) { setDailyTaskData(wednesdayScheduleTasksMockData); - } - else if (taskDate === Dates.THURSDAY) { + } else if (taskDate === Dates.THURSDAY) { setDailyTaskData(thursdayScheduleTasksMockData); - } - else if (taskDate === Dates.FRIDAY) { + } else if (taskDate === Dates.FRIDAY) { setDailyTaskData(fridayScheduleTasksMockData); - } - else if (taskDate === Dates.SATURDAY) { + } else if (taskDate === Dates.SATURDAY) { setDailyTaskData(saturdayScheduleTasksMockData); - } - else { + } else { setDailyTaskData(sundayScheduleTasksMockData); } - }, []); - - useEffect(() => { - if (taskDate === Dates.SUNDAY) { - setDailyTaskData(sundayScheduleTasksMockData); - } - else if (taskDate === Dates.MONDAY) { - setDailyTaskData(mondayScheduleTasksMockData); - } - else if (taskDate === Dates.TUESDAY) { - setDailyTaskData(tuesdayScheduleTasksMockData); - } - else if (taskDate === Dates.WEDNESDAY) { - setDailyTaskData(wednesdayScheduleTasksMockData); - } - else if (taskDate === Dates.THURSDAY) { - setDailyTaskData(thursdayScheduleTasksMockData); - } - else if (taskDate === Dates.FRIDAY) { - setDailyTaskData(fridayScheduleTasksMockData); - } - else if (taskDate === Dates.SATURDAY) { - setDailyTaskData(saturdayScheduleTasksMockData); - } - else { - setDailyTaskData(sundayScheduleTasksMockData); - } - }, [taskDate]) + }, [taskDate]); return (

Schedule Page

- + {renderRoomCards} @@ -136,73 +88,73 @@ const SchedulePage = (): React.ReactElement => { Daily Tasks - - + + + { + setTaskDate(Dates.SUNDAY); + }} + > + Sunday + + { + setTaskDate(Dates.MONDAY); + }} + > + Monday + { - setTaskDate(Dates.SUNDAY); - }} + _selected={{ color: "white", bg: "purple.main" }} + borderRadius="8px 8px 0 0" + onClick={() => { + setTaskDate(Dates.TUESDAY); + }} > - Sunday + Tuesday - { - setTaskDate(Dates.MONDAY); - }} - > - Monday - - { - setTaskDate(Dates.TUESDAY); - }} - > - Tuesday - - { - setTaskDate(Dates.WEDNESDAY); - }} - > - Wednesday - - { - setTaskDate(Dates.THURSDAY); - }} - > - Thursday - - { - setTaskDate(Dates.FRIDAY); - }} - > - Friday - - { - setTaskDate(Dates.SATURDAY); - }} - > - Saturday - - - + { + setTaskDate(Dates.WEDNESDAY); + }} + > + Wednesday + + { + setTaskDate(Dates.THURSDAY); + }} + > + Thursday + + { + setTaskDate(Dates.FRIDAY); + }} + > + Friday + + { + setTaskDate(Dates.SATURDAY); + }} + > + Saturday + + + { isSelectable /> - ); }; diff --git a/frontend/src/components/pages/schedule/ScheduleTable.tsx b/frontend/src/components/pages/schedule/ScheduleTable.tsx index 94dcaa7..b97f981 100644 --- a/frontend/src/components/pages/schedule/ScheduleTable.tsx +++ b/frontend/src/components/pages/schedule/ScheduleTable.tsx @@ -14,7 +14,7 @@ import { IconButton, Icon, } from "@chakra-ui/react"; -import ModeCommentOutlinedIcon from '@mui/icons-material/ModeCommentOutlined'; +import ModeCommentOutlinedIcon from "@mui/icons-material/ModeCommentOutlined"; import ChevronLeftOutlinedIcon from "@mui/icons-material/ChevronLeftOutlined"; import ChevronRightOutlinedIcon from "@mui/icons-material/ChevronRightOutlined"; import KeyboardArrowUpOutlinedIcon from "@mui/icons-material/KeyboardArrowUpOutlined"; @@ -208,20 +208,20 @@ const ScheduleTable = ({ return ( {isSelectable ? ( - + { - const newChecked = [...checked]; - newChecked[index + (page - 1) * maxResults] = - e.target.checked; - setChecked(newChecked); + const newChecked = [...checked]; + newChecked[index + (page - 1) * maxResults] = + e.target.checked; + setChecked(newChecked); }} /> - + ) : null} {columnInfo.map((column, i) => { const getColor = (status: string) => { @@ -248,20 +248,31 @@ const ScheduleTable = ({ justifyContent="space-evenly" alignItems="center" borderRadius="8px" - backgroundColor={getBoxColor(String(row[column.key]))} - >{row[column.key] ? {String(row[column.key])} : ''} - + backgroundColor={getBoxColor( + String(row[column.key]), + )} + > + {row[column.key] ? ( + {String(row[column.key])} + ) : ( + "" + )} + ) : ( - {row[column.key] ? String(row[column.key]) : ''} + + {row[column.key] ? String(row[column.key]) : ""} + ); })} - onEdit(row)}> - - + {row.status !== "Incomplete" && ( + onEdit(row)}> + + + )} ); })} diff --git a/frontend/src/mocks/scheduletasks.ts b/frontend/src/mocks/scheduletasks.ts index 343bb26..342e73a 100644 --- a/frontend/src/mocks/scheduletasks.ts +++ b/frontend/src/mocks/scheduletasks.ts @@ -1,169 +1,169 @@ export const scheduleTasksMockData = [ - { - title: "Weekly Review with CM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Skills Session with PM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Housing Plan", - status: "Excused", - time: "All day", - creditValue: "$5.00", - }, + { + title: "Weekly Review with CM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, ]; export const sundayScheduleTasksMockData = [ - { - title: "Weekly Review with CM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Skills Session with PM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Housing Plan", - status: "Excused", - time: "All day", - creditValue: "$5.00", - }, + { + title: "Weekly Review with CM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, ]; export const mondayScheduleTasksMockData = [ - { - title: "Weekly Review with CM", - status: "Excused", - time: "All day", - creditValue: "$10.00", - }, - { - title: "Skills Session with PM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Housing Plan", - status: "Excused", - time: "All day", - creditValue: "$5.00", - }, + { + title: "Weekly Review with CM", + status: "Excused", + time: "All day", + creditValue: "$10.00", + }, + { + title: "Skills Session with PM", + status: "Incomplete", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, ]; export const tuesdayScheduleTasksMockData = [ - { - title: "Weekly Review with CM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Skills Session with PM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Housing Plan", - status: "Excused", - time: "All day", - creditValue: "$5.00", - }, + { + title: "Weekly Review with CM1", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, ]; export const wednesdayScheduleTasksMockData = [ - { - title: "Weekly Review with CM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Skills Session with PM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Housing Plan", - status: "Excused", - time: "All day", - creditValue: "$5.00", - }, + { + title: "Weekly Review with CM2", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, ]; export const thursdayScheduleTasksMockData = [ - { - title: "Weekly Review with CM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Skills Session with PM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Housing Plan", - status: "Excused", - time: "All day", - creditValue: "$5.00", - }, + { + title: "Weekly Review with CM3", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, ]; export const fridayScheduleTasksMockData = [ - { - title: "Weekly Review with CM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Skills Session with PM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Housing Plan", - status: "Excused", - time: "All day", - creditValue: "$5.00", - }, + { + title: "Weekly Review with CM4", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, ]; export const saturdayScheduleTasksMockData = [ - { - title: "Weekly Review with CM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Skills Session with PM", - status: "Completed", - time: "All day", - creditValue: "$5.00", - }, - { - title: "Housing Plan", - status: "Excused", - time: "All day", - creditValue: "$5.00", - }, + { + title: "Weekly Review with CM5", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Skills Session with PM", + status: "Completed", + time: "All day", + creditValue: "$5.00", + }, + { + title: "Housing Plan", + status: "Excused", + time: "All day", + creditValue: "$5.00", + }, ]; -export default {}; \ No newline at end of file +export default {}; From 601a04a3e7bd67fdb946fa1ac55f4b069b2fbef2 Mon Sep 17 00:00:00 2001 From: Jesse Huang <87463074+jeessh@users.noreply.github.com> Date: Thu, 3 Oct 2024 21:02:51 -0400 Subject: [PATCH 6/9] Fix: commonTable showing more entries than existing --- frontend/src/components/common/CommonTable.tsx | 7 ++++--- frontend/src/components/pages/schedule/ScheduleTable.tsx | 7 ++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/common/CommonTable.tsx b/frontend/src/components/common/CommonTable.tsx index dc1146b..a91019e 100644 --- a/frontend/src/components/common/CommonTable.tsx +++ b/frontend/src/components/common/CommonTable.tsx @@ -257,9 +257,10 @@ const CommonTable = ({ - {`Showing ${(page - 1) * maxResults + 1} to ${page * maxResults} of ${ - data.length - } entries`} + {`Showing ${(page - 1) * maxResults + 1} to ${Math.min( + page * maxResults, + data.length, + )} of ${data.length} entries`} - {`Showing ${(page - 1) * maxResults + 1} to ${page * maxResults} of ${ - data.length - } entries`} + {`Showing ${(page - 1) * maxResults + 1} to ${Math.min( + page * maxResults, + data.length, + )} of ${data.length} entries`} Date: Sat, 26 Oct 2024 10:54:07 -0400 Subject: [PATCH 7/9] update component --- .../pages/schedule/ScheduleListView.tsx | 154 ++++++++++++++++++ .../pages/schedule/SchedulePage.tsx | 18 +- 2 files changed, 164 insertions(+), 8 deletions(-) create mode 100644 frontend/src/components/pages/schedule/ScheduleListView.tsx diff --git a/frontend/src/components/pages/schedule/ScheduleListView.tsx b/frontend/src/components/pages/schedule/ScheduleListView.tsx new file mode 100644 index 0000000..65415e0 --- /dev/null +++ b/frontend/src/components/pages/schedule/ScheduleListView.tsx @@ -0,0 +1,154 @@ +import React, { useEffect, useState } from "react"; +import { Flex, Tabs, TabList, Tab, Text } from "@chakra-ui/react"; + +import { tasksColumnTypes } from "./columnKeys"; + +import { + scheduleTasksMockData, + sundayScheduleTasksMockData, + mondayScheduleTasksMockData, + tuesdayScheduleTasksMockData, + wednesdayScheduleTasksMockData, + thursdayScheduleTasksMockData, + fridayScheduleTasksMockData, + saturdayScheduleTasksMockData, +} from "../../../mocks/scheduletasks"; + +import ScheduleTable, { ColumnInfoTypes, TableData } from "./ScheduleTable"; + +const ScheduleListView = (): React.ReactElement => { + const enum Dates { + SUNDAY = "SUNDAY", + MONDAY = "MONDAY", + TUESDAY = "TUESDAY", + WEDNESDAY = "WEDNESDAY", + THURSDAY = "THURSDAY", + FRIDAY = "FRIDAY", + SATURDAY = "SATURDAY", + } + + const [taskData, setTaskData] = useState([]); + const [taskDataColumns, setTaskDataColumns] = useState([]); + const [taskDate, setTaskDate] = useState(Dates.SUNDAY); + const [dailyTaskData, setDailyTaskData] = useState([]); + + useEffect(() => { + setTaskDataColumns(tasksColumnTypes); + setTaskData(scheduleTasksMockData); + if (taskDate === Dates.SUNDAY) { + setDailyTaskData(sundayScheduleTasksMockData); + } else if (taskDate === Dates.MONDAY) { + setDailyTaskData(mondayScheduleTasksMockData); + } else if (taskDate === Dates.TUESDAY) { + setDailyTaskData(tuesdayScheduleTasksMockData); + } else if (taskDate === Dates.WEDNESDAY) { + setDailyTaskData(wednesdayScheduleTasksMockData); + } else if (taskDate === Dates.THURSDAY) { + setDailyTaskData(thursdayScheduleTasksMockData); + } else if (taskDate === Dates.FRIDAY) { + setDailyTaskData(fridayScheduleTasksMockData); + } else if (taskDate === Dates.SATURDAY) { + setDailyTaskData(saturdayScheduleTasksMockData); + } else { + setDailyTaskData(sundayScheduleTasksMockData); + } + }, [taskDate]); + + return ( + <> + + + Weekly Tasks + + {}} + isSelectable + /> + + + + Daily Tasks + + + + { + setTaskDate(Dates.SUNDAY); + }} + > + Sunday + + { + setTaskDate(Dates.MONDAY); + }} + > + Monday + + { + setTaskDate(Dates.TUESDAY); + }} + > + Tuesday + + { + setTaskDate(Dates.WEDNESDAY); + }} + > + Wednesday + + { + setTaskDate(Dates.THURSDAY); + }} + > + Thursday + + { + setTaskDate(Dates.FRIDAY); + }} + > + Friday + + { + setTaskDate(Dates.SATURDAY); + }} + > + Saturday + + + + {}} + isSelectable + /> + + + ); +}; + +export default ScheduleListView; diff --git a/frontend/src/components/pages/schedule/SchedulePage.tsx b/frontend/src/components/pages/schedule/SchedulePage.tsx index add399f..263c2fc 100644 --- a/frontend/src/components/pages/schedule/SchedulePage.tsx +++ b/frontend/src/components/pages/schedule/SchedulePage.tsx @@ -20,6 +20,7 @@ import { } from "@mui/icons-material"; import { ScheduleType } from "../../../types/ScheduleTypes"; +import ScheduleListView from "./ScheduleListView"; const SchedulePage = (): React.ReactElement => { const [rooms, setRooms] = useState([]); @@ -66,7 +67,7 @@ const SchedulePage = (): React.ReactElement => { - + January 2025 {/* see announcements page for how to determine what text shows */} @@ -161,13 +162,14 @@ const SchedulePage = (): React.ReactElement => { Update Selected - - {scheduleType === "CALENDAR" ? ( - TEMP CALENDAR - ) : ( - {scheduleData} - )} - + {/* */} + {scheduleType === "CALENDAR" ? ( + TEMP CALENDAR + ) : ( + // {scheduleData} + + )} + {/* */} ); }; From 9cb51541d2a052ea0ac5b510a80b42db55d2409d Mon Sep 17 00:00:00 2001 From: Jesse Huang <87463074+jeessh@users.noreply.github.com> Date: Fri, 1 Nov 2024 22:34:06 -0400 Subject: [PATCH 8/9] Updated main schedule UI --- .../pages/schedule/SchedulePage.tsx | 85 ++++--------------- .../src/components/pages/tasks/TasksPage.tsx | 4 +- 2 files changed, 17 insertions(+), 72 deletions(-) diff --git a/frontend/src/components/pages/schedule/SchedulePage.tsx b/frontend/src/components/pages/schedule/SchedulePage.tsx index 263c2fc..2e1d28b 100644 --- a/frontend/src/components/pages/schedule/SchedulePage.tsx +++ b/frontend/src/components/pages/schedule/SchedulePage.tsx @@ -5,7 +5,6 @@ import { TabList, Tab, Heading, - Box, Button, IconButton, Icon, @@ -66,68 +65,6 @@ const SchedulePage = (): React.ReactElement => { - - - January 2025 - {/* see announcements page for how to determine what text shows */} - - - - } - /> - - } - /> - - - - - - - - - - - - - + + + + - {/* */} + {scheduleType === "CALENDAR" ? ( TEMP CALENDAR ) : ( - // {scheduleData} )} - {/* */} ); }; 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, From eb3d96646eb8498ab3fb60dfa93b94dec2dd11a1 Mon Sep 17 00:00:00 2001 From: Jesse Huang <87463074+jeessh@users.noreply.github.com> Date: Fri, 1 Nov 2024 23:23:58 -0400 Subject: [PATCH 9/9] reformatted folder structure and style fixes --- .../pages/schedule/SchedulePage.tsx | 96 ++++++++++++++----- .../{ => calendarView}/ScheduleCalendar.css | 0 .../{ => calendarView}/ScheduleCalendar.tsx | 0 .../{ => listView}/ScheduleListView.tsx | 12 +-- .../schedule/{ => listView}/ScheduleTable.tsx | 2 +- .../schedule/{ => listView}/columnKeys.ts | 2 +- 6 files changed, 81 insertions(+), 31 deletions(-) rename frontend/src/components/pages/schedule/{ => calendarView}/ScheduleCalendar.css (100%) rename frontend/src/components/pages/schedule/{ => calendarView}/ScheduleCalendar.tsx (100%) rename frontend/src/components/pages/schedule/{ => listView}/ScheduleListView.tsx (93%) rename frontend/src/components/pages/schedule/{ => listView}/ScheduleTable.tsx (99%) rename frontend/src/components/pages/schedule/{ => listView}/columnKeys.ts (81%) diff --git a/frontend/src/components/pages/schedule/SchedulePage.tsx b/frontend/src/components/pages/schedule/SchedulePage.tsx index 9fe47c2..d64d882 100644 --- a/frontend/src/components/pages/schedule/SchedulePage.tsx +++ b/frontend/src/components/pages/schedule/SchedulePage.tsx @@ -4,6 +4,7 @@ import { Tabs, TabList, Tab, + Box, Heading, Button, IconButton, @@ -65,11 +66,69 @@ const SchedulePage = (): React.ReactElement => { {formatTabs(rooms)} - + + + + January 2025 + {/* see announcements page for how to determine what text shows */} + + + + } + /> + + } + /> + + + + + + + + + - - - - - - {scheduleType === "CALENDAR" ? ( - - ) : ( - - )} + + + + {scheduleType === "CALENDAR" ? ( + + ) : ( + + )} + ); }; diff --git a/frontend/src/components/pages/schedule/ScheduleCalendar.css b/frontend/src/components/pages/schedule/calendarView/ScheduleCalendar.css similarity index 100% rename from frontend/src/components/pages/schedule/ScheduleCalendar.css rename to frontend/src/components/pages/schedule/calendarView/ScheduleCalendar.css diff --git a/frontend/src/components/pages/schedule/ScheduleCalendar.tsx b/frontend/src/components/pages/schedule/calendarView/ScheduleCalendar.tsx similarity index 100% rename from frontend/src/components/pages/schedule/ScheduleCalendar.tsx rename to frontend/src/components/pages/schedule/calendarView/ScheduleCalendar.tsx diff --git a/frontend/src/components/pages/schedule/ScheduleListView.tsx b/frontend/src/components/pages/schedule/listView/ScheduleListView.tsx similarity index 93% rename from frontend/src/components/pages/schedule/ScheduleListView.tsx rename to frontend/src/components/pages/schedule/listView/ScheduleListView.tsx index 65415e0..c3e43e5 100644 --- a/frontend/src/components/pages/schedule/ScheduleListView.tsx +++ b/frontend/src/components/pages/schedule/listView/ScheduleListView.tsx @@ -12,7 +12,7 @@ import { thursdayScheduleTasksMockData, fridayScheduleTasksMockData, saturdayScheduleTasksMockData, -} from "../../../mocks/scheduletasks"; +} from "../../../../mocks/scheduletasks"; import ScheduleTable, { ColumnInfoTypes, TableData } from "./ScheduleTable"; @@ -56,8 +56,8 @@ const ScheduleListView = (): React.ReactElement => { return ( <> - - + + Weekly Tasks { isSelectable /> - - + + Daily Tasks - +