@btst/stack 2.12.2 → 3.0.0-rc.2

package/src/plugins/kanban/client/components/forms/column-form.tsx

@@ -4,7 +4,9 @@ import { useState } from "react";
 import { Button } from "@workspace/ui/components/button";
 import { Input } from "@workspace/ui/components/input";
 import { Label } from "@workspace/ui/components/label";
-import { useColumnMutations } from "../../hooks/kanban-hooks";
+import { usePluginOverrides, useTranslate } from "@btst/stack/context";
+import { useColumnForm } from "../../hooks/kanban-hooks";
+import type { KanbanPluginOverrides } from "../../overrides";
 import type { SerializedColumn } from "../../../types";
 
 interface ColumnFormProps {
@@ -15,6 +17,14 @@ interface ColumnFormProps {
 	onSuccess: () => void;
 }
 
+interface ColumnFormValues {
+	title: string;
+}
+
+function firstError(error: string | string[] | undefined): string | undefined {
+	return Array.isArray(error) ? error[0] : error;
+}
+
 export function ColumnForm({
 	boardId,
 	columnId,
@@ -22,74 +32,97 @@ export function ColumnForm({
 	onClose,
 	onSuccess,
 }: ColumnFormProps) {
+	const t = useTranslate();
+	const { localization } = usePluginOverrides<KanbanPluginOverrides>("kanban");
 	const isEditing = !!columnId;
-	const { createColumn, updateColumn, isCreating, isUpdating } =
-		useColumnMutations();
-
 	const [title, setTitle] = useState(column?.title || "");
-	const [error, setError] = useState<string | null>(null);
+	const [titleError, setTitleError] = useState<string | null>(null);
+
+	const resourceForm = useColumnForm<ColumnFormValues>({
+		action: isEditing ? "edit" : "create",
+		record: column ?? null,
+		toCreateVars: (values) => ({ ...values, boardId }),
+		toUpdateVars: (values) => ({ id: columnId ?? "", data: values }),
+		onSuccess,
+	});
 
-	const isPending = isCreating || isUpdating;
+	const serverTitleError = firstError(resourceForm.fieldErrors.title);
+	const topLevelError =
+		resourceForm.error && Object.keys(resourceForm.fieldErrors).length === 0
+			? resourceForm.error.message
+			: null;
 
-	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-		e.preventDefault();
-		setError(null);
+	const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		resourceForm.clearErrors();
+		setTitleError(null);
 
 		if (!title.trim()) {
-			setError("Title is required");
+			setTitleError(
+				localization?.titleRequired ??
+					t("kanban.forms.titleRequired", "Title is required"),
+			);
 			return;
 		}
 
-		try {
-			if (isEditing && columnId) {
-				await updateColumn(columnId, { title });
-			} else {
-				await createColumn({ title, boardId });
-			}
-			onSuccess();
-		} catch (err) {
-			setError(err instanceof Error ? err.message : "An error occurred");
-		}
+		await resourceForm.submit({ title });
 	};
 
 	return (
 		<form onSubmit={handleSubmit} className="space-y-4">
 			<div className="space-y-2">
-				<Label htmlFor="title">Title *</Label>
+				<Label htmlFor="title">
+					{localization?.columnTitle ?? t("kanban.forms.columnTitle", "Title")}{" "}
+					*
+				</Label>
 				<Input
 					id="title"
 					value={title}
-					onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-						setTitle(e.target.value)
+					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+						setTitle(event.target.value);
+						setTitleError(null);
+					}}
+					placeholder={
+						localization?.columnTitlePlaceholder ??
+						t("kanban.forms.columnTitlePlaceholder", "e.g., To Do")
 					}
-					placeholder="e.g., To Do"
-					disabled={isPending}
+					disabled={resourceForm.isSubmitting}
+					aria-invalid={!!(titleError || serverTitleError)}
 				/>
+				{(titleError || serverTitleError) && (
+					<p className="text-sm text-destructive">
+						{titleError || serverTitleError}
+					</p>
+				)}
 			</div>
 
-			{error && (
+			{topLevelError && (
 				<div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
-					{error}
+					{topLevelError}
 				</div>
 			)}
 
 			<div className="flex gap-2 pt-2">
-				<Button type="submit" disabled={isPending}>
-					{isPending
+				<Button type="submit" disabled={resourceForm.isSubmitting}>
+					{resourceForm.isSubmitting
 						? isEditing
-							? "Updating..."
-							: "Creating..."
+							? (localization?.updating ??
+								t("kanban.common.updating", "Updating..."))
+							: (localization?.creating ??
+								t("kanban.common.creating", "Creating..."))
 						: isEditing
-							? "Update Column"
-							: "Create Column"}
+							? (localization?.updateColumn ??
+								t("kanban.forms.updateColumn", "Update Column"))
+							: (localization?.createColumn ??
+								t("kanban.forms.createColumn", "Create Column"))}
 				</Button>
 				<Button
 					type="button"
 					variant="outline"
 					onClick={onClose}
-					disabled={isPending}
+					disabled={resourceForm.isSubmitting}
 				>
-					Cancel
+					{localization?.cancel ?? t("kanban.common.cancel", "Cancel")}
 				</Button>
 			</div>
 		</form>

package/src/plugins/kanban/client/components/forms/task-form.tsx

@@ -14,10 +14,17 @@ import {
 } from "@workspace/ui/components/select";
 import { MinimalTiptapEditor } from "@workspace/ui/components/minimal-tiptap";
 import SearchSelect from "@workspace/ui/components/search-select";
-import { usePluginOverrides } from "@btst/stack/context";
-import { useTaskMutations, useSearchUsers } from "../../hooks/kanban-hooks";
+import {
+	CanAccess,
+	usePluginOverrides,
+	useTranslate,
+} from "@btst/stack/context";
+import {
+	useTaskForm,
+	useTaskMutations,
+	useSearchUsers,
+} from "../../hooks/kanban-hooks";
 import type { KanbanPluginOverrides } from "../../overrides";
-import { PRIORITY_OPTIONS } from "../../../utils";
 import type {
 	SerializedColumn,
 	SerializedTask,
@@ -32,7 +39,19 @@ interface TaskFormProps {
 	columns: SerializedColumn[];
 	onClose: () => void;
 	onSuccess: () => void;
-	onDelete?: () => void;
+	onDelete?: () => void | Promise<void>;
+}
+
+interface TaskFormValues {
+	title: string;
+	description: string;
+	priority: Priority;
+	columnId: string;
+	assigneeId: string;
+}
+
+function firstError(error: string | string[] | undefined): string | undefined {
+	return Array.isArray(error) ? error[0] : error;
 }
 
 export function TaskForm({
@@ -45,18 +64,14 @@ export function TaskForm({
 	onSuccess,
 	onDelete,
 }: TaskFormProps) {
-	const isEditing = !!taskId;
-	const { uploadImage, imagePicker: imagePickerTrigger } =
-		usePluginOverrides<KanbanPluginOverrides>("kanban");
+	const t = useTranslate();
 	const {
-		createTask,
-		updateTask,
-		moveTask,
-		isCreating,
-		isUpdating,
-		isDeleting,
-		isMoving,
-	} = useTaskMutations();
+		uploadImage,
+		imagePicker: imagePickerTrigger,
+		localization,
+	} = usePluginOverrides<KanbanPluginOverrides>("kanban");
+	const isEditing = !!taskId;
+	const { moveTask, isMoving } = useTaskMutations();
 
 	const [title, setTitle] = useState(task?.title || "");
 	const [description, setDescription] = useState(task?.description || "");
@@ -67,191 +82,298 @@ export function TaskForm({
 		task?.columnId || columnId,
 	);
 	const [assigneeId, setAssigneeId] = useState<string>(task?.assigneeId || "");
-	const [error, setError] = useState<string | null>(null);
+	const [titleError, setTitleError] = useState<string | null>(null);
+	const [isDeleting, setIsDeleting] = useState(false);
+
+	const resourceForm = useTaskForm<TaskFormValues>({
+		action: isEditing ? "edit" : "create",
+		record: task ?? null,
+		toCreateVars: (values) => ({
+			title: values.title,
+			description: values.description,
+			priority: values.priority,
+			columnId: values.columnId,
+			assigneeId: values.assigneeId || undefined,
+		}),
+		toUpdateVars: (values) => ({
+			id: taskId ?? "",
+			data: {
+				title: values.title,
+				description: values.description,
+				priority: values.priority,
+				...(values.columnId === task?.columnId
+					? { columnId: values.columnId }
+					: {}),
+				assigneeId: values.assigneeId || null,
+			},
+		}),
+		onSuccess: async () => {
+			if (isEditing && taskId && selectedColumnId !== task?.columnId) {
+				const targetTasks =
+					columns.find((column) => column.id === selectedColumnId)?.tasks ?? [];
+				const targetOrder =
+					targetTasks.length > 0
+						? Math.max(...targetTasks.map((targetTask) => targetTask.order)) + 1
+						: 0;
+
+				try {
+					await moveTask(taskId, selectedColumnId, targetOrder);
+				} catch (error) {
+					const message =
+						error instanceof Error
+							? error.message
+							: (localization?.errorGeneric ??
+								t("kanban.common.errorGeneric", "Something went wrong"));
+					const partialErrorTemplate = localization?.taskMovePartialError;
+					throw new Error(
+						partialErrorTemplate
+							? partialErrorTemplate.replaceAll("{{message}}", message)
+							: t(
+									"kanban.forms.taskMovePartialError",
+									"Task properties were saved, but moving to the new column failed: {{message}}. You can try dragging the task to the desired column.",
+									{ message },
+								),
+					);
+				}
+			}
+
+			onSuccess();
+		},
+	});
 
-	// Fetch available users for assignment
 	const { data: users = [] } = useSearchUsers("", boardId);
+	const unassigned =
+		localization?.unassigned ?? t("kanban.common.unassigned", "Unassigned");
 	const userOptions = [
-		{ value: "", label: "Unassigned" },
+		{ value: "", label: unassigned },
 		...users.map((user) => ({ value: user.id, label: user.name })),
 	];
+	const priorityOptions: Array<{ value: Priority; label: string }> = [
+		{
+			value: "LOW",
+			label: localization?.priorityLow ?? t("kanban.common.priorityLow", "Low"),
+		},
+		{
+			value: "MEDIUM",
+			label:
+				localization?.priorityMedium ??
+				t("kanban.common.priorityMedium", "Medium"),
+		},
+		{
+			value: "HIGH",
+			label:
+				localization?.priorityHigh ?? t("kanban.common.priorityHigh", "High"),
+		},
+		{
+			value: "URGENT",
+			label:
+				localization?.priorityUrgent ??
+				t("kanban.common.priorityUrgent", "Urgent"),
+		},
+	];
 
-	const isPending = isCreating || isUpdating || isDeleting || isMoving;
+	const isPending = resourceForm.isSubmitting || isMoving || isDeleting;
+	const serverTitleError = firstError(resourceForm.fieldErrors.title);
+	const serverDescriptionError = firstError(
+		resourceForm.fieldErrors.description,
+	);
+	const serverPriorityError = firstError(resourceForm.fieldErrors.priority);
+	const serverColumnError = firstError(resourceForm.fieldErrors.columnId);
+	const serverAssigneeError = firstError(resourceForm.fieldErrors.assigneeId);
+	const topLevelError =
+		resourceForm.error && Object.keys(resourceForm.fieldErrors).length === 0
+			? resourceForm.error.message
+			: null;
 
-	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-		e.preventDefault();
-		setError(null);
+	const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		resourceForm.clearErrors();
+		setTitleError(null);
 
 		if (!title.trim()) {
-			setError("Title is required");
+			setTitleError(
+				localization?.titleRequired ??
+					t("kanban.forms.titleRequired", "Title is required"),
+			);
 			return;
 		}
 
-		try {
-			if (isEditing && taskId) {
-				const isColumnChanging =
-					task?.columnId && selectedColumnId !== task.columnId;
-
-				if (isColumnChanging) {
-					// When changing columns, we need two operations:
-					// 1. Update task properties (title, description, priority, assigneeId)
-					// 2. Move task to new column with proper order calculation
-					//
-					// To avoid partial failure confusion, we attempt both operations
-					// but provide clear messaging if one succeeds and the other fails.
-
-					// First update the task properties (title, description, priority, assigneeId)
-					// If this fails, nothing is saved and the outer catch handles it
-					await updateTask(taskId, {
-						title,
-						description,
-						priority,
-						assigneeId: assigneeId || null,
-					});
-
-					// Then move the task to the new column with calculated order
-					// Place at the end of the destination column
-					try {
-						const targetColumn = columns.find((c) => c.id === selectedColumnId);
-						const targetTasks = targetColumn?.tasks || [];
-						const targetOrder =
-							targetTasks.length > 0
-								? Math.max(...targetTasks.map((t) => t.order)) + 1
-								: 0;
+		await resourceForm.submit({
+			title,
+			description,
+			priority,
+			columnId: selectedColumnId,
+			assigneeId,
+		});
+	};
 
-						await moveTask(taskId, selectedColumnId, targetOrder);
-					} catch (moveErr) {
-						// Properties were saved but column move failed
-						// Provide specific error message about partial success
-						const moveErrorMsg =
-							moveErr instanceof Error ? moveErr.message : "Unknown error";
-						setError(
-							`Task properties were saved, but moving to the new column failed: ${moveErrorMsg}. ` +
-								`You can try dragging the task to the desired column.`,
-						);
-						// Don't call onSuccess since the operation wasn't fully completed
-						// but also don't throw - we want to show the specific error
-						return;
-					}
-				} else {
-					// Same column - just update the task properties
-					await updateTask(taskId, {
-						title,
-						description,
-						priority,
-						columnId: selectedColumnId,
-						assigneeId: assigneeId || null,
-					});
-				}
-			} else {
-				await createTask({
-					title,
-					description,
-					priority,
-					columnId: selectedColumnId,
-					assigneeId: assigneeId || undefined,
-				});
-			}
-			onSuccess();
-		} catch (err) {
-			setError(err instanceof Error ? err.message : "An error occurred");
+	const handleDelete = async () => {
+		if (!onDelete) return;
+		setIsDeleting(true);
+		try {
+			await onDelete();
+		} finally {
+			setIsDeleting(false);
 		}
 	};
 
 	return (
 		<form onSubmit={handleSubmit} className="space-y-4 overflow-x-hidden">
 			<div className="space-y-2">
-				<Label htmlFor="title">Title *</Label>
+				<Label htmlFor="title">
+					{localization?.taskTitle ?? t("kanban.forms.taskTitle", "Title")} *
+				</Label>
 				<Input
 					id="title"
 					value={title}
-					onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-						setTitle(e.target.value)
+					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+						setTitle(event.target.value);
+						setTitleError(null);
+					}}
+					placeholder={
+						localization?.taskTitlePlaceholder ??
+						t("kanban.forms.taskTitlePlaceholder", "e.g., Fix login bug")
 					}
-					placeholder="e.g., Fix login bug"
 					disabled={isPending}
+					aria-invalid={!!(titleError || serverTitleError)}
 				/>
+				{(titleError || serverTitleError) && (
+					<p className="text-sm text-destructive">
+						{titleError || serverTitleError}
+					</p>
+				)}
 			</div>
 
 			<div className="grid grid-cols-2 gap-4">
 				<div className="space-y-2">
-					<Label htmlFor="priority">Priority</Label>
+					<Label htmlFor="priority">
+						{localization?.taskPriority ??
+							t("kanban.forms.taskPriority", "Priority")}
+					</Label>
 					<Select
 						value={priority}
-						onValueChange={(v: string) => setPriority(v as Priority)}
+						onValueChange={(value: string) => setPriority(value as Priority)}
+						disabled={isPending}
 					>
-						<SelectTrigger>
-							<SelectValue placeholder="Select priority" />
+						<SelectTrigger id="priority" aria-invalid={!!serverPriorityError}>
+							<SelectValue
+								placeholder={
+									localization?.selectPriority ??
+									t("kanban.forms.selectPriority", "Select priority")
+								}
+							/>
 						</SelectTrigger>
 						<SelectContent>
-							{PRIORITY_OPTIONS.map((option) => (
+							{priorityOptions.map((option) => (
 								<SelectItem key={option.value} value={option.value}>
 									{option.label}
 								</SelectItem>
 							))}
 						</SelectContent>
 					</Select>
+					{serverPriorityError && (
+						<p className="text-sm text-destructive">{serverPriorityError}</p>
+					)}
 				</div>
 
 				<div className="space-y-2">
-					<Label htmlFor="column">Column</Label>
-					<Select value={selectedColumnId} onValueChange={setSelectedColumnId}>
-						<SelectTrigger>
-							<SelectValue placeholder="Select column" />
+					<Label htmlFor="column">
+						{localization?.taskColumn ?? t("kanban.forms.taskColumn", "Column")}
+					</Label>
+					<Select
+						value={selectedColumnId}
+						onValueChange={setSelectedColumnId}
+						disabled={isPending}
+					>
+						<SelectTrigger id="column" aria-invalid={!!serverColumnError}>
+							<SelectValue
+								placeholder={
+									localization?.selectColumn ??
+									t("kanban.forms.selectColumn", "Select column")
+								}
+							/>
 						</SelectTrigger>
 						<SelectContent>
-							{columns.map((col) => (
-								<SelectItem key={col.id} value={col.id}>
-									{col.title}
+							{columns.map((column) => (
+								<SelectItem key={column.id} value={column.id}>
+									{column.title}
 								</SelectItem>
 							))}
 						</SelectContent>
 					</Select>
+					{serverColumnError && (
+						<p className="text-sm text-destructive">{serverColumnError}</p>
+					)}
 				</div>
 			</div>
 
 			<div className="space-y-2">
-				<Label htmlFor="assignee">Assignee</Label>
+				<Label htmlFor="assignee">
+					{localization?.taskAssignee ??
+						t("kanban.forms.taskAssignee", "Assignee")}
+				</Label>
 				<SearchSelect
 					options={userOptions}
 					value={assigneeId}
 					onChange={setAssigneeId}
-					placeholder="Select assignee"
-					emptyMessage="No users found"
+					placeholder={
+						localization?.selectAssignee ??
+						t("kanban.forms.selectAssignee", "Select assignee")
+					}
+					emptyMessage={
+						localization?.noUsersFound ??
+						t("kanban.forms.noUsersFound", "No users found")
+					}
 				/>
+				{serverAssigneeError && (
+					<p className="text-sm text-destructive">{serverAssigneeError}</p>
+				)}
 			</div>
 
 			<div className="space-y-2">
-				<Label>Description</Label>
+				<Label>
+					{localization?.taskDescription ??
+						t("kanban.forms.taskDescription", "Description")}
+				</Label>
 				<MinimalTiptapEditor
 					value={description}
 					onChange={(value) =>
 						setDescription(typeof value === "string" ? value : "")
 					}
 					output="markdown"
-					placeholder="Describe the task..."
+					placeholder={
+						localization?.taskDescriptionPlaceholder ??
+						t("kanban.forms.taskDescriptionPlaceholder", "Describe the task...")
+					}
 					className="min-h-[150px]"
 					uploader={uploadImage}
 					imagePickerTrigger={imagePickerTrigger}
 				/>
+				{serverDescriptionError && (
+					<p className="text-sm text-destructive">{serverDescriptionError}</p>
+				)}
 			</div>
 
-			{error && (
+			{topLevelError && (
 				<div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
-					{error}
+					{topLevelError}
 				</div>
 			)}
 
 			<div className="flex justify-between pt-2">
 				<div className="flex gap-2">
 					<Button type="submit" disabled={isPending}>
-						{isPending
+						{resourceForm.isSubmitting || isMoving
 							? isEditing
-								? "Updating..."
-								: "Creating..."
+								? (localization?.updating ??
+									t("kanban.common.updating", "Updating..."))
+								: (localization?.creating ??
+									t("kanban.common.creating", "Creating..."))
 							: isEditing
-								? "Update Task"
-								: "Create Task"}
+								? (localization?.updateTask ??
+									t("kanban.forms.updateTask", "Update Task"))
+								: (localization?.createTask ??
+									t("kanban.forms.createTask", "Create Task"))}
 					</Button>
 					<Button
 						type="button"
@@ -259,19 +381,28 @@ export function TaskForm({
 						onClick={onClose}
 						disabled={isPending}
 					>
-						Cancel
+						{localization?.cancel ?? t("kanban.common.cancel", "Cancel")}
 					</Button>
 				</div>
-				{isEditing && onDelete && (
-					<Button
-						type="button"
-						variant="destructive"
-						onClick={onDelete}
-						disabled={isPending}
+				{isEditing && onDelete && taskId && (
+					<CanAccess
+						resource="kanban:task"
+						action="delete"
+						params={{ id: taskId, boardId, columnId }}
 					>
-						<Trash2 className="mr-2 h-4 w-4" />
-						Delete
-					</Button>
+						<Button
+							type="button"
+							variant="destructive"
+							onClick={handleDelete}
+							disabled={isPending}
+						>
+							<Trash2 className="mr-2 h-4 w-4" />
+							{isDeleting
+								? (localization?.deleting ??
+									t("kanban.common.deleting", "Deleting..."))
+								: (localization?.delete ?? t("kanban.common.delete", "Delete"))}
+						</Button>
+					</CanAccess>
 				)}
 			</div>
 		</form>