tasks ui: simplify create form to content-first with fixed default normal/todo/manual

This commit is contained in:
DBT
2026-02-28 09:08:39 +00:00
parent 433a867d3f
commit 19e7e550ca

View File

@@ -17,7 +17,7 @@ const Tasks: React.FC = () => {
const { q } = useAppContext();
const [items, setItems] = useState<TaskItem[]>([]);
const [selected, setSelected] = useState<TaskItem | null>(null);
const [draft, setDraft] = useState<TaskItem>({ id: '', content: '', priority: 'normal', status: 'todo', source: 'manual', due_at: '' });
const [draft, setDraft] = useState<TaskItem>({ id: '', content: '' });
const load = async () => {
const r = await fetch(`/webui/api/tasks${q}`);
@@ -27,7 +27,7 @@ const Tasks: React.FC = () => {
setItems(arr);
if (arr.length > 0) {
setSelected(arr[0]);
setDraft(arr[0]);
setDraft({ id: arr[0].id || '', content: arr[0].content || '' });
}
};
@@ -36,7 +36,7 @@ const Tasks: React.FC = () => {
const save = async (action: 'create' | 'update' | 'delete') => {
const payload: any = { action };
if (action === 'create') payload.item = draft;
if (action === 'update') { payload.id = draft.id; payload.item = draft; }
if (action === 'update') { payload.id = draft.id; payload.item = { id: draft.id, content: draft.content }; }
if (action === 'delete') payload.id = draft.id;
const r = await fetch(`/webui/api/tasks${q}`, {
method: 'POST',
@@ -51,7 +51,7 @@ const Tasks: React.FC = () => {
<div className="h-full p-4 md:p-6 flex flex-col gap-4">
<div className="flex items-center justify-between">
<h1 className="text-xl md:text-2xl font-semibold">{t('tasks')}</h1>
<button onClick={() => setDraft({ id: '', content: '', priority: 'normal', status: 'todo', source: 'manual', due_at: '' })} className="px-3 py-1.5 rounded-lg bg-emerald-700/80 hover:bg-emerald-600 text-sm">{t('newTask')}</button>
<button onClick={() => setDraft({ id: '', content: '' })} className="px-3 py-1.5 rounded-lg bg-emerald-700/80 hover:bg-emerald-600 text-sm">{t('newTask')}</button>
</div>
<div className="flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-[340px_1fr] gap-4">
@@ -59,7 +59,7 @@ const Tasks: React.FC = () => {
<div className="px-3 py-2 border-b border-zinc-800 text-xs text-zinc-400 uppercase tracking-wider">{t('taskList')}</div>
<div className="overflow-y-auto max-h-[70vh]">
{items.map((it, idx) => (
<button key={it.id || idx} onClick={() => { setSelected(it); setDraft(it); }} className={`w-full text-left px-3 py-2 border-b border-zinc-800/50 hover:bg-zinc-800/40 ${selected?.id === it.id ? 'bg-indigo-500/15' : ''}`}>
<button key={it.id || idx} onClick={() => { setSelected(it); setDraft({ id: it.id || '', content: it.content || '' }); }} className={`w-full text-left px-3 py-2 border-b border-zinc-800/50 hover:bg-zinc-800/40 ${selected?.id === it.id ? 'bg-indigo-500/15' : ''}`}>
<div className="text-sm text-zinc-100 truncate">{it.id || '-'}</div>
<div className="text-xs text-zinc-400 truncate">{it.status} · {it.priority} · {it.source}</div>
</button>
@@ -71,11 +71,7 @@ const Tasks: React.FC = () => {
<div className="text-xs text-zinc-400 uppercase tracking-wider">{t('taskCrud')}</div>
<input value={draft.id || ''} onChange={(e)=>setDraft({ ...draft, id: e.target.value })} placeholder="id" className="w-full px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
<textarea value={draft.content || ''} onChange={(e)=>setDraft({ ...draft, content: e.target.value })} placeholder="content" className="w-full px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded min-h-[120px]" />
<div className="grid grid-cols-3 gap-2">
<input value={draft.priority || ''} onChange={(e)=>setDraft({ ...draft, priority: e.target.value })} placeholder="priority" className="px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
<input value={draft.status || ''} onChange={(e)=>setDraft({ ...draft, status: e.target.value })} placeholder="status" className="px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
<input value={draft.source || ''} onChange={(e)=>setDraft({ ...draft, source: e.target.value })} placeholder="source" className="px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
</div>
<div className="flex items-center gap-2">
<button onClick={()=>save('create')} className="px-2 py-1 text-xs rounded bg-emerald-700/70 hover:bg-emerald-600">{t('createTask')}</button>
<button onClick={()=>save('update')} className="px-2 py-1 text-xs rounded bg-indigo-700/70 hover:bg-indigo-600">{t('updateTask')}</button>