@btst/stack 1.11.0 → 2.0.0

package/dist/packages/stack/src/plugins/kanban/client/components/pages/board-page.internal.cjs

@@ -0,0 +1,458 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const LucideIcons = require('lucide-react');
+const sonner = require('sonner');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const dropdownMenu = require('../../../../../../../ui/src/components/dropdown-menu.cjs');
+const dialog = require('../../../../../../../ui/src/components/dialog.cjs');
+const alertDialog = require('../../../../../../../ui/src/components/alert-dialog.cjs');
+const kanbanHooks = require('../../hooks/kanban-hooks.cjs');
+const context = require('@btst/stack/context');
+const kanbanBoard = require('../shared/kanban-board.cjs');
+const columnForm = require('../forms/column-form.cjs');
+const boardForm = require('../forms/board-form.cjs');
+const taskForm = require('../forms/task-form.cjs');
+const pageWrapper = require('../shared/page-wrapper.cjs');
+const emptyState = require('../shared/empty-state.cjs');
+
+function BoardPage({ boardId }) {
+  const { data: board, error, refetch, isFetching } = kanbanHooks.useSuspenseBoard(boardId);
+  if (error && !isFetching) {
+    throw error;
+  }
+  const { Link: OverrideLink, navigate: overrideNavigate } = context.usePluginOverrides("kanban");
+  const navigate = overrideNavigate || ((path) => {
+    window.location.href = path;
+  });
+  const Link = OverrideLink || "a";
+  const { deleteBoard, isDeleting } = kanbanHooks.useBoardMutations();
+  const { deleteColumn, reorderColumns } = kanbanHooks.useColumnMutations();
+  const { deleteTask, moveTask, reorderTasks } = kanbanHooks.useTaskMutations();
+  const [modalState, setModalState] = React.useState({ type: "none" });
+  const computeKanbanData = React.useCallback(
+    (columns) => {
+      if (!columns) return {};
+      return columns.reduce(
+        (acc, column) => {
+          acc[column.id] = column.tasks || [];
+          return acc;
+        },
+        {}
+      );
+    },
+    []
+  );
+  const [kanbanState, setKanbanState] = React.useState(() => computeKanbanData(board?.columns));
+  const serverKanbanData = React.useMemo(
+    () => computeKanbanData(board?.columns),
+    [board?.columns, computeKanbanData]
+  );
+  React.useEffect(() => {
+    setKanbanState(serverKanbanData);
+  }, [serverKanbanData]);
+  const closeModal = React.useCallback(() => {
+    setModalState({ type: "none" });
+  }, []);
+  const handleDeleteBoard = React.useCallback(async () => {
+    try {
+      await deleteBoard(boardId);
+      closeModal();
+      navigate("/pages/kanban");
+      if (typeof window !== "undefined") {
+        setTimeout(() => {
+          if (window.location.pathname.includes(boardId)) {
+            window.location.href = "/pages/kanban";
+          }
+        }, 100);
+      }
+    } catch (error2) {
+      const message = error2 instanceof Error ? error2.message : "Failed to delete board";
+      sonner.toast.error(message);
+    }
+  }, [deleteBoard, boardId, navigate, closeModal]);
+  const handleKanbanChange = React.useCallback(
+    async (newData) => {
+      if (!board) return;
+      let previousState = {};
+      setKanbanState((current) => {
+        previousState = current;
+        return newData;
+      });
+      try {
+        const oldKeys = Object.keys(previousState);
+        const newKeys = Object.keys(newData);
+        const isColumnMove = oldKeys.length === newKeys.length && oldKeys.join("") !== newKeys.join("");
+        if (isColumnMove) {
+          await reorderColumns(board.id, newKeys);
+        } else {
+          const crossColumnMoves = [];
+          const columnsToReorder = /* @__PURE__ */ new Map();
+          const targetColumnsOfCrossMove = /* @__PURE__ */ new Set();
+          for (const [columnId, tasks] of Object.entries(newData)) {
+            const oldTasks = previousState[columnId] || [];
+            let hasOrderChanges = false;
+            for (let i = 0; i < tasks.length; i++) {
+              const task = tasks[i];
+              if (!task) continue;
+              if (task.columnId !== columnId) {
+                crossColumnMoves.push({
+                  taskId: task.id,
+                  targetColumnId: columnId,
+                  targetOrder: i
+                });
+                targetColumnsOfCrossMove.add(columnId);
+              } else if (task.order !== i) {
+                hasOrderChanges = true;
+              }
+            }
+            const newTaskIds = new Set(tasks.map((t) => t.id));
+            const tasksRemoved = oldTasks.some((t) => !newTaskIds.has(t.id));
+            if (hasOrderChanges && !targetColumnsOfCrossMove.has(columnId) && !tasksRemoved) {
+              columnsToReorder.set(
+                columnId,
+                tasks.map((t) => t.id)
+              );
+            }
+          }
+          for (const move of crossColumnMoves) {
+            await moveTask(move.taskId, move.targetColumnId, move.targetOrder);
+          }
+          for (const [columnId, taskIds] of columnsToReorder) {
+            await reorderTasks(columnId, taskIds);
+          }
+          for (const targetColumnId of targetColumnsOfCrossMove) {
+            const tasks = newData[targetColumnId];
+            if (tasks) {
+              await reorderTasks(
+                targetColumnId,
+                tasks.map((t) => t.id)
+              );
+            }
+          }
+        }
+        refetch();
+      } catch (error2) {
+        refetch();
+        throw error2;
+      }
+    },
+    [board, reorderColumns, moveTask, reorderTasks, refetch]
+  );
+  const orderedColumns = React.useMemo(() => {
+    if (!board?.columns) return [];
+    const columnMap = new Map(board.columns.map((c) => [c.id, c]));
+    return Object.keys(kanbanState).map((columnId) => {
+      const column = columnMap.get(columnId);
+      if (!column) return null;
+      return {
+        ...column,
+        tasks: kanbanState[columnId] || []
+      };
+    }).filter(
+      (c) => c !== null
+    );
+  }, [board?.columns, kanbanState]);
+  if (!board) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      emptyState.EmptyState,
+      {
+        title: "Board not found",
+        description: "The board you're looking for doesn't exist or you don't have access to it.",
+        action: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { onClick: () => navigate("/pages/kanban"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ArrowLeft, { className: "mr-2 h-4 w-4" }),
+          "Back to Boards"
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    pageWrapper.PageWrapper,
+    {
+      "data-testid": "board-page",
+      className: "flex flex-col items-center",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex items-center justify-between mb-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Link,
+              {
+                href: "/pages/kanban",
+                className: "text-muted-foreground hover:text-foreground",
+                children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ArrowLeft, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold", "data-testid": "page-header", children: board.name }),
+              board.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-1", children: board.description })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { variant: "outline", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Settings, { className: "mr-2 h-4 w-4" }),
+              "Actions"
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                dropdownMenu.DropdownMenuItem,
+                {
+                  onClick: () => setModalState({ type: "addColumn" }),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "mr-2 h-4 w-4" }),
+                    "Add Column"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                dropdownMenu.DropdownMenuItem,
+                {
+                  onClick: () => setModalState({ type: "editBoard" }),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "mr-2 h-4 w-4" }),
+                    "Edit Board"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                dropdownMenu.DropdownMenuItem,
+                {
+                  onClick: () => setModalState({ type: "deleteBoard" }),
+                  className: "text-red-600 focus:text-red-600",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "mr-2 h-4 w-4" }),
+                    "Delete Board"
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        orderedColumns.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          kanbanBoard.KanbanBoard,
+          {
+            columns: orderedColumns,
+            kanbanState,
+            onKanbanChange: handleKanbanChange,
+            onAddTask: (columnId) => setModalState({ type: "addTask", columnId }),
+            onEditTask: (columnId, taskId) => setModalState({ type: "editTask", columnId, taskId }),
+            onEditColumn: (columnId) => setModalState({ type: "editColumn", columnId }),
+            onDeleteColumn: (columnId) => setModalState({ type: "deleteColumn", columnId })
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          emptyState.EmptyState,
+          {
+            title: "No columns yet",
+            description: "Create your first column to start organizing tasks.",
+            action: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { onClick: () => setModalState({ type: "addColumn" }), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "mr-2 h-4 w-4" }),
+              "Add Column"
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dialog.Dialog,
+          {
+            open: modalState.type === "addColumn",
+            onOpenChange: (open) => !open && closeModal(),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Add Column" }),
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Add a new column to this board." })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                columnForm.ColumnForm,
+                {
+                  boardId,
+                  onClose: closeModal,
+                  onSuccess: () => {
+                    closeModal();
+                    refetch();
+                  }
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dialog.Dialog,
+          {
+            open: modalState.type === "editColumn",
+            onOpenChange: (open) => !open && closeModal(),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Edit Column" }),
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Update the column details." })
+              ] }),
+              modalState.type === "editColumn" && /* @__PURE__ */ jsxRuntime.jsx(
+                columnForm.ColumnForm,
+                {
+                  boardId,
+                  columnId: modalState.columnId,
+                  column: board.columns?.find((c) => c.id === modalState.columnId),
+                  onClose: closeModal,
+                  onSuccess: () => {
+                    closeModal();
+                    refetch();
+                  }
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          alertDialog.AlertDialog,
+          {
+            open: modalState.type === "deleteColumn",
+            onOpenChange: (open) => !open && closeModal(),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: "Delete Column" }),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: "Are you sure you want to delete this column? All tasks in this column will be permanently removed." })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: "Cancel" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  alertDialog.AlertDialogAction,
+                  {
+                    onClick: async () => {
+                      if (modalState.type === "deleteColumn") {
+                        try {
+                          await deleteColumn(modalState.columnId);
+                          closeModal();
+                          refetch();
+                        } catch (error2) {
+                          const message = error2 instanceof Error ? error2.message : "Failed to delete column";
+                          sonner.toast.error(message);
+                        }
+                      }
+                    },
+                    className: "bg-red-600 hover:bg-red-700",
+                    children: "Delete"
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dialog.Dialog,
+          {
+            open: modalState.type === "editBoard",
+            onOpenChange: (open) => !open && closeModal(),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Edit Board" }),
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Update board details." })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                boardForm.BoardForm,
+                {
+                  board,
+                  onClose: closeModal,
+                  onSuccess: () => {
+                    closeModal();
+                    refetch();
+                  }
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          alertDialog.AlertDialog,
+          {
+            open: modalState.type === "deleteBoard",
+            onOpenChange: (open) => !open && closeModal(),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: "Delete Board" }),
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: "Are you sure you want to delete this board? This action cannot be undone. All columns and tasks will be permanently removed." })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: "Cancel" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    onClick: handleDeleteBoard,
+                    disabled: isDeleting,
+                    className: "bg-red-600 hover:bg-red-700",
+                    children: isDeleting ? "Deleting..." : "Delete"
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dialog.Dialog,
+          {
+            open: modalState.type === "addTask",
+            onOpenChange: (open) => !open && closeModal(),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "max-w-3xl! max-h-screen overflow-y-auto", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Add Task" }),
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Create a new task." })
+              ] }),
+              modalState.type === "addTask" && /* @__PURE__ */ jsxRuntime.jsx(
+                taskForm.TaskForm,
+                {
+                  columnId: modalState.columnId,
+                  boardId,
+                  columns: board.columns || [],
+                  onClose: closeModal,
+                  onSuccess: () => {
+                    closeModal();
+                    refetch();
+                  }
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dialog.Dialog,
+          {
+            open: modalState.type === "editTask",
+            onOpenChange: (open) => !open && closeModal(),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "max-w-3xl! max-h-screen overflow-y-auto", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Edit Task" }),
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Update task details." })
+              ] }),
+              modalState.type === "editTask" && /* @__PURE__ */ jsxRuntime.jsx(
+                taskForm.TaskForm,
+                {
+                  columnId: modalState.columnId,
+                  boardId,
+                  taskId: modalState.taskId,
+                  task: board.columns?.find((c) => c.id === modalState.columnId)?.tasks?.find((t) => t.id === modalState.taskId),
+                  columns: board.columns || [],
+                  onClose: closeModal,
+                  onSuccess: () => {
+                    closeModal();
+                    refetch();
+                  },
+                  onDelete: async () => {
+                    try {
+                      await deleteTask(modalState.taskId);
+                      closeModal();
+                      refetch();
+                    } catch (error2) {
+                      const message = error2 instanceof Error ? error2.message : "Failed to delete task";
+                      sonner.toast.error(message);
+                    }
+                  }
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.BoardPage = BoardPage;