plane/web/components/issues/issue-layouts/list/block.tsx
sriram veeraghanta 5b0066140f chore: format all files in monorepo (#3054)
* chore: format all files in the project

* fix: removing @types/react from dependencies

* fix: adding prettier and eslint config

* chore: format files

* fix: upgrading turbo version

* chore: ignoring warnings and adding todos

* fix: updated the type of bubble menu item in the document editor

* chore: format files

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-12-10 15:50:45 +05:30

82 lines
2.7 KiB
TypeScript

import { useRouter } from "next/router";
// components
import { ListProperties } from "./properties";
// ui
import { Spinner, Tooltip } from "@plane/ui";
// types
import { IIssue, IIssueDisplayProperties } from "types";
import { EIssueActions } from "../types";
interface IssueBlockProps {
columnId: string;
issue: IIssue;
handleIssues: (issue: IIssue, action: EIssueActions) => void;
quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
displayProperties: IIssueDisplayProperties | undefined;
canEditProperties: (projectId: string | undefined) => boolean;
}
export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
const { columnId, issue, handleIssues, quickActions, displayProperties, canEditProperties } = props;
// router
const router = useRouter();
const updateIssue = (group_by: string | null, issueToUpdate: IIssue) => {
handleIssues(issueToUpdate, EIssueActions.UPDATE);
};
const handleIssuePeekOverview = () => {
const { query } = router;
router.push({
pathname: router.pathname,
query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
});
};
const canEditIssueProperties = canEditProperties(issue.project);
return (
<>
<div className="relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm">
{displayProperties && displayProperties?.key && (
<div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
{issue?.project_detail?.identifier}-{issue.sequence_id}
</div>
)}
{issue?.tempId !== undefined && (
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
)}
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
<div
className="line-clamp-1 w-full cursor-pointer text-sm font-medium text-custom-text-100"
onClick={handleIssuePeekOverview}
>
{issue.name}
</div>
</Tooltip>
<div className="ml-auto flex flex-shrink-0 items-center gap-2">
{!issue?.tempId ? (
<>
<ListProperties
columnId={columnId}
issue={issue}
isReadonly={!canEditIssueProperties}
handleIssues={updateIssue}
displayProperties={displayProperties}
/>
{quickActions(!columnId && columnId === "null" ? null : columnId, issue)}
</>
) : (
<div className="h-4 w-4">
<Spinner className="h-4 w-4" />
</div>
)}
</div>
</div>
</>
);
};