Flex table
This commit is contained in:
parent
47b5a769c6
commit
5a1260c369
|
|
@ -1,9 +1,9 @@
|
|||
import { } from 'react'
|
||||
|
||||
export function EnumSelect({ name, entries, value }: { name: string; entries: Record<string, string>, value?: string }): JSX.Element {
|
||||
export function EnumSelect({ name, entries, defaultValue }: { name: string; entries: Record<string, string>, defaultValue?: string }): JSX.Element {
|
||||
return (
|
||||
<select id={name} name={name}>
|
||||
{Object.entries(entries).map(([v, name]) => <option key={v} value={v} selected={v == value}>{name}</option>)}
|
||||
<select id={name} name={name} defaultValue={defaultValue}>
|
||||
{Object.entries(entries).map(([v, name]) => <option key={v} value={v}>{name}</option>)}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,43 +2,53 @@ 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 {
|
||||
export function TaskRow({ task }: { 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>
|
||||
)
|
||||
return (
|
||||
<div className="tr">
|
||||
<div className="td">
|
||||
{edit
|
||||
? <EnumSelect entries={taskTypes} name="type" defaultValue={task.type} />
|
||||
: taskTypes[task.type]
|
||||
}
|
||||
</div>
|
||||
<div className="td">
|
||||
{edit
|
||||
? <input type="text" name="title" defaultValue={task.title} />
|
||||
: task.title}
|
||||
</div>
|
||||
<div className="td">
|
||||
{edit
|
||||
? <EnumSelect entries={taskStatuses} name="status" defaultValue={task.status} />
|
||||
: taskStatuses[task.status]
|
||||
}
|
||||
</div>
|
||||
<div className="td">
|
||||
{edit ? <>
|
||||
<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>
|
||||
</> : <>
|
||||
<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>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,19 +3,15 @@ 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>
|
||||
<div className="w-full">
|
||||
<div className="tr">
|
||||
<div className="td">Tipas</div>
|
||||
<div className="td">Pavadinimas</div>
|
||||
<div className="td">Statusas</div>
|
||||
<div className="td">Veiksmai</div>
|
||||
</div>
|
||||
{tasks.map(task => <TaskRow key={task.id} task={task} updateTask={() => { }} />)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
@tailwind utilities;
|
||||
|
||||
@layer utilities {
|
||||
|
||||
p,
|
||||
li {
|
||||
@apply my-4;
|
||||
|
|
@ -12,15 +13,44 @@
|
|||
@apply bg-neutral-100 dark:bg-neutral-900 cursor-pointer px-5 py-2 rounded-lg border border-gray-300 hover:border-indigo-500 transition-colors duration-700;
|
||||
}
|
||||
|
||||
th {
|
||||
@apply border-b dark:border-slate-600 pl-8 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left;
|
||||
.tr {
|
||||
@apply flex border-b pb-3 border-slate-100 dark:border-slate-700 text-slate-500 dark:text-slate-400;
|
||||
|
||||
.td {
|
||||
@apply pl-4 pt-4 content-center;
|
||||
}
|
||||
|
||||
.td:nth-child(1) {
|
||||
@apply flex-auto w-32;
|
||||
}
|
||||
|
||||
.td:nth-child(2) {
|
||||
@apply flex-auto w-64;
|
||||
}
|
||||
|
||||
.td:nth-child(3) {
|
||||
@apply flex-auto w-32;
|
||||
}
|
||||
|
||||
.td:nth-child(4) {
|
||||
@apply flex-auto w-16 flex justify-center;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
@apply border-b border-slate-100 dark:border-slate-700 p-4 pr-0 text-slate-500 dark:text-slate-400;
|
||||
.tr:first-child {
|
||||
@apply dark:border-slate-600 text-slate-400 dark:text-slate-200;
|
||||
|
||||
.td {
|
||||
@apply pt-0;
|
||||
}
|
||||
}
|
||||
|
||||
select, input {
|
||||
.tr:last-child {
|
||||
@apply pb-0 border-b-0;
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
@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;
|
||||
}
|
||||
|
||||
|
|
@ -32,7 +62,8 @@
|
|||
@apply rounded-t-xl;
|
||||
}
|
||||
|
||||
.accordion-title:last-child, .accordion-body:last-child {
|
||||
.accordion-title:last-child,
|
||||
.accordion-body:last-child {
|
||||
@apply border-b rounded-b-xl;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue