Editing rows

src/components/task-form.tsx

@@ -15,7 +15,6 @@ export function TaskForm({ tasks, setTasks, setExpanded }: { tasks: TodoTasks, s
         status: data.status as TaskStatus,
       };
 
-
       if (data.insert) {
         setTasks([newTask, ...tasks]);
       } else {

src/components/task-row.tsx

@@ -2,11 +2,24 @@ import { useState } from 'react'
 import { taskTypes, taskStatuses } from './consts';
 import { EnumSelect } from './enum-select';
 
-export function TaskRow({ task }: { task: TodoTask, updateTask: (task: TodoTask) => void }): JSX.Element {
+export function TaskRow({ task, updateTask }: { task: TodoTask, updateTask: (task: TodoTask) => void }): JSX.Element {
   const [edit, setEdit] = useState(false);
 
   return (
-    <div className="tr">
+    <form className="tr" onSubmit={event => {
+      event.preventDefault();
+
+      const data = Object.fromEntries(new FormData(event.currentTarget));
+
+      updateTask({
+        id: task.id,
+        type: data.type as TaskType,
+        title: data.title as string,
+        status: data.status as TaskStatus,
+      });
+
+      setEdit(false)
+    }}>
       <div className="td">
         {edit
           ? <EnumSelect entries={taskTypes} name="type" defaultValue={task.type} />
@@ -26,29 +39,28 @@ export function TaskRow({ task }: { task: TodoTask, updateTask: (task: TodoTask)
       </div>
       <div className="td">
         {edit ? <>
-          <button className="mr-3" onClick={() => {
+          <button type="submit" className="mr-3">
-            //updateTask()
-            setEdit(false)
-          }}>
             <svg className="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490 490">
               <polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "></polygon>
             </svg>
           </button>
-          <button onClick={() => setEdit(false)}>
+          <button type="button" onClick={() => setEdit(false)}>
             <svg className="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490 490">
               <polygon points="456.851,0 245,212.564 33.149,0 0.708,32.337 212.669,245.004 0.708,457.678 33.149,490 245,277.443 456.851,490 489.292,457.678 277.331,245.004 489.292,32.337 ">
               </polygon>
             </svg>
           </button>
         </> : <>
-          <button onClick={() => setEdit(true)}>
+          <button type="button" onClick={event => {
+            event.preventDefault()
+            setEdit(true)
+          }}>
             <svg className="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
               <path d="M 22.828125 3 C 22.316375 3 21.804562 3.1954375 21.414062 3.5859375 L 19 6 L 24 11 L 26.414062 8.5859375 C 27.195062 7.8049375 27.195062 6.5388125 26.414062 5.7578125 L 24.242188 3.5859375 C 23.851688 3.1954375 23.339875 3 22.828125 3 z M 17 8 L 5.2597656 19.740234 C 5.2597656 19.740234 6.1775313 19.658 6.5195312 20 C 6.8615312 20.342 6.58 22.58 7 23 C 7.42 23.42 9.6438906 23.124359 9.9628906 23.443359 C 10.281891 23.762359 10.259766 24.740234 10.259766 24.740234 L 22 13 L 17 8 z M 4 23 L 3.0566406 25.671875 A 1 1 0 0 0 3 26 A 1 1 0 0 0 4 27 A 1 1 0 0 0 4.328125 26.943359 A 1 1 0 0 0 4.3378906 26.939453 L 4.3632812 26.931641 A 1 1 0 0 0 4.3691406 26.927734 L 7 26 L 5.5 24.5 L 4 23 z"></path>
             </svg>
           </button>
-        </>
+        </>}
-        }
-      </div>
       </div>
+    </form>
   );
 }

src/components/task-table.tsx

@@ -1,7 +1,7 @@
 import { } from 'react'
 import { TaskRow } from './task-row';
 
-export function TaskTable({ tasks }: { tasks: TodoTasks }): JSX.Element {
+export function TaskTable({ tasks, updateTask }: { tasks: TodoTasks, updateTask: (task: TodoTask) => void }): JSX.Element {
   return (
     <div className="w-full">
       <div className="tr">
@@ -10,7 +10,7 @@ export function TaskTable({ tasks }: { tasks: TodoTasks }): JSX.Element {
         <div className="td">Statusas</div>
         <div className="td">Veiksmai</div>
       </div>
-      {tasks.map(task => <TaskRow key={task.id} task={task} updateTask={() => { }} />)}
+      {tasks.map(task => <TaskRow key={task.id} task={task} updateTask={updateTask} />)}
     </div>
   );
 }

src/routes/list.tsx

@@ -32,7 +32,10 @@ function App() {
   return (
     <>
       <AccordionItem title='Užduočių sąrašas' isOpen={expanded == 0} onClick={() => handleAccordion(0)}>
-        <TaskTable tasks={tasks} />
+        <TaskTable tasks={tasks} updateTask={updated => {
+          const index = tasks.findIndex(t => t.id == updated.id);
+          setTasks([...tasks.slice(0, index), updated, ...tasks.slice(index + 1)]);
+        }} />
       </AccordionItem>
       <AccordionItem title='Nauja užduotis' isOpen={expanded == 1} onClick={() => handleAccordion(1)}>
         <TaskForm tasks={tasks} setTasks={setTasks} setExpanded={setExpanded} />