ФУНКЦИИ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: web-доступ к внешним контурам и исправление модалки запроса

plane-src/apps/web/ce/components/projects/external-contours/create-properties.tsx

@@ -8,31 +8,44 @@ import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { Badge } from "@plane/propel/badge";
+import { MembersPropertyIcon } from "@plane/propel/icons";
 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 { ButtonAvatars } from "@/components/dropdowns/member/avatar";
+import { MemberDropdownBase } from "@/components/dropdowns/member/base";
 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";
+import { ProjectDropdownBase } from "@/components/dropdowns/project/base";
+import { WorkItemLabelSelectBase } from "@/components/issues/select/base";
+import { useMember } from "@/hooks/store/use-member";
+import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
 
 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 { currentProjectName, data, handleData } = props;
   const { t } = useTranslation();
-  const { getProjectById } = useProject();
+  const { getUserDetails } = useMember();
+  const { targetProjectIds, getTargetOptionsByProjectId, getTargetProjectById } = useProjectExternalContours();
 
-  const selectedTargetProject = useMemo(
-    () => (data.target_project_id ? getProjectById(data.target_project_id) : undefined),
-    [data.target_project_id, getProjectById]
+  const selectedTargetProject = data.target_project_id ? getTargetProjectById(data.target_project_id) : undefined;
+  const selectedTargetOptions = getTargetOptionsByProjectId(data.target_project_id);
+  const targetLabelIds = useMemo(
+    () => selectedTargetOptions?.labels?.map((label) => label.id) ?? [],
+    [selectedTargetOptions?.labels]
   );
+  const assigneeLabel = useMemo(() => {
+    const assigneeIds = data.assignee_ids || [];
+    if (!assigneeIds.length) return t("external_contours_page.form.assignee");
+    if (assigneeIds.length === 1) return getUserDetails(assigneeIds[0])?.display_name || t("external_contours_page.form.assignee");
+    return `${assigneeIds.length} ${t("assignees").toLocaleLowerCase()}`;
+  }, [data.assignee_ids, getUserDetails, t]);
+  const getTargetLabelById = (labelId: string) =>
+    selectedTargetOptions?.labels?.find((label) => label.id === labelId) ?? null;
 
   return (
     <div className="relative flex flex-wrap items-center gap-2">
@@ -42,7 +55,7 @@ export const ExternalContoursCreateProperties = observer(function ExternalContou
       </div>
 
       <div className="h-7">
-        <ProjectDropdown
+        <ProjectDropdownBase
           value={data.target_project_id ?? null}
           onChange={(value) => {
             if (!Array.isArray(value)) {
@@ -52,9 +65,11 @@ export const ExternalContoursCreateProperties = observer(function ExternalContou
             }
           }}
           multiple={false}
+          projectIds={targetProjectIds}
+          getProjectById={getTargetProjectById}
           buttonVariant="border-with-text"
           placeholder={t("external_contours_page.form.target_project")}
-          renderCondition={(projectId) => projectId !== currentProjectId}
+          disabled={targetProjectIds.length === 0}
         />
       </div>
 
@@ -74,24 +89,33 @@ export const ExternalContoursCreateProperties = observer(function ExternalContou
       </div>
 
       <div className="h-7">
-        <MemberDropdown
-          projectId={data.target_project_id ?? undefined}
+        <MemberDropdownBase
           value={data.assignee_ids || []}
           onChange={(assigneeIds) => handleData("assignee_ids", assigneeIds)}
+          getUserDetails={getUserDetails}
+          memberIds={selectedTargetOptions?.member_ids ?? []}
+          button={
+            <div className="flex h-full items-center justify-start gap-1.5 rounded-sm border-[0.5px] border-strong px-1.5 text-11 text-secondary">
+              <ButtonAvatars showTooltip={false} userIds={data.assignee_ids || []} icon={MembersPropertyIcon} />
+              <span className="flex-grow truncate text-left text-body-xs-medium leading-5">{assigneeLabel}</span>
+            </div>
+          }
           buttonVariant={(data.assignee_ids || []).length > 0 ? "transparent-without-text" : "border-with-text"}
           buttonClassName={(data.assignee_ids || []).length > 0 ? "hover:bg-transparent" : ""}
+          optionsClassName="z-[60]"
           placeholder={t("external_contours_page.form.assignee")}
-          disabled={!data.target_project_id}
+          disabled={!data.target_project_id || !selectedTargetOptions}
           multiple
         />
       </div>
 
       <div className="h-7">
-        <IssueLabelSelect
+        <WorkItemLabelSelectBase
           value={data.label_ids || []}
           onChange={(labelIds) => handleData("label_ids", labelIds)}
-          projectId={data.target_project_id ?? undefined}
-          disabled={!data.target_project_id}
+          getLabelById={getTargetLabelById}
+          labelIds={targetLabelIds}
+          disabled={!data.target_project_id || !selectedTargetOptions}
         />
       </div>