109 lines
4.2 KiB
TypeScript
109 lines
4.2 KiB
TypeScript
/**
|
|
* 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>
|
|
);
|
|
});
|