import React from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // services import issuesService from "services/issues.service"; import projectService from "services/project.service"; // hooks import useProjects from "hooks/use-projects"; // component import { Avatar, Icon } from "components/ui"; // icons import { PlusIcon } from "@heroicons/react/24/outline"; import { getPriorityIcon, getStateGroupIcon } from "components/icons"; // helpers import { addSpaceIfCamelCase } from "helpers/string.helper"; import { renderEmoji } from "helpers/emoji.helper"; // types import { IIssueViewProps, IState } from "types"; // fetch-keys import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys"; type Props = { currentState?: IState | null; groupTitle: string; addIssueToGroup: () => void; isCollapsed: boolean; setIsCollapsed: React.Dispatch>; disableUserActions: boolean; disableAddIssue: boolean; viewProps: IIssueViewProps; }; export const BoardHeader: React.FC = ({ currentState, groupTitle, addIssueToGroup, isCollapsed, setIsCollapsed, disableUserActions, disableAddIssue, viewProps, }) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { groupedIssues, groupByProperty: selectedGroup } = viewProps; const { data: issueLabels } = useSWR( workspaceSlug && projectId && selectedGroup === "labels" ? PROJECT_ISSUE_LABELS(projectId.toString()) : null, workspaceSlug && projectId && selectedGroup === "labels" ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString()) : null ); const { data: members } = useSWR( workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees") ? PROJECT_MEMBERS(projectId.toString()) : null, workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees") ? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString()) : null ); const { projects } = useProjects(); const getGroupTitle = () => { let title = addSpaceIfCamelCase(groupTitle); switch (selectedGroup) { case "state": title = addSpaceIfCamelCase(currentState?.name ?? ""); break; case "labels": title = issueLabels?.find((label) => label.id === groupTitle)?.name ?? "None"; break; case "project": title = projects?.find((p) => p.id === groupTitle)?.name ?? "None"; break; case "assignees": case "created_by": const member = members?.find((member) => member.member.id === groupTitle)?.member; title = member ? member.display_name : "None"; break; } return title; }; const getGroupIcon = () => { let icon; switch (selectedGroup) { case "state": icon = currentState && getStateGroupIcon(currentState.group, "16", "16", currentState.color); break; case "state_detail.group": icon = getStateGroupIcon(groupTitle as any, "16", "16"); break; case "priority": icon = getPriorityIcon(groupTitle, "text-lg"); break; case "project": const project = projects?.find((p) => p.id === groupTitle); icon = project && (project.emoji !== null ? renderEmoji(project.emoji) : project.icon_prop !== null ? renderEmoji(project.icon_prop) : null); break; case "labels": const labelColor = issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000"; icon = ( ); break; case "assignees": case "created_by": const member = members?.find((member) => member.member.id === groupTitle)?.member; icon = member ? : <>; break; } return icon; }; return (
{getGroupIcon()}

{getGroupTitle()}

{groupedIssues?.[groupTitle].length ?? 0}
{!disableAddIssue && !disableUserActions && selectedGroup !== "created_by" && ( )}
); };