UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: перевод внешних контуров на shell предложений

2026-04-18 21:04:29 +03:00
parent c76f519488
commit 390bcdbf38
20 changed files with 1586 additions and 96 deletions
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { Badge } from "@plane/propel/badge";
+import type { TIssue, TIssuePriorities } from "@plane/types";
+import { renderFormattedPayloadDate } from "@plane/utils";
+import { DateDropdown } from "@/components/dropdowns/date";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { PriorityDropdown } from "@/components/dropdowns/priority";
+import { ProjectDropdown } from "@/components/dropdowns/project/dropdown";
+import { IssueLabelSelect } from "@/components/issues/select";
+import { useProject } from "@/hooks/store/use-project";
+
+type Props = {
+  currentProjectId: string;
+  currentProjectName?: string;
+  data: Partial<TIssue> & { target_project_id?: string | null; priority?: TIssuePriorities };
+  handleData: (issueKey: keyof Props["data"], issueValue: Props["data"][keyof Props["data"]]) => void;
+};
+
+export const ExternalContoursCreateProperties = observer(function ExternalContoursCreateProperties(props: Props) {
+  const { currentProjectId, currentProjectName, data, handleData } = props;
+  const { t } = useTranslation();
+  const { getProjectById } = useProject();
+
+  const selectedTargetProject = useMemo(
+    () => (data.target_project_id ? getProjectById(data.target_project_id) : undefined),
+    [data.target_project_id, getProjectById]
+  );
+
+  return (
+    <div className="relative flex flex-wrap items-center gap-2">
+      <div className="rounded-md border border-subtle bg-surface-2 px-3 py-1.5 text-11 text-secondary">
+        <span className="mr-2 text-tertiary">{t("external_contours_page.form.source_project")}</span>
+        <Badge variant="neutral">{currentProjectName || "NODE.DC"}</Badge>
+      </div>
+
+      <div className="h-7">
+        <ProjectDropdown
+          value={data.target_project_id ?? null}
+          onChange={(value) => {
+            if (!Array.isArray(value)) {
+              handleData("target_project_id", value);
+              handleData("assignee_ids", []);
+              handleData("label_ids", []);
+            }
+          }}
+          multiple={false}
+          buttonVariant="border-with-text"
+          placeholder={t("external_contours_page.form.target_project")}
+          renderCondition={(projectId) => projectId !== currentProjectId}
+        />
+      </div>
+
+      {selectedTargetProject && (
+        <div className="rounded-md border border-subtle bg-surface-2 px-3 py-1.5 text-11 text-secondary">
+          <span className="mr-2 text-tertiary">{t("external_contours_page.form.selected_target")}</span>
+          <Badge variant="neutral">{selectedTargetProject.name}</Badge>
+        </div>
+      )}
+
+      <div className="h-7">
+        <PriorityDropdown
+          value={data.priority}
+          onChange={(priority) => handleData("priority", priority)}
+          buttonVariant="border-with-text"
+        />
+      </div>
+
+      <div className="h-7">
+        <MemberDropdown
+          projectId={data.target_project_id ?? undefined}
+          value={data.assignee_ids || []}
+          onChange={(assigneeIds) => handleData("assignee_ids", assigneeIds)}
+          buttonVariant={(data.assignee_ids || []).length > 0 ? "transparent-without-text" : "border-with-text"}
+          buttonClassName={(data.assignee_ids || []).length > 0 ? "hover:bg-transparent" : ""}
+          placeholder={t("external_contours_page.form.assignee")}
+          disabled={!data.target_project_id}
+          multiple
+        />
+      </div>
+
+      <div className="h-7">
+        <IssueLabelSelect
+          value={data.label_ids || []}
+          onChange={(labelIds) => handleData("label_ids", labelIds)}
+          projectId={data.target_project_id ?? undefined}
+          disabled={!data.target_project_id}
+        />
+      </div>
+
+      <div className="h-7">
+        <DateDropdown
+          value={data.target_date || null}
+          onChange={(date) => handleData("target_date", date ? renderFormattedPayloadDate(date) : "")}
+          buttonVariant="border-with-text"
+          placeholder={t("external_contours_page.form.due_date")}
+        />
+      </div>
+    </div>
+  );
+});