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 { Popover, Transition } from "@headlessui/react"; // hoc import withAuth from "lib/hoc/withAuthWrapper"; // hooks import useUser from "lib/hooks/useUser"; import useIssuesProperties from "lib/hooks/useIssuesProperties"; // api routes import { PROJECT_MEMBERS } from "constants/api-routes"; // services import projectService from "lib/services/project.service"; // commons import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common"; // layouts import AppLayout from "layouts/AppLayout"; // hooks import useIssuesFilter from "lib/hooks/useIssuesFilter"; // 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, CustomMenu, BreadcrumbItem, Breadcrumbs } from "ui"; import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace"; import HeaderButton from "ui/HeaderButton"; // icons import { ChevronDownIcon, ListBulletIcon, RectangleStackIcon } from "@heroicons/react/24/outline"; import { PlusIcon, Squares2X2Icon } from "@heroicons/react/20/solid"; // types import type { IIssue, Properties, NestedKeyOf, ProjectMember } from "types"; const groupByOptions: Array<{ name: string; key: NestedKeyOf | null }> = [ { name: "State", key: "state_detail.name" }, { name: "Priority", key: "priority" }, { name: "Created By", key: "created_by" }, { name: "None", key: null }, ]; const orderByOptions: Array<{ name: string; key: NestedKeyOf }> = [ { name: "Last created", key: "created_at" }, { name: "Last updated", key: "updated_at" }, { name: "Priority", key: "priority" }, ]; const filterIssueOptions: Array<{ name: string; key: "activeIssue" | "backlogIssue" | null; }> = [ { name: "All", key: null, }, { name: "Active Issues", key: "activeIssue", }, { name: "Backlog Issues", key: "backlogIssue", }, ]; const ProjectIssues: NextPage = () => { const [isOpen, setIsOpen] = useState(false); const [selectedIssue, setSelectedIssue] = useState< (IIssue & { actionType: "edit" | "delete" }) | undefined >(undefined); const [deleteIssue, setDeleteIssue] = useState(undefined); const { activeWorkspace, activeProject, issues: projectIssues } = useUser(); const router = useRouter(); const { projectId } = router.query; const [properties, setProperties] = useIssuesProperties( activeWorkspace?.slug, projectId as string ); const { data: members } = useSWR( activeWorkspace && activeProject ? PROJECT_MEMBERS(activeWorkspace.slug, activeProject.id) : null, activeWorkspace && activeProject ? () => projectService.projectMembers(activeWorkspace.slug, activeProject.id) : null, { onErrorRetry(err, _, __, revalidate, revalidateOpts) { if (err?.status === 403) return; setTimeout(() => revalidate(revalidateOpts), 5000); }, } ); const { issueView, setIssueView, groupByProperty, setGroupByProperty, groupedByIssues, setOrderBy, setFilterIssue, orderBy, filterIssue, } = useIssuesFilter(projectIssues); useEffect(() => { if (!isOpen) { const timer = setTimeout(() => { setSelectedIssue(undefined); clearTimeout(timer); }, 500); } }, [isOpen]); return ( setDeleteIssue(undefined)} isOpen={!!deleteIssue} data={projectIssues?.results.find((issue) => issue.id === deleteIssue)} /> {!projectIssues ? (
) : projectIssues.count > 0 ? ( <>

Project Issues

{({ open }) => ( <> View

Group by

option.key === groupByProperty) ?.name ?? "Select" } > {groupByOptions.map((option) => ( setGroupByProperty(option.key)} > {option.name} ))}

Order by

option.key === orderBy)?.name ?? "Select" } > {orderByOptions.map((option) => groupByProperty === "priority" && option.key === "priority" ? null : ( setOrderBy(option.key)} > {option.name} ) )}

Issue type

option.key === filterIssue) ?.name ?? "Select" } > {filterIssueOptions.map((option) => ( setFilterIssue(option.key)} > {option.name} ))}

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 withAuth(ProjectIssues);