Compare commits
1 Commits
feat/kanba
...
fix/logs-p
| Author | SHA1 | Date | |
|---|---|---|---|
| 511d091a94 |
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useEffect, useCallback, useMemo, useRef } from "react";
|
import { useState, useEffect, useCallback, useMemo } from "react";
|
||||||
import type { ReactElement } from "react";
|
import type { ReactElement } from "react";
|
||||||
import { useSearchParams, useRouter } from "next/navigation";
|
import { useSearchParams, useRouter } from "next/navigation";
|
||||||
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
|
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
|
||||||
@@ -12,7 +12,7 @@ import type {
|
|||||||
} from "@hello-pangea/dnd";
|
} from "@hello-pangea/dnd";
|
||||||
|
|
||||||
import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
|
import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
|
||||||
import { fetchTasks, updateTask, createTask, type TaskFilters } from "@/lib/api/tasks";
|
import { fetchTasks, updateTask, type TaskFilters } from "@/lib/api/tasks";
|
||||||
import { fetchProjects, type Project } from "@/lib/api/projects";
|
import { fetchProjects, type Project } from "@/lib/api/projects";
|
||||||
import { useWorkspaceId } from "@/lib/hooks";
|
import { useWorkspaceId } from "@/lib/hooks";
|
||||||
import type { Task } from "@mosaic/shared";
|
import type { Task } from "@mosaic/shared";
|
||||||
@@ -184,47 +184,9 @@ function TaskCard({ task, provided, snapshot, columnAccent }: TaskCardProps): Re
|
|||||||
interface KanbanColumnProps {
|
interface KanbanColumnProps {
|
||||||
config: ColumnConfig;
|
config: ColumnConfig;
|
||||||
tasks: Task[];
|
tasks: Task[];
|
||||||
onAddTask: (status: TaskStatus, title: string) => Promise<void>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function KanbanColumn({ config, tasks, onAddTask }: KanbanColumnProps): ReactElement {
|
function KanbanColumn({ config, tasks }: KanbanColumnProps): ReactElement {
|
||||||
const [showAddForm, setShowAddForm] = useState(false);
|
|
||||||
const [inputValue, setInputValue] = useState("");
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
// Focus input when form is shown
|
|
||||||
useEffect(() => {
|
|
||||||
if (showAddForm && inputRef.current) {
|
|
||||||
inputRef.current.focus();
|
|
||||||
}
|
|
||||||
}, [showAddForm]);
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.SyntheticEvent): Promise<void> => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!inputValue.trim() || isSubmitting) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsSubmitting(true);
|
|
||||||
try {
|
|
||||||
await onAddTask(config.status, inputValue.trim());
|
|
||||||
setInputValue("");
|
|
||||||
setShowAddForm(false);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("[KanbanColumn] Failed to add task:", err);
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
|
|
||||||
if (e.key === "Escape") {
|
|
||||||
setShowAddForm(false);
|
|
||||||
setInputValue("");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -306,89 +268,6 @@ function KanbanColumn({ config, tasks, onAddTask }: KanbanColumnProps): ReactEle
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Droppable>
|
</Droppable>
|
||||||
|
|
||||||
{/* Add Task Form */}
|
|
||||||
{!showAddForm ? (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
setShowAddForm(true);
|
|
||||||
}}
|
|
||||||
style={{
|
|
||||||
padding: "10px 16px",
|
|
||||||
border: "none",
|
|
||||||
background: "transparent",
|
|
||||||
color: "var(--muted)",
|
|
||||||
fontSize: "0.8rem",
|
|
||||||
cursor: "pointer",
|
|
||||||
textAlign: "left",
|
|
||||||
transition: "color 0.15s",
|
|
||||||
width: "100%",
|
|
||||||
}}
|
|
||||||
onMouseEnter={(e) => {
|
|
||||||
e.currentTarget.style.color = "var(--text)";
|
|
||||||
}}
|
|
||||||
onMouseLeave={(e) => {
|
|
||||||
e.currentTarget.style.color = "var(--muted)";
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
+ Add task
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
style={{ padding: "8px 12px 12px", borderTop: "1px solid var(--border)" }}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
ref={inputRef}
|
|
||||||
type="text"
|
|
||||||
value={inputValue}
|
|
||||||
onChange={(e) => {
|
|
||||||
setInputValue(e.target.value);
|
|
||||||
}}
|
|
||||||
onKeyDown={handleKeyDown}
|
|
||||||
placeholder="Task title..."
|
|
||||||
disabled={isSubmitting}
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
padding: "8px 10px",
|
|
||||||
borderRadius: "var(--r)",
|
|
||||||
border: `1px solid ${inputValue ? "var(--primary)" : "var(--border)"}`,
|
|
||||||
background: "var(--surface)",
|
|
||||||
color: "var(--text)",
|
|
||||||
fontSize: "0.85rem",
|
|
||||||
outline: "none",
|
|
||||||
opacity: isSubmitting ? 0.6 : 1,
|
|
||||||
}}
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
<div style={{ marginTop: 6, fontSize: "0.75rem", color: "var(--muted)" }}>
|
|
||||||
Press{" "}
|
|
||||||
<kbd
|
|
||||||
style={{
|
|
||||||
padding: "2px 4px",
|
|
||||||
background: "var(--bg-mid)",
|
|
||||||
borderRadius: "2px",
|
|
||||||
fontFamily: "var(--mono)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Enter
|
|
||||||
</kbd>{" "}
|
|
||||||
to save,{" "}
|
|
||||||
<kbd
|
|
||||||
style={{
|
|
||||||
padding: "2px 4px",
|
|
||||||
background: "var(--bg-mid)",
|
|
||||||
borderRadius: "2px",
|
|
||||||
fontFamily: "var(--mono)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Escape
|
|
||||||
</kbd>{" "}
|
|
||||||
to cancel
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -742,24 +621,6 @@ export default function KanbanPage(): ReactElement {
|
|||||||
void loadTasks(workspaceId);
|
void loadTasks(workspaceId);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- add task handler --- */
|
|
||||||
|
|
||||||
const handleAddTask = useCallback(
|
|
||||||
async (status: TaskStatus, title: string) => {
|
|
||||||
try {
|
|
||||||
const wsId = workspaceId ?? undefined;
|
|
||||||
const newTask = await createTask({ title, status }, wsId);
|
|
||||||
// Optimistically add to local state
|
|
||||||
setTasks((prev) => [...prev, newTask]);
|
|
||||||
} catch (err: unknown) {
|
|
||||||
console.error("[Kanban] Failed to create task:", err);
|
|
||||||
// Re-fetch on error to get consistent state
|
|
||||||
void loadTasks(workspaceId);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[workspaceId, loadTasks]
|
|
||||||
);
|
|
||||||
|
|
||||||
/* --- render --- */
|
/* --- render --- */
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -894,12 +755,7 @@ export default function KanbanPage(): ReactElement {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{COLUMNS.map((col) => (
|
{COLUMNS.map((col) => (
|
||||||
<KanbanColumn
|
<KanbanColumn key={col.status} config={col} tasks={grouped[col.status]} />
|
||||||
key={col.status}
|
|
||||||
config={col}
|
|
||||||
tasks={grouped[col.status]}
|
|
||||||
onAddTask={handleAddTask}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</DragDropContext>
|
</DragDropContext>
|
||||||
|
|||||||
Reference in New Issue
Block a user