@allbluecn/web-app 0.4.22 → 0.5.1

package/src/components/story/detail/story-detail-toolbar/dependency-panel.tsx

@@ -0,0 +1,473 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { Plus, ChevronDown, ChartNoAxesGantt } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { useServerFn } from "@tanstack/react-start";
+import { toast } from "sonner";
+import {
+  removeDependencyFn,
+  bulkArchiveStoriesFn,
+  bulkDeleteStoriesFn,
+  bulkUpdateStoriesFn,
+} from "@/server/serverFns/story";
+import { BatchToolbar } from "../../views/story-list/batch-toolbar";
+import { useGroupedStories } from "../../display/use-grouped-stories";
+import { VirtualGroupHeader } from "../../views/story-list/group";
+import { DisplayOptionsBody } from "../../display/display-dropdown";
+import { StoryRefRow } from "../../relations/story-ref-row";
+import type { DisplayOptions, GroupNode } from "../../display/types";
+import type { StoryPatch } from "../../display/group-fields";
+import type { RelationsData, UserBrief, DependencyRow } from "../../types";
+
+type DependencySection = "dependsOn" | "dependents";
+
+// fetch 网络层失败（服务未启动/断网）时浏览器抛 TypeError，文案为英文原始信息
+function isNetworkError(e: unknown): boolean {
+  const msg = e instanceof Error ? e.message : "";
+  return /failed to fetch|load failed|network error|fetch failed/i.test(msg);
+}
+
+export interface StoryDetailDependencyPanelProps {
+  storyId: string;
+  /** 当前需求编号（tooltip 文案用） */
+  storyIdentifier?: string;
+  projectId: string | null;
+  data: RelationsData["dependencies"];
+  onRefresh: (next: (prev: RelationsData) => RelationsData) => void;
+  refreshDependencies: () => void;
+  users?: UserBrief[];
+  projects?: { id: string; name: string; icon: string; displayId: string | null }[];
+  labels?: { id: string; name: string; color: string }[];
+  onOpenAdd: () => void;
+}
+
+export function StoryDetailDependencyPanel({
+  storyId,
+  storyIdentifier,
+  projectId,
+  data,
+  onRefresh,
+  refreshDependencies,
+  users,
+  projects,
+  labels,
+  onOpenAdd,
+}: StoryDetailDependencyPanelProps) {
+  const { t } = useTranslation("story");
+  const navigate = useNavigate();
+  const removeDependency = useServerFn(removeDependencyFn);
+  const [selectedIds, setSelectedIds] = React.useState<Set<string>>(() => new Set());
+  const [busy, setBusy] = React.useState(false);
+  const [collapsed, setCollapsed] = React.useState<Record<string, boolean>>({});
+  const [filters, setFilters] = React.useState<DisplayOptions>(() => ({
+    groupBy: "none",
+    subGroupBy: "none",
+    orderBy: "created",
+    orderDir: "desc",
+    properties: ["id", "priority", "state", "assignee", "startDate", "dueDate", "labels"],
+    showEmptyGroups: false,
+    showSubItems: false,
+    pageSize: 100,
+  }));
+
+  const allRows = React.useMemo(
+    () => [...data.dependsOn, ...data.dependents],
+    [data],
+  );
+  const rowById = React.useMemo(
+    () => new Map(allRows.map((r) => [r.id, r])),
+    [allRows],
+  );
+
+  const dependsOnGroups = useGroupedStories({
+    stories: data.dependsOn,
+    filters,
+    users: users ?? [],
+    labels: labels ?? [],
+    projects: projects ?? [],
+  });
+  const dependentsGroups = useGroupedStories({
+    stories: data.dependents,
+    filters,
+    users: users ?? [],
+    labels: labels ?? [],
+    projects: projects ?? [],
+  });
+
+  const selectedStories = React.useMemo(
+    () => allRows.filter((s) => selectedIds.has(s.id)),
+    [allRows, selectedIds],
+  );
+  const canArchive = React.useMemo(
+    () => selectedStories.some((s) => s.state === "done" || s.state === "cancelled"),
+    [selectedStories],
+  );
+  const allSelected = allRows.length > 0 && selectedIds.size === allRows.length;
+  const showSelect = selectedIds.size > 0;
+  const totalCount = data.dependsOn.length + data.dependents.length;
+
+  if (totalCount === 0) {
+    return null;
+  }
+
+  const updateFilters = (patch: Partial<DisplayOptions>) => {
+    setFilters((prev) => ({ ...prev, ...patch }));
+  };
+
+  const handleOpenStory = (id: string) => {
+    navigate({ to: "/stories/$storyId", params: { storyId: id } });
+  };
+
+  const applyRowsUpdate = (
+    next: (rows: DependencyRow[]) => DependencyRow[],
+    group: DependencySection,
+  ) => {
+    onRefresh((prev) => ({
+      ...prev,
+      dependencies: { ...prev.dependencies, [group]: next(prev.dependencies[group]) },
+    }));
+  };
+
+  const handleRemoveRow = async (rowId: string) => {
+    const row = rowById.get(rowId);
+    if (!row) return;
+    const group: DependencySection = data.dependsOn.some((r) => r.id === rowId)
+      ? "dependsOn"
+      : "dependents";
+    try {
+      await removeDependency({ data: { depId: row.depId } });
+      toast.success(t("dependency.removed"));
+      applyRowsUpdate((rows) => rows.filter((r) => r.id !== rowId), group);
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        next.delete(rowId);
+        return next;
+      });
+    } catch (e) {
+      toast.error(isNetworkError(e) ? t("dependency.networkFailed") : (e as Error)?.message || t("dependency.removeFailed"));
+    }
+  };
+
+  const handleBulkRemoveRelations = async (storyIds: string[]) => {
+    if (storyIds.length === 0) return;
+    setBusy(true);
+    try {
+      for (const id of storyIds) {
+        const row = rowById.get(id);
+        if (row) await removeDependency({ data: { depId: row.depId } });
+      }
+      toast.success(t("dependency.removed"));
+      setSelectedIds(new Set());
+      refreshDependencies();
+    } catch (e) {
+      toast.error(isNetworkError(e) ? t("dependency.networkFailed") : (e as Error)?.message || t("dependency.removeFailed"));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleBulkArchive = async (storyIds?: string[]) => {
+    const ids = storyIds ?? [...selectedIds];
+    if (ids.length === 0) return;
+    setBusy(true);
+    try {
+      const res = await bulkArchiveStoriesFn({ data: { storyIds: ids } });
+      toast.success(
+        res.skipped > 0
+          ? t("children.bulkArchivedSkipped", { archived: res.archived, skipped: res.skipped })
+          : t("children.bulkArchived", { count: res.archived }),
+      );
+      setSelectedIds(new Set());
+      refreshDependencies();
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.archiveFailed"));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleBulkDelete = async (storyIds?: string[]) => {
+    const ids = storyIds ?? [...selectedIds];
+    if (ids.length === 0) return;
+    setBusy(true);
+    try {
+      const res = await bulkDeleteStoriesFn({ data: { storyIds: ids } });
+      toast.success(t("children.bulkDeleted", { count: res.deleted }));
+      setSelectedIds(new Set());
+      refreshDependencies();
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.deleteFailed"));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleBulkUpdate = async (patch: StoryPatch) => {
+    if (selectedIds.size === 0) return;
+    setBusy(true);
+    try {
+      await bulkUpdateStoriesFn({ data: { storyIds: [...selectedIds], patch } });
+      setSelectedIds(new Set());
+      toast.success(t("dependency.bulkUpdated"));
+      refreshDependencies();
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.bulkUpdateFailed"));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const toggleStory = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const toggleGroup = (ids: string[]) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      const allChosen = ids.length > 0 && ids.every((id) => next.has(id));
+      if (allChosen) {
+        for (const id of ids) next.delete(id);
+      } else {
+        for (const id of ids) next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const toggleCollapse = (key: string) => {
+    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const computeGroupCheckState = (ids: string[]): boolean | "indeterminate" => {
+    if (ids.length === 0) return false;
+    let count = 0;
+    for (const id of ids) if (selectedIds.has(id)) count++;
+    if (count === ids.length) return true;
+    return count > 0 ? "indeterminate" : false;
+  };
+
+  const handleStoryRefresh = (rowId: string, patch: Record<string, unknown>) => {
+    for (const group of ["dependsOn", "dependents"] as const) {
+      if (patch.deleted) {
+        applyRowsUpdate((rows) => rows.filter((r) => r.id !== rowId), group);
+      } else {
+        applyRowsUpdate(
+          (rows) => rows.map((r) => (r.id === rowId ? ({ ...r, ...patch } as DependencyRow) : r)),
+          group,
+        );
+      }
+    }
+    if (patch.deleted) {
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        next.delete(rowId);
+        return next;
+      });
+    } else {
+      refreshDependencies();
+    }
+  };
+
+  const renderRow = (row: DependencyRow, group: DependencySection) => (
+    <StoryRefRow
+      key={row.depId}
+      story={row}
+      users={users ?? []}
+      labels={labels ?? []}
+      parentProjectId={projectId}
+      projects={projects ?? []}
+      selected={selectedIds.has(row.id)}
+      properties={filters.properties}
+      onToggle={toggleStory}
+      onOpenStory={handleOpenStory}
+      onRemove={handleRemoveRow}
+      removeMenuLabel={t("dependency.remove")}
+      dependencyMeta={{ depType: row.depType, group }}
+      currentIdentifier={storyIdentifier}
+      onStoryRefresh={handleStoryRefresh}
+    />
+  );
+
+  const renderGroupItems = (node: GroupNode, group: DependencySection, depth: number, collapseKey: string) => {
+    const isCollapsed = collapsed[collapseKey] ?? false;
+    const ids = node.items.map((s) => s.id);
+    return (
+      <React.Fragment key={collapseKey}>
+        <div style={{ height: 36 }}>
+          <VirtualGroupHeader
+            node={node}
+            depth={depth}
+            collapsed={isCollapsed}
+            collapseKey={collapseKey}
+            onToggle={toggleCollapse}
+            selectState={computeGroupCheckState(ids)}
+            onToggleSelect={() => toggleGroup(ids)}
+            showSelect={showSelect}
+            showRoleLabel={
+              filters.subGroupBy === "assignee" || filters.subGroupBy === "createdBy"
+            }
+            groupDimension={depth === 0 ? filters.groupBy : filters.subGroupBy}
+          />
+        </div>
+        {!isCollapsed && (
+          <React.Fragment>
+            {node.subGroups && node.subGroups.length > 0 ? (
+              node.subGroups.map((subGroup) =>
+                renderGroupItems(
+                  subGroup,
+                  group,
+                  depth + 1,
+                  `${collapseKey}/${subGroup.key}`,
+                ),
+              )
+            ) : (
+              node.items.map((s) => renderRow(s as DependencyRow, group))
+            )}
+          </React.Fragment>
+        )}
+      </React.Fragment>
+    );
+  };
+
+  const renderSection = (
+    titleKey: string,
+    sectionKey: DependencySection,
+    rows: DependencyRow[],
+    groups: GroupNode[],
+  ) => {
+    const isCollapsed = collapsed[`${sectionKey}:root`] ?? false;
+    return (
+      <Collapsible open={!isCollapsed} onOpenChange={(open) => setCollapsed((p) => ({ ...p, [`${sectionKey}:root`]: !open }))}>
+        <CollapsibleTrigger asChild>
+          <div className="flex h-9 cursor-pointer items-center gap-1.5 bg-muted/50 px-3 text-sm font-medium hover:text-foreground transition-colors">
+            <ChevronDown className={`size-3 shrink-0 text-muted-foreground transition-transform ${isCollapsed ? "-rotate-90" : "rotate-0"}`} />
+            <span>{t(titleKey)}</span>
+            <span className="ml-1 text-xs text-muted-foreground">{rows.length}</span>
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          {rows.length === 0 ? (
+            <p className="flex items-center gap-1.5 px-2 py-1.5 text-xs text-muted-foreground">
+              <span className="w-4 shrink-0" aria-hidden />
+              {t("relation.none")}
+            </p>
+          ) : filters.groupBy === "none" ? (
+            rows.map((row) => renderRow(row, sectionKey))
+          ) : (
+            groups.map((node) => renderGroupItems(node, sectionKey, 0, `${sectionKey}:${node.key}`))
+          )}
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  };
+
+  return (
+    <Collapsible defaultOpen>
+      <CollapsibleTrigger
+        asChild
+        className="group flex w-full cursor-pointer items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors"
+      >
+        <div
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              (e.currentTarget as HTMLDivElement).click();
+            }
+          }}
+        >
+          <div className="flex items-center gap-1.5">
+            <span>{t("relations.dependency")}</span>
+            <span className="inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+              {totalCount}
+            </span>
+            <ChevronDown className="size-3 text-muted-foreground transition-transform group-data-[state=open]:rotate-0 group-data-[state=closed]:-rotate-90" />
+          </div>
+          <div className="flex items-center gap-1 ml-auto" onClick={(e) => e.stopPropagation()}>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="ghost" size="sm" className="size-7 p-0">
+                  <ChartNoAxesGantt className="size-3.5" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent align="end" className="w-75 p-0">
+                <div className="max-h-[60vh] overflow-y-auto">
+                  <DisplayOptionsBody
+                    filters={filters}
+                    onChange={updateFilters}
+                    layout="list"
+                    showSubItems={false}
+                  />
+                </div>
+              </PopoverContent>
+            </Popover>
+            <Button variant="ghost" size="sm" className="size-7 p-0" onClick={onOpenAdd}>
+              <Plus className="size-3.5" />
+            </Button>
+          </div>
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="pb-2">
+        <div className="flex flex-col gap-0 border rounded-lg overflow-hidden">
+          {renderSection("dependency.dependsOnTitle", "dependsOn", data.dependsOn, dependsOnGroups)}
+          {renderSection("dependency.dependentsTitle", "dependents", data.dependents, dependentsGroups)}
+          <span className="-ml-1">
+            <BatchToolbar
+              selectedCount={selectedIds.size}
+              totalLoaded={allRows.length}
+              allSelected={allSelected}
+              canArchive={canArchive}
+              canMove={false}
+              canMoveUp={false}
+              canMoveDown={false}
+              busy={busy}
+              users={users ?? []}
+              labels={labels ?? []}
+              projects={projects ?? []}
+              stories={selectedStories}
+              onToggleAll={() =>
+                setSelectedIds(
+                  allSelected ? new Set() : new Set(allRows.map((r) => r.id)),
+                )
+              }
+              onMoveUp={() => {}}
+              onMoveDown={() => {}}
+              onArchive={handleBulkArchive}
+              onDelete={handleBulkDelete}
+              onBulkUpdate={handleBulkUpdate}
+              onClearSelection={() => setSelectedIds(new Set())}
+              onTransfer={() => {}}
+              onRemoveRelations={handleBulkRemoveRelations}
+            />
+          </span>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}