NODEDC_TASKMANAGER/plane-src/apps/web/ce/components/projects/external-contours/issue-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 { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n";
import {
  DueDatePropertyIcon,
  LabelPropertyIcon,
  MembersPropertyIcon,
  PriorityPropertyIcon,
  StatePropertyIcon,
} from "@plane/propel/icons";
import type { TIssue } from "@plane/types";
import { Badge } from "@plane/propel/badge";
import { getDate, renderFormattedPayloadDate } from "@plane/utils";
import { DateDropdown } from "@/components/dropdowns/date";
import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
import { PriorityDropdown } from "@/components/dropdowns/priority";
import { IssueLabelSelect } from "@/components/issues/select";
import type { TIssueOperations } from "@/components/issues/issue-detail";

type Props = {
  workspaceSlug: string;
  targetProjectId: string;
  issue: Partial<TIssue> & {
    project_detail?: { name?: string } | null;
  };
  issueOperations: TIssueOperations;
  isEditable: boolean;
};

export const ExternalContoursIssueContentProperties = observer(function ExternalContoursIssueContentProperties(props: Props) {
  const { workspaceSlug, targetProjectId, issue, issueOperations, isEditable } = props;
  const { t } = useTranslation();

  const minDate = issue.start_date ? getDate(issue.start_date) : null;
  minDate?.setDate(minDate.getDate());
  if (!issue || !issue?.id) return <></>;

  return (
    <div className="flex w-full flex-col divide-y-2 divide-subtle-1">
      <div className="w-full overflow-y-auto">
        <h5 className="mb-2 text-body-sm-medium">{t("external_contours_page.properties.section_title")}</h5>
        <div className={`divide-y-2 divide-subtle-1 ${!isEditable ? "opacity-60" : ""}`}>
          <div className="flex flex-col gap-3">
            <div className="flex h-8 items-center gap-2">
              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
                <StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                <span>{t("external_contours_page.properties.target_contour")}</span>
              </div>
              <div className="w-3/5 flex-grow text-13">
                <Badge variant="neutral">{issue.project_detail?.name || t("common.none")}</Badge>
              </div>
            </div>

            <div className="flex h-8 items-center gap-2">
              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
                <MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
                <span>{t("assignees")}</span>
              </div>
              <MemberDropdown
                value={issue?.assignee_ids ?? []}
                onChange={(val) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { assignee_ids: val })}
                disabled={!isEditable}
                projectId={targetProjectId}
                placeholder={t("assignee")}
                multiple
                buttonVariant={(issue?.assignee_ids || []).length > 0 ? "transparent-without-text" : "transparent-with-text"}
                className="group w-3/5 flex-grow"
                buttonContainerClassName="w-full text-left"
                buttonClassName={`text-13 justify-between ${(issue?.assignee_ids || []).length > 0 ? "" : "text-placeholder"}`}
                hideIcon={issue.assignee_ids?.length === 0}
                dropdownArrow
                dropdownArrowClassName="hidden h-3.5 w-3.5 group-hover:inline"
              />
            </div>

            <div className="flex h-8 items-center gap-2">
              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
                <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
                <span>{t("priority")}</span>
              </div>
              <PriorityDropdown
                value={issue?.priority}
                onChange={(val) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { priority: val })}
                disabled={!isEditable}
                buttonVariant="border-with-text"
                className="w-3/5 flex-grow rounded-sm px-2 hover:bg-layer-1"
                buttonContainerClassName="w-full text-left"
                buttonClassName="h-auto w-min whitespace-nowrap"
              />
            </div>
          </div>
        </div>

        <div className={`mt-3 divide-y-2 divide-subtle-1 ${!isEditable ? "opacity-60" : ""}`}>
          <div className="flex flex-col gap-3">
            <div className="flex h-8 items-center gap-2">
              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
                <DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                <span>{t("due_date")}</span>
              </div>
              <DateDropdown
                placeholder={t("external_contours_page.properties.add_due_date")}
                value={issue.target_date || null}
                onChange={(val) =>
                  issue?.id &&
                  issueOperations.update(workspaceSlug, targetProjectId, issue.id, {
                    target_date: val ? renderFormattedPayloadDate(val) : null,
                  })
                }
                minDate={minDate ?? undefined}
                disabled={!isEditable}
                buttonVariant="transparent-with-text"
                className="group w-3/5 flex-grow"
                buttonContainerClassName="w-full text-left"
                buttonClassName={`text-13 ${issue?.target_date ? "" : "text-placeholder"}`}
                hideIcon
                clearIconClassName="hidden h-3 w-3 group-hover:inline"
              />
            </div>

            <div className="flex min-h-8 items-center gap-2">
              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
                <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
                <span>{t("labels")}</span>
              </div>
              <div className="h-full min-h-8 w-3/5 flex-grow pt-1">
                <IssueLabelSelect
                  value={issue.label_ids || []}
                  onChange={(labelIds) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { label_ids: labelIds })}
                  projectId={targetProjectId}
                  disabled={!isEditable}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
});