179 lines
8.1 KiB
TypeScript
179 lines
8.1 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 { observer } from "mobx-react";
|
|
import { useTranslation } from "@plane/i18n";
|
|
import {
|
|
DuplicatePropertyIcon,
|
|
DueDatePropertyIcon,
|
|
LabelPropertyIcon,
|
|
MembersPropertyIcon,
|
|
PriorityPropertyIcon,
|
|
StatePropertyIcon,
|
|
} from "@plane/propel/icons";
|
|
import { Tooltip } from "@plane/propel/tooltip";
|
|
import type { TInboxDuplicateIssueDetails, TIssue } from "@plane/types";
|
|
import { ControlLink } from "@plane/ui";
|
|
import { generateWorkItemLink, 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 type { TIssueOperations } from "@/components/issues/issue-detail";
|
|
import { IssueLabel } from "@/components/issues/issue-detail/label";
|
|
import { useProject } from "@/hooks/store/use-project";
|
|
import { useAppRouter } from "@/hooks/use-app-router";
|
|
|
|
type Props = {
|
|
workspaceSlug: string;
|
|
projectId: string;
|
|
issue: Partial<TIssue>;
|
|
issueOperations: TIssueOperations;
|
|
isEditable: boolean;
|
|
duplicateIssueDetails: TInboxDuplicateIssueDetails | undefined;
|
|
};
|
|
|
|
export const ExternalContoursIssueContentProperties = observer(function ExternalContoursIssueContentProperties(props: Props) {
|
|
const { workspaceSlug, projectId, issue, issueOperations, isEditable, duplicateIssueDetails } = props;
|
|
const { t } = useTranslation();
|
|
const router = useAppRouter();
|
|
const { currentProjectDetails } = useProject();
|
|
|
|
const minDate = issue.start_date ? getDate(issue.start_date) : null;
|
|
minDate?.setDate(minDate.getDate());
|
|
if (!issue || !issue?.id) return <></>;
|
|
|
|
const duplicateWorkItemLink = generateWorkItemLink({
|
|
workspaceSlug: workspaceSlug?.toString(),
|
|
projectId,
|
|
issueId: duplicateIssueDetails?.id,
|
|
projectIdentifier: currentProjectDetails?.identifier,
|
|
sequenceId: duplicateIssueDetails?.sequence_id,
|
|
});
|
|
|
|
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 text-placeholder">
|
|
{t("external_contours_page.properties.target_contour_placeholder")}
|
|
</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, projectId, issue.id, { assignee_ids: val })}
|
|
disabled={!isEditable}
|
|
projectId={projectId?.toString() ?? ""}
|
|
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, projectId, 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, projectId, 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">
|
|
{issue?.id && (
|
|
<IssueLabel
|
|
workspaceSlug={workspaceSlug}
|
|
projectId={projectId}
|
|
issueId={issue.id}
|
|
disabled={!isEditable}
|
|
isInboxIssue
|
|
onLabelUpdate={(val: string[]) => issue?.id && issueOperations.update(workspaceSlug, projectId, issue.id, { label_ids: val })}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{duplicateIssueDetails && (
|
|
<div className="flex min-h-8 gap-2">
|
|
<div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-13 text-tertiary">
|
|
<DuplicatePropertyIcon className="h-4 w-4 flex-shrink-0" />
|
|
<span>{t("external_contours_page.properties.duplicate_of")}</span>
|
|
</div>
|
|
<ControlLink href={duplicateWorkItemLink} onClick={() => router.push(duplicateWorkItemLink)} target="_self">
|
|
<Tooltip tooltipContent={`${duplicateIssueDetails?.name}`}>
|
|
<span className="flex cursor-pointer items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 pb-0.5 text-11 text-secondary">
|
|
{`${currentProjectDetails?.identifier}-${duplicateIssueDetails?.sequence_id}`}
|
|
</span>
|
|
</Tooltip>
|
|
</ControlLink>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|