93 lines
4.0 KiB
TypeScript
93 lines
4.0 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 Link from "next/link";
|
|
import { observer } from "mobx-react";
|
|
import { useTranslation } from "@plane/i18n";
|
|
import { PriorityIcon } from "@plane/propel/icons";
|
|
import { Avatar } from "@plane/ui";
|
|
import { cn, renderFormattedDate } from "@plane/utils";
|
|
import type { TExternalContourBoardDirection, TExternalContourRequest, TInboxIssueCurrentTab } from "@plane/types";
|
|
import { ExternalContourStatePill } from "./state-pill";
|
|
|
|
type Props = {
|
|
currentTab: TInboxIssueCurrentTab;
|
|
direction: TExternalContourBoardDirection;
|
|
projectId: string;
|
|
request: TExternalContourRequest;
|
|
workspaceSlug: string;
|
|
};
|
|
|
|
export const ExternalContoursBoardItem = observer(function ExternalContoursBoardItem(props: Props) {
|
|
const { currentTab, direction, projectId, request, workspaceSlug } = props;
|
|
const { t } = useTranslation();
|
|
const issue = request.issue;
|
|
const requester = request.requested_by?.display_name || request.requested_by_name || issue.created_by_detail?.display_name || "NODE.DC";
|
|
const requesterAvatar = issue.created_by_detail?.avatar_url || "";
|
|
const counterpartContourName =
|
|
direction === "outgoing"
|
|
? request.target_project?.name || request.target_project_name || issue.project_detail?.name
|
|
: request.source_project?.name || request.source_project_name;
|
|
const assigneeDetails = issue.assignee_details?.slice(0, 2) ?? [];
|
|
const lastUpdatedAt = issue.updated_at || request.updated_at;
|
|
|
|
return (
|
|
<Link
|
|
href={`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${request.id}`}
|
|
className="block"
|
|
>
|
|
<div className="nodedc-external-card relative flex min-h-[13rem] flex-col gap-4 px-5 py-5 transition-all hover:bg-white/5">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
<Avatar src={requesterAvatar} name={requester} size="md" />
|
|
<div className="min-w-0">
|
|
<div className="truncate text-[15px] leading-5 font-semibold text-primary">{requester}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{request.has_unread_updates && <span className="size-2 rounded-full bg-accent-primary" />}
|
|
<ExternalContourStatePill request={request} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="truncate pl-10 text-[12px] font-medium leading-4 text-secondary">
|
|
{counterpartContourName || t("common.none")}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-1 items-center justify-center px-3 text-center">
|
|
<h3 className="line-clamp-3 w-full text-center text-16 leading-7 font-semibold text-primary">{issue.name}</h3>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
{assigneeDetails.length > 0 ? (
|
|
assigneeDetails.map((assignee, index) => (
|
|
<div key={assignee.id} className={cn(index > 0 && "-ml-2")}>
|
|
<Avatar src={assignee.avatar_url || ""} name={assignee.display_name || "NODE.DC"} size="md" />
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="text-11 text-placeholder">{t("external_contours_page.list.unassigned")}</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="rounded-full bg-white/6 px-3 py-1.5 text-12 text-secondary">{renderFormattedDate(lastUpdatedAt ?? "")}</div>
|
|
{issue.priority && issue.priority !== "none" && (
|
|
<div className="nodedc-external-priority-inline flex items-center justify-center">
|
|
<PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
});
|