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

/**
 * 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 { MembersPropertyIcon } from "@plane/propel/icons";
import type { TIssue, TIssuePriorities } from "@plane/types";
import { renderFormattedPayloadDate } from "@plane/utils";
import { DateDropdown } from "@/components/dropdowns/date";
import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
import { MemberDropdownBase } from "@/components/dropdowns/member/base";
import { PriorityDropdown } from "@/components/dropdowns/priority";
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 = {
  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 { currentProjectName, data, handleData } = props;
  const { t } = useTranslation();
  const { getUserDetails } = useMember();
  const { targetProjectIds, getTargetOptionsByProjectId, getTargetProjectById } = useProjectExternalContours();

  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">
      <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">
        <ProjectDropdownBase
          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}
          projectIds={targetProjectIds}
          getProjectById={getTargetProjectById}
          buttonVariant="border-with-text"
          placeholder={t("external_contours_page.form.target_project")}
          disabled={targetProjectIds.length === 0}
        />
      </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">
        <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 || !selectedTargetOptions}
          multiple
        />
      </div>

      <div className="h-7">
        <WorkItemLabelSelectBase
          value={data.label_ids || []}
          onChange={(labelIds) => handleData("label_ids", labelIds)}
          getLabelById={getTargetLabelById}
          labelIds={targetLabelIds}
          disabled={!data.target_project_id || !selectedTargetOptions}
        />
      </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>
  );
});