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 { CalendarDays, SignalHigh } from "lucide-react";
import { observer } from "mobx-react";
import { ISSUE_PRIORITIES } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { LabelPropertyIcon, MembersPropertyIcon, PriorityIcon, ProjectIcon } from "@plane/propel/icons";
import type { TIssue, TIssuePriorities } from "@plane/types";
import { cn, renderFormattedDate, 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 controlClassName =
    "nodedc-modal-field flex h-10 min-w-fit items-center gap-2 rounded-[1.25rem] px-3.5 text-[12px] font-medium text-secondary";

  const selectedTargetProject = data.target_project_id ? getTargetProjectById(data.target_project_id) : undefined;
  const selectedTargetOptions = getTargetOptionsByProjectId(data.target_project_id);
  const getTargetLabelById = (labelId: string) =>
    selectedTargetOptions?.labels?.find((label) => label.id === labelId) ?? null;
  const targetLabelIds = selectedTargetOptions?.labels?.map((label) => label.id) ?? [];
  const selectedLabels = (data.label_ids || []).map((labelId) => getTargetLabelById(labelId)).filter((label) => !!label);
  const assigneeIds = data.assignee_ids || [];
  const assigneeLabel = !assigneeIds.length
    ? t("external_contours_page.form.assignee")
    : assigneeIds.length === 1
      ? (getUserDetails(assigneeIds[0])?.display_name ?? t("external_contours_page.form.assignee"))
      : `${assigneeIds.length} ${t("assignees").toLocaleLowerCase()}`;
  const priorityDetails = ISSUE_PRIORITIES.find((priority) => priority.key === data.priority);

  return (
    <div className="relative flex flex-wrap items-center gap-2.5">
      <div className={cn(controlClassName, "min-w-[16rem] justify-start")}>
        <span className="text-tertiary">{t("external_contours_page.form.source_project")}</span>
        <span className="truncate text-primary">{currentProjectName || "NODE.DC"}</span>
      </div>

      <div className="h-10">
        <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="transparent-without-text"
          buttonContainerClassName="h-full"
          button={
            <div className={cn(controlClassName, "min-w-[16rem] justify-start")}>
              <ProjectIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
              <span className={cn("truncate", selectedTargetProject ? "text-primary" : "text-tertiary")}>
                {selectedTargetProject?.name ?? t("external_contours_page.form.target_project")}
              </span>
            </div>
          }
          placeholder={t("external_contours_page.form.target_project")}
          disabled={targetProjectIds.length === 0}
        />
      </div>

      <div className="h-10">
        <MemberDropdownBase
          value={assigneeIds}
          onChange={(nextAssigneeIds) => handleData("assignee_ids", nextAssigneeIds)}
          getUserDetails={getUserDetails}
          memberIds={selectedTargetOptions?.member_ids ?? []}
          button={
            <div className={cn(controlClassName, "min-w-[12rem] justify-start")}>
              <ButtonAvatars showTooltip={false} userIds={assigneeIds} icon={MembersPropertyIcon} />
              <span className={cn("truncate", assigneeIds.length > 0 ? "text-primary" : "text-tertiary")}>
                {assigneeLabel}
              </span>
            </div>
          }
          buttonVariant="transparent-without-text"
          optionsClassName="z-[60]"
          placeholder={t("external_contours_page.form.assignee")}
          disabled={!data.target_project_id || !selectedTargetOptions}
          multiple
        />
      </div>

      <div className="h-10">
        <PriorityDropdown
          value={data.priority}
          onChange={(priority) => handleData("priority", priority)}
          buttonVariant="transparent-without-text"
          buttonContainerClassName="h-full"
          button={
            <div className={cn(controlClassName, "min-w-[12rem] justify-start")}>
              {data.priority && data.priority !== "none" ? (
                <PriorityIcon priority={data.priority} size={14} />
              ) : (
                <SignalHigh className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
              )}
              <span className={cn("truncate", data.priority && data.priority !== "none" ? "text-primary" : "text-tertiary")}>
                {data.priority && data.priority !== "none"
                  ? priorityDetails?.title
                  : t("external_contours_page.form.priority")}
              </span>
            </div>
          }
          placeholder={t("external_contours_page.form.priority")}
        />
      </div>

      <div className="h-10">
        <WorkItemLabelSelectBase
          value={data.label_ids || []}
          onChange={(labelIds) => handleData("label_ids", labelIds)}
          getLabelById={getTargetLabelById}
          labelIds={targetLabelIds}
          buttonContainerClassName="h-full !text-[12px]"
          label={
            <div className={cn(controlClassName, "min-w-[9rem] justify-start !text-[12px]")}>
              <LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
              <span className={cn("truncate", selectedLabels.length > 0 ? "text-primary" : "text-tertiary")}>
                {selectedLabels.length > 0
                  ? selectedLabels.length === 1
                    ? selectedLabels[0]?.name
                    : `${selectedLabels.length} ${t("labels").toLocaleLowerCase()}`
                  : t("labels")}
              </span>
            </div>
          }
          disabled={!data.target_project_id || !selectedTargetOptions}
        />
      </div>

      <div className="h-10">
        <DateDropdown
          value={data.target_date || null}
          onChange={(date) => handleData("target_date", date ? renderFormattedPayloadDate(date) : "")}
          buttonVariant="transparent-without-text"
          buttonContainerClassName="h-full"
          button={
            <div className={cn(controlClassName, "min-w-[10rem] justify-start")}>
              <CalendarDays className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
              <span className={cn("truncate", data.target_date ? "text-primary" : "text-tertiary")}>
                {data.target_date ? renderFormattedDate(data.target_date) : t("external_contours_page.form.due_date")}
              </span>
            </div>
          }
          placeholder={t("external_contours_page.form.due_date")}
        />
      </div>
    </div>
  );
});