mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
cd5e5b96da
* feat: init mobx and issue filter * feat: Implemented list and kanban views in plane space and integrated mobx. * feat: updated store type check
58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
// mobx react lite
|
|
import { observer } from "mobx-react-lite";
|
|
// components
|
|
import { IssueBlockPriority } from "components/issues/board-views/block-priority";
|
|
import { IssueBlockState } from "components/issues/board-views/block-state";
|
|
import { IssueBlockLabels } from "components/issues/board-views/block-labels";
|
|
import { IssueBlockDueDate } from "components/issues/board-views/block-due-date";
|
|
// mobx hook
|
|
import { useMobxStore } from "lib/mobx/store-provider";
|
|
// interfaces
|
|
import { IIssue } from "store/types/issue";
|
|
import { RootStore } from "store/root";
|
|
|
|
export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
|
|
const store: RootStore = useMobxStore();
|
|
|
|
return (
|
|
<div className="p-2 px-3 bg-white space-y-2 rounded-sm shadow">
|
|
{/* id */}
|
|
<div className="flex-shrink-0 text-sm text-gray-600 w-[60px]">
|
|
{store?.project?.project?.identifier}-{issue?.sequence_id}
|
|
</div>
|
|
|
|
{/* name */}
|
|
<div className="font-medium text-gray-800 h-full line-clamp-2">{issue.name}</div>
|
|
|
|
{/* priority */}
|
|
<div className="relative flex items-center gap-3 w-full">
|
|
{issue?.priority && (
|
|
<div className="flex-shrink-0">
|
|
<IssueBlockPriority priority={issue?.priority} />
|
|
</div>
|
|
)}
|
|
{/* state */}
|
|
{issue?.state_detail && (
|
|
<div className="flex-shrink-0">
|
|
<IssueBlockState state={issue?.state_detail} />
|
|
</div>
|
|
)}
|
|
{/* labels */}
|
|
{issue?.label_details && issue?.label_details.length > 0 && (
|
|
<div className="flex-shrink-0">
|
|
<IssueBlockLabels labels={issue?.label_details} />
|
|
</div>
|
|
)}
|
|
{/* due date */}
|
|
{issue?.target_date && (
|
|
<div className="flex-shrink-0">
|
|
<IssueBlockDueDate due_date={issue?.target_date} group={issue?.state_detail?.group} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|