Merge branch 'stage-release' of https://github.com/makeplane/plane
This commit is contained in:
Dakshesh Jain
commit
919c226f8a
65 changed files with 4986 additions and 2130 deletions
|
|
@ -1,327 +0,0 @@
|
|||
import React, { useState } from "react";
|
||||
// Next imports
|
||||
import Link from "next/link";
|
||||
// React beautiful dnd
|
||||
import { Draggable } from "react-beautiful-dnd";
|
||||
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
||||
// common
|
||||
import {
|
||||
addSpaceIfCamelCase,
|
||||
findHowManyDaysLeft,
|
||||
renderShortNumericDateFormat,
|
||||
} from "constants/common";
|
||||
// types
|
||||
import { IIssue, Properties, NestedKeyOf } from "types";
|
||||
// icons
|
||||
import {
|
||||
ArrowsPointingInIcon,
|
||||
ArrowsPointingOutIcon,
|
||||
CalendarDaysIcon,
|
||||
EllipsisHorizontalIcon,
|
||||
PlusIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import Image from "next/image";
|
||||
import { getPriorityIcon } from "constants/global";
|
||||
|
||||
type Props = {
|
||||
selectedGroup: NestedKeyOf<IIssue> | null;
|
||||
groupTitle: string;
|
||||
groupedByIssues: {
|
||||
[key: string]: IIssue[];
|
||||
};
|
||||
index: number;
|
||||
setIsIssueOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
properties: Properties;
|
||||
setPreloadedData: React.Dispatch<
|
||||
React.SetStateAction<
|
||||
| (Partial<IIssue> & {
|
||||
actionType: "createIssue" | "edit" | "delete";
|
||||
})
|
||||
| undefined
|
||||
>
|
||||
>;
|
||||
bgColor?: string;
|
||||
stateId: string | null;
|
||||
createdBy: string | null;
|
||||
};
|
||||
|
||||
const SingleBoard: React.FC<Props> = ({
|
||||
selectedGroup,
|
||||
groupTitle,
|
||||
groupedByIssues,
|
||||
index,
|
||||
setIsIssueOpen,
|
||||
properties,
|
||||
setPreloadedData,
|
||||
bgColor = "#0f2b16",
|
||||
stateId,
|
||||
createdBy,
|
||||
}) => {
|
||||
// Collapse/Expand
|
||||
const [show, setState] = useState<any>(true);
|
||||
|
||||
if (selectedGroup === "priority")
|
||||
groupTitle === "high"
|
||||
? (bgColor = "#dc2626")
|
||||
: groupTitle === "medium"
|
||||
? (bgColor = "#f97316")
|
||||
: groupTitle === "low"
|
||||
? (bgColor = "#22c55e")
|
||||
: (bgColor = "#ff0000");
|
||||
|
||||
return (
|
||||
<Draggable draggableId={groupTitle} index={index}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`rounded flex-shrink-0 h-full ${
|
||||
snapshot.isDragging ? "border-theme shadow-lg" : ""
|
||||
} ${!show ? "" : "w-80 bg-gray-50 border"}`}
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
>
|
||||
<div className={`${!show ? "" : "h-full space-y-3 overflow-y-auto flex flex-col"}`}>
|
||||
<div
|
||||
className={`flex justify-between p-3 pb-0 ${
|
||||
!show ? "flex-col bg-gray-50 rounded-md border" : ""
|
||||
}`}
|
||||
>
|
||||
<div className={`flex items-center ${!show ? "flex-col gap-2" : "gap-1"}`}>
|
||||
<button
|
||||
type="button"
|
||||
{...provided.dragHandleProps}
|
||||
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
|
||||
!show ? "" : "rotate-90"
|
||||
} ${selectedGroup !== "state_detail.name" ? "hidden" : ""}`}
|
||||
>
|
||||
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
|
||||
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600 mt-[-0.7rem]" />
|
||||
</button>
|
||||
<div
|
||||
className={`flex items-center gap-x-1 px-2 bg-slate-900 rounded-md cursor-pointer ${
|
||||
!show ? "py-2 mb-2 flex-col gap-y-2" : ""
|
||||
}`}
|
||||
style={{
|
||||
border: `2px solid ${bgColor}`,
|
||||
backgroundColor: `${bgColor}20`,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={`w-3 h-3 block rounded-full ${!show ? "" : "mr-1"}`}
|
||||
style={{
|
||||
backgroundColor: Boolean(bgColor) ? bgColor : undefined,
|
||||
}}
|
||||
/>
|
||||
<h2
|
||||
className={`text-[0.9rem] font-medium capitalize`}
|
||||
style={{
|
||||
writingMode: !show ? "vertical-rl" : "horizontal-tb",
|
||||
}}
|
||||
>
|
||||
{groupTitle === null || groupTitle === "null"
|
||||
? "None"
|
||||
: createdBy
|
||||
? createdBy
|
||||
: addSpaceIfCamelCase(groupTitle)}
|
||||
</h2>
|
||||
<span className="text-gray-500 text-sm ml-0.5">
|
||||
{groupedByIssues[groupTitle].length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`flex items-center ${!show ? "flex-col pb-2" : ""}`}>
|
||||
<button
|
||||
type="button"
|
||||
className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"
|
||||
onClick={() => {
|
||||
setState(!show);
|
||||
}}
|
||||
>
|
||||
{show ? (
|
||||
<ArrowsPointingInIcon className="h-4 w-4" />
|
||||
) : (
|
||||
<ArrowsPointingOutIcon className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"
|
||||
onClick={() => {
|
||||
setIsIssueOpen(true);
|
||||
if (selectedGroup !== null)
|
||||
setPreloadedData({
|
||||
state: stateId !== null ? stateId : undefined,
|
||||
[selectedGroup]: groupTitle,
|
||||
actionType: "createIssue",
|
||||
});
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`mt-3 space-y-3 h-full overflow-y-auto px-3 pb-3 ${
|
||||
snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
|
||||
} ${!show ? "hidden" : "block"}`}
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{groupedByIssues[groupTitle].map((childIssue, index: number) => (
|
||||
<Draggable key={childIssue.id} draggableId={childIssue.id} index={index}>
|
||||
{(provided, snapshot) => (
|
||||
<Link href={`/projects/${childIssue.project}/issues/${childIssue.id}`}>
|
||||
<a
|
||||
className={`group block border rounded bg-white shadow-sm ${
|
||||
snapshot.isDragging ? "border-indigo-600 shadow-lg bg-indigo-50" : ""
|
||||
}`}
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
>
|
||||
<div className="p-2 select-none" {...provided.dragHandleProps}>
|
||||
{properties.key && (
|
||||
<div className="text-xs font-medium text-gray-500 mb-2">
|
||||
{childIssue.project_detail?.identifier}-{childIssue.sequence_id}
|
||||
</div>
|
||||
)}
|
||||
<h5 className="group-hover:text-theme text-sm break-all mb-3">
|
||||
{childIssue.name}
|
||||
</h5>
|
||||
<div className="flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
|
||||
{properties.priority && (
|
||||
<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 ${
|
||||
childIssue.priority === "high"
|
||||
? "bg-red-100 text-red-600"
|
||||
: childIssue.priority === "medium"
|
||||
? "bg-orange-100 text-orange-500"
|
||||
: childIssue.priority === "low"
|
||||
? "bg-green-100 text-green-500"
|
||||
: "hidden"
|
||||
}`}
|
||||
>
|
||||
{/* {getPriorityIcon(childIssue.priority ?? "")} */}
|
||||
{childIssue.priority}
|
||||
</div>
|
||||
)}
|
||||
{properties.state && (
|
||||
<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: childIssue.state_detail.color }}
|
||||
></span>
|
||||
{addSpaceIfCamelCase(childIssue.state_detail.name)}
|
||||
</div>
|
||||
)}
|
||||
{properties.start_date && (
|
||||
<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" />
|
||||
{childIssue.start_date
|
||||
? renderShortNumericDateFormat(childIssue.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 ${
|
||||
childIssue.target_date === null
|
||||
? ""
|
||||
: childIssue.target_date < new Date().toISOString()
|
||||
? "text-red-600"
|
||||
: findHowManyDaysLeft(childIssue.target_date) <= 3 &&
|
||||
"text-orange-400"
|
||||
}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-4 w-4" />
|
||||
{childIssue.target_date
|
||||
? renderShortNumericDateFormat(childIssue.target_date)
|
||||
: "N/A"}
|
||||
{childIssue.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">
|
||||
{childIssue.target_date < new Date().toISOString()
|
||||
? `Target date has passed by ${findHowManyDaysLeft(
|
||||
childIssue.target_date
|
||||
)} days`
|
||||
: findHowManyDaysLeft(childIssue.target_date) <= 3
|
||||
? `Target date is in ${findHowManyDaysLeft(
|
||||
childIssue.target_date
|
||||
)} days`
|
||||
: "Target date"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{properties.assignee && (
|
||||
<div className="justify-end w-full flex items-center gap-1 text-xs">
|
||||
{childIssue?.assignee_details?.length > 0 ? (
|
||||
childIssue?.assignee_details?.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.name}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={`h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
|
||||
>
|
||||
{assignee.first_name.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<span>No assignee.</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center text-xs font-medium hover:bg-gray-200 p-2 rounded duration-300 outline-none"
|
||||
onClick={() => {
|
||||
setIsIssueOpen(true);
|
||||
if (selectedGroup !== null) {
|
||||
setPreloadedData({
|
||||
state: stateId !== null ? stateId : undefined,
|
||||
[selectedGroup]: groupTitle,
|
||||
actionType: "createIssue",
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-3 w-3 mr-1" />
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</StrictModeDroppable>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleBoard;
|
||||
|
|
@ -14,15 +14,14 @@ import useUser from "lib/hooks/useUser";
|
|||
// fetching keys
|
||||
import { STATE_LIST } from "constants/fetch-keys";
|
||||
// components
|
||||
import SingleBoard from "components/project/issues/BoardView/SingleBoard";
|
||||
import SingleBoard from "components/project/issues/BoardView/single-board";
|
||||
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
||||
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
|
||||
// ui
|
||||
import { Spinner } from "ui";
|
||||
// types
|
||||
import type { IState, IIssue, Properties, NestedKeyOf, IProjectMember } from "types";
|
||||
import ConfirmIssueDeletion from "../ConfirmIssueDeletion";
|
||||
import { TrashIcon } from "@heroicons/react/24/outline";
|
||||
import ConfirmIssueDeletion from "../confirm-issue-deletion";
|
||||
|
||||
type Props = {
|
||||
properties: Properties;
|
||||
|
|
@ -31,9 +30,18 @@ type Props = {
|
|||
[key: string]: IIssue[];
|
||||
};
|
||||
members: IProjectMember[] | undefined;
|
||||
handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||
partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
|
||||
};
|
||||
|
||||
const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues, members }) => {
|
||||
const BoardView: React.FC<Props> = ({
|
||||
properties,
|
||||
selectedGroup,
|
||||
groupedByIssues,
|
||||
members,
|
||||
handleDeleteIssue,
|
||||
partialUpdateIssue,
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const [isIssueOpen, setIsIssueOpen] = useState(false);
|
||||
|
|
@ -217,6 +225,8 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
|
|||
? states?.find((s) => s.name === singleGroup)?.color
|
||||
: undefined
|
||||
}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
609
apps/app/components/project/issues/BoardView/single-board.tsx
Normal file
609
apps/app/components/project/issues/BoardView/single-board.tsx
Normal file
|
|
@ -0,0 +1,609 @@
|
|||
// react
|
||||
import React, { useState } from "react";
|
||||
// next
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
// react-beautiful-dnd
|
||||
import { Draggable } from "react-beautiful-dnd";
|
||||
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
||||
// services
|
||||
import workspaceService from "lib/services/workspace.service";
|
||||
// hooks
|
||||
import useUser from "lib/hooks/useUser";
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import {
|
||||
ArrowsPointingInIcon,
|
||||
ArrowsPointingOutIcon,
|
||||
CalendarDaysIcon,
|
||||
EllipsisHorizontalIcon,
|
||||
PlusIcon,
|
||||
TrashIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import User from "public/user.png";
|
||||
// common
|
||||
import { PRIORITIES } from "constants/";
|
||||
import {
|
||||
addSpaceIfCamelCase,
|
||||
classNames,
|
||||
findHowManyDaysLeft,
|
||||
renderShortNumericDateFormat,
|
||||
} from "constants/common";
|
||||
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
import { getPriorityIcon } from "constants/global";
|
||||
// types
|
||||
import { IIssue, Properties, NestedKeyOf, IWorkspaceMember } from "types";
|
||||
|
||||
type Props = {
|
||||
selectedGroup: NestedKeyOf<IIssue> | null;
|
||||
groupTitle: string;
|
||||
groupedByIssues: {
|
||||
[key: string]: IIssue[];
|
||||
};
|
||||
index: number;
|
||||
setIsIssueOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
properties: Properties;
|
||||
setPreloadedData: React.Dispatch<
|
||||
React.SetStateAction<
|
||||
| (Partial<IIssue> & {
|
||||
actionType: "createIssue" | "edit" | "delete";
|
||||
})
|
||||
| undefined
|
||||
>
|
||||
>;
|
||||
bgColor?: string;
|
||||
stateId: string | null;
|
||||
createdBy: string | null;
|
||||
handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||
partialUpdateIssue: (formData: Partial<IIssue>, childIssueId: string) => void;
|
||||
};
|
||||
|
||||
const SingleBoard: React.FC<Props> = ({
|
||||
selectedGroup,
|
||||
groupTitle,
|
||||
groupedByIssues,
|
||||
index,
|
||||
setIsIssueOpen,
|
||||
properties,
|
||||
setPreloadedData,
|
||||
bgColor = "#0f2b16",
|
||||
stateId,
|
||||
createdBy,
|
||||
handleDeleteIssue,
|
||||
partialUpdateIssue,
|
||||
}) => {
|
||||
// Collapse/Expand
|
||||
const [show, setShow] = useState(true);
|
||||
|
||||
const { activeProject, activeWorkspace, states } = useUser();
|
||||
|
||||
if (selectedGroup === "priority")
|
||||
groupTitle === "high"
|
||||
? (bgColor = "#dc2626")
|
||||
: groupTitle === "medium"
|
||||
? (bgColor = "#f97316")
|
||||
: groupTitle === "low"
|
||||
? (bgColor = "#22c55e")
|
||||
: (bgColor = "#ff0000");
|
||||
|
||||
const { data: people } = useSWR<IWorkspaceMember[]>(
|
||||
activeWorkspace ? WORKSPACE_MEMBERS : null,
|
||||
activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
|
||||
);
|
||||
|
||||
return (
|
||||
<Draggable draggableId={groupTitle} index={index}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`rounded flex-shrink-0 h-full ${
|
||||
snapshot.isDragging ? "border-theme shadow-lg" : ""
|
||||
} ${!show ? "" : "w-80 bg-gray-50 border"}`}
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
>
|
||||
<div className={`${!show ? "" : "h-full space-y-3 overflow-y-auto flex flex-col"}`}>
|
||||
<div
|
||||
className={`flex justify-between p-3 pb-0 ${
|
||||
!show ? "flex-col bg-gray-50 rounded-md border" : ""
|
||||
}`}
|
||||
>
|
||||
<div className={`flex items-center ${!show ? "flex-col gap-2" : "gap-1"}`}>
|
||||
<button
|
||||
type="button"
|
||||
{...provided.dragHandleProps}
|
||||
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
|
||||
!show ? "" : "rotate-90"
|
||||
} ${selectedGroup !== "state_detail.name" ? "hidden" : ""}`}
|
||||
>
|
||||
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
|
||||
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600 mt-[-0.7rem]" />
|
||||
</button>
|
||||
<div
|
||||
className={`flex items-center gap-x-1 px-2 bg-slate-900 rounded-md cursor-pointer ${
|
||||
!show ? "py-2 mb-2 flex-col gap-y-2" : ""
|
||||
}`}
|
||||
style={{
|
||||
border: `2px solid ${bgColor}`,
|
||||
backgroundColor: `${bgColor}20`,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={`w-3 h-3 block rounded-full ${!show ? "" : "mr-1"}`}
|
||||
style={{
|
||||
backgroundColor: Boolean(bgColor) ? bgColor : undefined,
|
||||
}}
|
||||
/>
|
||||
<h2
|
||||
className={`text-[0.9rem] font-medium capitalize`}
|
||||
style={{
|
||||
writingMode: !show ? "vertical-rl" : "horizontal-tb",
|
||||
}}
|
||||
>
|
||||
{groupTitle === null || groupTitle === "null"
|
||||
? "None"
|
||||
: createdBy
|
||||
? createdBy
|
||||
: addSpaceIfCamelCase(groupTitle)}
|
||||
</h2>
|
||||
<span className="text-gray-500 text-sm ml-0.5">
|
||||
{groupedByIssues[groupTitle].length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`flex items-center ${!show ? "flex-col pb-2" : ""}`}>
|
||||
<button
|
||||
type="button"
|
||||
className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"
|
||||
onClick={() => {
|
||||
setShow(!show);
|
||||
}}
|
||||
>
|
||||
{show ? (
|
||||
<ArrowsPointingInIcon className="h-4 w-4" />
|
||||
) : (
|
||||
<ArrowsPointingOutIcon className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"
|
||||
onClick={() => {
|
||||
setIsIssueOpen(true);
|
||||
if (selectedGroup !== null)
|
||||
setPreloadedData({
|
||||
state: stateId !== null ? stateId : undefined,
|
||||
[selectedGroup]: groupTitle,
|
||||
actionType: "createIssue",
|
||||
});
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`mt-3 space-y-3 h-full overflow-y-auto px-3 pb-3 ${
|
||||
snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
|
||||
} ${!show ? "hidden" : "block"}`}
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{groupedByIssues[groupTitle].map((childIssue, index: number) => {
|
||||
const assignees = [
|
||||
...(childIssue?.assignees_list ?? []),
|
||||
...(childIssue?.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 (
|
||||
<Draggable key={childIssue.id} draggableId={childIssue.id} index={index}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`border rounded bg-white shadow-sm ${
|
||||
snapshot.isDragging ? "border-theme shadow-lg bg-indigo-50" : ""
|
||||
}`}
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
>
|
||||
<div
|
||||
className="group/card relative p-2 select-none"
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<div className="opacity-0 group-hover/card:opacity-100 absolute top-1 right-1">
|
||||
<button
|
||||
type="button"
|
||||
className="h-7 w-7 p-1 grid place-items-center rounded text-red-500 hover:bg-red-50 duration-300 outline-none"
|
||||
onClick={() => handleDeleteIssue(childIssue.id)}
|
||||
>
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<Link
|
||||
href={`/projects/${childIssue.project}/issues/${childIssue.id}`}
|
||||
>
|
||||
<a>
|
||||
{properties.key && (
|
||||
<div className="text-xs font-medium text-gray-500 mb-2">
|
||||
{activeProject?.identifier}-{childIssue.sequence_id}
|
||||
</div>
|
||||
)}
|
||||
<h5
|
||||
className="group-hover:text-theme text-sm break-all mb-3"
|
||||
style={{ lineClamp: 3, WebkitLineClamp: 3 }}
|
||||
>
|
||||
{childIssue.name}
|
||||
</h5>
|
||||
</a>
|
||||
</Link>
|
||||
<div className="flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
|
||||
{properties.priority && (
|
||||
<Listbox
|
||||
as="div"
|
||||
value={childIssue.priority}
|
||||
onChange={(data: string) => {
|
||||
partialUpdateIssue({ priority: data }, childIssue.id);
|
||||
}}
|
||||
className="group relative 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 ${
|
||||
childIssue.priority === "urgent"
|
||||
? "bg-red-100 text-red-600"
|
||||
: childIssue.priority === "high"
|
||||
? "bg-orange-100 text-orange-500"
|
||||
: childIssue.priority === "medium"
|
||||
? "bg-yellow-100 text-yellow-500"
|
||||
: childIssue.priority === "low"
|
||||
? "bg-green-100 text-green-500"
|
||||
: "bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
{childIssue.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}
|
||||
>
|
||||
{priority}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
|
||||
<h5 className="font-medium mb-1 text-gray-900">
|
||||
Priority
|
||||
</h5>
|
||||
<div
|
||||
className={`capitalize ${
|
||||
childIssue.priority === "urgent"
|
||||
? "text-red-600"
|
||||
: childIssue.priority === "high"
|
||||
? "text-orange-500"
|
||||
: childIssue.priority === "medium"
|
||||
? "text-yellow-500"
|
||||
: childIssue.priority === "low"
|
||||
? "text-green-500"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{childIssue.priority ?? "None"}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
)}
|
||||
{properties.state && (
|
||||
<Listbox
|
||||
as="div"
|
||||
value={childIssue.state}
|
||||
onChange={(data: string) => {
|
||||
partialUpdateIssue({ state: data }, childIssue.id);
|
||||
}}
|
||||
className="group relative 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: childIssue.state_detail.color,
|
||||
}}
|
||||
></span>
|
||||
{addSpaceIfCamelCase(childIssue.state_detail.name)}
|
||||
</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">
|
||||
{states?.map((state) => (
|
||||
<Listbox.Option
|
||||
key={state.id}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
active ? "bg-indigo-50" : "bg-white",
|
||||
"cursor-pointer select-none px-3 py-2"
|
||||
)
|
||||
}
|
||||
value={state.id}
|
||||
>
|
||||
{addSpaceIfCamelCase(state.name)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
|
||||
<h5 className="font-medium mb-1">State</h5>
|
||||
<div>{childIssue.state_detail.name}</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
)}
|
||||
{properties.start_date && (
|
||||
<div className="group 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" />
|
||||
{childIssue.start_date
|
||||
? renderShortNumericDateFormat(childIssue.start_date)
|
||||
: "N/A"}
|
||||
<div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
|
||||
<h5 className="font-medium mb-1">Started at</h5>
|
||||
<div>
|
||||
{renderShortNumericDateFormat(childIssue.start_date ?? "")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{properties.target_date && (
|
||||
<div
|
||||
className={`group 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 ${
|
||||
childIssue.target_date === null
|
||||
? ""
|
||||
: childIssue.target_date < new Date().toISOString()
|
||||
? "text-red-600"
|
||||
: findHowManyDaysLeft(childIssue.target_date) <= 3 &&
|
||||
"text-orange-400"
|
||||
}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-4 w-4" />
|
||||
{childIssue.target_date
|
||||
? renderShortNumericDateFormat(childIssue.target_date)
|
||||
: "N/A"}
|
||||
<div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
|
||||
<h5 className="font-medium mb-1 text-gray-900">
|
||||
Target date
|
||||
</h5>
|
||||
<div>
|
||||
{renderShortNumericDateFormat(childIssue.target_date ?? "")}
|
||||
</div>
|
||||
<div>
|
||||
{childIssue.target_date &&
|
||||
(childIssue.target_date < new Date().toISOString()
|
||||
? `Target date has passed by ${findHowManyDaysLeft(
|
||||
childIssue.target_date
|
||||
)} days`
|
||||
: findHowManyDaysLeft(childIssue.target_date) <= 3
|
||||
? `Target date is in ${findHowManyDaysLeft(
|
||||
childIssue.target_date
|
||||
)} days`
|
||||
: "Target date")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{properties.assignee && (
|
||||
<Listbox
|
||||
as="div"
|
||||
value={childIssue.assignees}
|
||||
onChange={(data: any) => {
|
||||
const newData = childIssue.assignees ?? [];
|
||||
if (newData.includes(data)) {
|
||||
newData.splice(newData.indexOf(data), 1);
|
||||
} else {
|
||||
newData.push(data);
|
||||
}
|
||||
partialUpdateIssue(
|
||||
{ assignees_list: newData },
|
||||
childIssue.id
|
||||
);
|
||||
}}
|
||||
className="group 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>
|
||||
) : (
|
||||
<div
|
||||
className={`h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
|
||||
>
|
||||
{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>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute left-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 p-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>
|
||||
)}
|
||||
<p>
|
||||
{person.member.first_name &&
|
||||
person.member.first_name !== ""
|
||||
? person.member.first_name
|
||||
: person.member.email}
|
||||
</p>
|
||||
</div>
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
<div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
|
||||
<h5 className="font-medium mb-1">Assigned to</h5>
|
||||
<div>
|
||||
{childIssue.assignee_details?.length > 0
|
||||
? childIssue.assignee_details
|
||||
.map((assignee) => assignee.first_name)
|
||||
.join(", ")
|
||||
: "No one"}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
})}
|
||||
{provided.placeholder}
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center text-xs font-medium hover:bg-gray-100 p-2 rounded duration-300 outline-none"
|
||||
onClick={() => {
|
||||
setIsIssueOpen(true);
|
||||
if (selectedGroup !== null) {
|
||||
setPreloadedData({
|
||||
state: stateId !== null ? stateId : undefined,
|
||||
[selectedGroup]: groupTitle,
|
||||
actionType: "createIssue",
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-3 w-3 mr-1" />
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</StrictModeDroppable>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleBoard;
|
||||
|
|
@ -106,12 +106,16 @@ const SelectLabels: React.FC<Props> = ({ control }) => {
|
|||
className={({ active }) =>
|
||||
`${
|
||||
active ? "text-white bg-theme" : "text-gray-900"
|
||||
} cursor-pointer select-none w-full p-2 rounded-md`
|
||||
} flex items-center gap-2 cursor-pointer select-none w-full p-2 rounded-md`
|
||||
}
|
||||
value={label.id}
|
||||
>
|
||||
{({ selected, active }) => (
|
||||
<>
|
||||
<span
|
||||
className="h-2 w-2 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: label.colour }}
|
||||
></span>
|
||||
<span
|
||||
className={`${
|
||||
selected || (value ?? []).some((i) => i === label.id)
|
||||
|
|
|
|||
|
|
@ -34,11 +34,14 @@ import SelectAssignee from "./SelectAssignee";
|
|||
import SelectParent from "./SelectParentIssue";
|
||||
import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
|
||||
import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
|
||||
|
||||
// types
|
||||
import type { IIssue, IssueResponse, CycleIssueResponse } from "types";
|
||||
import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
|
|
@ -78,10 +81,6 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
|
|||
// setIssueDescriptionValue(value);
|
||||
// };
|
||||
|
||||
const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const handleClose = () => {
|
||||
|
|
@ -117,7 +116,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
|
|||
const addIssueToSprint = async (issueId: string, sprintId: string, issueDetail: IIssue) => {
|
||||
if (!activeWorkspace || !activeProject) return;
|
||||
await issuesServices
|
||||
.addIssueToSprint(activeWorkspace.slug, activeProject.id, sprintId, {
|
||||
.addIssueToCycle(activeWorkspace.slug, activeProject.id, sprintId, {
|
||||
issue: issueId,
|
||||
})
|
||||
.then((res) => {
|
||||
|
|
@ -176,6 +175,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
|
|||
const payload: Partial<IIssue> = {
|
||||
...formData,
|
||||
target_date: formData.target_date ? renderDateFormat(formData.target_date ?? "") : null,
|
||||
// description: formData.description ? JSON.parse(formData.description) : null,
|
||||
};
|
||||
if (!data) {
|
||||
await issuesServices
|
||||
|
|
|
|||
|
|
@ -4,23 +4,37 @@ import React, { useState } from "react";
|
|||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
// swr
|
||||
import useSWR, { mutate } from "swr";
|
||||
import useSWR from "swr";
|
||||
// headless ui
|
||||
import { Disclosure, Listbox, Menu, Transition } from "@headlessui/react";
|
||||
// ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
import { Spinner } from "ui";
|
||||
// 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
|
||||
import { IIssue, IssueResponse, NestedKeyOf, Properties } from "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 { PROJECT_ISSUES_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
// services
|
||||
import issuesServices from "lib/services/issues.service";
|
||||
import workspaceService from "lib/services/workspace.service";
|
||||
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { addSpaceIfCamelCase, classNames, renderShortNumericDateFormat } from "constants/common";
|
||||
import {
|
||||
addSpaceIfCamelCase,
|
||||
classNames,
|
||||
findHowManyDaysLeft,
|
||||
renderShortNumericDateFormat,
|
||||
} from "constants/common";
|
||||
|
||||
// types
|
||||
type Props = {
|
||||
|
|
@ -29,6 +43,7 @@ type Props = {
|
|||
selectedGroup: NestedKeyOf<IIssue> | null;
|
||||
setSelectedIssue: any;
|
||||
handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||
partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
|
||||
};
|
||||
|
||||
const ListView: React.FC<Props> = ({
|
||||
|
|
@ -37,377 +52,515 @@ const ListView: React.FC<Props> = ({
|
|||
selectedGroup,
|
||||
setSelectedIssue,
|
||||
handleDeleteIssue,
|
||||
partialUpdateIssue,
|
||||
}) => {
|
||||
const [isCreateIssuesModalOpen, setIsCreateIssuesModalOpen] = useState(false);
|
||||
const [preloadedData, setPreloadedData] = useState<
|
||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
||||
>(undefined);
|
||||
|
||||
const { activeWorkspace, activeProject, states } = useUser();
|
||||
|
||||
const partialUpdateIssue = (formData: Partial<IIssue>, issueId: string) => {
|
||||
if (!activeWorkspace || !activeProject) return;
|
||||
issuesServices
|
||||
.patchIssue(activeWorkspace.slug, activeProject.id, issueId, formData)
|
||||
.then((response) => {
|
||||
mutate<IssueResponse>(
|
||||
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(
|
||||
const { data: people } = useSWR<IWorkspaceMember[]>(
|
||||
activeWorkspace ? WORKSPACE_MEMBERS : null,
|
||||
activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="mt-4 flex flex-col space-y-5">
|
||||
{Object.keys(groupedByIssues).map((singleGroup) => (
|
||||
<div key={singleGroup} className="overflow-x-auto">
|
||||
<div className="inline-block min-w-full p-0.5 align-middle">
|
||||
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
||||
<table className="min-w-full">
|
||||
{selectedGroup !== null ? (
|
||||
<thead className="bg-gray-100">
|
||||
<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}
|
||||
<>
|
||||
<CreateUpdateIssuesModal
|
||||
isOpen={isCreateIssuesModalOpen && preloadedData?.actionType === "createIssue"}
|
||||
setIsOpen={setIsCreateIssuesModalOpen}
|
||||
prePopulateData={{
|
||||
...preloadedData,
|
||||
}}
|
||||
projectId={activeProject?.id as string}
|
||||
/>
|
||||
<div className="flex flex-col space-y-5">
|
||||
{Object.keys(groupedByIssues).map((singleGroup) => (
|
||||
<Disclosure key={singleGroup} as="div" defaultOpen>
|
||||
{({ open }) => (
|
||||
<div className="bg-white rounded-lg">
|
||||
<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 ? (
|
||||
<h2 className="font-medium leading-5 capitalize">
|
||||
{singleGroup === null || singleGroup === "null"
|
||||
? selectedGroup === "priority" && "No priority"
|
||||
: addSpaceIfCamelCase(singleGroup)}
|
||||
<span className="ml-2 text-gray-500 font-normal text-sm">
|
||||
{groupedByIssues[singleGroup as keyof IIssue].length}
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
) : (
|
||||
<thead className="bg-gray-100">
|
||||
<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">
|
||||
{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
|
||||
);
|
||||
</h2>
|
||||
) : (
|
||||
<h2 className="font-medium leading-5">All Issues</h2>
|
||||
)}
|
||||
<p className="text-gray-500 text-sm">
|
||||
{groupedByIssues[singleGroup as keyof IIssue].length}
|
||||
</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 = [
|
||||
...(issue?.assignees_list ?? []),
|
||||
...(issue?.assignees ?? []),
|
||||
]?.map((assignee) => {
|
||||
const tempPerson = people?.find(
|
||||
(p) => p.member.id === assignee
|
||||
)?.member;
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={issue.id}
|
||||
className={classNames(
|
||||
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]">
|
||||
<Link href={`/projects/${issue.project}/issues/${issue.id}`}>
|
||||
<a className="hover:text-theme duration-300">{issue.name}</a>
|
||||
</Link>
|
||||
</td>
|
||||
{Object.keys(properties).map(
|
||||
(key) =>
|
||||
properties[key as keyof Properties] && (
|
||||
<React.Fragment key={key}>
|
||||
{(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}
|
||||
</td>
|
||||
) : (key as keyof Properties) === "priority" ? (
|
||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
|
||||
<Listbox
|
||||
as="div"
|
||||
value={issue.priority}
|
||||
onChange={(data: string) => {
|
||||
partialUpdateIssue({ priority: data }, issue.id);
|
||||
}}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="">
|
||||
<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">
|
||||
<span
|
||||
className={classNames(
|
||||
issue.priority ? "" : "text-gray-900",
|
||||
"hidden truncate capitalize sm:block w-16"
|
||||
)}
|
||||
return {
|
||||
avatar: tempPerson?.avatar,
|
||||
first_name: tempPerson?.first_name,
|
||||
email: tempPerson?.email,
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
key={issue.id}
|
||||
className="px-4 py-3 text-sm rounded flex justify-between items-center gap-2"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`flex-shrink-0 h-1.5 w-1.5 block rounded-full`}
|
||||
style={{
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<Link href={`/projects/${activeProject?.id}/issues/${issue.id}`}>
|
||||
<a className="group relative flex items-center gap-2">
|
||||
{properties.key && (
|
||||
<span className="flex-shrink-0 text-xs text-gray-500">
|
||||
{activeProject?.identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
)}
|
||||
<span className="">{issue.name}</span>
|
||||
<div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md max-w-sm whitespace-nowrap">
|
||||
<h5 className="font-medium mb-1">Name</h5>
|
||||
<div>{issue.name}</div>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex-shrink-0 flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
|
||||
{properties.priority && (
|
||||
<Listbox
|
||||
as="div"
|
||||
value={issue.priority}
|
||||
onChange={(data: string) => {
|
||||
partialUpdateIssue({ priority: data }, issue.id);
|
||||
}}
|
||||
className="group relative 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"}
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
{priority}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
|
||||
<h5 className="font-medium mb-1 text-gray-900">
|
||||
Priority
|
||||
</h5>
|
||||
<div
|
||||
className={`capitalize ${
|
||||
issue.priority === "urgent"
|
||||
? "text-red-600"
|
||||
: issue.priority === "high"
|
||||
? "text-orange-500"
|
||||
: issue.priority === "medium"
|
||||
? "text-yellow-500"
|
||||
: issue.priority === "low"
|
||||
? "text-green-500"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{issue.priority ?? "None"}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
)}
|
||||
{properties.state && (
|
||||
<Listbox
|
||||
as="div"
|
||||
value={issue.state}
|
||||
onChange={(data: string) => {
|
||||
partialUpdateIssue({ state: data }, issue.id);
|
||||
}}
|
||||
className="group relative 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
|
||||
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}
|
||||
>
|
||||
{priority}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</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>
|
||||
<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">
|
||||
{states?.map((state) => (
|
||||
<Listbox.Option
|
||||
key={state.id}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
active ? "bg-indigo-50" : "bg-white",
|
||||
"cursor-pointer select-none px-3 py-2"
|
||||
)
|
||||
}
|
||||
value={state.id}
|
||||
>
|
||||
{addSpaceIfCamelCase(state.name)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
|
||||
<h5 className="font-medium mb-1">State</h5>
|
||||
<div>{issue.state_detail.name}</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
)}
|
||||
{properties.start_date && (
|
||||
<div className="group relative 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 className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
|
||||
<h5 className="font-medium mb-1">Started at</h5>
|
||||
<div>
|
||||
{renderShortNumericDateFormat(issue.start_date ?? "")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{properties.target_date && (
|
||||
<div
|
||||
className={`group relative 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
|
||||
? renderShortNumericDateFormat(issue.target_date)
|
||||
: "N/A"}
|
||||
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
|
||||
<h5 className="font-medium mb-1 text-gray-900">
|
||||
Target date
|
||||
</h5>
|
||||
<div>
|
||||
{renderShortNumericDateFormat(issue.target_date ?? "")}
|
||||
</div>
|
||||
<div>
|
||||
{issue.target_date &&
|
||||
(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")}
|
||||
</div>
|
||||
</div>
|
||||
</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="group 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>
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
) : (
|
||||
<div
|
||||
className={`h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
|
||||
>
|
||||
{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>
|
||||
</>
|
||||
)}
|
||||
</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>
|
||||
</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">
|
||||
{states?.map((state) => (
|
||||
<Listbox.Option
|
||||
key={state.id}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
active ? "bg-indigo-50" : "bg-white",
|
||||
"cursor-pointer select-none px-3 py-2"
|
||||
)
|
||||
}
|
||||
value={state.id}
|
||||
>
|
||||
{addSpaceIfCamelCase(state.name)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
</td>
|
||||
) : (key as keyof Properties) === "target_date" ? (
|
||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 whitespace-nowrap">
|
||||
{issue.target_date
|
||||
? renderShortNumericDateFormat(issue.target_date)
|
||||
: "-"}
|
||||
</td>
|
||||
) : (
|
||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative capitalize">
|
||||
{issue[key as keyof IIssue] ??
|
||||
(issue[key as keyof IIssue] as any)?.name ??
|
||||
"None"}
|
||||
</td>
|
||||
)}
|
||||
</React.Fragment>
|
||||
)
|
||||
)}
|
||||
<td className="px-3">
|
||||
<div className="flex justify-end items-center gap-2">
|
||||
<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"
|
||||
onClick={() => {
|
||||
setSelectedIssue({
|
||||
...issue,
|
||||
actionType: "edit",
|
||||
});
|
||||
}}
|
||||
>
|
||||
<PencilIcon className="h-3 w-3" />
|
||||
</button>
|
||||
<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"
|
||||
onClick={() => {
|
||||
handleDeleteIssue(issue.id);
|
||||
}}
|
||||
>
|
||||
<TrashIcon className="h-3 w-3" />
|
||||
</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 p-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>
|
||||
)}
|
||||
<p>
|
||||
{person.member.first_name &&
|
||||
person.member.first_name !== ""
|
||||
? person.member.first_name
|
||||
: person.member.email}
|
||||
</p>
|
||||
</div>
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
|
||||
<h5 className="font-medium mb-1">Assigned to</h5>
|
||||
<div>
|
||||
{issue.assignee_details?.length > 0
|
||||
? issue.assignee_details
|
||||
.map((assignee) => assignee.first_name)
|
||||
.join(", ")
|
||||
: "No one"}
|
||||
</div>
|
||||
</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
|
||||
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>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
: null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="text-sm px-4 py-3 text-gray-500">No issues.</p>
|
||||
)
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</Disclosure>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useRef, useState } from "react";
|
||||
import React, { useRef, useState } from "react";
|
||||
// swr
|
||||
import { mutate } from "swr";
|
||||
// headless ui
|
||||
|
|
@ -26,7 +26,7 @@ type Props = {
|
|||
const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) => {
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
|
||||
const { activeWorkspace } = useUser();
|
||||
const { activeWorkspace, activeProject } = useUser();
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
|
|
@ -70,7 +70,7 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
|
|||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-10" initialFocus={cancelButtonRef} onClose={onClose}>
|
||||
<Dialog as="div" className="relative z-20" initialFocus={cancelButtonRef} onClose={onClose}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
|
|
@ -97,22 +97,24 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
|
|||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
||||
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<ExclamationTriangleIcon
|
||||
className="h-6 w-6 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
||||
Delete Issue
|
||||
<div>
|
||||
<div className="mx-auto h-16 w-16 grid place-items-center rounded-full bg-red-100">
|
||||
<ExclamationTriangleIcon
|
||||
className="h-8 w-8 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-medium leading-6 text-gray-900 mt-3"
|
||||
>
|
||||
Are you sure you want to delete {`"`}
|
||||
{activeProject?.identifier}-{data?.sequence_id} - {data?.name}?{`"`}
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-500">
|
||||
Are you sure you want to delete issue - {`"`}
|
||||
<span className="italic">{data?.name}</span>
|
||||
{`"`} ? All of the data related to the issue will be permanently removed.
|
||||
This action cannot be undone.
|
||||
All of the data related to the issue will be permanently removed. This
|
||||
action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -12,6 +12,8 @@ import workspaceService from "lib/services/workspace.service";
|
|||
// hooks
|
||||
import useUser from "lib/hooks/useUser";
|
||||
import useToast from "lib/hooks/useToast";
|
||||
// components
|
||||
import IssuesListModal from "components/project/issues/IssuesListModal";
|
||||
// fetching keys
|
||||
import {
|
||||
PROJECT_ISSUES_LIST,
|
||||
|
|
@ -37,18 +39,22 @@ import {
|
|||
LinkIcon,
|
||||
ArrowPathIcon,
|
||||
CalendarDaysIcon,
|
||||
TrashIcon,
|
||||
PlusIcon,
|
||||
XMarkIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import type { Control } from "react-hook-form";
|
||||
import type { IIssue, IIssueLabels, IssueResponse, IState, NestedKeyOf } from "types";
|
||||
import { TwitterPicker } from "react-color";
|
||||
import IssuesListModal from "components/project/issues/IssuesListModal";
|
||||
import { positionEditorElement } from "components/lexical/helpers/editor";
|
||||
|
||||
type Props = {
|
||||
control: Control<IIssue, any>;
|
||||
submitChanges: (formData: Partial<IIssue>) => void;
|
||||
issueDetail: IIssue | undefined;
|
||||
watch: UseFormWatch<IIssue>;
|
||||
setDeleteIssueModal: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
const defaultValues: Partial<IIssueLabels> = {
|
||||
|
|
@ -58,13 +64,15 @@ const defaultValues: Partial<IIssueLabels> = {
|
|||
|
||||
const IssueDetailSidebar: React.FC<Props> = ({
|
||||
control,
|
||||
watch: watchIssue,
|
||||
submitChanges,
|
||||
issueDetail,
|
||||
watch: watchIssue,
|
||||
setDeleteIssueModal,
|
||||
}) => {
|
||||
const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
|
||||
const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
|
||||
const [isParentModalOpen, setIsParentModalOpen] = useState(false);
|
||||
const [createLabelForm, setCreateLabelForm] = useState(false);
|
||||
|
||||
const { activeWorkspace, activeProject, cycles, issues } = useUser();
|
||||
|
||||
|
|
@ -117,7 +125,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
|||
name: NestedKeyOf<IIssue>;
|
||||
canSelectMultipleOptions: boolean;
|
||||
icon: (props: any) => JSX.Element;
|
||||
options?: Array<{ label: string; value: any }>;
|
||||
options?: Array<{ label: string; value: any; color?: string }>;
|
||||
modal: boolean;
|
||||
issuesList?: Array<IIssue>;
|
||||
isOpen?: boolean;
|
||||
|
|
@ -133,6 +141,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
|||
options: states?.map((state) => ({
|
||||
label: state.name,
|
||||
value: state.id,
|
||||
color: state.color,
|
||||
})),
|
||||
modal: false,
|
||||
},
|
||||
|
|
@ -221,364 +230,411 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
|||
|
||||
const handleCycleChange = (cycleId: string) => {
|
||||
if (activeWorkspace && activeProject && issueDetail)
|
||||
issuesServices.addIssueToSprint(activeWorkspace.slug, activeProject.id, cycleId, {
|
||||
issuesServices.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
|
||||
issue: issueDetail.id,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full w-full divide-y-2 divide-gray-100">
|
||||
<div className="flex justify-between items-center pb-3">
|
||||
<h4 className="text-sm font-medium">
|
||||
{activeProject?.identifier}-{issueDetail?.sequence_id}
|
||||
</h4>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
|
||||
onClick={() =>
|
||||
copyTextToClipboard(
|
||||
`https://app.plane.so/projects/${activeProject?.id}/issues/${issueDetail?.id}`
|
||||
)
|
||||
.then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Copied to clipboard",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Some error occurred",
|
||||
});
|
||||
})
|
||||
}
|
||||
>
|
||||
<LinkIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
|
||||
onClick={() =>
|
||||
copyTextToClipboard(`${issueDetail?.id}`)
|
||||
.then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Copied to clipboard",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Some error occurred",
|
||||
});
|
||||
})
|
||||
}
|
||||
>
|
||||
<ClipboardDocumentIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<>
|
||||
<div className="h-full w-full divide-y-2 divide-gray-100">
|
||||
<div className="flex justify-between items-center pb-3">
|
||||
<h4 className="text-sm font-medium">
|
||||
{activeProject?.identifier}-{issueDetail?.sequence_id}
|
||||
</h4>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
|
||||
onClick={() =>
|
||||
copyTextToClipboard(
|
||||
`https://app.plane.so/projects/${activeProject?.id}/issues/${issueDetail?.id}`
|
||||
)
|
||||
.then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Copied to clipboard",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Some error occurred",
|
||||
});
|
||||
})
|
||||
}
|
||||
>
|
||||
<LinkIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
|
||||
onClick={() =>
|
||||
copyTextToClipboard(`${issueDetail?.id}`)
|
||||
.then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Copied to clipboard",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Some error occurred",
|
||||
});
|
||||
})
|
||||
}
|
||||
>
|
||||
<ClipboardDocumentIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 hover:bg-red-50 text-red-500 border border-red-500 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
|
||||
onClick={() => setDeleteIssueModal(true)}
|
||||
>
|
||||
<TrashIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y-2 divide-gray-100">
|
||||
{sidebarSections.map((section, index) => (
|
||||
<div key={index} className="py-1">
|
||||
{section.map((item) => (
|
||||
<div key={item.label} className="flex items-center py-2 flex-wrap">
|
||||
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
|
||||
<item.icon className="flex-shrink-0 h-4 w-4" />
|
||||
<p>{item.label}</p>
|
||||
</div>
|
||||
<div className="sm:basis-1/2">
|
||||
{item.name === "target_date" ? (
|
||||
<Controller
|
||||
control={control}
|
||||
name="target_date"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<input
|
||||
type="date"
|
||||
value={value ?? ""}
|
||||
onChange={(e: any) => {
|
||||
submitChanges({ target_date: e.target.value });
|
||||
onChange(e.target.value);
|
||||
}}
|
||||
className="hover:bg-gray-100 border rounded-md 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 w-full"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
) : item.modal ? (
|
||||
<Controller
|
||||
control={control}
|
||||
name={item.name as keyof IIssue}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<>
|
||||
<IssuesListModal
|
||||
isOpen={Boolean(item?.isOpen)}
|
||||
handleClose={() => item.setIsOpen && item.setIsOpen(false)}
|
||||
onChange={(val) => {
|
||||
console.log(val);
|
||||
// submitChanges({ [item.name]: val });
|
||||
onChange(val);
|
||||
<div className="divide-y-2 divide-gray-100">
|
||||
{sidebarSections.map((section, index) => (
|
||||
<div key={index} className="py-1">
|
||||
{section.map((item) => (
|
||||
<div key={item.label} className="flex items-center py-2 flex-wrap">
|
||||
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
|
||||
<item.icon className="flex-shrink-0 h-4 w-4" />
|
||||
<p>{item.label}</p>
|
||||
</div>
|
||||
<div className="sm:basis-1/2">
|
||||
{item.name === "target_date" ? (
|
||||
<Controller
|
||||
control={control}
|
||||
name="target_date"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<input
|
||||
type="date"
|
||||
value={value ?? ""}
|
||||
onChange={(e: any) => {
|
||||
submitChanges({ target_date: e.target.value });
|
||||
onChange(e.target.value);
|
||||
}}
|
||||
issues={item?.issuesList ?? []}
|
||||
title={`Select ${item.label}`}
|
||||
multiple={item.canSelectMultipleOptions}
|
||||
value={value}
|
||||
className="hover:bg-gray-100 border rounded-md 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 w-full"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md 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 w-full"
|
||||
onClick={() => item.setIsOpen && item.setIsOpen(true)}
|
||||
>
|
||||
{watchIssue(`${item.name as keyof IIssue}`) &&
|
||||
watchIssue(`${item.name as keyof IIssue}`) !== ""
|
||||
? `${activeProject?.identifier}-
|
||||
)}
|
||||
/>
|
||||
) : item.modal ? (
|
||||
<Controller
|
||||
control={control}
|
||||
name={item.name as keyof IIssue}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<>
|
||||
<IssuesListModal
|
||||
isOpen={Boolean(item?.isOpen)}
|
||||
handleClose={() => item.setIsOpen && item.setIsOpen(false)}
|
||||
onChange={(val) => {
|
||||
console.log(val);
|
||||
// submitChanges({ [item.name]: val });
|
||||
onChange(val);
|
||||
}}
|
||||
issues={item?.issuesList ?? []}
|
||||
title={`Select ${item.label}`}
|
||||
multiple={item.canSelectMultipleOptions}
|
||||
value={value}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md 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 w-full"
|
||||
onClick={() => item.setIsOpen && item.setIsOpen(true)}
|
||||
>
|
||||
{watchIssue(`${item.name as keyof IIssue}`) &&
|
||||
watchIssue(`${item.name as keyof IIssue}`) !== ""
|
||||
? `${activeProject?.identifier}-
|
||||
${
|
||||
issues?.results.find(
|
||||
(i) => i.id === watchIssue(`${item.name as keyof IIssue}`)
|
||||
)?.sequence_id
|
||||
}`
|
||||
: `Select ${item.label}`}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<Controller
|
||||
control={control}
|
||||
name={item.name as keyof IIssue}
|
||||
render={({ field: { value } }) => (
|
||||
<Listbox
|
||||
as="div"
|
||||
value={value}
|
||||
multiple={item.canSelectMultipleOptions}
|
||||
onChange={(value: any) => {
|
||||
if (item.name === "cycle") handleCycleChange(value);
|
||||
else submitChanges({ [item.name]: value });
|
||||
}}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{({ open }) => (
|
||||
<div className="relative">
|
||||
<Listbox.Button className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
|
||||
<span
|
||||
className={classNames(
|
||||
value ? "" : "text-gray-900",
|
||||
"hidden truncate sm:block text-left",
|
||||
item.label === "Priority" ? "capitalize" : ""
|
||||
)}
|
||||
>
|
||||
{value
|
||||
? Array.isArray(value)
|
||||
? value
|
||||
.map(
|
||||
(i: any) =>
|
||||
item.options?.find((option) => option.value === i)
|
||||
?.label
|
||||
)
|
||||
.join(", ") || item.label
|
||||
: item.options?.find((option) => option.value === value)
|
||||
?.label
|
||||
: "None"}
|
||||
</span>
|
||||
<ChevronDownIcon className="h-3 w-3" />
|
||||
</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 right-0 mt-1 w-40 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">
|
||||
<div className="p-1">
|
||||
{item.options ? (
|
||||
item.options.length > 0 ? (
|
||||
item.options.map((option) => (
|
||||
<Listbox.Option
|
||||
key={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`${
|
||||
active || selected
|
||||
? "text-white bg-theme"
|
||||
: "text-gray-900"
|
||||
} ${
|
||||
item.label === "Priority" && "capitalize"
|
||||
} cursor-pointer select-none relative p-2 rounded-md truncate`
|
||||
}
|
||||
value={option.value}
|
||||
>
|
||||
{option.label}
|
||||
</Listbox.Option>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center">No {item.label}s found</div>
|
||||
)
|
||||
) : (
|
||||
<Spinner />
|
||||
)}
|
||||
</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
</Listbox>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-2 pt-3">
|
||||
<h5 className="text-xs font-medium">Add new label</h5>
|
||||
<form className="flex items-center gap-x-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div>
|
||||
<Popover className="relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`bg-white flex items-center gap-1 rounded-md p-1 outline-none focus:ring-2 focus:ring-indigo-500`}
|
||||
>
|
||||
{watch("colour") && watch("colour") !== "" && (
|
||||
<span
|
||||
className="w-6 h-6 rounded"
|
||||
style={{
|
||||
backgroundColor: watch("colour") ?? "green",
|
||||
}}
|
||||
></span>
|
||||
)}
|
||||
<ChevronDownIcon className="h-4 w-4" />
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute z-10 transform right-0 mt-1 px-2 max-w-xs sm:px-0">
|
||||
<Controller
|
||||
name="colour"
|
||||
control={controlLabel}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
|
||||
: `Select ${item.label}`}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
) : (
|
||||
<Controller
|
||||
control={control}
|
||||
name={item.name as keyof IIssue}
|
||||
render={({ field: { value } }) => (
|
||||
<Listbox
|
||||
as="div"
|
||||
value={value}
|
||||
multiple={item.canSelectMultipleOptions}
|
||||
onChange={(value: any) => {
|
||||
if (item.name === "cycle") handleCycleChange(value);
|
||||
else submitChanges({ [item.name]: value });
|
||||
}}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{({ open }) => (
|
||||
<div className="relative">
|
||||
<Listbox.Button className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
|
||||
<span
|
||||
className={classNames(
|
||||
value ? "" : "text-gray-900",
|
||||
"hidden truncate sm:block text-left",
|
||||
item.label === "Priority" ? "capitalize" : ""
|
||||
)}
|
||||
>
|
||||
{value
|
||||
? Array.isArray(value)
|
||||
? value
|
||||
.map(
|
||||
(i: any) =>
|
||||
item.options?.find((option) => option.value === i)
|
||||
?.label
|
||||
)
|
||||
.join(", ") || item.label
|
||||
: item.options?.find((option) => option.value === value)
|
||||
?.label
|
||||
: "None"}
|
||||
</span>
|
||||
<ChevronDownIcon className="h-3 w-3" />
|
||||
</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 right-0 mt-1 w-40 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">
|
||||
<div className="p-1">
|
||||
{item.options ? (
|
||||
item.options.length > 0 ? (
|
||||
item.options.map((option) => (
|
||||
<Listbox.Option
|
||||
key={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`${
|
||||
active || selected
|
||||
? "text-white bg-theme"
|
||||
: "text-gray-900"
|
||||
} ${
|
||||
item.label === "Priority" && "capitalize"
|
||||
} flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate`
|
||||
}
|
||||
value={option.value}
|
||||
>
|
||||
{option.color && (
|
||||
<span
|
||||
className="h-2 w-2 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: option.color }}
|
||||
></span>
|
||||
)}
|
||||
{option.label}
|
||||
</Listbox.Option>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center">No {item.label}s found</div>
|
||||
)
|
||||
) : (
|
||||
<Spinner />
|
||||
)}
|
||||
</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
</Listbox>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="pt-3 space-y-3">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex items-center gap-x-2 text-sm basis-1/2">
|
||||
<TagIcon className="w-4 h-4" />
|
||||
<p>Label</p>
|
||||
</div>
|
||||
<div className="basis-1/2">
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{issueDetail?.label_details.map((label) => (
|
||||
<span
|
||||
key={label.id}
|
||||
className="flex items-center gap-2 border rounded-2xl text-xs px-1 py-0.5 hover:bg-gray-100 cursor-pointer"
|
||||
// onClick={() =>
|
||||
// submitChanges({
|
||||
// labels_list: issueDetail?.labels_list.filter((l) => l !== label.id),
|
||||
// })
|
||||
// }
|
||||
>
|
||||
<span
|
||||
className="h-2 w-2 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: label.colour ?? "green" }}
|
||||
></span>
|
||||
{label.name}
|
||||
</span>
|
||||
))}
|
||||
<Controller
|
||||
control={control}
|
||||
name="labels_list"
|
||||
render={({ field: { value } }) => (
|
||||
<Listbox
|
||||
as="div"
|
||||
value={value}
|
||||
multiple
|
||||
onChange={(value: any) => submitChanges({ labels_list: value })}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Label className="sr-only">Label</Listbox.Label>
|
||||
<div className="relative">
|
||||
<Listbox.Button className="flex items-center gap-2 border rounded-2xl text-xs px-1 py-0.5 hover:bg-gray-100 cursor-pointer">
|
||||
<span
|
||||
className={classNames(
|
||||
value ? "" : "text-gray-900",
|
||||
"hidden sm:block text-left"
|
||||
)}
|
||||
>
|
||||
Select Label
|
||||
</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 right-0 mt-1 w-40 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">
|
||||
<div className="p-1">
|
||||
{issueLabels ? (
|
||||
issueLabels.length > 0 ? (
|
||||
issueLabels.map((label: IIssueLabels) => (
|
||||
<Listbox.Option
|
||||
key={label.id}
|
||||
className={({ active, selected }) =>
|
||||
`${
|
||||
active || selected
|
||||
? "text-white bg-theme"
|
||||
: "text-gray-900"
|
||||
} flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate`
|
||||
}
|
||||
value={label.id}
|
||||
>
|
||||
<span
|
||||
className="h-2 w-2 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: label.colour ?? "green" }}
|
||||
></span>
|
||||
{label.name}
|
||||
</Listbox.Option>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center">No labels found</div>
|
||||
)
|
||||
) : (
|
||||
<Spinner />
|
||||
)}
|
||||
</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium"
|
||||
onClick={() => setCreateLabelForm((prevData) => !prevData)}
|
||||
>
|
||||
{createLabelForm ? (
|
||||
<>
|
||||
<XMarkIcon className="h-3 w-3" /> Cancel
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PlusIcon className="h-3 w-3" /> Create new
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
</button>
|
||||
</div>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Title"
|
||||
register={register}
|
||||
validations={{
|
||||
required: "This is required",
|
||||
}}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
+
|
||||
</Button>
|
||||
</form>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-x-2 text-sm basis-1/2">
|
||||
<TagIcon className="w-4 h-4" />
|
||||
<p>Label</p>
|
||||
</div>
|
||||
<div className="basis-1/2">
|
||||
<Controller
|
||||
control={control}
|
||||
name="labels_list"
|
||||
render={({ field: { value } }) => (
|
||||
<Listbox
|
||||
as="div"
|
||||
value={value}
|
||||
multiple
|
||||
onChange={(value: any) => submitChanges({ labels_list: value })}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{createLabelForm && (
|
||||
<form className="flex items-center gap-x-2" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div>
|
||||
<Popover className="relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Label className="sr-only">Label</Listbox.Label>
|
||||
<div className="relative">
|
||||
<Listbox.Button className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
|
||||
<Popover.Button
|
||||
className={`bg-white flex items-center gap-1 rounded-md p-1 outline-none focus:ring-2 focus:ring-indigo-500`}
|
||||
>
|
||||
{watch("colour") && watch("colour") !== "" && (
|
||||
<span
|
||||
className={classNames(
|
||||
value ? "" : "text-gray-900",
|
||||
"hidden truncate capitalize sm:block text-left"
|
||||
)}
|
||||
>
|
||||
{value && value.length > 0
|
||||
? value
|
||||
.map(
|
||||
(i: string) =>
|
||||
issueLabels?.find((option) => option.id === i)?.name
|
||||
)
|
||||
.join(", ")
|
||||
: "None"}
|
||||
</span>
|
||||
<ChevronDownIcon className="h-3 w-3" />
|
||||
</Listbox.Button>
|
||||
className="w-5 h-5 rounded"
|
||||
style={{
|
||||
backgroundColor: watch("colour") ?? "green",
|
||||
}}
|
||||
></span>
|
||||
)}
|
||||
<ChevronDownIcon className="h-3 w-3" />
|
||||
</Popover.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 right-0 mt-1 w-40 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">
|
||||
<div className="p-1">
|
||||
{issueLabels ? (
|
||||
issueLabels.length > 0 ? (
|
||||
issueLabels.map((label: IIssueLabels) => (
|
||||
<Listbox.Option
|
||||
key={label.id}
|
||||
className={({ active, selected }) =>
|
||||
`${
|
||||
active || selected
|
||||
? "text-white bg-theme"
|
||||
: "text-gray-900"
|
||||
} flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate`
|
||||
}
|
||||
value={label.id}
|
||||
>
|
||||
<span
|
||||
className="h-2 w-2 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: label.colour ?? "green" }}
|
||||
></span>
|
||||
{label.name}
|
||||
</Listbox.Option>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center">No labels found</div>
|
||||
)
|
||||
) : (
|
||||
<Spinner />
|
||||
)}
|
||||
</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute z-10 transform right-0 mt-1 px-2 max-w-xs sm:px-0">
|
||||
<Controller
|
||||
name="colour"
|
||||
control={controlLabel}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<TwitterPicker
|
||||
color={value}
|
||||
onChange={(value) => onChange(value.hex)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Title"
|
||||
register={register}
|
||||
validations={{
|
||||
required: "This is required",
|
||||
}}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<Button type="submit" theme="success" disabled={isSubmitting}>
|
||||
+
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -24,12 +24,12 @@ type Props = {
|
|||
const activityIcons: {
|
||||
[key: string]: JSX.Element;
|
||||
} = {
|
||||
state: <Squares2X2Icon className="h-4 w-4" />,
|
||||
priority: <ChartBarIcon className="h-4 w-4" />,
|
||||
name: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
|
||||
description: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
|
||||
target_date: <CalendarDaysIcon className="h-4 w-4" />,
|
||||
parent: <UserIcon className="h-4 w-4" />,
|
||||
state: <Squares2X2Icon className="h-3.5 w-3.5" />,
|
||||
priority: <ChartBarIcon className="h-3.5 w-3.5" />,
|
||||
name: <ChatBubbleBottomCenterTextIcon className="h-3.5 w-3.5" />,
|
||||
description: <ChatBubbleBottomCenterTextIcon className="h-3.5 w-3.5" />,
|
||||
target_date: <CalendarDaysIcon className="h-3.5 w-3.5" />,
|
||||
parent: <UserIcon className="h-3.5 w-3.5" />,
|
||||
};
|
||||
|
||||
const IssueActivitySection: React.FC<Props> = ({ issueActivities, states, issues }) => {
|
||||
|
|
|
|||
|
|
@ -77,42 +77,6 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
|
|||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="bg-gray-100 rounded-md">
|
||||
<div className="w-full">
|
||||
<TextArea
|
||||
id="comment"
|
||||
name="comment"
|
||||
register={register}
|
||||
validations={{
|
||||
required: true,
|
||||
}}
|
||||
mode="transparent"
|
||||
error={errors.comment}
|
||||
className="w-full pb-10 resize-none"
|
||||
placeholder="Enter your comment"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && e.shiftKey) {
|
||||
e.preventDefault();
|
||||
const value = e.currentTarget.value;
|
||||
const start = e.currentTarget.selectionStart;
|
||||
const end = e.currentTarget.selectionEnd;
|
||||
setValue("comment", `${value.substring(0, start)}\r ${value.substring(end)}`);
|
||||
} else if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
isSubmitting || handleSubmit(onSubmit)();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex justify-end">
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Adding comment..." : "Add comment"}
|
||||
{/* <UploadingIcon /> */}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{comments ? (
|
||||
comments.length > 0 ? (
|
||||
<div className="space-y-5">
|
||||
|
|
@ -133,6 +97,37 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
|
|||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="flex items-start gap-2 border rounded-md p-2">
|
||||
<TextArea
|
||||
id="comment"
|
||||
name="comment"
|
||||
register={register}
|
||||
validations={{
|
||||
required: true,
|
||||
}}
|
||||
mode="transparent"
|
||||
error={errors.comment}
|
||||
placeholder="Enter your comment"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && e.shiftKey) {
|
||||
e.preventDefault();
|
||||
const value = e.currentTarget.value;
|
||||
const start = e.currentTarget.selectionStart;
|
||||
const end = e.currentTarget.selectionEnd;
|
||||
setValue("comment", `${value.substring(0, start)}\r ${value.substring(end)}`);
|
||||
} else if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
isSubmitting || handleSubmit(onSubmit)();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button type="submit" className="whitespace-nowrap" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Adding comment..." : "Add comment"}
|
||||
{/* <UploadingIcon /> */}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue