import { useState } from "react"; import { useRouter } from "next/router"; // react-beautiful-dnd import StrictModeDroppable from "components/dnd/StrictModeDroppable"; import { Draggable } from "react-beautiful-dnd"; // hooks import useIssuesProperties from "hooks/use-issue-properties"; // components import { BoardHeader, SingleBoardIssue } from "components/core"; // ui import { CustomMenu } from "components/ui"; // icons import { PlusIcon } from "@heroicons/react/24/outline"; // types import { IIssue, IProjectMember, NestedKeyOf, UserAuth } from "types"; type Props = { type?: "issue" | "cycle" | "module"; bgColor?: string; groupTitle: string; groupedByIssues: { [key: string]: IIssue[]; }; selectedGroup: NestedKeyOf | null; members: IProjectMember[] | undefined; handleEditIssue: (issue: IIssue) => void; addIssueToState: () => void; handleDeleteIssue: (issue: IIssue) => void; openIssuesListModal?: (() => void) | null; orderBy: NestedKeyOf | null; handleTrashBox: (isDragging: boolean) => void; removeIssue: ((bridgeId: string) => void) | null; userAuth: UserAuth; }; export const SingleBoard: React.FC = ({ type, bgColor, groupTitle, groupedByIssues, selectedGroup, members, handleEditIssue, addIssueToState, handleDeleteIssue, openIssuesListModal, orderBy, handleTrashBox, removeIssue, userAuth, }) => { // collapse/expand const [isCollapsed, setIsCollapsed] = useState(true); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string); if (selectedGroup === "priority") groupTitle === "high" ? (bgColor = "#dc2626") : groupTitle === "medium" ? (bgColor = "#f97316") : groupTitle === "low" ? (bgColor = "#22c55e") : (bgColor = "#ff0000"); const isNotAllowed = userAuth.isGuest || userAuth.isViewer; return (
{(provided, snapshot) => (
{orderBy !== "sort_order" && ( <>
This board is ordered by {orderBy}
)} {groupedByIssues[groupTitle].map((issue, index: number) => ( {(provided, snapshot) => ( handleEditIssue(issue)} handleDeleteIssue={handleDeleteIssue} orderBy={orderBy} handleTrashBox={handleTrashBox} removeIssue={() => { removeIssue && removeIssue(issue.bridge); }} userAuth={userAuth} /> )} ))} {provided.placeholder} {type === "issue" ? ( ) : ( Add issue } className="mt-1" optionsPosition="left" noBorder > Create new {openIssuesListModal && ( Add an existing issue )} )}
)}
); };