ФУНКЦИИ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: 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,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import type { TExternalContourBoardDirection, TInboxIssueCurrentTab } from "@plane/types";
+import { useProjectExternalContoursBoard } from "@/hooks/store/use-project-external-contours-board";
+import { ExternalContoursBoardItem } from "./board-item";
+import { ExternalContoursEmptyState } from "./empty-state";
+
+type Props = {
+  currentTab: TInboxIssueCurrentTab;
+  direction: TExternalContourBoardDirection;
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const ExternalContoursBoardColumn = observer(function ExternalContoursBoardColumn(props: Props) {
+  const { currentTab, direction, projectId, workspaceSlug } = props;
+  const { t } = useTranslation();
+  const { getColumnRequestIds, getColumnTotalCount, getRequestById } = useProjectExternalContoursBoard();
+  const requestIds = getColumnRequestIds(direction);
+  const totalCount = getColumnTotalCount(direction);
+
+  const title =
+    direction === "outgoing"
+      ? t("external_contours_page.board.columns.outgoing")
+      : t("external_contours_page.board.columns.incoming");
+
+  const emptyTitle =
+    direction === "outgoing"
+      ? t("external_contours_page.board.empty.outgoing_title")
+      : t("external_contours_page.board.empty.incoming_title");
+
+  const emptyDescription =
+    direction === "outgoing"
+      ? t("external_contours_page.board.empty.outgoing_description")
+      : t("external_contours_page.board.empty.incoming_description");
+
+  return (
+    <section className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[28px] bg-surface-2/30">
+      <div className="flex items-center justify-between gap-3 border-b border-subtle/40 px-5 py-4">
+        <div className="text-15 font-semibold text-primary">{title}</div>
+        <div className="rounded-full bg-white/5 px-2 py-1 text-12 font-semibold text-secondary">{totalCount}</div>
+      </div>
+
+      <div className="vertical-scrollbar scrollbar-md min-h-0 flex-1 overflow-y-auto p-4">
+        {requestIds.length > 0 ? (
+          <div className="space-y-4">
+            {requestIds.map((requestId) => {
+              const request = getRequestById(requestId);
+              if (!request) return null;
+
+              return (
+                <ExternalContoursBoardItem
+                  key={requestId}
+                  currentTab={currentTab}
+                  direction={direction}
+                  projectId={projectId}
+                  request={request}
+                  workspaceSlug={workspaceSlug}
+                />
+              );
+            })}
+          </div>
+        ) : (
+          <div className="flex h-full min-h-[18rem] items-center justify-center">
+            <ExternalContoursEmptyState title={emptyTitle} description={emptyDescription} />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+});