import React, { useEffect, useState } from "react"; // next import type { NextPage } from "next"; import { useRouter } from "next/router"; // swr import useSWR, { mutate } from "swr"; // headless ui import { Popover, Transition } from "@headlessui/react"; // hoc import withAuth from "lib/hoc/withAuthWrapper"; // services import issuesServices from "lib/services/issues.service"; // 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/app-layout"; // 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/confirm-issue-deletion"; import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal"; // ui import { Spinner, CustomMenu, BreadcrumbItem, Breadcrumbs, EmptySpace, EmptySpaceItem, HeaderButton, } from "ui"; // icons import { ChevronDownIcon, ListBulletIcon, RectangleStackIcon } from "@heroicons/react/24/outline"; import { PlusIcon, Squares2X2Icon } from "@heroicons/react/20/solid"; // types import type { IIssue, Properties, NestedKeyOf, IssueResponse } from "types"; // fetch-keys import { PROJECT_ISSUES_LIST } from "constants/fetch-keys"; const groupByOptions: Array<{ name: string; key: NestedKeyOf | null }> = [ { name: "State", key: "state_detail.name" }, { name: "Priority", key: "priority" }, { name: "Cycle", key: "issue_cycle.cycle_detail.name" }, { 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 partialUpdateIssue = (formData: Partial, issueId: string) => { if (!activeWorkspace || !activeProject) return; issuesServices .patchIssue(activeWorkspace.slug, activeProject.id, issueId, formData) .then((response) => { mutate( PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id), (prevData) => ({ ...(prevData as IssueResponse), results: prevData?.results.map((issue) => (issue.id === response.id ? response : issue)) ?? [], }), false ); }) .catch((error) => { console.log(error); }); }; const { issueView, setIssueView, groupByProperty, setGroupByProperty, groupedByIssues, setOrderBy, setFilterIssue, orderBy, filterIssue, } = useIssuesFilter(projectIssues?.results ?? []); useEffect(() => { if (!isOpen) { const timer = setTimeout(() => { setSelectedIssue(undefined); clearTimeout(timer); }, 500); } }, [isOpen]); return ( } right={
{({ 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); }} />
} > setDeleteIssue(undefined)} isOpen={!!deleteIssue} data={projectIssues?.results.find((issue) => issue.id === deleteIssue)} /> {!projectIssues ? (
) : projectIssues.count > 0 ? ( <> {issueView === "list" ? ( ) : (
)} ) : (
Use
Ctrl/Command + I
{" "} shortcut to create a new issue } Icon={PlusIcon} action={() => setIsOpen(true)} />
)}
); }; export default withAuth(ProjectIssues);