@tuturuuu/ui 0.0.4 → 0.1.0

package/src/components/ui/tu-do/shared/task-edit-dialog/task-relationships-properties.tsx

@@ -0,0 +1,273 @@
+'use client';
+
+import {
+  ArrowUpCircle,
+  Ban,
+  ChevronDown,
+  Link2,
+  ListTree,
+  Loader2,
+} from '@tuturuuu/icons';
+import { Badge } from '@tuturuuu/ui/badge';
+import { cn } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+import * as React from 'react';
+import { TabButton } from './relationships/components/tab-button';
+import { DependenciesSection } from './relationships/dependencies-section';
+import { ParentSection } from './relationships/parent-section';
+import { RelatedSection } from './relationships/related-section';
+import { SubtasksSection } from './relationships/subtasks-section';
+import type {
+  RelationshipTab,
+  TaskRelationshipsPropertiesProps,
+} from './relationships/types/task-relationships.types';
+
+export function TaskRelationshipsProperties({
+  wsId,
+  taskId,
+  boardId,
+  listId,
+  initialActiveTab,
+  initialDependencySubTab,
+  parentTask,
+  childTasks,
+  blockingTasks,
+  blockedByTasks,
+  relatedTasks,
+  isLoading,
+  onSetParent,
+  onRemoveParent,
+  onAddBlockingTask,
+  onRemoveBlockingTask,
+  onAddBlockedByTask,
+  onRemoveBlockedByTask,
+  onAddRelatedTask,
+  onRemoveRelatedTask,
+  onNavigateToTask,
+  onAddSubtask,
+  onAddParentTask,
+  onAddBlockingTaskDialog,
+  onAddBlockedByTaskDialog,
+  onAddRelatedTaskDialog,
+  onAddExistingAsSubtask,
+  isSaving,
+  savingTaskId,
+  disabled,
+}: TaskRelationshipsPropertiesProps) {
+  const t = useTranslations();
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [activeTab, setActiveTab] = React.useState<RelationshipTab>(
+    initialActiveTab ?? 'parent'
+  );
+
+  // Tab configuration
+  const tabs = React.useMemo(
+    () => [
+      {
+        id: 'parent' as const,
+        label: t('ws-task-boards.dialog.parent'),
+        icon: <ArrowUpCircle className="h-3.5 w-3.5" />,
+        count: parentTask ? 1 : 0,
+        color: 'purple' as const,
+      },
+      {
+        id: 'subtasks' as const,
+        label: t('ws-task-boards.dialog.sub_tasks'),
+        icon: <ListTree className="h-3.5 w-3.5" />,
+        count: childTasks.length,
+        color: 'green' as const,
+      },
+      {
+        id: 'dependencies' as const,
+        label: t('ws-task-boards.dialog.dependencies'),
+        icon: <Ban className="h-3.5 w-3.5" />,
+        count: blockingTasks.length + blockedByTasks.length,
+        color: 'red' as const,
+      },
+      {
+        id: 'related' as const,
+        label: t('ws-task-boards.dialog.related'),
+        icon: <Link2 className="h-3.5 w-3.5" />,
+        count: relatedTasks.length,
+        color: 'blue' as const,
+      },
+    ],
+    [
+      parentTask,
+      childTasks.length,
+      blockingTasks.length,
+      blockedByTasks.length,
+      relatedTasks.length,
+      t,
+    ]
+  );
+
+  // Count totals for summary (derived from tabs)
+  const totalCount = tabs.reduce((sum, tab) => sum + tab.count, 0);
+  const dependencyCount = blockingTasks.length + blockedByTasks.length;
+
+  return (
+    <div className="border-b bg-linear-to-b from-muted/30 via-muted/15 to-transparent">
+      {/* Header with toggle button */}
+      <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-background/40 md:px-8"
+      >
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <ChevronDown
+            className={cn(
+              'h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200',
+              !isExpanded && '-rotate-90'
+            )}
+          />
+          <span className="shrink-0 font-semibold text-foreground text-sm">
+            {t('ws-task-boards.dialog.relationships')}
+          </span>
+
+          {/* Summary badges when collapsed */}
+          {!isExpanded && totalCount > 0 && (
+            <div className="ml-2 flex items-center gap-1.5">
+              {parentTask && (
+                <Badge
+                  variant="secondary"
+                  className="h-5 shrink-0 gap-1 rounded-full border border-dynamic-purple/30 bg-dynamic-purple/10 px-2 font-medium text-[10px] text-dynamic-purple"
+                >
+                  <ArrowUpCircle className="h-2.5 w-2.5" />
+                  {t('ws-task-boards.dialog.parent')}
+                  <span className="rounded-full bg-background/80 px-1.5 py-0.5 leading-none">
+                    1
+                  </span>
+                </Badge>
+              )}
+              {childTasks.length > 0 && (
+                <Badge
+                  variant="secondary"
+                  className="h-5 shrink-0 gap-1 rounded-full border border-dynamic-green/30 bg-dynamic-green/10 px-2 font-medium text-[10px] text-dynamic-green"
+                >
+                  <ListTree className="h-2.5 w-2.5" />
+                  {childTasks.length}
+                </Badge>
+              )}
+              {dependencyCount > 0 && (
+                <Badge
+                  variant="secondary"
+                  className="h-5 shrink-0 gap-1 rounded-full border border-dynamic-red/30 bg-dynamic-red/10 px-2 font-medium text-[10px] text-dynamic-red"
+                >
+                  <Ban className="h-2.5 w-2.5" />
+                  {dependencyCount}
+                </Badge>
+              )}
+              {relatedTasks.length > 0 && (
+                <Badge
+                  variant="secondary"
+                  className="h-5 shrink-0 gap-1 rounded-full border border-dynamic-blue/30 bg-dynamic-blue/10 px-2 font-medium text-[10px] text-dynamic-blue"
+                >
+                  <Link2 className="h-2.5 w-2.5" />
+                  {relatedTasks.length}
+                </Badge>
+              )}
+            </div>
+          )}
+        </div>
+
+        {isLoading && (
+          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+        )}
+      </button>
+
+      {/* Expandable content */}
+      {isExpanded && (
+        <div className="space-y-3 px-4 pb-4 md:px-8">
+          {/* Tab navigation */}
+          <div className="flex gap-2 overflow-x-auto rounded-full border border-border/60 bg-muted/15 p-1">
+            {tabs.map((tab) => (
+              <TabButton
+                key={tab.id}
+                active={activeTab === tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                icon={tab.icon}
+                label={tab.label}
+                count={tab.count}
+                color={tab.color}
+              />
+            ))}
+          </div>
+
+          {/* Tab content */}
+          <div className="min-h-30 rounded-2xl border border-border/60 bg-background/70 p-3 md:p-4">
+            {activeTab === 'parent' && (
+              <ParentSection
+                wsId={wsId}
+                taskId={taskId}
+                parentTask={parentTask}
+                childTaskIds={childTasks.map((t) => t.id)}
+                isSaving={isSaving}
+                savingTaskId={savingTaskId}
+                onSetParent={onSetParent}
+                onRemoveParent={onRemoveParent}
+                onNavigateToTask={onNavigateToTask}
+                onAddParentTask={onAddParentTask}
+                disabled={disabled}
+              />
+            )}
+
+            {activeTab === 'subtasks' && (
+              <SubtasksSection
+                wsId={wsId}
+                taskId={taskId}
+                boardId={boardId}
+                listId={listId}
+                parentTaskId={parentTask?.id ?? null}
+                childTasks={childTasks}
+                onNavigateToTask={onNavigateToTask}
+                onAddSubtask={onAddSubtask}
+                onAddExistingAsSubtask={onAddExistingAsSubtask}
+                isSaving={isSaving}
+                disabled={disabled}
+              />
+            )}
+
+            {activeTab === 'dependencies' && (
+              <DependenciesSection
+                wsId={wsId}
+                taskId={taskId}
+                initialSubTab={initialDependencySubTab}
+                blockingTasks={blockingTasks}
+                blockedByTasks={blockedByTasks}
+                isSaving={isSaving}
+                savingTaskId={savingTaskId}
+                onAddBlocking={onAddBlockingTask}
+                onRemoveBlocking={onRemoveBlockingTask}
+                onAddBlockedBy={onAddBlockedByTask}
+                onRemoveBlockedBy={onRemoveBlockedByTask}
+                onNavigateToTask={onNavigateToTask}
+                onAddBlockingTaskDialog={onAddBlockingTaskDialog}
+                onAddBlockedByTaskDialog={onAddBlockedByTaskDialog}
+                disabled={disabled}
+              />
+            )}
+
+            {activeTab === 'related' && (
+              <RelatedSection
+                wsId={wsId}
+                taskId={taskId}
+                relatedTasks={relatedTasks}
+                isSaving={isSaving}
+                savingTaskId={savingTaskId}
+                onAddRelated={onAddRelatedTask}
+                onRemoveRelated={onRemoveRelatedTask}
+                onNavigateToTask={onNavigateToTask}
+                onAddRelatedTaskDialog={onAddRelatedTaskDialog}
+                disabled={disabled}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Re-export types for backward compatibility
+export type { TaskRelationshipsPropertiesProps } from './relationships/types/task-relationships.types';

package/src/components/ui/tu-do/shared/task-edit-dialog/task-snapshot-dialog.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import { History, Loader2 } from '@tuturuuu/icons';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import { ScrollArea } from '@tuturuuu/ui/scroll-area';
+import type { CurrentTaskState } from '@tuturuuu/utils/task-snapshot';
+import { format, formatDistanceToNow } from 'date-fns';
+import { enUS, vi } from 'date-fns/locale';
+import type { EstimationType } from '../estimation-mapping';
+import type { RevertibleField } from './hooks/use-task-revert';
+import { useTaskRevert } from './hooks/use-task-revert';
+import { useTaskSnapshot } from './hooks/use-task-snapshot';
+import { SelectiveRevertPanel } from './selective-revert-panel';
+import type { TaskHistoryEntry } from './task-activity-section';
+
+interface TaskSnapshotDialogProps {
+  wsId: string;
+  taskId: string;
+  boardId: string;
+  historyEntry: TaskHistoryEntry;
+  currentTask: CurrentTaskState;
+  isOpen: boolean;
+  onClose: () => void;
+  onRevertSuccess?: () => void;
+  locale?: string;
+  t?: (key: string, options?: { defaultValue?: string }) => string;
+  /** Estimation type for displaying points */
+  estimationType?: EstimationType;
+  /** When true, disables the revert functionality (feature not stable) */
+  revertDisabled?: boolean;
+}
+
+const defaultT = (key: string, opts?: { defaultValue?: string }) =>
+  opts?.defaultValue || key;
+
+export function TaskSnapshotDialog({
+  wsId,
+  taskId,
+  boardId,
+  historyEntry,
+  currentTask,
+  isOpen,
+  onClose,
+  onRevertSuccess,
+  locale = 'en',
+  t = defaultT,
+  estimationType,
+  revertDisabled = false,
+}: TaskSnapshotDialogProps) {
+  const dateLocale = locale === 'vi' ? vi : enUS;
+
+  // Fetch the snapshot at this history point
+  const {
+    data: snapshotData,
+    isLoading,
+    error,
+  } = useTaskSnapshot({
+    wsId,
+    taskId,
+    historyId: historyEntry.id,
+    enabled: isOpen,
+  });
+
+  // Revert mutation
+  const revertMutation = useTaskRevert({
+    wsId,
+    taskId,
+    boardId,
+    onSuccess: () => {
+      onRevertSuccess?.();
+      onClose();
+    },
+    t,
+  });
+
+  const handleRevert = async (fields: RevertibleField[]) => {
+    await revertMutation.mutateAsync({
+      historyId: historyEntry.id,
+      fields,
+    });
+  };
+
+  const timeAgo = formatDistanceToNow(new Date(historyEntry.changed_at), {
+    addSuffix: true,
+    locale: dateLocale,
+  });
+
+  const exactTime = format(new Date(historyEntry.changed_at), 'PPpp', {
+    locale: dateLocale,
+  });
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="grid max-h-[85vh] w-full max-w-2xl grid-rows-[auto_1fr] overflow-hidden md:max-w-3xl lg:max-w-4xl">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-dynamic-purple/10">
+              <History className="h-4 w-4 text-dynamic-purple" />
+            </div>
+            <div>
+              <DialogTitle>
+                {t('snapshot_title', { defaultValue: 'Task Snapshot' })}
+              </DialogTitle>
+              <DialogDescription className="text-xs">
+                <span title={exactTime}>{timeAgo}</span>
+                {' - '}
+                {historyEntry.user?.name ||
+                  t('unknown_user', { defaultValue: 'Unknown user' })}
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="min-h-0 overflow-hidden">
+          <ScrollArea className="-mx-6 h-full px-6">
+            <div className="py-4">
+              {isLoading ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : error ? (
+                <div className="py-8 text-center">
+                  <p className="text-destructive text-sm">
+                    {t('error_loading', {
+                      defaultValue: 'Failed to load snapshot',
+                    })}
+                  </p>
+                  <p className="mt-1 text-muted-foreground text-xs">
+                    {error.message}
+                  </p>
+                </div>
+              ) : snapshotData?.snapshot ? (
+                <SelectiveRevertPanel
+                  snapshot={snapshotData.snapshot}
+                  currentTask={currentTask}
+                  onRevert={handleRevert}
+                  isReverting={revertMutation.isPending}
+                  locale={locale}
+                  t={t}
+                  estimationType={estimationType}
+                  revertDisabled={revertDisabled}
+                />
+              ) : (
+                <div className="py-8 text-center text-muted-foreground text-sm">
+                  {t('no_snapshot', {
+                    defaultValue: 'No snapshot data available',
+                  })}
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/tu-do/shared/task-edit-dialog/types/pending-relationship.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest';
+import { getSeededPendingTaskRelationships } from './pending-relationship';
+
+describe('getSeededPendingTaskRelationships', () => {
+  it('seeds the parent tab for legacy subtask creation', () => {
+    expect(
+      getSeededPendingTaskRelationships({
+        parentTaskId: 'task-parent',
+        parentTaskName: 'Parent task',
+      })
+    ).toMatchObject({
+      parentTask: {
+        id: 'task-parent',
+        name: 'Parent task',
+      },
+      childTasks: [],
+      initialActiveTab: 'parent',
+    });
+  });
+
+  it('seeds the subtasks tab when creating a new parent task', () => {
+    expect(
+      getSeededPendingTaskRelationships({
+        pendingRelationship: {
+          type: 'parent',
+          relatedTaskId: 'task-child',
+          relatedTaskName: 'Child task',
+        },
+      })
+    ).toMatchObject({
+      parentTask: null,
+      childTasks: [{ id: 'task-child', name: 'Child task' }],
+      initialActiveTab: 'subtasks',
+    });
+  });
+
+  it('seeds the dependencies tab and blocked-by subtab for blocking flows', () => {
+    expect(
+      getSeededPendingTaskRelationships({
+        pendingRelationship: {
+          type: 'blocking',
+          relatedTaskId: 'task-blocker',
+          relatedTaskName: 'Blocking task',
+        },
+      })
+    ).toMatchObject({
+      blockedByTasks: [{ id: 'task-blocker', name: 'Blocking task' }],
+      initialActiveTab: 'dependencies',
+      initialDependencySubTab: 'blocked-by',
+    });
+  });
+});

package/src/components/ui/tu-do/shared/task-edit-dialog/types/pending-relationship.ts

@@ -0,0 +1,134 @@
+import type { RelatedTaskInfo } from '@tuturuuu/types/primitives/TaskRelationship';
+
+/**
+ * Relationship types for creating tasks with relationships
+ *
+ * These types define how new tasks can be related to existing tasks during creation.
+ * - subtask: New task will be a subtask of relatedTaskId
+ * - parent: New task will be the parent of relatedTaskId
+ * - blocking: New task will be blocked by relatedTaskId (relatedTask blocks newTask)
+ * - blocked-by: New task will block relatedTaskId (newTask blocks relatedTask)
+ * - related: New task will be related to relatedTaskId
+ */
+export type PendingRelationshipType =
+  | 'subtask'
+  | 'parent'
+  | 'blocking'
+  | 'blocked-by'
+  | 'related';
+
+/**
+ * Pending relationship object containing type and related task information
+ */
+export interface PendingRelationship {
+  type: PendingRelationshipType;
+  relatedTaskId: string;
+  relatedTaskName: string;
+}
+
+export interface PendingTaskRelationships {
+  parentTask: RelatedTaskInfo | null;
+  childTasks: RelatedTaskInfo[];
+  blockingTasks: RelatedTaskInfo[];
+  blockedByTasks: RelatedTaskInfo[];
+  relatedTasks: RelatedTaskInfo[];
+  initialActiveTab?: 'parent' | 'subtasks' | 'dependencies' | 'related';
+  initialDependencySubTab?: 'blocks' | 'blocked-by';
+}
+
+function createSeedTaskInfo(
+  id: string,
+  name: string | null | undefined
+): RelatedTaskInfo {
+  return {
+    id,
+    name: name?.trim() || id,
+  };
+}
+
+export function getSeededPendingTaskRelationships({
+  parentTaskId,
+  parentTaskName,
+  pendingRelationship,
+}: {
+  parentTaskId?: string | null;
+  parentTaskName?: string | null;
+  pendingRelationship?: PendingRelationship | null;
+}): PendingTaskRelationships {
+  if (parentTaskId) {
+    return {
+      parentTask: createSeedTaskInfo(parentTaskId, parentTaskName),
+      childTasks: [],
+      blockingTasks: [],
+      blockedByTasks: [],
+      relatedTasks: [],
+      initialActiveTab: 'parent',
+    };
+  }
+
+  if (!pendingRelationship?.relatedTaskId) {
+    return {
+      parentTask: null,
+      childTasks: [],
+      blockingTasks: [],
+      blockedByTasks: [],
+      relatedTasks: [],
+      initialActiveTab: 'parent',
+    };
+  }
+
+  const relatedTask = createSeedTaskInfo(
+    pendingRelationship.relatedTaskId,
+    pendingRelationship.relatedTaskName
+  );
+
+  switch (pendingRelationship.type) {
+    case 'subtask':
+      return {
+        parentTask: relatedTask,
+        childTasks: [],
+        blockingTasks: [],
+        blockedByTasks: [],
+        relatedTasks: [],
+        initialActiveTab: 'parent',
+      };
+    case 'parent':
+      return {
+        parentTask: null,
+        childTasks: [relatedTask],
+        blockingTasks: [],
+        blockedByTasks: [],
+        relatedTasks: [],
+        initialActiveTab: 'subtasks',
+      };
+    case 'blocking':
+      return {
+        parentTask: null,
+        childTasks: [],
+        blockingTasks: [],
+        blockedByTasks: [relatedTask],
+        relatedTasks: [],
+        initialActiveTab: 'dependencies',
+        initialDependencySubTab: 'blocked-by',
+      };
+    case 'blocked-by':
+      return {
+        parentTask: null,
+        childTasks: [],
+        blockingTasks: [relatedTask],
+        blockedByTasks: [],
+        relatedTasks: [],
+        initialActiveTab: 'dependencies',
+        initialDependencySubTab: 'blocks',
+      };
+    case 'related':
+      return {
+        parentTask: null,
+        childTasks: [],
+        blockingTasks: [],
+        blockedByTasks: [],
+        relatedTasks: [relatedTask],
+        initialActiveTab: 'related',
+      };
+  }
+}

package/src/components/ui/tu-do/shared/task-edit-dialog/types.ts

@@ -0,0 +1,64 @@
+import type { Editor, JSONContent } from '@tiptap/react';
+import type {
+  InternalApiWorkspaceMember,
+  TaskLabelSummary,
+  TaskProject,
+} from '@tuturuuu/types/db';
+import type { TaskPriority } from '@tuturuuu/types/primitives/Priority';
+import type { CalendarHoursType, Task } from '@tuturuuu/types/primitives/Task';
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import type { TaskFilters } from '../types';
+
+export type WorkspaceTaskAssignee = InternalApiWorkspaceMember;
+export type WorkspaceTaskProject = Pick<TaskProject, 'id' | 'name' | 'status'>;
+
+export interface TaskEditDialogProps {
+  wsId: string;
+  task?: Task;
+  boardId: string;
+  isOpen: boolean;
+  availableLists?: TaskList[];
+  filters?: TaskFilters;
+  mode?: 'edit' | 'create';
+  collaborationMode?: boolean;
+  isPersonalWorkspace?: boolean;
+  currentUser?: {
+    id: string;
+    display_name?: string | null;
+    full_name?: string | null;
+    email?: string | null;
+    avatar_url?: string | null;
+  };
+  onClose: () => void;
+  onUpdate: () => void;
+}
+
+export type WorkspaceTaskLabel = TaskLabelSummary;
+
+export interface TaskFormState {
+  name: string;
+  description: JSONContent | null;
+  priority: TaskPriority | null;
+  startDate: Date | undefined;
+  endDate: Date | undefined;
+  selectedListId: string;
+  estimationPoints: number | null | undefined;
+  selectedLabels: WorkspaceTaskLabel[];
+  selectedAssignees: WorkspaceTaskAssignee[];
+  selectedProjects: WorkspaceTaskProject[];
+  // Scheduling fields
+  totalDuration: number | null;
+  isSplittable: boolean;
+  minSplitDurationMinutes: number | null;
+  maxSplitDurationMinutes: number | null;
+  calendarHours: CalendarHoursType | null;
+  autoSchedule: boolean;
+}
+
+export interface EditorCallbacks {
+  flushEditorPendingRef: React.MutableRefObject<
+    (() => JSONContent | null) | undefined
+  >;
+  handleImageUpload: (file: File) => Promise<string>;
+  handleEditorReady: (editor: Editor) => void;
+}