Edit rows preparation

src/components/enum-select.tsx

@@ -1,10 +1,9 @@
 import { } from 'react'
 
-export function EnumSelect({ name, entries }: { name: string; entries: Record<string, string> }): JSX.Element {
+export function EnumSelect({ name, entries, value }: { name: string; entries: Record<string, string>, value?: string }): JSX.Element {
   return (
     <select id={name} name={name}>
-      {Object.entries(entries).map(([value, name]) => <option key={value} value={value}>{name}</option>)}
+      {Object.entries(entries).map(([v, name]) => <option key={v} value={v} selected={v == value}>{name}</option>)}
     </select>
   );
 }
-

src/components/task-list.tsx

@@ -1,24 +0,0 @@
-import { } from 'react'
-import { taskTypes, taskStatuses } from './consts';
-
-export function TaskList({ tasks }: { tasks: TodoTasks }): JSX.Element {
-  return (
-    <table className="w-full">
-      <thead>
-        <tr>
-          <th>Tipas</th>
-          <th>Pavadinimas</th>
-          <th>Statusas</th>
-        </tr>
-      </thead>
-      <tbody>
-        {tasks.map(task => <tr key={task.id}>
-          <td>{taskTypes[task.type]}</td>
-          <td>{task.title}</td>
-          <td>{taskStatuses[task.status]}</td>
-        </tr>)}
-      </tbody>
-    </table>
-  );
-}
-

src/components/task-row.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import { taskTypes, taskStatuses } from './consts';
+import { EnumSelect } from './enum-select';
+
+export function TaskRow({ task, updateTask }: { task: TodoTask, updateTask: (task: TodoTask) => void }): JSX.Element {
+  const [edit, setEdit] = useState(false);
+
+  return edit ? (
+    <tr key={task.id}>
+      <td>{<EnumSelect entries={taskTypes} name="type" value={task.type} />}</td>
+      <td><input type="text" name="title" value={task.title} /></td>
+      <td>{<EnumSelect entries={taskStatuses} name="status" value={task.status} />}</td>
+      <td className="text-center">
+        <button className="mr-3" onClick={() => {
+          //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)}>
+          <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>
+      </td>
+    </tr>
+  ) : (
+    <tr key={task.id}>
+      <td>{taskTypes[task.type]}</td>
+      <td>{task.title}</td>
+      <td>{taskStatuses[task.status]}</td>
+      <td>
+        <button onClick={() => 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>
+      </td>
+    </tr>
+  )
+}

src/components/task-table.tsx

@@ -0,0 +1,21 @@
+import { } from 'react'
+import { TaskRow } from './task-row';
+
+export function TaskTable({ tasks }: { tasks: TodoTasks }): JSX.Element {
+  return (
+    <table className="w-full">
+      <thead>
+        <tr>
+          <th>Tipas</th>
+          <th>Pavadinimas</th>
+          <th>Statusas</th>
+          <th>Veiksmai</th>
+        </tr>
+      </thead>
+      <tbody>
+        {tasks.map(task => <TaskRow task={task} updateTask={() => { }} />)}
+      </tbody>
+    </table>
+  );
+}
+

src/index.css

@@ -17,11 +17,11 @@
   }
 
   td {
-    @apply border-b border-slate-100 dark:border-slate-700 p-4 pl-8 text-slate-500 dark:text-slate-400;
+    @apply border-b border-slate-100 dark:border-slate-700 p-4 pr-0 text-slate-500 dark:text-slate-400;
   }
 
   select, input {
-    @apply w-full rounded-lg border-0 px-3 py-2 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-500 focus:outline-none hover:ring-indigo-500 transition-shadow duration-700;
+    @apply h-14 w-full rounded-lg border-0 px-3 py-4 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-500 focus:outline-none hover:ring-indigo-500 transition-shadow duration-700;
   }
 
   .accordion-title {

src/routes/list.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { AccordionItem } from '../components/accordion-item';
-import { TaskList } from '../components/task-list';
+import { TaskTable } from '../components/task-table';
 import { TaskForm } from '../components/task-form';
 
 function App() {
@@ -32,7 +32,7 @@ function App() {
   return (
     <>
       <AccordionItem title='Užduočių sąrašas' isOpen={expanded == 0} onClick={() => handleAccordion(0)}>
-        <TaskList tasks={tasks} />
+        <TaskTable tasks={tasks} />
       </AccordionItem>
       <AccordionItem title='Nauja užduotis' isOpen={expanded == 1} onClick={() => handleAccordion(1)}>
         <TaskForm tasks={tasks} setTasks={setTasks} setExpanded={setExpanded} />