github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: cycles, list view, kanban card

Browse Source
This commit is contained in:
Aaryan Khandelwal 2022-12-08 23:42:11 +05:30
parent 7ddfbd6a6b
commit 1337e02e63
5 changed files with 562 additions and 412 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
apps/app/components/project/cycles/CycleView.tsx
View File

@ -21,10 +21,11 @@ import type { CycleViewProps as Props, CycleIssueResponse, IssueResponse } from
// fetch keys // fetch keys
import { CYCLE_ISSUES } from "constants/fetch-keys"; import { CYCLE_ISSUES } from "constants/fetch-keys";
// constants // constants
import { renderShortNumericDateFormat } from "constants/common"; import { addSpaceIfCamelCase, renderShortNumericDateFormat } from "constants/common";
import issuesServices from "lib/services/issues.services"; import issuesServices from "lib/services/issues.services";
import StrictModeDroppable from "components/dnd/StrictModeDroppable"; import StrictModeDroppable from "components/dnd/StrictModeDroppable";
import { Draggable } from "react-beautiful-dnd"; import { Draggable } from "react-beautiful-dnd";
import { CalendarDaysIcon } from "@heroicons/react/24/outline";
const CycleView: React.FC<Props> = ({ const CycleView: React.FC<Props> = ({
cycle, cycle,
@ -70,14 +71,13 @@ const CycleView: React.FC<Props> = ({
/> />
<Disclosure as="div" defaultOpen> <Disclosure as="div" defaultOpen>
{({ open }) => ( {({ open }) => (
<div className="bg-white px-4 py-2 rounded-lg space-y-3"> <div className="bg-white rounded-lg">
<div className="flex items-center"> <div className="flex justify-between items-center bg-gray-100 px-4 py-3 rounded-t-lg">
<Disclosure.Button className="w-full"> <Disclosure.Button>
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<span> <span>
<ChevronDownIcon <ChevronDownIcon
width={22} className={`h-4 w-4 text-gray-500 ${!open ? "transform -rotate-90" : ""}`}
className={`text-gray-500 ${!open ? "transform -rotate-90" : ""}`}
/> />
</span> </span>
<h2 className="font-medium leading-5">{cycle.name}</h2> <h2 className="font-medium leading-5">{cycle.name}</h2>
@ -93,11 +93,15 @@ const CycleView: React.FC<Props> = ({
{cycle.end_date ? renderShortNumericDateFormat(cycle.end_date) : ""} {cycle.end_date ? renderShortNumericDateFormat(cycle.end_date) : ""}
</span> </span>
</p> </p>
<p className="text-gray-500 text-sm ml-0.5">{cycleIssues?.length}</p>
</div> </div>
</Disclosure.Button> </Disclosure.Button>
<Menu as="div" className="relative inline-block"> <Menu as="div" className="relative inline-block">
<Menu.Button className="grid place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none"> <Menu.Button
as="button"
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none`}
>
<EllipsisHorizontalIcon className="h-4 w-4" /> <EllipsisHorizontalIcon className="h-4 w-4" />
</Menu.Button> </Menu.Button>
<Menu.Items className="absolute origin-top-right right-0 mt-1 p-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10"> <Menu.Items className="absolute origin-top-right right-0 mt-1 p-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
@ -134,7 +138,11 @@ const CycleView: React.FC<Props> = ({
<Disclosure.Panel> <Disclosure.Panel>
<StrictModeDroppable droppableId={cycle.id}> <StrictModeDroppable droppableId={cycle.id}>
{(provided) => ( {(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}> <div
ref={provided.innerRef}
{...provided.droppableProps}
className="divide-y-2"
>
{cycleIssues ? ( {cycleIssues ? (
cycleIssues.length > 0 ? ( cycleIssues.length > 0 ? (
cycleIssues.map((issue, index) => ( cycleIssues.map((issue, index) => (
@ -145,7 +153,7 @@ const CycleView: React.FC<Props> = ({
> >
{(provided, snapshot) => ( {(provided, snapshot) => (
<div <div
className={`group p-2 hover:bg-gray-100 text-sm rounded flex items-center justify-between ${ className={`group px-2 py-3 text-sm rounded flex items-center justify-between ${
snapshot.isDragging snapshot.isDragging
? "bg-gray-100 shadow-lg border border-theme" ? "bg-gray-100 shadow-lg border border-theme"
: "" : ""
@ -156,7 +164,7 @@ const CycleView: React.FC<Props> = ({
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
type="button" type="button"
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 rotate-90 outline-none`} className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 rotate-90 outline-none`}
{...provided.dragHandleProps} {...provided.dragHandleProps}
> >
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" /> <EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
@ -172,29 +180,37 @@ const CycleView: React.FC<Props> = ({
href={`/projects/${projectId}/issues/${issue.issue_details.id}`} href={`/projects/${projectId}/issues/${issue.issue_details.id}`}
> >
<a className="flex items-center gap-2"> <a className="flex items-center gap-2">
<span className="text-xs text-gray-500"> <span className="flex-shrink-0 text-xs text-gray-500">
{activeProject?.identifier}- {activeProject?.identifier}-
{issue.issue_details.sequence_id} {issue.issue_details.sequence_id}
</span> </span>
{issue.issue_details.name} <span>{issue.issue_details.name}</span>
{/* {cycle.id} */} {/* {cycle.id} */}
</a> </a>
</Link> </Link>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span <div className="flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
className="text-black rounded-md px-2 py-0.5 text-sm" <CalendarDaysIcon className="h-4 w-4" />
style={{ {issue.issue_details.start_date
backgroundColor: `${issue.issue_details.state_detail?.color}20`, ? renderShortNumericDateFormat(
border: `2px solid ${issue.issue_details.state_detail?.color}`, issue.issue_details.start_date
}} )
> : "N/A"}
{issue.issue_details.state_detail?.name} </div>
</span> <div className="flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
<span
className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: issue.issue_details.state_detail.color,
}}
></span>
{addSpaceIfCamelCase(issue.issue_details.state_detail.name)}
</div>
<Menu as="div" className="relative"> <Menu as="div" className="relative">
<Menu.Button <Menu.Button
as="button" as="button"
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none`} className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 outline-none`}
> >
<EllipsisHorizontalIcon className="h-4 w-4" /> <EllipsisHorizontalIcon className="h-4 w-4" />
</Menu.Button> </Menu.Button>
@ -261,49 +277,51 @@ const CycleView: React.FC<Props> = ({
</StrictModeDroppable> </StrictModeDroppable>
</Disclosure.Panel> </Disclosure.Panel>
</Transition> </Transition>
<Menu as="div" className="relative inline-block"> <div className="p-3">
<Menu.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium"> <Menu as="div" className="relative inline-block">
<PlusIcon className="h-3 w-3" /> <Menu.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
Add issue <PlusIcon className="h-3 w-3" />
</Menu.Button> Add issue
</Menu.Button>
<Transition <Transition
as={React.Fragment} as={React.Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75" leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items className="absolute left-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10"> <Menu.Items className="absolute left-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
<div className="p-1"> <div className="p-1">
<Menu.Item as="div"> <Menu.Item as="div">
{(active) => ( {(active) => (
<button <button
type="button" type="button"
className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full" className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
onClick={() => openIssueModal(cycle.id)} onClick={() => openIssueModal(cycle.id)}
> >
Create new Create new
</button> </button>
)} )}
</Menu.Item> </Menu.Item>
<Menu.Item as="div"> <Menu.Item as="div">
{(active) => ( {(active) => (
<button <button
type="button" type="button"
className="p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap" className="p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
onClick={() => setCycleIssuesListModal(true)} onClick={() => setCycleIssuesListModal(true)}
> >
Add an existing issue Add an existing issue
</button> </button>
)} )}
</Menu.Item> </Menu.Item>
</div> </div>
</Menu.Items> </Menu.Items>
</Transition> </Transition>
</Menu> </Menu>
</div>
</div> </div>
)} )}
</Disclosure> </Disclosure>

35
apps/app/components/project/issues/BoardView/SingleBoard.tsx
View File

@ -1,15 +1,10 @@
import React, { useState } from "react"; import React, { useState } from "react";
// Next imports // Next imports
import Link from "next/link"; import Link from "next/link";
import Image from "next/image";
// React beautiful dnd // React beautiful dnd
import { Draggable } from "react-beautiful-dnd"; import { Draggable } from "react-beautiful-dnd";
import StrictModeDroppable from "components/dnd/StrictModeDroppable"; import StrictModeDroppable from "components/dnd/StrictModeDroppable";
// common
import {
addSpaceIfCamelCase,
findHowManyDaysLeft,
renderShortNumericDateFormat,
} from "constants/common";
// types // types
import { IIssue, Properties, NestedKeyOf } from "types"; import { IIssue, Properties, NestedKeyOf } from "types";
// icons // icons
@ -20,7 +15,13 @@ import {
EllipsisHorizontalIcon, EllipsisHorizontalIcon,
PlusIcon, PlusIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import Image from "next/image"; import User from "public/user.png";
// common
import {
addSpaceIfCamelCase,
findHowManyDaysLeft,
renderShortNumericDateFormat,
} from "constants/common";
import { getPriorityIcon } from "constants/global"; import { getPriorityIcon } from "constants/global";
type Props = { type Props = {
@ -193,17 +194,19 @@ const SingleBoard: React.FC<Props> = ({
{properties.priority && ( {properties.priority && (
<div <div
className={`rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${ className={`rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
childIssue.priority === "high" childIssue.priority === "urgent"
? "bg-red-100 text-red-600" ? "bg-red-100 text-red-600"
: childIssue.priority === "medium" : childIssue.priority === "high"
? "bg-orange-100 text-orange-500" ? "bg-orange-100 text-orange-500"
: childIssue.priority === "medium"
? "bg-yellow-100 text-yellow-500"
: childIssue.priority === "low" : childIssue.priority === "low"
? "bg-green-100 text-green-500" ? "bg-green-100 text-green-500"
: "hidden" : "bg-gray-100"
}`} }`}
> >
{/* {getPriorityIcon(childIssue.priority ?? "")} */} {/* {getPriorityIcon(childIssue.priority ?? "")} */}
{childIssue.priority} {childIssue.priority ?? "None"}
</div> </div>
)} )}
{properties.state && ( {properties.state && (
@ -285,7 +288,15 @@ const SingleBoard: React.FC<Props> = ({
) )
) )
) : ( ) : (
<span>No assignee.</span> <div className="h-5 w-5 border-2 bg-white border-white rounded-full">
<Image
src={User}
height="100%"
width="100%"
className="rounded-full"
alt="No user"
/>
</div>
)} )}
</div> </div>
)} )}

791
apps/app/components/project/issues/ListView/index.tsx
View File

@ -5,10 +5,20 @@ import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
// swr // swr
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
// headless ui
import { Disclosure, Listbox, Menu, Transition } from "@headlessui/react";
// ui // ui
import { Listbox, Transition } from "@headlessui/react"; import { Spinner } from "ui";
// icons // icons
import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline"; import {
ChevronDownIcon,
PlusIcon,
CalendarDaysIcon,
EllipsisHorizontalIcon,
} from "@heroicons/react/24/outline";
import User from "public/user.png";
// components
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
// types // types
import { IIssue, IssueResponse, NestedKeyOf, Properties, WorkspaceMember } from "types"; import { IIssue, IssueResponse, NestedKeyOf, Properties, WorkspaceMember } from "types";
// hooks // hooks
@ -20,7 +30,12 @@ import { PROJECT_ISSUES_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
import issuesServices from "lib/services/issues.services"; import issuesServices from "lib/services/issues.services";
import workspaceService from "lib/services/workspace.service"; import workspaceService from "lib/services/workspace.service";
// constants // constants
import { addSpaceIfCamelCase, classNames, renderShortNumericDateFormat } from "constants/common"; import {
addSpaceIfCamelCase,
classNames,
findHowManyDaysLeft,
renderShortNumericDateFormat,
} from "constants/common";
// types // types
type Props = { type Props = {
@ -38,6 +53,11 @@ const ListView: React.FC<Props> = ({
setSelectedIssue, setSelectedIssue,
handleDeleteIssue, handleDeleteIssue,
}) => { }) => {
const [isCreateIssuesModalOpen, setIsCreateIssuesModalOpen] = useState(false);
const [preloadedData, setPreloadedData] = useState<
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
>(undefined);
const { activeWorkspace, activeProject, states } = useUser(); const { activeWorkspace, activeProject, states } = useUser();
const partialUpdateIssue = (formData: Partial<IIssue>, issueId: string) => { const partialUpdateIssue = (formData: Partial<IIssue>, issueId: string) => {
@ -66,348 +86,449 @@ const ListView: React.FC<Props> = ({
); );
return ( return (
<div className="mt-4 flex flex-col space-y-5"> <>
{Object.keys(groupedByIssues).map((singleGroup) => ( <CreateUpdateIssuesModal
<div key={singleGroup} className="overflow-x-auto"> isOpen={isCreateIssuesModalOpen && preloadedData?.actionType === "createIssue"}
<div className="inline-block min-w-full p-0.5 align-middle"> setIsOpen={setIsCreateIssuesModalOpen}
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg"> prePopulateData={{
<table className="min-w-full"> ...preloadedData,
{selectedGroup !== null ? ( }}
<thead className="bg-gray-100"> projectId={activeProject?.id as string}
<tr> />
<th <div className="mt-4 flex flex-col space-y-5">
colSpan={14} {Object.keys(groupedByIssues).map((singleGroup) => (
scope="col" <Disclosure key={singleGroup} as="div" defaultOpen>
className="px-3 py-3.5 text-left uppercase text-sm font-semibold text-gray-900" {({ open }) => (
> <div className="bg-white rounded-lg">
<div className="flex items-center gap-2"> <div className="bg-gray-100 px-4 py-3 rounded-t-lg">
{selectedGroup === "state_detail.name" ? ( <Disclosure.Button>
<span <div className="flex items-center gap-x-2">
className="flex-shrink-0 h-1.5 w-1.5 block rounded-full" <span>
style={{ <ChevronDownIcon
backgroundColor: states?.find((s) => s.name === singleGroup)?.color, className={`h-4 w-4 text-gray-500 ${!open ? "transform -rotate-90" : ""}`}
}} />
></span> </span>
) : null} {selectedGroup !== null ? (
<h2 className="font-medium leading-5 capitalize">
{singleGroup === null || singleGroup === "null" {singleGroup === null || singleGroup === "null"
? selectedGroup === "priority" && "No priority" ? selectedGroup === "priority" && "No priority"
: addSpaceIfCamelCase(singleGroup)} : addSpaceIfCamelCase(singleGroup)}
<span className="ml-2 text-gray-500 font-normal text-sm"> </h2>
{groupedByIssues[singleGroup as keyof IIssue].length} ) : (
</span> <h2 className="font-medium leading-5">All Issues</h2>
</div> )}
</th> <p className="text-gray-500 text-sm">
</tr> {groupedByIssues[singleGroup as keyof IIssue].length}
</thead> </p>
) : ( </div>
<thead className="bg-gray-100"> </Disclosure.Button>
<tr> </div>
<th <Transition
colSpan={14} show={open}
scope="col" enter="transition duration-100 ease-out"
className="px-3 py-3.5 text-left uppercase text-sm font-semibold text-gray-900" enterFrom="transform opacity-0"
> enterTo="transform opacity-100"
ALL ISSUES leave="transition duration-75 ease-out"
<span className="ml-2 text-gray-500 font-normal text-sm"> leaveFrom="transform opacity-100"
{groupedByIssues[singleGroup as keyof IIssue].length} leaveTo="transform opacity-0"
</span> >
</th> <Disclosure.Panel>
</tr> <div className="divide-y-2">
</thead> {groupedByIssues[singleGroup] ? (
)} groupedByIssues[singleGroup].length > 0 ? (
<tbody className="bg-white"> groupedByIssues[singleGroup].map((issue: IIssue) => {
{groupedByIssues[singleGroup].length > 0 const assignees = [
? groupedByIssues[singleGroup].map((issue: IIssue, index: number) => { ...(issue?.assignees_list ?? []),
const assignees = [ ...(issue?.assignees ?? []),
...(issue?.assignees_list ?? []), ]?.map((assignee) => {
...(issue?.assignees ?? []), const tempPerson = people?.find(
]?.map( (p) => p.member.id === assignee
(assignee) => people?.find((p) => p.member.id === assignee)?.member.email )?.member;
);
return ( return {
<tr avatar: tempPerson?.avatar,
key={issue.id} first_name: tempPerson?.first_name,
className={classNames( email: tempPerson?.email,
index === 0 ? "border-gray-300" : "border-gray-200", };
"border-t" });
)}
> return (
<td className="px-3 py-4 text-sm font-medium text-gray-900 w-[15rem]"> <div
<Link href={`/projects/${issue.project}/issues/${issue.id}`}> key={issue.id}
<a className="hover:text-theme duration-300">{issue.name}</a> className="group px-4 py-3 text-sm rounded flex items-center justify-between"
</Link> >
</td> <div className="flex items-center gap-2">
{Object.keys(properties).map( <span
(key) => className={`h-1.5 w-1.5 block rounded-full`}
properties[key as keyof Properties] && ( style={{
<React.Fragment key={key}> backgroundColor: issue.state_detail.color,
{(key as keyof Properties) === "key" ? ( }}
<td className="px-3 py-4 font-medium text-gray-900 text-xs whitespace-nowrap"> />
{activeProject?.identifier}-{issue.sequence_id} <Link href={`/projects/${activeProject?.id}/issues/${issue.id}`}>
</td> <a className="flex items-center gap-2">
) : (key as keyof Properties) === "priority" ? ( {properties.key && (
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative"> <span className="flex-shrink-0 text-xs text-gray-500">
<Listbox {activeProject?.identifier}-{issue.sequence_id}
as="div" </span>
value={issue.priority} )}
onChange={(data: string) => { <span>{issue.name}</span>
partialUpdateIssue({ priority: data }, issue.id); </a>
}} </Link>
className="flex-shrink-0" </div>
> <div className="flex-shrink-0 flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
{({ open }) => ( {properties.priority && (
<> <Listbox
<div className=""> as="div"
<Listbox.Button className="inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-1 px-0.5 text-xs font-medium text-gray-500 hover:bg-gray-100 border"> value={issue.priority}
<span onChange={(data: string) => {
className={classNames( partialUpdateIssue({ priority: data }, issue.id);
issue.priority ? "" : "text-gray-900", }}
"hidden truncate capitalize sm:block w-16" className="flex-shrink-0"
)} >
{({ open }) => (
<>
<div>
<Listbox.Button
className={`rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
issue.priority === "urgent"
? "bg-red-100 text-red-600"
: issue.priority === "high"
? "bg-orange-100 text-orange-500"
: issue.priority === "medium"
? "bg-yellow-100 text-yellow-500"
: issue.priority === "low"
? "bg-green-100 text-green-500"
: "bg-gray-100"
}`}
>
{issue.priority ?? "None"}
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
{PRIORITIES?.map((priority) => (
<Listbox.Option
key={priority}
className={({ active }) =>
classNames(
active ? "bg-indigo-50" : "bg-white",
"cursor-pointer capitalize select-none px-3 py-2"
)
}
value={priority}
> >
{issue.priority ?? "None"} {priority}
</span> </Listbox.Option>
</Listbox.Button> ))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)}
{properties.state && (
<Listbox
as="div"
value={issue.state}
onChange={(data: string) => {
partialUpdateIssue({ state: data }, issue.id);
}}
className="flex-shrink-0"
>
{({ open }) => (
<>
<div>
<Listbox.Button className="flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
<span
className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: issue.state_detail.color,
}}
></span>
{addSpaceIfCamelCase(issue.state_detail.name)}
</Listbox.Button>
<Transition <Transition
show={open} show={open}
as={React.Fragment} as={React.Fragment}
leave="transition ease-in duration-100" leave="transition ease-in duration-100"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none"> <Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
{PRIORITIES?.map((priority) => ( {states?.map((state) => (
<Listbox.Option <Listbox.Option
key={priority} key={state.id}
className={({ active }) => className={({ active }) =>
classNames( classNames(
active ? "bg-indigo-50" : "bg-white", active ? "bg-indigo-50" : "bg-white",
"cursor-pointer capitalize select-none px-3 py-2" "cursor-pointer select-none px-3 py-2"
) )
} }
value={priority} value={state.id}
> >
{priority} {addSpaceIfCamelCase(state.name)}
</Listbox.Option> </Listbox.Option>
))} ))}
</Listbox.Options> </Listbox.Options>
</Transition> </Transition>
</div> </div>
</> </>
)} )}
</Listbox> </Listbox>
</td> )}
) : (key as keyof Properties) === "assignee" ? ( {properties.start_date && (
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative"> <div className="flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
<Listbox <CalendarDaysIcon className="h-4 w-4" />
as="div" {issue.start_date
value={issue.assignees} ? renderShortNumericDateFormat(issue.start_date)
onChange={(data: any) => { : "N/A"}
const newData = issue.assignees ?? []; </div>
if (newData.includes(data)) { )}
newData.splice(newData.indexOf(data), 1); {properties.target_date && (
} else { <div
newData.push(data); className={`flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
} issue.target_date === null
partialUpdateIssue( ? ""
{ assignees_list: newData }, : issue.target_date < new Date().toISOString()
issue.id ? "text-red-600"
); : findHowManyDaysLeft(issue.target_date) <= 3 &&
}} "text-orange-400"
className="flex-shrink-0" }`}
> >
{({ open }) => ( <CalendarDaysIcon className="h-4 w-4" />
<> {issue.target_date
<div> ? renderShortNumericDateFormat(issue.target_date)
<Listbox.Button className="rounded-full bg-gray-50 px-5 py-1 text-xs text-gray-500 hover:bg-gray-100 border"> : "N/A"}
{() => { {issue.target_date && (
if (assignees.length > 0) <span className="absolute -top-full mb-2 left-4 border transition-opacity opacity-0 group-hover:opacity-100 bg-white rounded px-2 py-1">
return ( {issue.target_date < new Date().toISOString()
<> ? `Target date has passed by ${findHowManyDaysLeft(
{assignees.map((assignee, index) => ( issue.target_date
<div )} days`
key={index} : findHowManyDaysLeft(issue.target_date) <= 3
className={ ? `Target date is in ${findHowManyDaysLeft(
"hidden truncate sm:block text-left" issue.target_date
} )} days`
> : "Target date"}
{assignee} </span>
</div> )}
))} </div>
</> )}
); {properties.assignee && (
else return <span>None</span>; <Listbox
}} as="div"
</Listbox.Button> value={issue.assignees}
onChange={(data: any) => {
<Transition const newData = issue.assignees ?? [];
show={open} if (newData.includes(data)) {
as={React.Fragment} newData.splice(newData.indexOf(data), 1);
leave="transition ease-in duration-100" } else {
leaveFrom="opacity-100" newData.push(data);
leaveTo="opacity-0" }
> partialUpdateIssue({ assignees_list: newData }, issue.id);
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none"> }}
{people?.map((person) => ( className="relative flex-shrink-0"
<Listbox.Option >
key={person.id} {({ open }) => (
className={({ active }) => <>
classNames( <div>
active ? "bg-indigo-50" : "bg-white", <Listbox.Button>
"cursor-pointer select-none px-3 py-2" <div className="flex items-center gap-1 text-xs cursor-pointer">
) {assignees.length > 0 ? (
} assignees.map((assignee, index: number) => (
value={person.member.id} <div
> key={index}
<div className={`relative z-[1] h-5 w-5 rounded-full ${
className={`flex items-center gap-x-1 ${ index !== 0 ? "-ml-2.5" : ""
assignees.includes( }`}
person.member.first_name >
) {assignee.avatar && assignee.avatar !== "" ? (
? "font-medium" <div className="h-5 w-5 border-2 bg-white border-white rounded-full">
: "font-normal" <Image
}`} src={assignee.avatar}
> height="100%"
{person.member.avatar && width="100%"
person.member.avatar !== "" ? ( className="rounded-full"
<div className="relative w-4 h-4"> alt={assignee?.first_name}
<Image />
src={person.member.avatar}
alt="avatar"
className="rounded-full"
layout="fill"
objectFit="cover"
/>
</div>
) : (
<p>
{person.member.first_name.charAt(0)}
</p>
)}
<p>{person.member.first_name}</p>
</div> </div>
</Listbox.Option> ) : (
))} <div
</Listbox.Options> className={`h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
</Transition> >
{assignee.first_name?.charAt(0)}
</div>
)}
</div>
))
) : (
<div className="h-5 w-5 border-2 bg-white border-white rounded-full">
<Image
src={User}
height="100%"
width="100%"
className="rounded-full"
alt="No user"
/>
</div>
)}
</div> </div>
</> </Listbox.Button>
)}
</Listbox>
</td>
) : (key as keyof Properties) === "state" ? (
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
<Listbox
as="div"
value={issue.state}
onChange={(data: string) => {
partialUpdateIssue({ state: data }, issue.id);
}}
className="flex-shrink-0"
>
{({ open }) => (
<>
<div>
<Listbox.Button
className="inline-flex items-center whitespace-nowrap rounded-full px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100 border"
style={{
border: `2px solid ${issue.state_detail.color}`,
backgroundColor: `${issue.state_detail.color}20`,
}}
>
<span
className={classNames(
issue.state ? "" : "text-gray-900",
"hidden capitalize sm:block w-16"
)}
>
{addSpaceIfCamelCase(issue.state_detail.name)}
</span>
</Listbox.Button>
<Transition <Transition
show={open} show={open}
as={React.Fragment} as={React.Fragment}
leave="transition ease-in duration-100" leave="transition ease-in duration-100"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none"> <Listbox.Options className="absolute right-0 z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
{states?.map((state) => ( {people?.map((person) => (
<Listbox.Option <Listbox.Option
key={state.id} key={person.id}
className={({ active }) => className={({ active }) =>
classNames( classNames(
active ? "bg-indigo-50" : "bg-white", active ? "bg-indigo-50" : "bg-white",
"cursor-pointer select-none px-3 py-2" "cursor-pointer select-none px-3 py-2"
) )
} }
value={state.id} value={person.member.id}
> >
{addSpaceIfCamelCase(state.name)} <div
</Listbox.Option> className={`flex items-center gap-x-1 ${
))} assignees.includes({
</Listbox.Options> avatar: person.member.avatar,
</Transition> first_name: person.member.first_name,
</div> email: person.member.email,
</> })
)} ? "font-medium"
</Listbox> : "font-normal"
</td> }`}
) : (key as keyof Properties) === "target_date" ? ( >
<td className="px-3 py-4 text-sm font-medium text-gray-900 whitespace-nowrap"> {person.member.avatar &&
{issue.target_date person.member.avatar !== "" ? (
? renderShortNumericDateFormat(issue.target_date) <div className="relative h-4 w-4">
: "-"} <Image
</td> src={person.member.avatar}
) : ( alt="avatar"
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative capitalize"> className="rounded-full"
{issue[key as keyof IIssue] ?? layout="fill"
(issue[key as keyof IIssue] as any)?.name ?? objectFit="cover"
"None"} />
</td> </div>
)} ) : (
</React.Fragment> <div className="h-4 w-4 bg-gray-700 text-white grid place-items-center capitalize rounded-full">
) {person.member.first_name &&
)} person.member.first_name !== ""
<td className="px-3"> ? person.member.first_name.charAt(0)
<div className="flex justify-end items-center gap-2"> : person.member.email.charAt(0)}
<button </div>
type="button" )}
className="flex items-center bg-blue-100 text-blue-600 hover:bg-blue-200 duration-300 font-medium px-2 py-1 rounded-md text-sm outline-none" <p>
onClick={() => { {person.member.first_name &&
setSelectedIssue({ person.member.first_name !== ""
...issue, ? person.member.first_name
actionType: "edit", : person.member.email}
}); </p>
}} </div>
> </Listbox.Option>
<PencilIcon className="h-3 w-3" /> ))}
</button> </Listbox.Options>
<button </Transition>
type="button" </div>
className="flex items-center bg-red-100 text-red-600 hover:bg-red-200 duration-300 font-medium px-2 py-1 rounded-md text-sm outline-none" </>
onClick={() => { )}
handleDeleteIssue(issue.id); </Listbox>
}} )}
> <Menu as="div" className="relative">
<TrashIcon className="h-3 w-3" /> <Menu.Button
</button> as="button"
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 outline-none`}
>
<EllipsisHorizontalIcon className="h-4 w-4" />
</Menu.Button>
<Menu.Items className="absolute origin-top-right right-0.5 mt-1 p-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
<Menu.Item>
<button
type="button"
className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
onClick={() => {
setSelectedIssue({
...issue,
actionType: "edit",
});
}}
>
Edit
</button>
</Menu.Item>
<Menu.Item>
<div className="hover:bg-gray-100 border-b last:border-0">
<button
type="button"
className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
onClick={() => {
handleDeleteIssue(issue.id);
}}
>
Delete permanently
</button>
</div>
</Menu.Item>
</Menu.Items>
</Menu>
</div>
</div> </div>
</td> );
</tr> })
); ) : (
}) <p className="text-sm px-4 py-3 text-gray-500">No issues.</p>
: null} )
</tbody> ) : (
</table> <div className="h-full w-full flex items-center justify-center">
</div> <Spinner />
</div> </div>
</div> )}
))} </div>
</div> </Disclosure.Panel>
</Transition>
<div className="p-3">
<button
type="button"
className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium"
onClick={() => {
setIsCreateIssuesModalOpen(true);
if (selectedGroup !== null) {
const stateId =
selectedGroup === "state_detail.name"
? states?.find((s) => s.name === singleGroup)?.id ?? null
: null;
setPreloadedData({
state: stateId !== null ? stateId : undefined,
[selectedGroup]: singleGroup,
actionType: "createIssue",
});
}
}}
>
<PlusIcon className="h-3 w-3" />
Add issue
</button>
</div>
</div>
)}
</Disclosure>
))}
</div>
</>
); );
}; };

2
apps/app/pages/projects/[projectId]/cycles.tsx
View File

@ -203,7 +203,7 @@ const ProjectSprints: NextPage = () => {
/> />
{cycles ? ( {cycles ? (
cycles.length > 0 ? ( cycles.length > 0 ? (
<div className="h-full w-full space-y-5"> <div className="w-full space-y-5">
<Breadcrumbs> <Breadcrumbs>
<BreadcrumbItem title="Projects" link="/projects" /> <BreadcrumbItem title="Projects" link="/projects" />
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Cycles`} /> <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Cycles`} />

BIN
apps/app/public/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB