// react import React, { useEffect, useState } from "react"; // next import Link from "next/link"; import Image from "next/image"; // swr import useSWR, { mutate } from "swr"; // ui import { Listbox, Transition } from "@headlessui/react"; // icons import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline"; // types import { IIssue, IssueResponse, IState, NestedKeyOf, Properties, WorkspaceMember } from "types"; // hooks import useUser from "lib/hooks/useUser"; // fetch keys import { PRIORITIES } from "constants/"; import { PROJECT_ISSUES_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys"; // services import issuesServices from "lib/services/issues.services"; import workspaceService from "lib/services/workspace.service"; // constants import { addSpaceIfCamelCase, classNames, renderShortNumericDateFormat, replaceUnderscoreIfSnakeCase, } from "constants/common"; import IssuePreviewModal from "../PreviewModal"; // types type Props = { properties: Properties; groupedByIssues: any; selectedGroup: NestedKeyOf | null; setSelectedIssue: any; handleDeleteIssue: React.Dispatch>; }; const ListView: React.FC = ({ properties, groupedByIssues, selectedGroup, setSelectedIssue, handleDeleteIssue, }) => { const [issuePreviewModal, setIssuePreviewModal] = useState(false); const [previewModalIssueId, setPreviewModalIssueId] = useState(null); const { activeWorkspace, activeProject, states } = useUser(); 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 { data: people } = useSWR( activeWorkspace ? WORKSPACE_MEMBERS : null, activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null ); const handleHover = (issueId: string) => { document.addEventListener("keydown", (e) => { // if (e.code === "Space") { // e.preventDefault(); // setPreviewModalIssueId(issueId); // setIssuePreviewModal(true); // } }); }; return (
{Object.keys(properties).map( (key) => properties[key as keyof Properties] && ( ) )} {Object.keys(groupedByIssues).map((singleGroup) => ( {selectedGroup !== null ? ( ) : null} {groupedByIssues[singleGroup].length > 0 ? groupedByIssues[singleGroup].map((issue: IIssue, index: number) => { const assignees = [ ...(issue?.assignees_list ?? []), ...(issue?.assignees ?? []), ]?.map( (assignee) => people?.find((p) => p.member.id === assignee)?.member.email ); return ( handleHover(issue.id)} > {Object.keys(properties).map( (key) => properties[key as keyof Properties] && ( {(key as keyof Properties) === "key" ? ( ) : (key as keyof Properties) === "priority" ? ( ) : (key as keyof Properties) === "assignee" ? ( ) : (key as keyof Properties) === "state" ? ( ) : (key as keyof Properties) === "target_date" ? ( ) : ( )} ) )} ); }) : null} ))}
NAME {replaceUnderscoreIfSnakeCase(key)} ACTIONS
{singleGroup === null || singleGroup === "null" ? selectedGroup === "priority" && "No priority" : addSpaceIfCamelCase(singleGroup)} {groupedByIssues[singleGroup as keyof IIssue].length}
{issue.name} {activeProject?.identifier}-{issue.sequence_id} { partialUpdateIssue({ priority: data }, issue.id); }} className="flex-shrink-0" > {({ open }) => ( <>
{issue.priority ?? "None"} {PRIORITIES?.map((priority) => ( classNames( active ? "bg-indigo-50" : "bg-white", "cursor-pointer capitalize select-none px-3 py-2" ) } value={priority} > {priority} ))}
)}
{ const newData = issue.assignees ?? []; if (newData.includes(data)) { newData.splice(newData.indexOf(data), 1); } else { newData.push(data); } partialUpdateIssue( { assignees_list: newData }, issue.id ); }} className="flex-shrink-0" > {({ open }) => ( <>
{() => { if (assignees.length > 0) return ( <> {assignees.map((assignee, index) => (
{assignee}
))} ); else return None; }}
{people?.map((person) => ( classNames( active ? "bg-indigo-50" : "bg-white", "cursor-pointer select-none px-3 py-2" ) } value={person.member.id} >
{person.member.avatar && person.member.avatar !== "" ? (
avatar
) : (

{person.member.first_name.charAt(0)}

)}

{person.member.first_name}

))}
)}
{ partialUpdateIssue({ state: data }, issue.id); }} className="flex-shrink-0" > {({ open }) => ( <>
{addSpaceIfCamelCase(issue.state_detail.name)} {states?.map((state) => ( classNames( active ? "bg-indigo-50" : "bg-white", "cursor-pointer select-none px-3 py-2" ) } value={state.id} > {addSpaceIfCamelCase(state.name)} ))}
)}
{issue.target_date ? renderShortNumericDateFormat(issue.target_date) : "-"} {issue[key as keyof IIssue] ?? (issue[key as keyof IIssue] as any)?.name ?? "None"}
); }; export default ListView;