client functionality to react to un-focus and enter press events on t…

…itle and detail fields
UMLCloudComputing · Aug 21, 2024 · ed12dec · ed12dec
1 parent 91d0862
commit ed12dec
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 11 deletions.
diff --git a/src/app/(home)/tasks/page.js b/src/app/(home)/tasks/page.js
@@ -20,6 +20,7 @@ import TaskHeaderCard from "@/components/Cards/TaskHeaderCard";
 import TaskCard from "@/components/Cards/TaskCard";
 
 import { Box } from "@mui/material";
+import { Description } from '@mui/icons-material';
 export default function Lists ()
 {
     const client = generateClient({ authMode: 'userPool' });
@@ -63,6 +64,15 @@ export default function Lists ()
         console.log('added a task');
     }
 
+    const handleTitleChange = async (title) => {
+        // wait until we figure out how this works.
+    }
+
+    const handleDescriptionChange = async (Description) => {
+        // do something
+        console.log(`Description changed: ${Description}`)
+    }
+
     return (
         <>
             <TaskHeaderCard handleAddTask={handleTaskAddClick} />
@@ -72,7 +82,7 @@ export default function Lists ()
                     {
                         return (
                             (index === tasks.length - 1) ?
-                                <TaskCard key={t.id} task={t} borderBottomRadius={'20px'} onDeleteClick={() => handleTaskDelete(t.id)} />
+                            <TaskCard key={t.id} task={t} borderBottomRadius={'20px'} onDeleteClick={() => handleTaskDelete(t.id)} onTitleChange={handleTitleChange} onDescriptionChange={handleDescriptionChange}/>
                                 : <TaskCard key={t.id} task={t} onDeleteClick={() => handleTaskDelete(t.id)} />
                         )
                     })

diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js
@@ -22,12 +22,13 @@ import React, { useState } from 'react';
 import DatePickerDialog from "../Dialogs/DatePickerDialog";
 
 
-export default function TaskCard ({ task, borderBottomRadius, onDeleteClick })
+export default function TaskCard ({ task, borderBottomRadius, onDeleteClick, onTitleChange, onDescriptionChange })
 {
 
     const { title, details, date, important, done } = task;
 
     const [titleValue, setTitleValue] = useState("");
+    const [descrptionValue, setDescriptionValue] = useState("");
     const [enterPressed, setEnterPressed] = useState(false);
     const [isHovering, setIsHovering] = useState(false);
     const [anchorEl, setAnchorEl] = useState(null);
@@ -44,27 +45,45 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick })
     const handleDateIconClick = () => setOpenCalendarDialog(true);
     const handleCloseDialog = () => setOpenCalendarDialog(false);
     const handleTitleChange = (event) => setTitleValue(event.target.value);
-    const handleDescriptionChange = (event) => setTitleValue;
+    const handleDescriptionChange = (event) => setDescriptionValue(event.target.value);
 
-    const handleKeyDown = (event) => {
+    const handleTitleKeyDown = (event) => {
         if (event.key === 'Enter') {
             setEnterPressed(true);
-            saveValue();
+            saveTitleValue();
         }
     };
 
-    const handleBlur = () => {
+    const handleDescriptionKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            setEnterPressed(true);
+            saveDescriptionValue();
+        }
+    };
+
+    const handleTitleBlur = () => {
+        if (!enterPressed) {
+            saveTitleValue();
+        }
+        setEnterPressed(false);
+    };
+
+    const handleDescriptionBlur = () => {
         if (!enterPressed) {
-            saveValue();
+            saveDescriptionValue();
         }
         setEnterPressed(false);
     };
 
     // write logic here
     // think about where to move the logic, here or to file above
     // distinguish between what value to save
-    const saveValue = () => {
-        console.log(`title: ${titleValue}`);
+    const saveDescriptionValue = () => {
+        onDescriptionChange(descrptionValue);
+    };
+
+    const saveTitleValue = () => {
+        onTitleChange(titleValue);
     };
 
     const TaskOptionsMenu = (
@@ -97,7 +116,7 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick })
 
                     <Box sx={{ justifyContent: 'left', display: 'flex', alignItems: 'center', flexDirection: 'row' }} onMouseEnter={handleMouseOver} onMouseLeave={handleMouseLeave}>
                         <Radio size='small' />
-                        <TextField placeholder='Title' variant='standard' sx={{ width: '100%' }} InputProps={{ disableUnderline: 'true' }} defaultValue={title} onBlur={handleBlur} onChange={handleTitleChange}/>
+                        <TextField placeholder='Title' variant='standard' sx={{ width: '100%' }} InputProps={{ disableUnderline: 'true' }} defaultValue={title} onBlur={handleTitleBlur} onChange={handleTitleChange} onKeyDown={handleTitleKeyDown}/>
                         {
                             (isHovering) ?
                                 <>
@@ -121,7 +140,7 @@ export default function TaskCard ({ task, borderBottomRadius, onDeleteClick })
 
                     <Box sx={{ justifyContent: 'left', display: 'flex', alignItems: 'center' }}>
                         <NotesIcon sx={{ marginLeft: '1.1%' }} />
-                        <TextField placeholder='Details' variant='standard' sx={{ width: '100%', marginLeft: '1%' }} InputProps={{ disableUnderline: 'true' }} defaultValue={details} onBlur={handleBlur} onChange={handleDescriptionChange}/>
+                        <TextField placeholder='Details' variant='standard' sx={{ width: '100%', marginLeft: '1%' }} InputProps={{ disableUnderline: 'true' }} defaultValue={details} onBlur={handleDescriptionBlur} onChange={handleDescriptionChange} onKeyDown={handleDescriptionKeyDown}/>
                     </Box>
 
                     <Box sx={{ justifyContent: 'left', display: 'flex', alignItems: 'center' }}>