From 238c632f9cddbbdac6a42fcbaf86bebaed4198b9 Mon Sep 17 00:00:00 2001 From: Cindy Li Date: Thu, 26 Sep 2024 22:00:52 -0400 Subject: [PATCH 01/59] 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 02/59] 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 03/59] 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 60bcb5bbb532b78cf61de983bfb773b72b55aa39 Mon Sep 17 00:00:00 2001 From: Cindy Li Date: Sat, 28 Sep 2024 10:59:01 -0400 Subject: [PATCH 04/59] 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 05/59] 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 06/59] 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 07/59] 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, 5 Oct 2024 10:21:09 -0400 Subject: [PATCH 08/59] Updated Modal --- .../src/components/pages/tasks/TaskModal.tsx | 250 ++++++++++-------- 1 file changed, 138 insertions(+), 112 deletions(-) diff --git a/frontend/src/components/pages/tasks/TaskModal.tsx b/frontend/src/components/pages/tasks/TaskModal.tsx index 0fa0c11..a968374 100644 --- a/frontend/src/components/pages/tasks/TaskModal.tsx +++ b/frontend/src/components/pages/tasks/TaskModal.tsx @@ -8,6 +8,7 @@ import { FormControl, FormLabel, Checkbox, + IconButton, } from "@chakra-ui/react"; import ModalContainer from "../../common/ModalContainer"; @@ -40,108 +41,20 @@ const generateOptions = () => { const options = generateOptions(); -const DateInput = ({ - dueDate, - setDueDate, - dueTime, - setDueTime, - isAllDay, - setIsAllDay, - recurrenceFrequency, - setRecurrenceFrequency, - submitPressed, -}: { - dueDate: string; - setDueDate: React.Dispatch>; - dueTime: string; - setDueTime: React.Dispatch>; - isAllDay: boolean; - setIsAllDay: React.Dispatch>; - recurrenceFrequency: string; - setRecurrenceFrequency: React.Dispatch>; - submitPressed: boolean; -}) => { - return ( - - - - Due Date - - - - setDueDate(e.target.value)} - /> - - at - - - - - setIsAllDay(e.target.checked)} - m={0} - > - All Day - - - - - - - ); -}; + const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => { + const [taskType, setTaskType] = useState(""); + const [recurrence, setRecurrence] = useState(""); + const [marillacBucks, setMarillacBucks] = useState(""); + const [title, setTitle] = useState(""); const [location, setLocation] = useState(""); const [dueDate, setDueDate] = useState(""); const [dueTime, setDueTime] = useState(""); const [isAllDay, setIsAllDay] = useState(false); const [recurrenceFrequency, setRecurrenceFrequency] = useState(""); - const [marillacBucks, setMarillacBucks] = useState(""); + const [submitPressed, setSubmitPressed] = useState(false); @@ -185,6 +98,25 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => { onDelete={handleDelete} > + + + Task Type + + + + + { submitPressed={submitPressed} required /> - - + - Location + Recurrence - + + + +
Select Days:
+ + + + + + + + + + + +
Completed On
+ + + + + +
Ends On
+ + + + + + + Date: Sat, 5 Oct 2024 10:21:55 -0400 Subject: [PATCH 09/59] added calendar component --- frontend/package.json | 4 ++ .../pages/schedule/ScheduleCalendar.tsx | 39 +++++++++++++++++++ .../pages/schedule/SchedulePage.tsx | 2 + 3 files changed, 45 insertions(+) create mode 100644 frontend/src/components/pages/schedule/ScheduleCalendar.tsx diff --git a/frontend/package.json b/frontend/package.json index 65defb8..6c2c783 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -9,6 +9,10 @@ "@chakra-ui/styled-system": "^2.9.2", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", + "@fullcalendar/core": "^6.1.15", + "@fullcalendar/daygrid": "^6.1.15", + "@fullcalendar/react": "^6.1.15", + "@fullcalendar/timegrid": "^6.1.15", "@mui/icons-material": "^5.15.14", "@mui/material": "^5.15.14", "@rjsf/bootstrap-4": "^2.5.1", diff --git a/frontend/src/components/pages/schedule/ScheduleCalendar.tsx b/frontend/src/components/pages/schedule/ScheduleCalendar.tsx new file mode 100644 index 0000000..540f268 --- /dev/null +++ b/frontend/src/components/pages/schedule/ScheduleCalendar.tsx @@ -0,0 +1,39 @@ +import FullCalendar from '@fullcalendar/react' +import timeGridPlugin from '@fullcalendar/timegrid'; +import { EventContentArg } from '@fullcalendar/core'; +import React from "react"; + +const events = [ + { title: 'Meeting', start: new Date('2024-09-29T09:00:00'), end: new Date('2024-09-29T010:00:00') } +] + +function renderEventContent(eventInfo: EventContentArg) { + return ( + <> + {eventInfo.timeText} + {eventInfo.event.title} + + ) +} + +export function ScheduleCalendar() { + return ( +
+

Demo App

+ +
+ ) +} + + + +export default ScheduleCalendar; \ No newline at end of file diff --git a/frontend/src/components/pages/schedule/SchedulePage.tsx b/frontend/src/components/pages/schedule/SchedulePage.tsx index 3e73bc9..0b84b0f 100644 --- a/frontend/src/components/pages/schedule/SchedulePage.tsx +++ b/frontend/src/components/pages/schedule/SchedulePage.tsx @@ -5,6 +5,7 @@ import { import RoomCard from "../home/HomeRoomCard" import { residentsMockData } from "../../../mocks/residents"; +import { ScheduleCalendar } from "./ScheduleCalendar"; const renderRoomCards = residentsMockData.map(resident => { > {renderRoomCards} + ); }; From 802fb5fc758f3a508c8f340764e9b284c92cd772 Mon Sep 17 00:00:00 2001 From: tnsprasanna Date: Sat, 5 Oct 2024 11:06:33 -0400 Subject: [PATCH 10/59] updated hover and alignment --- .../src/components/pages/tasks/TaskModal.tsx | 32 +++++++++++++++---- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/pages/tasks/TaskModal.tsx b/frontend/src/components/pages/tasks/TaskModal.tsx index a968374..36be3fa 100644 --- a/frontend/src/components/pages/tasks/TaskModal.tsx +++ b/frontend/src/components/pages/tasks/TaskModal.tsx @@ -147,53 +147,67 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
Select Days:
- - - - - - - @@ -204,6 +218,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => { Every Selected Day @@ -212,6 +227,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => { One of the selected days @@ -224,6 +240,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => { Never @@ -233,6 +250,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => { On From 297106bf57dbcad0ad99bb0f5adf1651ca75da33 Mon Sep 17 00:00:00 2001 From: tnsprasanna Date: Sat, 5 Oct 2024 12:00:35 -0400 Subject: [PATCH 11/59] days state changes --- .../src/components/pages/tasks/TaskModal.tsx | 43 +++++++++++++++++-- 1 file changed, 40 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/pages/tasks/TaskModal.tsx b/frontend/src/components/pages/tasks/TaskModal.tsx index 36be3fa..0a159b5 100644 --- a/frontend/src/components/pages/tasks/TaskModal.tsx +++ b/frontend/src/components/pages/tasks/TaskModal.tsx @@ -47,6 +47,9 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => { const [taskType, setTaskType] = useState(""); const [recurrence, setRecurrence] = useState(""); const [marillacBucks, setMarillacBucks] = useState(""); + const [selectedDays, setSelectedDays] = useState([]); + + const days = ["Su", "M", "Tu", "W", "Th", "F", "Sa"]; const [title, setTitle] = useState(""); const [location, setLocation] = useState(""); @@ -77,6 +80,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => { setSubmitPressed(false); }; + const handleMoneyInput = () => { const inputValue = marillacBucks.replace(/[^0-9.]/g, ""); // Remove non-numeric and non-period characters @@ -90,6 +94,14 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => { // delete task api stuff const handleDelete = () => {}; + const selectDay = (day: string) => { + if ((selectedDays).includes(day)) { + setSelectedDays(selectedDays.filter((d) => d !== day)); + } else { + setSelectedDays([...selectedDays, day]); + } + } + return ( { -
Select Days:
+
Select Days:
+ + {days.map((day, index) => ( + + ))} - + >S */} From c4f5ab1024a03dc35b07e5a4c35c324fe3972528 Mon Sep 17 00:00:00 2001 From: Cindy Li Date: Sat, 5 Oct 2024 12:00:51 -0400 Subject: [PATCH 12/59] fixed event format --- .../pages/schedule/ScheduleCalendar.css | 8 ++++ .../pages/schedule/ScheduleCalendar.tsx | 46 +++++++++++++++---- 2 files changed, 45 insertions(+), 9 deletions(-) create mode 100644 frontend/src/components/pages/schedule/ScheduleCalendar.css diff --git a/frontend/src/components/pages/schedule/ScheduleCalendar.css b/frontend/src/components/pages/schedule/ScheduleCalendar.css new file mode 100644 index 0000000..5640a0c --- /dev/null +++ b/frontend/src/components/pages/schedule/ScheduleCalendar.css @@ -0,0 +1,8 @@ +.fc-timegrid-slot + +.fc-timegrid-slot-lane + +.fc-timegrid-slot-minor { + display: none; + color: transparent; +} \ No newline at end of file diff --git a/frontend/src/components/pages/schedule/ScheduleCalendar.tsx b/frontend/src/components/pages/schedule/ScheduleCalendar.tsx index 540f268..0901f4a 100644 --- a/frontend/src/components/pages/schedule/ScheduleCalendar.tsx +++ b/frontend/src/components/pages/schedule/ScheduleCalendar.tsx @@ -1,22 +1,44 @@ import FullCalendar from '@fullcalendar/react' import timeGridPlugin from '@fullcalendar/timegrid'; -import { EventContentArg } from '@fullcalendar/core'; -import React from "react"; +import { DayHeaderContentArg, EventContentArg } from '@fullcalendar/core'; +import React, { useEffect, useRef } from "react"; +import ModeCommentOutlinedIcon from "@mui/icons-material/ModeCommentOutlined"; const events = [ - { title: 'Meeting', start: new Date('2024-09-29T09:00:00'), end: new Date('2024-09-29T010:00:00') } + { title: 'Meeting', start: new Date('2024-09-29T09:00:00'), end: new Date('2024-09-29T10:00:00' ) }, + { title: 'AllDay', start: '2024-10-30T00:00:00', end: '2024-11-02T00:00:00', allDay: true } ] function renderEventContent(eventInfo: EventContentArg) { return ( - <> - {eventInfo.timeText} - {eventInfo.event.title} - +
+ {eventInfo.event.title} +
+ {new Date(eventInfo.event.start!).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - {new Date(eventInfo.event.end!).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} +
+ +
+ ) +} + +function renderHeaderContent(date: DayHeaderContentArg) { + const dayOfWeek = date.date.toLocaleString('en-US', { weekday: 'long' }); + const dayOfMonth = date.date.getDate(); + + return ( +
+ {dayOfWeek.substring(0, 3).toUpperCase()} +
+ {dayOfMonth} +
) } export function ScheduleCalendar() { + const calendarRef = useRef(null); + const handleAllDayContent = (arg: any) => { + return {arg.text ? '' : ''}; + }; return (

Demo App

@@ -27,13 +49,19 @@ export function ScheduleCalendar() { events={events} slotMinTime="08:00:00" slotMaxTime="19:00:00" + slotDuration={{ minute: 20 }} + slotLabelInterval={{ hours: 1 }} eventContent={renderEventContent} + dayHeaderContent={renderHeaderContent} eventDisplay="block" + firstDay={1} // Set the first day of the week to Monday + slotLabelFormat={{ hour: 'numeric', minute: '2-digit', hour12: true }} // Format slots as H:MM am/pm + allDayContent={handleAllDayContent} + eventBackgroundColor='transparent' + eventBorderColor='transparent' />
) } - - export default ScheduleCalendar; \ No newline at end of file From c40d2e066935c96b1d90f8fe630237f7c2dccbc6 Mon Sep 17 00:00:00 2001 From: karthikbselva Date: Sat, 5 Oct 2024 14:55:30 -0400 Subject: [PATCH 13/59] Alignment Changes --- frontend/src/components/pages/tasks/TaskModal.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/components/pages/tasks/TaskModal.tsx b/frontend/src/components/pages/tasks/TaskModal.tsx index 0a159b5..11e1aa0 100644 --- a/frontend/src/components/pages/tasks/TaskModal.tsx +++ b/frontend/src/components/pages/tasks/TaskModal.tsx @@ -48,7 +48,6 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => { const [recurrence, setRecurrence] = useState(""); const [marillacBucks, setMarillacBucks] = useState(""); const [selectedDays, setSelectedDays] = useState([]); - const days = ["Su", "M", "Tu", "W", "Th", "F", "Sa"]; const [title, setTitle] = useState(""); @@ -157,7 +156,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => { -
Select Days:
+
Select Days:
{days.map((day, index) => ( ))} - - - {/* - - - - - - */} From 78742f129be5c187a026fe2baebd2d8f168920e7 Mon Sep 17 00:00:00 2001 From: JackChujun <1yanjac@gmail.com> Date: Thu, 24 Oct 2024 20:58:00 -0400 Subject: [PATCH 19/59] added overlapping test --- frontend/src/components/pages/schedule/ScheduleCalendar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/pages/schedule/ScheduleCalendar.tsx b/frontend/src/components/pages/schedule/ScheduleCalendar.tsx index 0901f4a..6082a3d 100644 --- a/frontend/src/components/pages/schedule/ScheduleCalendar.tsx +++ b/frontend/src/components/pages/schedule/ScheduleCalendar.tsx @@ -6,6 +6,7 @@ import ModeCommentOutlinedIcon from "@mui/icons-material/ModeCommentOutlined"; const events = [ { title: 'Meeting', start: new Date('2024-09-29T09:00:00'), end: new Date('2024-09-29T10:00:00' ) }, + { title: 'AllDay', start: '2024-10-30T00:00:00', end: '2024-11-02T00:00:00', allDay: true }, { title: 'AllDay', start: '2024-10-30T00:00:00', end: '2024-11-02T00:00:00', allDay: true } ] @@ -34,7 +35,7 @@ function renderHeaderContent(date: DayHeaderContentArg) { ) } -export function ScheduleCalendar() { +export function ScheduleCalendar() { const calendarRef = useRef(null); const handleAllDayContent = (arg: any) => { return {arg.text ? '' : ''}; From bc9c85558e7c792ff6164223db2152e876dc4dec Mon Sep 17 00:00:00 2001 From: Cindy Li Date: Thu, 24 Oct 2024 21:01:18 -0400 Subject: [PATCH 20/59] fixed all day event format --- .../pages/schedule/ScheduleCalendar.tsx | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/pages/schedule/ScheduleCalendar.tsx b/frontend/src/components/pages/schedule/ScheduleCalendar.tsx index 0901f4a..3991c53 100644 --- a/frontend/src/components/pages/schedule/ScheduleCalendar.tsx +++ b/frontend/src/components/pages/schedule/ScheduleCalendar.tsx @@ -5,18 +5,26 @@ import React, { useEffect, useRef } from "react"; import ModeCommentOutlinedIcon from "@mui/icons-material/ModeCommentOutlined"; const events = [ - { title: 'Meeting', start: new Date('2024-09-29T09:00:00'), end: new Date('2024-09-29T10:00:00' ) }, - { title: 'AllDay', start: '2024-10-30T00:00:00', end: '2024-11-02T00:00:00', allDay: true } + { title: 'test', start: new Date('2024-09-29T09:00:00'), end: new Date('2024-09-29T10:00:00' ), allDay: true }, ] function renderEventContent(eventInfo: EventContentArg) { + const isAllDay = eventInfo.event.allDay; return ( -
- {eventInfo.event.title} -
- {new Date(eventInfo.event.start!).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - {new Date(eventInfo.event.end!).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} -
- +
+
{eventInfo.event.title}
+ {isAllDay ? '' : `${new Date(eventInfo.event.start!).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - ${new Date(eventInfo.event.end!).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`} +
) } @@ -41,7 +49,6 @@ export function ScheduleCalendar() { }; return (
-

Demo App

) From 074bfd83805f72274097a1563f5078cd39a2de87 Mon Sep 17 00:00:00 2001 From: karthikbselva Date: Thu, 24 Oct 2024 21:31:30 -0400 Subject: [PATCH 21/59] Fixed bug and added components --- .../src/components/pages/tasks/TaskModal.tsx | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/pages/tasks/TaskModal.tsx b/frontend/src/components/pages/tasks/TaskModal.tsx index dccb43a..b23a73c 100644 --- a/frontend/src/components/pages/tasks/TaskModal.tsx +++ b/frontend/src/components/pages/tasks/TaskModal.tsx @@ -47,6 +47,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => { const [taskType, setTaskType] = useState(""); const [recurrence, setRecurrence] = useState(""); const [marillacBucks, setMarillacBucks] = useState(""); + const [comments, setComments] = useState(""); const [selectedDays, setSelectedDays] = useState([]); const days = ["Su", "M", "Tu", "W", "Th", "F", "Sa"]; @@ -149,7 +150,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => { height="34px" > - + @@ -192,10 +193,10 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => { /> Every Selected Day -