// next import type { NextPage } from "next"; import Link from "next/link"; // react import React, { useState } from "react"; // swr import useSWR from "swr"; // layouts import AdminLayout from "layouts/AdminLayout"; // hooks import useUser from "lib/hooks/useUser"; import useIssuesProperties from "lib/hooks/useIssuesProperties"; // components import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal"; import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown"; // ui import { Spinner } from "ui"; import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs"; import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace"; import HeaderButton from "ui/HeaderButton"; import { Menu, Popover, Transition } from "@headlessui/react"; // icons import { ChevronDownIcon, PlusIcon, RectangleStackIcon } from "@heroicons/react/24/outline"; // services import userService from "lib/services/user.service"; // types import { IIssue, NestedKeyOf, Properties, WorkspaceMember } from "types"; // constants import { USER_ISSUE, WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { classNames, groupBy, renderShortNumericDateFormat, replaceUnderscoreIfSnakeCase, } from "constants/common"; import { EyeIcon, EyeSlashIcon } from "@heroicons/react/20/solid"; import workspaceService from "lib/services/workspace.service"; import useTheme from "lib/hooks/useTheme"; const MyIssues: NextPage = () => { const [isOpen, setIsOpen] = useState(false); const { user, activeWorkspace, activeProject } = useUser(); const { issueView, setIssueView, groupByProperty, setGroupByProperty } = useTheme(); const { data: myIssues } = useSWR( user ? USER_ISSUE : null, user ? () => userService.userIssues() : null ); const [properties, setProperties] = useIssuesProperties( activeWorkspace?.slug, activeProject?.id as string ); const { data: people } = useSWR( activeWorkspace ? WORKSPACE_MEMBERS : null, activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null ); const groupByOptions: Array<{ name: string; key: NestedKeyOf }> = [ { name: "State", key: "state_detail.name" }, { name: "Priority", key: "priority" }, { name: "Created By", key: "created_by" }, ]; const groupedByIssues: { [key: string]: IIssue[]; } = groupBy(myIssues ?? [], groupByProperty ?? ""); return ( {myIssues ? ( <> {myIssues.length > 0 ? (

My 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); }} />
{Object.keys(properties).map( (key) => properties[key as keyof Properties] && ( ) )} {myIssues.map((myIssue, index) => ( {Object.keys(properties).map( (key) => properties[key as keyof Properties] && ( ) )} ))}
{replaceUnderscoreIfSnakeCase(key)}
{(key as keyof Properties) === "name" ? (

{myIssue.name}

) : (key as keyof Properties) === "key" ? (

{activeProject?.identifier}-{myIssue.sequence_id}

) : (key as keyof Properties) === "description" ? (

{myIssue.description}

) : (key as keyof Properties) === "state" ? ( ) : (key as keyof Properties) === "assignee" ? (
{myIssue.assignees && myIssue.assignees.length > 0 ? myIssue.assignees.map((assignee, index) => (

{ people?.find((p) => p.member.id === assignee) ?.member.email }

)) : "None"}
) : (key as keyof Properties) === "target_date" ? (

{myIssue.target_date ? renderShortNumericDateFormat(myIssue.target_date) : "-"}

) : (

{myIssue[key as keyof IIssue] ?? (myIssue[key as keyof IIssue] as any)?.name ?? "None"}

)}
) : (
Use{" "}
Ctrl/Command + I
{" "} shortcut to create a new issue } Icon={PlusIcon} action={() => setIsOpen(true)} />
)} ) : (
)}
); }; export default MyIssues;