// react import React, { useState } from "react"; // next import Link from "next/link"; import Image from "next/image"; // swr import useSWR from "swr"; // headless ui import { Disclosure, Listbox, Menu, Transition } from "@headlessui/react"; // ui import { CustomMenu, Spinner } from "ui"; // icons import { ChevronDownIcon, PlusIcon, CalendarDaysIcon, EllipsisHorizontalIcon, } from "@heroicons/react/24/outline"; import User from "public/user.png"; // components import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal"; // types import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types"; // services import workspaceService from "lib/services/workspace.service"; // hooks import useUser from "lib/hooks/useUser"; // fetch keys import { PRIORITIES } from "constants/"; import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; // constants import { addSpaceIfCamelCase, classNames, findHowManyDaysLeft, renderShortNumericDateFormat, } from "constants/common"; // types type Props = { properties: Properties; groupedByIssues: any; selectedGroup: NestedKeyOf | null; setSelectedIssue: any; handleDeleteIssue: React.Dispatch>; partialUpdateIssue: (formData: Partial, issueId: string) => void; }; const ListView: React.FC = ({ properties, groupedByIssues, selectedGroup, setSelectedIssue, handleDeleteIssue, partialUpdateIssue, }) => { const [isCreateIssuesModalOpen, setIsCreateIssuesModalOpen] = useState(false); const [preloadedData, setPreloadedData] = useState< (Partial & { actionType: "createIssue" | "edit" | "delete" }) | undefined >(undefined); const { activeWorkspace, activeProject, states } = useUser(); const { data: people } = useSWR( activeWorkspace ? WORKSPACE_MEMBERS : null, activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null ); return ( <>
{Object.keys(groupedByIssues).map((singleGroup) => ( {({ open }) => (
{selectedGroup !== null ? (

{singleGroup === null || singleGroup === "null" ? selectedGroup === "priority" && "No priority" : selectedGroup === "created_by" ? people?.find((p) => p.member.id === singleGroup)?.member ?.first_name ?? "Loading..." : addSpaceIfCamelCase(singleGroup)}

) : (

All Issues

)}

{groupedByIssues[singleGroup as keyof IIssue].length}

{groupedByIssues[singleGroup] ? ( groupedByIssues[singleGroup].length > 0 ? ( groupedByIssues[singleGroup].map((issue: IIssue) => { const assignees = [ ...(issue?.assignees_list ?? []), ...(issue?.assignees ?? []), ]?.map((assignee) => { const tempPerson = people?.find( (p) => p.member.id === assignee )?.member; return { avatar: tempPerson?.avatar, first_name: tempPerson?.first_name, email: tempPerson?.email, }; }); return (
{properties.priority && ( { partialUpdateIssue({ priority: data }, issue.id); }} className="group relative 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} ))}
Priority
{issue.priority ?? "None"}
)}
)} {properties.state && ( { partialUpdateIssue({ state: data }, issue.id); }} className="group relative 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)} ))}
State
{issue.state_detail.name}
)}
)} {properties.start_date && (
{issue.start_date ? renderShortNumericDateFormat(issue.start_date) : "N/A"}
Started at
{renderShortNumericDateFormat(issue.start_date ?? "")}
)} {properties.due_date && (
{issue.target_date ? renderShortNumericDateFormat(issue.target_date) : "N/A"}
Target date
{renderShortNumericDateFormat(issue.target_date ?? "")}
{issue.target_date && (issue.target_date < new Date().toISOString() ? `Due date has passed by ${findHowManyDaysLeft( issue.target_date )} days` : findHowManyDaysLeft(issue.target_date) <= 3 ? `Due date is in ${findHowManyDaysLeft( issue.target_date )} days` : "Due date")}
)} {properties.assignee && ( { 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="group relative flex-shrink-0" > {({ open }) => ( <>
{assignees.length > 0 ? ( assignees.map((assignee, index: number) => (
{assignee.avatar && assignee.avatar !== "" ? (
{assignee?.first_name}
) : (
{assignee.first_name?.charAt(0)}
)}
)) ) : (
No user
)}
{people?.map((person) => ( classNames( active ? "bg-indigo-50" : "bg-white", "cursor-pointer select-none p-2" ) } value={person.member.id} >
{person.member.avatar && person.member.avatar !== "" ? (
avatar
) : (
{person.member.first_name && person.member.first_name !== "" ? person.member.first_name.charAt(0) : person.member.email.charAt(0)}
)}

{person.member.first_name && person.member.first_name !== "" ? person.member.first_name : person.member.email}

))}
Assigned to
{issue.assignee_details?.length > 0 ? issue.assignee_details .map((assignee) => assignee.first_name) .join(", ") : "No one"}
)}
)} { setSelectedIssue({ ...issue, actionType: "edit", }); }} > Edit { handleDeleteIssue(issue.id); }} > Delete permanently
); }) ) : (

No issues.

) ) : (
)}
)}
))}
); }; export default ListView;