ФУНКЦИИ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: frontend read-layer и первый экран двусторонней доски внешних контуров

2026-04-20 20:49:09 +03:00
parent 0184ff9a32
commit 8bf6f2a510
15 changed files with 603 additions and 69 deletions
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Link from "next/link";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { PriorityIcon } from "@plane/propel/icons";
+import { Avatar } from "@plane/ui";
+import { cn, renderFormattedDate } from "@plane/utils";
+import type { TExternalContourBoardDirection, TExternalContourRequest, TInboxIssueCurrentTab } from "@plane/types";
+import { ExternalContourStatePill } from "./state-pill";
+
+type Props = {
+  currentTab: TInboxIssueCurrentTab;
+  direction: TExternalContourBoardDirection;
+  projectId: string;
+  request: TExternalContourRequest;
+  workspaceSlug: string;
+};
+
+export const ExternalContoursBoardItem = observer(function ExternalContoursBoardItem(props: Props) {
+  const { currentTab, direction, projectId, request, workspaceSlug } = props;
+  const { t } = useTranslation();
+  const issue = request.issue;
+  const requester = request.requested_by?.display_name || request.requested_by_name || issue.created_by_detail?.display_name || "NODE.DC";
+  const requesterAvatar = issue.created_by_detail?.avatar_url || "";
+  const counterpartContourName =
+    direction === "outgoing"
+      ? request.target_project?.name || request.target_project_name || issue.project_detail?.name
+      : request.source_project?.name || request.source_project_name;
+  const assigneeDetails = issue.assignee_details?.slice(0, 2) ?? [];
+  const lastUpdatedAt = issue.updated_at || request.updated_at;
+
+  return (
+    <Link
+      href={`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${request.id}`}
+      className="block"
+    >
+      <div className="nodedc-external-card relative flex min-h-[13rem] flex-col gap-4 px-5 py-5 transition-all hover:bg-white/5">
+        <div className="space-y-1">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex min-w-0 items-center gap-3">
+              <Avatar src={requesterAvatar} name={requester} size="md" />
+              <div className="min-w-0">
+                <div className="truncate text-[15px] leading-5 font-semibold text-primary">{requester}</div>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              {request.has_unread_updates && <span className="size-2 rounded-full bg-accent-primary" />}
+              <ExternalContourStatePill request={request} />
+            </div>
+          </div>
+
+          <div className="truncate pl-10 text-[12px] font-medium leading-4 text-secondary">
+            {counterpartContourName || t("common.none")}
+          </div>
+        </div>
+
+        <div className="flex flex-1 items-center justify-center px-3 text-center">
+          <h3 className="line-clamp-3 w-full text-center text-16 leading-7 font-semibold text-primary">{issue.name}</h3>
+        </div>
+
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-2">
+            {assigneeDetails.length > 0 ? (
+              assigneeDetails.map((assignee, index) => (
+                <div key={assignee.id} className={cn(index > 0 && "-ml-2")}>
+                  <Avatar src={assignee.avatar_url || ""} name={assignee.display_name || "NODE.DC"} size="md" />
+                </div>
+              ))
+            ) : (
+              <div className="text-11 text-placeholder">{t("external_contours_page.list.unassigned")}</div>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2">
+            <div className="rounded-full bg-white/6 px-3 py-1.5 text-12 text-secondary">{renderFormattedDate(lastUpdatedAt ?? "")}</div>
+            {issue.priority && issue.priority !== "none" && (
+              <div className="nodedc-external-priority-inline flex items-center justify-center">
+                <PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+});