@tuturuuu/ui 0.8.0 → 0.9.0

package/src/components/ui/tu-do/boards/boardId/kanban/planner/planner-target-controls.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { Loader2 } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import { Combobox } from '@tuturuuu/ui/custom/combobox';
+import { Input } from '@tuturuuu/ui/input';
+import { useTranslations } from 'next-intl';
+
+type WorkspaceOption = { id: string; name: string | null };
+type BoardOption = {
+  id: string;
+  name: string | null;
+  task_lists?: Array<{ id: string; name: string | null }>;
+};
+
+interface PlannerTargetControlsProps {
+  addWorkspacePending: boolean;
+  boards: BoardOption[];
+  createItemPending: boolean;
+  lists: Array<{ id: string; name: string | null }>;
+  onAddWorkspace: () => void;
+  onCreateItem: () => void;
+  onPlannedDateChange: (value: string) => void;
+  onTargetBoardChange: (value: string) => void;
+  onTargetListChange: (value: string) => void;
+  onTargetWorkspaceChange: (value: string) => void;
+  onTaskTitleChange: (value: string) => void;
+  plannedDate: string;
+  targetBoardId: string;
+  targetIsIntended: boolean;
+  targetListId: string;
+  targetWorkspaceId: string;
+  taskTitle: string;
+  workspaces: WorkspaceOption[];
+}
+
+export function PlannerTargetControls({
+  addWorkspacePending,
+  boards,
+  createItemPending,
+  lists,
+  onAddWorkspace,
+  onCreateItem,
+  onPlannedDateChange,
+  onTargetBoardChange,
+  onTargetListChange,
+  onTargetWorkspaceChange,
+  onTaskTitleChange,
+  plannedDate,
+  targetBoardId,
+  targetIsIntended,
+  targetListId,
+  targetWorkspaceId,
+  taskTitle,
+  workspaces,
+}: PlannerTargetControlsProps) {
+  const t = useTranslations('ws-task-plans');
+  const workspaceOptions = workspaces.map((workspace) => ({
+    value: workspace.id,
+    label: workspace.name ?? t('untitled_workspace'),
+  }));
+  const boardOptions = boards.map((board) => ({
+    value: board.id,
+    label: board.name ?? t('untitled_board'),
+  }));
+  const listOptions = lists.map((list) => ({
+    value: list.id,
+    label: list.name ?? t('target_list'),
+  }));
+
+  return (
+    <div className="grid gap-2 xl:grid-cols-[minmax(0,1fr)_22rem]">
+      <div className="grid gap-2 md:grid-cols-[1fr_1fr_1fr_auto]">
+        <Combobox
+          mode="single"
+          options={workspaceOptions}
+          selected={targetWorkspaceId}
+          onChange={(value) => onTargetWorkspaceChange(value as string)}
+          placeholder={t('target_workspace')}
+          searchPlaceholder={t('target_workspace')}
+          className="[&_button]:h-9"
+        />
+        <Combobox
+          mode="single"
+          options={boardOptions}
+          selected={targetBoardId}
+          onChange={(value) => onTargetBoardChange(value as string)}
+          placeholder={t('target_board')}
+          searchPlaceholder={t('target_board')}
+          className="[&_button]:h-9"
+        />
+        <Combobox
+          mode="single"
+          options={listOptions}
+          selected={targetListId}
+          onChange={(value) => onTargetListChange(value as string)}
+          placeholder={t('target_list')}
+          searchPlaceholder={t('target_list')}
+          disabled={!targetBoardId}
+          className="[&_button]:h-9"
+        />
+        <Button
+          type="button"
+          variant={targetIsIntended ? 'secondary' : 'outline'}
+          size="sm"
+          onClick={onAddWorkspace}
+          disabled={targetIsIntended || addWorkspacePending}
+          className="h-9"
+        >
+          {targetIsIntended ? t('intended_workspace') : t('add_workspace')}
+        </Button>
+      </div>
+
+      <div className="grid gap-2 md:grid-cols-[9rem_1fr_auto] xl:grid-cols-[8rem_1fr_auto]">
+        <Input
+          type="date"
+          value={plannedDate}
+          onChange={(event) => onPlannedDateChange(event.target.value)}
+          className="h-9"
+          aria-label={t('planned_date')}
+        />
+        <Input
+          value={taskTitle}
+          onChange={(event) => onTaskTitleChange(event.target.value)}
+          placeholder={t('task_title_placeholder')}
+          className="h-9"
+        />
+        <Button
+          type="button"
+          size="sm"
+          onClick={onCreateItem}
+          disabled={!taskTitle.trim() || createItemPending}
+          className="h-9 gap-2"
+        >
+          {createItemPending && <Loader2 className="h-4 w-4 animate-spin" />}
+          {targetIsIntended && targetListId
+            ? t('create_task')
+            : t('create_draft')}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/tu-do/boards/boardId/kanban/planner/planner-utils.ts

@@ -0,0 +1,65 @@
+import type {
+  TaskPlan,
+  TaskPlanItem,
+  TaskPlanPeriod,
+  TaskPlanStatus,
+} from '@tuturuuu/internal-api';
+
+export const TASK_PLAN_PERIODS: TaskPlanPeriod[] = ['week', 'month', 'year'];
+export const TASK_PLAN_STATUSES: TaskPlanStatus[] = [
+  'draft',
+  'active',
+  'sent',
+  'archived',
+];
+
+function toDateInputValue(date: Date) {
+  return date.toISOString().slice(0, 10);
+}
+
+export function buildPlanWindow(period: TaskPlanPeriod, anchor = new Date()) {
+  const start = new Date(anchor);
+  start.setHours(0, 0, 0, 0);
+
+  const end = new Date(start);
+  if (period === 'week') {
+    const day = start.getDay();
+    const mondayOffset = day === 0 ? -6 : 1 - day;
+    start.setDate(start.getDate() + mondayOffset);
+    end.setTime(start.getTime());
+    end.setDate(start.getDate() + 6);
+  } else if (period === 'month') {
+    start.setDate(1);
+    end.setFullYear(start.getFullYear(), start.getMonth() + 1, 0);
+  } else {
+    start.setMonth(0, 1);
+    end.setFullYear(start.getFullYear(), 11, 31);
+  }
+
+  return {
+    start: toDateInputValue(start),
+    end: toDateInputValue(end),
+  };
+}
+
+export function getDefaultPlanTitle(period: TaskPlanPeriod) {
+  const window = buildPlanWindow(period);
+  return `${period[0]?.toUpperCase()}${period.slice(1)} plan ${window.start}`;
+}
+
+export function getPlanWindowLabel(
+  plan: Pick<TaskPlan, 'period_start' | 'period_end'>
+) {
+  return `${plan.period_start} -> ${plan.period_end}`;
+}
+
+export function getTaskPlanItemScope(
+  item: Pick<TaskPlanItem, 'task_id' | 'target_ws_id' | 'status'>,
+  personalWorkspaceId: string
+) {
+  if (item.status === 'draft' || !item.task_id) return 'draft';
+  if (!item.target_ws_id || item.target_ws_id === personalWorkspaceId) {
+    return 'personal';
+  }
+  return 'external';
+}

package/src/components/ui/tu-do/boards/boardId/kanban/planner/use-kanban-planner-state.ts

@@ -0,0 +1,234 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  addWorkspaceTaskPlanWorkspace,
+  createWorkspaceTaskPlan,
+  createWorkspaceTaskPlanItem,
+  isTaskPlanSchemaUnavailable,
+  listWorkspaceBoardsWithLists,
+  listWorkspaces,
+  listWorkspaceTaskPlans,
+  type TaskPlanPeriod,
+  type TaskPlanStatus,
+  updateWorkspaceTaskPlan,
+} from '@tuturuuu/internal-api';
+import { toast } from '@tuturuuu/ui/sonner';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { buildPlanWindow, getDefaultPlanTitle } from './planner-utils';
+
+interface UseKanbanPlannerStateOptions {
+  boardId: string | null;
+  enabled?: boolean;
+  isPersonalWorkspace: boolean;
+  workspaceId: string;
+}
+
+export function useKanbanPlannerState({
+  boardId,
+  enabled = true,
+  isPersonalWorkspace,
+  workspaceId,
+}: UseKanbanPlannerStateOptions) {
+  const tCommon = useTranslations('common');
+  const queryClient = useQueryClient();
+  const [mode, setMode] = useState<TaskPlanPeriod>('week');
+  const [planTitle, setPlanTitle] = useState('');
+  const [editMode, setEditMode] = useState<TaskPlanPeriod>('week');
+  const [editStatus, setEditStatus] = useState<TaskPlanStatus>('draft');
+  const [editTitle, setEditTitle] = useState('');
+  const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
+  const [targetWorkspaceId, setTargetWorkspaceId] = useState(workspaceId);
+  const [targetBoardId, setTargetBoardId] = useState(boardId ?? '');
+  const [targetListId, setTargetListId] = useState('');
+  const [taskTitle, setTaskTitle] = useState('');
+  const [plannedDate, setPlannedDate] = useState(buildPlanWindow('week').start);
+
+  const plansQueryKey = ['task-plans', workspaceId] as const;
+  const plansQuery = useQuery({
+    enabled: isPersonalWorkspace && enabled,
+    queryKey: plansQueryKey,
+    queryFn: () => listWorkspaceTaskPlans(workspaceId),
+    staleTime: 20_000,
+  });
+  const schemaUnavailable =
+    plansQuery.data && isTaskPlanSchemaUnavailable(plansQuery.data);
+  const plans = schemaUnavailable ? [] : (plansQuery.data?.plans ?? []);
+  const selectedPlan = useMemo(
+    () => plans.find((plan) => plan.id === selectedPlanId) ?? plans[0] ?? null,
+    [plans, selectedPlanId]
+  );
+
+  const workspacesQuery = useQuery({
+    enabled: isPersonalWorkspace && enabled && !schemaUnavailable,
+    queryKey: ['task-plan-workspaces'],
+    queryFn: () => listWorkspaces({ limit: 100 }),
+    staleTime: 60_000,
+  });
+  const boardsQuery = useQuery({
+    enabled: enabled && Boolean(targetWorkspaceId) && !schemaUnavailable,
+    queryKey: ['task-plan-boards-with-lists', targetWorkspaceId],
+    queryFn: () => listWorkspaceBoardsWithLists(targetWorkspaceId),
+    staleTime: 30_000,
+  });
+  const targetWorkspace = workspacesQuery.data?.find(
+    (workspace) => workspace.id === targetWorkspaceId
+  );
+  const boards = boardsQuery.data?.boards ?? [];
+  const targetBoard = boards.find((board) => board.id === targetBoardId);
+  const lists = targetBoard?.task_lists ?? [];
+  const intendedWorkspaceIds = new Set(
+    selectedPlan?.workspaces?.map((workspace) => workspace.ws_id) ?? []
+  );
+  const targetIsIntended = intendedWorkspaceIds.has(targetWorkspaceId);
+
+  useEffect(() => {
+    if (!selectedPlan) return;
+    setEditMode(selectedPlan.period_type);
+    setEditStatus(selectedPlan.status);
+    setEditTitle(selectedPlan.title);
+    setPlannedDate(selectedPlan.period_start);
+    setTargetWorkspaceId(selectedPlan.default_target_ws_id ?? workspaceId);
+    setTargetBoardId(selectedPlan.default_target_board_id ?? boardId ?? '');
+    setTargetListId(selectedPlan.default_target_list_id ?? '');
+  }, [boardId, selectedPlan, workspaceId]);
+  useEffect(() => {
+    if (!targetBoardId && boards[0]?.id) setTargetBoardId(boards[0].id);
+  }, [boards, targetBoardId]);
+  useEffect(() => {
+    if (!targetListId && lists[0]?.id) setTargetListId(lists[0].id);
+  }, [lists, targetListId]);
+
+  const createPlanMutation = useMutation({
+    mutationFn: () => {
+      const window = buildPlanWindow(mode);
+      return createWorkspaceTaskPlan(workspaceId, {
+        title: planTitle.trim() || getDefaultPlanTitle(mode),
+        period_type: mode,
+        period_start: window.start,
+        period_end: window.end,
+        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC',
+        default_target_ws_id: targetWorkspaceId,
+        default_target_board_id: targetBoardId || null,
+        default_target_list_id: targetListId || null,
+        intended_workspace_ids: [targetWorkspaceId],
+      });
+    },
+    onSuccess: (response) => {
+      if (isTaskPlanSchemaUnavailable(response)) return;
+      setSelectedPlanId(response.plan.id);
+      setPlanTitle('');
+      void queryClient.invalidateQueries({ queryKey: plansQueryKey });
+    },
+    onError: () => toast.error(tCommon('error')),
+  });
+  const updatePlanMutation = useMutation({
+    mutationFn: () => {
+      if (!selectedPlan) throw new Error('Missing plan');
+      const window = buildPlanWindow(editMode);
+      return updateWorkspaceTaskPlan(workspaceId, selectedPlan.id, {
+        title: editTitle.trim() || getDefaultPlanTitle(editMode),
+        period_type: editMode,
+        period_start: window.start,
+        period_end: window.end,
+        timezone: selectedPlan.timezone || 'UTC',
+        status: editStatus,
+        default_target_ws_id: targetWorkspaceId,
+        default_target_board_id: targetBoardId || null,
+        default_target_list_id: targetListId || null,
+      });
+    },
+    onSuccess: (response) => {
+      if (isTaskPlanSchemaUnavailable(response)) return;
+      void queryClient.invalidateQueries({ queryKey: plansQueryKey });
+    },
+    onError: () => toast.error(tCommon('error')),
+  });
+  const addWorkspaceMutation = useMutation({
+    mutationFn: () => {
+      if (!selectedPlan) throw new Error('Missing plan');
+      return addWorkspaceTaskPlanWorkspace(
+        workspaceId,
+        selectedPlan.id,
+        targetWorkspaceId
+      );
+    },
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: plansQueryKey }),
+    onError: () => toast.error(tCommon('error')),
+  });
+  const createItemMutation = useMutation({
+    mutationFn: () => {
+      if (!selectedPlan || !taskTitle.trim()) throw new Error('Missing task');
+      const createSource = Boolean(targetIsIntended && targetListId);
+      return createWorkspaceTaskPlanItem(workspaceId, selectedPlan.id, {
+        target_ws_id: createSource ? targetWorkspaceId : null,
+        target_board_id: createSource ? targetBoardId : null,
+        target_list_id: createSource ? targetListId : null,
+        planned_start: plannedDate,
+        status: createSource ? 'planned' : 'draft',
+        snapshot_title: taskTitle.trim(),
+        source_task: createSource
+          ? {
+              name: taskTitle.trim(),
+              listId: targetListId,
+              end_date: plannedDate,
+            }
+          : undefined,
+      });
+    },
+    onSuccess: (response) => {
+      if (isTaskPlanSchemaUnavailable(response)) return;
+      setTaskTitle('');
+      void queryClient.invalidateQueries({ queryKey: plansQueryKey });
+    },
+    onError: () => toast.error(tCommon('error')),
+  });
+
+  return {
+    addWorkspaceMutation,
+    boards,
+    createItemMutation,
+    createPlanMutation,
+    editMode,
+    editStatus,
+    editTitle,
+    invalidatePlans: () =>
+      queryClient.invalidateQueries({ queryKey: plansQueryKey }),
+    lists,
+    mode,
+    planTitle,
+    plannedDate,
+    plans,
+    plansQuery,
+    plansQueryKey,
+    schemaUnavailable,
+    selectedPlan,
+    setEditMode,
+    setEditStatus,
+    setEditTitle,
+    setMode,
+    setPlannedDate,
+    setPlanTitle,
+    setSelectedPlanId,
+    setTargetBoardId: (value: string) => {
+      setTargetBoardId(value);
+      setTargetListId('');
+    },
+    setTargetListId,
+    setTargetWorkspaceId: (value: string) => {
+      setTargetWorkspaceId(value);
+      setTargetBoardId('');
+      setTargetListId('');
+    },
+    setTaskTitle,
+    targetBoardId,
+    targetIsIntended,
+    targetListId,
+    targetWorkspace,
+    targetWorkspaceId,
+    taskTitle,
+    updatePlanMutation,
+    workspaces: workspacesQuery.data ?? [],
+  };
+}