From 5154652d0d264de37b211fac634546bd367edf4e Mon Sep 17 00:00:00 2001 From: RoshanKarthikRajesh Date: Sat, 22 Jun 2024 12:40:49 -0400 Subject: [PATCH 01/16] Made minor improvements to the tasks page; need to add animations and option to delete a task --- src/app/(home)/tasks/page.js | 29 ++++---------------------- src/components/Cards/TaskCard.js | 2 +- src/components/Cards/TaskHeaderCard.js | 5 +++-- 3 files changed, 8 insertions(+), 28 deletions(-) diff --git a/src/app/(home)/tasks/page.js b/src/app/(home)/tasks/page.js index cfa7891..fc2e3c1 100755 --- a/src/app/(home)/tasks/page.js +++ b/src/app/(home)/tasks/page.js @@ -19,6 +19,8 @@ import { initialData } from '@/components/Data/initialData'; // Assuming DragDropContext will be used later import { DragDropContext } from '@hello-pangea/dnd'; +import TaskHeaderCard from "../../../components/Cards/TaskHeaderCard"; +import TaskCard from "../../../components/Cards/TaskCard"; export default function Lists() { // State management @@ -34,31 +36,8 @@ export default function Lists() { return ( <> - {data.columnOrder.map((columnId) => { - const column = data.columns[columnId]; - const tasks = column.tasksIds.map((taskId) => data.tasks[taskId]); - const title = column.title; - - return ( - - - {title} - - - - - - ); - })} + + ); } diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js index 11f0757..55ec0b4 100644 --- a/src/components/Cards/TaskCard.js +++ b/src/components/Cards/TaskCard.js @@ -32,7 +32,7 @@ export default function TaskCard ()
- -
+ - + ); } \ No newline at end of file diff --git a/src/components/Data/initialData.js b/src/components/Data/initialData.js index 2978470..977d91e 100644 --- a/src/components/Data/initialData.js +++ b/src/components/Data/initialData.js @@ -1,9 +1,9 @@ export const initialData = { tasks: { - 'task-1': { id: 'task-1', content: 'Complete the Tasks Page', date: 'January 14th, 2023', important: true, checked: false}, - 'task-2': { id: 'task-2', content: 'Transfer the Backend Stack to Amplify 2.0', date: 'January 25th, 2023', important: true, checked: false}, - 'class-1': { id: 'class-1', content: "COMP.4220 - Machine Learning", date: 'January 16th, 2023', important: true, checked: false}, - 'class-2': {id: 'class-2', content: "COMP.2040 - Computing IV", date: 'January 16th, 2023', important: false, checked: true}, + 'task-1': { id: 'task-1', content: 'Complete the Tasks Page', date: 'January 14th, 2023', important: true, checked: false }, + 'task-2': { id: 'task-2', content: 'Transfer the Backend Stack to Amplify 2.0', date: 'January 25th, 2023', important: true, checked: false }, + 'class-1': { id: 'class-1', content: "COMP.4220 - Machine Learning", date: 'January 16th, 2023', important: true, checked: false }, + 'class-2': { id: 'class-2', content: "COMP.2040 - Computing IV", date: 'January 16th, 2023', important: false, checked: true }, }, columns: { @@ -24,4 +24,79 @@ export const initialData = { }, }, columnOrder: ['column-1', 'column-2', 'column-3'], -}; \ No newline at end of file +}; + +export const initialTasks = [ + { + id: '1', + title: "finish homework", + details: "finish it by 11:59pm", + date: "June 23, 2024", + important: true, + done: false + }, + { + id: '2', + title: "sfsdfs", + details: "sdfsdf them", + date: "June 23, 2024", + important: true, + done: false + }, + { + id: '3', + title: "Tangowe4ngoiretngsks", + details: "io4kbgoi4qbgi them", + date: "June 23, 2024", + important: true, + done: false + }, + { + id: '4', + title: "oi3bgib4ng5", + details: "fiib435go'ib1345gib1gnish them", + date: "June 23, 2024", + important: true, + done: false + }, + { + id: '5', + title: "oi13b'4goib134g", + details: "j1b3;gjob13'gob them", + date: "June 23, 2024", + important: true, + done: false + }, + { + id: '6', + title: "Tasks", + details: "finish them", + date: "June 23, 2024", + important: true, + done: false + }, + { + id: '7', + title: "Tasks", + details: "finish them", + date: "June 23, 2024", + important: true, + done: false + }, + { + id: '8', + title: "Tasks", + details: "finish them", + date: "June 23, 2024", + important: true, + done: false + }, + { + id: '9', + title: "Tasks", + details: "finish them", + date: "June 23, 2024", + important: true, + done: false + } +] \ No newline at end of file diff --git a/src/components/Dialogs/TaskDialog.js b/src/components/Dialogs/TaskDialog.js deleted file mode 100644 index eee9472..0000000 --- a/src/components/Dialogs/TaskDialog.js +++ /dev/null @@ -1,87 +0,0 @@ -// React -import * as React from 'react'; - -// MUI imports -import Button from "@mui/material/Button"; -import TextField from "@mui/material/TextField"; -import Typography from "@mui/material/Typography"; -import Dialog from "@mui/material/Dialog"; -import DialogTitle from "@mui/material/DialogTitle"; -import DialogContent from "@mui/material/DialogContent"; -import DialogActions from "@mui/material/DialogActions"; -import IconButton from "@mui/material/IconButton"; -import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'; - -export default function TaskDialog({ open, handleClose, handleAddTaskCard }) { - // need to work on the PaperProps - const [openCalendar, setOpenCalendar] = React.useState(false); - - function handleCalendarIconClick() { - setOpenCalendar(true); - } - - function handleCloseCalendar() { - setOpenCalendar(false); - } - - return ( - <> - - Create Task - - - - {/* Could be better if the below text field's a text box */} - - - - {/* Add date functionality below as well */} -
- {/* Change so that Add date aligns with the calendar icon */} - Add date - - {/* Should be able to select a date on click. */} - -
- - {/* Actions to perform (cancel, add) */} - - - - {/* Need to add functionality */} - - - - ); -} \ No newline at end of file From 8c15d5ab3ace240152a7714159e68567b22f71a3 Mon Sep 17 00:00:00 2001 From: RoshanKarthikRajesh Date: Mon, 24 Jun 2024 12:40:21 -0400 Subject: [PATCH 05/16] Added task delete functionality. Need to change to make it work with AWS Amplify. --- src/app/(home)/tasks/page.js | 14 +++++++++++--- src/components/Cards/TaskCard.js | 6 +++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/app/(home)/tasks/page.js b/src/app/(home)/tasks/page.js index 159b755..328eaa6 100755 --- a/src/app/(home)/tasks/page.js +++ b/src/app/(home)/tasks/page.js @@ -17,7 +17,7 @@ import { DragDropContext } from '@hello-pangea/dnd'; import TaskHeaderCard from "../../../components/Cards/TaskHeaderCard"; import TaskCard from "../../../components/Cards/TaskCard"; -import {Box} from "@mui/material"; +import { Box } from "@mui/material"; export default function Lists () { @@ -27,15 +27,23 @@ export default function Lists () // Use theme from Material UI const theme = useTheme(); + const handleTaskDelete = (id) => + { + setTasks(tasks.filter((t) => t.id !== id)); + console.log('deleted'); + } + return ( <> { - initialTasks.map((t) => + tasks.map((t, index) => { return ( - + (index === tasks.length - 1) ? + handleTaskDelete(t.id)} /> + : handleTaskDelete(t.id)} /> ) }) } diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js index 41de7d8..9c3cab1 100644 --- a/src/components/Cards/TaskCard.js +++ b/src/components/Cards/TaskCard.js @@ -18,7 +18,7 @@ import MenuItem from "@mui/material/MenuItem"; //React import React, { useState } from 'react'; -export default function TaskCard ({ task }) +export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) { const [isHovering, setIsHovering] = useState(false); @@ -48,7 +48,7 @@ export default function TaskCard ({ task }) horizontal: "right", }} > - + Delete @@ -58,7 +58,7 @@ export default function TaskCard ({ task }) <> - + From fcdd924d9e7ac7f4ecc0cdda0912b6e164c9e4d8 Mon Sep 17 00:00:00 2001 From: RoshanKarthikRajesh Date: Wed, 26 Jun 2024 09:52:26 -0400 Subject: [PATCH 06/16] Added icon to mark a task as important, but unsure if it should be in the TaskCard.js page or task page.js. --- src/components/Cards/TaskCard.js | 14 ++++++++++++-- src/components/Cards/TaskHeaderCard.js | 8 ++++---- src/components/Data/initialData.js | 8 ++++---- 3 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js index 9c3cab1..4b75c71 100644 --- a/src/components/Cards/TaskCard.js +++ b/src/components/Cards/TaskCard.js @@ -13,24 +13,29 @@ import Tooltip from "@mui/material/Tooltip"; import MoreVertOutlined from "@mui/icons-material/MoreVertOutlined"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; +import StarOutlineIcon from '@mui/icons-material/StarOutline'; //React import React, { useState } from 'react'; +import { Star } from "@mui/icons-material"; export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) { + const { title, details, date, important, checked } = task; + const [isHovering, setIsHovering] = useState(false); const [anchorEl, setAnchorEl] = useState(null); + const [isImportant, setIsImportant] = useState(important); const taskOptionsOpen = Boolean(anchorEl); const handleMouseOver = () => setIsHovering(true); const handleMouseLeave = () => setIsHovering(false); const handleTaskOptionsClose = () => setAnchorEl(null); const handleTaskOptionsOpen = (event) => setAnchorEl(event.currentTarget); + const handleImportantIconClick = () => setIsImportant(!isImportant); - const { title, details, date, important, checked } = task; const TaskOptionsMenu = ( - + + + + {isImportant ? : } + + {TaskOptionsMenu} : diff --git a/src/components/Cards/TaskHeaderCard.js b/src/components/Cards/TaskHeaderCard.js index 49278f6..0f5123c 100644 --- a/src/components/Cards/TaskHeaderCard.js +++ b/src/components/Cards/TaskHeaderCard.js @@ -48,9 +48,9 @@ export default function TaskHeaderCard() { return ( <> -
+ -
+ My Tasks @@ -61,7 +61,7 @@ export default function TaskHeaderCard() { {TaskHeaderOptionsMenu} -
+
+ ); } \ No newline at end of file diff --git a/src/components/Data/initialData.js b/src/components/Data/initialData.js index 977d91e..cacdfe1 100644 --- a/src/components/Data/initialData.js +++ b/src/components/Data/initialData.js @@ -32,7 +32,7 @@ export const initialTasks = [ title: "finish homework", details: "finish it by 11:59pm", date: "June 23, 2024", - important: true, + important: false, done: false }, { @@ -72,7 +72,7 @@ export const initialTasks = [ title: "Tasks", details: "finish them", date: "June 23, 2024", - important: true, + important: false, done: false }, { @@ -80,7 +80,7 @@ export const initialTasks = [ title: "Tasks", details: "finish them", date: "June 23, 2024", - important: true, + important: false, done: false }, { @@ -96,7 +96,7 @@ export const initialTasks = [ title: "Tasks", details: "finish them", date: "June 23, 2024", - important: true, + important: false, done: false } ] \ No newline at end of file From 5ed481b970b036db6a59af963623b8c25bc51d04 Mon Sep 17 00:00:00 2001 From: RoshanKarthikRajesh Date: Thu, 27 Jun 2024 18:00:24 -0400 Subject: [PATCH 07/16] organization --- src/components/Cards/TaskCard.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js index 4b75c71..6431451 100644 --- a/src/components/Cards/TaskCard.js +++ b/src/components/Cards/TaskCard.js @@ -14,11 +14,11 @@ import MoreVertOutlined from "@mui/icons-material/MoreVertOutlined"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; import StarOutlineIcon from '@mui/icons-material/StarOutline'; - +import { Star } from "@mui/icons-material"; //React import React, { useState } from 'react'; -import { Star } from "@mui/icons-material"; + export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) { From 9bd02a9c90211d699d14cf00daf7e445f039e2b1 Mon Sep 17 00:00:00 2001 From: RoshanKarthikRajesh Date: Fri, 28 Jun 2024 10:04:12 -0400 Subject: [PATCH 08/16] Started on the date picker dialog. Needs more work. --- src/components/Dialogs/DatePickerDialog.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/components/Dialogs/DatePickerDialog.js diff --git a/src/components/Dialogs/DatePickerDialog.js b/src/components/Dialogs/DatePickerDialog.js new file mode 100644 index 0000000..866cb6b --- /dev/null +++ b/src/components/Dialogs/DatePickerDialog.js @@ -0,0 +1,15 @@ +//React +import * as React from 'react'; + +//MUI +import { Dialog } from "@mui/material"; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; + +export default function DatePickerDialog () +{ + return ( + + + + ) +} \ No newline at end of file From 98e892d023a3f9c6bddf714c611f22eaef5ec12d Mon Sep 17 00:00:00 2001 From: RoshanKarthikRajesh Date: Fri, 28 Jun 2024 10:54:04 -0400 Subject: [PATCH 09/16] Having erroneous rendering. Will look into that later. --- package-lock.json | 98 +++++++++++++++++++--- package.json | 8 +- src/app/(home)/tasks/page.js | 2 + src/components/Dialogs/DatePickerDialog.js | 13 ++- 4 files changed, 104 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9e3c3d8..489230b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,13 +14,15 @@ "@dnd-kit/core": "^6.1.0", "@dnd-kit/sortable": "^8.0.0", "@emotion/cache": "^11.11.0", - "@emotion/react": "^11.11.3", - "@emotion/styled": "^11.11.0", + "@emotion/react": "^11.11.4", + "@emotion/styled": "^11.11.5", "@hello-pangea/dnd": "^16.6.0", "@mui/icons-material": "^5.14.18", - "@mui/material": "^5.14.18", + "@mui/material": "^5.15.21", "@mui/material-nextjs": "^5.15.7", + "@mui/x-date-pickers": "^7.7.1", "aws-amplify": "^6.3.7", + "dayjs": "^1.11.11", "mui-nested-menu": "^3.3.0", "next": "latest", "react": "latest", @@ -12183,6 +12185,7 @@ "version": "11.11.4", "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", @@ -12223,6 +12226,7 @@ "version": "11.11.5", "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz", "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", @@ -13757,9 +13761,10 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.15.20", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.20.tgz", - "integrity": "sha512-DoL2ppgldL16utL8nNyj/P12f8mCNdx/Hb/AJnX9rLY4b52hCMIx1kH83pbXQ6uMy6n54M3StmEbvSGoj2OFuA==", + "version": "5.15.21", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.21.tgz", + "integrity": "sha512-dp9lXBaJZzJYeJfQY3Ow4Rb49QaCEdkl2KKYscdQHQm6bMJ+l4XPY3Cd9PCeeJTsHPIDJ60lzXbeRgs6sx/rpw==", + "license": "MIT", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" @@ -13791,13 +13796,14 @@ } }, "node_modules/@mui/material": { - "version": "5.15.20", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.20.tgz", - "integrity": "sha512-tVq3l4qoXx/NxUgIx/x3lZiPn/5xDbdTE8VrLczNpfblLYZzlrbxA7kb9mI8NoBF6+w9WE9IrxWnKK5KlPI2bg==", + "version": "5.15.21", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.21.tgz", + "integrity": "sha512-nTyCcgduKwHqiuQ/B03EQUa+utSMzn2sQp0QAibsnYe4tvc3zkMbO0amKpl48vhABIY3IvT6w9615BFIgMt0YA==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", "@mui/base": "5.0.0-beta.40", - "@mui/core-downloads-tracker": "^5.15.20", + "@mui/core-downloads-tracker": "^5.15.21", "@mui/system": "^5.15.20", "@mui/types": "^7.2.14", "@mui/utils": "^5.15.20", @@ -14004,6 +14010,72 @@ } } }, + "node_modules/@mui/x-date-pickers": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.7.1.tgz", + "integrity": "sha512-p7/TY8QcdQd6RelNqzW5q89GeUFctvZnDHTfQVEC0l0nAy7ArE6u21uNF8QWGrijZoJXCM+OlIRzlZADaUPpWA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.24.7", + "@mui/base": "^5.0.0-beta.40", + "@mui/system": "^5.15.20", + "@mui/utils": "^5.15.20", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^5.15.14", + "date-fns": "^2.25.0 || ^3.2.0", + "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0", + "dayjs": "^1.10.7", + "luxon": "^3.0.2", + "moment": "^2.29.4", + "moment-hijri": "^2.1.2", + "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "date-fns": { + "optional": true + }, + "date-fns-jalali": { + "optional": true + }, + "dayjs": { + "optional": true + }, + "luxon": { + "optional": true + }, + "moment": { + "optional": true + }, + "moment-hijri": { + "optional": true + }, + "moment-jalaali": { + "optional": true + } + } + }, "node_modules/@next/env": { "version": "14.2.4", "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.4.tgz", @@ -17802,6 +17874,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/dayjs": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz", + "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==", + "license": "MIT" + }, "node_modules/debounce-promise": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/debounce-promise/-/debounce-promise-3.1.2.tgz", diff --git a/package.json b/package.json index 9cf1c5d..9dc35a1 100755 --- a/package.json +++ b/package.json @@ -19,13 +19,15 @@ "@dnd-kit/core": "^6.1.0", "@dnd-kit/sortable": "^8.0.0", "@emotion/cache": "^11.11.0", - "@emotion/react": "^11.11.3", - "@emotion/styled": "^11.11.0", + "@emotion/react": "^11.11.4", + "@emotion/styled": "^11.11.5", "@hello-pangea/dnd": "^16.6.0", "@mui/icons-material": "^5.14.18", - "@mui/material": "^5.14.18", + "@mui/material": "^5.15.21", "@mui/material-nextjs": "^5.15.7", + "@mui/x-date-pickers": "^7.7.1", "aws-amplify": "^6.3.7", + "dayjs": "^1.11.11", "mui-nested-menu": "^3.3.0", "next": "latest", "react": "latest", diff --git a/src/app/(home)/tasks/page.js b/src/app/(home)/tasks/page.js index 328eaa6..1c46130 100755 --- a/src/app/(home)/tasks/page.js +++ b/src/app/(home)/tasks/page.js @@ -18,6 +18,7 @@ import TaskHeaderCard from "../../../components/Cards/TaskHeaderCard"; import TaskCard from "../../../components/Cards/TaskCard"; import { Box } from "@mui/material"; +import DatePickerDialog from "@/components/Dialogs/DatePickerDialog"; export default function Lists () { @@ -48,6 +49,7 @@ export default function Lists () }) } + ); } \ No newline at end of file diff --git a/src/components/Dialogs/DatePickerDialog.js b/src/components/Dialogs/DatePickerDialog.js index 866cb6b..2824d06 100644 --- a/src/components/Dialogs/DatePickerDialog.js +++ b/src/components/Dialogs/DatePickerDialog.js @@ -3,13 +3,18 @@ import * as React from 'react'; //MUI import { Dialog } from "@mui/material"; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +import { StaticDatePicker } from '@mui/x-date-pickers/DatePicker'; +import { LocalizationProvider } from "@mui/x-date-pickers"; +import dayjs from 'dayjs'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; export default function DatePickerDialog () { return ( - - + + + + - ) + ); } \ No newline at end of file From 9c28d06203cca5f6ca88e25602fafe450816ea22 Mon Sep 17 00:00:00 2001 From: RoshanKarthikRajesh Date: Fri, 28 Jun 2024 18:15:35 -0400 Subject: [PATCH 10/16] Now it works correctly --- src/components/Cards/TaskCard.js | 7 ++++++- src/components/Dialogs/DatePickerDialog.js | 7 ++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js index 6431451..3d200b9 100644 --- a/src/components/Cards/TaskCard.js +++ b/src/components/Cards/TaskCard.js @@ -18,6 +18,7 @@ import { Star } from "@mui/icons-material"; //React import React, { useState } from 'react'; +import DatePickerDialog from "../Dialogs/DatePickerDialog"; export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) @@ -28,6 +29,7 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) const [isHovering, setIsHovering] = useState(false); const [anchorEl, setAnchorEl] = useState(null); const [isImportant, setIsImportant] = useState(important); + const [openCalendarDialog, setOpenCalendarDialog] = useState(false); const taskOptionsOpen = Boolean(anchorEl); const handleMouseOver = () => setIsHovering(true); @@ -35,6 +37,8 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) const handleTaskOptionsClose = () => setAnchorEl(null); const handleTaskOptionsOpen = (event) => setAnchorEl(event.currentTarget); const handleImportantIconClick = () => setIsImportant(!isImportant); + const handleDateIconClick = () => setOpenCalendarDialog(true); + const handleCloseDialog = () => setOpenCalendarDialog(false); const TaskOptionsMenu = ( @@ -95,7 +99,7 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) - + ); diff --git a/src/components/Dialogs/DatePickerDialog.js b/src/components/Dialogs/DatePickerDialog.js index 2824d06..9ec1821 100644 --- a/src/components/Dialogs/DatePickerDialog.js +++ b/src/components/Dialogs/DatePickerDialog.js @@ -3,15 +3,16 @@ import * as React from 'react'; //MUI import { Dialog } from "@mui/material"; -import { StaticDatePicker } from '@mui/x-date-pickers/DatePicker'; +import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'; import { LocalizationProvider } from "@mui/x-date-pickers"; import dayjs from 'dayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -export default function DatePickerDialog () +export default function DatePickerDialog ({ openCalendarDialog, onClose }) { + return ( - + From dcfbd1dad584adc3fc7747b46f4814a9523dbb01 Mon Sep 17 00:00:00 2001 From: RoshanKarthikRajesh Date: Sat, 29 Jun 2024 10:51:15 -0400 Subject: [PATCH 11/16] Able to add tasks, but we need to change how the date is formatted and also whether a task has been completed. --- src/app/(home)/tasks/page.js | 16 +++++++++++++++- src/components/Cards/TaskCard.js | 2 +- src/components/Cards/TaskHeaderCard.js | 5 +++-- 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/app/(home)/tasks/page.js b/src/app/(home)/tasks/page.js index 1c46130..65f589d 100755 --- a/src/app/(home)/tasks/page.js +++ b/src/app/(home)/tasks/page.js @@ -34,9 +34,23 @@ export default function Lists () console.log('deleted'); } + const handleTaskAddClick = () => + { + newTask = { + id: tasks.length, + title: "", + details: "", + date: "", + important: false, + done: false + }; + setTasks([...tasks, newTask]); + console.log('added a task'); + } + return ( <> - + { tasks.map((t, index) => diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js index 3d200b9..c212104 100644 --- a/src/components/Cards/TaskCard.js +++ b/src/components/Cards/TaskCard.js @@ -24,7 +24,7 @@ import DatePickerDialog from "../Dialogs/DatePickerDialog"; export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) { - const { title, details, date, important, checked } = task; + const { title, details, date, important, done } = task; const [isHovering, setIsHovering] = useState(false); const [anchorEl, setAnchorEl] = useState(null); diff --git a/src/components/Cards/TaskHeaderCard.js b/src/components/Cards/TaskHeaderCard.js index 0f5123c..3ca2f12 100644 --- a/src/components/Cards/TaskHeaderCard.js +++ b/src/components/Cards/TaskHeaderCard.js @@ -16,7 +16,8 @@ import MenuItem from "@mui/material/MenuItem"; import React from 'react'; import { useState } from 'react'; -export default function TaskHeaderCard() { +export default function TaskHeaderCard ({ handleAddTask }) +{ const [anchorEl, setAnchorEl] = useState(null); const taskHeaderOptionsOpen = Boolean(anchorEl); @@ -64,7 +65,7 @@ export default function TaskHeaderCard() { - - + ); diff --git a/src/components/Data/initialData.js b/src/components/Data/initialData.js index cacdfe1..54366a2 100644 --- a/src/components/Data/initialData.js +++ b/src/components/Data/initialData.js @@ -31,7 +31,7 @@ export const initialTasks = [ id: '1', title: "finish homework", details: "finish it by 11:59pm", - date: "June 23, 2024", + date: "2024-06-23", important: false, done: false }, @@ -39,7 +39,7 @@ export const initialTasks = [ id: '2', title: "sfsdfs", details: "sdfsdf them", - date: "June 23, 2024", + date: "2024-06-23", important: true, done: false }, @@ -47,7 +47,7 @@ export const initialTasks = [ id: '3', title: "Tangowe4ngoiretngsks", details: "io4kbgoi4qbgi them", - date: "June 23, 2024", + date: "2024-06-23", important: true, done: false }, @@ -55,7 +55,7 @@ export const initialTasks = [ id: '4', title: "oi3bgib4ng5", details: "fiib435go'ib1345gib1gnish them", - date: "June 23, 2024", + date: "2024-06-23", important: true, done: false }, @@ -63,7 +63,7 @@ export const initialTasks = [ id: '5', title: "oi13b'4goib134g", details: "j1b3;gjob13'gob them", - date: "June 23, 2024", + date: "2024-06-23", important: true, done: false }, @@ -71,7 +71,7 @@ export const initialTasks = [ id: '6', title: "Tasks", details: "finish them", - date: "June 23, 2024", + date: "2024-06-23", important: false, done: false }, @@ -79,7 +79,7 @@ export const initialTasks = [ id: '7', title: "Tasks", details: "finish them", - date: "June 23, 2024", + date: "2024-23-23", important: false, done: false }, @@ -87,7 +87,7 @@ export const initialTasks = [ id: '8', title: "Tasks", details: "finish them", - date: "June 23, 2024", + date: "2024-11-23", important: true, done: false }, @@ -95,7 +95,7 @@ export const initialTasks = [ id: '9', title: "Tasks", details: "finish them", - date: "June 23, 2024", + date: "2024-06-23", important: false, done: false } diff --git a/src/components/Dialogs/DatePickerDialog.js b/src/components/Dialogs/DatePickerDialog.js index 9ec1821..60c555c 100644 --- a/src/components/Dialogs/DatePickerDialog.js +++ b/src/components/Dialogs/DatePickerDialog.js @@ -1,5 +1,7 @@ +"use client" + //React -import * as React from 'react'; +import React, { useState } from 'react'; //MUI import { Dialog } from "@mui/material"; @@ -8,13 +10,18 @@ import { LocalizationProvider } from "@mui/x-date-pickers"; import dayjs from 'dayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -export default function DatePickerDialog ({ openCalendarDialog, onClose }) +export default function DatePickerDialog ({ dateValue, setDateValue, setOpenCalendarDialog, openCalendarDialog, onClose }) { - + const onChange = (value) => + { + console.log("output from onChange:" + value) + setDateValue(dayjs(value)); + setOpenCalendarDialog(false); + } return ( - + onChange(value)} /> ); From c91a2a485ce60109e0af1b1743fbe7f566505de2 Mon Sep 17 00:00:00 2001 From: RoshanKarthikRajesh Date: Mon, 1 Jul 2024 20:03:55 -0400 Subject: [PATCH 14/16] Martin changed the props of the action bar so that it cancels the changes when you click on cancel. --- src/components/Dialogs/DatePickerDialog.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/Dialogs/DatePickerDialog.js b/src/components/Dialogs/DatePickerDialog.js index 60c555c..dd4f8e9 100644 --- a/src/components/Dialogs/DatePickerDialog.js +++ b/src/components/Dialogs/DatePickerDialog.js @@ -14,14 +14,29 @@ export default function DatePickerDialog ({ dateValue, setDateValue, setOpenCale { const onChange = (value) => { - console.log("output from onChange:" + value) + console.log("output from onChange:" + value); setDateValue(dayjs(value)); setOpenCalendarDialog(false); } + + const handleCloseDialog = () => { + setOpenCalendarDialog(false); + } + return ( - onChange(value)} /> + { onChange(value) }} + open={openCalendarDialog} + /> ); From e96b4f692d95cba7fb834087ffca12d454bf1ae2 Mon Sep 17 00:00:00 2001 From: Houston_Boston Date: Tue, 2 Jul 2024 11:02:28 -0400 Subject: [PATCH 15/16] Made some minor changes --- src/components/Cards/TaskCard.js | 2 +- src/components/Dialogs/DatePickerDialog.js | 11 +++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js index fde9844..c5a2ba7 100644 --- a/src/components/Cards/TaskCard.js +++ b/src/components/Cards/TaskCard.js @@ -31,7 +31,7 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick }) const [anchorEl, setAnchorEl] = useState(null); const [isImportant, setIsImportant] = useState(important); const [openCalendarDialog, setOpenCalendarDialog] = useState(false); - const [dateValue, setDateValue] = useState(dayjs("2024-06-21")); + const [dateValue, setDateValue] = useState(dayjs(date)); const taskOptionsOpen = Boolean(anchorEl); const handleMouseOver = () => setIsHovering(true); diff --git a/src/components/Dialogs/DatePickerDialog.js b/src/components/Dialogs/DatePickerDialog.js index dd4f8e9..2073ab1 100644 --- a/src/components/Dialogs/DatePickerDialog.js +++ b/src/components/Dialogs/DatePickerDialog.js @@ -10,11 +10,10 @@ import { LocalizationProvider } from "@mui/x-date-pickers"; import dayjs from 'dayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -export default function DatePickerDialog ({ dateValue, setDateValue, setOpenCalendarDialog, openCalendarDialog, onClose }) -{ - const onChange = (value) => - { - console.log("output from onChange:" + value); +export default function DatePickerDialog({ dateValue, setDateValue, setOpenCalendarDialog, openCalendarDialog, onClose }) { + + const onAccept = (value) => { + console.log("output from onAccept:" + value); setDateValue(dayjs(value)); setOpenCalendarDialog(false); } @@ -34,7 +33,7 @@ export default function DatePickerDialog ({ dateValue, setDateValue, setOpenCale }, }} value={dateValue} - onAccept={(value) => { onChange(value) }} + onAccept={(value) => { onAccept(value) }} open={openCalendarDialog} /> From d0c9846b920bc47fe0a7502e6d65134d2b4e84b1 Mon Sep 17 00:00:00 2001 From: RoshanKarthikRajesh Date: Tue, 2 Jul 2024 12:53:30 -0400 Subject: [PATCH 16/16] Added tasks table to resource.ts --- amplify/data/resource.ts | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/amplify/data/resource.ts b/amplify/data/resource.ts index 0355503..c73ee18 100644 --- a/amplify/data/resource.ts +++ b/amplify/data/resource.ts @@ -15,6 +15,7 @@ const schema = a.schema({ courses: a.hasMany("Course", "organizationId"), pathways: a.hasMany("Pathway", "organizationId"), admins: a.hasMany("User", "organizationId"), + tasks: a.hasMany("Tasks", "organizationId"), }) .authorization((allow) => [allow.guest()]), User: a @@ -66,13 +67,16 @@ const schema = a.schema({ courses: a.hasMany("Course", "semesterId"), }) .authorization((allow) => [allow.guest()]), - - // Orginal Example - // Todo: a - // .model({ - // content: a.string(), - // }) - // .authorization((allow) => [allow.guest()]), + Tasks: a + .model({ + TaskId: a.id(), + title: a.string(), + details: a.string(), + date: a.date(), + important: a.boolean(), + done: a.boolean(), + }) + .authorization((allow) => [allow.guest()]), }); export type Schema = ClientSchema; @@ -89,7 +93,7 @@ Go to your frontend source code. From your client-side code, generate a Data client to make CRUDL requests to your table. (THIS SNIPPET WILL ONLY WORK IN THE FRONTEND CODE FILE.) -Using JavaScript or Next.js React Server Components, Middleware, Server +Using JavaScript or Next.js React Server Components, Middleware, Server Actions or Pages Router? Review how to generate Data clients for those use cases: https://docs.amplify.aws/gen2/build-a-backend/data/connect-to-API/ =========================================================================*/