From 625908271984d9cf286feaac369e734c16e9e4bc Mon Sep 17 00:00:00 2001 From: MFRamon Date: Fri, 19 Jan 2024 13:56:11 -0600 Subject: [PATCH 01/17] TL-13 : Making list functional --- prettierrc.json | 2 +- .../CompletedTasksTable.tsx | 161 +++--------------- src/pages/index.tsx | 6 + 3 files changed, 31 insertions(+), 138 deletions(-) diff --git a/prettierrc.json b/prettierrc.json index a7f8fd0..daf8938 100644 --- a/prettierrc.json +++ b/prettierrc.json @@ -2,7 +2,7 @@ "trailingComma": "all", "tabWidth": 2, "singleQuote": false, - "printWidth": 80, + "printWidth": 120, "jsxSingleQuote": true, "bracketSpacing": true, "arrowParens": true diff --git a/src/components/CompletedTasksTable/CompletedTasksTable.tsx b/src/components/CompletedTasksTable/CompletedTasksTable.tsx index 3166921..2ca14a9 100644 --- a/src/components/CompletedTasksTable/CompletedTasksTable.tsx +++ b/src/components/CompletedTasksTable/CompletedTasksTable.tsx @@ -21,6 +21,7 @@ interface ICompletedTasksTableProps { const CompletedTasksTable = (props: ICompletedTasksTableProps) => { const { completedTasks, columns } = props; + console.log(completedTasks); return ( @@ -43,11 +44,7 @@ const CompletedTasksTable = (props: ICompletedTasksTableProps) => { {/* Chart for Data */} - + {/* Subheaders */} @@ -84,139 +81,29 @@ const CompletedTasksTable = (props: ICompletedTasksTableProps) => { backgroundColor: "green", }} > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {completedTasks.map((task, id) => ( + <> + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + ))} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e2d0056..3d4a8f3 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -230,6 +230,7 @@ export default function Home() { color: "primary.main", }} onClick={handleSaveClick(id)} + key={randomId()} />, } @@ -237,6 +238,7 @@ export default function Home() { className="textPrimary" onClick={handleCancelClick(id)} color="inherit" + key={randomId()} />, ]; } @@ -248,12 +250,14 @@ export default function Home() { className="textPrimary" onClick={handleEditClick(id)} color="inherit" + key={randomId()} />, } label="Delete" onClick={handleDeleteClick(id)} color="inherit" + key={randomId()} />, ]; }, @@ -325,6 +329,7 @@ export default function Home() { }); setRows(modifiedTasks); + console.log(modifiedTasks); setFinishedTasks(modifiedTasks.filter(isTaskFinished)); }; @@ -337,6 +342,7 @@ export default function Home() { }); setRows(modifiedTasks); + console.log(modifiedTasks); setFinishedTasks(modifiedTasks.filter(isTaskFinished)); }; From 407a21dcebe8d829bce84df483590da77a5a75f7 Mon Sep 17 00:00:00 2001 From: MFRamon Date: Fri, 19 Jan 2024 14:09:11 -0600 Subject: [PATCH 02/17] TL-13 : List Visual and passing data of finished tasks --- .../CompletedTasksTable.tsx | 77 +++++++++++-------- src/pages/index.tsx | 2 +- 2 files changed, 45 insertions(+), 34 deletions(-) diff --git a/src/components/CompletedTasksTable/CompletedTasksTable.tsx b/src/components/CompletedTasksTable/CompletedTasksTable.tsx index 2ca14a9..2b2f350 100644 --- a/src/components/CompletedTasksTable/CompletedTasksTable.tsx +++ b/src/components/CompletedTasksTable/CompletedTasksTable.tsx @@ -1,4 +1,4 @@ -import React, { Fragment } from "react"; +import React, { Fragment, useEffect, useState } from "react"; import Typography from "@mui/material/Typography"; import Paper from "@mui/material/Paper"; import { GridRowsProp, GridColDef } from "@mui/x-data-grid"; @@ -20,9 +20,17 @@ interface ICompletedTasksTableProps { } const CompletedTasksTable = (props: ICompletedTasksTableProps) => { + const [domLoaded, setDomLoaded] = useState(false); + const { completedTasks, columns } = props; + + useEffect(() => { + setDomLoaded(true); + }, []); + console.log(completedTasks); + return ( { - {/* Finished Tasks List */} - - - {completedTasks.map((task, id) => ( - <> - - - - - + {/* TODO: Check Hydration */} + {domLoaded && ( + + + {completedTasks.map((task, id) => ( + <> + + + + + + - - - - + + + + - - - - - ))} - - + + + + ))} + + + )} + + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3d4a8f3..08eca4e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -362,7 +362,7 @@ export default function Home() { {selectedTask && ( Date: Fri, 19 Jan 2024 14:20:55 -0600 Subject: [PATCH 03/17] TL-13 : Removed elevation for DataGrid Component --- .../CompletedTasksTable/CompletedTasksTable.tsx | 2 +- src/components/Timer/Timer.tsx | 8 ++++---- src/pages/index.tsx | 3 ++- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/CompletedTasksTable/CompletedTasksTable.tsx b/src/components/CompletedTasksTable/CompletedTasksTable.tsx index 2b2f350..c90d442 100644 --- a/src/components/CompletedTasksTable/CompletedTasksTable.tsx +++ b/src/components/CompletedTasksTable/CompletedTasksTable.tsx @@ -52,7 +52,7 @@ const CompletedTasksTable = (props: ICompletedTasksTableProps) => { {/* Chart for Data */} - + {/* Subheaders */} diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx index 074bc17..3ad59c6 100644 --- a/src/components/Timer/Timer.tsx +++ b/src/components/Timer/Timer.tsx @@ -78,16 +78,16 @@ const Timer = (props: any) => { {parseInt(seconds) < 10 ? "0" + seconds : seconds} {" minutes"} - - - - diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 08eca4e..7118fb1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -380,7 +380,7 @@ export default function Home() { {/* Content */} - + From ecad5f8ee61d9f593b550833c08f499038a74460 Mon Sep 17 00:00:00 2001 From: MFRamon Date: Fri, 19 Jan 2024 14:25:33 -0600 Subject: [PATCH 04/17] TL-13 : Removed elevation for Finished Tasks List --- .../CompletedTasksTable.tsx | 154 +++++++++--------- src/pages/index.tsx | 4 +- 2 files changed, 79 insertions(+), 79 deletions(-) diff --git a/src/components/CompletedTasksTable/CompletedTasksTable.tsx b/src/components/CompletedTasksTable/CompletedTasksTable.tsx index c90d442..da14794 100644 --- a/src/components/CompletedTasksTable/CompletedTasksTable.tsx +++ b/src/components/CompletedTasksTable/CompletedTasksTable.tsx @@ -30,96 +30,96 @@ const CompletedTasksTable = (props: ICompletedTasksTableProps) => { console.log(completedTasks); - return ( - - - - {/* Header for container */} - - Finished Tasks - + + {/* Header for container */} + + Finished Tasks + - {/* Chart for Data */} - - - {/* Subheaders */} - - - Finished Tasks - - - Finished Tasks - + {/* Chart for Data */} + + + {/* Subheaders */} + + + Finished Tasks - {/* Line Chart for Finished Tasks */} - + Finished Tasks - - + + {/* Line Chart for Finished Tasks */} + + + + + - {/* TODO: Check Hydration */} - {domLoaded && ( - - - {completedTasks.map((task, id) => ( - <> - - - - - - + {/* TODO: Check Hydration */} + {domLoaded && ( + + + {completedTasks.map((task, id) => ( + <> + + + + + + - - - - + + + - - - - ))} - - - )} - - - - - + + + + + ))} + + + )} + + ); }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7118fb1..1cc5f3f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -380,7 +380,7 @@ export default function Home() { {/* Content */} - + From 7a09af5e004c419903d533b18442d60dc2d62dd7 Mon Sep 17 00:00:00 2001 From: MFRamon Date: Fri, 19 Jan 2024 14:50:22 -0600 Subject: [PATCH 05/17] TL-13 : Finished Tasks List Styling --- .../CompletedTasksTable/CompletedTasksTable.module.css | 2 +- .../CompletedTasksTable/CompletedTasksTable.tsx | 9 --------- src/pages/index.tsx | 5 ++--- 3 files changed, 3 insertions(+), 13 deletions(-) diff --git a/src/components/CompletedTasksTable/CompletedTasksTable.module.css b/src/components/CompletedTasksTable/CompletedTasksTable.module.css index fb21960..282c12b 100644 --- a/src/components/CompletedTasksTable/CompletedTasksTable.module.css +++ b/src/components/CompletedTasksTable/CompletedTasksTable.module.css @@ -12,6 +12,6 @@ overflow: hidden; background-color: rgb(237, 231, 246); padding: 20px; - width: 400px; + width: 100%; height: 200px; } diff --git a/src/components/CompletedTasksTable/CompletedTasksTable.tsx b/src/components/CompletedTasksTable/CompletedTasksTable.tsx index da14794..eae4dc3 100644 --- a/src/components/CompletedTasksTable/CompletedTasksTable.tsx +++ b/src/components/CompletedTasksTable/CompletedTasksTable.tsx @@ -56,15 +56,6 @@ const CompletedTasksTable = (props: ICompletedTasksTableProps) => { className={styles.chart} elevation={0} > - {/* Subheaders */} - - - Finished Tasks - - - Finished Tasks - - {/* Line Chart for Finished Tasks */} - {/* Content */} - + - + Date: Fri, 19 Jan 2024 15:20:26 -0600 Subject: [PATCH 06/17] TL-13 : Adding Chip Component to finished tasks list --- .../CompletedTasksTable.tsx | 56 ++++++++++++++++--- src/pages/index.tsx | 4 +- 2 files changed, 49 insertions(+), 11 deletions(-) diff --git a/src/components/CompletedTasksTable/CompletedTasksTable.tsx b/src/components/CompletedTasksTable/CompletedTasksTable.tsx index eae4dc3..3f3ab37 100644 --- a/src/components/CompletedTasksTable/CompletedTasksTable.tsx +++ b/src/components/CompletedTasksTable/CompletedTasksTable.tsx @@ -12,6 +12,22 @@ import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; import Divider from "@mui/material/Divider"; import ListItemText from "@mui/material/ListItemText"; +import Chip from '@mui/material/Chip'; + + +import { + randomCreatedDate, + randomTraderName, + randomId, + randomArrayItem, + randomDate, +} from "@mui/x-data-grid-generator"; + +const roles = ["PENDING", "IN-PROGRESS", "STOPPED", "FINISHED"]; + +const randomRole = () => { + return randomArrayItem(roles); +}; interface ICompletedTasksTableProps { completedTasks: GridRowsProp; @@ -19,10 +35,32 @@ interface ICompletedTasksTableProps { children?: React.ReactNode; } +const mockData: GridRowsProp = [ + { + id: 1, + description: randomTraderName(), + // This represents the amount of minutes remaining for finishing the task + timeToFinish: 20, + finishedAt: 30, + duration: 25, + status: randomRole(), + creationDate: new Date(), + }, + { + id: 2, + description: randomTraderName(), + timeToFinish: 20, + finishedAt: 30, + duration: 36, + status: randomRole(), + creationDate: new Date(), + }, +]; + const CompletedTasksTable = (props: ICompletedTasksTableProps) => { const [domLoaded, setDomLoaded] = useState(false); - const { completedTasks, columns } = props; + const { completedTasks = mockData, columns } = props; useEffect(() => { setDomLoaded(true); @@ -39,14 +77,14 @@ const CompletedTasksTable = (props: ICompletedTasksTableProps) => { > {/* Header for container */} - Finished Tasks + Finished Tasks {/* Chart for Data */} @@ -75,10 +113,9 @@ const CompletedTasksTable = (props: ICompletedTasksTableProps) => { {/* TODO: Check Hydration */} {domLoaded && ( - + { > - + @@ -110,6 +147,7 @@ const CompletedTasksTable = (props: ICompletedTasksTableProps) => { )} + ); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5e573d4..2c64ff4 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -378,7 +378,7 @@ export default function Home() { - + - + Date: Fri, 19 Jan 2024 16:04:07 -0600 Subject: [PATCH 07/17] TL-13: Fixed list table --- .../CompletedTasksTable.tsx | 26 ++++++++--- src/components/LogoHeader/LogoHeader.tsx | 45 ++++++++++++++----- src/pages/index.tsx | 8 +--- 3 files changed, 55 insertions(+), 24 deletions(-) diff --git a/src/components/CompletedTasksTable/CompletedTasksTable.tsx b/src/components/CompletedTasksTable/CompletedTasksTable.tsx index 3f3ab37..d76ac96 100644 --- a/src/components/CompletedTasksTable/CompletedTasksTable.tsx +++ b/src/components/CompletedTasksTable/CompletedTasksTable.tsx @@ -12,8 +12,7 @@ import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; import Divider from "@mui/material/Divider"; import ListItemText from "@mui/material/ListItemText"; -import Chip from '@mui/material/Chip'; - +import Chip from "@mui/material/Chip"; import { randomCreatedDate, @@ -84,7 +83,9 @@ const CompletedTasksTable = (props: ICompletedTasksTableProps) => { > {/* Header for container */} - Finished Tasks + + Finished Tasks + {/* Chart for Data */} @@ -113,7 +114,15 @@ const CompletedTasksTable = (props: ICompletedTasksTableProps) => { {/* TODO: Check Hydration */} {domLoaded && ( - + { container flexDirection={"column"} justifyContent={"space-between"} + sx={{ width: "80%" }} > - + - + @@ -147,7 +160,6 @@ const CompletedTasksTable = (props: ICompletedTasksTableProps) => { )} - ); diff --git a/src/components/LogoHeader/LogoHeader.tsx b/src/components/LogoHeader/LogoHeader.tsx index 8fcb4cc..72aafef 100644 --- a/src/components/LogoHeader/LogoHeader.tsx +++ b/src/components/LogoHeader/LogoHeader.tsx @@ -2,7 +2,7 @@ import React, { Fragment } from "react"; import Image from "next/image"; import Typography from "@mui/material/Typography"; import styles from "@/components/LogoHeader/LogoHeader.module.css"; -import { Paper } from "@mui/material"; +import { Grid, Paper } from "@mui/material"; interface ILogoHeaderProps { //TODO: To difine interface @@ -11,17 +11,40 @@ interface ILogoHeaderProps { const LogoHeader = (props: ILogoHeaderProps) => { return ( - Next.js Logo + + + Next.js Logo + - {/* - Created By Ramon Manrique - */} + + + + {"19 de Enero del 2024"} + + + + + {"ramon.manfig@gmail.com"} + + + + + Created By Ramon Manrique + + + + ); }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2c64ff4..b3f9de0 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -356,10 +356,10 @@ export default function Home() {
- + - + {selectedTask && ( )} - - - -
From 2673bb7aa6c59f1251253cc7165643cb23ed8b49 Mon Sep 17 00:00:00 2001 From: MFRamon Date: Fri, 19 Jan 2024 16:31:29 -0600 Subject: [PATCH 08/17] TL-13 : Adding styles to buttons --- src/components/Timer/Timer.tsx | 78 +++++++++++++++++++++++++--------- 1 file changed, 59 insertions(+), 19 deletions(-) diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx index 3ad59c6..3f260cc 100644 --- a/src/components/Timer/Timer.tsx +++ b/src/components/Timer/Timer.tsx @@ -71,25 +71,65 @@ const Timer = (props: any) => { className={styles.itemContainer} sx={{ height: "142px", minHeight: "142px" }} > - - Remaining Time: - - {parseInt(minutes) < 10 ? "0" + minutes : minutes} :{" "} - {parseInt(seconds) < 10 ? "0" + seconds : seconds} - {" minutes"} - - - - - + + + Remaining Time: + + + + + {parseInt(minutes) < 10 ? "0" + minutes : minutes} :{" "} + {parseInt(seconds) < 10 ? "0" + seconds : seconds} + {" minutes"} + + + + + + + + + + + From 09232b598e83869f84d26700922e23e055ae81bc Mon Sep 17 00:00:00 2001 From: MFRamon Date: Fri, 19 Jan 2024 16:37:00 -0600 Subject: [PATCH 09/17] TL-13 : Renaming List Component for finished tasks --- .../CompletedTasksList.module.css} | 0 .../CompletedTasksList.tsx} | 8 +++----- src/pages/index.tsx | 12 +++--------- 3 files changed, 6 insertions(+), 14 deletions(-) rename src/components/{CompletedTasksTable/CompletedTasksTable.module.css => CompletedTasksList/CompletedTasksList.module.css} (100%) rename src/components/{CompletedTasksTable/CompletedTasksTable.tsx => CompletedTasksList/CompletedTasksList.tsx} (94%) diff --git a/src/components/CompletedTasksTable/CompletedTasksTable.module.css b/src/components/CompletedTasksList/CompletedTasksList.module.css similarity index 100% rename from src/components/CompletedTasksTable/CompletedTasksTable.module.css rename to src/components/CompletedTasksList/CompletedTasksList.module.css diff --git a/src/components/CompletedTasksTable/CompletedTasksTable.tsx b/src/components/CompletedTasksList/CompletedTasksList.tsx similarity index 94% rename from src/components/CompletedTasksTable/CompletedTasksTable.tsx rename to src/components/CompletedTasksList/CompletedTasksList.tsx index d76ac96..3ed6765 100644 --- a/src/components/CompletedTasksTable/CompletedTasksTable.tsx +++ b/src/components/CompletedTasksList/CompletedTasksList.tsx @@ -2,11 +2,9 @@ import React, { Fragment, useEffect, useState } from "react"; import Typography from "@mui/material/Typography"; import Paper from "@mui/material/Paper"; import { GridRowsProp, GridColDef } from "@mui/x-data-grid"; -import Card from "@mui/material/Card"; -import CardContent from "@mui/material/CardContent"; import Grid from "@mui/material/Grid"; import { LineChart } from "@mui/x-charts/LineChart"; -import styles from "@/components/CompletedTasksTable/CompletedTasksTable.module.css"; +import styles from "@/components/CompletedTasksList/CompletedTasksList.module.css"; import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; @@ -56,7 +54,7 @@ const mockData: GridRowsProp = [ }, ]; -const CompletedTasksTable = (props: ICompletedTasksTableProps) => { +const CompletedTasksList = (props: ICompletedTasksTableProps) => { const [domLoaded, setDomLoaded] = useState(false); const { completedTasks = mockData, columns } = props; @@ -165,4 +163,4 @@ const CompletedTasksTable = (props: ICompletedTasksTableProps) => { ); }; -export default CompletedTasksTable; +export default CompletedTasksList; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b3f9de0..10d13c4 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -21,24 +21,20 @@ import { GridRowId, GridRowModel, GridRowEditStopReasons, - GridToolbarFilterButton, } from "@mui/x-data-grid"; import { - randomCreatedDate, randomTraderName, randomId, randomArrayItem, - randomDate, } from "@mui/x-data-grid-generator"; import { Task } from "@mui/icons-material"; import Paper from "@mui/material/Paper"; -import CompletedTasksTable from "@/components/CompletedTasksTable/CompletedTasksTable"; +import CompletedTasksList from "@/components/CompletedTasksList/CompletedTasksList"; import MetaHead from "@/components/MetaHead/MetaHead"; import LogoHeader from "@/components/LogoHeader/LogoHeader"; import { Grid } from "@mui/material"; import Timer from "@/components/Timer/Timer"; import SelectedTaskDetail from "@/components/SelectedTaskDetail/SelectedTaskDetail"; -import TasksCount from "@/components/TasksCount/TasksCount"; const roles = ["PENDING", "IN-PROGRESS", "STOPPED", "FINISHED"]; @@ -329,7 +325,6 @@ export default function Home() { }); setRows(modifiedTasks); - console.log(modifiedTasks); setFinishedTasks(modifiedTasks.filter(isTaskFinished)); }; @@ -342,7 +337,6 @@ export default function Home() { }); setRows(modifiedTasks); - console.log(modifiedTasks); setFinishedTasks(modifiedTasks.filter(isTaskFinished)); }; @@ -416,10 +410,10 @@ export default function Home() { - completedTasks={finishedTaks} columns={columnsView} - > + From 17ed6651280423191b4a16473e306b43adc2029c Mon Sep 17 00:00:00 2001 From: MFRamon Date: Fri, 19 Jan 2024 17:04:31 -0600 Subject: [PATCH 10/17] TL-13 : Handle Operation Type --- .../CompletedTasksList.module.css | 2 +- .../CompletedTasksList/CompletedTasksList.tsx | 4 +- src/components/Timer/Timer.tsx | 16 ++- src/pages/index.tsx | 128 ++++-------------- 4 files changed, 43 insertions(+), 107 deletions(-) diff --git a/src/components/CompletedTasksList/CompletedTasksList.module.css b/src/components/CompletedTasksList/CompletedTasksList.module.css index 282c12b..cec66c9 100644 --- a/src/components/CompletedTasksList/CompletedTasksList.module.css +++ b/src/components/CompletedTasksList/CompletedTasksList.module.css @@ -13,5 +13,5 @@ background-color: rgb(237, 231, 246); padding: 20px; width: 100%; - height: 200px; + height: 100%; } diff --git a/src/components/CompletedTasksList/CompletedTasksList.tsx b/src/components/CompletedTasksList/CompletedTasksList.tsx index 3ed6765..121a50a 100644 --- a/src/components/CompletedTasksList/CompletedTasksList.tsx +++ b/src/components/CompletedTasksList/CompletedTasksList.tsx @@ -28,8 +28,6 @@ const randomRole = () => { interface ICompletedTasksTableProps { completedTasks: GridRowsProp; - columns: GridColDef[]; - children?: React.ReactNode; } const mockData: GridRowsProp = [ @@ -57,7 +55,7 @@ const mockData: GridRowsProp = [ const CompletedTasksList = (props: ICompletedTasksTableProps) => { const [domLoaded, setDomLoaded] = useState(false); - const { completedTasks = mockData, columns } = props; + const { completedTasks = mockData } = props; useEffect(() => { setDomLoaded(true); diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx index 3f260cc..d03ef10 100644 --- a/src/components/Timer/Timer.tsx +++ b/src/components/Timer/Timer.tsx @@ -4,7 +4,6 @@ import { Grid, Paper, Typography } from "@mui/material"; import styles from "@/components/Timer/Timer.module.css"; interface ITimerPropos { - // TODO: Remove this any duration: any; handleStart: () => void; handlePause: () => void; @@ -12,6 +11,13 @@ interface ITimerPropos { handleReset: () => void; } +const STATUSES = { + STARTED: "IN-PROGRESS", + RESET: "PENDING", + PAUSED: "STOPPED", + FINISHED: "FINISHED", +}; + const Timer = (props: any) => { const { duration, handleStart, handlePause, handleFinish, handleReset } = props; @@ -23,24 +29,24 @@ const Timer = (props: any) => { const handleTimerStart = () => { setFlag(true); - handleStart(); + handleStart(STATUSES.STARTED); }; const handleTimerReset = () => { setFlag(false); setSeconds(0); setMinutes(time); - handleReset(); + handleReset(STATUSES.RESET); }; const handleTimerPause = () => { setFlag(false); - handlePause(); + handlePause(STATUSES.PAUSED); }; const handleTimerFinish = () => { setFlag(true); - handleFinish(); + handleFinish(STATUSES.FINISHED); }; useEffect(() => { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 10d13c4..6ed29cb 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -200,13 +200,7 @@ export default function Home() { width: 220, editable: true, type: "singleSelect", - valueOptions: [ - "PENDING", - "IN-PROGRESS", - "STOPPED", - "FINISHED", - "RESTART", - ], + valueOptions: ["PENDING", "IN-PROGRESS", "STOPPED", "FINISHED"], }, { field: "actions", @@ -282,60 +276,21 @@ export default function Home() { width: 220, editable: false, type: "singleSelect", - valueOptions: [ - "PENDING", - "IN-PROGRESS", - "STOPPED", - "FINISHED", - "RESTART", - ], + valueOptions: ["PENDING", "IN-PROGRESS", "STOPPED", "FINISHED"], }, ]; - const onHandleStartTask = () => { + // Handles the status of the selected task + const onHandleChangeStatusTask = (operation: string) => { + console.log(operation); const modifiedTasks = rows.map((task) => { if (task.id === selectedTask?.id) { - return { ...task, status: "IN-PROGRESS" }; - } - return task; - }); - - setRows(modifiedTasks); - setFinishedTasks(modifiedTasks.filter(isTaskFinished)); - }; - - const onHandleStopTask = () => { - const modifiedTasks = rows.map((task) => { - if (task.id === selectedTask?.id) { - return { ...task, status: "STOPPED" }; - } - return task; - }); - - setRows(modifiedTasks); - setFinishedTasks(modifiedTasks.filter(isTaskFinished)); - }; - - const onHandleFinishTask = () => { - const modifiedTasks = rows.map((task) => { - if (task.id === selectedTask?.id) { - return { ...task, status: "FINISHED" }; - } - return task; - }); - - setRows(modifiedTasks); - setFinishedTasks(modifiedTasks.filter(isTaskFinished)); - }; - - const onHandleRestartTask = () => { - const modifiedTasks = rows.map((task) => { - if (task.id === selectedTask?.id) { - return { ...task, status: "PENDING" }; + return { ...task, status: operation }; } return task; }); + console.log(modifiedTasks); setRows(modifiedTasks); setFinishedTasks(modifiedTasks.filter(isTaskFinished)); }; @@ -357,10 +312,10 @@ export default function Home() { {selectedTask && ( )} @@ -369,51 +324,28 @@ export default function Home() { - - - - - - + + - - completedTasks={finishedTaks} - columns={columnsView} - + From c46abb91f13f600bc1513af92a891c0adb976493 Mon Sep 17 00:00:00 2001 From: MFRamon Date: Fri, 19 Jan 2024 17:21:19 -0600 Subject: [PATCH 11/17] TL-13 : Changing Timer --- src/components/Timer/Timer.tsx | 8 +++---- src/pages/index.tsx | 42 +++++++++++----------------------- 2 files changed, 17 insertions(+), 33 deletions(-) diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx index d03ef10..2c58e04 100644 --- a/src/components/Timer/Timer.tsx +++ b/src/components/Timer/Timer.tsx @@ -29,24 +29,24 @@ const Timer = (props: any) => { const handleTimerStart = () => { setFlag(true); - handleStart(STATUSES.STARTED); + handleStart(STATUSES.STARTED, minutes); }; const handleTimerReset = () => { setFlag(false); setSeconds(0); setMinutes(time); - handleReset(STATUSES.RESET); + handleReset(STATUSES.RESET, minutes); }; const handleTimerPause = () => { setFlag(false); - handlePause(STATUSES.PAUSED); + handlePause(STATUSES.PAUSED, minutes); }; const handleTimerFinish = () => { setFlag(true); - handleFinish(STATUSES.FINISHED); + handleFinish(STATUSES.FINISHED, minutes); }; useEffect(() => { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6ed29cb..9ed7f60 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -59,6 +59,7 @@ const initialRows: GridRowsProp = [ duration: 25, status: randomRole(), creationDate: new Date(), + currentTime: 0 }, { id: randomId(), @@ -68,6 +69,7 @@ const initialRows: GridRowsProp = [ duration: 36, status: randomRole(), creationDate: new Date(), + currentTime: 0 }, ]; @@ -113,6 +115,8 @@ export default function Home() { rows.filter((task) => task.status === "FINISHED"), ); + // const [selectedTaskTime, setSelectedTimeTask] = useState(); + useEffect(() => { const currentTask = rows.find((task) => task.id === selectedTask?.id); setSelectedTask({ @@ -254,43 +258,23 @@ export default function Home() { }, ]; - const columnsView: GridColDef[] = [ - { - field: "description", - headerName: "Description", - width: 180, - editable: true, - }, - { - field: "duration", - headerName: "Duration", - type: "number", - width: 80, - align: "left", - headerAlign: "left", - editable: true, - }, - { - field: "status", - headerName: "Status", - width: 220, - editable: false, - type: "singleSelect", - valueOptions: ["PENDING", "IN-PROGRESS", "STOPPED", "FINISHED"], - }, - ]; - // Handles the status of the selected task - const onHandleChangeStatusTask = (operation: string) => { + const onHandleChangeStatusTask = (operation: string, currentMinutes: any) => { console.log(operation); + console.log(currentMinutes); + const modifiedTasks = rows.map((task) => { if (task.id === selectedTask?.id) { - return { ...task, status: operation }; + return { ...task, status: operation, duration: currentMinutes }; } return task; }); - console.log(modifiedTasks); + if(operation === 'STOPPED'){ + console.log("se pauso la tarea"); + console.log(modifiedTasks); + } + setRows(modifiedTasks); setFinishedTasks(modifiedTasks.filter(isTaskFinished)); }; From a341221c71d4eab9a43a45afd73cfc7a9bf4a340 Mon Sep 17 00:00:00 2001 From: MFRamon Date: Sat, 20 Jan 2024 18:50:34 -0600 Subject: [PATCH 12/17] TL-13 : Temporal Change --- src/pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9ed7f60..5dca457 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -281,7 +281,7 @@ export default function Home() { return ( <> - +
From 4cd46e82e33c51bbdfe088208717564d2f22f90a Mon Sep 17 00:00:00 2001 From: MFRamon Date: Sun, 21 Jan 2024 13:51:51 -0600 Subject: [PATCH 13/17] TL-13 : Debugging error when selecting task --- .../CompletedTasksList/CompletedTasksList.tsx | 2 +- src/components/Timer/Timer.tsx | 37 +++++++++++-------- src/pages/index.tsx | 14 +++++-- 3 files changed, 32 insertions(+), 21 deletions(-) diff --git a/src/components/CompletedTasksList/CompletedTasksList.tsx b/src/components/CompletedTasksList/CompletedTasksList.tsx index 121a50a..1b5d81f 100644 --- a/src/components/CompletedTasksList/CompletedTasksList.tsx +++ b/src/components/CompletedTasksList/CompletedTasksList.tsx @@ -61,7 +61,7 @@ const CompletedTasksList = (props: ICompletedTasksTableProps) => { setDomLoaded(true); }, []); - console.log(completedTasks); + // console.log(completedTasks); return ( diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx index 2c58e04..43a1707 100644 --- a/src/components/Timer/Timer.tsx +++ b/src/components/Timer/Timer.tsx @@ -3,13 +3,13 @@ import Button from "@mui/material/Button"; import { Grid, Paper, Typography } from "@mui/material"; import styles from "@/components/Timer/Timer.module.css"; -interface ITimerPropos { - duration: any; - handleStart: () => void; - handlePause: () => void; - handleFinish: () => void; - handleReset: () => void; -} +// interface ITimerPropos { +// duration: any; +// handleStart: () => void; +// handlePause: () => void; +// handleFinish: () => void; +// handleReset: () => void; +// } const STATUSES = { STARTED: "IN-PROGRESS", @@ -19,8 +19,11 @@ const STATUSES = { }; const Timer = (props: any) => { - const { duration, handleStart, handlePause, handleFinish, handleReset } = - props; + const { duration, handleStart, handlePause, handleFinish, handleReset } = props; + + // El valor de la inicializacion solo se ejecuta en el primer render. + // Agregar una columna de tiempo restante. + const [time, setTime] = useState(duration); const [minutes, setMinutes] = useState(duration); @@ -45,20 +48,19 @@ const Timer = (props: any) => { }; const handleTimerFinish = () => { + //TODO: Marcar el timer a 0 cuando una tarea se termina setFlag(true); handleFinish(STATUSES.FINISHED, minutes); }; useEffect(() => { - setTime(duration); + // setMinutes(duration); if (flag) { const interval = setInterval(() => { - // @ts-ignore: Argument of type 'string' is not assignable to parameter of type 'number'. - if (parseInt(seconds) === 0 && parseInt(minutes) !== 0) { + if (seconds === 0 && minutes !== 0) { setSeconds((seconds) => seconds + 59); setMinutes((minutes: number) => minutes - 1); - // @ts-ignore: Argument of type 'string' is not assignable to parameter of type 'number'. - } else if (parseInt(seconds) === 0 && parseInt(minutes) === 0) { + } else if (seconds === 0 && minutes === 0) { } else { setSeconds((seconds) => seconds - 1); } @@ -67,9 +69,12 @@ const Timer = (props: any) => { return () => { clearInterval(interval); }; + } else { + setMinutes(duration); } }, [seconds, minutes, flag, duration]); + return ( { - {parseInt(minutes) < 10 ? "0" + minutes : minutes} :{" "} - {parseInt(seconds) < 10 ? "0" + seconds : seconds} + {minutes < 10 ? "0" + minutes : minutes} :{" "} + {seconds < 10 ? "0" + seconds : seconds} {" minutes"} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5dca457..7f2e561 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -43,7 +43,7 @@ const randomRole = () => { }; export interface Task { - id: string; + id: number; description: string; duration: any; status: string; @@ -107,10 +107,12 @@ function EditToolbar(props: EditToolbarProps) { const inter = Inter({ subsets: ["latin"] }); const isTaskFinished = (task: any) => task.status === "FINISHED"; +const defaultTask: Task = { id: 0, description: "", duration: 0, status: "" }; + export default function Home() { const [rows, setRows] = useState(initialRows); const [rowModesModel, setRowModesModel] = useState({}); - const [selectedTask, setSelectedTask] = useState(); + const [selectedTask, setSelectedTask] = useState(defaultTask); const [finishedTaks, setFinishedTasks] = useState( rows.filter((task) => task.status === "FINISHED"), ); @@ -119,12 +121,16 @@ export default function Home() { useEffect(() => { const currentTask = rows.find((task) => task.id === selectedTask?.id); + if (!currentTask) { + setSelectedTask(defaultTask); + } else { setSelectedTask({ id: currentTask?.id, description: currentTask?.description, duration: currentTask?.duration, status: currentTask?.status, }); + } }, [rows]); const handleRowEditStop: GridEventListener<"rowEditStop"> = ( @@ -290,12 +296,12 @@ export default function Home() {
- + {selectedTask && ( Date: Sun, 21 Jan 2024 18:18:11 -0600 Subject: [PATCH 14/17] WIP --- prettierrc.json | 2 +- .../CompletedTasksList/CompletedTasksList.tsx | 10 ++- .../SelectedTaskDetail/SelectedTaskDetail.tsx | 37 +++++++--- .../TasksTableToolbar/TasksTableToolbar.tsx | 69 +++++++++++++++++++ 4 files changed, 100 insertions(+), 18 deletions(-) create mode 100644 src/components/TasksTableToolbar/TasksTableToolbar.tsx diff --git a/prettierrc.json b/prettierrc.json index daf8938..a7f8fd0 100644 --- a/prettierrc.json +++ b/prettierrc.json @@ -2,7 +2,7 @@ "trailingComma": "all", "tabWidth": 2, "singleQuote": false, - "printWidth": 120, + "printWidth": 80, "jsxSingleQuote": true, "bracketSpacing": true, "arrowParens": true diff --git a/src/components/CompletedTasksList/CompletedTasksList.tsx b/src/components/CompletedTasksList/CompletedTasksList.tsx index 1b5d81f..59a29cc 100644 --- a/src/components/CompletedTasksList/CompletedTasksList.tsx +++ b/src/components/CompletedTasksList/CompletedTasksList.tsx @@ -34,9 +34,8 @@ const mockData: GridRowsProp = [ { id: 1, description: randomTraderName(), - // This represents the amount of minutes remaining for finishing the task timeToFinish: 20, - finishedAt: 30, + // finishedAt: 30, duration: 25, status: randomRole(), creationDate: new Date(), @@ -44,8 +43,8 @@ const mockData: GridRowsProp = [ { id: 2, description: randomTraderName(), - timeToFinish: 20, - finishedAt: 30, + // timeToFinish: 20, + // finishedAt: 30, duration: 36, status: randomRole(), creationDate: new Date(), @@ -61,7 +60,6 @@ const CompletedTasksList = (props: ICompletedTasksTableProps) => { setDomLoaded(true); }, []); - // console.log(completedTasks); return ( @@ -145,7 +143,7 @@ const CompletedTasksList = (props: ICompletedTasksTableProps) => { - + diff --git a/src/components/SelectedTaskDetail/SelectedTaskDetail.tsx b/src/components/SelectedTaskDetail/SelectedTaskDetail.tsx index 1335e55..9313eca 100644 --- a/src/components/SelectedTaskDetail/SelectedTaskDetail.tsx +++ b/src/components/SelectedTaskDetail/SelectedTaskDetail.tsx @@ -8,7 +8,9 @@ interface ISelectedTaskDetailProps { } const SelectedTaskDetail = (props: ISelectedTaskDetailProps) => { - const { description, duration, status } = props.task || {}; + const { description, duration, status, timeToFinish } = props.task || {}; + + console.log(timeToFinish) return ( @@ -17,17 +19,30 @@ const SelectedTaskDetail = (props: ISelectedTaskDetailProps) => { className={styles.itemContainer} sx={{ height: "142px", minHeight: "142px" }} > - Selected Task: - - {`Description: ${description}`} - - - {`Duration: ${duration} minutes`} - - - {`Status: ${status}`} - + {props.task.description !== "" ? ( + + Selected Task: + + {`Description: ${description}`} + + + {`Status: ${status}`} + + + {`Duration: ${duration} minutes`} + + + {`Remaining minutes: ${timeToFinish}`} + + + ) : ( + + + {"No task selected"} + + + )} diff --git a/src/components/TasksTableToolbar/TasksTableToolbar.tsx b/src/components/TasksTableToolbar/TasksTableToolbar.tsx new file mode 100644 index 0000000..11020f8 --- /dev/null +++ b/src/components/TasksTableToolbar/TasksTableToolbar.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import { useGridApiContext } from '@mui/x-data-grid'; +import { useDemoData, randomId } from '@mui/x-data-grid-generator'; +import { + GridRowsProp, + GridRowModesModel, + GridRowModes, + DataGrid, + GridColDef, + GridToolbarContainer, + GridActionsCellItem, + GridEventListener, + GridRowId, + GridRowModel, + } from "@mui/x-data-grid"; + +interface EditToolbarProps { + setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void; + setRowModesModel: ( + newModel: (oldModel: GridRowModesModel) => GridRowModesModel, + ) => void; + rows: GridRowModel +} + +const CustomToolbar = (props: EditToolbarProps) => { + const { setRows, setRowModesModel, rows } = props; + + const apiRef = useGridApiContext(); + + const handleClick = () => { + const id = randomId(); + setRows((oldRows) => [ + ...oldRows, + { id, description: "", duration: "", isNew: true }, + ]); + setRowModesModel((oldModel) => ({ + ...oldModel, + [id]: { mode: GridRowModes.Edit, fieldToFocus: "description" }, + })); + }; + + const handleShortDurationFilter = () => { + const result = rows.filter((element: { duration: number; }) => element.duration < 30); + setRows(result); + } + + const handleMediumDurationFilter = () => { + const result = rows.filter((element: { duration: number; }) => element.duration > 30 || element.duration === 60); + setRows(result); + } + + const handleHighDurationFilter = () => { + const result = rows.filter((element: { duration: number; }) => element.duration > 60); + setRows(result); + } + + return ( + + + + + + + ); +} + +export default CustomToolbar \ No newline at end of file From 4acc7eb974e49641e91ba481a51eb396d2ca8de5 Mon Sep 17 00:00:00 2001 From: MFRamon Date: Sun, 21 Jan 2024 18:29:21 -0600 Subject: [PATCH 15/17] WIP in bugs --- src/components/Timer/Timer.tsx | 48 ++++++----- src/pages/index.tsx | 140 ++++++++++++++++----------------- 2 files changed, 97 insertions(+), 91 deletions(-) diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx index 43a1707..a53312e 100644 --- a/src/components/Timer/Timer.tsx +++ b/src/components/Timer/Timer.tsx @@ -1,34 +1,41 @@ -import React, { Fragment, useEffect, useState } from "react"; +import React, { Fragment, useEffect, useState, useCallback } from "react"; import Button from "@mui/material/Button"; import { Grid, Paper, Typography } from "@mui/material"; import styles from "@/components/Timer/Timer.module.css"; -// interface ITimerPropos { -// duration: any; -// handleStart: () => void; -// handlePause: () => void; -// handleFinish: () => void; -// handleReset: () => void; -// } - -const STATUSES = { +interface ITimerPropos { + duration: any; + handleStart: () => void; + handlePause: () => void; + handleFinish: () => void; + handleReset: () => void; + minutes: number + // getMinutes: () => void +} + +export const STATUSES = { + PENDING: "PENDING", STARTED: "IN-PROGRESS", - RESET: "PENDING", - PAUSED: "STOPPED", + RESET: "RESET", + PAUSED: "PAUSED", FINISHED: "FINISHED", }; const Timer = (props: any) => { - const { duration, handleStart, handlePause, handleFinish, handleReset } = props; + const { duration, handleStart, handlePause, handleFinish, handleReset, getMinutes, minutes, setMinutes } = + props; // El valor de la inicializacion solo se ejecuta en el primer render. - // Agregar una columna de tiempo restante. - + // Agregar una columna de tiempo restante. const [time, setTime] = useState(duration); - const [minutes, setMinutes] = useState(duration); + const [seconds, setSeconds] = useState(0); const [flag, setFlag] = useState(false); + + // console.log(time); + // console.log(minutes); + // console.log(seconds); const handleTimerStart = () => { setFlag(true); @@ -48,18 +55,21 @@ const Timer = (props: any) => { }; const handleTimerFinish = () => { - //TODO: Marcar el timer a 0 cuando una tarea se termina setFlag(true); handleFinish(STATUSES.FINISHED, minutes); }; + const updateCurrentTime = useCallback(() => { + getMinutes(minutes) + }, [getMinutes, minutes]); + useEffect(() => { - // setMinutes(duration); if (flag) { const interval = setInterval(() => { if (seconds === 0 && minutes !== 0) { setSeconds((seconds) => seconds + 59); setMinutes((minutes: number) => minutes - 1); + // updateCurrentTime(); } else if (seconds === 0 && minutes === 0) { } else { setSeconds((seconds) => seconds - 1); @@ -72,8 +82,8 @@ const Timer = (props: any) => { } else { setMinutes(duration); } - }, [seconds, minutes, flag, duration]); + }, [seconds, minutes, flag, duration, updateCurrentTime]); return ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7f2e561..ca908a5 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,8 +1,6 @@ import React, { useEffect, useState } from "react"; import { Inter } from "next/font/google"; import styles from "@/styles/Home.module.css"; -import Stack from "@mui/material/Stack"; -import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; import AddIcon from "@mui/icons-material/Add"; import EditIcon from "@mui/icons-material/Edit"; @@ -33,10 +31,12 @@ import CompletedTasksList from "@/components/CompletedTasksList/CompletedTasksLi import MetaHead from "@/components/MetaHead/MetaHead"; import LogoHeader from "@/components/LogoHeader/LogoHeader"; import { Grid } from "@mui/material"; -import Timer from "@/components/Timer/Timer"; +import Timer, { STATUSES } from "@/components/Timer/Timer"; import SelectedTaskDetail from "@/components/SelectedTaskDetail/SelectedTaskDetail"; +import CustomToolbar from "@/components/TasksTableToolbar/TasksTableToolbar"; +import TasksEditStatusCell from "@/components/TasksEditStatusCell/TasksEditStatusCell"; -const roles = ["PENDING", "IN-PROGRESS", "STOPPED", "FINISHED"]; +const roles = ["PENDING", "IN-PROGRESS", "PAUSED", "FINISHED", "RESET"]; const randomRole = () => { return randomArrayItem(roles); @@ -45,92 +45,59 @@ const randomRole = () => { export interface Task { id: number; description: string; - duration: any; + duration: number; status: string; + timeToFinish: number; } const initialRows: GridRowsProp = [ { id: randomId(), description: randomTraderName(), - // This represents the amount of minutes remaining for finishing the task - timeToFinish: 20, - finishedAt: 30, duration: 25, status: randomRole(), - creationDate: new Date(), - currentTime: 0 + timeToFinish: 25, }, { id: randomId(), description: randomTraderName(), - timeToFinish: 20, - finishedAt: 30, duration: 36, status: randomRole(), - creationDate: new Date(), - currentTime: 0 + timeToFinish: 36 }, ]; -interface EditToolbarProps { - setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void; - setRowModesModel: ( - newModel: (oldModel: GridRowModesModel) => GridRowModesModel, - ) => void; -} - -function EditToolbar(props: EditToolbarProps) { - const { setRows, setRowModesModel } = props; - - const handleClick = () => { - const id = randomId(); - setRows((oldRows) => [ - ...oldRows, - { id, description: "", duration: "", isNew: true }, - ]); - setRowModesModel((oldModel) => ({ - ...oldModel, - [id]: { mode: GridRowModes.Edit, fieldToFocus: "description" }, - })); - }; - - return ( - - - - ); -} - -const inter = Inter({ subsets: ["latin"] }); +// const inter = Inter({ subsets: ["latin"] }); const isTaskFinished = (task: any) => task.status === "FINISHED"; -const defaultTask: Task = { id: 0, description: "", duration: 0, status: "" }; +const initialSelectedTask: Task = { id: 0, description: "", duration: 0, status: "", timeToFinish: 0 }; export default function Home() { const [rows, setRows] = useState(initialRows); const [rowModesModel, setRowModesModel] = useState({}); - const [selectedTask, setSelectedTask] = useState(defaultTask); + + const [selectedTask, setSelectedTask] = useState(initialSelectedTask); + const [remainingMinutesSelectedTask, setRemainingMinutesSelectedTask] = useState(0); + + const [minutes, setMinutes] = useState(0); + const [finishedTaks, setFinishedTasks] = useState( rows.filter((task) => task.status === "FINISHED"), ); - // const [selectedTaskTime, setSelectedTimeTask] = useState(); - useEffect(() => { const currentTask = rows.find((task) => task.id === selectedTask?.id); - if (!currentTask) { - setSelectedTask(defaultTask); - } else { - setSelectedTask({ - id: currentTask?.id, - description: currentTask?.description, - duration: currentTask?.duration, - status: currentTask?.status, - }); - } + if (!currentTask) { + setSelectedTask(initialSelectedTask); + } else { + setSelectedTask({ + id: currentTask?.id, + description: currentTask?.description, + duration: currentTask?.duration, + status: currentTask?.status, + timeToFinish: currentTask?.duration - remainingMinutesSelectedTask + }); + } }, [rows]); const handleRowEditStop: GridEventListener<"rowEditStop"> = ( @@ -180,12 +147,23 @@ export default function Home() { }; const handleRowClick: GridEventListener<"rowClick"> = (params) => { - setSelectedTask({ - id: params.row.id, - description: params.row.description, - duration: params.row.duration, - status: params.row.status, - }); + if(params.row.status === STATUSES.PENDING){ + setSelectedTask({ + id: params.row.id, + description: params.row.description, + duration: params.row.duration, + status: params.row.status, + timeToFinish: params.row.duration + }); + }else{ + setSelectedTask({ + id: params.row.id, + description: params.row.description, + duration: params.row.duration, + status: params.row.status, + timeToFinish: params.row.duration - remainingMinutesSelectedTask + }); + } }; const columns: GridColDef[] = [ @@ -207,8 +185,9 @@ export default function Home() { { field: "status", headerName: "Status", - width: 220, + width: 100, editable: true, + // renderEditCell: TasksEditStatusCell, type: "singleSelect", valueOptions: ["PENDING", "IN-PROGRESS", "STOPPED", "FINISHED"], }, @@ -264,27 +243,41 @@ export default function Home() { }, ]; - // Handles the status of the selected task const onHandleChangeStatusTask = (operation: string, currentMinutes: any) => { console.log(operation); console.log(currentMinutes); const modifiedTasks = rows.map((task) => { if (task.id === selectedTask?.id) { - return { ...task, status: operation, duration: currentMinutes }; + return { ...task, status: operation}; } return task; }); - if(operation === 'STOPPED'){ + if (operation === "PAUSED") { console.log("se pauso la tarea"); console.log(modifiedTasks); } setRows(modifiedTasks); setFinishedTasks(modifiedTasks.filter(isTaskFinished)); + // onHandleUpdateTime(currentMinutes); }; + const onHandleUpdateTime = (remainingMinutes: number) => { + console.log(`Tiempo que viene del counter ${remainingMinutes}`); + setRemainingMinutesSelectedTask(remainingMinutes); + + setSelectedTask({...selectedTask, timeToFinish: remainingMinutes}); + + console.log(selectedTask); + } + + useEffect(() => { + setRemainingMinutesSelectedTask(minutes); + setSelectedTask({...selectedTask, timeToFinish: remainingMinutesSelectedTask}); + },[minutes, remainingMinutesSelectedTask]) + return ( <> @@ -302,10 +295,13 @@ export default function Home() { {selectedTask && ( )} @@ -325,10 +321,10 @@ export default function Home() { onRowClick={handleRowClick} processRowUpdate={processRowUpdate} slots={{ - toolbar: EditToolbar, + toolbar: CustomToolbar, }} slotProps={{ - toolbar: { setRows, setRowModesModel }, + toolbar: { setRows, setRowModesModel, rows }, }} sx={{ border: "0px" }} /> From 7901e1e6a819c9c957630afa6ab410def33cce81 Mon Sep 17 00:00:00 2001 From: MFRamon Date: Sun, 21 Jan 2024 22:54:09 -0600 Subject: [PATCH 16/17] TL-13 : Refactoring Timing --- prettierrc.json | 2 +- .../CompletedTasksList/CompletedTasksList.tsx | 9 +- .../SelectedTaskDetail/SelectedTaskDetail.tsx | 8 +- .../TasksTableToolbar/TasksTableToolbar.tsx | 116 +++++++------- src/components/Timer/Timer.tsx | 133 ++++++++++------ src/pages/index.tsx | 145 +++++++----------- 6 files changed, 208 insertions(+), 205 deletions(-) diff --git a/prettierrc.json b/prettierrc.json index a7f8fd0..52698db 100644 --- a/prettierrc.json +++ b/prettierrc.json @@ -2,7 +2,7 @@ "trailingComma": "all", "tabWidth": 2, "singleQuote": false, - "printWidth": 80, + "printWidth": 132, "jsxSingleQuote": true, "bracketSpacing": true, "arrowParens": true diff --git a/src/components/CompletedTasksList/CompletedTasksList.tsx b/src/components/CompletedTasksList/CompletedTasksList.tsx index 59a29cc..343c5d8 100644 --- a/src/components/CompletedTasksList/CompletedTasksList.tsx +++ b/src/components/CompletedTasksList/CompletedTasksList.tsx @@ -60,7 +60,6 @@ const CompletedTasksList = (props: ICompletedTasksTableProps) => { setDomLoaded(true); }, []); - return ( { > {completedTasks.map((task, id) => ( <> - + { + {/* Le tomo x minutos */} - + diff --git a/src/components/SelectedTaskDetail/SelectedTaskDetail.tsx b/src/components/SelectedTaskDetail/SelectedTaskDetail.tsx index 9313eca..a57a888 100644 --- a/src/components/SelectedTaskDetail/SelectedTaskDetail.tsx +++ b/src/components/SelectedTaskDetail/SelectedTaskDetail.tsx @@ -4,13 +4,11 @@ import React, { Fragment } from "react"; import styles from "@/components/SelectedTaskDetail/SelectedTaskDetail.module.css"; interface ISelectedTaskDetailProps { - task: Task; + task: Task | undefined; } const SelectedTaskDetail = (props: ISelectedTaskDetailProps) => { - const { description, duration, status, timeToFinish } = props.task || {}; - - console.log(timeToFinish) + const { id, description, duration, status, timeToFinish } = props.task || {}; return ( @@ -20,7 +18,7 @@ const SelectedTaskDetail = (props: ISelectedTaskDetailProps) => { sx={{ height: "142px", minHeight: "142px" }} > - {props.task.description !== "" ? ( + {props.task ? ( Selected Task: diff --git a/src/components/TasksTableToolbar/TasksTableToolbar.tsx b/src/components/TasksTableToolbar/TasksTableToolbar.tsx index 11020f8..2dc9aa1 100644 --- a/src/components/TasksTableToolbar/TasksTableToolbar.tsx +++ b/src/components/TasksTableToolbar/TasksTableToolbar.tsx @@ -1,69 +1,67 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import { useGridApiContext } from '@mui/x-data-grid'; -import { useDemoData, randomId } from '@mui/x-data-grid-generator'; +import * as React from "react"; +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; +import { useGridApiContext } from "@mui/x-data-grid"; +import { useDemoData, randomId } from "@mui/x-data-grid-generator"; import { - GridRowsProp, - GridRowModesModel, - GridRowModes, - DataGrid, - GridColDef, - GridToolbarContainer, - GridActionsCellItem, - GridEventListener, - GridRowId, - GridRowModel, - } from "@mui/x-data-grid"; + GridRowsProp, + GridRowModesModel, + GridRowModes, + DataGrid, + GridColDef, + GridToolbarContainer, + GridActionsCellItem, + GridEventListener, + GridRowId, + GridRowModel, +} from "@mui/x-data-grid"; interface EditToolbarProps { - setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void; - setRowModesModel: ( - newModel: (oldModel: GridRowModesModel) => GridRowModesModel, - ) => void; - rows: GridRowModel + setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void; + setRowModesModel: ( + newModel: (oldModel: GridRowModesModel) => GridRowModesModel, + ) => void; + rows: GridRowModel; + setSelectedFilter: (filterName: string) => void; } -const CustomToolbar = (props: EditToolbarProps) => { - const { setRows, setRowModesModel, rows } = props; +const TasksTableToolbar = (props: EditToolbarProps) => { + const { setRows, setRowModesModel, rows, setSelectedFilter} = props; - const apiRef = useGridApiContext(); - - const handleClick = () => { - const id = randomId(); - setRows((oldRows) => [ - ...oldRows, - { id, description: "", duration: "", isNew: true }, - ]); - setRowModesModel((oldModel) => ({ - ...oldModel, - [id]: { mode: GridRowModes.Edit, fieldToFocus: "description" }, - })); - }; + const apiRef = useGridApiContext(); - const handleShortDurationFilter = () => { - const result = rows.filter((element: { duration: number; }) => element.duration < 30); - setRows(result); - } + const handleClick = () => { + const id = randomId(); + setRows((oldRows) => [ + ...oldRows, + { id, description: "", duration: "", isNew: true }, + ]); + setRowModesModel((oldModel) => ({ + ...oldModel, + [id]: { mode: GridRowModes.Edit, fieldToFocus: "description" }, + })); + }; - const handleMediumDurationFilter = () => { - const result = rows.filter((element: { duration: number; }) => element.duration > 30 || element.duration === 60); - setRows(result); - } + const handleShortDurationFilter = () => { + setSelectedFilter("SHORT") + }; - const handleHighDurationFilter = () => { - const result = rows.filter((element: { duration: number; }) => element.duration > 60); - setRows(result); - } - - return ( - - - - - - - ); -} + const handleMediumDurationFilter = () => { + setSelectedFilter("MEDIUM") + }; + + const handleHighDurationFilter = () => { + setSelectedFilter("HIGH") + }; + + return ( + + + + + + + ); +}; -export default CustomToolbar \ No newline at end of file +export default TasksTableToolbar; diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx index a53312e..90d799b 100644 --- a/src/components/Timer/Timer.tsx +++ b/src/components/Timer/Timer.tsx @@ -9,8 +9,7 @@ interface ITimerPropos { handlePause: () => void; handleFinish: () => void; handleReset: () => void; - minutes: number - // getMinutes: () => void + minutes: number; } export const STATUSES = { @@ -22,68 +21,101 @@ export const STATUSES = { }; const Timer = (props: any) => { - const { duration, handleStart, handlePause, handleFinish, handleReset, getMinutes, minutes, setMinutes } = - props; + const { + duration, + handleStart, + handlePause, + handleFinish, + handleReset, + minutes, + setRows, + rowId, + selectedTask, + } = props; - // El valor de la inicializacion solo se ejecuta en el primer render. - // Agregar una columna de tiempo restante. - - const [time, setTime] = useState(duration); - const [seconds, setSeconds] = useState(0); - const [flag, setFlag] = useState(false); - - // console.log(time); - // console.log(minutes); - // console.log(seconds); + const [active, setActive] = useState(false); const handleTimerStart = () => { - setFlag(true); + setActive(true); handleStart(STATUSES.STARTED, minutes); }; const handleTimerReset = () => { - setFlag(false); + setActive(false); setSeconds(0); - setMinutes(time); handleReset(STATUSES.RESET, minutes); }; const handleTimerPause = () => { - setFlag(false); + setActive(false); handlePause(STATUSES.PAUSED, minutes); }; const handleTimerFinish = () => { - setFlag(true); + setActive(false); handleFinish(STATUSES.FINISHED, minutes); }; - const updateCurrentTime = useCallback(() => { - getMinutes(minutes) - }, [getMinutes, minutes]); useEffect(() => { - if (flag) { + if (active) { const interval = setInterval(() => { if (seconds === 0 && minutes !== 0) { setSeconds((seconds) => seconds + 59); - setMinutes((minutes: number) => minutes - 1); - // updateCurrentTime(); + // setMinutes((minutes: number) => minutes - 1); + setRows((rows: any) => { + const newRows = [...rows]; + + const selectedRow = newRows.find((row) => row.id === rowId); + selectedRow.timeToFinish = minutes - 1; + + const rowIndex = newRows.findIndex((row) => row.id === rowId); + newRows.splice(rowIndex, 1, selectedRow); + + return newRows; + }); } else if (seconds === 0 && minutes === 0) { + setRows((rows: any) => { + const newRows = [...rows]; + + const selectedRow = newRows.find((row) => row.id === rowId); + selectedRow.status = STATUSES.FINISHED; + + const rowIndex = newRows.findIndex((row) => row.id === rowId); + newRows.splice(rowIndex, 1, selectedRow); + + return newRows; + }); + setActive(false); } else { setSeconds((seconds) => seconds - 1); } - }, 1000); + }, 5); return () => { clearInterval(interval); }; - } else { - setMinutes(duration); } + }, [seconds, minutes, active, rowId, setRows]); + + const remainingMinutes = minutes < 10 ? "0" + minutes : minutes; + const timerMinutes = + selectedTask?.status === STATUSES.RESET ? duration : remainingMinutes; + + /* + const sec = 60 - seconds; + let min = duration - remainingMinutes + + if (sec !== 0) { + min -= 1; + }*/ + + // Cuando se edita la duracion que se actualice el tiempo restante - }, [seconds, minutes, flag, duration, updateCurrentTime]); + // Al borrar una task que se inicialice el reloj a cero + // Al cambiar de task seleccionada que se inicialice el reloj al tiempo restante o la duracion + // Si se cambia el status a finished que se guarde el tiempo que le tomo si la empezo o si no que se le deje terminarla return ( @@ -104,8 +136,7 @@ const Timer = (props: any) => { - {minutes < 10 ? "0" + minutes : minutes} :{" "} - {seconds < 10 ? "0" + seconds : seconds} + {timerMinutes || "00"} : {seconds < 10 ? "0" + seconds : seconds} {" minutes"} @@ -117,22 +148,30 @@ const Timer = (props: any) => { justifyContent={"space-between"} spacing={1} > - - + {selectedTask?.status === STATUSES.PENDING || + selectedTask?.status === STATUSES.PAUSED || + selectedTask?.status === STATUSES.RESET || + selectedTask?.status === STATUSES.FINISHED ? ( + + ) : ( + + )}
From a9291717cada70e1170875b3366d9c88144a22a6 Mon Sep 17 00:00:00 2001 From: MFRamon Date: Sun, 21 Jan 2024 22:54:48 -0600 Subject: [PATCH 17/17] TL-13 Formatting code --- .../TasksTableToolbar/TasksTableToolbar.tsx | 8 ++-- src/components/Timer/Timer.tsx | 1 - src/pages/index.tsx | 38 +++++++++++++------ 3 files changed, 30 insertions(+), 17 deletions(-) diff --git a/src/components/TasksTableToolbar/TasksTableToolbar.tsx b/src/components/TasksTableToolbar/TasksTableToolbar.tsx index 2dc9aa1..f30325c 100644 --- a/src/components/TasksTableToolbar/TasksTableToolbar.tsx +++ b/src/components/TasksTableToolbar/TasksTableToolbar.tsx @@ -26,7 +26,7 @@ interface EditToolbarProps { } const TasksTableToolbar = (props: EditToolbarProps) => { - const { setRows, setRowModesModel, rows, setSelectedFilter} = props; + const { setRows, setRowModesModel, rows, setSelectedFilter } = props; const apiRef = useGridApiContext(); @@ -43,15 +43,15 @@ const TasksTableToolbar = (props: EditToolbarProps) => { }; const handleShortDurationFilter = () => { - setSelectedFilter("SHORT") + setSelectedFilter("SHORT"); }; const handleMediumDurationFilter = () => { - setSelectedFilter("MEDIUM") + setSelectedFilter("MEDIUM"); }; const handleHighDurationFilter = () => { - setSelectedFilter("HIGH") + setSelectedFilter("HIGH"); }; return ( diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx index 90d799b..20839d6 100644 --- a/src/components/Timer/Timer.tsx +++ b/src/components/Timer/Timer.tsx @@ -57,7 +57,6 @@ const Timer = (props: any) => { handleFinish(STATUSES.FINISHED, minutes); }; - useEffect(() => { if (active) { const interval = setInterval(() => { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c2d0e40..a8ea69e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -118,7 +118,7 @@ export default function Home() { console.log(newRow); console.log("Termino el update"); const updatedRow = { ...newRow, isNew: false }; - console.log({...newRow}) + console.log({ ...newRow }); setRows(rows.map((row) => (row.id === newRow.id ? updatedRow : row))); return updatedRow; }; @@ -228,12 +228,13 @@ export default function Home() { } if (operation === "FINISHED") { - selectedRow.completedTime = selectedRow.duration - selectedRow.timeToFinish; + selectedRow.completedTime = + selectedRow.duration - selectedRow.timeToFinish; selectedRow.finishedDate = new Date(); } - - const rowIndex = modifiedTasks.findIndex((row) => row.id === id); - modifiedTasks.splice(rowIndex, 1, selectedRow); + + const rowIndex = modifiedTasks.findIndex((row) => row.id === id); + modifiedTasks.splice(rowIndex, 1, selectedRow); setRows(modifiedTasks); }; @@ -274,11 +275,15 @@ export default function Home() { { - switch(selectedFilter) { - case "SHORT": return row.duration < 30 - case "MEDIUM": return row.duration > 30 || row.duration === 60 - case "NONE": return true - default: return true; + switch (selectedFilter) { + case "SHORT": + return row.duration < 30; + case "MEDIUM": + return row.duration > 30 || row.duration === 60; + case "NONE": + return true; + default: + return true; } })} columns={columns} @@ -289,14 +294,23 @@ export default function Home() { onRowClick={handleRowClick} processRowUpdate={processRowUpdate} slots={{ - toolbar: (props) => , + toolbar: (props) => ( + + ), }} sx={{ border: "0px" }} /> - row.status === STATUSES.FINISHED)} /> + row.status === STATUSES.FINISHED, + )} + />