mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
style: cycles, list view, kanban card
This commit is contained in:
Aaryan Khandelwal
parent
7ddfbd6a6b
commit
1337e02e63
@ -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">
|
||||||
|
<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">
|
||||||
|
<CalendarDaysIcon className="h-4 w-4" />
|
||||||
|
{issue.issue_details.start_date
|
||||||
|
? renderShortNumericDateFormat(
|
||||||
|
issue.issue_details.start_date
|
||||||
|
)
|
||||||
|
: "N/A"}
|
||||||
|
</div>
|
||||||
|
<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
|
<span
|
||||||
className="text-black rounded-md px-2 py-0.5 text-sm"
|
className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: `${issue.issue_details.state_detail?.color}20`,
|
backgroundColor: issue.issue_details.state_detail.color,
|
||||||
border: `2px solid ${issue.issue_details.state_detail?.color}`,
|
|
||||||
}}
|
}}
|
||||||
>
|
></span>
|
||||||
{issue.issue_details.state_detail?.name}
|
{addSpaceIfCamelCase(issue.issue_details.state_detail.name)}
|
||||||
</span>
|
</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,6 +277,7 @@ const CycleView: React.FC<Props> = ({
|
|||||||
</StrictModeDroppable>
|
</StrictModeDroppable>
|
||||||
</Disclosure.Panel>
|
</Disclosure.Panel>
|
||||||
</Transition>
|
</Transition>
|
||||||
|
<div className="p-3">
|
||||||
<Menu as="div" className="relative inline-block">
|
<Menu as="div" className="relative inline-block">
|
||||||
<Menu.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
|
<Menu.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
|
||||||
<PlusIcon className="h-3 w-3" />
|
<PlusIcon className="h-3 w-3" />
|
||||||
@ -305,6 +322,7 @@ const CycleView: React.FC<Props> = ({
|
|||||||
</Transition>
|
</Transition>
|
||||||
</Menu>
|
</Menu>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</Disclosure>
|
</Disclosure>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -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,88 +86,97 @@ const ListView: React.FC<Props> = ({
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<CreateUpdateIssuesModal
|
||||||
|
isOpen={isCreateIssuesModalOpen && preloadedData?.actionType === "createIssue"}
|
||||||
|
setIsOpen={setIsCreateIssuesModalOpen}
|
||||||
|
prePopulateData={{
|
||||||
|
...preloadedData,
|
||||||
|
}}
|
||||||
|
projectId={activeProject?.id as string}
|
||||||
|
/>
|
||||||
<div className="mt-4 flex flex-col space-y-5">
|
<div className="mt-4 flex flex-col space-y-5">
|
||||||
{Object.keys(groupedByIssues).map((singleGroup) => (
|
{Object.keys(groupedByIssues).map((singleGroup) => (
|
||||||
<div key={singleGroup} className="overflow-x-auto">
|
<Disclosure key={singleGroup} as="div" defaultOpen>
|
||||||
<div className="inline-block min-w-full p-0.5 align-middle">
|
{({ open }) => (
|
||||||
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
<div className="bg-white rounded-lg">
|
||||||
<table className="min-w-full">
|
<div className="bg-gray-100 px-4 py-3 rounded-t-lg">
|
||||||
|
<Disclosure.Button>
|
||||||
|
<div className="flex items-center gap-x-2">
|
||||||
|
<span>
|
||||||
|
<ChevronDownIcon
|
||||||
|
className={`h-4 w-4 text-gray-500 ${!open ? "transform -rotate-90" : ""}`}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
{selectedGroup !== null ? (
|
{selectedGroup !== null ? (
|
||||||
<thead className="bg-gray-100">
|
<h2 className="font-medium leading-5 capitalize">
|
||||||
<tr>
|
|
||||||
<th
|
|
||||||
colSpan={14}
|
|
||||||
scope="col"
|
|
||||||
className="px-3 py-3.5 text-left uppercase text-sm font-semibold text-gray-900"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{selectedGroup === "state_detail.name" ? (
|
|
||||||
<span
|
|
||||||
className="flex-shrink-0 h-1.5 w-1.5 block rounded-full"
|
|
||||||
style={{
|
|
||||||
backgroundColor: states?.find((s) => s.name === singleGroup)?.color,
|
|
||||||
}}
|
|
||||||
></span>
|
|
||||||
) : null}
|
|
||||||
{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>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
) : (
|
) : (
|
||||||
<thead className="bg-gray-100">
|
<h2 className="font-medium leading-5">All Issues</h2>
|
||||||
<tr>
|
|
||||||
<th
|
|
||||||
colSpan={14}
|
|
||||||
scope="col"
|
|
||||||
className="px-3 py-3.5 text-left uppercase text-sm font-semibold text-gray-900"
|
|
||||||
>
|
|
||||||
ALL ISSUES
|
|
||||||
<span className="ml-2 text-gray-500 font-normal text-sm">
|
|
||||||
{groupedByIssues[singleGroup as keyof IIssue].length}
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
)}
|
)}
|
||||||
<tbody className="bg-white">
|
<p className="text-gray-500 text-sm">
|
||||||
{groupedByIssues[singleGroup].length > 0
|
{groupedByIssues[singleGroup as keyof IIssue].length}
|
||||||
? groupedByIssues[singleGroup].map((issue: IIssue, index: number) => {
|
</p>
|
||||||
|
</div>
|
||||||
|
</Disclosure.Button>
|
||||||
|
</div>
|
||||||
|
<Transition
|
||||||
|
show={open}
|
||||||
|
enter="transition duration-100 ease-out"
|
||||||
|
enterFrom="transform opacity-0"
|
||||||
|
enterTo="transform opacity-100"
|
||||||
|
leave="transition duration-75 ease-out"
|
||||||
|
leaveFrom="transform opacity-100"
|
||||||
|
leaveTo="transform opacity-0"
|
||||||
|
>
|
||||||
|
<Disclosure.Panel>
|
||||||
|
<div className="divide-y-2">
|
||||||
|
{groupedByIssues[singleGroup] ? (
|
||||||
|
groupedByIssues[singleGroup].length > 0 ? (
|
||||||
|
groupedByIssues[singleGroup].map((issue: IIssue) => {
|
||||||
const assignees = [
|
const assignees = [
|
||||||
...(issue?.assignees_list ?? []),
|
...(issue?.assignees_list ?? []),
|
||||||
...(issue?.assignees ?? []),
|
...(issue?.assignees ?? []),
|
||||||
]?.map(
|
]?.map((assignee) => {
|
||||||
(assignee) => people?.find((p) => p.member.id === assignee)?.member.email
|
const tempPerson = people?.find(
|
||||||
);
|
(p) => p.member.id === assignee
|
||||||
|
)?.member;
|
||||||
|
|
||||||
|
return {
|
||||||
|
avatar: tempPerson?.avatar,
|
||||||
|
first_name: tempPerson?.first_name,
|
||||||
|
email: tempPerson?.email,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr
|
<div
|
||||||
key={issue.id}
|
key={issue.id}
|
||||||
className={classNames(
|
className="group px-4 py-3 text-sm rounded flex items-center justify-between"
|
||||||
index === 0 ? "border-gray-300" : "border-gray-200",
|
|
||||||
"border-t"
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 w-[15rem]">
|
<div className="flex items-center gap-2">
|
||||||
<Link href={`/projects/${issue.project}/issues/${issue.id}`}>
|
<span
|
||||||
<a className="hover:text-theme duration-300">{issue.name}</a>
|
className={`h-1.5 w-1.5 block rounded-full`}
|
||||||
</Link>
|
style={{
|
||||||
</td>
|
backgroundColor: issue.state_detail.color,
|
||||||
{Object.keys(properties).map(
|
}}
|
||||||
(key) =>
|
/>
|
||||||
properties[key as keyof Properties] && (
|
<Link href={`/projects/${activeProject?.id}/issues/${issue.id}`}>
|
||||||
<React.Fragment key={key}>
|
<a className="flex items-center gap-2">
|
||||||
{(key as keyof Properties) === "key" ? (
|
{properties.key && (
|
||||||
<td className="px-3 py-4 font-medium text-gray-900 text-xs whitespace-nowrap">
|
<span className="flex-shrink-0 text-xs text-gray-500">
|
||||||
{activeProject?.identifier}-{issue.sequence_id}
|
{activeProject?.identifier}-{issue.sequence_id}
|
||||||
</td>
|
</span>
|
||||||
) : (key as keyof Properties) === "priority" ? (
|
)}
|
||||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
|
<span>{issue.name}</span>
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="flex-shrink-0 flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
|
||||||
|
{properties.priority && (
|
||||||
<Listbox
|
<Listbox
|
||||||
as="div"
|
as="div"
|
||||||
value={issue.priority}
|
value={issue.priority}
|
||||||
@ -158,16 +187,21 @@ const ListView: React.FC<Props> = ({
|
|||||||
>
|
>
|
||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
<>
|
<>
|
||||||
<div className="">
|
<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">
|
<Listbox.Button
|
||||||
<span
|
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={classNames(
|
issue.priority === "urgent"
|
||||||
issue.priority ? "" : "text-gray-900",
|
? "bg-red-100 text-red-600"
|
||||||
"hidden truncate capitalize sm:block w-16"
|
: 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"}
|
{issue.priority ?? "None"}
|
||||||
</span>
|
|
||||||
</Listbox.Button>
|
</Listbox.Button>
|
||||||
|
|
||||||
<Transition
|
<Transition
|
||||||
@ -198,107 +232,8 @@ const ListView: React.FC<Props> = ({
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Listbox>
|
</Listbox>
|
||||||
</td>
|
|
||||||
) : (key as keyof Properties) === "assignee" ? (
|
|
||||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
|
|
||||||
<Listbox
|
|
||||||
as="div"
|
|
||||||
value={issue.assignees}
|
|
||||||
onChange={(data: any) => {
|
|
||||||
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 }) => (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<Listbox.Button className="rounded-full bg-gray-50 px-5 py-1 text-xs text-gray-500 hover:bg-gray-100 border">
|
|
||||||
{() => {
|
|
||||||
if (assignees.length > 0)
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{assignees.map((assignee, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className={
|
|
||||||
"hidden truncate sm:block text-left"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{assignee}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
else return <span>None</span>;
|
|
||||||
}}
|
|
||||||
</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">
|
|
||||||
{people?.map((person) => (
|
|
||||||
<Listbox.Option
|
|
||||||
key={person.id}
|
|
||||||
className={({ active }) =>
|
|
||||||
classNames(
|
|
||||||
active ? "bg-indigo-50" : "bg-white",
|
|
||||||
"cursor-pointer select-none px-3 py-2"
|
|
||||||
)
|
|
||||||
}
|
|
||||||
value={person.member.id}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`flex items-center gap-x-1 ${
|
|
||||||
assignees.includes(
|
|
||||||
person.member.first_name
|
|
||||||
)
|
|
||||||
? "font-medium"
|
|
||||||
: "font-normal"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{person.member.avatar &&
|
|
||||||
person.member.avatar !== "" ? (
|
|
||||||
<div className="relative w-4 h-4">
|
|
||||||
<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>
|
{properties.state && (
|
||||||
</div>
|
|
||||||
</Listbox.Option>
|
|
||||||
))}
|
|
||||||
</Listbox.Options>
|
|
||||||
</Transition>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Listbox>
|
|
||||||
</td>
|
|
||||||
) : (key as keyof Properties) === "state" ? (
|
|
||||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
|
|
||||||
<Listbox
|
<Listbox
|
||||||
as="div"
|
as="div"
|
||||||
value={issue.state}
|
value={issue.state}
|
||||||
@ -310,21 +245,14 @@ const ListView: React.FC<Props> = ({
|
|||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
<>
|
<>
|
||||||
<div>
|
<div>
|
||||||
<Listbox.Button
|
<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">
|
||||||
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
|
<span
|
||||||
className={classNames(
|
className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
|
||||||
issue.state ? "" : "text-gray-900",
|
style={{
|
||||||
"hidden capitalize sm:block w-16"
|
backgroundColor: issue.state_detail.color,
|
||||||
)}
|
}}
|
||||||
>
|
></span>
|
||||||
{addSpaceIfCamelCase(issue.state_detail.name)}
|
{addSpaceIfCamelCase(issue.state_detail.name)}
|
||||||
</span>
|
|
||||||
</Listbox.Button>
|
</Listbox.Button>
|
||||||
|
|
||||||
<Transition
|
<Transition
|
||||||
@ -355,28 +283,183 @@ const ListView: React.FC<Props> = ({
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Listbox>
|
</Listbox>
|
||||||
</td>
|
)}
|
||||||
) : (key as keyof Properties) === "target_date" ? (
|
{properties.start_date && (
|
||||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 whitespace-nowrap">
|
<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">
|
||||||
|
<CalendarDaysIcon className="h-4 w-4" />
|
||||||
|
{issue.start_date
|
||||||
|
? renderShortNumericDateFormat(issue.start_date)
|
||||||
|
: "N/A"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{properties.target_date && (
|
||||||
|
<div
|
||||||
|
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
|
||||||
|
? ""
|
||||||
|
: issue.target_date < new Date().toISOString()
|
||||||
|
? "text-red-600"
|
||||||
|
: findHowManyDaysLeft(issue.target_date) <= 3 &&
|
||||||
|
"text-orange-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<CalendarDaysIcon className="h-4 w-4" />
|
||||||
{issue.target_date
|
{issue.target_date
|
||||||
? renderShortNumericDateFormat(issue.target_date)
|
? renderShortNumericDateFormat(issue.target_date)
|
||||||
: "-"}
|
: "N/A"}
|
||||||
</td>
|
{issue.target_date && (
|
||||||
|
<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">
|
||||||
|
{issue.target_date < new Date().toISOString()
|
||||||
|
? `Target date has passed by ${findHowManyDaysLeft(
|
||||||
|
issue.target_date
|
||||||
|
)} days`
|
||||||
|
: findHowManyDaysLeft(issue.target_date) <= 3
|
||||||
|
? `Target date is in ${findHowManyDaysLeft(
|
||||||
|
issue.target_date
|
||||||
|
)} days`
|
||||||
|
: "Target date"}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{properties.assignee && (
|
||||||
|
<Listbox
|
||||||
|
as="div"
|
||||||
|
value={issue.assignees}
|
||||||
|
onChange={(data: any) => {
|
||||||
|
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="relative flex-shrink-0"
|
||||||
|
>
|
||||||
|
{({ open }) => (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<Listbox.Button>
|
||||||
|
<div className="flex items-center gap-1 text-xs cursor-pointer">
|
||||||
|
{assignees.length > 0 ? (
|
||||||
|
assignees.map((assignee, index: number) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={`relative z-[1] h-5 w-5 rounded-full ${
|
||||||
|
index !== 0 ? "-ml-2.5" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{assignee.avatar && assignee.avatar !== "" ? (
|
||||||
|
<div className="h-5 w-5 border-2 bg-white border-white rounded-full">
|
||||||
|
<Image
|
||||||
|
src={assignee.avatar}
|
||||||
|
height="100%"
|
||||||
|
width="100%"
|
||||||
|
className="rounded-full"
|
||||||
|
alt={assignee?.first_name}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative capitalize">
|
<div
|
||||||
{issue[key as keyof IIssue] ??
|
className={`h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
|
||||||
(issue[key as keyof IIssue] as any)?.name ??
|
>
|
||||||
"None"}
|
{assignee.first_name?.charAt(0)}
|
||||||
</td>
|
</div>
|
||||||
)}
|
)}
|
||||||
</React.Fragment>
|
</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>
|
||||||
|
</Listbox.Button>
|
||||||
|
|
||||||
|
<Transition
|
||||||
|
show={open}
|
||||||
|
as={React.Fragment}
|
||||||
|
leave="transition ease-in duration-100"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
{people?.map((person) => (
|
||||||
|
<Listbox.Option
|
||||||
|
key={person.id}
|
||||||
|
className={({ active }) =>
|
||||||
|
classNames(
|
||||||
|
active ? "bg-indigo-50" : "bg-white",
|
||||||
|
"cursor-pointer select-none px-3 py-2"
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
value={person.member.id}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`flex items-center gap-x-1 ${
|
||||||
|
assignees.includes({
|
||||||
|
avatar: person.member.avatar,
|
||||||
|
first_name: person.member.first_name,
|
||||||
|
email: person.member.email,
|
||||||
|
})
|
||||||
|
? "font-medium"
|
||||||
|
: "font-normal"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{person.member.avatar &&
|
||||||
|
person.member.avatar !== "" ? (
|
||||||
|
<div className="relative h-4 w-4">
|
||||||
|
<Image
|
||||||
|
src={person.member.avatar}
|
||||||
|
alt="avatar"
|
||||||
|
className="rounded-full"
|
||||||
|
layout="fill"
|
||||||
|
objectFit="cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<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 !== ""
|
||||||
|
? person.member.first_name.charAt(0)
|
||||||
|
: person.member.email.charAt(0)}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
<td className="px-3">
|
<p>
|
||||||
<div className="flex justify-end items-center gap-2">
|
{person.member.first_name &&
|
||||||
|
person.member.first_name !== ""
|
||||||
|
? person.member.first_name
|
||||||
|
: person.member.email}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Listbox.Option>
|
||||||
|
))}
|
||||||
|
</Listbox.Options>
|
||||||
|
</Transition>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Listbox>
|
||||||
|
)}
|
||||||
|
<Menu as="div" className="relative">
|
||||||
|
<Menu.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
|
<button
|
||||||
type="button"
|
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"
|
className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedIssue({
|
setSelectedIssue({
|
||||||
...issue,
|
...issue,
|
||||||
@ -384,30 +467,68 @@ const ListView: React.FC<Props> = ({
|
|||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<PencilIcon className="h-3 w-3" />
|
Edit
|
||||||
</button>
|
</button>
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item>
|
||||||
|
<div className="hover:bg-gray-100 border-b last:border-0">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
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"
|
className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
handleDeleteIssue(issue.id);
|
handleDeleteIssue(issue.id);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TrashIcon className="h-3 w-3" />
|
Delete permanently
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</Menu.Item>
|
||||||
</tr>
|
</Menu.Items>
|
||||||
|
</Menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
: null}
|
) : (
|
||||||
</tbody>
|
<p className="text-sm px-4 py-3 text-gray-500">No issues.</p>
|
||||||
</table>
|
)
|
||||||
</div>
|
) : (
|
||||||
|
<div className="h-full w-full flex items-center justify-center">
|
||||||
|
<Spinner />
|
||||||
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
</Disclosure>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -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
BIN
apps/app/public/user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Loading…
Reference in New Issue
Block a user