// react import React, { useEffect, useState } from "react"; // next import type { NextPage } from "next"; import { useRouter } from "next/router"; // swr import useSWR from "swr"; // headless ui import { Menu, Popover, Transition } from "@headlessui/react"; // services import stateServices from "lib/services/state.services"; import issuesServices from "lib/services/issues.services"; // hooks import useUser from "lib/hooks/useUser"; import useTheme from "lib/hooks/useTheme"; import useIssuesProperties from "lib/hooks/useIssuesProperties"; // fetching keys import { PROJECT_ISSUES_LIST, STATE_LIST } from "constants/fetch-keys"; // commons import { groupBy } from "constants/common"; // layouts import AdminLayout from "layouts/AdminLayout"; // components import ListView from "components/project/issues/ListView"; import BoardView from "components/project/issues/BoardView"; import ConfirmIssueDeletion from "components/project/issues/ConfirmIssueDeletion"; import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal"; // ui import { Spinner } from "ui"; import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace"; import HeaderButton from "ui/HeaderButton"; import { BreadcrumbItem, Breadcrumbs } from "ui"; // icons import { ChevronDownIcon, ListBulletIcon, RectangleStackIcon } from "@heroicons/react/24/outline"; import { PlusIcon, EyeIcon, EyeSlashIcon, Squares2X2Icon } from "@heroicons/react/20/solid"; // types import type { IIssue, IssueResponse, Properties, IState, NestedKeyOf, ProjectMember } from "types"; import { PROJECT_MEMBERS } from "constants/api-routes"; import projectService from "lib/services/project.service"; const PRIORITIES = ["high", "medium", "low"]; const ProjectIssues: NextPage = () => { const [isOpen, setIsOpen] = useState(false); const { issueView, setIssueView, groupByProperty, setGroupByProperty } = useTheme(); const [selectedIssue, setSelectedIssue] = useState< (IIssue & { actionType: "edit" | "delete" }) | undefined >(undefined); const [editIssue, setEditIssue] = useState(); const [deleteIssue, setDeleteIssue] = useState(undefined); const { activeWorkspace, activeProject } = useUser(); const router = useRouter(); const { projectId } = router.query; const [properties, setProperties] = useIssuesProperties( activeWorkspace?.slug, projectId as string ); const { data: projectIssues } = useSWR( projectId && activeWorkspace ? PROJECT_ISSUES_LIST(activeWorkspace.slug, projectId as string) : null, activeWorkspace && projectId ? () => issuesServices.getIssues(activeWorkspace.slug, projectId as string) : null ); const { data: states } = useSWR( activeWorkspace && activeProject ? STATE_LIST(activeProject.id) : null, activeWorkspace && activeProject ? () => stateServices.getStates(activeWorkspace.slug, activeProject.id) : null ); const { data: members } = useSWR( activeWorkspace && activeProject ? PROJECT_MEMBERS : null, activeWorkspace && activeProject ? () => projectService.projectMembers(activeWorkspace.slug, activeProject.id) : null ); useEffect(() => { if (!isOpen) { const timer = setTimeout(() => { setSelectedIssue(undefined); clearTimeout(timer); }, 500); } }, [isOpen]); const groupedByIssues: { [key: string]: IIssue[]; } = { ...(groupByProperty === "state_detail.name" ? Object.fromEntries( states ?.sort((a, b) => a.sequence - b.sequence) ?.map((state) => [ state.name, projectIssues?.results.filter((issue) => issue.state === state.name) ?? [], ]) ?? [] ) : groupByProperty === "priority" ? Object.fromEntries( PRIORITIES.map((priority) => [ priority, projectIssues?.results.filter((issue) => issue.priority === priority) ?? [], ]) ) : {}), ...groupBy(projectIssues?.results ?? [], groupByProperty ?? ""), }; const groupByOptions: Array<{ name: string; key: NestedKeyOf }> = [ { name: "State", key: "state_detail.name" }, { name: "Priority", key: "priority" }, { name: "Created By", key: "created_by" }, ]; return ( setDeleteIssue(undefined)} isOpen={!!deleteIssue} data={projectIssues?.results.find((issue) => issue.id === deleteIssue)} />
{!projectIssues ? (
) : projectIssues.count > 0 ? (

Project Issues

{groupByOptions.find((option) => option.key === groupByProperty)?.name ?? "No Grouping"}
{groupByOptions.map((option) => ( {({ active }) => ( )} ))} {issueView === "list" ? ( {({ active }) => ( )} ) : null}
{({ open }) => ( <> Properties
{Object.keys(properties).map((key) => ( ))}
)}
{ const e = new KeyboardEvent("keydown", { key: "i", ctrlKey: true, }); document.dispatchEvent(e); }} />
{issueView === "list" ? ( ) : ( )}
) : (
Use
Ctrl/Command + I
{" "} shortcut to create a new issue } Icon={PlusIcon} action={() => setIsOpen(true)} />
)}
); }; export default ProjectIssues;