mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
Merge pull request #42 from aaryan610/master
This commit is contained in:
Vamsi Kurama
GitHub
commit
f52724fd86
@ -23,7 +23,7 @@ import {
|
||||
// components
|
||||
import ShortcutsModal from "components/command-palette/shortcuts";
|
||||
import CreateProjectModal from "components/project/create-project-modal";
|
||||
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
|
||||
import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
|
||||
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
|
||||
// ui
|
||||
import { Button } from "ui";
|
||||
@ -260,7 +260,7 @@ const CommandPalette: React.FC = () => {
|
||||
<li className="p-2">
|
||||
{query === "" && (
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
|
||||
Issues
|
||||
Select issues
|
||||
</h2>
|
||||
)}
|
||||
<ul className="text-sm text-gray-700">
|
||||
@ -376,9 +376,9 @@ const CommandPalette: React.FC = () => {
|
||||
)}
|
||||
</Combobox>
|
||||
|
||||
<div className="flex justify-between items-center gap-2 p-3">
|
||||
<div className="flex justify-end items-center gap-2 p-3">
|
||||
<Button onClick={handleSubmit(handleDelete)} theme="danger" size="sm">
|
||||
Delete selected
|
||||
Delete selected issues
|
||||
</Button>
|
||||
<div>
|
||||
<Button type="button" size="sm" onClick={handleCommandPaletteClose}>
|
||||
|
||||
388
apps/app/components/project/common/board-view/single-issue.tsx
Normal file
388
apps/app/components/project/common/board-view/single-issue.tsx
Normal file
@ -0,0 +1,388 @@
|
||||
// next
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
// react-beautiful-dnd
|
||||
import { DraggableStateSnapshot } from "react-beautiful-dnd";
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import { TrashIcon } from "@heroicons/react/24/outline";
|
||||
import { CalendarDaysIcon } from "@heroicons/react/20/solid";
|
||||
import User from "public/user.png";
|
||||
// types
|
||||
import { IIssue, IWorkspaceMember, Properties } from "types";
|
||||
// common
|
||||
import {
|
||||
addSpaceIfCamelCase,
|
||||
classNames,
|
||||
findHowManyDaysLeft,
|
||||
renderShortNumericDateFormat,
|
||||
} from "constants/common";
|
||||
// constants
|
||||
import { PRIORITIES } from "constants/";
|
||||
import useUser from "lib/hooks/useUser";
|
||||
import React from "react";
|
||||
|
||||
type Props = {
|
||||
issue: IIssue;
|
||||
properties: Properties;
|
||||
snapshot?: DraggableStateSnapshot;
|
||||
assignees: {
|
||||
avatar: string | undefined;
|
||||
first_name: string | undefined;
|
||||
email: string | undefined;
|
||||
}[];
|
||||
people: IWorkspaceMember[] | undefined;
|
||||
handleDeleteIssue?: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||
partialUpdateIssue: (formData: Partial<IIssue>, childIssueId: string) => void;
|
||||
};
|
||||
|
||||
const SingleIssue: React.FC<Props> = ({
|
||||
issue,
|
||||
properties,
|
||||
snapshot,
|
||||
assignees,
|
||||
people,
|
||||
handleDeleteIssue,
|
||||
partialUpdateIssue,
|
||||
}) => {
|
||||
const { activeProject, states } = useUser();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`border rounded bg-white shadow-sm ${
|
||||
snapshot && snapshot.isDragging ? "border-theme shadow-lg bg-indigo-50" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="group/card relative p-2 select-none">
|
||||
{handleDeleteIssue && (
|
||||
<div className="opacity-0 group-hover/card:opacity-100 absolute top-1 right-1 z-10">
|
||||
<button
|
||||
type="button"
|
||||
className="h-7 w-7 p-1 grid place-items-center rounded text-red-500 bg-white hover:bg-red-50 duration-300 outline-none"
|
||||
onClick={() => handleDeleteIssue(issue.id)}
|
||||
>
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<Link href={`/projects/${issue.project}/issues/${issue.id}`}>
|
||||
<a>
|
||||
{properties.key && (
|
||||
<div className="text-xs font-medium text-gray-500 mb-2">
|
||||
{activeProject?.identifier}-{issue.sequence_id}
|
||||
</div>
|
||||
)}
|
||||
<h5
|
||||
className="group-hover:text-theme text-sm mb-3"
|
||||
style={{ lineClamp: 3, WebkitLineClamp: 3 }}
|
||||
>
|
||||
{issue.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={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}
|
||||
>
|
||||
{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">
|
||||
{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 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="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(issue.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 ${
|
||||
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="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(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>
|
||||
) : (
|
||||
<div className="h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full capitalize">
|
||||
{assignee.first_name && assignee.first_name !== ""
|
||||
? assignee.first_name.charAt(0)
|
||||
: assignee?.email?.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>
|
||||
{issue.assignee_details?.length > 0
|
||||
? issue.assignee_details.map((assignee) => assignee.first_name).join(", ")
|
||||
: "No one"}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleIssue;
|
||||
@ -16,6 +16,8 @@ type Props = {
|
||||
openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
|
||||
openIssuesListModal: () => void;
|
||||
removeIssueFromCycle: (bridgeId: string) => void;
|
||||
partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
|
||||
handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||
};
|
||||
|
||||
const CyclesBoardView: React.FC<Props> = ({
|
||||
@ -26,6 +28,8 @@ const CyclesBoardView: React.FC<Props> = ({
|
||||
openCreateIssueModal,
|
||||
openIssuesListModal,
|
||||
removeIssueFromCycle,
|
||||
partialUpdateIssue,
|
||||
handleDeleteIssue,
|
||||
}) => {
|
||||
const { states } = useUser();
|
||||
|
||||
@ -57,6 +61,8 @@ const CyclesBoardView: React.FC<Props> = ({
|
||||
removeIssueFromCycle={removeIssueFromCycle}
|
||||
openIssuesListModal={openIssuesListModal}
|
||||
openCreateIssueModal={openCreateIssueModal}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -1,44 +1,25 @@
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
// next
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
// services
|
||||
import cycleServices from "lib/services/cycles.service";
|
||||
import workspaceService from "lib/services/workspace.service";
|
||||
// hooks
|
||||
import useUser from "lib/hooks/useUser";
|
||||
// ui
|
||||
import { Spinner } from "ui";
|
||||
// icons
|
||||
import {
|
||||
ArrowsPointingInIcon,
|
||||
ArrowsPointingOutIcon,
|
||||
CalendarDaysIcon,
|
||||
PlusIcon,
|
||||
EllipsisHorizontalIcon,
|
||||
TrashIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import User from "public/user.png";
|
||||
// types
|
||||
import {
|
||||
CycleIssueResponse,
|
||||
ICycle,
|
||||
IIssue,
|
||||
IWorkspaceMember,
|
||||
NestedKeyOf,
|
||||
Properties,
|
||||
} from "types";
|
||||
// constants
|
||||
import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
import {
|
||||
addSpaceIfCamelCase,
|
||||
findHowManyDaysLeft,
|
||||
renderShortNumericDateFormat,
|
||||
} from "constants/common";
|
||||
// components
|
||||
import SingleIssue from "components/project/common/board-view/single-issue";
|
||||
// headless ui
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import workspaceService from "lib/services/workspace.service";
|
||||
// ui
|
||||
import { CustomMenu } from "ui";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
// common
|
||||
import { addSpaceIfCamelCase, classNames } from "constants/common";
|
||||
|
||||
type Props = {
|
||||
properties: Properties;
|
||||
@ -52,6 +33,8 @@ type Props = {
|
||||
openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
|
||||
openIssuesListModal: () => void;
|
||||
removeIssueFromCycle: (bridgeId: string) => void;
|
||||
partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
|
||||
handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
|
||||
};
|
||||
|
||||
const SingleCycleBoard: React.FC<Props> = ({
|
||||
@ -64,11 +47,13 @@ const SingleCycleBoard: React.FC<Props> = ({
|
||||
openCreateIssueModal,
|
||||
openIssuesListModal,
|
||||
removeIssueFromCycle,
|
||||
partialUpdateIssue,
|
||||
handleDeleteIssue,
|
||||
}) => {
|
||||
// Collapse/Expand
|
||||
const [show, setState] = useState(true);
|
||||
|
||||
const { activeWorkspace, activeProject } = useUser();
|
||||
const { activeWorkspace } = useUser();
|
||||
|
||||
if (selectedGroup === "priority")
|
||||
groupTitle === "high"
|
||||
@ -123,48 +108,14 @@ const SingleCycleBoard: React.FC<Props> = ({
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Menu as="div" className="relative inline-block">
|
||||
<Menu.Button className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none">
|
||||
<EllipsisHorizontalIcon className="h-4 w-4" />
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10 text-xs">
|
||||
<div className="py-1">
|
||||
<Menu.Item as="div">
|
||||
{(active) => (
|
||||
<button
|
||||
type="button"
|
||||
className="w-full text-left p-2 text-gray-900 hover:bg-indigo-50 whitespace-nowrap"
|
||||
onClick={() => openCreateIssueModal()}
|
||||
>
|
||||
Create new
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item as="div">
|
||||
{(active) => (
|
||||
<button
|
||||
type="button"
|
||||
className="w-full text-left p-2 text-gray-900 hover:bg-indigo-50 whitespace-nowrap"
|
||||
onClick={() => openIssuesListModal()}
|
||||
>
|
||||
Add an existing issue
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
<CustomMenu width="auto" ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => openCreateIssueModal()}>
|
||||
Create new
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
|
||||
Add an existing issue
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -187,181 +138,67 @@ const SingleCycleBoard: React.FC<Props> = ({
|
||||
});
|
||||
|
||||
return (
|
||||
<div key={childIssue.id} className={`border rounded bg-white shadow-sm`}>
|
||||
<div className="relative p-2 select-none">
|
||||
<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 && (
|
||||
<div
|
||||
className={`group flex-shrink-0 flex items-center gap-1 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"
|
||||
}`}
|
||||
>
|
||||
{/* {getPriorityIcon(childIssue.priority ?? "")} */}
|
||||
{childIssue.priority ?? "None"}
|
||||
<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">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>
|
||||
</div>
|
||||
)}
|
||||
{properties.state && (
|
||||
<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">
|
||||
<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 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">State</h5>
|
||||
<div>{childIssue.state_detail.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{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 && (
|
||||
<div className="group 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>
|
||||
))
|
||||
) : (
|
||||
<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 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">Assigned to</h5>
|
||||
<div>
|
||||
{childIssue.assignee_details?.length > 0
|
||||
? childIssue.assignee_details
|
||||
.map((assignee) => assignee.first_name)
|
||||
.join(", ")
|
||||
: "No one"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SingleIssue
|
||||
key={childIssue.id}
|
||||
issue={childIssue}
|
||||
properties={properties}
|
||||
assignees={assignees}
|
||||
people={people}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center text-xs font-medium hover:bg-gray-100 p-2 rounded duration-300 outline-none"
|
||||
>
|
||||
<PlusIcon className="h-3 w-3 mr-1" />
|
||||
Create
|
||||
</button>
|
||||
|
||||
<Menu as="div" className="relative text-left">
|
||||
<Menu.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
Add issue
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute left-0 z-10 mt-1 rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none whitespace-nowrap">
|
||||
<div className="py-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
type="button"
|
||||
className={classNames(
|
||||
active ? "bg-indigo-50 text-gray-900" : "text-gray-700",
|
||||
"block w-full p-2 text-left"
|
||||
)}
|
||||
onClick={() => openCreateIssueModal()}
|
||||
>
|
||||
Create new
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
type="button"
|
||||
className={classNames(
|
||||
active ? "bg-indigo-50 text-gray-900" : "text-gray-700",
|
||||
"block w-full p-2 text-left"
|
||||
)}
|
||||
onClick={() => openIssuesListModal()}
|
||||
>
|
||||
Add an existing issue
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -195,6 +195,9 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
|
||||
placeholder="Enter start date"
|
||||
error={errors.start_date}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Start date is required",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
@ -206,6 +209,9 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
|
||||
placeholder="Enter end date"
|
||||
error={errors.end_date}
|
||||
register={register}
|
||||
validations={{
|
||||
required: "End date is required",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,6 +17,8 @@ import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/out
|
||||
import { IIssue, IssueResponse } from "types";
|
||||
// constants
|
||||
import { classNames } from "constants/common";
|
||||
import { mutate } from "swr";
|
||||
import { CYCLE_ISSUES } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
@ -73,6 +75,7 @@ const CycleIssuesListModal: React.FC<Props> = ({
|
||||
.bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, cycleId, data)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
mutate(CYCLE_ISSUES(cycleId));
|
||||
handleClose();
|
||||
})
|
||||
.catch((e) => {
|
||||
|
||||
@ -6,22 +6,21 @@ import Link from "next/link";
|
||||
import useSWR from "swr";
|
||||
// headless ui
|
||||
import { Disclosure, Transition, Menu } from "@headlessui/react";
|
||||
// services
|
||||
import cycleServices from "lib/services/cycles.service";
|
||||
// hooks
|
||||
import useUser from "lib/hooks/useUser";
|
||||
// ui
|
||||
import { CustomMenu, Spinner } from "ui";
|
||||
// icons
|
||||
import { PlusIcon, EllipsisHorizontalIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
|
||||
import { PlusIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
|
||||
import { CalendarDaysIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IIssue, IWorkspaceMember, NestedKeyOf, Properties, SelectSprintType } from "types";
|
||||
import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
|
||||
// fetch keys
|
||||
import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
// constants
|
||||
import {
|
||||
addSpaceIfCamelCase,
|
||||
classNames,
|
||||
findHowManyDaysLeft,
|
||||
renderShortNumericDateFormat,
|
||||
} from "constants/common";
|
||||
@ -34,7 +33,7 @@ type Props = {
|
||||
properties: Properties;
|
||||
selectedGroup: NestedKeyOf<IIssue> | null;
|
||||
openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
|
||||
openIssuesListModal: (cycleId: string) => void;
|
||||
openIssuesListModal: () => void;
|
||||
removeIssueFromCycle: (bridgeId: string) => void;
|
||||
};
|
||||
|
||||
@ -269,51 +268,60 @@ const CyclesListView: React.FC<Props> = ({
|
||||
</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",
|
||||
// });
|
||||
// }
|
||||
// }}
|
||||
>
|
||||
<Menu as="div" className="relative text-left p-3">
|
||||
<Menu.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
Add issue
|
||||
</button>
|
||||
</div>
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute left-0 z-10 mt-1 rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none whitespace-nowrap">
|
||||
<div className="py-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
type="button"
|
||||
className={classNames(
|
||||
active ? "bg-indigo-50 text-gray-900" : "text-gray-700",
|
||||
"block w-full p-2 text-left"
|
||||
)}
|
||||
onClick={() => openCreateIssueModal()}
|
||||
>
|
||||
Create new
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
type="button"
|
||||
className={classNames(
|
||||
active ? "bg-indigo-50 text-gray-900" : "text-gray-700",
|
||||
"block w-full p-2 text-left"
|
||||
)}
|
||||
onClick={() => openIssuesListModal()}
|
||||
>
|
||||
Add an existing issue
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
)}
|
||||
</Disclosure>
|
||||
))}
|
||||
</div>
|
||||
// <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={() => selectSprint({ ...cycle, actionType: "edit" })}
|
||||
// >
|
||||
// Edit
|
||||
// </button>
|
||||
// </Menu.Item>
|
||||
// <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={() => selectSprint({ ...cycle, actionType: "delete" })}
|
||||
// >
|
||||
// Delete
|
||||
// </button>
|
||||
// </Menu.Item
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -66,26 +66,26 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
|
||||
<div className="bg-white p-3">
|
||||
<div className="grid grid-cols-8 gap-2 divide-x">
|
||||
<div className="col-span-3 space-y-3">
|
||||
<Link href={`/projects/${activeProject?.id}/cycles/${cycle.id}`}>
|
||||
<a className="flex justify-between items-center">
|
||||
<h2 className="font-medium">{cycle.name}</h2>
|
||||
<div className="flex justify-between items-center gap-2">
|
||||
<Link href={`/projects/${activeProject?.id}/cycles/${cycle.id}`}>
|
||||
<a>
|
||||
<h2 className="font-medium">{cycle.name}</h2>
|
||||
</a>
|
||||
</Link>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs bg-gray-100 px-2 py-1 rounded-xl">
|
||||
{today.getDate() < startDate.getDate()
|
||||
? "Not started"
|
||||
: today.getDate() > endDate.getDate()
|
||||
? "Over"
|
||||
: "Active"}
|
||||
{today < startDate ? "Not started" : today > endDate ? "Over" : "Active"}
|
||||
</span>
|
||||
<CustomMenu width="auto" ellipsis>
|
||||
<CustomMenu.MenuItem onClick={handleEditCycle}>Edit cycle</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={handleDeleteCycle}>
|
||||
Delete cycle permanently
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
<CustomMenu width="auto" ellipsis>
|
||||
<CustomMenu.MenuItem onClick={handleEditCycle}>Edit cycle</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={handleDeleteCycle}>
|
||||
Delete cycle permanently
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-x-2 gap-y-3 text-xs">
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
@ -157,7 +157,9 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
|
||||
<span className="text-gray-500">
|
||||
-{" "}
|
||||
{cycleIssues && cycleIssues.length > 0
|
||||
? `${(groupedIssues[group].length / cycleIssues.length) * 100}%`
|
||||
? `${Math.round(
|
||||
(groupedIssues[group].length / cycleIssues.length) * 100
|
||||
)}%`
|
||||
: "0%"}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@ -16,7 +16,7 @@ import { STATE_LIST } from "constants/fetch-keys";
|
||||
// components
|
||||
import SingleBoard from "components/project/issues/BoardView/single-board";
|
||||
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
||||
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
|
||||
import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
|
||||
// ui
|
||||
import { Spinner } from "ui";
|
||||
// types
|
||||
|
||||
@ -1,8 +1,5 @@
|
||||
// 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
|
||||
@ -12,30 +9,18 @@ import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
||||
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 { addSpaceIfCamelCase } from "constants/common";
|
||||
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
import { getPriorityIcon } from "constants/global";
|
||||
// types
|
||||
import { IIssue, Properties, NestedKeyOf, IWorkspaceMember } from "types";
|
||||
import SingleIssue from "components/project/common/board-view/single-issue";
|
||||
|
||||
type Props = {
|
||||
selectedGroup: NestedKeyOf<IIssue> | null;
|
||||
@ -78,7 +63,7 @@ const SingleBoard: React.FC<Props> = ({
|
||||
// Collapse/Expand
|
||||
const [show, setShow] = useState(true);
|
||||
|
||||
const { activeProject, activeWorkspace, states } = useUser();
|
||||
const { activeWorkspace } = useUser();
|
||||
|
||||
if (selectedGroup === "priority")
|
||||
groupTitle === "high"
|
||||
@ -206,367 +191,19 @@ const SingleBoard: React.FC<Props> = ({
|
||||
<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}
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<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>
|
||||
<SingleIssue
|
||||
issue={childIssue}
|
||||
properties={properties}
|
||||
snapshot={snapshot}
|
||||
people={people}
|
||||
assignees={assignees}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
|
||||
@ -4,7 +4,7 @@ import { mutate } from "swr";
|
||||
// headless ui
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// fetching keys
|
||||
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
|
||||
import { CYCLE_ISSUES, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
|
||||
// services
|
||||
import issueServices from "lib/services/issues.service";
|
||||
// hooks
|
||||
@ -55,6 +55,7 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
|
||||
},
|
||||
false
|
||||
);
|
||||
mutate(CYCLE_ISSUES(data.issue_cycle.id));
|
||||
setToastAlert({
|
||||
title: "Success",
|
||||
type: "success",
|
||||
|
||||
@ -6,13 +6,6 @@ import dynamic from "next/dynamic";
|
||||
import { mutate } from "swr";
|
||||
// react hook form
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// fetching keys
|
||||
import {
|
||||
PROJECT_ISSUES_DETAILS,
|
||||
PROJECT_ISSUES_LIST,
|
||||
CYCLE_ISSUES,
|
||||
USER_ISSUE,
|
||||
} from "constants/fetch-keys";
|
||||
// headless
|
||||
import { Dialog, Menu, Transition } from "@headlessui/react";
|
||||
// services
|
||||
@ -21,22 +14,30 @@ import issuesServices from "lib/services/issues.service";
|
||||
import useUser from "lib/hooks/useUser";
|
||||
import useToast from "lib/hooks/useToast";
|
||||
// ui
|
||||
import { Button, Input, TextArea } from "ui";
|
||||
// commons
|
||||
import { renderDateFormat, cosineSimilarity } from "constants/common";
|
||||
import { Button, TextArea } from "ui";
|
||||
// icons
|
||||
import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
|
||||
// components
|
||||
import SelectState from "./SelectState";
|
||||
import SelectCycles from "./SelectCycles";
|
||||
import SelectLabels from "./SelectLabels";
|
||||
import SelectProject from "./SelectProject";
|
||||
import SelectPriority from "./SelectPriority";
|
||||
import SelectAssignee from "./SelectAssignee";
|
||||
import SelectParent from "./SelectParentIssue";
|
||||
import SelectState from "components/project/issues/create-update-issue-modal/select-state";
|
||||
import SelectCycles from "components/project/issues/create-update-issue-modal/select-cycle";
|
||||
import SelectLabels from "components/project/issues/create-update-issue-modal/select-labels";
|
||||
import SelectProject from "components/project/issues/create-update-issue-modal/select-project";
|
||||
import SelectPriority from "components/project/issues/create-update-issue-modal/select-priority";
|
||||
import SelectAssignee from "components/project/issues/create-update-issue-modal/select-assignee";
|
||||
import SelectParent from "components/project/issues/create-update-issue-modal/select-parent-issue";
|
||||
import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
|
||||
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
|
||||
// types
|
||||
import type { IIssue, IssueResponse, CycleIssueResponse } from "types";
|
||||
import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
|
||||
import type { IIssue, IssueResponse } from "types";
|
||||
// fetching keys
|
||||
import {
|
||||
PROJECT_ISSUES_DETAILS,
|
||||
PROJECT_ISSUES_LIST,
|
||||
CYCLE_ISSUES,
|
||||
USER_ISSUE,
|
||||
} from "constants/fetch-keys";
|
||||
// common
|
||||
import { renderDateFormat, cosineSimilarity } from "constants/common";
|
||||
|
||||
const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
|
||||
ssr: false,
|
||||
@ -113,36 +114,18 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const addIssueToSprint = async (issueId: string, sprintId: string, issueDetail: IIssue) => {
|
||||
const addIssueToCycle = async (issueId: string, cycleId: string, issueDetail: IIssue) => {
|
||||
if (!activeWorkspace || !activeProject) return;
|
||||
await issuesServices
|
||||
.addIssueToCycle(activeWorkspace.slug, activeProject.id, sprintId, {
|
||||
.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
|
||||
issue: issueId,
|
||||
})
|
||||
.then((res) => {
|
||||
mutate<CycleIssueResponse[]>(
|
||||
CYCLE_ISSUES(sprintId),
|
||||
(prevData) => {
|
||||
const targetResponse = prevData?.find((t) => t.cycle === sprintId);
|
||||
if (targetResponse) {
|
||||
targetResponse.issue_details = issueDetail;
|
||||
return prevData;
|
||||
} else {
|
||||
return [
|
||||
...(prevData ?? []),
|
||||
{
|
||||
cycle: sprintId,
|
||||
issue_details: issueDetail,
|
||||
} as CycleIssueResponse,
|
||||
];
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
mutate(CYCLE_ISSUES(cycleId));
|
||||
if (isUpdatingSingleIssue) {
|
||||
mutate<IIssue>(
|
||||
PROJECT_ISSUES_DETAILS,
|
||||
(prevData) => ({ ...(prevData as IIssue), sprints: sprintId }),
|
||||
(prevData) => ({ ...(prevData as IIssue), sprints: cycleId }),
|
||||
false
|
||||
);
|
||||
} else
|
||||
@ -152,7 +135,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
|
||||
return {
|
||||
...(prevData as IssueResponse),
|
||||
results: (prevData?.results ?? []).map((issue) => {
|
||||
if (issue.id === res.id) return { ...issue, sprints: sprintId };
|
||||
if (issue.id === res.id) return { ...issue, sprints: cycleId };
|
||||
return issue;
|
||||
}),
|
||||
};
|
||||
@ -185,7 +168,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
|
||||
mutate<IssueResponse>(PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id));
|
||||
|
||||
if (formData.sprints && formData.sprints !== null) {
|
||||
await addIssueToSprint(res.id, formData.sprints, formData);
|
||||
await addIssueToCycle(res.id, formData.sprints, formData);
|
||||
}
|
||||
handleClose();
|
||||
resetForm();
|
||||
@ -225,7 +208,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
|
||||
false
|
||||
);
|
||||
if (formData.sprints && formData.sprints !== null) {
|
||||
await addIssueToSprint(res.id, formData.sprints, formData);
|
||||
await addIssueToCycle(res.id, formData.sprints, formData);
|
||||
}
|
||||
handleClose();
|
||||
resetForm();
|
||||
@ -39,7 +39,13 @@ const SelectAssignee: React.FC<Props> = ({ control }) => {
|
||||
title="Assignees"
|
||||
optionsFontsize="sm"
|
||||
options={people?.map((person) => {
|
||||
return { value: person.member.id, display: person.member.first_name };
|
||||
return {
|
||||
value: person.member.id,
|
||||
display:
|
||||
person.member.first_name && person.member.first_name !== ""
|
||||
? person.member.first_name
|
||||
: person.member.email,
|
||||
};
|
||||
})}
|
||||
multiple={true}
|
||||
value={value}
|
||||
@ -125,7 +125,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
|
||||
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">
|
||||
<Listbox.Options className="absolute z-10 right-0 mt-1 w-auto 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="py-1">
|
||||
{people ? (
|
||||
people.length > 0 ? (
|
||||
@ -135,7 +135,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
|
||||
className={({ active, selected }) =>
|
||||
`${
|
||||
active || selected ? "bg-indigo-50" : ""
|
||||
} flex items-center gap-2 text-gray-900 cursor-pointer select-none relative p-2 rounded-md truncate`
|
||||
} flex items-center gap-2 text-gray-900 cursor-pointer select-none p-2 truncate`
|
||||
}
|
||||
value={option.member.id}
|
||||
>
|
||||
@ -150,13 +150,15 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-4 w-4 bg-gray-700 text-white grid place-items-center capitalize rounded-full">
|
||||
<div className="flex-shrink-0 h-4 w-4 bg-gray-700 text-white grid place-items-center capitalize rounded-full">
|
||||
{option.member.first_name && option.member.first_name !== ""
|
||||
? option.member.first_name.charAt(0)
|
||||
: option.member.email.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
{option.member.first_name}
|
||||
{option.member.first_name && option.member.first_name !== ""
|
||||
? option.member.first_name
|
||||
: option.member.email}
|
||||
</Listbox.Option>
|
||||
))
|
||||
) : (
|
||||
|
||||
@ -18,7 +18,7 @@ import {
|
||||
} from "@heroicons/react/24/outline";
|
||||
import User from "public/user.png";
|
||||
// components
|
||||
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
|
||||
import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
|
||||
// types
|
||||
import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
|
||||
// services
|
||||
@ -58,7 +58,7 @@ const ProjectsList: React.FC<Props> = ({ navigation, sidebarCollapse }) => {
|
||||
<>
|
||||
<div className="flex items-center">
|
||||
<Disclosure.Button
|
||||
className={`w-full flex items-center gap-2 font-medium rounded-md p-2 text-sm ${
|
||||
className={`w-full flex items-center text-left gap-2 font-medium rounded-md p-2 text-sm ${
|
||||
sidebarCollapse ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -31,18 +31,20 @@ import { ArrowPathIcon, ChevronDownIcon, ListBulletIcon } from "@heroicons/react
|
||||
import {
|
||||
CycleIssueResponse,
|
||||
IIssue,
|
||||
IssueResponse,
|
||||
NestedKeyOf,
|
||||
Properties,
|
||||
SelectIssue,
|
||||
SelectSprintType,
|
||||
} from "types";
|
||||
// fetch-keys
|
||||
import { CYCLE_ISSUES, PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common";
|
||||
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
|
||||
import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
|
||||
import CycleIssuesListModal from "components/project/cycles/cycle-issues-list-modal";
|
||||
import ConfirmCycleDeletion from "components/project/cycles/confirm-cycle-deletion";
|
||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
||||
|
||||
const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
|
||||
{ name: "State", key: "state_detail.name" },
|
||||
@ -82,6 +84,7 @@ const SingleCycle: React.FC<Props> = () => {
|
||||
const [selectedCycle, setSelectedCycle] = useState<SelectSprintType>();
|
||||
const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
|
||||
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
|
||||
const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
|
||||
|
||||
const { activeWorkspace, activeProject, cycles, issues } = useUser();
|
||||
|
||||
@ -118,6 +121,18 @@ const SingleCycle: React.FC<Props> = () => {
|
||||
}
|
||||
);
|
||||
|
||||
const partialUpdateIssue = (formData: Partial<IIssue>, issueId: string) => {
|
||||
if (!activeWorkspace || !activeProject) return;
|
||||
issuesServices
|
||||
.patchIssue(activeWorkspace.slug, activeProject.id, issueId, formData)
|
||||
.then((response) => {
|
||||
mutate(CYCLE_ISSUES(cycleId as string));
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
const {
|
||||
issueView,
|
||||
setIssueView,
|
||||
@ -149,22 +164,6 @@ const SingleCycle: React.FC<Props> = () => {
|
||||
setCycleIssuesListModal(true);
|
||||
};
|
||||
|
||||
const addIssueToCycle = (cycleId: string, issueId: string) => {
|
||||
if (!activeWorkspace || !activeProject?.id) return;
|
||||
|
||||
issuesServices
|
||||
.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
|
||||
issue: issueId,
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
mutate(CYCLE_ISSUES(cycleId));
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
const handleDragEnd = (result: DropResult) => {
|
||||
if (!result.destination) return;
|
||||
const { source, destination } = result;
|
||||
@ -246,6 +245,11 @@ const SingleCycle: React.FC<Props> = () => {
|
||||
issues={issues}
|
||||
cycleId={cycleId as string}
|
||||
/>
|
||||
<ConfirmIssueDeletion
|
||||
handleClose={() => setDeleteIssue(undefined)}
|
||||
isOpen={!!deleteIssue}
|
||||
data={issues?.results.find((issue) => issue.id === deleteIssue)}
|
||||
/>
|
||||
<AppLayout
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
@ -264,6 +268,7 @@ const SingleCycle: React.FC<Props> = () => {
|
||||
</>
|
||||
}
|
||||
className="ml-1.5"
|
||||
width="auto"
|
||||
>
|
||||
{cycles?.map((cycle) => (
|
||||
<CustomMenu.MenuItem
|
||||
@ -435,6 +440,8 @@ const SingleCycle: React.FC<Props> = () => {
|
||||
members={members}
|
||||
openCreateIssueModal={openCreateIssueModal}
|
||||
openIssuesListModal={openIssuesListModal}
|
||||
handleDeleteIssue={setDeleteIssue}
|
||||
partialUpdateIssue={partialUpdateIssue}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -9,16 +9,8 @@ import React, { useCallback, useEffect, useState } from "react";
|
||||
import useSWR, { mutate } from "swr";
|
||||
// react hook form
|
||||
import { useForm } from "react-hook-form";
|
||||
// headless ui
|
||||
import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import issuesServices from "lib/services/issues.service";
|
||||
// fetch keys
|
||||
import {
|
||||
PROJECT_ISSUES_ACTIVITY,
|
||||
PROJECT_ISSUES_COMMENTS,
|
||||
PROJECT_ISSUES_LIST,
|
||||
} from "constants/fetch-keys";
|
||||
// hooks
|
||||
import useUser from "lib/hooks/useUser";
|
||||
// hoc
|
||||
@ -26,22 +18,18 @@ import withAuth from "lib/hoc/withAuthWrapper";
|
||||
// layouts
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// components
|
||||
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
|
||||
import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
|
||||
import IssueCommentSection from "components/project/issues/issue-detail/comment/IssueCommentSection";
|
||||
import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
|
||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
||||
// common
|
||||
import { debounce } from "constants/common";
|
||||
// components
|
||||
import IssueDetailSidebar from "components/project/issues/issue-detail/issue-detail-sidebar";
|
||||
// activites
|
||||
import IssueActivitySection from "components/project/issues/issue-detail/activity";
|
||||
// headless ui
|
||||
import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
|
||||
// ui
|
||||
import { Spinner, TextArea } from "ui";
|
||||
import HeaderButton from "ui/HeaderButton";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
|
||||
// types
|
||||
import { IIssue, IIssueComment, IssueResponse } from "types";
|
||||
// icons
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
@ -49,6 +37,16 @@ import {
|
||||
EllipsisHorizontalIcon,
|
||||
PlusIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IIssue, IIssueComment, IssueResponse } from "types";
|
||||
// fetch keys
|
||||
import {
|
||||
PROJECT_ISSUES_ACTIVITY,
|
||||
PROJECT_ISSUES_COMMENTS,
|
||||
PROJECT_ISSUES_LIST,
|
||||
} from "constants/fetch-keys";
|
||||
// common
|
||||
import { debounce } from "constants/common";
|
||||
|
||||
const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
|
||||
ssr: false,
|
||||
@ -276,8 +274,8 @@ const IssueDetail: NextPage = () => {
|
||||
parent={issueDetail}
|
||||
/>
|
||||
{issueDetail && activeProject ? (
|
||||
<div className="flex gap-5">
|
||||
<div className="basis-3/4 space-y-5 p-5">
|
||||
<div className="h-full flex gap-5">
|
||||
<div className="basis-2/3 space-y-5 p-5">
|
||||
<div className="mb-5"></div>
|
||||
<div className="rounded-lg">
|
||||
{issueDetail.parent !== null && issueDetail.parent !== "" ? (
|
||||
@ -614,7 +612,8 @@ const IssueDetail: NextPage = () => {
|
||||
</Tab.Group>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-full basis-1/4 space-y-5 p-5 border-l">
|
||||
<div className="h-full basis-1/3 space-y-5 p-5 border-l">
|
||||
{/* TODO add flex-grow, if needed */}
|
||||
<IssueDetailSidebar
|
||||
control={control}
|
||||
issueDetail={issueDetail}
|
||||
|
||||
@ -24,10 +24,10 @@ import AppLayout from "layouts/app-layout";
|
||||
// hooks
|
||||
import useIssuesFilter from "lib/hooks/useIssuesFilter";
|
||||
// components
|
||||
import ListView from "components/project/issues/ListView";
|
||||
import ListView from "components/project/issues/list-view";
|
||||
import BoardView from "components/project/issues/BoardView";
|
||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
||||
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
|
||||
import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
|
||||
// ui
|
||||
import {
|
||||
Spinner,
|
||||
|
||||
@ -51,7 +51,7 @@ const CustomMenu = ({
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
className={`absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
className={`absolute right-0 z-10 mt-1 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
width === "auto" ? "min-w-full whitespace-nowrap" : "w-56"
|
||||
}`}
|
||||
>
|
||||
@ -10,9 +10,17 @@ type CustomSelectProps = {
|
||||
children: React.ReactNode;
|
||||
label: string | JSX.Element;
|
||||
textAlignment?: "left" | "center" | "right";
|
||||
width?: "auto" | string;
|
||||
};
|
||||
|
||||
const CustomSelect = ({ children, label, textAlignment, value, onChange }: CustomSelectProps) => {
|
||||
const CustomSelect = ({
|
||||
children,
|
||||
label,
|
||||
textAlignment,
|
||||
value,
|
||||
onChange,
|
||||
width = "auto",
|
||||
}: CustomSelectProps) => {
|
||||
return (
|
||||
<Listbox
|
||||
as="div"
|
||||
@ -44,7 +52,11 @@ const CustomSelect = ({ children, label, textAlignment, value, onChange }: Custo
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Listbox.Options className="absolute right-0 z-10 mt-1 w-56 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<Listbox.Options
|
||||
className={`absolute right-0 z-10 mt-1 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
width === "auto" ? "min-w-full whitespace-nowrap" : "w-56"
|
||||
}`}
|
||||
>
|
||||
<div className="py-1">{children}</div>
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
|
||||
@ -2,11 +2,11 @@ export { default as Button } from "./Button";
|
||||
export { default as Input } from "./Input";
|
||||
export { default as Select } from "./Select";
|
||||
export { default as TextArea } from "./TextArea";
|
||||
export { default as CustomListbox } from "./CustomListbox";
|
||||
export { default as CustomMenu } from "./CustomMenu";
|
||||
export { default as CustomListbox } from "./custom-listbox";
|
||||
export { default as CustomMenu } from "./custom-menu";
|
||||
export { default as Spinner } from "./Spinner";
|
||||
export { default as Tooltip } from "./Tooltip";
|
||||
export { default as SearchListbox } from "./SearchListbox";
|
||||
export { default as SearchListbox } from "./search-listbox";
|
||||
export { default as HeaderButton } from "./HeaderButton";
|
||||
export * from "./Breadcrumbs";
|
||||
export * from "./EmptySpace";
|
||||
|
||||
@ -100,12 +100,12 @@ const SearchListbox: React.FC<Props> = ({
|
||||
} ${optionsClassName || ""}`}
|
||||
>
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent border-b p-2 mb-1 focus:outline-none sm:text-sm"
|
||||
className="w-full bg-transparent border-b p-2 focus:outline-none text-xs"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search"
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
<div className="p-1">
|
||||
<div className="py-1">
|
||||
{filteredOptions ? (
|
||||
filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
@ -113,8 +113,8 @@ const SearchListbox: React.FC<Props> = ({
|
||||
key={option.value}
|
||||
className={({ active }) =>
|
||||
`${
|
||||
active ? "text-white bg-theme" : "text-gray-900"
|
||||
} cursor-pointer select-none truncate font-medium relative p-2 rounded-md`
|
||||
active ? "bg-indigo-50" : ""
|
||||
} cursor-pointer select-none truncate text-gray-900 p-2`
|
||||
}
|
||||
value={option.value}
|
||||
>
|
||||
Loading…
Reference in New Issue
Block a user