@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/tu-do/boards/boardId/kanban/bulk/bulk-actions-menu.tsx

@@ -0,0 +1,689 @@
+'use client';
+
+import {
+  Box,
+  Calendar,
+  Check,
+  CheckCircle2,
+  CircleDashed,
+  CircleFadingArrowUpIcon,
+  CircleSlash,
+  Flag,
+  horseHead,
+  Icon,
+  List,
+  Move,
+  Plus,
+  Rabbit,
+  Tags,
+  Timer,
+  Trash2,
+  Turtle,
+  UserStar,
+  unicornHead,
+  X,
+} from '@tuturuuu/icons';
+import type { Workspace } from '@tuturuuu/types';
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from '@tuturuuu/ui/dropdown-menu';
+import type { WorkspaceMember } from '@tuturuuu/ui/hooks/use-workspace-members';
+import { toast } from '@tuturuuu/ui/sonner';
+import type { BoardConfig } from '@tuturuuu/utils/task-helper';
+import { useTranslations } from 'next-intl';
+import { mapEstimationPoints } from '../../../../shared/estimation-mapping';
+import { TaskResourceSearchField } from '../../../../shared/task-resource-search-field';
+import type {
+  KanbanFilteredLabel,
+  KanbanFilteredProject,
+} from '../data/use-filtered-resources';
+
+interface BulkActionsMenuProps {
+  workspace: Workspace;
+  boardConfig: BoardConfig | null | undefined;
+  columns: TaskList[];
+  bulkWorking: boolean;
+  estimationOptions: number[];
+  appliedSets: {
+    labels: Set<string>;
+    projects: Set<string>;
+    assignees: Set<string>;
+  };
+  filtered: {
+    labels: KanbanFilteredLabel[];
+    projects: KanbanFilteredProject[];
+    members: WorkspaceMember[];
+  };
+  search: {
+    labelQuery: string;
+    setLabelQuery: (q: string) => void;
+    projectQuery: string;
+    setProjectQuery: (q: string) => void;
+    assigneeQuery: string;
+    setAssigneeQuery: (q: string) => void;
+  };
+  actions: {
+    bulkMoveToStatus: (status: string) => void;
+    bulkUpdatePriority: (priority: string | null) => void;
+    bulkUpdateDueDate: (type: string) => void;
+    bulkUpdateEstimation: (points: number | null) => void;
+    bulkAddLabel: (id: string) => void;
+    bulkRemoveLabel: (id: string) => void;
+    bulkClearLabels: () => void;
+    bulkAddProject: (id: string) => void;
+    bulkRemoveProject: (id: string) => void;
+    bulkClearProjects: () => void;
+    bulkMoveToList: (listId: string, listName: string) => void;
+    bulkAddAssignee: (id: string) => void;
+    bulkRemoveAssignee: (id: string) => void;
+    bulkClearAssignees: () => void;
+  };
+  onOpenCustomDate: () => void;
+  onConfirmDelete: () => void;
+}
+
+export function BulkActionsMenu({
+  workspace,
+  boardConfig,
+  columns,
+  bulkWorking,
+  estimationOptions,
+  appliedSets,
+  filtered,
+  search,
+  actions,
+  onOpenCustomDate,
+  onConfirmDelete,
+}: BulkActionsMenuProps) {
+  const t = useTranslations();
+  const tc = useTranslations('common');
+
+  return (
+    <DropdownMenuContent
+      align="end"
+      className="w-56"
+      sideOffset={5}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      {/* Quick Completion Actions */}
+      {columns.some((c) => c.status === 'done') && (
+        <DropdownMenuItem
+          disabled={bulkWorking}
+          onClick={() => actions.bulkMoveToStatus('done')}
+          className="cursor-pointer"
+        >
+          <CheckCircle2 className="h-4 w-4 text-dynamic-green" />
+          {t('common.mark_as_done')}
+        </DropdownMenuItem>
+      )}
+      {columns.some((c) => c.status === 'closed') && (
+        <DropdownMenuItem
+          disabled={bulkWorking}
+          onClick={() => actions.bulkMoveToStatus('closed')}
+          className="cursor-pointer"
+        >
+          <CircleSlash className="h-4 w-4 text-dynamic-purple" />
+          {t('common.mark_as_closed')}
+        </DropdownMenuItem>
+      )}
+      {(columns.some((c) => c.status === 'done') ||
+        columns.some((c) => c.status === 'closed')) && (
+        <DropdownMenuSeparator />
+      )}
+
+      {/* Priority Menu */}
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>
+          <Flag className="h-4 w-4 text-dynamic-red" />
+          {t('common.priority')}
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent className="w-40">
+          <DropdownMenuItem
+            disabled={bulkWorking}
+            onClick={() => actions.bulkUpdatePriority('critical')}
+            className="cursor-pointer"
+          >
+            <div className="flex items-center gap-2">
+              <div className="flex h-5 w-5 items-center justify-center rounded bg-dynamic-red/10">
+                <Icon
+                  iconNode={unicornHead}
+                  className="h-3.5 w-3.5 text-dynamic-red"
+                />
+              </div>
+              <span>{t('tasks.priority_critical')}</span>
+            </div>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={bulkWorking}
+            onClick={() => actions.bulkUpdatePriority('high')}
+            className="cursor-pointer"
+          >
+            <div className="flex items-center gap-2">
+              <div className="flex h-5 w-5 items-center justify-center rounded bg-dynamic-orange/10">
+                <Icon
+                  iconNode={horseHead}
+                  className="h-3.5 w-3.5 text-dynamic-orange"
+                />
+              </div>
+              <span>{t('tasks.priority_high')}</span>
+            </div>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={bulkWorking}
+            onClick={() => actions.bulkUpdatePriority('normal')}
+            className="cursor-pointer"
+          >
+            <div className="flex items-center gap-2">
+              <div className="flex h-5 w-5 items-center justify-center rounded bg-dynamic-yellow/10">
+                <Rabbit className="h-3.5 w-3.5 text-dynamic-yellow" />
+              </div>
+              <span>{t('tasks.priority_normal')}</span>
+            </div>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={bulkWorking}
+            onClick={() => actions.bulkUpdatePriority('low')}
+            className="cursor-pointer"
+          >
+            <div className="flex items-center gap-2">
+              <div className="flex h-5 w-5 items-center justify-center rounded bg-dynamic-blue/10">
+                <Turtle className="h-3.5 w-3.5 text-dynamic-blue" />
+              </div>
+              <span>{t('tasks.priority_low')}</span>
+            </div>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            disabled={bulkWorking}
+            onClick={() => actions.bulkUpdatePriority(null)}
+            className="cursor-pointer text-muted-foreground"
+          >
+            <X className="h-4 w-4" />
+            {t('tasks.priority_none')}
+          </DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+
+      {/* Due Date Menu */}
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>
+          <div className="h-4 w-4">
+            <Calendar className="h-4 w-4 text-dynamic-purple" />
+          </div>
+          <div className="flex w-full items-center justify-between">
+            <span>{tc('due_date')}</span>
+          </div>
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent>
+          <DropdownMenuItem
+            disabled={bulkWorking}
+            onClick={() => actions.bulkUpdateDueDate('today')}
+            className="cursor-pointer"
+          >
+            <Calendar className="h-4 w-4 text-dynamic-green" />
+            {t('common.today')}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={bulkWorking}
+            onClick={() => actions.bulkUpdateDueDate('tomorrow')}
+            className="cursor-pointer"
+          >
+            <Calendar className="h-4 w-4 text-dynamic-blue" />
+            {t('common.tomorrow')}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={bulkWorking}
+            onClick={() => actions.bulkUpdateDueDate('this_week')}
+            className="cursor-pointer"
+          >
+            <Calendar className="h-4 w-4 text-dynamic-purple" />
+            {t('common.this_week')}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={bulkWorking}
+            onClick={() => actions.bulkUpdateDueDate('next_week')}
+            className="cursor-pointer"
+          >
+            <Calendar className="h-4 w-4 text-dynamic-orange" />
+            {t('common.next_week')}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            disabled={bulkWorking}
+            onClick={onOpenCustomDate}
+            className="cursor-pointer"
+          >
+            <Calendar className="h-4 w-4" />
+            {t('ws-task-boards.bulk.set_custom_due_date')}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            disabled={bulkWorking}
+            onClick={() => actions.bulkUpdateDueDate('clear')}
+            className="cursor-pointer text-muted-foreground"
+          >
+            <X className="h-4 w-4" />
+            {t('common.remove_due_date')}
+          </DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+
+      {/* Estimation Menu */}
+      {boardConfig?.estimation_type && (
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Timer className="h-4 w-4 text-dynamic-pink" />
+            {t('common.estimation')}
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent className="w-40">
+            <div className="max-h-50 overflow-auto">
+              <div className="p-1">
+                {estimationOptions.map((idx) => {
+                  const disabledByExtended =
+                    !boardConfig?.extended_estimation && idx > 5;
+                  const label = mapEstimationPoints(
+                    idx,
+                    boardConfig?.estimation_type
+                  );
+
+                  return (
+                    <DropdownMenuItem
+                      key={idx}
+                      disabled={bulkWorking || disabledByExtended}
+                      onClick={() => actions.bulkUpdateEstimation(idx)}
+                      className="flex cursor-pointer items-center justify-between"
+                    >
+                      <div className="flex items-center gap-2">
+                        <Timer className="h-4 w-4 text-dynamic-pink" />
+                        <span>
+                          {label}
+                          {disabledByExtended && (
+                            <span className="ml-1 text-[10px] text-muted-foreground/60">
+                              ({t('common.upgrade')})
+                            </span>
+                          )}
+                        </span>
+                      </div>
+                    </DropdownMenuItem>
+                  );
+                })}
+              </div>
+            </div>
+            <div className="border-t bg-background">
+              <DropdownMenuItem
+                disabled={bulkWorking}
+                onClick={() => actions.bulkUpdateEstimation(null)}
+                className="cursor-pointer text-muted-foreground"
+              >
+                <X className="h-4 w-4" />
+                {t('common.none')}
+              </DropdownMenuItem>
+            </div>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      )}
+
+      {/* Labels Menu */}
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>
+          <Tags className="h-4 w-4 text-dynamic-sky" />
+          {t('common.labels')}
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent className="w-80 p-0">
+          <TaskResourceSearchField
+            value={search.labelQuery}
+            onChange={search.setLabelQuery}
+            placeholder={t('common.search_labels')}
+          />
+
+          {filtered.labels.length === 0 ? (
+            <div className="px-2 py-6 text-center text-muted-foreground text-xs">
+              {search.labelQuery
+                ? t('common.no_labels_found')
+                : t('common.no_labels_available')}
+            </div>
+          ) : (
+            <div className="max-h-50 overflow-auto">
+              <div className="flex flex-col gap-1 p-1">
+                {filtered.labels.slice(0, 50).map((label) => {
+                  const isApplied = appliedSets.labels.has(label.id);
+                  return (
+                    <DropdownMenuItem
+                      key={label.id}
+                      disabled={bulkWorking}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        if (isApplied) {
+                          actions.bulkRemoveLabel(label.id);
+                        } else {
+                          actions.bulkAddLabel(label.id);
+                        }
+                      }}
+                      className={`flex cursor-pointer items-center justify-between gap-2 ${
+                        isApplied ? 'bg-dynamic-sky/10 text-dynamic-sky' : ''
+                      }`}
+                    >
+                      <div className="flex min-w-0 flex-1 items-center gap-2">
+                        <span
+                          className="h-3 w-3 shrink-0 rounded-full"
+                          style={{
+                            backgroundColor: label.color,
+                            opacity: 0.9,
+                          }}
+                        />
+                        <span className="truncate text-sm">{label.name}</span>
+                      </div>
+                      {isApplied && <Check className="h-4 w-4 shrink-0" />}
+                    </DropdownMenuItem>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {appliedSets.labels.size > 0 && (
+            <div className="relative z-10 border-t bg-background shadow-sm">
+              <div className="px-2 pt-1 pb-1 text-[10px] text-muted-foreground">
+                {t('ws-task-boards.bulk.applied_to_all', {
+                  count: appliedSets.labels.size,
+                })}
+              </div>
+            </div>
+          )}
+
+          <div className="border-t">
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.preventDefault();
+                toast.info(tc('feature_coming_soon'));
+              }}
+              className="cursor-pointer text-muted-foreground hover:text-foreground"
+            >
+              <Plus className="h-4 w-4" />
+              {tc('create_new_label')}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              disabled={bulkWorking}
+              onClick={(e) => {
+                e.preventDefault();
+                actions.bulkClearLabels();
+              }}
+              className="cursor-pointer text-dynamic-red hover:text-dynamic-red"
+            >
+              <X className="h-4 w-4" />
+              {t('ws-task-boards.bulk.clear_all_labels')}
+            </DropdownMenuItem>
+          </div>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+
+      {/* Projects Menu */}
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>
+          <Box className="h-4 w-4 text-dynamic-sky" />
+          {tc('projects')}
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent className="w-80 p-0">
+          <TaskResourceSearchField
+            value={search.projectQuery}
+            onChange={search.setProjectQuery}
+            placeholder={tc('search_projects')}
+          />
+
+          {filtered.projects.length === 0 ? (
+            <div className="px-2 py-6 text-center text-muted-foreground text-xs">
+              {search.projectQuery
+                ? tc('no_projects_found')
+                : tc('no_projects_available')}
+            </div>
+          ) : (
+            <div className="max-h-50 overflow-auto">
+              <div className="flex flex-col gap-1 p-1">
+                {filtered.projects.slice(0, 50).map((project) => {
+                  const isApplied = appliedSets.projects.has(project.id);
+                  return (
+                    <DropdownMenuItem
+                      key={project.id}
+                      disabled={bulkWorking}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        if (isApplied) {
+                          actions.bulkRemoveProject(project.id);
+                        } else {
+                          actions.bulkAddProject(project.id);
+                        }
+                      }}
+                      className={`flex cursor-pointer items-center justify-between gap-2 ${
+                        isApplied ? 'bg-dynamic-sky/10 text-dynamic-sky' : ''
+                      }`}
+                    >
+                      <div className="flex min-w-0 flex-1 items-center gap-2">
+                        <Box className="h-3 w-3 shrink-0 text-dynamic-sky" />
+                        <span className="truncate text-sm">{project.name}</span>
+                      </div>
+                      {isApplied && <Check className="h-4 w-4 shrink-0" />}
+                    </DropdownMenuItem>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {appliedSets.projects.size > 0 && (
+            <div className="relative z-10 border-t bg-background shadow-sm">
+              <div className="px-2 pt-1 pb-1 text-[10px] text-muted-foreground">
+                {t('ws-task-boards.bulk.applied_to_all', {
+                  count: appliedSets.projects.size,
+                })}
+              </div>
+            </div>
+          )}
+
+          <div className="border-t">
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.preventDefault();
+                toast.info('Create project feature coming soon');
+              }}
+              className="cursor-pointer text-muted-foreground hover:text-foreground"
+            >
+              <Plus className="h-4 w-4" />
+              {t('common.create_new_project')}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              disabled={bulkWorking}
+              onClick={(e) => {
+                e.preventDefault();
+                actions.bulkClearProjects();
+              }}
+              className="cursor-pointer text-dynamic-red hover:text-dynamic-red"
+            >
+              <X className="h-4 w-4" />
+              {t('ws-task-boards.bulk.clear_all_projects')}
+            </DropdownMenuItem>
+          </div>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+
+      <DropdownMenuSeparator />
+
+      {/* Move Menu */}
+      {columns.length > 1 && (
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Move className="h-4 w-4 text-dynamic-blue" />
+            {t('common.move_to_list')}
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent className="max-h-100 w-56 overflow-hidden p-0">
+            <div className="max-h-50 overflow-auto">
+              <div className="p-1">
+                {columns.map((list) => {
+                  const getStatusIcon = (status: string) => {
+                    switch (status) {
+                      case 'done':
+                        return CheckCircle2;
+                      case 'closed':
+                        return CircleSlash;
+                      case 'not_started':
+                        return CircleDashed;
+                      case 'active':
+                        return CircleFadingArrowUpIcon;
+                      default:
+                        return List;
+                    }
+                  };
+
+                  const getStatusColor = (status: string) => {
+                    switch (status) {
+                      case 'done':
+                        return 'text-dynamic-green';
+                      case 'closed':
+                        return 'text-dynamic-purple';
+                      case 'active':
+                        return 'text-dynamic-blue';
+                      default:
+                        return 'opacity-70';
+                    }
+                  };
+
+                  const StatusIcon = getStatusIcon(list.status);
+                  const statusColor = getStatusColor(list.status);
+
+                  return (
+                    <DropdownMenuItem
+                      key={list.id}
+                      disabled={bulkWorking}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        actions.bulkMoveToList(list.id, list.name);
+                      }}
+                      className="cursor-pointer"
+                    >
+                      <div className="flex w-full items-center justify-between">
+                        <div className="flex items-center gap-3">
+                          <StatusIcon className={`h-4 w-4 ${statusColor}`} />
+                          {list.name}
+                        </div>
+                      </div>
+                    </DropdownMenuItem>
+                  );
+                })}
+              </div>
+            </div>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      )}
+
+      {/* Assignees Menu */}
+      {!workspace.personal && (
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <UserStar className="h-4 w-4 text-dynamic-yellow" />
+            {t('common.assignees')}
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent className="w-80 p-0">
+            <TaskResourceSearchField
+              value={search.assigneeQuery}
+              onChange={search.setAssigneeQuery}
+              placeholder={tc('search_members')}
+            />
+
+            {filtered.members.length === 0 ? (
+              <div className="px-2 py-6 text-center text-muted-foreground text-xs">
+                {search.assigneeQuery
+                  ? tc('no_members_found')
+                  : tc('no_members_available')}
+              </div>
+            ) : (
+              <div className="max-h-37.5 overflow-auto">
+                <div className="flex flex-col gap-1 p-1">
+                  {filtered.members.slice(0, 50).map((member) => {
+                    const isApplied = appliedSets.assignees.has(member.id);
+                    return (
+                      <DropdownMenuItem
+                        key={member.id}
+                        disabled={bulkWorking}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          if (isApplied) {
+                            actions.bulkRemoveAssignee(member.id);
+                          } else {
+                            actions.bulkAddAssignee(member.id);
+                          }
+                        }}
+                        className={`flex cursor-pointer items-center justify-between gap-2 ${
+                          isApplied
+                            ? 'bg-dynamic-yellow/10 text-dynamic-yellow'
+                            : ''
+                        }`}
+                      >
+                        <div className="flex min-w-0 flex-1 items-center gap-2">
+                          <Avatar className="h-4 w-4 shrink-0">
+                            <AvatarImage src={member.avatar_url} />
+                            <AvatarFallback className="bg-muted font-semibold text-[9px]">
+                              {member.display_name?.[0] ||
+                                member.email?.[0] ||
+                                '?'}
+                            </AvatarFallback>
+                          </Avatar>
+                          <span className="truncate text-sm">
+                            {member.display_name || member.email}
+                          </span>
+                        </div>
+                        {isApplied && <Check className="h-4 w-4 shrink-0" />}
+                      </DropdownMenuItem>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
+            {appliedSets.assignees.size > 0 && (
+              <div className="relative z-10 border-t bg-background shadow-sm">
+                <div className="px-2 pt-1 pb-1 text-[10px] text-muted-foreground">
+                  {t('ws-task-boards.bulk.assigned_to_all', {
+                    count: appliedSets.assignees.size,
+                  })}
+                </div>
+              </div>
+            )}
+
+            <div className="border-t">
+              <DropdownMenuItem
+                disabled={bulkWorking}
+                onClick={(e) => {
+                  e.preventDefault();
+                  actions.bulkClearAssignees();
+                }}
+                className="cursor-pointer text-dynamic-red hover:text-dynamic-red"
+              >
+                <X className="h-4 w-4" />
+                {t('ws-task-boards.bulk.clear_all_assignees')}
+              </DropdownMenuItem>
+            </div>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      )}
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuItem
+        onClick={onConfirmDelete}
+        className="cursor-pointer text-dynamic-red focus:text-dynamic-red"
+        disabled={bulkWorking}
+      >
+        <Trash2 className="h-4 w-4 text-dynamic-red" />
+        {t('common.delete_tasks')}
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  );
+}