forked from github/plane
112 lines
3.2 KiB
TypeScript
112 lines
3.2 KiB
TypeScript
import React from "react";
|
|
|
|
// react-beautiful-dnd
|
|
import { DraggableProvided } from "react-beautiful-dnd";
|
|
// icons
|
|
import {
|
|
ArrowsPointingInIcon,
|
|
ArrowsPointingOutIcon,
|
|
EllipsisHorizontalIcon,
|
|
PlusIcon,
|
|
} from "@heroicons/react/24/outline";
|
|
// helpers
|
|
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
|
// types
|
|
import { IIssue, IProjectMember, NestedKeyOf } from "types";
|
|
type Props = {
|
|
groupedByIssues: {
|
|
[key: string]: IIssue[];
|
|
};
|
|
selectedGroup: NestedKeyOf<IIssue> | null;
|
|
groupTitle: string;
|
|
bgColor?: string;
|
|
addIssueToState: () => void;
|
|
members: IProjectMember[] | undefined;
|
|
isCollapsed: boolean;
|
|
setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
|
|
};
|
|
|
|
export const BoardHeader: React.FC<Props> = ({
|
|
groupedByIssues,
|
|
selectedGroup,
|
|
groupTitle,
|
|
bgColor,
|
|
addIssueToState,
|
|
isCollapsed,
|
|
setIsCollapsed,
|
|
members,
|
|
}) => {
|
|
const createdBy =
|
|
selectedGroup === "created_by"
|
|
? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..."
|
|
: null;
|
|
|
|
let assignees: any;
|
|
if (selectedGroup === "assignees") {
|
|
assignees = groupTitle && groupTitle !== "" ? groupTitle.split(",") : [];
|
|
assignees =
|
|
assignees.length > 0
|
|
? assignees
|
|
.map((a: string) => members?.find((m) => m.member.id === a)?.member.first_name)
|
|
.join(", ")
|
|
: "No assignee";
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`flex justify-between p-3 pb-0 ${
|
|
!isCollapsed ? "flex-col rounded-md border bg-gray-50" : ""
|
|
}`}
|
|
>
|
|
<div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
|
|
<div
|
|
className={`flex cursor-pointer items-center gap-x-1 rounded-md bg-slate-900 px-2 ${
|
|
!isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
|
|
}`}
|
|
style={{
|
|
border: `2px solid ${bgColor}`,
|
|
backgroundColor: `${bgColor}20`,
|
|
}}
|
|
>
|
|
<h2
|
|
className={`text-[0.9rem] font-medium capitalize`}
|
|
style={{
|
|
writingMode: !isCollapsed ? "vertical-rl" : "horizontal-tb",
|
|
}}
|
|
>
|
|
{selectedGroup === "created_by"
|
|
? createdBy
|
|
: selectedGroup === "assignees"
|
|
? assignees
|
|
: addSpaceIfCamelCase(groupTitle)}
|
|
</h2>
|
|
<span className="ml-0.5 text-sm text-gray-500">{groupedByIssues[groupTitle].length}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
|
|
<button
|
|
type="button"
|
|
className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200"
|
|
onClick={() => {
|
|
setIsCollapsed((prevData) => !prevData);
|
|
}}
|
|
>
|
|
{isCollapsed ? (
|
|
<ArrowsPointingInIcon className="h-4 w-4" />
|
|
) : (
|
|
<ArrowsPointingOutIcon className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200"
|
|
onClick={addIssueToState}
|
|
>
|
|
<PlusIcon className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|