mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
Merge pull request #232 from makeplane/refactor/folder_structure
refactor: folder structure
This commit is contained in:
sriram veeraghanta
GitHub
commit
c7e006d2c1
@ -35,7 +35,6 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const onSubmit = ({ email }: EmailCodeFormValues) => {
|
const onSubmit = ({ email }: EmailCodeFormValues) => {
|
||||||
console.log(email);
|
|
||||||
authenticationService
|
authenticationService
|
||||||
.emailCode({ email })
|
.emailCode({ email })
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
|
|||||||
@ -1,37 +1,38 @@
|
|||||||
// TODO: Refactor this component: into a different file, use this file to export the components
|
// TODO: Refactor this component: into a different file, use this file to export the components
|
||||||
import React, { useState, useCallback, useEffect } from "react";
|
import React, { useState, useCallback, useEffect } from "react";
|
||||||
// next
|
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
// swr
|
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
// hooks
|
|
||||||
|
// headless ui
|
||||||
import { Combobox, Dialog, Transition } from "@headlessui/react";
|
import { Combobox, Dialog, Transition } from "@headlessui/react";
|
||||||
|
// services
|
||||||
|
import userService from "services/user.service";
|
||||||
|
// hooks
|
||||||
|
import useTheme from "hooks/use-theme";
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
import useUser from "hooks/use-user";
|
||||||
|
// components
|
||||||
|
import ShortcutsModal from "components/command-palette/shortcuts";
|
||||||
|
import { BulkDeleteIssuesModal } from "components/core";
|
||||||
|
import { CreateProjectModal } from "components/project";
|
||||||
|
import { CreateUpdateIssueModal } from "components/issues";
|
||||||
|
import { CreateUpdateModuleModal } from "components/modules";
|
||||||
|
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
|
||||||
|
// ui
|
||||||
|
import { Button } from "components/ui";
|
||||||
|
// icons
|
||||||
import {
|
import {
|
||||||
FolderIcon,
|
FolderIcon,
|
||||||
RectangleStackIcon,
|
RectangleStackIcon,
|
||||||
ClipboardDocumentListIcon,
|
ClipboardDocumentListIcon,
|
||||||
MagnifyingGlassIcon,
|
MagnifyingGlassIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
import useTheme from "hooks/use-theme";
|
|
||||||
import useToast from "hooks/use-toast";
|
|
||||||
import useUser from "hooks/use-user";
|
|
||||||
// services
|
|
||||||
import userService from "services/user.service";
|
|
||||||
// components
|
|
||||||
import ShortcutsModal from "components/command-palette/shortcuts";
|
|
||||||
import { CreateProjectModal } from "components/project";
|
|
||||||
import { CreateUpdateIssueModal } from "components/issues/modal";
|
|
||||||
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
|
|
||||||
import CreateUpdateModuleModal from "components/project/modules/create-update-module-modal";
|
|
||||||
import BulkDeleteIssuesModal from "components/common/bulk-delete-issues-modal";
|
|
||||||
// headless ui
|
|
||||||
// helpers
|
// helpers
|
||||||
import { copyTextToClipboard } from "helpers/string.helper";
|
import { copyTextToClipboard } from "helpers/string.helper";
|
||||||
// types
|
// types
|
||||||
import { IIssue } from "types";
|
import { IIssue } from "types";
|
||||||
// ui
|
|
||||||
import { Button } from "components/ui";
|
|
||||||
// icons
|
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import { USER_ISSUE } from "constants/fetch-keys";
|
import { USER_ISSUE } from "constants/fetch-keys";
|
||||||
|
|
||||||
@ -74,7 +75,7 @@ const CommandPalette: React.FC = () => {
|
|||||||
name: "Add new issue...",
|
name: "Add new issue...",
|
||||||
icon: RectangleStackIcon,
|
icon: RectangleStackIcon,
|
||||||
hide: !projectId,
|
hide: !projectId,
|
||||||
shortcut: "I",
|
shortcut: "C",
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
setIsIssueModalOpen(true);
|
setIsIssueModalOpen(true);
|
||||||
},
|
},
|
||||||
@ -111,7 +112,6 @@ const CommandPalette: React.FC = () => {
|
|||||||
if (!router.query.issueId) return;
|
if (!router.query.issueId) return;
|
||||||
|
|
||||||
const url = new URL(window.location.href);
|
const url = new URL(window.location.href);
|
||||||
console.log(url);
|
|
||||||
copyTextToClipboard(url.href)
|
copyTextToClipboard(url.href)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
setToastAlert({
|
setToastAlert({
|
||||||
@ -179,7 +179,6 @@ const CommandPalette: React.FC = () => {
|
|||||||
<CreateUpdateModuleModal
|
<CreateUpdateModuleModal
|
||||||
isOpen={isCreateModuleModalOpen}
|
isOpen={isCreateModuleModalOpen}
|
||||||
setIsOpen={setIsCreateModuleModalOpen}
|
setIsOpen={setIsCreateModuleModalOpen}
|
||||||
projectId={projectId as string}
|
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
@ -330,7 +329,6 @@ const CommandPalette: React.FC = () => {
|
|||||||
/>
|
/>
|
||||||
<span className="ml-3 flex-auto truncate">{action.name}</span>
|
<span className="ml-3 flex-auto truncate">{action.name}</span>
|
||||||
<span className="ml-3 flex-none text-xs font-semibold text-gray-500">
|
<span className="ml-3 flex-none text-xs font-semibold text-gray-500">
|
||||||
<kbd className="font-sans">⌘</kbd>
|
|
||||||
<kbd className="font-sans">{action.shortcut}</kbd>
|
<kbd className="font-sans">{action.shortcut}</kbd>
|
||||||
</span>
|
</span>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -1,3 +0,0 @@
|
|||||||
const SingleBoard = () => <></>;
|
|
||||||
|
|
||||||
export default SingleBoard;
|
|
||||||
@ -1,464 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
import Link from "next/link";
|
|
||||||
import Image from "next/image";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import useSWR, { mutate } from "swr";
|
|
||||||
|
|
||||||
// react-beautiful-dnd
|
|
||||||
import { DraggableStateSnapshot } from "react-beautiful-dnd";
|
|
||||||
// react-datepicker
|
|
||||||
import DatePicker from "react-datepicker";
|
|
||||||
import "react-datepicker/dist/react-datepicker.css";
|
|
||||||
// headless ui
|
|
||||||
import { Listbox, Transition } from "@headlessui/react";
|
|
||||||
// constants
|
|
||||||
import { TrashIcon } from "@heroicons/react/24/outline";
|
|
||||||
// services
|
|
||||||
import issuesService from "services/issues.service";
|
|
||||||
import stateService from "services/state.service";
|
|
||||||
import projectService from "services/project.service";
|
|
||||||
// components
|
|
||||||
import { AssigneesList, CustomDatePicker } from "components/ui";
|
|
||||||
// helpers
|
|
||||||
import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
|
|
||||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
|
||||||
// types
|
|
||||||
import {
|
|
||||||
CycleIssueResponse,
|
|
||||||
IIssue,
|
|
||||||
IssueResponse,
|
|
||||||
IUserLite,
|
|
||||||
IWorkspaceMember,
|
|
||||||
ModuleIssueResponse,
|
|
||||||
Properties,
|
|
||||||
UserAuth,
|
|
||||||
} from "types";
|
|
||||||
// common
|
|
||||||
import { PRIORITIES } from "constants/";
|
|
||||||
import {
|
|
||||||
STATE_LIST,
|
|
||||||
PROJECT_DETAILS,
|
|
||||||
CYCLE_ISSUES,
|
|
||||||
MODULE_ISSUES,
|
|
||||||
PROJECT_ISSUES_LIST,
|
|
||||||
} from "constants/fetch-keys";
|
|
||||||
import { getPriorityIcon } from "constants/global";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
type?: string;
|
|
||||||
typeId?: string;
|
|
||||||
issue: IIssue;
|
|
||||||
properties: Properties;
|
|
||||||
snapshot?: DraggableStateSnapshot;
|
|
||||||
assignees: Partial<IUserLite>[] | (Partial<IUserLite> | undefined)[];
|
|
||||||
people: IWorkspaceMember[] | undefined;
|
|
||||||
handleDeleteIssue?: React.Dispatch<React.SetStateAction<string | undefined>>;
|
|
||||||
userAuth: UserAuth;
|
|
||||||
};
|
|
||||||
|
|
||||||
const SingleBoardIssue: React.FC<Props> = ({
|
|
||||||
type,
|
|
||||||
typeId,
|
|
||||||
issue,
|
|
||||||
properties,
|
|
||||||
snapshot,
|
|
||||||
assignees,
|
|
||||||
people,
|
|
||||||
handleDeleteIssue,
|
|
||||||
userAuth,
|
|
||||||
}) => {
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug, projectId } = router.query;
|
|
||||||
|
|
||||||
const { data: states } = useSWR(
|
|
||||||
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const { data: projectDetails } = useSWR(
|
|
||||||
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => projectService.getProject(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const partialUpdateIssue = (formData: Partial<IIssue>) => {
|
|
||||||
if (!workspaceSlug || !projectId) return;
|
|
||||||
|
|
||||||
if (typeId) {
|
|
||||||
mutate<CycleIssueResponse[]>(
|
|
||||||
CYCLE_ISSUES(typeId ?? ""),
|
|
||||||
(prevData) => {
|
|
||||||
const updatedIssues = (prevData ?? []).map((p) => {
|
|
||||||
if (p.issue_detail.id === issue.id) {
|
|
||||||
return {
|
|
||||||
...p,
|
|
||||||
issue_detail: {
|
|
||||||
...p.issue_detail,
|
|
||||||
...formData,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return p;
|
|
||||||
});
|
|
||||||
return [...updatedIssues];
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
mutate<ModuleIssueResponse[]>(
|
|
||||||
MODULE_ISSUES(typeId ?? ""),
|
|
||||||
(prevData) => {
|
|
||||||
const updatedIssues = (prevData ?? []).map((p) => {
|
|
||||||
if (p.issue_detail.id === issue.id) {
|
|
||||||
return {
|
|
||||||
...p,
|
|
||||||
issue_detail: {
|
|
||||||
...p.issue_detail,
|
|
||||||
...formData,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return p;
|
|
||||||
});
|
|
||||||
return [...updatedIssues];
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
mutate<IssueResponse>(
|
|
||||||
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
|
||||||
(prevData) => ({
|
|
||||||
...(prevData as IssueResponse),
|
|
||||||
results: (prevData?.results ?? []).map((p) => {
|
|
||||||
if (p.id === issue.id) return { ...p, ...formData };
|
|
||||||
return p;
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
issuesService
|
|
||||||
.patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
|
|
||||||
.then((res) => {
|
|
||||||
if (typeId) {
|
|
||||||
mutate(CYCLE_ISSUES(typeId ?? ""));
|
|
||||||
mutate(MODULE_ISSUES(typeId ?? ""));
|
|
||||||
}
|
|
||||||
|
|
||||||
mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`rounded border bg-white shadow-sm ${
|
|
||||||
snapshot && snapshot.isDragging ? "border-theme bg-indigo-50 shadow-lg" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="group/card relative select-none p-2">
|
|
||||||
{handleDeleteIssue && !isNotAllowed && (
|
|
||||||
<div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="grid h-7 w-7 place-items-center rounded bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
|
|
||||||
onClick={() => handleDeleteIssue(issue.id)}
|
|
||||||
>
|
|
||||||
<TrashIcon className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
|
|
||||||
<a>
|
|
||||||
{properties.key && (
|
|
||||||
<div className="mb-2 text-xs font-medium text-gray-500">
|
|
||||||
{projectDetails?.identifier}-{issue.sequence_id}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<h5
|
|
||||||
className="mb-3 text-sm group-hover:text-theme"
|
|
||||||
style={{ lineClamp: 3, WebkitLineClamp: 3 }}
|
|
||||||
>
|
|
||||||
{issue.name}
|
|
||||||
</h5>
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
<div className="flex flex-wrap items-center gap-x-1 gap-y-2 text-xs">
|
|
||||||
{properties.priority && (
|
|
||||||
<Listbox
|
|
||||||
as="div"
|
|
||||||
value={issue.priority}
|
|
||||||
onChange={(data: string) => {
|
|
||||||
partialUpdateIssue({ priority: data });
|
|
||||||
}}
|
|
||||||
className="group relative flex-shrink-0"
|
|
||||||
disabled={isNotAllowed}
|
|
||||||
>
|
|
||||||
{({ open }) => (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<Listbox.Button
|
|
||||||
className={`grid ${
|
|
||||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
|
|
||||||
} place-items-center rounded px-2 py-1 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
|
||||||
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"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{getPriorityIcon(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-20 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
|
||||||
{PRIORITIES?.map((priority) => (
|
|
||||||
<Listbox.Option
|
|
||||||
key={priority}
|
|
||||||
className={({ active }) =>
|
|
||||||
`flex cursor-pointer select-none items-center gap-2 px-3 py-2 capitalize ${
|
|
||||||
active ? "bg-indigo-50" : "bg-white"
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
value={priority}
|
|
||||||
>
|
|
||||||
{getPriorityIcon(priority)}
|
|
||||||
{priority}
|
|
||||||
</Listbox.Option>
|
|
||||||
))}
|
|
||||||
</Listbox.Options>
|
|
||||||
</Transition>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Listbox>
|
|
||||||
)}
|
|
||||||
{properties.state && (
|
|
||||||
<Listbox
|
|
||||||
as="div"
|
|
||||||
value={issue.state}
|
|
||||||
onChange={(data: string) => {
|
|
||||||
partialUpdateIssue({ state: data });
|
|
||||||
}}
|
|
||||||
className="group relative flex-shrink-0"
|
|
||||||
disabled={isNotAllowed}
|
|
||||||
>
|
|
||||||
{({ open }) => (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<Listbox.Button
|
|
||||||
className={`flex ${
|
|
||||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
|
|
||||||
} items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
|
||||||
style={{
|
|
||||||
backgroundColor: issue.state_detail.color,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{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-20 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
|
||||||
{states?.map((state) => (
|
|
||||||
<Listbox.Option
|
|
||||||
key={state.id}
|
|
||||||
className={({ active }) =>
|
|
||||||
`flex cursor-pointer select-none items-center gap-2 px-3 py-2 ${
|
|
||||||
active ? "bg-indigo-50" : "bg-white"
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
value={state.id}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
|
||||||
style={{
|
|
||||||
backgroundColor: state.color,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{addSpaceIfCamelCase(state.name)}
|
|
||||||
</Listbox.Option>
|
|
||||||
))}
|
|
||||||
</Listbox.Options>
|
|
||||||
</Transition>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Listbox>
|
|
||||||
)}
|
|
||||||
{/* {properties.cycle && !typeId && (
|
|
||||||
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
|
||||||
{issue.issue_cycle ? issue.issue_cycle.cycle_detail.name : "None"}
|
|
||||||
</div>
|
|
||||||
)} */}
|
|
||||||
{properties.due_date && (
|
|
||||||
<div
|
|
||||||
className={`group relative ${
|
|
||||||
issue.target_date === null
|
|
||||||
? ""
|
|
||||||
: issue.target_date < new Date().toISOString()
|
|
||||||
? "text-red-600"
|
|
||||||
: findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<CustomDatePicker
|
|
||||||
placeholder="N/A"
|
|
||||||
value={issue?.target_date}
|
|
||||||
onChange={(val) =>
|
|
||||||
partialUpdateIssue({
|
|
||||||
target_date: val,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
|
|
||||||
/>
|
|
||||||
{/* <DatePicker
|
|
||||||
placeholderText="N/A"
|
|
||||||
value={
|
|
||||||
issue?.target_date ? `${renderShortNumericDateFormat(issue.target_date)}` : "N/A"
|
|
||||||
}
|
|
||||||
selected={issue?.target_date ? new Date(issue.target_date) : null}
|
|
||||||
onChange={(val: Date) => {
|
|
||||||
partialUpdateIssue({
|
|
||||||
target_date: val
|
|
||||||
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
|
|
||||||
: null,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
dateFormat="dd-MM-yyyy"
|
|
||||||
className={`cursor-pointer rounded-md border px-2 py-[3px] text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
|
||||||
issue?.target_date ? "w-[4.5rem]" : "w-[3rem] text-center"
|
|
||||||
}`}
|
|
||||||
isClearable
|
|
||||||
/> */}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{properties.sub_issue_count && (
|
|
||||||
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
|
||||||
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
|
||||||
</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 });
|
|
||||||
}}
|
|
||||||
className="group relative flex-shrink-0"
|
|
||||||
disabled={isNotAllowed}
|
|
||||||
>
|
|
||||||
{({ open }) => (
|
|
||||||
<div>
|
|
||||||
<Listbox.Button>
|
|
||||||
<div
|
|
||||||
className={`flex ${
|
|
||||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
|
|
||||||
} items-center gap-1 text-xs`}
|
|
||||||
>
|
|
||||||
<AssigneesList users={assignees} length={3} />
|
|
||||||
</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-20 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
|
||||||
{people?.map((person) => (
|
|
||||||
<Listbox.Option
|
|
||||||
key={person.id}
|
|
||||||
className={({ active }) =>
|
|
||||||
`cursor-pointer select-none p-2 ${active ? "bg-indigo-50" : "bg-white"}`
|
|
||||||
}
|
|
||||||
value={person.member.id}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`flex items-center gap-x-1 ${
|
|
||||||
assignees.includes({
|
|
||||||
id: person.member.last_name,
|
|
||||||
first_name: person.member.first_name,
|
|
||||||
last_name: person.member.last_name,
|
|
||||||
email: person.member.email,
|
|
||||||
avatar: person.member.avatar,
|
|
||||||
})
|
|
||||||
? "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"
|
|
||||||
priority={false}
|
|
||||||
loading="lazy"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="grid h-4 w-4 place-items-center rounded-full bg-gray-700 capitalize text-white">
|
|
||||||
{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>
|
|
||||||
)}
|
|
||||||
</Listbox>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SingleBoardIssue;
|
|
||||||
@ -1,434 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
|
|
||||||
import Link from "next/link";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import useSWR, { mutate } from "swr";
|
|
||||||
|
|
||||||
// services
|
|
||||||
import issuesService from "services/issues.service";
|
|
||||||
import workspaceService from "services/workspace.service";
|
|
||||||
import stateService from "services/state.service";
|
|
||||||
// headless ui
|
|
||||||
import { Listbox, Transition } from "@headlessui/react";
|
|
||||||
// ui
|
|
||||||
import { CustomMenu, CustomSelect, AssigneesList, Avatar, CustomDatePicker } from "components/ui";
|
|
||||||
// components
|
|
||||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
|
||||||
// helpers
|
|
||||||
import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
|
|
||||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
|
||||||
// types
|
|
||||||
import {
|
|
||||||
CycleIssueResponse,
|
|
||||||
IIssue,
|
|
||||||
IssueResponse,
|
|
||||||
IWorkspaceMember,
|
|
||||||
ModuleIssueResponse,
|
|
||||||
Properties,
|
|
||||||
UserAuth,
|
|
||||||
} from "types";
|
|
||||||
// fetch-keys
|
|
||||||
import {
|
|
||||||
CYCLE_ISSUES,
|
|
||||||
MODULE_ISSUES,
|
|
||||||
PROJECT_ISSUES_LIST,
|
|
||||||
STATE_LIST,
|
|
||||||
WORKSPACE_MEMBERS,
|
|
||||||
} from "constants/fetch-keys";
|
|
||||||
// constants
|
|
||||||
import { getPriorityIcon } from "constants/global";
|
|
||||||
import { PRIORITIES } from "constants/";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
type?: string;
|
|
||||||
typeId?: string;
|
|
||||||
issue: IIssue;
|
|
||||||
properties: Properties;
|
|
||||||
editIssue: () => void;
|
|
||||||
removeIssue?: () => void;
|
|
||||||
userAuth: UserAuth;
|
|
||||||
};
|
|
||||||
|
|
||||||
const SingleListIssue: React.FC<Props> = ({
|
|
||||||
type,
|
|
||||||
typeId,
|
|
||||||
issue,
|
|
||||||
properties,
|
|
||||||
editIssue,
|
|
||||||
removeIssue,
|
|
||||||
userAuth,
|
|
||||||
}) => {
|
|
||||||
const [deleteIssue, setDeleteIssue] = useState<IIssue | undefined>();
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug, projectId } = router.query;
|
|
||||||
|
|
||||||
const { data: states } = useSWR(
|
|
||||||
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const { data: people } = useSWR<IWorkspaceMember[]>(
|
|
||||||
workspaceSlug ? WORKSPACE_MEMBERS : null,
|
|
||||||
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
|
|
||||||
);
|
|
||||||
|
|
||||||
const partialUpdateIssue = (formData: Partial<IIssue>) => {
|
|
||||||
if (!workspaceSlug || !projectId) return;
|
|
||||||
|
|
||||||
if (typeId) {
|
|
||||||
mutate<CycleIssueResponse[]>(
|
|
||||||
CYCLE_ISSUES(typeId ?? ""),
|
|
||||||
(prevData) => {
|
|
||||||
const updatedIssues = (prevData ?? []).map((p) => {
|
|
||||||
if (p.issue_detail.id === issue.id) {
|
|
||||||
return {
|
|
||||||
...p,
|
|
||||||
issue_detail: {
|
|
||||||
...p.issue_detail,
|
|
||||||
...formData,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return p;
|
|
||||||
});
|
|
||||||
return [...updatedIssues];
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
mutate<ModuleIssueResponse[]>(
|
|
||||||
MODULE_ISSUES(typeId ?? ""),
|
|
||||||
(prevData) => {
|
|
||||||
const updatedIssues = (prevData ?? []).map((p) => {
|
|
||||||
if (p.issue_detail.id === issue.id) {
|
|
||||||
return {
|
|
||||||
...p,
|
|
||||||
issue_detail: {
|
|
||||||
...p.issue_detail,
|
|
||||||
...formData,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return p;
|
|
||||||
});
|
|
||||||
return [...updatedIssues];
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
mutate<IssueResponse>(
|
|
||||||
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
|
||||||
(prevData) => ({
|
|
||||||
...(prevData as IssueResponse),
|
|
||||||
results: (prevData?.results ?? []).map((p) => {
|
|
||||||
if (p.id === issue.id) return { ...p, ...formData };
|
|
||||||
return p;
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
issuesService
|
|
||||||
.patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
|
|
||||||
.then((res) => {
|
|
||||||
if (typeId) {
|
|
||||||
mutate(CYCLE_ISSUES(typeId ?? ""));
|
|
||||||
mutate(MODULE_ISSUES(typeId ?? ""));
|
|
||||||
}
|
|
||||||
|
|
||||||
mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ConfirmIssueDeletion
|
|
||||||
handleClose={() => setDeleteIssue(undefined)}
|
|
||||||
isOpen={!!deleteIssue}
|
|
||||||
data={deleteIssue}
|
|
||||||
/>
|
|
||||||
<div className="flex items-center justify-between gap-2 px-4 py-3 text-sm">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span
|
|
||||||
className={`block h-1.5 w-1.5 flex-shrink-0 rounded-full`}
|
|
||||||
style={{
|
|
||||||
backgroundColor: issue.state_detail.color,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.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">
|
|
||||||
{issue.project_detail?.identifier}-{issue.sequence_id}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<span>{issue.name}</span>
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
|
|
||||||
{properties.priority && (
|
|
||||||
<Listbox
|
|
||||||
as="div"
|
|
||||||
value={issue.priority}
|
|
||||||
onChange={(data: string) => {
|
|
||||||
partialUpdateIssue({ priority: data });
|
|
||||||
}}
|
|
||||||
className="group relative flex-shrink-0"
|
|
||||||
disabled={isNotAllowed}
|
|
||||||
>
|
|
||||||
{({ open }) => (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<Listbox.Button
|
|
||||||
className={`flex ${
|
|
||||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
|
|
||||||
} items-center gap-x-2 rounded px-2 py-0.5 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
|
||||||
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"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{getPriorityIcon(
|
|
||||||
issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
|
|
||||||
"text-sm"
|
|
||||||
)}
|
|
||||||
</Listbox.Button>
|
|
||||||
|
|
||||||
<Transition
|
|
||||||
show={open}
|
|
||||||
as={React.Fragment}
|
|
||||||
leave="transition ease-in duration-100"
|
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0"
|
|
||||||
>
|
|
||||||
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 w-36 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
|
||||||
{PRIORITIES?.map((priority) => (
|
|
||||||
<Listbox.Option
|
|
||||||
key={priority}
|
|
||||||
className={({ active }) =>
|
|
||||||
`flex cursor-pointer select-none items-center gap-x-2 px-3 py-2 capitalize ${
|
|
||||||
active ? "bg-indigo-50" : "bg-white"
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
value={priority}
|
|
||||||
>
|
|
||||||
{getPriorityIcon(priority, "text-sm")}
|
|
||||||
{priority ?? "None"}
|
|
||||||
</Listbox.Option>
|
|
||||||
))}
|
|
||||||
</Listbox.Options>
|
|
||||||
</Transition>
|
|
||||||
</div>
|
|
||||||
<div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
|
|
||||||
<h5 className="mb-1 font-medium 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 && (
|
|
||||||
<CustomSelect
|
|
||||||
label={
|
|
||||||
<>
|
|
||||||
<span
|
|
||||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
|
||||||
style={{
|
|
||||||
backgroundColor: issue.state_detail.color,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{addSpaceIfCamelCase(issue.state_detail.name)}
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
value={issue.state}
|
|
||||||
onChange={(data: string) => {
|
|
||||||
partialUpdateIssue({ state: data });
|
|
||||||
}}
|
|
||||||
maxHeight="md"
|
|
||||||
noChevron
|
|
||||||
disabled={isNotAllowed}
|
|
||||||
>
|
|
||||||
{states?.map((state) => (
|
|
||||||
<CustomSelect.Option key={state.id} value={state.id}>
|
|
||||||
<>
|
|
||||||
<span
|
|
||||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
|
||||||
style={{
|
|
||||||
backgroundColor: state.color,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{addSpaceIfCamelCase(state.name)}
|
|
||||||
</>
|
|
||||||
</CustomSelect.Option>
|
|
||||||
))}
|
|
||||||
</CustomSelect>
|
|
||||||
)}
|
|
||||||
{/* {properties.cycle && !typeId && (
|
|
||||||
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
|
||||||
{issue.issue_cycle ? issue.issue_cycle.cycle_detail.name : "None"}
|
|
||||||
</div>
|
|
||||||
)} */}
|
|
||||||
{properties.due_date && (
|
|
||||||
<div
|
|
||||||
className={`group relative ${
|
|
||||||
issue.target_date === null
|
|
||||||
? ""
|
|
||||||
: issue.target_date < new Date().toISOString()
|
|
||||||
? "text-red-600"
|
|
||||||
: findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<CustomDatePicker
|
|
||||||
placeholder="N/A"
|
|
||||||
value={issue?.target_date}
|
|
||||||
onChange={(val) =>
|
|
||||||
partialUpdateIssue({
|
|
||||||
target_date: val,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
|
|
||||||
/>
|
|
||||||
<div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
|
|
||||||
<h5 className="mb-1 font-medium text-gray-900">Due date</h5>
|
|
||||||
<div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
|
|
||||||
<div>
|
|
||||||
{issue.target_date
|
|
||||||
? issue.target_date < new Date().toISOString()
|
|
||||||
? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
|
|
||||||
: findHowManyDaysLeft(issue.target_date) <= 3
|
|
||||||
? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
|
|
||||||
: "Due date"
|
|
||||||
: "N/A"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{properties.sub_issue_count && (
|
|
||||||
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm">
|
|
||||||
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
|
||||||
</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 });
|
|
||||||
}}
|
|
||||||
className="group relative flex-shrink-0"
|
|
||||||
disabled={isNotAllowed}
|
|
||||||
>
|
|
||||||
{({ open }) => (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<Listbox.Button>
|
|
||||||
<div
|
|
||||||
className={`flex ${
|
|
||||||
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
|
|
||||||
} items-center gap-1 text-xs`}
|
|
||||||
>
|
|
||||||
<AssigneesList userIds={issue.assignees ?? []} />
|
|
||||||
</div>
|
|
||||||
</Listbox.Button>
|
|
||||||
|
|
||||||
<Transition
|
|
||||||
show={open}
|
|
||||||
as={React.Fragment}
|
|
||||||
leave="transition ease-in duration-100"
|
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0"
|
|
||||||
>
|
|
||||||
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
|
||||||
{people?.map((person) => (
|
|
||||||
<Listbox.Option
|
|
||||||
key={person.id}
|
|
||||||
className={({ active, selected }) =>
|
|
||||||
`flex items-center gap-x-1 cursor-pointer select-none p-2 ${
|
|
||||||
active ? "bg-indigo-50" : ""
|
|
||||||
} ${
|
|
||||||
selected || issue.assignees?.includes(person.member.id)
|
|
||||||
? "bg-indigo-50 font-medium"
|
|
||||||
: "font-normal"
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
value={person.member.id}
|
|
||||||
>
|
|
||||||
<Avatar user={person.member} />
|
|
||||||
<p>
|
|
||||||
{person.member.first_name && person.member.first_name !== ""
|
|
||||||
? person.member.first_name
|
|
||||||
: person.member.email}
|
|
||||||
</p>
|
|
||||||
</Listbox.Option>
|
|
||||||
))}
|
|
||||||
</Listbox.Options>
|
|
||||||
</Transition>
|
|
||||||
</div>
|
|
||||||
<div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
|
|
||||||
<h5 className="mb-1 font-medium">Assigned to</h5>
|
|
||||||
<div>
|
|
||||||
{issue.assignee_details?.length > 0
|
|
||||||
? issue.assignee_details.map((assignee) => assignee.first_name).join(", ")
|
|
||||||
: "No one"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Listbox>
|
|
||||||
)}
|
|
||||||
{type && !isNotAllowed && (
|
|
||||||
<CustomMenu width="auto" ellipsis>
|
|
||||||
<CustomMenu.MenuItem onClick={editIssue}>Edit</CustomMenu.MenuItem>
|
|
||||||
{type !== "issue" && (
|
|
||||||
<CustomMenu.MenuItem onClick={removeIssue}>
|
|
||||||
<>Remove from {type}</>
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
)}
|
|
||||||
<CustomMenu.MenuItem onClick={() => setDeleteIssue(issue)}>
|
|
||||||
Delete permanently
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
</CustomMenu>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SingleListIssue;
|
|
||||||
92
apps/app/components/core/board-view/all-boards.tsx
Normal file
92
apps/app/components/core/board-view/all-boards.tsx
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
// react-beautiful-dnd
|
||||||
|
import { DragDropContext, DropResult } from "react-beautiful-dnd";
|
||||||
|
// hooks
|
||||||
|
import useIssueView from "hooks/use-issue-view";
|
||||||
|
// components
|
||||||
|
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
||||||
|
import { SingleBoard } from "components/core/board-view/single-board";
|
||||||
|
// types
|
||||||
|
import { IIssue, IProjectMember, IState, UserAuth } from "types";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
type: "issue" | "cycle" | "module";
|
||||||
|
issues: IIssue[];
|
||||||
|
states: IState[] | undefined;
|
||||||
|
members: IProjectMember[] | undefined;
|
||||||
|
addIssueToState: (groupTitle: string, stateId: string | null) => void;
|
||||||
|
openIssuesListModal?: (() => void) | null;
|
||||||
|
handleDeleteIssue: (issue: IIssue) => void;
|
||||||
|
handleOnDragEnd: (result: DropResult) => void;
|
||||||
|
userAuth: UserAuth;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AllBoards: React.FC<Props> = ({
|
||||||
|
type,
|
||||||
|
issues,
|
||||||
|
states,
|
||||||
|
members,
|
||||||
|
addIssueToState,
|
||||||
|
openIssuesListModal,
|
||||||
|
handleDeleteIssue,
|
||||||
|
handleOnDragEnd,
|
||||||
|
userAuth,
|
||||||
|
}) => {
|
||||||
|
const { groupedByIssues, groupByProperty: selectedGroup, orderBy } = useIssueView(issues);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{groupedByIssues ? (
|
||||||
|
<div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
|
||||||
|
<DragDropContext onDragEnd={handleOnDragEnd}>
|
||||||
|
<div className="h-full w-full overflow-hidden">
|
||||||
|
<StrictModeDroppable droppableId="state" type="state" direction="horizontal">
|
||||||
|
{(provided) => (
|
||||||
|
<div
|
||||||
|
className="h-full w-full"
|
||||||
|
{...provided.droppableProps}
|
||||||
|
ref={provided.innerRef}
|
||||||
|
>
|
||||||
|
<div className="flex h-full gap-x-4 overflow-x-auto overflow-y-hidden">
|
||||||
|
{Object.keys(groupedByIssues).map((singleGroup, index) => {
|
||||||
|
const stateId =
|
||||||
|
selectedGroup === "state_detail.name"
|
||||||
|
? states?.find((s) => s.name === singleGroup)?.id ?? null
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const bgColor =
|
||||||
|
selectedGroup === "state_detail.name"
|
||||||
|
? states?.find((s) => s.name === singleGroup)?.color
|
||||||
|
: "#000000";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SingleBoard
|
||||||
|
key={index}
|
||||||
|
index={index}
|
||||||
|
type={type}
|
||||||
|
bgColor={bgColor}
|
||||||
|
groupTitle={singleGroup}
|
||||||
|
groupedByIssues={groupedByIssues}
|
||||||
|
selectedGroup={selectedGroup}
|
||||||
|
members={members}
|
||||||
|
addIssueToState={() => addIssueToState(singleGroup, stateId)}
|
||||||
|
handleDeleteIssue={handleDeleteIssue}
|
||||||
|
openIssuesListModal={openIssuesListModal ?? null}
|
||||||
|
orderBy={orderBy}
|
||||||
|
userAuth={userAuth}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
{provided.placeholder}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</StrictModeDroppable>
|
||||||
|
</div>
|
||||||
|
</DragDropContext>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex h-full w-full items-center justify-center">Loading...</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -14,6 +14,7 @@ import { addSpaceIfCamelCase } from "helpers/string.helper";
|
|||||||
// types
|
// types
|
||||||
import { IIssue, NestedKeyOf } from "types";
|
import { IIssue, NestedKeyOf } from "types";
|
||||||
type Props = {
|
type Props = {
|
||||||
|
provided: DraggableProvided;
|
||||||
isCollapsed: boolean;
|
isCollapsed: boolean;
|
||||||
setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
|
setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
groupedByIssues: {
|
groupedByIssues: {
|
||||||
@ -22,12 +23,11 @@ type Props = {
|
|||||||
selectedGroup: NestedKeyOf<IIssue> | null;
|
selectedGroup: NestedKeyOf<IIssue> | null;
|
||||||
groupTitle: string;
|
groupTitle: string;
|
||||||
createdBy: string | null;
|
createdBy: string | null;
|
||||||
bgColor: string;
|
bgColor?: string;
|
||||||
addIssueToState: () => void;
|
addIssueToState: () => void;
|
||||||
provided?: DraggableProvided;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const BoardHeader: React.FC<Props> = ({
|
export const BoardHeader: React.FC<Props> = ({
|
||||||
isCollapsed,
|
isCollapsed,
|
||||||
setIsCollapsed,
|
setIsCollapsed,
|
||||||
provided,
|
provided,
|
||||||
@ -44,7 +44,6 @@ const BoardHeader: React.FC<Props> = ({
|
|||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
|
<div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
|
||||||
{provided && (
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
{...provided.dragHandleProps}
|
{...provided.dragHandleProps}
|
||||||
@ -55,7 +54,6 @@ const BoardHeader: React.FC<Props> = ({
|
|||||||
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
|
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
|
||||||
<EllipsisHorizontalIcon className="mt-[-0.7rem] h-4 w-4 text-gray-600" />
|
<EllipsisHorizontalIcon className="mt-[-0.7rem] h-4 w-4 text-gray-600" />
|
||||||
</button>
|
</button>
|
||||||
)}
|
|
||||||
<div
|
<div
|
||||||
className={`flex cursor-pointer items-center gap-x-1 rounded-md bg-slate-900 px-2 ${
|
className={`flex cursor-pointer items-center gap-x-1 rounded-md bg-slate-900 px-2 ${
|
||||||
!isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
|
!isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
|
||||||
@ -105,5 +103,3 @@ const BoardHeader: React.FC<Props> = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default BoardHeader;
|
|
||||||
4
apps/app/components/core/board-view/index.ts
Normal file
4
apps/app/components/core/board-view/index.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export * from "./all-boards";
|
||||||
|
export * from "./board-header";
|
||||||
|
export * from "./single-board";
|
||||||
|
export * from "./single-issue";
|
||||||
164
apps/app/components/core/board-view/single-board.tsx
Normal file
164
apps/app/components/core/board-view/single-board.tsx
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
|
// react-beautiful-dnd
|
||||||
|
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
||||||
|
import { Draggable } from "react-beautiful-dnd";
|
||||||
|
// hooks
|
||||||
|
import useIssuesProperties from "hooks/use-issue-properties";
|
||||||
|
// components
|
||||||
|
import { BoardHeader, SingleBoardIssue } from "components/core";
|
||||||
|
// ui
|
||||||
|
import { CustomMenu } from "components/ui";
|
||||||
|
// icons
|
||||||
|
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||||
|
// types
|
||||||
|
import { IIssue, IProjectMember, NestedKeyOf, UserAuth } from "types";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
index: number;
|
||||||
|
type?: "issue" | "cycle" | "module";
|
||||||
|
bgColor?: string;
|
||||||
|
groupTitle: string;
|
||||||
|
groupedByIssues: {
|
||||||
|
[key: string]: IIssue[];
|
||||||
|
};
|
||||||
|
selectedGroup: NestedKeyOf<IIssue> | null;
|
||||||
|
members: IProjectMember[] | undefined;
|
||||||
|
addIssueToState: () => void;
|
||||||
|
handleDeleteIssue: (issue: IIssue) => void;
|
||||||
|
openIssuesListModal?: (() => void) | null;
|
||||||
|
orderBy: NestedKeyOf<IIssue> | "manual" | null;
|
||||||
|
userAuth: UserAuth;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SingleBoard: React.FC<Props> = ({
|
||||||
|
index,
|
||||||
|
type,
|
||||||
|
bgColor,
|
||||||
|
groupTitle,
|
||||||
|
groupedByIssues,
|
||||||
|
selectedGroup,
|
||||||
|
members,
|
||||||
|
addIssueToState,
|
||||||
|
handleDeleteIssue,
|
||||||
|
openIssuesListModal,
|
||||||
|
orderBy,
|
||||||
|
userAuth,
|
||||||
|
}) => {
|
||||||
|
// collapse/expand
|
||||||
|
const [isCollapsed, setIsCollapsed] = useState(true);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const { workspaceSlug, projectId } = router.query;
|
||||||
|
|
||||||
|
const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
|
||||||
|
|
||||||
|
const createdBy =
|
||||||
|
selectedGroup === "created_by"
|
||||||
|
? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..."
|
||||||
|
: null;
|
||||||
|
|
||||||
|
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={`h-full flex-shrink-0 rounded ${
|
||||||
|
snapshot && snapshot.isDragging ? "border-theme shadow-lg" : ""
|
||||||
|
} ${!isCollapsed ? "" : "w-80 border bg-gray-50"}`}
|
||||||
|
ref={provided?.innerRef}
|
||||||
|
{...provided?.draggableProps}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3 overflow-y-auto"}`}
|
||||||
|
>
|
||||||
|
<BoardHeader
|
||||||
|
provided={provided}
|
||||||
|
addIssueToState={addIssueToState}
|
||||||
|
bgColor={bgColor}
|
||||||
|
createdBy={createdBy}
|
||||||
|
groupTitle={groupTitle}
|
||||||
|
groupedByIssues={groupedByIssues}
|
||||||
|
isCollapsed={isCollapsed}
|
||||||
|
setIsCollapsed={setIsCollapsed}
|
||||||
|
selectedGroup={selectedGroup}
|
||||||
|
/>
|
||||||
|
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
|
||||||
|
{(provided, snapshot) => (
|
||||||
|
<div
|
||||||
|
className={`relative mt-3 h-full space-y-3 overflow-y-auto px-3 pb-3 ${
|
||||||
|
snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
|
||||||
|
} ${!isCollapsed ? "hidden" : "block"}`}
|
||||||
|
ref={provided.innerRef}
|
||||||
|
{...provided.droppableProps}
|
||||||
|
>
|
||||||
|
{groupedByIssues[groupTitle].map((issue, index: number) => (
|
||||||
|
<SingleBoardIssue
|
||||||
|
key={index}
|
||||||
|
index={index}
|
||||||
|
type={type}
|
||||||
|
issue={issue}
|
||||||
|
properties={properties}
|
||||||
|
members={members}
|
||||||
|
handleDeleteIssue={handleDeleteIssue}
|
||||||
|
orderBy={orderBy}
|
||||||
|
userAuth={userAuth}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
display: orderBy === "manual" ? "inline" : "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{provided.placeholder}
|
||||||
|
</span>
|
||||||
|
{type === "issue" ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex items-center rounded p-2 text-xs font-medium outline-none duration-300 hover:bg-gray-100"
|
||||||
|
onClick={addIssueToState}
|
||||||
|
>
|
||||||
|
<PlusIcon className="mr-1 h-3 w-3" />
|
||||||
|
Create
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<CustomMenu
|
||||||
|
label={
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<PlusIcon className="h-3 w-3" />
|
||||||
|
Add issue
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
className="mt-1"
|
||||||
|
optionsPosition="left"
|
||||||
|
noBorder
|
||||||
|
>
|
||||||
|
<CustomMenu.MenuItem onClick={addIssueToState}>
|
||||||
|
Create new
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
{openIssuesListModal && (
|
||||||
|
<CustomMenu.MenuItem onClick={openIssuesListModal}>
|
||||||
|
Add an existing issue
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
)}
|
||||||
|
</CustomMenu>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</StrictModeDroppable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Draggable>
|
||||||
|
);
|
||||||
|
};
|
||||||
248
apps/app/components/core/board-view/single-issue.tsx
Normal file
248
apps/app/components/core/board-view/single-issue.tsx
Normal file
@ -0,0 +1,248 @@
|
|||||||
|
import React, { useCallback } from "react";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
|
import useSWR, { mutate } from "swr";
|
||||||
|
|
||||||
|
// react-beautiful-dnd
|
||||||
|
import {
|
||||||
|
Draggable,
|
||||||
|
DraggableStateSnapshot,
|
||||||
|
DraggingStyle,
|
||||||
|
NotDraggingStyle,
|
||||||
|
} from "react-beautiful-dnd";
|
||||||
|
// constants
|
||||||
|
import { TrashIcon } from "@heroicons/react/24/outline";
|
||||||
|
// services
|
||||||
|
import issuesService from "services/issues.service";
|
||||||
|
import stateService from "services/state.service";
|
||||||
|
// components
|
||||||
|
import { AssigneeSelect, DueDateSelect, PrioritySelect, StateSelect } from "components/core/select";
|
||||||
|
// types
|
||||||
|
import {
|
||||||
|
CycleIssueResponse,
|
||||||
|
IIssue,
|
||||||
|
IProjectMember,
|
||||||
|
IssueResponse,
|
||||||
|
ModuleIssueResponse,
|
||||||
|
NestedKeyOf,
|
||||||
|
Properties,
|
||||||
|
UserAuth,
|
||||||
|
} from "types";
|
||||||
|
// fetch-keys
|
||||||
|
import { STATE_LIST, CYCLE_ISSUES, MODULE_ISSUES, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
index: number;
|
||||||
|
type?: string;
|
||||||
|
issue: IIssue;
|
||||||
|
properties: Properties;
|
||||||
|
members: IProjectMember[] | undefined;
|
||||||
|
handleDeleteIssue: (issue: IIssue) => void;
|
||||||
|
orderBy: NestedKeyOf<IIssue> | "manual" | null;
|
||||||
|
userAuth: UserAuth;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SingleBoardIssue: React.FC<Props> = ({
|
||||||
|
index,
|
||||||
|
type,
|
||||||
|
issue,
|
||||||
|
properties,
|
||||||
|
members,
|
||||||
|
handleDeleteIssue,
|
||||||
|
orderBy,
|
||||||
|
userAuth,
|
||||||
|
}) => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
|
||||||
|
|
||||||
|
const { data: states } = useSWR(
|
||||||
|
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
||||||
|
workspaceSlug && projectId
|
||||||
|
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
|
const partialUpdateIssue = useCallback(
|
||||||
|
(formData: Partial<IIssue>) => {
|
||||||
|
if (!workspaceSlug || !projectId) return;
|
||||||
|
|
||||||
|
if (cycleId)
|
||||||
|
mutate<CycleIssueResponse[]>(
|
||||||
|
CYCLE_ISSUES(cycleId as string),
|
||||||
|
(prevData) => {
|
||||||
|
const updatedIssues = (prevData ?? []).map((p) => {
|
||||||
|
if (p.issue_detail.id === issue.id) {
|
||||||
|
return {
|
||||||
|
...p,
|
||||||
|
issue_detail: {
|
||||||
|
...p.issue_detail,
|
||||||
|
...formData,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return p;
|
||||||
|
});
|
||||||
|
return [...updatedIssues];
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
if (moduleId)
|
||||||
|
mutate<ModuleIssueResponse[]>(
|
||||||
|
MODULE_ISSUES(moduleId as string),
|
||||||
|
(prevData) => {
|
||||||
|
const updatedIssues = (prevData ?? []).map((p) => {
|
||||||
|
if (p.issue_detail.id === issue.id) {
|
||||||
|
return {
|
||||||
|
...p,
|
||||||
|
issue_detail: {
|
||||||
|
...p.issue_detail,
|
||||||
|
...formData,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return p;
|
||||||
|
});
|
||||||
|
return [...updatedIssues];
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
mutate<IssueResponse>(
|
||||||
|
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
||||||
|
(prevData) => ({
|
||||||
|
...(prevData as IssueResponse),
|
||||||
|
results: (prevData?.results ?? []).map((p) => {
|
||||||
|
if (p.id === issue.id) return { ...p, ...formData };
|
||||||
|
return p;
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
issuesService
|
||||||
|
.patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
|
||||||
|
.then((res) => {
|
||||||
|
mutate(
|
||||||
|
cycleId
|
||||||
|
? CYCLE_ISSUES(cycleId as string)
|
||||||
|
: CYCLE_ISSUES(issue?.issue_cycle?.cycle ?? "")
|
||||||
|
);
|
||||||
|
mutate(
|
||||||
|
moduleId
|
||||||
|
? MODULE_ISSUES(moduleId as string)
|
||||||
|
: MODULE_ISSUES(issue?.issue_module?.module ?? "")
|
||||||
|
);
|
||||||
|
|
||||||
|
mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[workspaceSlug, projectId, cycleId, moduleId, issue]
|
||||||
|
);
|
||||||
|
|
||||||
|
function getStyle(
|
||||||
|
style: DraggingStyle | NotDraggingStyle | undefined,
|
||||||
|
snapshot: DraggableStateSnapshot
|
||||||
|
) {
|
||||||
|
if (orderBy === "manual") return style;
|
||||||
|
if (!snapshot.isDragging) return {};
|
||||||
|
if (!snapshot.isDropAnimating) {
|
||||||
|
return style;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...style,
|
||||||
|
transitionDuration: `0.001s`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Draggable key={issue.id} draggableId={issue.id} index={index}>
|
||||||
|
{(provided, snapshot) => (
|
||||||
|
<div
|
||||||
|
className={`rounded border bg-white shadow-sm ${
|
||||||
|
snapshot.isDragging ? "border-theme bg-indigo-50 shadow-lg" : ""
|
||||||
|
}`}
|
||||||
|
ref={provided.innerRef}
|
||||||
|
{...provided.draggableProps}
|
||||||
|
{...provided.dragHandleProps}
|
||||||
|
style={getStyle(provided.draggableProps.style, snapshot)}
|
||||||
|
>
|
||||||
|
<div className="group/card relative select-none p-2">
|
||||||
|
{!isNotAllowed && (
|
||||||
|
<div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="grid h-7 w-7 place-items-center rounded bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
|
||||||
|
onClick={() => handleDeleteIssue(issue)}
|
||||||
|
>
|
||||||
|
<TrashIcon className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
|
||||||
|
<a>
|
||||||
|
{properties.key && (
|
||||||
|
<div className="mb-2 text-xs font-medium text-gray-500">
|
||||||
|
{issue.project_detail.identifier}-{issue.sequence_id}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<h5
|
||||||
|
className="mb-3 text-sm group-hover:text-theme"
|
||||||
|
style={{ lineClamp: 3, WebkitLineClamp: 3 }}
|
||||||
|
>
|
||||||
|
{issue.name}
|
||||||
|
</h5>
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
<div className="flex flex-wrap items-center gap-x-1 gap-y-2 text-xs">
|
||||||
|
{properties.priority && (
|
||||||
|
<PrioritySelect
|
||||||
|
issue={issue}
|
||||||
|
partialUpdateIssue={partialUpdateIssue}
|
||||||
|
isNotAllowed={isNotAllowed}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{properties.state && (
|
||||||
|
<StateSelect
|
||||||
|
issue={issue}
|
||||||
|
states={states}
|
||||||
|
partialUpdateIssue={partialUpdateIssue}
|
||||||
|
isNotAllowed={isNotAllowed}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{properties.due_date && (
|
||||||
|
<DueDateSelect
|
||||||
|
issue={issue}
|
||||||
|
partialUpdateIssue={partialUpdateIssue}
|
||||||
|
isNotAllowed={isNotAllowed}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{properties.sub_issue_count && (
|
||||||
|
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||||
|
{issue.sub_issues_count}{" "}
|
||||||
|
{issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{properties.assignee && (
|
||||||
|
<AssigneeSelect
|
||||||
|
issue={issue}
|
||||||
|
members={members}
|
||||||
|
partialUpdateIssue={partialUpdateIssue}
|
||||||
|
isNotAllowed={isNotAllowed}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Draggable>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,27 +1,26 @@
|
|||||||
// react
|
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
// next
|
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
// swr
|
|
||||||
import useSWR, { mutate } from "swr";
|
import useSWR, { mutate } from "swr";
|
||||||
|
|
||||||
// react hook form
|
// react hook form
|
||||||
import { SubmitHandler, useForm } from "react-hook-form";
|
import { SubmitHandler, useForm } from "react-hook-form";
|
||||||
// services
|
// headless ui
|
||||||
import { Combobox, Dialog, Transition } from "@headlessui/react";
|
import { Combobox, Dialog, Transition } from "@headlessui/react";
|
||||||
import { FolderIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
|
// services
|
||||||
import issuesServices from "services/issues.service";
|
import issuesServices from "services/issues.service";
|
||||||
import projectService from "services/project.service";
|
|
||||||
// hooks
|
// hooks
|
||||||
import useToast from "hooks/use-toast";
|
import useToast from "hooks/use-toast";
|
||||||
// headless ui
|
|
||||||
// ui
|
// ui
|
||||||
import { Button } from "components/ui";
|
import { Button } from "components/ui";
|
||||||
// icons
|
// icons
|
||||||
|
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
|
||||||
import { LayerDiagonalIcon } from "components/icons";
|
import { LayerDiagonalIcon } from "components/icons";
|
||||||
// types
|
// types
|
||||||
import { IIssue, IssueResponse } from "types";
|
import { IIssue, IssueResponse } from "types";
|
||||||
// fetch keys
|
// fetch keys
|
||||||
import { PROJECT_ISSUES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
|
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
|
||||||
|
|
||||||
type FormInput = {
|
type FormInput = {
|
||||||
delete_issue_ids: string[];
|
delete_issue_ids: string[];
|
||||||
@ -32,7 +31,7 @@ type Props = {
|
|||||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@ -50,13 +49,6 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||||||
: null
|
: null
|
||||||
);
|
);
|
||||||
|
|
||||||
const { data: projectDetails } = useSWR(
|
|
||||||
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => projectService.getProject(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const { setToastAlert } = useToast();
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -213,7 +205,7 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<span className="flex-shrink-0 text-xs text-gray-500">
|
<span className="flex-shrink-0 text-xs text-gray-500">
|
||||||
{projectDetails?.identifier}-{issue.sequence_id}
|
{issue.project_detail.identifier}-{issue.sequence_id}
|
||||||
</span>
|
</span>
|
||||||
<span>{issue.name}</span>
|
<span>{issue.name}</span>
|
||||||
</div>
|
</div>
|
||||||
@ -256,5 +248,3 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||||||
</Transition.Root>
|
</Transition.Root>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BulkDeleteIssuesModal;
|
|
||||||
@ -1,24 +1,17 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import useSWR from "swr";
|
|
||||||
// react-hook-form
|
// react-hook-form
|
||||||
import { Controller, SubmitHandler, useForm } from "react-hook-form";
|
import { Controller, SubmitHandler, useForm } from "react-hook-form";
|
||||||
// hooks
|
// hooks
|
||||||
import { Combobox, Dialog, Transition } from "@headlessui/react";
|
import { Combobox, Dialog, Transition } from "@headlessui/react";
|
||||||
import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
|
import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
|
||||||
import useToast from "hooks/use-toast";
|
import useToast from "hooks/use-toast";
|
||||||
// services
|
|
||||||
import projectService from "services/project.service";
|
|
||||||
// headless ui
|
// headless ui
|
||||||
// ui
|
// ui
|
||||||
import { Button } from "components/ui";
|
import { Button } from "components/ui";
|
||||||
import { LayerDiagonalIcon } from "components/icons";
|
import { LayerDiagonalIcon } from "components/icons";
|
||||||
// types
|
// types
|
||||||
import { IIssue } from "types";
|
import { IIssue } from "types";
|
||||||
// fetch-keys
|
|
||||||
import { PROJECT_DETAILS } from "constants/fetch-keys";
|
|
||||||
|
|
||||||
type FormInput = {
|
type FormInput = {
|
||||||
issues: string[];
|
issues: string[];
|
||||||
@ -32,7 +25,7 @@ type Props = {
|
|||||||
handleOnSubmit: any;
|
handleOnSubmit: any;
|
||||||
};
|
};
|
||||||
|
|
||||||
const ExistingIssuesListModal: React.FC<Props> = ({
|
export const ExistingIssuesListModal: React.FC<Props> = ({
|
||||||
isOpen,
|
isOpen,
|
||||||
handleClose: onClose,
|
handleClose: onClose,
|
||||||
issues,
|
issues,
|
||||||
@ -41,16 +34,6 @@ const ExistingIssuesListModal: React.FC<Props> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug, projectId } = router.query;
|
|
||||||
|
|
||||||
const { data: projectDetails } = useSWR(
|
|
||||||
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => projectService.getProject(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const { setToastAlert } = useToast();
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
@ -175,7 +158,7 @@ const ExistingIssuesListModal: React.FC<Props> = ({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<span className="flex-shrink-0 text-xs text-gray-500">
|
<span className="flex-shrink-0 text-xs text-gray-500">
|
||||||
{projectDetails?.identifier}-{issue.sequence_id}
|
{issue.project_detail.identifier}-{issue.sequence_id}
|
||||||
</span>
|
</span>
|
||||||
{issue.name}
|
{issue.name}
|
||||||
</>
|
</>
|
||||||
@ -233,5 +216,3 @@ const ExistingIssuesListModal: React.FC<Props> = ({
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ExistingIssuesListModal;
|
|
||||||
@ -1 +1,8 @@
|
|||||||
|
export * from "./board-view";
|
||||||
|
export * from "./list-view";
|
||||||
|
export * from "./bulk-delete-issues-modal";
|
||||||
|
export * from "./existing-issues-list-modal";
|
||||||
|
export * from "./image-upload-modal";
|
||||||
|
export * from "./issues-view-filter";
|
||||||
|
export * from "./issues-view";
|
||||||
export * from "./not-authorized-view";
|
export * from "./not-authorized-view";
|
||||||
|
|||||||
@ -23,7 +23,7 @@ type Props = {
|
|||||||
issues?: IIssue[];
|
issues?: IIssue[];
|
||||||
};
|
};
|
||||||
|
|
||||||
const View: React.FC<Props> = ({ issues }) => {
|
export const IssuesFilterView: React.FC<Props> = ({ issues }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId } = router.query;
|
const { workspaceSlug, projectId } = router.query;
|
||||||
|
|
||||||
@ -104,14 +104,16 @@ const View: React.FC<Props> = ({ issues }) => {
|
|||||||
}
|
}
|
||||||
width="lg"
|
width="lg"
|
||||||
>
|
>
|
||||||
{groupByOptions.map((option) => (
|
{groupByOptions.map((option) =>
|
||||||
|
issueView === "kanban" && option.key === null ? null : (
|
||||||
<CustomMenu.MenuItem
|
<CustomMenu.MenuItem
|
||||||
key={option.key}
|
key={option.key}
|
||||||
onClick={() => setGroupByProperty(option.key)}
|
onClick={() => setGroupByProperty(option.key)}
|
||||||
>
|
>
|
||||||
{option.name}
|
{option.name}
|
||||||
</CustomMenu.MenuItem>
|
</CustomMenu.MenuItem>
|
||||||
))}
|
)
|
||||||
|
)}
|
||||||
</CustomMenu>
|
</CustomMenu>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
@ -203,5 +205,3 @@ const View: React.FC<Props> = ({ issues }) => {
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default View;
|
|
||||||
465
apps/app/components/core/issues-view.tsx
Normal file
465
apps/app/components/core/issues-view.tsx
Normal file
@ -0,0 +1,465 @@
|
|||||||
|
import { useCallback, useState } from "react";
|
||||||
|
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
|
import useSWR, { mutate } from "swr";
|
||||||
|
|
||||||
|
// react-beautiful-dnd
|
||||||
|
import { DropResult } from "react-beautiful-dnd";
|
||||||
|
// services
|
||||||
|
import issuesService from "services/issues.service";
|
||||||
|
import stateService from "services/state.service";
|
||||||
|
import projectService from "services/project.service";
|
||||||
|
import modulesService from "services/modules.service";
|
||||||
|
// hooks
|
||||||
|
import useIssueView from "hooks/use-issue-view";
|
||||||
|
// components
|
||||||
|
import { AllLists, AllBoards, ExistingIssuesListModal } from "components/core";
|
||||||
|
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||||
|
// types
|
||||||
|
import {
|
||||||
|
CycleIssueResponse,
|
||||||
|
IIssue,
|
||||||
|
IssueResponse,
|
||||||
|
IState,
|
||||||
|
ModuleIssueResponse,
|
||||||
|
UserAuth,
|
||||||
|
} from "types";
|
||||||
|
// fetch-keys
|
||||||
|
import {
|
||||||
|
CYCLE_ISSUES,
|
||||||
|
MODULE_ISSUES,
|
||||||
|
PROJECT_ISSUES_LIST,
|
||||||
|
PROJECT_MEMBERS,
|
||||||
|
STATE_LIST,
|
||||||
|
} from "constants/fetch-keys";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
type?: "issue" | "cycle" | "module";
|
||||||
|
issues: IIssue[];
|
||||||
|
openIssuesListModal?: () => void;
|
||||||
|
userAuth: UserAuth;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const IssuesView: React.FC<Props> = ({
|
||||||
|
type = "issue",
|
||||||
|
issues,
|
||||||
|
openIssuesListModal,
|
||||||
|
userAuth,
|
||||||
|
}) => {
|
||||||
|
// create issue modal
|
||||||
|
const [createIssueModal, setCreateIssueModal] = useState(false);
|
||||||
|
const [preloadedData, setPreloadedData] = useState<
|
||||||
|
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
||||||
|
>(undefined);
|
||||||
|
|
||||||
|
// updates issue modal
|
||||||
|
const [editIssueModal, setEditIssueModal] = useState(false);
|
||||||
|
const [issueToEdit, setIssueToEdit] = useState<
|
||||||
|
(IIssue & { actionType: "edit" | "delete" }) | undefined
|
||||||
|
>(undefined);
|
||||||
|
|
||||||
|
// delete issue modal
|
||||||
|
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||||
|
const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
|
||||||
|
|
||||||
|
const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
|
||||||
|
|
||||||
|
const { data: states, mutate: mutateState } = useSWR<IState[]>(
|
||||||
|
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
||||||
|
workspaceSlug
|
||||||
|
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
|
const { data: members } = useSWR(
|
||||||
|
projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||||
|
workspaceSlug && projectId
|
||||||
|
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleOnDragEnd = useCallback(
|
||||||
|
(result: DropResult) => {
|
||||||
|
if (!result.destination || !workspaceSlug || !projectId) return;
|
||||||
|
|
||||||
|
const { source, destination, type } = result;
|
||||||
|
|
||||||
|
if (type === "state") {
|
||||||
|
const newStates = Array.from(states ?? []);
|
||||||
|
const [reorderedState] = newStates.splice(source.index, 1);
|
||||||
|
newStates.splice(destination.index, 0, reorderedState);
|
||||||
|
const prevSequenceNumber = newStates[destination.index - 1]?.sequence;
|
||||||
|
const nextSequenceNumber = newStates[destination.index + 1]?.sequence;
|
||||||
|
|
||||||
|
const sequenceNumber =
|
||||||
|
prevSequenceNumber && nextSequenceNumber
|
||||||
|
? (prevSequenceNumber + nextSequenceNumber) / 2
|
||||||
|
: nextSequenceNumber
|
||||||
|
? nextSequenceNumber - 15000 / 2
|
||||||
|
: prevSequenceNumber
|
||||||
|
? prevSequenceNumber + 15000 / 2
|
||||||
|
: 15000;
|
||||||
|
|
||||||
|
newStates[destination.index].sequence = sequenceNumber;
|
||||||
|
|
||||||
|
mutateState(newStates, false);
|
||||||
|
|
||||||
|
stateService
|
||||||
|
.patchState(
|
||||||
|
workspaceSlug as string,
|
||||||
|
projectId as string,
|
||||||
|
newStates[destination.index].id,
|
||||||
|
{
|
||||||
|
sequence: sequenceNumber,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then((response) => {
|
||||||
|
console.log(response);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const draggedItem = groupedByIssues[source.droppableId][source.index];
|
||||||
|
if (source.droppableId !== destination.droppableId) {
|
||||||
|
const sourceGroup = source.droppableId; // source group id
|
||||||
|
const destinationGroup = destination.droppableId; // destination group id
|
||||||
|
|
||||||
|
if (!sourceGroup || !destinationGroup) return;
|
||||||
|
|
||||||
|
if (selectedGroup === "priority") {
|
||||||
|
// update the removed item for mutation
|
||||||
|
draggedItem.priority = destinationGroup;
|
||||||
|
|
||||||
|
if (cycleId)
|
||||||
|
mutate<CycleIssueResponse[]>(
|
||||||
|
CYCLE_ISSUES(cycleId as string),
|
||||||
|
(prevData) => {
|
||||||
|
if (!prevData) return prevData;
|
||||||
|
const updatedIssues = prevData.map((issue) => {
|
||||||
|
if (issue.issue_detail.id === draggedItem.id) {
|
||||||
|
return {
|
||||||
|
...issue,
|
||||||
|
issue_detail: {
|
||||||
|
...draggedItem,
|
||||||
|
priority: destinationGroup,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return issue;
|
||||||
|
});
|
||||||
|
return [...updatedIssues];
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
if (moduleId)
|
||||||
|
mutate<ModuleIssueResponse[]>(
|
||||||
|
MODULE_ISSUES(moduleId as string),
|
||||||
|
(prevData) => {
|
||||||
|
if (!prevData) return prevData;
|
||||||
|
const updatedIssues = prevData.map((issue) => {
|
||||||
|
if (issue.issue_detail.id === draggedItem.id) {
|
||||||
|
return {
|
||||||
|
...issue,
|
||||||
|
issue_detail: {
|
||||||
|
...draggedItem,
|
||||||
|
priority: destinationGroup,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return issue;
|
||||||
|
});
|
||||||
|
return [...updatedIssues];
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
mutate<IssueResponse>(
|
||||||
|
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
||||||
|
(prevData) => {
|
||||||
|
if (!prevData) return prevData;
|
||||||
|
|
||||||
|
const updatedIssues = prevData.results.map((issue) => {
|
||||||
|
if (issue.id === draggedItem.id)
|
||||||
|
return {
|
||||||
|
...draggedItem,
|
||||||
|
priority: destinationGroup,
|
||||||
|
};
|
||||||
|
|
||||||
|
return issue;
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...prevData,
|
||||||
|
results: updatedIssues,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
// patch request
|
||||||
|
issuesService
|
||||||
|
.patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
|
||||||
|
priority: destinationGroup,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
mutate(
|
||||||
|
cycleId
|
||||||
|
? CYCLE_ISSUES(cycleId as string)
|
||||||
|
: CYCLE_ISSUES(draggedItem.issue_cycle?.cycle ?? "")
|
||||||
|
);
|
||||||
|
mutate(
|
||||||
|
moduleId
|
||||||
|
? MODULE_ISSUES(moduleId as string)
|
||||||
|
: MODULE_ISSUES(draggedItem.issue_module?.module ?? "")
|
||||||
|
);
|
||||||
|
|
||||||
|
mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
|
||||||
|
});
|
||||||
|
} else if (selectedGroup === "state_detail.name") {
|
||||||
|
const destinationState = states?.find((s) => s.name === destinationGroup);
|
||||||
|
const destinationStateId = destinationState?.id;
|
||||||
|
|
||||||
|
// update the removed item for mutation
|
||||||
|
if (!destinationStateId || !destinationState) return;
|
||||||
|
draggedItem.state = destinationStateId;
|
||||||
|
draggedItem.state_detail = destinationState;
|
||||||
|
|
||||||
|
if (cycleId)
|
||||||
|
mutate<CycleIssueResponse[]>(
|
||||||
|
CYCLE_ISSUES(cycleId as string),
|
||||||
|
(prevData) => {
|
||||||
|
if (!prevData) return prevData;
|
||||||
|
const updatedIssues = prevData.map((issue) => {
|
||||||
|
if (issue.issue_detail.id === draggedItem.id) {
|
||||||
|
return {
|
||||||
|
...issue,
|
||||||
|
issue_detail: {
|
||||||
|
...draggedItem,
|
||||||
|
state_detail: destinationState,
|
||||||
|
state: destinationStateId,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return issue;
|
||||||
|
});
|
||||||
|
return [...updatedIssues];
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
if (moduleId)
|
||||||
|
mutate<ModuleIssueResponse[]>(
|
||||||
|
MODULE_ISSUES(moduleId as string),
|
||||||
|
(prevData) => {
|
||||||
|
if (!prevData) return prevData;
|
||||||
|
const updatedIssues = prevData.map((issue) => {
|
||||||
|
if (issue.issue_detail.id === draggedItem.id) {
|
||||||
|
return {
|
||||||
|
...issue,
|
||||||
|
issue_detail: {
|
||||||
|
...draggedItem,
|
||||||
|
state_detail: destinationState,
|
||||||
|
state: destinationStateId,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return issue;
|
||||||
|
});
|
||||||
|
return [...updatedIssues];
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
mutate<IssueResponse>(
|
||||||
|
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
||||||
|
(prevData) => {
|
||||||
|
if (!prevData) return prevData;
|
||||||
|
|
||||||
|
const updatedIssues = prevData.results.map((issue) => {
|
||||||
|
if (issue.id === draggedItem.id)
|
||||||
|
return {
|
||||||
|
...draggedItem,
|
||||||
|
state_detail: destinationState,
|
||||||
|
state: destinationStateId,
|
||||||
|
};
|
||||||
|
|
||||||
|
return issue;
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...prevData,
|
||||||
|
results: updatedIssues,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
// patch request
|
||||||
|
issuesService
|
||||||
|
.patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
|
||||||
|
state: destinationStateId,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
mutate(
|
||||||
|
cycleId
|
||||||
|
? CYCLE_ISSUES(cycleId as string)
|
||||||
|
: CYCLE_ISSUES(draggedItem.issue_cycle?.cycle ?? "")
|
||||||
|
);
|
||||||
|
mutate(
|
||||||
|
moduleId
|
||||||
|
? MODULE_ISSUES(moduleId as string)
|
||||||
|
: MODULE_ISSUES(draggedItem.issue_module?.module ?? "")
|
||||||
|
);
|
||||||
|
mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
workspaceSlug,
|
||||||
|
cycleId,
|
||||||
|
moduleId,
|
||||||
|
mutateState,
|
||||||
|
groupedByIssues,
|
||||||
|
projectId,
|
||||||
|
selectedGroup,
|
||||||
|
states,
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
const addIssueToState = (groupTitle: string, stateId: string | null) => {
|
||||||
|
setCreateIssueModal(true);
|
||||||
|
if (selectedGroup)
|
||||||
|
setPreloadedData({
|
||||||
|
state: stateId ?? undefined,
|
||||||
|
[selectedGroup]: groupTitle,
|
||||||
|
actionType: "createIssue",
|
||||||
|
});
|
||||||
|
else setPreloadedData({ actionType: "createIssue" });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditIssue = (issue: IIssue) => {
|
||||||
|
setEditIssueModal(true);
|
||||||
|
setIssueToEdit({
|
||||||
|
...issue,
|
||||||
|
actionType: "edit",
|
||||||
|
cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
|
||||||
|
module: issue.issue_module ? issue.issue_module.module : null,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteIssue = (issue: IIssue) => {
|
||||||
|
setDeleteIssueModal(true);
|
||||||
|
setIssueToDelete(issue);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeIssueFromCycle = (bridgeId: string) => {
|
||||||
|
if (!workspaceSlug || !projectId) return;
|
||||||
|
|
||||||
|
mutate<CycleIssueResponse[]>(
|
||||||
|
CYCLE_ISSUES(cycleId as string),
|
||||||
|
(prevData) => prevData?.filter((p) => p.id !== bridgeId),
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
issuesService
|
||||||
|
.removeIssueFromCycle(
|
||||||
|
workspaceSlug as string,
|
||||||
|
projectId as string,
|
||||||
|
cycleId as string,
|
||||||
|
bridgeId
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeIssueFromModule = (bridgeId: string) => {
|
||||||
|
if (!workspaceSlug || !projectId) return;
|
||||||
|
|
||||||
|
mutate<ModuleIssueResponse[]>(
|
||||||
|
MODULE_ISSUES(moduleId as string),
|
||||||
|
(prevData) => prevData?.filter((p) => p.id !== bridgeId),
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
modulesService
|
||||||
|
.removeIssueFromModule(
|
||||||
|
workspaceSlug as string,
|
||||||
|
projectId as string,
|
||||||
|
moduleId as string,
|
||||||
|
bridgeId
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<CreateUpdateIssueModal
|
||||||
|
isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
|
||||||
|
handleClose={() => setCreateIssueModal(false)}
|
||||||
|
prePopulateData={{
|
||||||
|
...preloadedData,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<CreateUpdateIssueModal
|
||||||
|
isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
|
||||||
|
prePopulateData={{ ...issueToEdit }}
|
||||||
|
handleClose={() => setEditIssueModal(false)}
|
||||||
|
data={issueToEdit}
|
||||||
|
/>
|
||||||
|
<DeleteIssueModal
|
||||||
|
handleClose={() => setDeleteIssueModal(false)}
|
||||||
|
isOpen={deleteIssueModal}
|
||||||
|
data={issueToDelete}
|
||||||
|
/>
|
||||||
|
{issueView === "list" ? (
|
||||||
|
<AllLists
|
||||||
|
type={type}
|
||||||
|
issues={issues}
|
||||||
|
states={states}
|
||||||
|
members={members}
|
||||||
|
addIssueToState={addIssueToState}
|
||||||
|
handleEditIssue={handleEditIssue}
|
||||||
|
handleDeleteIssue={handleDeleteIssue}
|
||||||
|
openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
|
||||||
|
removeIssue={
|
||||||
|
type === "cycle"
|
||||||
|
? removeIssueFromCycle
|
||||||
|
: type === "module"
|
||||||
|
? removeIssueFromModule
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
userAuth={userAuth}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<AllBoards
|
||||||
|
type={type}
|
||||||
|
issues={issues}
|
||||||
|
states={states}
|
||||||
|
members={members}
|
||||||
|
addIssueToState={addIssueToState}
|
||||||
|
openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
|
||||||
|
handleDeleteIssue={handleDeleteIssue}
|
||||||
|
handleOnDragEnd={handleOnDragEnd}
|
||||||
|
userAuth={userAuth}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
63
apps/app/components/core/list-view/all-lists.tsx
Normal file
63
apps/app/components/core/list-view/all-lists.tsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
// hooks
|
||||||
|
import useIssueView from "hooks/use-issue-view";
|
||||||
|
// components
|
||||||
|
import { SingleList } from "components/core/list-view/single-list";
|
||||||
|
// types
|
||||||
|
import { IIssue, IProjectMember, IState, UserAuth } from "types";
|
||||||
|
|
||||||
|
// types
|
||||||
|
type Props = {
|
||||||
|
type: "issue" | "cycle" | "module";
|
||||||
|
issues: IIssue[];
|
||||||
|
states: IState[] | undefined;
|
||||||
|
members: IProjectMember[] | undefined;
|
||||||
|
addIssueToState: (groupTitle: string, stateId: string | null) => void;
|
||||||
|
handleEditIssue: (issue: IIssue) => void;
|
||||||
|
handleDeleteIssue: (issue: IIssue) => void;
|
||||||
|
openIssuesListModal?: (() => void) | null;
|
||||||
|
removeIssue: ((bridgeId: string) => void) | null;
|
||||||
|
userAuth: UserAuth;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AllLists: React.FC<Props> = ({
|
||||||
|
type,
|
||||||
|
issues,
|
||||||
|
states,
|
||||||
|
members,
|
||||||
|
addIssueToState,
|
||||||
|
openIssuesListModal,
|
||||||
|
handleEditIssue,
|
||||||
|
handleDeleteIssue,
|
||||||
|
removeIssue,
|
||||||
|
userAuth,
|
||||||
|
}) => {
|
||||||
|
const { groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col space-y-5">
|
||||||
|
{Object.keys(groupedByIssues).map((singleGroup) => {
|
||||||
|
const stateId =
|
||||||
|
selectedGroup === "state_detail.name"
|
||||||
|
? states?.find((s) => s.name === singleGroup)?.id ?? null
|
||||||
|
: null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SingleList
|
||||||
|
key={singleGroup}
|
||||||
|
type={type}
|
||||||
|
groupTitle={singleGroup}
|
||||||
|
groupedByIssues={groupedByIssues}
|
||||||
|
selectedGroup={selectedGroup}
|
||||||
|
members={members}
|
||||||
|
addIssueToState={() => addIssueToState(singleGroup, stateId)}
|
||||||
|
handleEditIssue={handleEditIssue}
|
||||||
|
handleDeleteIssue={handleDeleteIssue}
|
||||||
|
openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
|
||||||
|
removeIssue={removeIssue}
|
||||||
|
userAuth={userAuth}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
3
apps/app/components/core/list-view/index.ts
Normal file
3
apps/app/components/core/list-view/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export * from "./all-lists";
|
||||||
|
export * from "./single-issue";
|
||||||
|
export * from "./single-list";
|
||||||
214
apps/app/components/core/list-view/single-issue.tsx
Normal file
214
apps/app/components/core/list-view/single-issue.tsx
Normal file
@ -0,0 +1,214 @@
|
|||||||
|
import React, { useCallback } from "react";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
|
import useSWR, { mutate } from "swr";
|
||||||
|
|
||||||
|
// services
|
||||||
|
import issuesService from "services/issues.service";
|
||||||
|
import stateService from "services/state.service";
|
||||||
|
// components
|
||||||
|
import { AssigneeSelect, DueDateSelect, PrioritySelect, StateSelect } from "components/core/select";
|
||||||
|
// ui
|
||||||
|
import { CustomMenu } from "components/ui";
|
||||||
|
// types
|
||||||
|
import {
|
||||||
|
CycleIssueResponse,
|
||||||
|
IIssue,
|
||||||
|
IProjectMember,
|
||||||
|
IssueResponse,
|
||||||
|
ModuleIssueResponse,
|
||||||
|
Properties,
|
||||||
|
UserAuth,
|
||||||
|
} from "types";
|
||||||
|
// fetch-keys
|
||||||
|
import { CYCLE_ISSUES, MODULE_ISSUES, PROJECT_ISSUES_LIST, STATE_LIST } from "constants/fetch-keys";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
type?: string;
|
||||||
|
issue: IIssue;
|
||||||
|
properties: Properties;
|
||||||
|
members: IProjectMember[] | undefined;
|
||||||
|
editIssue: () => void;
|
||||||
|
removeIssue?: (() => void) | null;
|
||||||
|
handleDeleteIssue: (issue: IIssue) => void;
|
||||||
|
userAuth: UserAuth;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SingleListIssue: React.FC<Props> = ({
|
||||||
|
type,
|
||||||
|
issue,
|
||||||
|
properties,
|
||||||
|
members,
|
||||||
|
editIssue,
|
||||||
|
removeIssue,
|
||||||
|
handleDeleteIssue,
|
||||||
|
userAuth,
|
||||||
|
}) => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
|
||||||
|
|
||||||
|
const { data: states } = useSWR(
|
||||||
|
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
||||||
|
workspaceSlug && projectId
|
||||||
|
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
|
const partialUpdateIssue = useCallback(
|
||||||
|
(formData: Partial<IIssue>) => {
|
||||||
|
if (!workspaceSlug || !projectId) return;
|
||||||
|
|
||||||
|
if (cycleId)
|
||||||
|
mutate<CycleIssueResponse[]>(
|
||||||
|
CYCLE_ISSUES(cycleId as string),
|
||||||
|
(prevData) => {
|
||||||
|
const updatedIssues = (prevData ?? []).map((p) => {
|
||||||
|
if (p.issue_detail.id === issue.id) {
|
||||||
|
return {
|
||||||
|
...p,
|
||||||
|
issue_detail: {
|
||||||
|
...p.issue_detail,
|
||||||
|
...formData,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return p;
|
||||||
|
});
|
||||||
|
return [...updatedIssues];
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
if (moduleId)
|
||||||
|
mutate<ModuleIssueResponse[]>(
|
||||||
|
MODULE_ISSUES(moduleId as string),
|
||||||
|
(prevData) => {
|
||||||
|
const updatedIssues = (prevData ?? []).map((p) => {
|
||||||
|
if (p.issue_detail.id === issue.id) {
|
||||||
|
return {
|
||||||
|
...p,
|
||||||
|
issue_detail: {
|
||||||
|
...p.issue_detail,
|
||||||
|
...formData,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return p;
|
||||||
|
});
|
||||||
|
return [...updatedIssues];
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
mutate<IssueResponse>(
|
||||||
|
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
||||||
|
(prevData) => ({
|
||||||
|
...(prevData as IssueResponse),
|
||||||
|
results: (prevData?.results ?? []).map((p) => {
|
||||||
|
if (p.id === issue.id) return { ...p, ...formData };
|
||||||
|
return p;
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
issuesService
|
||||||
|
.patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
|
||||||
|
.then((res) => {
|
||||||
|
mutate(
|
||||||
|
cycleId
|
||||||
|
? CYCLE_ISSUES(cycleId as string)
|
||||||
|
: CYCLE_ISSUES(issue?.issue_cycle?.cycle ?? "")
|
||||||
|
);
|
||||||
|
mutate(
|
||||||
|
moduleId
|
||||||
|
? MODULE_ISSUES(moduleId as string)
|
||||||
|
: MODULE_ISSUES(issue?.issue_module?.module ?? "")
|
||||||
|
);
|
||||||
|
|
||||||
|
mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[workspaceSlug, projectId, cycleId, moduleId, issue]
|
||||||
|
);
|
||||||
|
|
||||||
|
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between gap-2 px-4 py-3 text-sm">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span
|
||||||
|
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||||
|
style={{
|
||||||
|
backgroundColor: issue.state_detail.color,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.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">
|
||||||
|
{issue.project_detail?.identifier}-{issue.sequence_id}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span>{issue.name}</span>
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
|
||||||
|
{properties.priority && (
|
||||||
|
<PrioritySelect
|
||||||
|
issue={issue}
|
||||||
|
partialUpdateIssue={partialUpdateIssue}
|
||||||
|
isNotAllowed={isNotAllowed}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{properties.state && (
|
||||||
|
<StateSelect
|
||||||
|
issue={issue}
|
||||||
|
states={states}
|
||||||
|
partialUpdateIssue={partialUpdateIssue}
|
||||||
|
isNotAllowed={isNotAllowed}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{properties.due_date && (
|
||||||
|
<DueDateSelect
|
||||||
|
issue={issue}
|
||||||
|
partialUpdateIssue={partialUpdateIssue}
|
||||||
|
isNotAllowed={isNotAllowed}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{properties.sub_issue_count && (
|
||||||
|
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm">
|
||||||
|
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{properties.assignee && (
|
||||||
|
<AssigneeSelect
|
||||||
|
issue={issue}
|
||||||
|
members={members}
|
||||||
|
partialUpdateIssue={partialUpdateIssue}
|
||||||
|
isNotAllowed={isNotAllowed}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{type && !isNotAllowed && (
|
||||||
|
<CustomMenu width="auto" ellipsis>
|
||||||
|
<CustomMenu.MenuItem onClick={editIssue}>Edit</CustomMenu.MenuItem>
|
||||||
|
{type !== "issue" && removeIssue && (
|
||||||
|
<CustomMenu.MenuItem onClick={removeIssue}>
|
||||||
|
<>Remove from {type}</>
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
)}
|
||||||
|
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
|
||||||
|
Delete permanently
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
</CustomMenu>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
156
apps/app/components/core/list-view/single-list.tsx
Normal file
156
apps/app/components/core/list-view/single-list.tsx
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
|
// headless ui
|
||||||
|
import { Disclosure, Transition } from "@headlessui/react";
|
||||||
|
// hooks
|
||||||
|
import useIssuesProperties from "hooks/use-issue-properties";
|
||||||
|
// components
|
||||||
|
import { SingleListIssue } from "components/core";
|
||||||
|
// icons
|
||||||
|
import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||||
|
// helpers
|
||||||
|
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
||||||
|
// types
|
||||||
|
import { IIssue, IProjectMember, NestedKeyOf, UserAuth } from "types";
|
||||||
|
import { CustomMenu } from "components/ui";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
type?: "issue" | "cycle" | "module";
|
||||||
|
groupTitle: string;
|
||||||
|
groupedByIssues: {
|
||||||
|
[key: string]: IIssue[];
|
||||||
|
};
|
||||||
|
selectedGroup: NestedKeyOf<IIssue> | null;
|
||||||
|
members: IProjectMember[] | undefined;
|
||||||
|
addIssueToState: () => void;
|
||||||
|
handleEditIssue: (issue: IIssue) => void;
|
||||||
|
handleDeleteIssue: (issue: IIssue) => void;
|
||||||
|
openIssuesListModal?: (() => void) | null;
|
||||||
|
removeIssue: ((bridgeId: string) => void) | null;
|
||||||
|
userAuth: UserAuth;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SingleList: React.FC<Props> = ({
|
||||||
|
type,
|
||||||
|
groupTitle,
|
||||||
|
groupedByIssues,
|
||||||
|
selectedGroup,
|
||||||
|
members,
|
||||||
|
addIssueToState,
|
||||||
|
handleEditIssue,
|
||||||
|
handleDeleteIssue,
|
||||||
|
openIssuesListModal,
|
||||||
|
removeIssue,
|
||||||
|
userAuth,
|
||||||
|
}) => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { workspaceSlug, projectId } = router.query;
|
||||||
|
|
||||||
|
const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
|
||||||
|
|
||||||
|
const createdBy =
|
||||||
|
selectedGroup === "created_by"
|
||||||
|
? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..."
|
||||||
|
: null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Disclosure key={groupTitle} as="div" defaultOpen>
|
||||||
|
{({ open }) => (
|
||||||
|
<div className="rounded-lg bg-white">
|
||||||
|
<div className="rounded-t-lg bg-gray-100 px-4 py-3">
|
||||||
|
<Disclosure.Button>
|
||||||
|
<div className="flex items-center gap-x-2">
|
||||||
|
<span>
|
||||||
|
<ChevronDownIcon
|
||||||
|
className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
{selectedGroup !== null ? (
|
||||||
|
<h2 className="font-medium capitalize leading-5">
|
||||||
|
{groupTitle === null || groupTitle === "null"
|
||||||
|
? "None"
|
||||||
|
: createdBy
|
||||||
|
? createdBy
|
||||||
|
: addSpaceIfCamelCase(groupTitle)}
|
||||||
|
</h2>
|
||||||
|
) : (
|
||||||
|
<h2 className="font-medium leading-5">All Issues</h2>
|
||||||
|
)}
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
{groupedByIssues[groupTitle 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[groupTitle] ? (
|
||||||
|
groupedByIssues[groupTitle].length > 0 ? (
|
||||||
|
groupedByIssues[groupTitle].map((issue: IIssue) => (
|
||||||
|
<SingleListIssue
|
||||||
|
key={issue.id}
|
||||||
|
type={type}
|
||||||
|
issue={issue}
|
||||||
|
properties={properties}
|
||||||
|
members={members}
|
||||||
|
editIssue={() => handleEditIssue(issue)}
|
||||||
|
handleDeleteIssue={handleDeleteIssue}
|
||||||
|
removeIssue={() => {
|
||||||
|
removeIssue && removeIssue(issue.bridge);
|
||||||
|
}}
|
||||||
|
userAuth={userAuth}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<div className="flex h-full w-full items-center justify-center">Loading...</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Disclosure.Panel>
|
||||||
|
</Transition>
|
||||||
|
<div className="p-3">
|
||||||
|
{type === "issue" ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
|
||||||
|
onClick={addIssueToState}
|
||||||
|
>
|
||||||
|
<PlusIcon className="h-3 w-3" />
|
||||||
|
Add issue
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<CustomMenu
|
||||||
|
label={
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<PlusIcon className="h-3 w-3" />
|
||||||
|
Add issue
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
optionsPosition="left"
|
||||||
|
noBorder
|
||||||
|
>
|
||||||
|
<CustomMenu.MenuItem onClick={addIssueToState}>Create new</CustomMenu.MenuItem>
|
||||||
|
{openIssuesListModal && (
|
||||||
|
<CustomMenu.MenuItem onClick={openIssuesListModal}>
|
||||||
|
Add an existing issue
|
||||||
|
</CustomMenu.MenuItem>
|
||||||
|
)}
|
||||||
|
</CustomMenu>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Disclosure>
|
||||||
|
);
|
||||||
|
};
|
||||||
94
apps/app/components/core/select/assignee.tsx
Normal file
94
apps/app/components/core/select/assignee.tsx
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
// headless ui
|
||||||
|
import { Listbox, Transition } from "@headlessui/react";
|
||||||
|
// ui
|
||||||
|
import { AssigneesList, Avatar } from "components/ui";
|
||||||
|
// types
|
||||||
|
import { IIssue, IProjectMember } from "types";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
issue: IIssue;
|
||||||
|
members: IProjectMember[] | undefined;
|
||||||
|
partialUpdateIssue: (formData: Partial<IIssue>) => void;
|
||||||
|
isNotAllowed: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AssigneeSelect: React.FC<Props> = ({
|
||||||
|
issue,
|
||||||
|
members,
|
||||||
|
partialUpdateIssue,
|
||||||
|
isNotAllowed,
|
||||||
|
}) => (
|
||||||
|
<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 });
|
||||||
|
}}
|
||||||
|
className="group relative flex-shrink-0"
|
||||||
|
disabled={isNotAllowed}
|
||||||
|
>
|
||||||
|
{({ open }) => (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<Listbox.Button>
|
||||||
|
<div
|
||||||
|
className={`flex ${
|
||||||
|
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
|
||||||
|
} items-center gap-1 text-xs`}
|
||||||
|
>
|
||||||
|
<AssigneesList userIds={issue.assignees ?? []} />
|
||||||
|
</div>
|
||||||
|
</Listbox.Button>
|
||||||
|
|
||||||
|
<Transition
|
||||||
|
show={open}
|
||||||
|
as={React.Fragment}
|
||||||
|
leave="transition ease-in duration-100"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
>
|
||||||
|
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||||
|
{members?.map((member) => (
|
||||||
|
<Listbox.Option
|
||||||
|
key={member.member.id}
|
||||||
|
className={({ active, selected }) =>
|
||||||
|
`flex items-center gap-x-1 cursor-pointer select-none p-2 ${
|
||||||
|
active ? "bg-indigo-50" : ""
|
||||||
|
} ${
|
||||||
|
selected || issue.assignees?.includes(member.member.id)
|
||||||
|
? "bg-indigo-50 font-medium"
|
||||||
|
: "font-normal"
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
value={member.member.id}
|
||||||
|
>
|
||||||
|
<Avatar user={member.member} />
|
||||||
|
<p>
|
||||||
|
{member.member.first_name && member.member.first_name !== ""
|
||||||
|
? member.member.first_name
|
||||||
|
: member.member.email}
|
||||||
|
</p>
|
||||||
|
</Listbox.Option>
|
||||||
|
))}
|
||||||
|
</Listbox.Options>
|
||||||
|
</Transition>
|
||||||
|
</div>
|
||||||
|
<div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
|
||||||
|
<h5 className="mb-1 font-medium">Assigned to</h5>
|
||||||
|
<div>
|
||||||
|
{issue.assignee_details?.length > 0
|
||||||
|
? issue.assignee_details.map((assignee) => assignee.first_name).join(", ")
|
||||||
|
: "No one"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Listbox>
|
||||||
|
);
|
||||||
48
apps/app/components/core/select/due-date.tsx
Normal file
48
apps/app/components/core/select/due-date.tsx
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
// ui
|
||||||
|
import { CustomDatePicker } from "components/ui";
|
||||||
|
// helpers
|
||||||
|
import { findHowManyDaysLeft, renderShortNumericDateFormat } from "helpers/date-time.helper";
|
||||||
|
// types
|
||||||
|
import { IIssue } from "types";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
issue: IIssue;
|
||||||
|
partialUpdateIssue: (formData: Partial<IIssue>) => void;
|
||||||
|
isNotAllowed: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue, isNotAllowed }) => (
|
||||||
|
<div
|
||||||
|
className={`group relative ${
|
||||||
|
issue.target_date === null
|
||||||
|
? ""
|
||||||
|
: issue.target_date < new Date().toISOString()
|
||||||
|
? "text-red-600"
|
||||||
|
: findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<CustomDatePicker
|
||||||
|
placeholder="N/A"
|
||||||
|
value={issue?.target_date}
|
||||||
|
onChange={(val) =>
|
||||||
|
partialUpdateIssue({
|
||||||
|
target_date: val,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
|
||||||
|
<h5 className="mb-1 font-medium text-gray-900">Due date</h5>
|
||||||
|
<div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
|
||||||
|
<div>
|
||||||
|
{issue.target_date
|
||||||
|
? issue.target_date < new Date().toISOString()
|
||||||
|
? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
|
||||||
|
: findHowManyDaysLeft(issue.target_date) <= 3
|
||||||
|
? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
|
||||||
|
: "Due date"
|
||||||
|
: "N/A"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
4
apps/app/components/core/select/index.ts
Normal file
4
apps/app/components/core/select/index.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export * from "./assignee";
|
||||||
|
export * from "./due-date";
|
||||||
|
export * from "./priority";
|
||||||
|
export * from "./state";
|
||||||
97
apps/app/components/core/select/priority.tsx
Normal file
97
apps/app/components/core/select/priority.tsx
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
// ui
|
||||||
|
import { Listbox, Transition } from "@headlessui/react";
|
||||||
|
// types
|
||||||
|
import { IIssue, IState } from "types";
|
||||||
|
// constants
|
||||||
|
import { getPriorityIcon } from "constants/global";
|
||||||
|
import { PRIORITIES } from "constants/";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
issue: IIssue;
|
||||||
|
partialUpdateIssue: (formData: Partial<IIssue>) => void;
|
||||||
|
isNotAllowed: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const PrioritySelect: React.FC<Props> = ({ issue, partialUpdateIssue, isNotAllowed }) => (
|
||||||
|
<Listbox
|
||||||
|
as="div"
|
||||||
|
value={issue.priority}
|
||||||
|
onChange={(data: string) => {
|
||||||
|
partialUpdateIssue({ priority: data });
|
||||||
|
}}
|
||||||
|
className="group relative flex-shrink-0"
|
||||||
|
disabled={isNotAllowed}
|
||||||
|
>
|
||||||
|
{({ open }) => (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<Listbox.Button
|
||||||
|
className={`flex ${
|
||||||
|
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
|
||||||
|
} items-center gap-x-2 rounded px-2 py-0.5 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
||||||
|
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"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{getPriorityIcon(
|
||||||
|
issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
|
||||||
|
"text-sm"
|
||||||
|
)}
|
||||||
|
</Listbox.Button>
|
||||||
|
|
||||||
|
<Transition
|
||||||
|
show={open}
|
||||||
|
as={React.Fragment}
|
||||||
|
leave="transition ease-in duration-100"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
>
|
||||||
|
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 w-36 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||||
|
{PRIORITIES?.map((priority) => (
|
||||||
|
<Listbox.Option
|
||||||
|
key={priority}
|
||||||
|
className={({ active }) =>
|
||||||
|
`flex cursor-pointer select-none items-center gap-x-2 px-3 py-2 capitalize ${
|
||||||
|
active ? "bg-indigo-50" : "bg-white"
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
value={priority}
|
||||||
|
>
|
||||||
|
{getPriorityIcon(priority, "text-sm")}
|
||||||
|
{priority ?? "None"}
|
||||||
|
</Listbox.Option>
|
||||||
|
))}
|
||||||
|
</Listbox.Options>
|
||||||
|
</Transition>
|
||||||
|
</div>
|
||||||
|
<div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
|
||||||
|
<h5 className="mb-1 font-medium 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>
|
||||||
|
);
|
||||||
55
apps/app/components/core/select/state.tsx
Normal file
55
apps/app/components/core/select/state.tsx
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
// ui
|
||||||
|
import { CustomSelect } from "components/ui";
|
||||||
|
// helpers
|
||||||
|
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
||||||
|
// types
|
||||||
|
import { IIssue, IState } from "types";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
issue: IIssue;
|
||||||
|
states: IState[] | undefined;
|
||||||
|
partialUpdateIssue: (formData: Partial<IIssue>) => void;
|
||||||
|
isNotAllowed: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const StateSelect: React.FC<Props> = ({
|
||||||
|
issue,
|
||||||
|
states,
|
||||||
|
partialUpdateIssue,
|
||||||
|
isNotAllowed,
|
||||||
|
}) => (
|
||||||
|
<CustomSelect
|
||||||
|
label={
|
||||||
|
<>
|
||||||
|
<span
|
||||||
|
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||||
|
style={{
|
||||||
|
backgroundColor: states?.find((s) => s.id === issue.state)?.color,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{addSpaceIfCamelCase(states?.find((s) => s.id === issue.state)?.name ?? "")}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
value={issue.state}
|
||||||
|
onChange={(data: string) => {
|
||||||
|
partialUpdateIssue({ state: data });
|
||||||
|
}}
|
||||||
|
maxHeight="md"
|
||||||
|
noChevron
|
||||||
|
disabled={isNotAllowed}
|
||||||
|
>
|
||||||
|
{states?.map((state) => (
|
||||||
|
<CustomSelect.Option key={state.id} value={state.id}>
|
||||||
|
<>
|
||||||
|
<span
|
||||||
|
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||||
|
style={{
|
||||||
|
backgroundColor: state.color,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{addSpaceIfCamelCase(state.name)}
|
||||||
|
</>
|
||||||
|
</CustomSelect.Option>
|
||||||
|
))}
|
||||||
|
</CustomSelect>
|
||||||
|
);
|
||||||
@ -61,9 +61,8 @@ export const CycleModal: React.FC<CycleModalProps> = (props) => {
|
|||||||
if (workspaceSlug && projectId) {
|
if (workspaceSlug && projectId) {
|
||||||
const payload = {
|
const payload = {
|
||||||
...formValues,
|
...formValues,
|
||||||
start_date: formValues.start_date ? renderDateFormat(formValues.start_date) : null,
|
|
||||||
end_date: formValues.end_date ? renderDateFormat(formValues.end_date) : null,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (initialData) {
|
if (initialData) {
|
||||||
updateCycle(initialData.id, payload);
|
updateCycle(initialData.id, payload);
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
// react beautiful dnd
|
// react beautiful dnd
|
||||||
import { Droppable, DroppableProps } from "react-beautiful-dnd";
|
import { Droppable, DroppableProps } from "react-beautiful-dnd";
|
||||||
|
|
||||||
@ -14,9 +15,7 @@ const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
|
|||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
if (!enabled) {
|
if (!enabled) return null;
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <Droppable {...props}>{children}</Droppable>;
|
return <Droppable {...props}>{children}</Droppable>;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -14,7 +14,7 @@ import {
|
|||||||
// services
|
// services
|
||||||
import issuesServices from "services/issues.service";
|
import issuesServices from "services/issues.service";
|
||||||
// components
|
// components
|
||||||
import CommentCard from "components/project/issues/issue-detail/comment/issue-comment-card";
|
import { CommentCard } from "components/issues/comment";
|
||||||
// ui
|
// ui
|
||||||
import { Loader } from "components/ui";
|
import { Loader } from "components/ui";
|
||||||
// icons
|
// icons
|
||||||
@ -76,7 +76,7 @@ const activityDetails: {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const IssueActivitySection: React.FC<{
|
export const IssueActivitySection: React.FC<{
|
||||||
issueActivities: IIssueActivity[];
|
issueActivities: IIssueActivity[];
|
||||||
mutate: KeyedMutator<IIssueActivity[]>;
|
mutate: KeyedMutator<IIssueActivity[]>;
|
||||||
}> = ({ issueActivities, mutate }) => {
|
}> = ({ issueActivities, mutate }) => {
|
||||||
@ -216,7 +216,7 @@ const IssueActivitySection: React.FC<{
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else if ("comment_json" in activity) {
|
} else if ("comment_json" in activity)
|
||||||
return (
|
return (
|
||||||
<CommentCard
|
<CommentCard
|
||||||
key={activity.id}
|
key={activity.id}
|
||||||
@ -225,7 +225,6 @@ const IssueActivitySection: React.FC<{
|
|||||||
handleCommentDeletion={onCommentDelete}
|
handleCommentDeletion={onCommentDelete}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
@ -247,5 +246,3 @@ const IssueActivitySection: React.FC<{
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default IssueActivitySection;
|
|
||||||
@ -28,7 +28,8 @@ const defaultValues: Partial<IIssueComment> = {
|
|||||||
comment_html: "",
|
comment_html: "",
|
||||||
comment_json: "",
|
comment_json: "",
|
||||||
};
|
};
|
||||||
const AddIssueComment: React.FC<{
|
|
||||||
|
export const AddComment: React.FC<{
|
||||||
mutate: KeyedMutator<IIssueActivity[]>;
|
mutate: KeyedMutator<IIssueActivity[]>;
|
||||||
}> = ({ mutate }) => {
|
}> = ({ mutate }) => {
|
||||||
const {
|
const {
|
||||||
@ -111,5 +112,3 @@ const AddIssueComment: React.FC<{
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AddIssueComment;
|
|
||||||
@ -24,7 +24,7 @@ type Props = {
|
|||||||
handleCommentDeletion: (comment: string) => void;
|
handleCommentDeletion: (comment: string) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion }) => {
|
export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion }) => {
|
||||||
const { user } = useUser();
|
const { user } = useUser();
|
||||||
|
|
||||||
const [isEditing, setIsEditing] = useState(false);
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
@ -130,5 +130,3 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default CommentCard;
|
|
||||||
2
apps/app/components/issues/comment/index.ts
Normal file
2
apps/app/components/issues/comment/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from "./add-comment";
|
||||||
|
export * from "./comment-card";
|
||||||
@ -17,20 +17,20 @@ import { Button } from "components/ui";
|
|||||||
// types
|
// types
|
||||||
import type { CycleIssueResponse, IIssue, IssueResponse, ModuleIssueResponse } from "types";
|
import type { CycleIssueResponse, IIssue, IssueResponse, ModuleIssueResponse } from "types";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, MODULE_ISSUES } from "constants/fetch-keys";
|
import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, MODULE_ISSUES, USER_ISSUE } from "constants/fetch-keys";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
handleClose: () => void;
|
handleClose: () => void;
|
||||||
data?: IIssue;
|
data: IIssue | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) => {
|
export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
|
||||||
const cancelButtonRef = useRef(null);
|
const cancelButtonRef = useRef(null);
|
||||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug } = router.query;
|
const { workspaceSlug, projectId: queryProjectId } = router.query;
|
||||||
|
|
||||||
const { setToastAlert } = useToast();
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
@ -43,15 +43,40 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
|
|||||||
handleClose();
|
handleClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
const handleDeletion = async () => {
|
const handleDeletion = async () => {
|
||||||
setIsDeleteLoading(true);
|
setIsDeleteLoading(true);
|
||||||
if (!data || !workspaceSlug) return;
|
if (!data || !workspaceSlug) return;
|
||||||
|
|
||||||
const projectId = data.project;
|
const projectId = data.project;
|
||||||
await issueServices
|
await issueServices
|
||||||
.deleteIssue(workspaceSlug as string, projectId, data.id)
|
.deleteIssue(workspaceSlug as string, projectId, data.id)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
const cycleId = data?.cycle;
|
||||||
|
const moduleId = data?.module;
|
||||||
|
|
||||||
|
if (cycleId) {
|
||||||
|
mutate<CycleIssueResponse[]>(
|
||||||
|
CYCLE_ISSUES(cycleId),
|
||||||
|
(prevData) => prevData?.filter((i) => i.issue !== data.id),
|
||||||
|
false
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (moduleId) {
|
||||||
|
mutate<ModuleIssueResponse[]>(
|
||||||
|
MODULE_ISSUES(moduleId),
|
||||||
|
(prevData) => prevData?.filter((i) => i.issue !== data.id),
|
||||||
|
false
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!queryProjectId)
|
||||||
|
mutate<IIssue[]>(
|
||||||
|
USER_ISSUE(workspaceSlug as string),
|
||||||
|
(prevData) => prevData?.filter((i) => i.id !== data.id),
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
mutate<IssueResponse>(
|
mutate<IssueResponse>(
|
||||||
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId),
|
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId),
|
||||||
(prevData) => ({
|
(prevData) => ({
|
||||||
@ -62,24 +87,6 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
|
|||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
const moduleId = data?.module;
|
|
||||||
const cycleId = data?.cycle;
|
|
||||||
|
|
||||||
if (moduleId) {
|
|
||||||
mutate<ModuleIssueResponse[]>(
|
|
||||||
MODULE_ISSUES(moduleId),
|
|
||||||
(prevData) => prevData?.filter((i) => i.issue !== data.id),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (cycleId) {
|
|
||||||
mutate<CycleIssueResponse[]>(
|
|
||||||
CYCLE_ISSUES(cycleId),
|
|
||||||
(prevData) => prevData?.filter((i) => i.issue !== data.id),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClose();
|
handleClose();
|
||||||
setToastAlert({
|
setToastAlert({
|
||||||
title: "Success",
|
title: "Success",
|
||||||
@ -173,5 +180,3 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
|
|||||||
</Transition.Root>
|
</Transition.Root>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ConfirmIssueDeletion;
|
|
||||||
@ -16,7 +16,7 @@ import {
|
|||||||
IssueStateSelect,
|
IssueStateSelect,
|
||||||
} from "components/issues/select";
|
} from "components/issues/select";
|
||||||
import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
|
import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
|
||||||
import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
|
import { CreateUpdateStateModal } from "components/states";
|
||||||
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
|
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
|
||||||
// ui
|
// ui
|
||||||
import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui";
|
import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui";
|
||||||
|
|||||||
@ -1,5 +1,12 @@
|
|||||||
export * from "./list-item";
|
export * from "./comment";
|
||||||
|
export * from "./sidebar-select";
|
||||||
|
export * from "./activity";
|
||||||
|
export * from "./delete-issue-modal";
|
||||||
export * from "./description-form";
|
export * from "./description-form";
|
||||||
export * from "./sub-issue-list";
|
|
||||||
export * from "./form";
|
export * from "./form";
|
||||||
export * from "./modal";
|
export * from "./modal";
|
||||||
|
export * from "./my-issues-list-item";
|
||||||
|
export * from "./parent-issues-list-modal";
|
||||||
|
export * from "./sidebar";
|
||||||
|
export * from "./sub-issues-list";
|
||||||
|
export * from "./sub-issues-list-modal";
|
||||||
|
|||||||
@ -1,144 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
import Link from "next/link";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
// components
|
|
||||||
import { AssigneesList } from "components/ui/avatar";
|
|
||||||
// icons
|
|
||||||
import { CalendarDaysIcon } from "@heroicons/react/24/outline";
|
|
||||||
// helpers
|
|
||||||
import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
|
|
||||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
|
||||||
// types
|
|
||||||
import { IIssue, Properties } from "types";
|
|
||||||
// constants
|
|
||||||
import { getPriorityIcon } from "constants/global";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
type?: string;
|
|
||||||
issue: IIssue;
|
|
||||||
properties: Properties;
|
|
||||||
editIssue?: () => void;
|
|
||||||
handleDeleteIssue?: () => void;
|
|
||||||
removeIssue?: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const IssueListItem: React.FC<Props> = (props) => {
|
|
||||||
// const { type, issue, properties, editIssue, handleDeleteIssue, removeIssue } = props;
|
|
||||||
const { issue, properties } = props;
|
|
||||||
// router
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug } = router.query;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={issue.id} className="flex items-center justify-between gap-2 px-4 py-3 text-sm">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span
|
|
||||||
className={`block h-1.5 w-1.5 flex-shrink-0 rounded-full`}
|
|
||||||
style={{
|
|
||||||
backgroundColor: issue.state_detail.color,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.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">
|
|
||||||
{issue.project_detail?.identifier}-{issue.sequence_id}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<span>{issue.name}</span>
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
|
|
||||||
{properties.priority && (
|
|
||||||
<div
|
|
||||||
className={`group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded px-2 py-1 text-xs capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
|
||||||
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"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{getPriorityIcon(issue.priority)}
|
|
||||||
<div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
|
|
||||||
<h5 className="mb-1 font-medium 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>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{properties.state && (
|
|
||||||
<div className="group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
|
||||||
<span
|
|
||||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
|
||||||
style={{
|
|
||||||
backgroundColor: issue?.state_detail?.color,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{addSpaceIfCamelCase(issue?.state_detail.name)}
|
|
||||||
<div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
|
|
||||||
<h5 className="mb-1 font-medium">State</h5>
|
|
||||||
<div>{issue?.state_detail.name}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{properties.due_date && (
|
|
||||||
<div
|
|
||||||
className={`group group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
|
||||||
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 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
|
|
||||||
<h5 className="mb-1 font-medium text-gray-900">Due date</h5>
|
|
||||||
<div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
|
|
||||||
<div>
|
|
||||||
{issue.target_date &&
|
|
||||||
(issue.target_date < new Date().toISOString()
|
|
||||||
? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
|
|
||||||
: findHowManyDaysLeft(issue.target_date) <= 3
|
|
||||||
? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
|
|
||||||
: "Due date")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{properties.sub_issue_count && (
|
|
||||||
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
|
||||||
{issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{properties.assignee && (
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<AssigneesList userIds={issue.assignees ?? []} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -16,11 +16,7 @@ import issuesService from "services/issues.service";
|
|||||||
import useUser from "hooks/use-user";
|
import useUser from "hooks/use-user";
|
||||||
import useToast from "hooks/use-toast";
|
import useToast from "hooks/use-toast";
|
||||||
// components
|
// components
|
||||||
import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
|
|
||||||
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
|
|
||||||
import { IssueForm } from "components/issues";
|
import { IssueForm } from "components/issues";
|
||||||
// common
|
|
||||||
import { renderDateFormat } from "helpers/date-time.helper";
|
|
||||||
// types
|
// types
|
||||||
import type { IIssue, IssueResponse } from "types";
|
import type { IIssue, IssueResponse } from "types";
|
||||||
// fetch keys
|
// fetch keys
|
||||||
@ -54,7 +50,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
|
|||||||
const [activeProject, setActiveProject] = useState<string | null>(null);
|
const [activeProject, setActiveProject] = useState<string | null>(null);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId } = router.query;
|
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
|
||||||
|
|
||||||
|
if (cycleId) prePopulateData = { ...prePopulateData, cycle: cycleId as string };
|
||||||
|
if (moduleId) prePopulateData = { ...prePopulateData, module: moduleId as string };
|
||||||
|
|
||||||
const { user } = useUser();
|
const { user } = useUser();
|
||||||
const { setToastAlert } = useToast();
|
const { setToastAlert } = useToast();
|
||||||
@ -176,7 +175,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
|
|||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (isUpdatingSingleIssue) {
|
if (isUpdatingSingleIssue) {
|
||||||
mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
|
mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
|
||||||
} else
|
} else {
|
||||||
mutate<IssueResponse>(
|
mutate<IssueResponse>(
|
||||||
PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? ""),
|
PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? ""),
|
||||||
(prevData) => ({
|
(prevData) => ({
|
||||||
@ -187,8 +186,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
|
|||||||
}),
|
}),
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
|
if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
|
||||||
|
if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
|
||||||
|
|
||||||
if (!createMore) handleClose();
|
if (!createMore) handleClose();
|
||||||
|
|
||||||
@ -206,15 +207,16 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleFormSubmit = async (formData: Partial<IIssue>) => {
|
const handleFormSubmit = async (formData: Partial<IIssue>) => {
|
||||||
if (workspaceSlug && activeProject) {
|
if (!workspaceSlug || !activeProject) return;
|
||||||
|
|
||||||
const payload: Partial<IIssue> = {
|
const payload: Partial<IIssue> = {
|
||||||
...formData,
|
...formData,
|
||||||
target_date: formData.target_date ? renderDateFormat(formData.target_date ?? "") : null,
|
description: formData.description ? formData.description : "",
|
||||||
|
description_html: formData.description_html ? formData.description_html : "<p></p>",
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!data) await createIssue(payload);
|
if (!data) await createIssue(payload);
|
||||||
else await updateIssue(payload);
|
else await updateIssue(payload);
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
132
apps/app/components/issues/my-issues-list-item.tsx
Normal file
132
apps/app/components/issues/my-issues-list-item.tsx
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
import React, { useCallback } from "react";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
|
import useSWR, { mutate } from "swr";
|
||||||
|
|
||||||
|
// services
|
||||||
|
import stateService from "services/state.service";
|
||||||
|
import issuesService from "services/issues.service";
|
||||||
|
// components
|
||||||
|
import { DueDateSelect, PrioritySelect, StateSelect } from "components/core/select";
|
||||||
|
// ui
|
||||||
|
import { AssigneesList } from "components/ui/avatar";
|
||||||
|
import { CustomMenu } from "components/ui";
|
||||||
|
// types
|
||||||
|
import { IIssue, Properties } from "types";
|
||||||
|
// fetch-keys
|
||||||
|
import { STATE_LIST, USER_ISSUE } from "constants/fetch-keys";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
issue: IIssue;
|
||||||
|
properties: Properties;
|
||||||
|
projectId: string;
|
||||||
|
handleDeleteIssue: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MyIssuesListItem: React.FC<Props> = ({
|
||||||
|
issue,
|
||||||
|
properties,
|
||||||
|
projectId,
|
||||||
|
handleDeleteIssue,
|
||||||
|
}) => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { workspaceSlug } = router.query;
|
||||||
|
|
||||||
|
const { data: states } = useSWR(
|
||||||
|
workspaceSlug && projectId ? STATE_LIST(projectId) : null,
|
||||||
|
workspaceSlug && projectId
|
||||||
|
? () => stateService.getStates(workspaceSlug as string, projectId)
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
|
const partialUpdateIssue = useCallback(
|
||||||
|
(formData: Partial<IIssue>) => {
|
||||||
|
if (!workspaceSlug) return;
|
||||||
|
|
||||||
|
mutate<IIssue[]>(
|
||||||
|
USER_ISSUE(workspaceSlug as string),
|
||||||
|
(prevData) =>
|
||||||
|
prevData?.map((p) => {
|
||||||
|
if (p.id === issue.id) return { ...p, ...formData };
|
||||||
|
|
||||||
|
return p;
|
||||||
|
}),
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
issuesService
|
||||||
|
.patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
|
||||||
|
.then((res) => {
|
||||||
|
mutate(USER_ISSUE(workspaceSlug as string));
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[workspaceSlug, projectId, issue]
|
||||||
|
);
|
||||||
|
|
||||||
|
const isNotAllowed = false;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={issue.id} className="flex items-center justify-between gap-2 px-4 py-3 text-sm">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span
|
||||||
|
className={`block h-1.5 w-1.5 flex-shrink-0 rounded-full`}
|
||||||
|
style={{
|
||||||
|
backgroundColor: issue.state_detail.color,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.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">
|
||||||
|
{issue.project_detail?.identifier}-{issue.sequence_id}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span>{issue.name}</span>
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
|
||||||
|
{properties.priority && (
|
||||||
|
<PrioritySelect
|
||||||
|
issue={issue}
|
||||||
|
partialUpdateIssue={partialUpdateIssue}
|
||||||
|
isNotAllowed={isNotAllowed}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{properties.state && (
|
||||||
|
<StateSelect
|
||||||
|
issue={issue}
|
||||||
|
states={states}
|
||||||
|
partialUpdateIssue={partialUpdateIssue}
|
||||||
|
isNotAllowed={isNotAllowed}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{properties.due_date && (
|
||||||
|
<DueDateSelect
|
||||||
|
issue={issue}
|
||||||
|
partialUpdateIssue={partialUpdateIssue}
|
||||||
|
isNotAllowed={isNotAllowed}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{properties.sub_issue_count && (
|
||||||
|
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||||
|
{issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{properties.assignee && (
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<AssigneesList userIds={issue.assignees ?? []} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<CustomMenu width="auto" ellipsis>
|
||||||
|
<CustomMenu.MenuItem onClick={handleDeleteIssue}>Delete permanently</CustomMenu.MenuItem>
|
||||||
|
</CustomMenu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -21,7 +21,7 @@ type Props = {
|
|||||||
customDisplay?: JSX.Element;
|
customDisplay?: JSX.Element;
|
||||||
};
|
};
|
||||||
|
|
||||||
const IssuesListModal: React.FC<Props> = ({
|
export const ParentIssuesListModal: React.FC<Props> = ({
|
||||||
isOpen,
|
isOpen,
|
||||||
handleClose: onClose,
|
handleClose: onClose,
|
||||||
value,
|
value,
|
||||||
@ -227,5 +227,3 @@ const IssuesListModal: React.FC<Props> = ({
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default IssuesListModal;
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
export * from "./assignee";
|
export * from "./assignee";
|
||||||
export * from "./label";
|
export * from "./label";
|
||||||
export * from "./parent-issue";
|
export * from "./parent";
|
||||||
export * from "./priority";
|
export * from "./priority";
|
||||||
export * from "./project";
|
export * from "./project";
|
||||||
export * from "./state";
|
export * from "./state";
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Controller, Control } from "react-hook-form";
|
import { Controller, Control } from "react-hook-form";
|
||||||
// components
|
// components
|
||||||
import IssuesListModal from "components/project/issues/issues-list-modal";
|
import { ParentIssuesListModal } from "components/issues";
|
||||||
// types
|
// types
|
||||||
import type { IIssue } from "types";
|
import type { IIssue } from "types";
|
||||||
|
|
||||||
@ -17,7 +17,7 @@ export const IssueParentSelect: React.FC<Props> = ({ control, isOpen, setIsOpen,
|
|||||||
control={control}
|
control={control}
|
||||||
name="parent"
|
name="parent"
|
||||||
render={({ field: { onChange } }) => (
|
render={({ field: { onChange } }) => (
|
||||||
<IssuesListModal
|
<ParentIssuesListModal
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
handleClose={() => setIsOpen(false)}
|
handleClose={() => setIsOpen(false)}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
@ -27,7 +27,7 @@ type Props = {
|
|||||||
userAuth: UserAuth;
|
userAuth: UserAuth;
|
||||||
};
|
};
|
||||||
|
|
||||||
const SelectAssignee: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug } = router.query;
|
const { workspaceSlug } = router.query;
|
||||||
|
|
||||||
@ -143,5 +143,3 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges, userAuth }) =
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SelectAssignee;
|
|
||||||
@ -16,7 +16,7 @@ import issuesService from "services/issues.service";
|
|||||||
// ui
|
// ui
|
||||||
import { Button } from "components/ui";
|
import { Button } from "components/ui";
|
||||||
// icons
|
// icons
|
||||||
import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||||
import { BlockedIcon, LayerDiagonalIcon } from "components/icons";
|
import { BlockedIcon, LayerDiagonalIcon } from "components/icons";
|
||||||
// types
|
// types
|
||||||
import { IIssue, UserAuth } from "types";
|
import { IIssue, UserAuth } from "types";
|
||||||
@ -34,7 +34,12 @@ type Props = {
|
|||||||
userAuth: UserAuth;
|
userAuth: UserAuth;
|
||||||
};
|
};
|
||||||
|
|
||||||
const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch, userAuth }) => {
|
export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||||
|
submitChanges,
|
||||||
|
issuesList,
|
||||||
|
watch,
|
||||||
|
userAuth,
|
||||||
|
}) => {
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
|
const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
|
||||||
|
|
||||||
@ -172,7 +177,6 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch, user
|
|||||||
<form>
|
<form>
|
||||||
<Combobox
|
<Combobox
|
||||||
onChange={(val: string) => {
|
onChange={(val: string) => {
|
||||||
console.log("Triggered");
|
|
||||||
const selectedIssues = watchBlocked("blocked_issue_ids");
|
const selectedIssues = watchBlocked("blocked_issue_ids");
|
||||||
if (selectedIssues.includes(val))
|
if (selectedIssues.includes(val))
|
||||||
setValue(
|
setValue(
|
||||||
@ -301,5 +305,3 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch, user
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SelectBlocked;
|
|
||||||
@ -34,7 +34,12 @@ type Props = {
|
|||||||
userAuth: UserAuth;
|
userAuth: UserAuth;
|
||||||
};
|
};
|
||||||
|
|
||||||
const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch, userAuth }) => {
|
export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||||
|
submitChanges,
|
||||||
|
issuesList,
|
||||||
|
watch,
|
||||||
|
userAuth,
|
||||||
|
}) => {
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
|
const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
|
||||||
|
|
||||||
@ -299,5 +304,3 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch, user
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SelectBlocker;
|
|
||||||
@ -22,7 +22,11 @@ type Props = {
|
|||||||
userAuth: UserAuth;
|
userAuth: UserAuth;
|
||||||
};
|
};
|
||||||
|
|
||||||
const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange, userAuth }) => {
|
export const SidebarCycleSelect: React.FC<Props> = ({
|
||||||
|
issueDetail,
|
||||||
|
handleCycleChange,
|
||||||
|
userAuth,
|
||||||
|
}) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId, issueId } = router.query;
|
const { workspaceSlug, projectId, issueId } = router.query;
|
||||||
|
|
||||||
@ -71,7 +75,7 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange, userAuth
|
|||||||
onChange={(value: any) => {
|
onChange={(value: any) => {
|
||||||
value === null
|
value === null
|
||||||
? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
|
? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
|
||||||
: handleCycleChange(cycles?.find((c) => c.id === value) as any);
|
: handleCycleChange(cycles?.find((c) => c.id === value) as ICycle);
|
||||||
}}
|
}}
|
||||||
disabled={isNotAllowed}
|
disabled={isNotAllowed}
|
||||||
>
|
>
|
||||||
@ -98,5 +102,3 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange, userAuth
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SelectCycle;
|
|
||||||
8
apps/app/components/issues/sidebar-select/index.ts
Normal file
8
apps/app/components/issues/sidebar-select/index.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export * from "./assignee";
|
||||||
|
export * from "./blocked";
|
||||||
|
export * from "./blocker";
|
||||||
|
export * from "./cycle";
|
||||||
|
export * from "./module";
|
||||||
|
export * from "./parent";
|
||||||
|
export * from "./priority";
|
||||||
|
export * from "./state";
|
||||||
103
apps/app/components/issues/sidebar-select/module.tsx
Normal file
103
apps/app/components/issues/sidebar-select/module.tsx
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
|
import useSWR, { mutate } from "swr";
|
||||||
|
|
||||||
|
// services
|
||||||
|
import modulesService from "services/modules.service";
|
||||||
|
// ui
|
||||||
|
import { Spinner, CustomSelect } from "components/ui";
|
||||||
|
// icons
|
||||||
|
import { RectangleGroupIcon } from "@heroicons/react/24/outline";
|
||||||
|
// types
|
||||||
|
import { IIssue, IModule, UserAuth } from "types";
|
||||||
|
// fetch-keys
|
||||||
|
import { ISSUE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
issueDetail: IIssue | undefined;
|
||||||
|
handleModuleChange: (module: IModule) => void;
|
||||||
|
userAuth: UserAuth;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SidebarModuleSelect: React.FC<Props> = ({
|
||||||
|
issueDetail,
|
||||||
|
handleModuleChange,
|
||||||
|
userAuth,
|
||||||
|
}) => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { workspaceSlug, projectId, issueId } = router.query;
|
||||||
|
|
||||||
|
const { data: modules } = useSWR(
|
||||||
|
workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
|
||||||
|
workspaceSlug && projectId
|
||||||
|
? () => modulesService.getModules(workspaceSlug as string, projectId as string)
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
|
const removeIssueFromModule = (bridgeId: string, moduleId: string) => {
|
||||||
|
if (!workspaceSlug || !projectId) return;
|
||||||
|
|
||||||
|
modulesService
|
||||||
|
.removeIssueFromModule(workspaceSlug as string, projectId as string, moduleId, bridgeId)
|
||||||
|
.then((res) => {
|
||||||
|
mutate(ISSUE_DETAILS(issueId as string));
|
||||||
|
|
||||||
|
mutate(MODULE_ISSUES(moduleId));
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const issueModule = issueDetail?.issue_module;
|
||||||
|
|
||||||
|
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-wrap items-center py-2">
|
||||||
|
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
|
||||||
|
<RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />
|
||||||
|
<p>Module</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1 sm:basis-1/2">
|
||||||
|
<CustomSelect
|
||||||
|
label={
|
||||||
|
<span
|
||||||
|
className={`hidden truncate text-left sm:block ${issueModule ? "" : "text-gray-900"}`}
|
||||||
|
>
|
||||||
|
{modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
value={issueModule?.module_detail?.id}
|
||||||
|
onChange={(value: any) => {
|
||||||
|
value === null
|
||||||
|
? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
|
||||||
|
: handleModuleChange(modules?.find((m) => m.id === value) as IModule);
|
||||||
|
}}
|
||||||
|
disabled={isNotAllowed}
|
||||||
|
>
|
||||||
|
{modules ? (
|
||||||
|
modules.length > 0 ? (
|
||||||
|
<>
|
||||||
|
<CustomSelect.Option value={null} className="capitalize">
|
||||||
|
None
|
||||||
|
</CustomSelect.Option>
|
||||||
|
{modules.map((option) => (
|
||||||
|
<CustomSelect.Option key={option.id} value={option.id}>
|
||||||
|
{option.name}
|
||||||
|
</CustomSelect.Option>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="text-center">No modules found</div>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<Spinner />
|
||||||
|
)}
|
||||||
|
</CustomSelect>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -10,7 +10,7 @@ import { UserIcon } from "@heroicons/react/24/outline";
|
|||||||
// services
|
// services
|
||||||
import issuesServices from "services/issues.service";
|
import issuesServices from "services/issues.service";
|
||||||
// components
|
// components
|
||||||
import IssuesListModal from "components/project/issues/issues-list-modal";
|
import { ParentIssuesListModal } from "components/issues";
|
||||||
// icons
|
// icons
|
||||||
// types
|
// types
|
||||||
import { IIssue, UserAuth } from "types";
|
import { IIssue, UserAuth } from "types";
|
||||||
@ -26,7 +26,7 @@ type Props = {
|
|||||||
userAuth: UserAuth;
|
userAuth: UserAuth;
|
||||||
};
|
};
|
||||||
|
|
||||||
const SelectParent: React.FC<Props> = ({
|
export const SidebarParentSelect: React.FC<Props> = ({
|
||||||
control,
|
control,
|
||||||
submitChanges,
|
submitChanges,
|
||||||
issuesList,
|
issuesList,
|
||||||
@ -61,7 +61,7 @@ const SelectParent: React.FC<Props> = ({
|
|||||||
control={control}
|
control={control}
|
||||||
name="parent"
|
name="parent"
|
||||||
render={({ field: { value, onChange } }) => (
|
render={({ field: { value, onChange } }) => (
|
||||||
<IssuesListModal
|
<ParentIssuesListModal
|
||||||
isOpen={isParentModalOpen}
|
isOpen={isParentModalOpen}
|
||||||
handleClose={() => setIsParentModalOpen(false)}
|
handleClose={() => setIsParentModalOpen(false)}
|
||||||
onChange={(val) => {
|
onChange={(val) => {
|
||||||
@ -93,5 +93,3 @@ const SelectParent: React.FC<Props> = ({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SelectParent;
|
|
||||||
@ -19,7 +19,7 @@ type Props = {
|
|||||||
userAuth: UserAuth;
|
userAuth: UserAuth;
|
||||||
};
|
};
|
||||||
|
|
||||||
const SelectPriority: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
export const SidebarPrioritySelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
||||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -65,5 +65,3 @@ const SelectPriority: React.FC<Props> = ({ control, submitChanges, userAuth }) =
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SelectPriority;
|
|
||||||
@ -22,7 +22,7 @@ type Props = {
|
|||||||
userAuth: UserAuth;
|
userAuth: UserAuth;
|
||||||
};
|
};
|
||||||
|
|
||||||
const SelectState: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId } = router.query;
|
const { workspaceSlug, projectId } = router.query;
|
||||||
|
|
||||||
@ -100,5 +100,3 @@ const SelectState: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SelectState;
|
|
||||||
@ -14,18 +14,21 @@ import { Popover, Listbox, Transition } from "@headlessui/react";
|
|||||||
import useToast from "hooks/use-toast";
|
import useToast from "hooks/use-toast";
|
||||||
// services
|
// services
|
||||||
import issuesServices from "services/issues.service";
|
import issuesServices from "services/issues.service";
|
||||||
|
import modulesService from "services/modules.service";
|
||||||
// components
|
// components
|
||||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
import {
|
||||||
import SelectState from "components/project/issues/issue-detail/issue-detail-sidebar/select-state";
|
DeleteIssueModal,
|
||||||
import SelectPriority from "components/project/issues/issue-detail/issue-detail-sidebar/select-priority";
|
SidebarAssigneeSelect,
|
||||||
import SelectParent from "components/project/issues/issue-detail/issue-detail-sidebar/select-parent";
|
SidebarBlockedSelect,
|
||||||
import SelectCycle from "components/project/issues/issue-detail/issue-detail-sidebar/select-cycle";
|
SidebarBlockerSelect,
|
||||||
import SelectAssignee from "components/project/issues/issue-detail/issue-detail-sidebar/select-assignee";
|
SidebarCycleSelect,
|
||||||
import SelectBlocker from "components/project/issues/issue-detail/issue-detail-sidebar/select-blocker";
|
SidebarModuleSelect,
|
||||||
import SelectBlocked from "components/project/issues/issue-detail/issue-detail-sidebar/select-blocked";
|
SidebarParentSelect,
|
||||||
|
SidebarPrioritySelect,
|
||||||
|
SidebarStateSelect,
|
||||||
|
} from "components/issues";
|
||||||
// ui
|
// ui
|
||||||
import { Input, Button, Spinner, CustomDatePicker } from "components/ui";
|
import { Input, Button, Spinner, CustomDatePicker } from "components/ui";
|
||||||
import DatePicker from "react-datepicker";
|
|
||||||
// icons
|
// icons
|
||||||
import {
|
import {
|
||||||
TagIcon,
|
TagIcon,
|
||||||
@ -39,12 +42,10 @@ import {
|
|||||||
// helpers
|
// helpers
|
||||||
import { copyTextToClipboard } from "helpers/string.helper";
|
import { copyTextToClipboard } from "helpers/string.helper";
|
||||||
// types
|
// types
|
||||||
import type { ICycle, IIssue, IIssueLabels, UserAuth } from "types";
|
import type { ICycle, IIssue, IIssueLabels, IModule, UserAuth } from "types";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
|
import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
|
||||||
|
|
||||||
import "react-datepicker/dist/react-datepicker.css";
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
control: Control<IIssue, any>;
|
control: Control<IIssue, any>;
|
||||||
submitChanges: (formData: Partial<IIssue>) => void;
|
submitChanges: (formData: Partial<IIssue>) => void;
|
||||||
@ -58,7 +59,7 @@ const defaultValues: Partial<IIssueLabels> = {
|
|||||||
colour: "#ff0000",
|
colour: "#ff0000",
|
||||||
};
|
};
|
||||||
|
|
||||||
const IssueDetailSidebar: React.FC<Props> = ({
|
export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||||
control,
|
control,
|
||||||
submitChanges,
|
submitChanges,
|
||||||
issueDetail,
|
issueDetail,
|
||||||
@ -124,14 +125,26 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleModuleChange = (moduleDetail: IModule) => {
|
||||||
|
if (!workspaceSlug || !projectId || !issueDetail) return;
|
||||||
|
|
||||||
|
modulesService
|
||||||
|
.addIssuesToModule(workspaceSlug as string, projectId as string, moduleDetail.id, {
|
||||||
|
issues: [issueDetail.id],
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
mutate(ISSUE_DETAILS(issueId as string));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ConfirmIssueDeletion
|
<DeleteIssueModal
|
||||||
handleClose={() => setDeleteIssueModal(false)}
|
handleClose={() => setDeleteIssueModal(false)}
|
||||||
isOpen={deleteIssueModal}
|
isOpen={deleteIssueModal}
|
||||||
data={issueDetail}
|
data={issueDetail ?? null}
|
||||||
/>
|
/>
|
||||||
<div className="w-full divide-y-2 divide-gray-100 sticky top-5">
|
<div className="w-full divide-y-2 divide-gray-100 sticky top-5">
|
||||||
<div className="flex items-center justify-between pb-3">
|
<div className="flex items-center justify-between pb-3">
|
||||||
@ -175,12 +188,24 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
|||||||
</div>
|
</div>
|
||||||
<div className="divide-y-2 divide-gray-100">
|
<div className="divide-y-2 divide-gray-100">
|
||||||
<div className="py-1">
|
<div className="py-1">
|
||||||
<SelectState control={control} submitChanges={submitChanges} userAuth={userAuth} />
|
<SidebarStateSelect
|
||||||
<SelectAssignee control={control} submitChanges={submitChanges} userAuth={userAuth} />
|
control={control}
|
||||||
<SelectPriority control={control} submitChanges={submitChanges} userAuth={userAuth} />
|
submitChanges={submitChanges}
|
||||||
|
userAuth={userAuth}
|
||||||
|
/>
|
||||||
|
<SidebarAssigneeSelect
|
||||||
|
control={control}
|
||||||
|
submitChanges={submitChanges}
|
||||||
|
userAuth={userAuth}
|
||||||
|
/>
|
||||||
|
<SidebarPrioritySelect
|
||||||
|
control={control}
|
||||||
|
submitChanges={submitChanges}
|
||||||
|
userAuth={userAuth}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="py-1">
|
<div className="py-1">
|
||||||
<SelectParent
|
<SidebarParentSelect
|
||||||
control={control}
|
control={control}
|
||||||
submitChanges={submitChanges}
|
submitChanges={submitChanges}
|
||||||
issuesList={
|
issuesList={
|
||||||
@ -210,13 +235,13 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
|||||||
watch={watchIssue}
|
watch={watchIssue}
|
||||||
userAuth={userAuth}
|
userAuth={userAuth}
|
||||||
/>
|
/>
|
||||||
<SelectBlocker
|
<SidebarBlockerSelect
|
||||||
submitChanges={submitChanges}
|
submitChanges={submitChanges}
|
||||||
issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
|
issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
|
||||||
watch={watchIssue}
|
watch={watchIssue}
|
||||||
userAuth={userAuth}
|
userAuth={userAuth}
|
||||||
/>
|
/>
|
||||||
<SelectBlocked
|
<SidebarBlockedSelect
|
||||||
submitChanges={submitChanges}
|
submitChanges={submitChanges}
|
||||||
issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
|
issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
|
||||||
watch={watchIssue}
|
watch={watchIssue}
|
||||||
@ -247,11 +272,16 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="py-1">
|
<div className="py-1">
|
||||||
<SelectCycle
|
<SidebarCycleSelect
|
||||||
issueDetail={issueDetail}
|
issueDetail={issueDetail}
|
||||||
handleCycleChange={handleCycleChange}
|
handleCycleChange={handleCycleChange}
|
||||||
userAuth={userAuth}
|
userAuth={userAuth}
|
||||||
/>
|
/>
|
||||||
|
<SidebarModuleSelect
|
||||||
|
issueDetail={issueDetail}
|
||||||
|
handleModuleChange={handleModuleChange}
|
||||||
|
userAuth={userAuth}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-3 pt-3">
|
<div className="space-y-3 pt-3">
|
||||||
@ -446,5 +476,3 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default IssueDetailSidebar;
|
|
||||||
@ -17,11 +17,11 @@ import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
|
|||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
handleClose: () => void;
|
||||||
parent: IIssue | undefined;
|
parent: IIssue | undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
|
export const SubIssuesListModal: React.FC<Props> = ({ isOpen, handleClose, parent }) => {
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@ -43,7 +43,7 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
|
|||||||
[];
|
[];
|
||||||
|
|
||||||
const handleCommandPaletteClose = () => {
|
const handleCommandPaletteClose = () => {
|
||||||
setIsOpen(false);
|
handleClose();
|
||||||
setQuery("");
|
setQuery("");
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -147,11 +147,11 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
|
|||||||
}
|
}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
addAsSubIssue(issue.id);
|
addAsSubIssue(issue.id);
|
||||||
setIsOpen(false);
|
handleClose();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className={`block h-1.5 w-1.5 rounded-full`}
|
className="block flex-shrink-0 h-1.5 w-1.5 rounded-full"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: issue.state_detail.color,
|
backgroundColor: issue.state_detail.color,
|
||||||
}}
|
}}
|
||||||
@ -188,5 +188,3 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
|
|||||||
</Transition.Root>
|
</Transition.Root>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AddAsSubIssue;
|
|
||||||
@ -4,8 +4,7 @@ import { Disclosure, Transition } from "@headlessui/react";
|
|||||||
import { ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
|
import { ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||||
// components
|
// components
|
||||||
import { CustomMenu } from "components/ui";
|
import { CustomMenu } from "components/ui";
|
||||||
import { CreateUpdateIssueModal } from "components/issues";
|
import { CreateUpdateIssueModal, SubIssuesListModal } from "components/issues";
|
||||||
import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
|
|
||||||
// types
|
// types
|
||||||
import { IIssue, UserAuth } from "types";
|
import { IIssue, UserAuth } from "types";
|
||||||
|
|
||||||
@ -18,7 +17,7 @@ export interface SubIssueListProps {
|
|||||||
userAuth: UserAuth;
|
userAuth: UserAuth;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SubIssueList: FC<SubIssueListProps> = ({
|
export const SubIssuesList: FC<SubIssueListProps> = ({
|
||||||
issues = [],
|
issues = [],
|
||||||
handleSubIssueRemove,
|
handleSubIssueRemove,
|
||||||
parentIssue,
|
parentIssue,
|
||||||
@ -28,7 +27,7 @@ export const SubIssueList: FC<SubIssueListProps> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
// states
|
// states
|
||||||
const [isIssueModalActive, setIssueModalActive] = useState(false);
|
const [isIssueModalActive, setIssueModalActive] = useState(false);
|
||||||
const [isSubIssueModalActive, setSubIssueModalActive] = useState(false);
|
const [subIssuesListModal, setSubIssuesListModal] = useState(false);
|
||||||
const [preloadedData, setPreloadedData] = useState<Partial<IIssue> | null>(null);
|
const [preloadedData, setPreloadedData] = useState<Partial<IIssue> | null>(null);
|
||||||
|
|
||||||
const openIssueModal = () => {
|
const openIssueModal = () => {
|
||||||
@ -40,11 +39,11 @@ export const SubIssueList: FC<SubIssueListProps> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const openSubIssueModal = () => {
|
const openSubIssueModal = () => {
|
||||||
setSubIssueModalActive(true);
|
setSubIssuesListModal(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const closeSubIssueModal = () => {
|
const closeSubIssueModal = () => {
|
||||||
setSubIssueModalActive(false);
|
setSubIssuesListModal(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||||
@ -56,9 +55,9 @@ export const SubIssueList: FC<SubIssueListProps> = ({
|
|||||||
prePopulateData={{ ...preloadedData }}
|
prePopulateData={{ ...preloadedData }}
|
||||||
handleClose={closeIssueModal}
|
handleClose={closeIssueModal}
|
||||||
/>
|
/>
|
||||||
<AddAsSubIssue
|
<SubIssuesListModal
|
||||||
isOpen={isSubIssueModalActive}
|
isOpen={subIssuesListModal}
|
||||||
setIsOpen={setSubIssueModalActive}
|
handleClose={() => setSubIssuesListModal(false)}
|
||||||
parent={parentIssue}
|
parent={parentIssue}
|
||||||
/>
|
/>
|
||||||
<Disclosure defaultOpen={true}>
|
<Disclosure defaultOpen={true}>
|
||||||
@ -88,7 +87,7 @@ export const SubIssueList: FC<SubIssueListProps> = ({
|
|||||||
<CustomMenu ellipsis>
|
<CustomMenu ellipsis>
|
||||||
<CustomMenu.MenuItem
|
<CustomMenu.MenuItem
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSubIssueModalActive(true);
|
setSubIssuesListModal(true);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Add an existing issue
|
Add an existing issue
|
||||||
@ -114,7 +113,7 @@ export const SubIssueList: FC<SubIssueListProps> = ({
|
|||||||
<Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}>
|
<Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}>
|
||||||
<a className="flex items-center gap-2 rounded text-xs">
|
<a className="flex items-center gap-2 rounded text-xs">
|
||||||
<span
|
<span
|
||||||
className={`block h-1.5 w-1.5 rounded-full`}
|
className="block flex-shrink-0 h-1.5 w-1.5 rounded-full"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: issue.state_detail.color,
|
backgroundColor: issue.state_detail.color,
|
||||||
}}
|
}}
|
||||||
@ -25,7 +25,7 @@ type Props = {
|
|||||||
data?: IModule;
|
data?: IModule;
|
||||||
};
|
};
|
||||||
|
|
||||||
const ConfirmModuleDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
|
export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
|
||||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@ -152,5 +152,3 @@ const ConfirmModuleDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
|
|||||||
</Transition.Root>
|
</Transition.Root>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ConfirmModuleDeletion;
|
|
||||||
128
apps/app/components/modules/form.tsx
Normal file
128
apps/app/components/modules/form.tsx
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
// react-hook-form
|
||||||
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
// components
|
||||||
|
import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
|
||||||
|
// ui
|
||||||
|
import { Button, CustomDatePicker, Input, TextArea } from "components/ui";
|
||||||
|
// types
|
||||||
|
import { IModule } from "types";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
handleFormSubmit: (values: Partial<IModule>) => void;
|
||||||
|
handleClose: () => void;
|
||||||
|
status: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultValues: Partial<IModule> = {
|
||||||
|
name: "",
|
||||||
|
description: "",
|
||||||
|
status: null,
|
||||||
|
lead: null,
|
||||||
|
members_list: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status }) => {
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
formState: { errors, isSubmitting },
|
||||||
|
handleSubmit,
|
||||||
|
control,
|
||||||
|
reset,
|
||||||
|
} = useForm<IModule>({
|
||||||
|
defaultValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleCreateUpdateModule = async (formData: Partial<IModule>) => {
|
||||||
|
await handleFormSubmit(formData);
|
||||||
|
|
||||||
|
reset({
|
||||||
|
...defaultValues,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit(handleCreateUpdateModule)}>
|
||||||
|
<div className="space-y-5">
|
||||||
|
<h3 className="text-lg font-medium leading-6 text-gray-900">
|
||||||
|
{status ? "Update" : "Create"} Module
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
label="Name"
|
||||||
|
name="name"
|
||||||
|
type="name"
|
||||||
|
placeholder="Enter name"
|
||||||
|
autoComplete="off"
|
||||||
|
error={errors.name}
|
||||||
|
register={register}
|
||||||
|
validations={{
|
||||||
|
required: "Name is required",
|
||||||
|
maxLength: {
|
||||||
|
value: 255,
|
||||||
|
message: "Name should be less than 255 characters",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<TextArea
|
||||||
|
id="description"
|
||||||
|
name="description"
|
||||||
|
label="Description"
|
||||||
|
placeholder="Enter description"
|
||||||
|
error={errors.description}
|
||||||
|
register={register}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-x-2">
|
||||||
|
<div className="w-full">
|
||||||
|
<h6 className="text-gray-500">Start Date</h6>
|
||||||
|
<div className="w-full">
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="start_date"
|
||||||
|
render={({ field: { value, onChange } }) => (
|
||||||
|
<CustomDatePicker renderAs="input" value={value} onChange={onChange} />
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full">
|
||||||
|
<h6 className="text-gray-500">Target Date</h6>
|
||||||
|
<div className="w-full">
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="target_date"
|
||||||
|
render={({ field: { value, onChange } }) => (
|
||||||
|
<CustomDatePicker renderAs="input" value={value} onChange={onChange} />
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<ModuleStatusSelect control={control} error={errors.status} />
|
||||||
|
<ModuleLeadSelect control={control} />
|
||||||
|
<ModuleMembersSelect control={control} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-5 flex justify-end gap-2">
|
||||||
|
<Button theme="secondary" onClick={handleClose}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" disabled={isSubmitting}>
|
||||||
|
{status
|
||||||
|
? isSubmitting
|
||||||
|
? "Updating Module..."
|
||||||
|
: "Update Module"
|
||||||
|
: isSubmitting
|
||||||
|
? "Creating Module..."
|
||||||
|
: "Create Module"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
8
apps/app/components/modules/index.ts
Normal file
8
apps/app/components/modules/index.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export * from "./select";
|
||||||
|
export * from "./sidebar-select";
|
||||||
|
export * from "./delete-module-modal";
|
||||||
|
export * from "./form";
|
||||||
|
export * from "./modal";
|
||||||
|
export * from "./module-link-modal";
|
||||||
|
export * from "./sidebar";
|
||||||
|
export * from "./single-module-card";
|
||||||
168
apps/app/components/modules/modal.tsx
Normal file
168
apps/app/components/modules/modal.tsx
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
import React, { useEffect } from "react";
|
||||||
|
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
|
import { mutate } from "swr";
|
||||||
|
|
||||||
|
// react-hook-form
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
// headless ui
|
||||||
|
import { Dialog, Transition } from "@headlessui/react";
|
||||||
|
// components
|
||||||
|
import { ModuleForm } from "components/modules";
|
||||||
|
// services
|
||||||
|
import modulesService from "services/modules.service";
|
||||||
|
// hooks
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
// helpers
|
||||||
|
import { renderDateFormat } from "helpers/date-time.helper";
|
||||||
|
// types
|
||||||
|
import type { IModule } from "types";
|
||||||
|
// fetch-keys
|
||||||
|
import { MODULE_LIST } from "constants/fetch-keys";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
isOpen: boolean;
|
||||||
|
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
|
data?: IModule;
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultValues: Partial<IModule> = {
|
||||||
|
name: "",
|
||||||
|
description: "",
|
||||||
|
status: null,
|
||||||
|
lead: null,
|
||||||
|
members_list: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { workspaceSlug, projectId } = router.query;
|
||||||
|
|
||||||
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setIsOpen(false);
|
||||||
|
reset(defaultValues);
|
||||||
|
};
|
||||||
|
|
||||||
|
const { reset, setError } = useForm<IModule>({
|
||||||
|
defaultValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
const createModule = async (payload: Partial<IModule>) => {
|
||||||
|
await modulesService
|
||||||
|
.createModule(workspaceSlug as string, projectId as string, payload)
|
||||||
|
.then(() => {
|
||||||
|
mutate(MODULE_LIST(projectId as string));
|
||||||
|
handleClose();
|
||||||
|
|
||||||
|
setToastAlert({
|
||||||
|
title: "Success",
|
||||||
|
type: "success",
|
||||||
|
message: "Module created successfully",
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
Object.keys(err).map((key) => {
|
||||||
|
setError(key as keyof typeof defaultValues, {
|
||||||
|
message: err[key].join(", "),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateModule = async (payload: Partial<IModule>) => {
|
||||||
|
await modulesService
|
||||||
|
.updateModule(workspaceSlug as string, projectId as string, data?.id ?? "", payload)
|
||||||
|
.then((res) => {
|
||||||
|
mutate<IModule[]>(
|
||||||
|
MODULE_LIST(projectId as string),
|
||||||
|
(prevData) => {
|
||||||
|
const newData = prevData?.map((item) => {
|
||||||
|
if (item.id === res.id) {
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
return newData;
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
handleClose();
|
||||||
|
|
||||||
|
setToastAlert({
|
||||||
|
title: "Success",
|
||||||
|
type: "success",
|
||||||
|
message: "Module updated successfully",
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
Object.keys(err).map((key) => {
|
||||||
|
setError(key as keyof typeof defaultValues, {
|
||||||
|
message: err[key].join(", "),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFormSubmit = async (formData: Partial<IModule>) => {
|
||||||
|
if (!workspaceSlug || !projectId) return;
|
||||||
|
|
||||||
|
const payload: Partial<IModule> = {
|
||||||
|
...formData,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!data) await createModule(payload);
|
||||||
|
else await updateModule(payload);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (data) {
|
||||||
|
setIsOpen(true);
|
||||||
|
reset(data);
|
||||||
|
} else {
|
||||||
|
reset(defaultValues);
|
||||||
|
}
|
||||||
|
}, [data, setIsOpen, reset]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||||
|
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||||
|
<Transition.Child
|
||||||
|
as={React.Fragment}
|
||||||
|
enter="ease-out duration-300"
|
||||||
|
enterFrom="opacity-0"
|
||||||
|
enterTo="opacity-100"
|
||||||
|
leave="ease-in duration-200"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
>
|
||||||
|
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||||
|
</Transition.Child>
|
||||||
|
|
||||||
|
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||||
|
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
|
||||||
|
<Transition.Child
|
||||||
|
as={React.Fragment}
|
||||||
|
enter="ease-out duration-300"
|
||||||
|
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||||
|
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||||
|
leave="ease-in duration-200"
|
||||||
|
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||||
|
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||||
|
>
|
||||||
|
<Dialog.Panel className="relative transform rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
||||||
|
<ModuleForm
|
||||||
|
handleFormSubmit={handleFormSubmit}
|
||||||
|
handleClose={handleClose}
|
||||||
|
status={data ? true : false}
|
||||||
|
/>
|
||||||
|
</Dialog.Panel>
|
||||||
|
</Transition.Child>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
|
</Transition.Root>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -4,18 +4,18 @@ import { useRouter } from "next/router";
|
|||||||
|
|
||||||
import { mutate } from "swr";
|
import { mutate } from "swr";
|
||||||
|
|
||||||
|
// react-hook-form
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
|
// headless ui
|
||||||
import { Dialog, Transition } from "@headlessui/react";
|
import { Dialog, Transition } from "@headlessui/react";
|
||||||
// hooks
|
|
||||||
// types
|
|
||||||
import type { IModule, ModuleLink } from "types";
|
|
||||||
// services
|
// services
|
||||||
import modulesService from "services/modules.service";
|
import modulesService from "services/modules.service";
|
||||||
// ui
|
// ui
|
||||||
import { Button, Input } from "components/ui";
|
import { Button, Input } from "components/ui";
|
||||||
|
// types
|
||||||
|
import type { IModule, ModuleLink } from "types";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import { MODULE_LIST } from "constants/fetch-keys";
|
import { MODULE_DETAILS } from "constants/fetch-keys";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
@ -28,7 +28,7 @@ const defaultValues: ModuleLink = {
|
|||||||
url: "",
|
url: "",
|
||||||
};
|
};
|
||||||
|
|
||||||
const ModuleLinkModal: React.FC<Props> = ({ isOpen, module, handleClose }) => {
|
export const ModuleLinkModal: React.FC<Props> = ({ isOpen, module, handleClose }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId, moduleId } = router.query;
|
const { workspaceSlug, projectId, moduleId } = router.query;
|
||||||
|
|
||||||
@ -43,23 +43,18 @@ const ModuleLinkModal: React.FC<Props> = ({ isOpen, module, handleClose }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const onSubmit = async (formData: ModuleLink) => {
|
const onSubmit = async (formData: ModuleLink) => {
|
||||||
if (!workspaceSlug || !projectId || !module) return;
|
if (!workspaceSlug || !projectId || !moduleId) return;
|
||||||
|
|
||||||
const previousLinks = module.link_module.map((l) => ({ title: l.title, url: l.url }));
|
const previousLinks = module?.link_module.map((l) => ({ title: l.title, url: l.url }));
|
||||||
|
|
||||||
const payload: Partial<IModule> = {
|
const payload: Partial<IModule> = {
|
||||||
links_list: [...previousLinks, formData],
|
links_list: [...(previousLinks ?? []), formData],
|
||||||
};
|
};
|
||||||
|
|
||||||
await modulesService
|
await modulesService
|
||||||
.patchModule(workspaceSlug as string, projectId as string, module.id, payload)
|
.patchModule(workspaceSlug as string, projectId as string, moduleId as string, payload)
|
||||||
.then(() => {
|
.then((res) => {
|
||||||
mutate<IModule[]>(projectId && MODULE_LIST(projectId as string), (prevData) =>
|
mutate(MODULE_DETAILS(moduleId as string));
|
||||||
(prevData ?? []).map((module) => {
|
|
||||||
if (module.id === moduleId) return { ...module, ...payload };
|
|
||||||
return module;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
onClose();
|
onClose();
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -163,5 +158,3 @@ const ModuleLinkModal: React.FC<Props> = ({ isOpen, module, handleClose }) => {
|
|||||||
</Transition.Root>
|
</Transition.Root>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ModuleLinkModal;
|
|
||||||
3
apps/app/components/modules/select/index.ts
Normal file
3
apps/app/components/modules/select/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export * from "./select-lead";
|
||||||
|
export * from "./select-members";
|
||||||
|
export * from "./select-status";
|
||||||
@ -4,16 +4,16 @@ import { useRouter } from "next/router";
|
|||||||
|
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
|
|
||||||
|
// react-hook-form
|
||||||
import { Controller, Control } from "react-hook-form";
|
import { Controller, Control } from "react-hook-form";
|
||||||
import { UserIcon } from "@heroicons/react/24/outline";
|
// services
|
||||||
// import type { Control } from "react-hook-form";
|
|
||||||
// service
|
|
||||||
import type { IModule } from "types";
|
|
||||||
import projectServices from "services/project.service";
|
import projectServices from "services/project.service";
|
||||||
// ui
|
// ui
|
||||||
import SearchListbox from "components/search-listbox";
|
import SearchListbox from "components/search-listbox";
|
||||||
// icons
|
// icons
|
||||||
|
import { UserIcon } from "@heroicons/react/24/outline";
|
||||||
// types
|
// types
|
||||||
|
import type { IModule } from "types";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||||
|
|
||||||
@ -21,7 +21,7 @@ type Props = {
|
|||||||
control: Control<IModule, any>;
|
control: Control<IModule, any>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const SelectLead: React.FC<Props> = ({ control }) => {
|
export const ModuleLeadSelect: React.FC<Props> = ({ control }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId } = router.query;
|
const { workspaceSlug, projectId } = router.query;
|
||||||
|
|
||||||
@ -55,5 +55,3 @@ const SelectLead: React.FC<Props> = ({ control }) => {
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SelectLead;
|
|
||||||
@ -4,16 +4,16 @@ import { useRouter } from "next/router";
|
|||||||
|
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
|
|
||||||
|
// react-hook-form
|
||||||
import { Controller, Control } from "react-hook-form";
|
import { Controller, Control } from "react-hook-form";
|
||||||
import { UserIcon } from "@heroicons/react/24/outline";
|
// services
|
||||||
// import type { Control } from "react-hook-form";
|
|
||||||
// service
|
|
||||||
import type { IModule } from "types";
|
|
||||||
import projectServices from "services/project.service";
|
import projectServices from "services/project.service";
|
||||||
// ui
|
// ui
|
||||||
import SearchListbox from "components/search-listbox";
|
import SearchListbox from "components/search-listbox";
|
||||||
// icons
|
// icons
|
||||||
|
import { UserIcon } from "@heroicons/react/24/outline";
|
||||||
// types
|
// types
|
||||||
|
import type { IModule } from "types";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||||
|
|
||||||
@ -21,7 +21,7 @@ type Props = {
|
|||||||
control: Control<IModule, any>;
|
control: Control<IModule, any>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const SelectMembers: React.FC<Props> = ({ control }) => {
|
export const ModuleMembersSelect: React.FC<Props> = ({ control }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId } = router.query;
|
const { workspaceSlug, projectId } = router.query;
|
||||||
|
|
||||||
@ -56,5 +56,3 @@ const SelectMembers: React.FC<Props> = ({ control }) => {
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SelectMembers;
|
|
||||||
@ -16,7 +16,7 @@ type Props = {
|
|||||||
error?: FieldError;
|
error?: FieldError;
|
||||||
};
|
};
|
||||||
|
|
||||||
const SelectStatus: React.FC<Props> = ({ control, error }) => (
|
export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
|
||||||
<Controller
|
<Controller
|
||||||
control={control}
|
control={control}
|
||||||
rules={{ required: true }}
|
rules={{ required: true }}
|
||||||
@ -45,4 +45,3 @@ const SelectStatus: React.FC<Props> = ({ control, error }) => (
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
export default SelectStatus;
|
|
||||||
3
apps/app/components/modules/sidebar-select/index.ts
Normal file
3
apps/app/components/modules/sidebar-select/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export * from "./select-lead";
|
||||||
|
export * from "./select-members";
|
||||||
|
export * from "./select-status";
|
||||||
@ -25,7 +25,7 @@ type Props = {
|
|||||||
lead: IUserLite | null;
|
lead: IUserLite | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
const SelectLead: React.FC<Props> = ({ control, submitChanges, lead }) => {
|
export const SidebarLeadSelect: React.FC<Props> = ({ control, submitChanges, lead }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug } = router.query;
|
const { workspaceSlug } = router.query;
|
||||||
|
|
||||||
@ -164,5 +164,3 @@ const SelectLead: React.FC<Props> = ({ control, submitChanges, lead }) => {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SelectLead;
|
|
||||||
@ -23,7 +23,7 @@ type Props = {
|
|||||||
submitChanges: (formData: Partial<IModule>) => void;
|
submitChanges: (formData: Partial<IModule>) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const SelectMembers: React.FC<Props> = ({ control, submitChanges }) => {
|
export const SidebarMembersSelect: React.FC<Props> = ({ control, submitChanges }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug } = router.query;
|
const { workspaceSlug } = router.query;
|
||||||
|
|
||||||
@ -132,5 +132,3 @@ const SelectMembers: React.FC<Props> = ({ control, submitChanges }) => {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SelectMembers;
|
|
||||||
@ -18,7 +18,7 @@ type Props = {
|
|||||||
watch: UseFormWatch<Partial<IModule>>;
|
watch: UseFormWatch<Partial<IModule>>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const SelectStatus: React.FC<Props> = ({ control, submitChanges, watch }) => (
|
export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, watch }) => (
|
||||||
<div className="flex flex-wrap items-center py-2">
|
<div className="flex flex-wrap items-center py-2">
|
||||||
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
|
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
|
||||||
<Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
|
<Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
|
||||||
@ -67,5 +67,3 @@ const SelectStatus: React.FC<Props> = ({ control, submitChanges, watch }) => (
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default SelectStatus;
|
|
||||||
@ -8,6 +8,22 @@ import { mutate } from "swr";
|
|||||||
// react-hook-form
|
// react-hook-form
|
||||||
import { Controller, useForm } from "react-hook-form";
|
import { Controller, useForm } from "react-hook-form";
|
||||||
// services
|
// services
|
||||||
|
import modulesService from "services/modules.service";
|
||||||
|
// hooks
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
// components
|
||||||
|
import {
|
||||||
|
ModuleLinkModal,
|
||||||
|
SidebarLeadSelect,
|
||||||
|
SidebarMembersSelect,
|
||||||
|
SidebarStatusSelect,
|
||||||
|
} from "components/modules";
|
||||||
|
// progress-bar
|
||||||
|
import { CircularProgressbar } from "react-circular-progressbar";
|
||||||
|
import "react-circular-progressbar/dist/styles.css";
|
||||||
|
// ui
|
||||||
|
import { CustomDatePicker, Loader } from "components/ui";
|
||||||
|
// icons
|
||||||
import {
|
import {
|
||||||
CalendarDaysIcon,
|
CalendarDaysIcon,
|
||||||
ChartPieIcon,
|
ChartPieIcon,
|
||||||
@ -15,20 +31,6 @@ import {
|
|||||||
PlusIcon,
|
PlusIcon,
|
||||||
TrashIcon,
|
TrashIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
import modulesService from "services/modules.service";
|
|
||||||
// hooks
|
|
||||||
import useToast from "hooks/use-toast";
|
|
||||||
// components
|
|
||||||
import SelectLead from "components/project/modules/module-detail-sidebar/select-lead";
|
|
||||||
import SelectMembers from "components/project/modules/module-detail-sidebar/select-members";
|
|
||||||
import SelectStatus from "components/project/modules/module-detail-sidebar/select-status";
|
|
||||||
import ModuleLinkModal from "components/project/modules/module-link-modal";
|
|
||||||
//progress-bar
|
|
||||||
import { CircularProgressbar } from "react-circular-progressbar";
|
|
||||||
import "react-circular-progressbar/dist/styles.css";
|
|
||||||
// ui
|
|
||||||
import { CustomDatePicker, Loader } from "components/ui";
|
|
||||||
// icons
|
|
||||||
// helpers
|
// helpers
|
||||||
import { timeAgo } from "helpers/date-time.helper";
|
import { timeAgo } from "helpers/date-time.helper";
|
||||||
import { copyTextToClipboard } from "helpers/string.helper";
|
import { copyTextToClipboard } from "helpers/string.helper";
|
||||||
@ -36,9 +38,10 @@ import { groupBy } from "helpers/array.helper";
|
|||||||
// types
|
// types
|
||||||
import { IModule, ModuleIssueResponse } from "types";
|
import { IModule, ModuleIssueResponse } from "types";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import { MODULE_LIST } from "constants/fetch-keys";
|
import { MODULE_DETAILS } from "constants/fetch-keys";
|
||||||
|
|
||||||
const defaultValues: Partial<IModule> = {
|
const defaultValues: Partial<IModule> = {
|
||||||
|
lead: "",
|
||||||
members_list: [],
|
members_list: [],
|
||||||
start_date: null,
|
start_date: null,
|
||||||
target_date: null,
|
target_date: null,
|
||||||
@ -52,7 +55,7 @@ type Props = {
|
|||||||
handleDeleteModule: () => void;
|
handleDeleteModule: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const ModuleDetailSidebar: React.FC<Props> = ({
|
export const ModuleDetailsSidebar: React.FC<Props> = ({
|
||||||
module,
|
module,
|
||||||
isOpen,
|
isOpen,
|
||||||
moduleIssues,
|
moduleIssues,
|
||||||
@ -69,14 +72,6 @@ const ModuleDetailSidebar: React.FC<Props> = ({
|
|||||||
defaultValues,
|
defaultValues,
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (module)
|
|
||||||
reset({
|
|
||||||
...module,
|
|
||||||
members_list: module.members_list ?? module.members_detail?.map((m) => m.id),
|
|
||||||
});
|
|
||||||
}, [module, reset]);
|
|
||||||
|
|
||||||
const groupedIssues = {
|
const groupedIssues = {
|
||||||
backlog: [],
|
backlog: [],
|
||||||
unstarted: [],
|
unstarted: [],
|
||||||
@ -87,29 +82,36 @@ const ModuleDetailSidebar: React.FC<Props> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const submitChanges = (data: Partial<IModule>) => {
|
const submitChanges = (data: Partial<IModule>) => {
|
||||||
if (!workspaceSlug || !projectId || !module) return;
|
if (!workspaceSlug || !projectId || !moduleId) return;
|
||||||
|
|
||||||
mutate<IModule[]>(
|
mutate<IModule>(
|
||||||
projectId && MODULE_LIST(projectId as string),
|
MODULE_DETAILS(moduleId as string),
|
||||||
(prevData) =>
|
(prevData) => ({
|
||||||
(prevData ?? []).map((module) => {
|
...(prevData as IModule),
|
||||||
if (module.id === moduleId) return { ...module, ...data };
|
...data,
|
||||||
return module;
|
|
||||||
}),
|
}),
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
modulesService
|
modulesService
|
||||||
.patchModule(workspaceSlug as string, projectId as string, module.id, data)
|
.patchModule(workspaceSlug as string, projectId as string, moduleId as string, data)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
console.log(res);
|
console.log(res);
|
||||||
mutate(MODULE_LIST(projectId as string));
|
mutate(MODULE_DETAILS(moduleId as string));
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (module)
|
||||||
|
reset({
|
||||||
|
...module,
|
||||||
|
members_list: module.members_list ?? module.members_detail?.map((m) => m.id),
|
||||||
|
});
|
||||||
|
}, [module, reset]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ModuleLinkModal
|
<ModuleLinkModal
|
||||||
@ -161,12 +163,12 @@ const ModuleDetailSidebar: React.FC<Props> = ({
|
|||||||
</div>
|
</div>
|
||||||
<div className="divide-y-2 divide-gray-100 text-xs">
|
<div className="divide-y-2 divide-gray-100 text-xs">
|
||||||
<div className="py-1">
|
<div className="py-1">
|
||||||
<SelectLead
|
<SidebarLeadSelect
|
||||||
control={control}
|
control={control}
|
||||||
submitChanges={submitChanges}
|
submitChanges={submitChanges}
|
||||||
lead={module.lead_detail}
|
lead={module.lead_detail}
|
||||||
/>
|
/>
|
||||||
<SelectMembers control={control} submitChanges={submitChanges} />
|
<SidebarMembersSelect control={control} submitChanges={submitChanges} />
|
||||||
<div className="flex flex-wrap items-center py-2">
|
<div className="flex flex-wrap items-center py-2">
|
||||||
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
|
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
|
||||||
<ChartPieIcon className="h-4 w-4 flex-shrink-0" />
|
<ChartPieIcon className="h-4 w-4 flex-shrink-0" />
|
||||||
@ -233,7 +235,11 @@ const ModuleDetailSidebar: React.FC<Props> = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="py-1">
|
<div className="py-1">
|
||||||
<SelectStatus control={control} submitChanges={submitChanges} watch={watch} />
|
<SidebarStatusSelect
|
||||||
|
control={control}
|
||||||
|
submitChanges={submitChanges}
|
||||||
|
watch={watch}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="py-1">
|
<div className="py-1">
|
||||||
<div className="flex items-center justify-between gap-2">
|
<div className="flex items-center justify-between gap-2">
|
||||||
@ -302,5 +308,3 @@ const ModuleDetailSidebar: React.FC<Props> = ({
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ModuleDetailSidebar;
|
|
||||||
@ -1,10 +1,13 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import { CalendarDaysIcon, TrashIcon } from "@heroicons/react/24/outline";
|
|
||||||
import ConfirmModuleDeletion from "./confirm-module-deletion";
|
// components
|
||||||
|
import { DeleteModuleModal } from "components/modules";
|
||||||
// icons
|
// icons
|
||||||
|
import { CalendarDaysIcon, TrashIcon } from "@heroicons/react/24/outline";
|
||||||
import User from "public/user.png";
|
import User from "public/user.png";
|
||||||
// helpers
|
// helpers
|
||||||
import { renderShortNumericDateFormat } from "helpers/date-time.helper";
|
import { renderShortNumericDateFormat } from "helpers/date-time.helper";
|
||||||
@ -17,7 +20,7 @@ type Props = {
|
|||||||
module: IModule;
|
module: IModule;
|
||||||
};
|
};
|
||||||
|
|
||||||
const SingleModuleCard: React.FC<Props> = ({ module }) => {
|
export const SingleModuleCard: React.FC<Props> = ({ module }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug } = router.query;
|
const { workspaceSlug } = router.query;
|
||||||
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
|
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
|
||||||
@ -40,7 +43,7 @@ const SingleModuleCard: React.FC<Props> = ({ module }) => {
|
|||||||
<TrashIcon className="h-4 w-4" />
|
<TrashIcon className="h-4 w-4" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<ConfirmModuleDeletion
|
<DeleteModuleModal
|
||||||
isOpen={
|
isOpen={
|
||||||
moduleDeleteModal &&
|
moduleDeleteModal &&
|
||||||
!!selectedModuleForDelete &&
|
!!selectedModuleForDelete &&
|
||||||
@ -147,5 +150,3 @@ const SingleModuleCard: React.FC<Props> = ({ module }) => {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SingleModuleCard;
|
|
||||||
@ -1,178 +0,0 @@
|
|||||||
import React, { useCallback } from "react";
|
|
||||||
// swr
|
|
||||||
import useSWR, { mutate } from "swr";
|
|
||||||
// services
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
import { DragDropContext, DropResult } from "react-beautiful-dnd";
|
|
||||||
import stateService from "services/state.service";
|
|
||||||
// hooks
|
|
||||||
import useIssuesProperties from "hooks/use-issue-properties";
|
|
||||||
import useIssueView from "hooks/use-issue-view";
|
|
||||||
// components
|
|
||||||
import SingleBoard from "components/project/cycles/board-view/single-board";
|
|
||||||
// ui
|
|
||||||
import { Spinner } from "components/ui";
|
|
||||||
// types
|
|
||||||
import { CycleIssueResponse, IIssue, IProjectMember, UserAuth } from "types";
|
|
||||||
import issuesService from "services/issues.service";
|
|
||||||
// constants
|
|
||||||
import { STATE_LIST, CYCLE_ISSUES } from "constants/fetch-keys";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
issues: IIssue[];
|
|
||||||
members: IProjectMember[] | undefined;
|
|
||||||
openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
|
|
||||||
openIssuesListModal: () => void;
|
|
||||||
handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
|
|
||||||
setPreloadedData: React.Dispatch<
|
|
||||||
React.SetStateAction<
|
|
||||||
| (Partial<IIssue> & {
|
|
||||||
actionType: "createIssue" | "edit" | "delete";
|
|
||||||
})
|
|
||||||
| null
|
|
||||||
>
|
|
||||||
>;
|
|
||||||
userAuth: UserAuth;
|
|
||||||
};
|
|
||||||
|
|
||||||
const CyclesBoardView: React.FC<Props> = ({
|
|
||||||
issues,
|
|
||||||
members,
|
|
||||||
openCreateIssueModal,
|
|
||||||
openIssuesListModal,
|
|
||||||
handleDeleteIssue,
|
|
||||||
setPreloadedData,
|
|
||||||
userAuth,
|
|
||||||
}) => {
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug, projectId, cycleId } = router.query;
|
|
||||||
|
|
||||||
const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
|
|
||||||
const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
|
|
||||||
|
|
||||||
const { data: states } = useSWR(
|
|
||||||
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleOnDragEnd = useCallback(
|
|
||||||
(result: DropResult) => {
|
|
||||||
if (!result.destination) return;
|
|
||||||
const { source, destination } = result;
|
|
||||||
|
|
||||||
if (source.droppableId !== destination.droppableId) {
|
|
||||||
const sourceGroup = source.droppableId; // source group id
|
|
||||||
const destinationGroup = destination.droppableId; // destination group id
|
|
||||||
if (!sourceGroup || !destinationGroup) return;
|
|
||||||
|
|
||||||
// removed/dragged item
|
|
||||||
const removedItem = groupedByIssues[source.droppableId][source.index];
|
|
||||||
|
|
||||||
if (selectedGroup === "priority") {
|
|
||||||
// update the removed item for mutation
|
|
||||||
removedItem.priority = destinationGroup;
|
|
||||||
|
|
||||||
// patch request
|
|
||||||
issuesService.patchIssue(workspaceSlug as string, projectId as string, removedItem.id, {
|
|
||||||
priority: destinationGroup,
|
|
||||||
});
|
|
||||||
} else if (selectedGroup === "state_detail.name") {
|
|
||||||
const destinationState = states?.find((s) => s.name === destinationGroup);
|
|
||||||
const destinationStateId = destinationState?.id;
|
|
||||||
|
|
||||||
// update the removed item for mutation
|
|
||||||
if (!destinationStateId || !destinationState) return;
|
|
||||||
removedItem.state = destinationStateId;
|
|
||||||
removedItem.state_detail = destinationState;
|
|
||||||
|
|
||||||
// patch request
|
|
||||||
issuesService.patchIssue(workspaceSlug as string, projectId as string, removedItem.id, {
|
|
||||||
state: destinationStateId,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!cycleId) return;
|
|
||||||
mutate<CycleIssueResponse[]>(
|
|
||||||
CYCLE_ISSUES(cycleId as string),
|
|
||||||
(prevData) => {
|
|
||||||
if (!prevData) return prevData;
|
|
||||||
const updatedIssues = prevData.map((issue) => {
|
|
||||||
if (issue.issue_detail.id === removedItem.id) {
|
|
||||||
return {
|
|
||||||
...issue,
|
|
||||||
issue_detail: removedItem,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return issue;
|
|
||||||
});
|
|
||||||
return [...updatedIssues];
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// remove item from the source group
|
|
||||||
groupedByIssues[source.droppableId].splice(source.index, 1);
|
|
||||||
// add item to the destination group
|
|
||||||
groupedByIssues[destination.droppableId].splice(destination.index, 0, removedItem);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[workspaceSlug, groupedByIssues, projectId, selectedGroup, states, cycleId]
|
|
||||||
);
|
|
||||||
|
|
||||||
if (issueView !== "kanban") return <></>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{groupedByIssues ? (
|
|
||||||
<div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
|
|
||||||
<DragDropContext onDragEnd={handleOnDragEnd}>
|
|
||||||
<div className="h-full w-full overflow-hidden">
|
|
||||||
<div className="h-full w-full">
|
|
||||||
<div className="flex h-full gap-x-4 overflow-x-auto overflow-y-hidden">
|
|
||||||
{Object.keys(groupedByIssues).map((singleGroup) => (
|
|
||||||
<SingleBoard
|
|
||||||
key={singleGroup}
|
|
||||||
selectedGroup={selectedGroup}
|
|
||||||
groupTitle={singleGroup}
|
|
||||||
createdBy={
|
|
||||||
selectedGroup === "created_by"
|
|
||||||
? members?.find((m) => m.member.id === singleGroup)?.member.first_name ??
|
|
||||||
"loading..."
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
groupedByIssues={groupedByIssues}
|
|
||||||
bgColor={
|
|
||||||
selectedGroup === "state_detail.name"
|
|
||||||
? states?.find((s) => s.name === singleGroup)?.color
|
|
||||||
: "#000000"
|
|
||||||
}
|
|
||||||
properties={properties}
|
|
||||||
openIssuesListModal={openIssuesListModal}
|
|
||||||
openCreateIssueModal={openCreateIssueModal}
|
|
||||||
handleDeleteIssue={handleDeleteIssue}
|
|
||||||
setPreloadedData={setPreloadedData}
|
|
||||||
stateId={
|
|
||||||
selectedGroup === "state_detail.name"
|
|
||||||
? states?.find((s) => s.name === singleGroup)?.id ?? null
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
userAuth={userAuth}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</DragDropContext>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
|
||||||
<Spinner />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CyclesBoardView;
|
|
||||||
@ -1,186 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import useSWR from "swr";
|
|
||||||
|
|
||||||
// react-beautiful-dnd
|
|
||||||
import { Draggable } from "react-beautiful-dnd";
|
|
||||||
// services
|
|
||||||
import workspaceService from "services/workspace.service";
|
|
||||||
// components
|
|
||||||
import SingleIssue from "components/common/board-view/single-issue";
|
|
||||||
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
|
||||||
import BoardHeader from "components/common/board-view/board-header";
|
|
||||||
// ui
|
|
||||||
import { CustomMenu } from "components/ui";
|
|
||||||
// icons
|
|
||||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
|
||||||
// types
|
|
||||||
import { IIssue, IWorkspaceMember, NestedKeyOf, Properties, UserAuth } from "types";
|
|
||||||
// fetch-keys
|
|
||||||
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
properties: Properties;
|
|
||||||
groupedByIssues: {
|
|
||||||
[key: string]: IIssue[];
|
|
||||||
};
|
|
||||||
selectedGroup: NestedKeyOf<IIssue> | null;
|
|
||||||
groupTitle: string;
|
|
||||||
createdBy: string | null;
|
|
||||||
bgColor?: string;
|
|
||||||
openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
|
|
||||||
openIssuesListModal: () => void;
|
|
||||||
handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
|
|
||||||
setPreloadedData: React.Dispatch<
|
|
||||||
React.SetStateAction<
|
|
||||||
| (Partial<IIssue> & {
|
|
||||||
actionType: "createIssue" | "edit" | "delete";
|
|
||||||
})
|
|
||||||
| null
|
|
||||||
>
|
|
||||||
>;
|
|
||||||
stateId: string | null;
|
|
||||||
userAuth: UserAuth;
|
|
||||||
};
|
|
||||||
|
|
||||||
const SingleModuleBoard: React.FC<Props> = ({
|
|
||||||
properties,
|
|
||||||
groupedByIssues,
|
|
||||||
selectedGroup,
|
|
||||||
groupTitle,
|
|
||||||
createdBy,
|
|
||||||
bgColor,
|
|
||||||
openCreateIssueModal,
|
|
||||||
openIssuesListModal,
|
|
||||||
handleDeleteIssue,
|
|
||||||
setPreloadedData,
|
|
||||||
stateId,
|
|
||||||
userAuth,
|
|
||||||
}) => {
|
|
||||||
// collapse/expand
|
|
||||||
const [isCollapsed, setIsCollapsed] = useState(true);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const { workspaceSlug, cycleId } = router.query;
|
|
||||||
|
|
||||||
if (selectedGroup === "priority")
|
|
||||||
groupTitle === "high"
|
|
||||||
? (bgColor = "#dc2626")
|
|
||||||
: groupTitle === "medium"
|
|
||||||
? (bgColor = "#f97316")
|
|
||||||
: groupTitle === "low"
|
|
||||||
? (bgColor = "#22c55e")
|
|
||||||
: (bgColor = "#ff0000");
|
|
||||||
|
|
||||||
const { data: people } = useSWR<IWorkspaceMember[]>(
|
|
||||||
workspaceSlug ? WORKSPACE_MEMBERS : null,
|
|
||||||
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`h-full flex-shrink-0 rounded ${!isCollapsed ? "" : "w-80 border bg-gray-50"}`}>
|
|
||||||
<div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3 overflow-y-auto"}`}>
|
|
||||||
<BoardHeader
|
|
||||||
addIssueToState={() => {
|
|
||||||
openCreateIssueModal();
|
|
||||||
if (selectedGroup !== null) {
|
|
||||||
setPreloadedData({
|
|
||||||
state: stateId !== null ? stateId : undefined,
|
|
||||||
[selectedGroup]: groupTitle,
|
|
||||||
actionType: "createIssue",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
bgColor={bgColor ?? ""}
|
|
||||||
createdBy={createdBy}
|
|
||||||
groupTitle={groupTitle}
|
|
||||||
groupedByIssues={groupedByIssues}
|
|
||||||
isCollapsed={isCollapsed}
|
|
||||||
setIsCollapsed={setIsCollapsed}
|
|
||||||
selectedGroup={selectedGroup}
|
|
||||||
/>
|
|
||||||
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
|
|
||||||
{(provided, snapshot) => (
|
|
||||||
<div
|
|
||||||
className={`mt-3 h-full space-y-3 overflow-y-auto px-3 pb-3 ${
|
|
||||||
snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
|
|
||||||
} ${!isCollapsed ? "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 tempPerson;
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Draggable key={childIssue.id} draggableId={childIssue.id} index={index}>
|
|
||||||
{(provided, snapshot) => (
|
|
||||||
<div
|
|
||||||
ref={provided.innerRef}
|
|
||||||
{...provided.draggableProps}
|
|
||||||
{...provided.dragHandleProps}
|
|
||||||
>
|
|
||||||
<SingleIssue
|
|
||||||
type="cycle"
|
|
||||||
typeId={cycleId as string}
|
|
||||||
issue={childIssue}
|
|
||||||
properties={properties}
|
|
||||||
snapshot={snapshot}
|
|
||||||
assignees={assignees}
|
|
||||||
people={people}
|
|
||||||
handleDeleteIssue={handleDeleteIssue}
|
|
||||||
userAuth={userAuth}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Draggable>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{provided.placeholder}
|
|
||||||
<CustomMenu
|
|
||||||
label={
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<PlusIcon className="h-3 w-3" />
|
|
||||||
Add issue
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
className="mt-1"
|
|
||||||
optionsPosition="left"
|
|
||||||
noBorder
|
|
||||||
>
|
|
||||||
<CustomMenu.MenuItem
|
|
||||||
onClick={() => {
|
|
||||||
openCreateIssueModal();
|
|
||||||
if (selectedGroup !== null) {
|
|
||||||
setPreloadedData({
|
|
||||||
state: stateId !== null ? stateId : undefined,
|
|
||||||
[selectedGroup]: groupTitle,
|
|
||||||
actionType: "createIssue",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Create new
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
<CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
|
|
||||||
Add an existing issue
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
</CustomMenu>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</StrictModeDroppable>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SingleModuleBoard;
|
|
||||||
@ -24,7 +24,7 @@ import { groupBy } from "helpers/array.helper";
|
|||||||
// types
|
// types
|
||||||
import { CycleIssueResponse, ICycle } from "types";
|
import { CycleIssueResponse, ICycle } from "types";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import { CYCLE_LIST } from "constants/fetch-keys";
|
import { CYCLE_DETAILS } from "constants/fetch-keys";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
cycle: ICycle | undefined;
|
cycle: ICycle | undefined;
|
||||||
@ -57,23 +57,19 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
|
|||||||
};
|
};
|
||||||
|
|
||||||
const submitChanges = (data: Partial<ICycle>) => {
|
const submitChanges = (data: Partial<ICycle>) => {
|
||||||
if (!workspaceSlug || !projectId || !module) return;
|
if (!workspaceSlug || !projectId || !cycleId) return;
|
||||||
|
|
||||||
mutate<ICycle[]>(
|
mutate<ICycle>(
|
||||||
projectId && CYCLE_LIST(projectId as string),
|
CYCLE_DETAILS(cycleId as string),
|
||||||
(prevData) =>
|
(prevData) => ({ ...(prevData as ICycle), ...data }),
|
||||||
(prevData ?? []).map((tempCycle) => {
|
|
||||||
if (tempCycle.id === cycleId) return { ...tempCycle, ...data };
|
|
||||||
return tempCycle;
|
|
||||||
}),
|
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
cyclesService
|
cyclesService
|
||||||
.patchCycle(workspaceSlug as string, projectId as string, cycle?.id ?? "", data)
|
.patchCycle(workspaceSlug as string, projectId as string, cycleId as string, data)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
console.log(res);
|
console.log(res);
|
||||||
mutate(CYCLE_LIST(projectId as string));
|
mutate(CYCLE_DETAILS(cycleId as string));
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
|
|||||||
@ -1,199 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import useSWR from "swr";
|
|
||||||
|
|
||||||
// headless ui
|
|
||||||
import { Disclosure, Transition } from "@headlessui/react";
|
|
||||||
// icons
|
|
||||||
import { PlusIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
|
|
||||||
// services
|
|
||||||
import workspaceService from "services/workspace.service";
|
|
||||||
import stateService from "services/state.service";
|
|
||||||
// hooks
|
|
||||||
import useIssuesProperties from "hooks/use-issue-properties";
|
|
||||||
import useIssueView from "hooks/use-issue-view";
|
|
||||||
// components
|
|
||||||
import SingleListIssue from "components/common/list-view/single-issue";
|
|
||||||
// ui
|
|
||||||
import { CustomMenu, Spinner } from "components/ui";
|
|
||||||
// helpers
|
|
||||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
|
||||||
// types
|
|
||||||
import { IIssue, IWorkspaceMember, UserAuth } from "types";
|
|
||||||
// fetch-keys
|
|
||||||
import { WORKSPACE_MEMBERS, STATE_LIST } from "constants/fetch-keys";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
issues: IIssue[];
|
|
||||||
openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
|
|
||||||
openIssuesListModal: () => void;
|
|
||||||
removeIssueFromCycle: (bridgeId: string) => void;
|
|
||||||
setPreloadedData: React.Dispatch<
|
|
||||||
React.SetStateAction<
|
|
||||||
| (Partial<IIssue> & {
|
|
||||||
actionType: "createIssue" | "edit" | "delete";
|
|
||||||
})
|
|
||||||
| null
|
|
||||||
>
|
|
||||||
>;
|
|
||||||
userAuth: UserAuth;
|
|
||||||
};
|
|
||||||
|
|
||||||
const CyclesListView: React.FC<Props> = ({
|
|
||||||
issues,
|
|
||||||
openCreateIssueModal,
|
|
||||||
openIssuesListModal,
|
|
||||||
removeIssueFromCycle,
|
|
||||||
setPreloadedData,
|
|
||||||
userAuth,
|
|
||||||
}) => {
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug, projectId, cycleId } = router.query;
|
|
||||||
|
|
||||||
const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
|
|
||||||
const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
|
|
||||||
|
|
||||||
const { data: people } = useSWR<IWorkspaceMember[]>(
|
|
||||||
workspaceSlug ? WORKSPACE_MEMBERS : null,
|
|
||||||
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
|
|
||||||
);
|
|
||||||
|
|
||||||
const { data: states } = useSWR(
|
|
||||||
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
if (issueView !== "list") return <></>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col space-y-5">
|
|
||||||
{Object.keys(groupedByIssues).map((singleGroup) => {
|
|
||||||
const stateId =
|
|
||||||
selectedGroup === "state_detail.name"
|
|
||||||
? states?.find((s) => s.name === singleGroup)?.id ?? null
|
|
||||||
: null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Disclosure key={singleGroup} as="div" defaultOpen>
|
|
||||||
{({ open }) => (
|
|
||||||
<div className="rounded-lg bg-white">
|
|
||||||
<div className="rounded-t-lg bg-gray-100 px-4 py-3">
|
|
||||||
<Disclosure.Button>
|
|
||||||
<div className="flex items-center gap-x-2">
|
|
||||||
<span>
|
|
||||||
<ChevronDownIcon
|
|
||||||
className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
{selectedGroup !== null ? (
|
|
||||||
<h2 className="font-medium capitalize leading-5">
|
|
||||||
{singleGroup === null || singleGroup === "null"
|
|
||||||
? selectedGroup === "priority" && "No priority"
|
|
||||||
: addSpaceIfCamelCase(singleGroup)}
|
|
||||||
</h2>
|
|
||||||
) : (
|
|
||||||
<h2 className="font-medium leading-5">All Issues</h2>
|
|
||||||
)}
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
{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) => {
|
|
||||||
const assignees = [
|
|
||||||
...(issue?.assignees_list ?? []),
|
|
||||||
...(issue?.assignees ?? []),
|
|
||||||
]?.map((assignee) => {
|
|
||||||
const tempPerson = people?.find(
|
|
||||||
(p) => p.member.id === assignee
|
|
||||||
)?.member;
|
|
||||||
|
|
||||||
return {
|
|
||||||
avatar: tempPerson?.avatar,
|
|
||||||
first_name: tempPerson?.first_name,
|
|
||||||
email: tempPerson?.email,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SingleListIssue
|
|
||||||
key={issue.id}
|
|
||||||
type="cycle"
|
|
||||||
typeId={cycleId as string}
|
|
||||||
issue={issue}
|
|
||||||
properties={properties}
|
|
||||||
editIssue={() => openCreateIssueModal(issue, "edit")}
|
|
||||||
removeIssue={() => removeIssueFromCycle(issue.bridge ?? "")}
|
|
||||||
userAuth={userAuth}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
<p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
|
||||||
<Spinner />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Disclosure.Panel>
|
|
||||||
</Transition>
|
|
||||||
<div className="p-3">
|
|
||||||
<CustomMenu
|
|
||||||
label={
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<PlusIcon className="h-3 w-3" />
|
|
||||||
Add issue
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
optionsPosition="left"
|
|
||||||
noBorder
|
|
||||||
>
|
|
||||||
<CustomMenu.MenuItem
|
|
||||||
onClick={() => {
|
|
||||||
openCreateIssueModal();
|
|
||||||
if (selectedGroup !== null) {
|
|
||||||
setPreloadedData({
|
|
||||||
state: stateId !== null ? stateId : undefined,
|
|
||||||
[selectedGroup]: singleGroup,
|
|
||||||
actionType: "createIssue",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Create new
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
<CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
|
|
||||||
Add an existing issue
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
</CustomMenu>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Disclosure>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CyclesListView;
|
|
||||||
@ -1,259 +0,0 @@
|
|||||||
import React, { useCallback, useState } from "react";
|
|
||||||
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import useSWR, { mutate } from "swr";
|
|
||||||
|
|
||||||
// react-beautiful-dnd
|
|
||||||
import { DragDropContext, DropResult } from "react-beautiful-dnd";
|
|
||||||
// hook
|
|
||||||
import useIssuesProperties from "hooks/use-issue-properties";
|
|
||||||
import useIssueView from "hooks/use-issue-view";
|
|
||||||
// services
|
|
||||||
import stateServices from "services/state.service";
|
|
||||||
import issuesServices from "services/issues.service";
|
|
||||||
import projectService from "services/project.service";
|
|
||||||
// components
|
|
||||||
import SingleBoard from "components/project/issues/BoardView/single-board";
|
|
||||||
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
|
||||||
import { CreateUpdateIssueModal } from "components/issues/modal";
|
|
||||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
|
||||||
// ui
|
|
||||||
import { Spinner } from "components/ui";
|
|
||||||
// types
|
|
||||||
import type { IState, IIssue, IssueResponse, UserAuth } from "types";
|
|
||||||
// fetch-keys
|
|
||||||
import { STATE_LIST, PROJECT_ISSUES_LIST, PROJECT_MEMBERS } from "constants/fetch-keys";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
issues: IIssue[];
|
|
||||||
handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
|
|
||||||
userAuth: UserAuth;
|
|
||||||
};
|
|
||||||
|
|
||||||
const BoardView: React.FC<Props> = ({ issues, handleDeleteIssue, userAuth }) => {
|
|
||||||
const [createIssueModal, setCreateIssueModal] = useState(false);
|
|
||||||
const [isIssueDeletionOpen, setIsIssueDeletionOpen] = useState(false);
|
|
||||||
const [issueDeletionData, setIssueDeletionData] = useState<IIssue | undefined>();
|
|
||||||
const [preloadedData, setPreloadedData] = useState<
|
|
||||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
|
||||||
>(undefined);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug, projectId } = router.query;
|
|
||||||
|
|
||||||
const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
|
|
||||||
|
|
||||||
const { data: states, mutate: mutateState } = useSWR<IState[]>(
|
|
||||||
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
|
||||||
workspaceSlug
|
|
||||||
? () => stateServices.getStates(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const { data: members } = useSWR(
|
|
||||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
|
|
||||||
: null,
|
|
||||||
{
|
|
||||||
onErrorRetry(err, _, __, revalidate, revalidateOpts) {
|
|
||||||
if (err?.status === 403) return;
|
|
||||||
setTimeout(() => revalidate(revalidateOpts), 5000);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
|
|
||||||
|
|
||||||
const handleOnDragEnd = useCallback(
|
|
||||||
(result: DropResult) => {
|
|
||||||
if (!result.destination || !workspaceSlug || !projectId) return;
|
|
||||||
|
|
||||||
const { source, destination, type } = result;
|
|
||||||
|
|
||||||
if (destination.droppableId === "trashBox") {
|
|
||||||
// setIssueDeletionData(draggedItem);
|
|
||||||
setIsIssueDeletionOpen(true);
|
|
||||||
} else {
|
|
||||||
if (type === "state") {
|
|
||||||
const newStates = Array.from(states ?? []);
|
|
||||||
const [reorderedState] = newStates.splice(source.index, 1);
|
|
||||||
newStates.splice(destination.index, 0, reorderedState);
|
|
||||||
const prevSequenceNumber = newStates[destination.index - 1]?.sequence;
|
|
||||||
const nextSequenceNumber = newStates[destination.index + 1]?.sequence;
|
|
||||||
|
|
||||||
const sequenceNumber =
|
|
||||||
prevSequenceNumber && nextSequenceNumber
|
|
||||||
? (prevSequenceNumber + nextSequenceNumber) / 2
|
|
||||||
: nextSequenceNumber
|
|
||||||
? nextSequenceNumber - 15000 / 2
|
|
||||||
: prevSequenceNumber
|
|
||||||
? prevSequenceNumber + 15000 / 2
|
|
||||||
: 15000;
|
|
||||||
|
|
||||||
newStates[destination.index].sequence = sequenceNumber;
|
|
||||||
|
|
||||||
mutateState(newStates, false);
|
|
||||||
|
|
||||||
stateServices
|
|
||||||
.patchState(
|
|
||||||
workspaceSlug as string,
|
|
||||||
projectId as string,
|
|
||||||
newStates[destination.index].id,
|
|
||||||
{
|
|
||||||
sequence: sequenceNumber,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.then((response) => {
|
|
||||||
console.log(response);
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.error(err);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
const draggedItem = groupedByIssues[source.droppableId][source.index];
|
|
||||||
if (source.droppableId !== destination.droppableId) {
|
|
||||||
const sourceGroup = source.droppableId; // source group id
|
|
||||||
const destinationGroup = destination.droppableId; // destination group id
|
|
||||||
|
|
||||||
if (!sourceGroup || !destinationGroup) return;
|
|
||||||
|
|
||||||
if (selectedGroup === "priority") {
|
|
||||||
// update the removed item for mutation
|
|
||||||
draggedItem.priority = destinationGroup;
|
|
||||||
|
|
||||||
// patch request
|
|
||||||
issuesServices.patchIssue(
|
|
||||||
workspaceSlug as string,
|
|
||||||
projectId as string,
|
|
||||||
draggedItem.id,
|
|
||||||
{
|
|
||||||
priority: destinationGroup,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
} else if (selectedGroup === "state_detail.name") {
|
|
||||||
const destinationState = states?.find((s) => s.name === destinationGroup);
|
|
||||||
const destinationStateId = destinationState?.id;
|
|
||||||
|
|
||||||
// update the removed item for mutation
|
|
||||||
if (!destinationStateId || !destinationState) return;
|
|
||||||
draggedItem.state = destinationStateId;
|
|
||||||
draggedItem.state_detail = destinationState;
|
|
||||||
|
|
||||||
mutate<IssueResponse>(
|
|
||||||
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
|
||||||
(prevData) => {
|
|
||||||
if (!prevData) return prevData;
|
|
||||||
|
|
||||||
const updatedIssues = prevData.results.map((issue) => {
|
|
||||||
if (issue.id === draggedItem.id)
|
|
||||||
return {
|
|
||||||
...draggedItem,
|
|
||||||
state_detail: destinationState,
|
|
||||||
state: destinationStateId,
|
|
||||||
};
|
|
||||||
|
|
||||||
return issue;
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
...prevData,
|
|
||||||
results: updatedIssues,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
// patch request
|
|
||||||
issuesServices
|
|
||||||
.patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
|
|
||||||
state: destinationStateId,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[workspaceSlug, mutateState, groupedByIssues, projectId, selectedGroup, states]
|
|
||||||
);
|
|
||||||
|
|
||||||
if (issueView !== "kanban") return <></>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ConfirmIssueDeletion
|
|
||||||
isOpen={isIssueDeletionOpen}
|
|
||||||
handleClose={() => setIsIssueDeletionOpen(false)}
|
|
||||||
data={issueDeletionData}
|
|
||||||
/>
|
|
||||||
<CreateUpdateIssueModal
|
|
||||||
isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
|
|
||||||
handleClose={() => setCreateIssueModal(false)}
|
|
||||||
prePopulateData={{
|
|
||||||
...preloadedData,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{groupedByIssues ? (
|
|
||||||
<div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
|
|
||||||
<DragDropContext onDragEnd={handleOnDragEnd}>
|
|
||||||
<div className="h-full w-full overflow-hidden">
|
|
||||||
<StrictModeDroppable droppableId="state" type="state" direction="horizontal">
|
|
||||||
{(provided) => (
|
|
||||||
<div
|
|
||||||
className="h-full w-full"
|
|
||||||
{...provided.droppableProps}
|
|
||||||
ref={provided.innerRef}
|
|
||||||
>
|
|
||||||
<div className="flex h-full gap-x-4 overflow-x-auto overflow-y-hidden">
|
|
||||||
{Object.keys(groupedByIssues).map((singleGroup, index) => (
|
|
||||||
<SingleBoard
|
|
||||||
key={singleGroup}
|
|
||||||
selectedGroup={selectedGroup}
|
|
||||||
groupTitle={singleGroup}
|
|
||||||
createdBy={
|
|
||||||
selectedGroup === "created_by"
|
|
||||||
? members?.find((m) => m.member.id === singleGroup)?.member
|
|
||||||
.first_name ?? "loading..."
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
groupedByIssues={groupedByIssues}
|
|
||||||
index={index}
|
|
||||||
setIsIssueOpen={setCreateIssueModal}
|
|
||||||
properties={properties}
|
|
||||||
setPreloadedData={setPreloadedData}
|
|
||||||
stateId={
|
|
||||||
selectedGroup === "state_detail.name"
|
|
||||||
? states?.find((s) => s.name === singleGroup)?.id ?? null
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
bgColor={
|
|
||||||
selectedGroup === "state_detail.name"
|
|
||||||
? states?.find((s) => s.name === singleGroup)?.color
|
|
||||||
: "#000000"
|
|
||||||
}
|
|
||||||
handleDeleteIssue={handleDeleteIssue}
|
|
||||||
userAuth={userAuth}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
{provided.placeholder}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</StrictModeDroppable>
|
|
||||||
</div>
|
|
||||||
</DragDropContext>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
|
||||||
<Spinner />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BoardView;
|
|
||||||
@ -1,174 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import useSWR from "swr";
|
|
||||||
|
|
||||||
// react-beautiful-dnd
|
|
||||||
import { Draggable } from "react-beautiful-dnd";
|
|
||||||
// components
|
|
||||||
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
|
||||||
import SingleIssue from "components/common/board-view/single-issue";
|
|
||||||
import BoardHeader from "components/common/board-view/board-header";
|
|
||||||
// icons
|
|
||||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
|
||||||
// services
|
|
||||||
import workspaceService from "services/workspace.service";
|
|
||||||
// types
|
|
||||||
import { IIssue, Properties, NestedKeyOf, IWorkspaceMember, UserAuth } from "types";
|
|
||||||
// fetch-keys
|
|
||||||
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
|
||||||
|
|
||||||
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>>;
|
|
||||||
userAuth: UserAuth;
|
|
||||||
};
|
|
||||||
|
|
||||||
const SingleBoard: React.FC<Props> = ({
|
|
||||||
selectedGroup,
|
|
||||||
groupTitle,
|
|
||||||
groupedByIssues,
|
|
||||||
index,
|
|
||||||
setIsIssueOpen,
|
|
||||||
properties,
|
|
||||||
setPreloadedData,
|
|
||||||
bgColor = "#0f2b16",
|
|
||||||
stateId,
|
|
||||||
createdBy,
|
|
||||||
handleDeleteIssue,
|
|
||||||
userAuth,
|
|
||||||
}) => {
|
|
||||||
// Collapse/Expand
|
|
||||||
const [isCollapsed, setIsCollapsed] = useState(true);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug } = router.query;
|
|
||||||
|
|
||||||
if (selectedGroup === "priority")
|
|
||||||
groupTitle === "high"
|
|
||||||
? (bgColor = "#dc2626")
|
|
||||||
: groupTitle === "medium"
|
|
||||||
? (bgColor = "#f97316")
|
|
||||||
: groupTitle === "low"
|
|
||||||
? (bgColor = "#22c55e")
|
|
||||||
: (bgColor = "#ff0000");
|
|
||||||
|
|
||||||
const { data: people } = useSWR<IWorkspaceMember[]>(
|
|
||||||
workspaceSlug ? WORKSPACE_MEMBERS : null,
|
|
||||||
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
|
|
||||||
);
|
|
||||||
|
|
||||||
const addIssueToState = () => {
|
|
||||||
setIsIssueOpen(true);
|
|
||||||
if (selectedGroup)
|
|
||||||
setPreloadedData({
|
|
||||||
state: stateId !== null ? stateId : undefined,
|
|
||||||
[selectedGroup]: groupTitle,
|
|
||||||
actionType: "createIssue",
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Draggable draggableId={groupTitle} index={index}>
|
|
||||||
{(provided, snapshot) => (
|
|
||||||
<div
|
|
||||||
className={`h-full flex-shrink-0 rounded ${
|
|
||||||
snapshot.isDragging ? "border-theme shadow-lg" : ""
|
|
||||||
} ${!isCollapsed ? "" : "w-80 border bg-gray-50"}`}
|
|
||||||
ref={provided.innerRef}
|
|
||||||
{...provided.draggableProps}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3 overflow-y-auto"}`}
|
|
||||||
>
|
|
||||||
<BoardHeader
|
|
||||||
addIssueToState={addIssueToState}
|
|
||||||
bgColor={bgColor}
|
|
||||||
createdBy={createdBy}
|
|
||||||
groupTitle={groupTitle}
|
|
||||||
groupedByIssues={groupedByIssues}
|
|
||||||
isCollapsed={isCollapsed}
|
|
||||||
setIsCollapsed={setIsCollapsed}
|
|
||||||
selectedGroup={selectedGroup}
|
|
||||||
provided={provided}
|
|
||||||
/>
|
|
||||||
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
|
|
||||||
{(provided, snapshot) => (
|
|
||||||
<div
|
|
||||||
className={`mt-3 h-full space-y-3 overflow-y-auto px-3 pb-3 ${
|
|
||||||
snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
|
|
||||||
} ${!isCollapsed ? "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 tempPerson;
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Draggable key={childIssue.id} draggableId={childIssue.id} index={index}>
|
|
||||||
{(provided, snapshot) => (
|
|
||||||
<div
|
|
||||||
ref={provided.innerRef}
|
|
||||||
{...provided.draggableProps}
|
|
||||||
{...provided.dragHandleProps}
|
|
||||||
>
|
|
||||||
<SingleIssue
|
|
||||||
issue={childIssue}
|
|
||||||
properties={properties}
|
|
||||||
snapshot={snapshot}
|
|
||||||
people={people}
|
|
||||||
assignees={assignees}
|
|
||||||
handleDeleteIssue={handleDeleteIssue}
|
|
||||||
userAuth={userAuth}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Draggable>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{provided.placeholder}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex items-center rounded p-2 text-xs font-medium outline-none duration-300 hover:bg-gray-100"
|
|
||||||
onClick={addIssueToState}
|
|
||||||
>
|
|
||||||
<PlusIcon className="mr-1 h-3 w-3" />
|
|
||||||
Create
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</StrictModeDroppable>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Draggable>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SingleBoard;
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import useSWR from "swr";
|
|
||||||
|
|
||||||
import { Control, Controller } from "react-hook-form";
|
|
||||||
// constants
|
|
||||||
import { RectangleGroupIcon } from "@heroicons/react/24/outline";
|
|
||||||
// services
|
|
||||||
import modulesService from "services/modules.service";
|
|
||||||
// ui
|
|
||||||
import { Spinner, CustomSelect } from "components/ui";
|
|
||||||
// icons
|
|
||||||
// types
|
|
||||||
import { IIssue, IModule } from "types";
|
|
||||||
import { MODULE_LIST } from "constants/fetch-keys";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
control: Control<IIssue, any>;
|
|
||||||
handleModuleChange: (module: IModule) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const SelectModule: React.FC<Props> = ({ control, handleModuleChange }) => {
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug, projectId } = router.query;
|
|
||||||
|
|
||||||
const { data: modules } = useSWR(
|
|
||||||
workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => modulesService.getModules(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-wrap items-center py-2">
|
|
||||||
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
|
|
||||||
<RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />
|
|
||||||
<p>Module</p>
|
|
||||||
</div>
|
|
||||||
<div className="sm:basis-1/2">
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="issue_module"
|
|
||||||
render={({ field: { value } }) => (
|
|
||||||
<CustomSelect
|
|
||||||
label={
|
|
||||||
<span
|
|
||||||
className={`hidden truncate text-left sm:block ${value ? "" : "text-gray-900"}`}
|
|
||||||
>
|
|
||||||
{value ? modules?.find((m) => m.id === value?.module_detail.id)?.name : "None"}
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
value={value}
|
|
||||||
onChange={(value: any) => {
|
|
||||||
handleModuleChange(modules?.find((m) => m.id === value) as any);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{modules ? (
|
|
||||||
modules.length > 0 ? (
|
|
||||||
modules.map((option) => (
|
|
||||||
<CustomSelect.Option key={option.id} value={option.id}>
|
|
||||||
{option.name}
|
|
||||||
</CustomSelect.Option>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<div className="text-center">No cycles found</div>
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<Spinner />
|
|
||||||
)}
|
|
||||||
</CustomSelect>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SelectModule;
|
|
||||||
@ -1,184 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import useSWR from "swr";
|
|
||||||
|
|
||||||
import { Disclosure, Transition } from "@headlessui/react";
|
|
||||||
// hooks
|
|
||||||
import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
|
|
||||||
import useIssuesProperties from "hooks/use-issue-properties";
|
|
||||||
import useIssueView from "hooks/use-issue-view";
|
|
||||||
// services
|
|
||||||
import stateService from "services/state.service";
|
|
||||||
import workspaceService from "services/workspace.service";
|
|
||||||
// ui
|
|
||||||
import { Spinner } from "components/ui";
|
|
||||||
// components
|
|
||||||
import { CreateUpdateIssueModal } from "components/issues/modal";
|
|
||||||
import SingleListIssue from "components/common/list-view/single-issue";
|
|
||||||
// helpers
|
|
||||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
|
||||||
// types
|
|
||||||
import { IIssue, IWorkspaceMember, UserAuth } from "types";
|
|
||||||
// fetch-keys
|
|
||||||
import { STATE_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
|
||||||
|
|
||||||
// types
|
|
||||||
type Props = {
|
|
||||||
issues: IIssue[];
|
|
||||||
handleEditIssue: (issue: IIssue) => void;
|
|
||||||
userAuth: UserAuth;
|
|
||||||
};
|
|
||||||
|
|
||||||
const ListView: React.FC<Props> = ({ issues, handleEditIssue, userAuth }) => {
|
|
||||||
const [isCreateIssuesModalOpen, setIsCreateIssuesModalOpen] = useState(false);
|
|
||||||
const [preloadedData, setPreloadedData] = useState<
|
|
||||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
|
||||||
>(undefined);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug, projectId } = router.query;
|
|
||||||
|
|
||||||
const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
|
|
||||||
|
|
||||||
const { data: states } = useSWR(
|
|
||||||
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const { data: people } = useSWR<IWorkspaceMember[]>(
|
|
||||||
workspaceSlug ? WORKSPACE_MEMBERS : null,
|
|
||||||
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
|
|
||||||
);
|
|
||||||
|
|
||||||
const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
|
|
||||||
|
|
||||||
if (issueView !== "list") return <></>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CreateUpdateIssueModal
|
|
||||||
isOpen={isCreateIssuesModalOpen && preloadedData?.actionType === "createIssue"}
|
|
||||||
handleClose={() => setIsCreateIssuesModalOpen(false)}
|
|
||||||
prePopulateData={{
|
|
||||||
...preloadedData,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div className="flex flex-col space-y-5">
|
|
||||||
{Object.keys(groupedByIssues).map((singleGroup) => (
|
|
||||||
<Disclosure key={singleGroup} as="div" defaultOpen>
|
|
||||||
{({ open }) => (
|
|
||||||
<div className="rounded-lg bg-white">
|
|
||||||
<div className="rounded-t-lg bg-gray-100 px-4 py-3">
|
|
||||||
<Disclosure.Button>
|
|
||||||
<div className="flex items-center gap-x-2">
|
|
||||||
<span>
|
|
||||||
<ChevronDownIcon
|
|
||||||
className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
{selectedGroup !== null ? (
|
|
||||||
<h2 className="font-medium capitalize leading-5">
|
|
||||||
{singleGroup === null || singleGroup === "null"
|
|
||||||
? selectedGroup === "priority" && "No priority"
|
|
||||||
: selectedGroup === "created_by"
|
|
||||||
? people?.find((p) => p.member.id === singleGroup)?.member
|
|
||||||
?.first_name ?? "Loading..."
|
|
||||||
: addSpaceIfCamelCase(singleGroup)}
|
|
||||||
</h2>
|
|
||||||
) : (
|
|
||||||
<h2 className="font-medium leading-5">All Issues</h2>
|
|
||||||
)}
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
{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 tempPerson;
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SingleListIssue
|
|
||||||
key={issue.id}
|
|
||||||
type="issue"
|
|
||||||
issue={issue}
|
|
||||||
properties={properties}
|
|
||||||
editIssue={() => handleEditIssue(issue)}
|
|
||||||
userAuth={userAuth}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
<p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
|
||||||
<Spinner />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Disclosure.Panel>
|
|
||||||
</Transition>
|
|
||||||
<div className="p-3">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
|
|
||||||
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",
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
setPreloadedData({
|
|
||||||
actionType: "createIssue",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<PlusIcon className="h-3 w-3" />
|
|
||||||
Add issue
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Disclosure>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ListView;
|
|
||||||
@ -1,101 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import useSWR from "swr";
|
|
||||||
|
|
||||||
// headless ui
|
|
||||||
import { Listbox, Transition } from "@headlessui/react";
|
|
||||||
// services
|
|
||||||
import stateServices from "services/state.service";
|
|
||||||
// helpers
|
|
||||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
|
||||||
// types
|
|
||||||
import { IIssue, IState } from "types";
|
|
||||||
// fetch-keys
|
|
||||||
import { STATE_LIST } from "constants/fetch-keys";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
issue: IIssue;
|
|
||||||
updateIssues: (
|
|
||||||
workspaceSlug: string,
|
|
||||||
projectId: string,
|
|
||||||
issueId: string,
|
|
||||||
issue: Partial<IIssue>
|
|
||||||
) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const ChangeStateDropdown: React.FC<Props> = ({ issue, updateIssues }) => {
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug } = router.query;
|
|
||||||
|
|
||||||
const { data: states } = useSWR<IState[]>(
|
|
||||||
workspaceSlug ? STATE_LIST(issue.project) : null,
|
|
||||||
workspaceSlug ? () => stateServices.getStates(workspaceSlug as string, issue.project) : null
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Listbox
|
|
||||||
as="div"
|
|
||||||
value={issue.state}
|
|
||||||
onChange={(data: string) => {
|
|
||||||
if (!workspaceSlug) return;
|
|
||||||
updateIssues(workspaceSlug as string, issue.project, issue.id, {
|
|
||||||
state: data,
|
|
||||||
state_detail: states?.find((state) => state.id === data),
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
className="flex-shrink-0"
|
|
||||||
>
|
|
||||||
{({ open }) => (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<Listbox.Button
|
|
||||||
className="inline-flex items-center whitespace-nowrap rounded-full border bg-gray-50 px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100"
|
|
||||||
style={{
|
|
||||||
border: `2px solid ${issue.state_detail.color}`,
|
|
||||||
backgroundColor: `${issue.state_detail.color}20`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`hidden w-16 capitalize sm:block ${
|
|
||||||
issue.state ? "" : "text-gray-900"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{addSpaceIfCamelCase(issue.state_detail.name)}
|
|
||||||
</span>
|
|
||||||
</Listbox.Button>
|
|
||||||
|
|
||||||
<Transition
|
|
||||||
show={open}
|
|
||||||
as={React.Fragment}
|
|
||||||
leave="transition ease-in duration-100"
|
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0"
|
|
||||||
>
|
|
||||||
<Listbox.Options className="fixed z-10 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
|
||||||
{states?.map((state) => (
|
|
||||||
<Listbox.Option
|
|
||||||
key={state.id}
|
|
||||||
className={({ active }) =>
|
|
||||||
`cursor-pointer select-none px-3 py-2 ${
|
|
||||||
active ? "bg-indigo-50" : "bg-white"
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
value={state.id}
|
|
||||||
>
|
|
||||||
{addSpaceIfCamelCase(state.name)}
|
|
||||||
</Listbox.Option>
|
|
||||||
))}
|
|
||||||
</Listbox.Options>
|
|
||||||
</Transition>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Listbox>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ChangeStateDropdown;
|
|
||||||
@ -1,181 +0,0 @@
|
|||||||
import React, { useCallback } from "react";
|
|
||||||
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import useSWR, { mutate } from "swr";
|
|
||||||
|
|
||||||
// react-beautiful-dnd
|
|
||||||
import { DragDropContext, DropResult } from "react-beautiful-dnd";
|
|
||||||
// services
|
|
||||||
import stateService from "services/state.service";
|
|
||||||
import issuesService from "services/issues.service";
|
|
||||||
// hooks
|
|
||||||
import useIssuesProperties from "hooks/use-issue-properties";
|
|
||||||
import useIssueView from "hooks/use-issue-view";
|
|
||||||
// components
|
|
||||||
import SingleBoard from "components/project/modules/board-view/single-board";
|
|
||||||
// ui
|
|
||||||
import { Spinner } from "components/ui";
|
|
||||||
// types
|
|
||||||
import { IIssue, IProjectMember, ModuleIssueResponse, UserAuth } from "types";
|
|
||||||
// constants
|
|
||||||
import { STATE_LIST, MODULE_ISSUES } from "constants/fetch-keys";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
issues: IIssue[];
|
|
||||||
members: IProjectMember[] | undefined;
|
|
||||||
openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
|
|
||||||
openIssuesListModal: () => void;
|
|
||||||
handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
|
|
||||||
setPreloadedData: React.Dispatch<
|
|
||||||
React.SetStateAction<
|
|
||||||
| (Partial<IIssue> & {
|
|
||||||
actionType: "createIssue" | "edit" | "delete";
|
|
||||||
})
|
|
||||||
| null
|
|
||||||
>
|
|
||||||
>;
|
|
||||||
userAuth: UserAuth;
|
|
||||||
};
|
|
||||||
|
|
||||||
const ModulesBoardView: React.FC<Props> = ({
|
|
||||||
issues,
|
|
||||||
members,
|
|
||||||
openCreateIssueModal,
|
|
||||||
openIssuesListModal,
|
|
||||||
handleDeleteIssue,
|
|
||||||
setPreloadedData,
|
|
||||||
userAuth,
|
|
||||||
}) => {
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug, projectId, moduleId } = router.query;
|
|
||||||
|
|
||||||
const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
|
|
||||||
const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
|
|
||||||
|
|
||||||
const { data: states } = useSWR(
|
|
||||||
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleOnDragEnd = useCallback(
|
|
||||||
(result: DropResult) => {
|
|
||||||
if (!result.destination) return;
|
|
||||||
const { source, destination } = result;
|
|
||||||
|
|
||||||
if (source.droppableId !== destination.droppableId) {
|
|
||||||
const sourceGroup = source.droppableId; // source group id
|
|
||||||
const destinationGroup = destination.droppableId; // destination group id
|
|
||||||
if (!sourceGroup || !destinationGroup) return;
|
|
||||||
|
|
||||||
// removed/dragged item
|
|
||||||
const removedItem = groupedByIssues[source.droppableId][source.index];
|
|
||||||
|
|
||||||
if (selectedGroup === "priority") {
|
|
||||||
// update the removed item for mutation
|
|
||||||
removedItem.priority = destinationGroup;
|
|
||||||
|
|
||||||
// patch request
|
|
||||||
issuesService.patchIssue(workspaceSlug as string, projectId as string, removedItem.id, {
|
|
||||||
priority: destinationGroup,
|
|
||||||
});
|
|
||||||
} else if (selectedGroup === "state_detail.name") {
|
|
||||||
const destinationState = states?.find((s) => s.name === destinationGroup);
|
|
||||||
const destinationStateId = destinationState?.id;
|
|
||||||
|
|
||||||
// update the removed item for mutation
|
|
||||||
if (!destinationStateId || !destinationState) return;
|
|
||||||
removedItem.state = destinationStateId;
|
|
||||||
removedItem.state_detail = destinationState;
|
|
||||||
|
|
||||||
// patch request
|
|
||||||
issuesService.patchIssue(workspaceSlug as string, projectId as string, removedItem.id, {
|
|
||||||
state: destinationStateId,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!moduleId) return;
|
|
||||||
mutate<ModuleIssueResponse[]>(
|
|
||||||
MODULE_ISSUES(moduleId as string),
|
|
||||||
(prevData) => {
|
|
||||||
if (!prevData) return prevData;
|
|
||||||
const updatedIssues = prevData.map((issue) => {
|
|
||||||
if (issue.issue_detail.id === removedItem.id) {
|
|
||||||
return {
|
|
||||||
...issue,
|
|
||||||
issue_detail: removedItem,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return issue;
|
|
||||||
});
|
|
||||||
return [...updatedIssues];
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// remove item from the source group
|
|
||||||
groupedByIssues[source.droppableId].splice(source.index, 1);
|
|
||||||
// add item to the destination group
|
|
||||||
groupedByIssues[destination.droppableId].splice(destination.index, 0, removedItem);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[workspaceSlug, groupedByIssues, projectId, selectedGroup, states, moduleId]
|
|
||||||
);
|
|
||||||
|
|
||||||
if (issueView !== "kanban") return <></>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{groupedByIssues ? (
|
|
||||||
<div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
|
|
||||||
<DragDropContext onDragEnd={handleOnDragEnd}>
|
|
||||||
<div className="h-full w-full overflow-hidden">
|
|
||||||
<div className="h-full w-full">
|
|
||||||
<div className="flex h-full gap-x-4 overflow-x-auto overflow-y-hidden">
|
|
||||||
{Object.keys(groupedByIssues).map((singleGroup) => (
|
|
||||||
<SingleBoard
|
|
||||||
key={singleGroup}
|
|
||||||
selectedGroup={selectedGroup}
|
|
||||||
groupTitle={singleGroup}
|
|
||||||
createdBy={
|
|
||||||
selectedGroup === "created_by"
|
|
||||||
? members?.find((m) => m.member.id === singleGroup)?.member.first_name ??
|
|
||||||
"loading..."
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
groupedByIssues={groupedByIssues}
|
|
||||||
bgColor={
|
|
||||||
selectedGroup === "state_detail.name"
|
|
||||||
? states?.find((s) => s.name === singleGroup)?.color
|
|
||||||
: "#000000"
|
|
||||||
}
|
|
||||||
properties={properties}
|
|
||||||
openIssuesListModal={openIssuesListModal}
|
|
||||||
openCreateIssueModal={openCreateIssueModal}
|
|
||||||
handleDeleteIssue={handleDeleteIssue}
|
|
||||||
setPreloadedData={setPreloadedData}
|
|
||||||
stateId={
|
|
||||||
selectedGroup === "state_detail.name"
|
|
||||||
? states?.find((s) => s.name === singleGroup)?.id ?? null
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
userAuth={userAuth}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</DragDropContext>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
|
||||||
<Spinner />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ModulesBoardView;
|
|
||||||
@ -1,185 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import useSWR from "swr";
|
|
||||||
|
|
||||||
// react-beautiful-dnd
|
|
||||||
import { Draggable } from "react-beautiful-dnd";
|
|
||||||
// services
|
|
||||||
import workspaceService from "services/workspace.service";
|
|
||||||
// components
|
|
||||||
import SingleIssue from "components/common/board-view/single-issue";
|
|
||||||
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
|
||||||
import BoardHeader from "components/common/board-view/board-header";
|
|
||||||
// ui
|
|
||||||
import { CustomMenu } from "components/ui";
|
|
||||||
// icons
|
|
||||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
|
||||||
// types
|
|
||||||
import { IIssue, IWorkspaceMember, NestedKeyOf, Properties, UserAuth } from "types";
|
|
||||||
// fetch-keys
|
|
||||||
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
properties: Properties;
|
|
||||||
groupedByIssues: {
|
|
||||||
[key: string]: IIssue[];
|
|
||||||
};
|
|
||||||
selectedGroup: NestedKeyOf<IIssue> | null;
|
|
||||||
groupTitle: string;
|
|
||||||
createdBy: string | null;
|
|
||||||
bgColor?: string;
|
|
||||||
openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
|
|
||||||
openIssuesListModal: () => void;
|
|
||||||
handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
|
|
||||||
setPreloadedData: React.Dispatch<
|
|
||||||
React.SetStateAction<
|
|
||||||
| (Partial<IIssue> & {
|
|
||||||
actionType: "createIssue" | "edit" | "delete";
|
|
||||||
})
|
|
||||||
| null
|
|
||||||
>
|
|
||||||
>;
|
|
||||||
stateId: string | null;
|
|
||||||
userAuth: UserAuth;
|
|
||||||
};
|
|
||||||
|
|
||||||
const SingleModuleBoard: React.FC<Props> = ({
|
|
||||||
properties,
|
|
||||||
groupedByIssues,
|
|
||||||
selectedGroup,
|
|
||||||
groupTitle,
|
|
||||||
createdBy,
|
|
||||||
bgColor,
|
|
||||||
openCreateIssueModal,
|
|
||||||
openIssuesListModal,
|
|
||||||
handleDeleteIssue,
|
|
||||||
setPreloadedData,
|
|
||||||
stateId,
|
|
||||||
userAuth,
|
|
||||||
}) => {
|
|
||||||
// Collapse/Expand
|
|
||||||
const [isCollapsed, setIsCollapsed] = useState(true);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug, moduleId } = router.query;
|
|
||||||
|
|
||||||
if (selectedGroup === "priority")
|
|
||||||
groupTitle === "high"
|
|
||||||
? (bgColor = "#dc2626")
|
|
||||||
: groupTitle === "medium"
|
|
||||||
? (bgColor = "#f97316")
|
|
||||||
: groupTitle === "low"
|
|
||||||
? (bgColor = "#22c55e")
|
|
||||||
: (bgColor = "#ff0000");
|
|
||||||
|
|
||||||
const { data: people } = useSWR<IWorkspaceMember[]>(
|
|
||||||
workspaceSlug ? WORKSPACE_MEMBERS : null,
|
|
||||||
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`h-full flex-shrink-0 rounded ${!isCollapsed ? "" : "w-80 border bg-gray-50"}`}>
|
|
||||||
<div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3 overflow-y-auto"}`}>
|
|
||||||
<BoardHeader
|
|
||||||
addIssueToState={() => {
|
|
||||||
openCreateIssueModal();
|
|
||||||
if (selectedGroup !== null) {
|
|
||||||
setPreloadedData({
|
|
||||||
state: stateId !== null ? stateId : undefined,
|
|
||||||
[selectedGroup]: groupTitle,
|
|
||||||
actionType: "createIssue",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
bgColor={bgColor ?? ""}
|
|
||||||
createdBy={createdBy}
|
|
||||||
groupTitle={groupTitle}
|
|
||||||
groupedByIssues={groupedByIssues}
|
|
||||||
isCollapsed={isCollapsed}
|
|
||||||
setIsCollapsed={setIsCollapsed}
|
|
||||||
selectedGroup={selectedGroup}
|
|
||||||
/>
|
|
||||||
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
|
|
||||||
{(provided, snapshot) => (
|
|
||||||
<div
|
|
||||||
className={`mt-3 h-full space-y-3 overflow-y-auto px-3 pb-3 ${
|
|
||||||
snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
|
|
||||||
} ${!isCollapsed ? "hidden" : "block"}`}
|
|
||||||
{...provided.droppableProps}
|
|
||||||
ref={provided.innerRef}
|
|
||||||
>
|
|
||||||
{groupedByIssues[groupTitle].map((issue, index: number) => {
|
|
||||||
const assignees = [
|
|
||||||
...(issue?.assignees_list ?? []),
|
|
||||||
...(issue?.assignees ?? []),
|
|
||||||
]?.map((assignee) => {
|
|
||||||
const tempPerson = people?.find((p) => p.member.id === assignee)?.member;
|
|
||||||
|
|
||||||
return tempPerson;
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Draggable key={issue.id} draggableId={issue.id} index={index}>
|
|
||||||
{(provided, snapshot) => (
|
|
||||||
<div
|
|
||||||
ref={provided.innerRef}
|
|
||||||
{...provided.draggableProps}
|
|
||||||
{...provided.dragHandleProps}
|
|
||||||
>
|
|
||||||
<SingleIssue
|
|
||||||
type="module"
|
|
||||||
typeId={moduleId as string}
|
|
||||||
issue={issue}
|
|
||||||
properties={properties}
|
|
||||||
snapshot={snapshot}
|
|
||||||
assignees={assignees}
|
|
||||||
people={people}
|
|
||||||
handleDeleteIssue={handleDeleteIssue}
|
|
||||||
userAuth={userAuth}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Draggable>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{provided.placeholder}
|
|
||||||
<CustomMenu
|
|
||||||
label={
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<PlusIcon className="h-3 w-3" />
|
|
||||||
Add issue
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
className="mt-1"
|
|
||||||
optionsPosition="left"
|
|
||||||
noBorder
|
|
||||||
>
|
|
||||||
<CustomMenu.MenuItem
|
|
||||||
onClick={() => {
|
|
||||||
openCreateIssueModal();
|
|
||||||
if (selectedGroup !== null) {
|
|
||||||
setPreloadedData({
|
|
||||||
state: stateId !== null ? stateId : undefined,
|
|
||||||
[selectedGroup]: groupTitle,
|
|
||||||
actionType: "createIssue",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Create new
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
<CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
|
|
||||||
Add an existing issue
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
</CustomMenu>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</StrictModeDroppable>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SingleModuleBoard;
|
|
||||||
@ -1,273 +0,0 @@
|
|||||||
import React, { useEffect } from "react";
|
|
||||||
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
import { mutate } from "swr";
|
|
||||||
|
|
||||||
// react-hook-form
|
|
||||||
import { Controller, useForm } from "react-hook-form";
|
|
||||||
// headless ui
|
|
||||||
import { Dialog, Transition } from "@headlessui/react";
|
|
||||||
// components
|
|
||||||
import SelectLead from "components/project/modules/create-update-module-modal/select-lead";
|
|
||||||
import SelectMembers from "components/project/modules/create-update-module-modal/select-members";
|
|
||||||
import SelectStatus from "components/project/modules/create-update-module-modal/select-status";
|
|
||||||
// ui
|
|
||||||
import { Button, CustomDatePicker, Input, TextArea } from "components/ui";
|
|
||||||
// services
|
|
||||||
import modulesService from "services/modules.service";
|
|
||||||
// hooks
|
|
||||||
import useToast from "hooks/use-toast";
|
|
||||||
// helpers
|
|
||||||
import { renderDateFormat } from "helpers/date-time.helper";
|
|
||||||
// types
|
|
||||||
import type { IModule } from "types";
|
|
||||||
// fetch-keys
|
|
||||||
import { MODULE_LIST } from "constants/fetch-keys";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isOpen: boolean;
|
|
||||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
||||||
projectId: string;
|
|
||||||
data?: IModule;
|
|
||||||
};
|
|
||||||
|
|
||||||
const defaultValues: Partial<IModule> = {
|
|
||||||
name: "",
|
|
||||||
description: "",
|
|
||||||
status: null,
|
|
||||||
lead: null,
|
|
||||||
members_list: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, projectId }) => {
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug } = router.query;
|
|
||||||
|
|
||||||
const { setToastAlert } = useToast();
|
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
formState: { errors, isSubmitting },
|
|
||||||
handleSubmit,
|
|
||||||
control,
|
|
||||||
reset,
|
|
||||||
setError,
|
|
||||||
} = useForm<IModule>({
|
|
||||||
defaultValues,
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = async (formData: IModule) => {
|
|
||||||
if (!workspaceSlug) return;
|
|
||||||
const payload = {
|
|
||||||
...formData,
|
|
||||||
start_date: formData.start_date ? renderDateFormat(formData.start_date) : null,
|
|
||||||
target_date: formData.target_date ? renderDateFormat(formData.target_date) : null,
|
|
||||||
};
|
|
||||||
if (!data) {
|
|
||||||
await modulesService
|
|
||||||
.createModule(workspaceSlug as string, projectId, payload)
|
|
||||||
.then(() => {
|
|
||||||
mutate(MODULE_LIST(projectId));
|
|
||||||
handleClose();
|
|
||||||
|
|
||||||
setToastAlert({
|
|
||||||
title: "Success",
|
|
||||||
type: "success",
|
|
||||||
message: "Module created successfully",
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
Object.keys(err).map((key) => {
|
|
||||||
setError(key as keyof typeof defaultValues, {
|
|
||||||
message: err[key].join(", "),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
await modulesService
|
|
||||||
.updateModule(workspaceSlug as string, projectId, data.id, payload)
|
|
||||||
.then((res) => {
|
|
||||||
mutate<IModule[]>(
|
|
||||||
MODULE_LIST(projectId),
|
|
||||||
(prevData) => {
|
|
||||||
const newData = prevData?.map((item) => {
|
|
||||||
if (item.id === res.id) {
|
|
||||||
return res;
|
|
||||||
}
|
|
||||||
return item;
|
|
||||||
});
|
|
||||||
return newData;
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
handleClose();
|
|
||||||
|
|
||||||
setToastAlert({
|
|
||||||
title: "Success",
|
|
||||||
type: "success",
|
|
||||||
message: "Module updated successfully",
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
Object.keys(err).map((key) => {
|
|
||||||
setError(key as keyof typeof defaultValues, {
|
|
||||||
message: err[key].join(", "),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setIsOpen(false);
|
|
||||||
reset(defaultValues);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (data) {
|
|
||||||
setIsOpen(true);
|
|
||||||
reset(data);
|
|
||||||
} else {
|
|
||||||
reset(defaultValues);
|
|
||||||
}
|
|
||||||
}, [data, setIsOpen, reset]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
|
||||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
|
||||||
<Transition.Child
|
|
||||||
as={React.Fragment}
|
|
||||||
enter="ease-out duration-300"
|
|
||||||
enterFrom="opacity-0"
|
|
||||||
enterTo="opacity-100"
|
|
||||||
leave="ease-in duration-200"
|
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0"
|
|
||||||
>
|
|
||||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
|
||||||
</Transition.Child>
|
|
||||||
|
|
||||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
|
||||||
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
|
|
||||||
<Transition.Child
|
|
||||||
as={React.Fragment}
|
|
||||||
enter="ease-out duration-300"
|
|
||||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
leave="ease-in duration-200"
|
|
||||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
|
||||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
||||||
>
|
|
||||||
<Dialog.Panel className="relative transform rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<div className="space-y-5">
|
|
||||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
|
|
||||||
{data ? "Update" : "Create"} Module
|
|
||||||
</Dialog.Title>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div>
|
|
||||||
<Input
|
|
||||||
id="name"
|
|
||||||
label="Name"
|
|
||||||
name="name"
|
|
||||||
type="name"
|
|
||||||
placeholder="Enter name"
|
|
||||||
autoComplete="off"
|
|
||||||
error={errors.name}
|
|
||||||
register={register}
|
|
||||||
validations={{
|
|
||||||
required: "Name is required",
|
|
||||||
maxLength: {
|
|
||||||
value: 255,
|
|
||||||
message: "Name should be less than 255 characters",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<TextArea
|
|
||||||
id="description"
|
|
||||||
name="description"
|
|
||||||
label="Description"
|
|
||||||
placeholder="Enter description"
|
|
||||||
error={errors.description}
|
|
||||||
register={register}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-x-2">
|
|
||||||
<div className="w-full">
|
|
||||||
<h6 className="text-gray-500">Start Date</h6>
|
|
||||||
<div className="w-full">
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="start_date"
|
|
||||||
rules={{ required: "Start date is required" }}
|
|
||||||
render={({ field: { value, onChange } }) => (
|
|
||||||
<CustomDatePicker
|
|
||||||
renderAs="input"
|
|
||||||
value={value}
|
|
||||||
onChange={onChange}
|
|
||||||
error={errors.start_date ? true : false}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{errors.start_date && (
|
|
||||||
<h6 className="text-sm text-red-500">{errors.start_date.message}</h6>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full">
|
|
||||||
<h6 className="text-gray-500">Target Date</h6>
|
|
||||||
<div className="w-full">
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="target_date"
|
|
||||||
rules={{ required: "Target date is required" }}
|
|
||||||
render={({ field: { value, onChange } }) => (
|
|
||||||
<CustomDatePicker
|
|
||||||
renderAs="input"
|
|
||||||
value={value}
|
|
||||||
onChange={onChange}
|
|
||||||
error={errors.target_date ? true : false}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{errors.target_date && (
|
|
||||||
<h6 className="text-sm text-red-500">{errors.target_date.message}</h6>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
|
||||||
<SelectStatus control={control} error={errors.status} />
|
|
||||||
<SelectLead control={control} />
|
|
||||||
<SelectMembers control={control} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-5 flex justify-end gap-2">
|
|
||||||
<Button theme="secondary" onClick={handleClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button type="submit" disabled={isSubmitting}>
|
|
||||||
{data
|
|
||||||
? isSubmitting
|
|
||||||
? "Updating Module..."
|
|
||||||
: "Update Module"
|
|
||||||
: isSubmitting
|
|
||||||
? "Creating Module..."
|
|
||||||
: "Create Module"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</Dialog.Panel>
|
|
||||||
</Transition.Child>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
|
||||||
</Transition.Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CreateUpdateModuleModal;
|
|
||||||
@ -1,196 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
import useSWR from "swr";
|
|
||||||
|
|
||||||
// icons
|
|
||||||
import { Disclosure, Transition } from "@headlessui/react";
|
|
||||||
import { PlusIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
|
|
||||||
// services
|
|
||||||
import workspaceService from "services/workspace.service";
|
|
||||||
import stateService from "services/state.service";
|
|
||||||
// hooks
|
|
||||||
import useIssuesProperties from "hooks/use-issue-properties";
|
|
||||||
import useIssueView from "hooks/use-issue-view";
|
|
||||||
// components
|
|
||||||
import SingleListIssue from "components/common/list-view/single-issue";
|
|
||||||
// ui
|
|
||||||
import { CustomMenu, Spinner } from "components/ui";
|
|
||||||
// helpers
|
|
||||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
|
||||||
// types
|
|
||||||
import { IIssue, IWorkspaceMember, UserAuth } from "types";
|
|
||||||
// fetch-keys
|
|
||||||
import { STATE_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
issues: IIssue[];
|
|
||||||
openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
|
|
||||||
openIssuesListModal: () => void;
|
|
||||||
removeIssueFromModule: (issueId: string) => void;
|
|
||||||
setPreloadedData: React.Dispatch<
|
|
||||||
React.SetStateAction<
|
|
||||||
| (Partial<IIssue> & {
|
|
||||||
actionType: "createIssue" | "edit" | "delete";
|
|
||||||
})
|
|
||||||
| null
|
|
||||||
>
|
|
||||||
>;
|
|
||||||
userAuth: UserAuth;
|
|
||||||
};
|
|
||||||
|
|
||||||
const ModulesListView: React.FC<Props> = ({
|
|
||||||
issues,
|
|
||||||
openCreateIssueModal,
|
|
||||||
openIssuesListModal,
|
|
||||||
removeIssueFromModule,
|
|
||||||
setPreloadedData,
|
|
||||||
userAuth,
|
|
||||||
}) => {
|
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug, projectId, moduleId } = router.query;
|
|
||||||
|
|
||||||
const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
|
|
||||||
const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
|
|
||||||
|
|
||||||
const { data: people } = useSWR<IWorkspaceMember[]>(
|
|
||||||
workspaceSlug ? WORKSPACE_MEMBERS : null,
|
|
||||||
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
|
|
||||||
);
|
|
||||||
|
|
||||||
const { data: states } = useSWR(
|
|
||||||
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
if (issueView !== "list") return <></>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-full flex-col space-y-5">
|
|
||||||
{Object.keys(groupedByIssues).map((singleGroup) => {
|
|
||||||
const stateId =
|
|
||||||
selectedGroup === "state_detail.name"
|
|
||||||
? states?.find((s) => s.name === singleGroup)?.id ?? null
|
|
||||||
: null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Disclosure key={singleGroup} as="div" defaultOpen>
|
|
||||||
{({ open }) => (
|
|
||||||
<div className="rounded-lg bg-white">
|
|
||||||
<div className="rounded-t-lg bg-gray-100 px-4 py-3">
|
|
||||||
<Disclosure.Button>
|
|
||||||
<div className="flex items-center gap-x-2">
|
|
||||||
<span>
|
|
||||||
<ChevronDownIcon
|
|
||||||
className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
{selectedGroup !== null ? (
|
|
||||||
<h2 className="font-medium capitalize leading-5">
|
|
||||||
{singleGroup === null || singleGroup === "null"
|
|
||||||
? selectedGroup === "priority" && "No priority"
|
|
||||||
: addSpaceIfCamelCase(singleGroup)}
|
|
||||||
</h2>
|
|
||||||
) : (
|
|
||||||
<h2 className="font-medium leading-5">All Issues</h2>
|
|
||||||
)}
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
{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) => {
|
|
||||||
const assignees = [
|
|
||||||
...(issue?.assignees_list ?? []),
|
|
||||||
...(issue?.assignees ?? []),
|
|
||||||
]?.map((assignee) => {
|
|
||||||
const tempPerson = people?.find(
|
|
||||||
(p) => p.member.id === assignee
|
|
||||||
)?.member;
|
|
||||||
|
|
||||||
return {
|
|
||||||
avatar: tempPerson?.avatar,
|
|
||||||
first_name: tempPerson?.first_name,
|
|
||||||
email: tempPerson?.email,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SingleListIssue
|
|
||||||
key={issue.id}
|
|
||||||
type="module"
|
|
||||||
typeId={moduleId as string}
|
|
||||||
issue={issue}
|
|
||||||
properties={properties}
|
|
||||||
editIssue={() => openCreateIssueModal(issue, "edit")}
|
|
||||||
removeIssue={() => removeIssueFromModule(issue.bridge ?? "")}
|
|
||||||
userAuth={userAuth}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
<p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
|
||||||
<Spinner />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Disclosure.Panel>
|
|
||||||
</Transition>
|
|
||||||
<div className="p-3">
|
|
||||||
<CustomMenu
|
|
||||||
label={
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<PlusIcon className="h-3 w-3" />
|
|
||||||
Add issue
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
optionsPosition="left"
|
|
||||||
noBorder
|
|
||||||
>
|
|
||||||
<CustomMenu.MenuItem
|
|
||||||
onClick={() => {
|
|
||||||
openCreateIssueModal();
|
|
||||||
if (selectedGroup !== null) {
|
|
||||||
setPreloadedData({
|
|
||||||
state: stateId !== null ? stateId : undefined,
|
|
||||||
[selectedGroup]: singleGroup,
|
|
||||||
actionType: "createIssue",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Create new
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
<CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
|
|
||||||
Add an existing issue
|
|
||||||
</CustomMenu.MenuItem>
|
|
||||||
</CustomMenu>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Disclosure>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ModulesListView;
|
|
||||||
@ -4,22 +4,24 @@ import { useRouter } from "next/router";
|
|||||||
|
|
||||||
import { mutate } from "swr";
|
import { mutate } from "swr";
|
||||||
|
|
||||||
|
// react-hook-form
|
||||||
import { Controller, useForm } from "react-hook-form";
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
// react-color
|
||||||
import { TwitterPicker } from "react-color";
|
import { TwitterPicker } from "react-color";
|
||||||
|
// headless ui
|
||||||
import { Dialog, Popover, Transition } from "@headlessui/react";
|
import { Dialog, Popover, Transition } from "@headlessui/react";
|
||||||
// services
|
// services
|
||||||
import { ChevronDownIcon } from "@heroicons/react/24/outline";
|
|
||||||
import type { IState } from "types";
|
|
||||||
import stateService from "services/state.service";
|
import stateService from "services/state.service";
|
||||||
|
// ui
|
||||||
|
import { Button, Input, Select, TextArea } from "components/ui";
|
||||||
|
// icons
|
||||||
|
import { ChevronDownIcon } from "@heroicons/react/24/outline";
|
||||||
|
// types
|
||||||
|
import type { IState } from "types";
|
||||||
// fetch keys
|
// fetch keys
|
||||||
import { STATE_LIST } from "constants/fetch-keys";
|
import { STATE_LIST } from "constants/fetch-keys";
|
||||||
// constants
|
// constants
|
||||||
import { GROUP_CHOICES } from "constants/";
|
import { GROUP_CHOICES } from "constants/";
|
||||||
// ui
|
|
||||||
import { Button, Input, Select, TextArea } from "components/ui";
|
|
||||||
// icons
|
|
||||||
|
|
||||||
// types
|
// types
|
||||||
type Props = {
|
type Props = {
|
||||||
@ -36,7 +38,12 @@ const defaultValues: Partial<IState> = {
|
|||||||
group: "backlog",
|
group: "backlog",
|
||||||
};
|
};
|
||||||
|
|
||||||
const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, handleClose }) => {
|
export const CreateUpdateStateModal: React.FC<Props> = ({
|
||||||
|
isOpen,
|
||||||
|
data,
|
||||||
|
projectId,
|
||||||
|
handleClose,
|
||||||
|
}) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug } = router.query;
|
const { workspaceSlug } = router.query;
|
||||||
|
|
||||||
@ -266,5 +273,3 @@ const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, hand
|
|||||||
</Transition.Root>
|
</Transition.Root>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default CreateUpdateStateModal;
|
|
||||||
@ -28,7 +28,7 @@ type Props = {
|
|||||||
data: IState | null;
|
data: IState | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
|
export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
|
||||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||||
const [issuesWithThisStateExist, setIssuesWithThisStateExist] = useState(true);
|
const [issuesWithThisStateExist, setIssuesWithThisStateExist] = useState(true);
|
||||||
|
|
||||||
@ -175,5 +175,3 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
|
|||||||
</Transition.Root>
|
</Transition.Root>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ConfirmStateDeletion;
|
|
||||||
3
apps/app/components/states/index.ts
Normal file
3
apps/app/components/states/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export * from "./create-update-state-inline";
|
||||||
|
export * from "./create-update-state-modal";
|
||||||
|
export * from "./delete-state-modal";
|
||||||
@ -1,6 +1,8 @@
|
|||||||
// react-datepicker
|
// react-datepicker
|
||||||
import DatePicker from "react-datepicker";
|
import DatePicker from "react-datepicker";
|
||||||
import "react-datepicker/dist/react-datepicker.css";
|
import "react-datepicker/dist/react-datepicker.css";
|
||||||
|
// helpers
|
||||||
|
import { renderDateFormat } from "helpers/date-time.helper";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
renderAs?: "input" | "button";
|
renderAs?: "input" | "button";
|
||||||
@ -30,16 +32,7 @@ export const CustomDatePicker: React.FC<Props> = ({
|
|||||||
selected={value ? new Date(value) : null}
|
selected={value ? new Date(value) : null}
|
||||||
onChange={(val) => {
|
onChange={(val) => {
|
||||||
if (!val) onChange(null);
|
if (!val) onChange(null);
|
||||||
else {
|
else onChange(renderDateFormat(val));
|
||||||
const year = val.getFullYear();
|
|
||||||
let month: number | string = val.getMonth() + 1;
|
|
||||||
let date: number | string = val.getDate();
|
|
||||||
|
|
||||||
if (date < 10) date = `0${date}`;
|
|
||||||
if (month < 10) month = `0${month}`;
|
|
||||||
|
|
||||||
onChange(`${year}-${month}-${date}`);
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
className={`${className} ${
|
className={`${className} ${
|
||||||
renderAs === "input"
|
renderAs === "input"
|
||||||
|
|||||||
@ -29,7 +29,7 @@ export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS
|
|||||||
|
|
||||||
export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId}`;
|
export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId}`;
|
||||||
export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`;
|
export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`;
|
||||||
export const CYCLE_DETAIL = "CYCLE_DETAIL";
|
export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAIL_${cycleId}`;
|
||||||
|
|
||||||
export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
|
export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
|
||||||
export const STATE_DETAIL = "STATE_DETAIL";
|
export const STATE_DETAIL = "STATE_DETAIL";
|
||||||
@ -39,7 +39,7 @@ export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${pro
|
|||||||
|
|
||||||
export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`;
|
export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`;
|
||||||
export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId}`;
|
export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId}`;
|
||||||
export const MODULE_DETAIL = "MODULE_DETAIL";
|
export const MODULE_DETAILS = (moduleId: string) => `MODULE_DETAIL_${moduleId}`;
|
||||||
|
|
||||||
// Issues
|
// Issues
|
||||||
export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId}`;
|
export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId}`;
|
||||||
|
|||||||
@ -35,7 +35,8 @@ export const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | nu
|
|||||||
{ name: "None", key: null },
|
{ name: "None", key: null },
|
||||||
];
|
];
|
||||||
|
|
||||||
export const orderByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
|
export const orderByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | "manual" | null }> = [
|
||||||
|
// { name: "Manual", key: "manual" },
|
||||||
{ name: "Last created", key: "created_at" },
|
{ name: "Last created", key: "created_at" },
|
||||||
{ name: "Last updated", key: "updated_at" },
|
{ name: "Last updated", key: "updated_at" },
|
||||||
{ name: "Priority", key: "priority" },
|
{ name: "Priority", key: "priority" },
|
||||||
|
|||||||
@ -19,7 +19,7 @@ type IssueViewProps = {
|
|||||||
issueView: "list" | "kanban" | null;
|
issueView: "list" | "kanban" | null;
|
||||||
groupByProperty: NestedKeyOf<IIssue> | null;
|
groupByProperty: NestedKeyOf<IIssue> | null;
|
||||||
filterIssue: "activeIssue" | "backlogIssue" | null;
|
filterIssue: "activeIssue" | "backlogIssue" | null;
|
||||||
orderBy: NestedKeyOf<IIssue> | null;
|
orderBy: NestedKeyOf<IIssue> | "manual" | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
type ReducerActionType = {
|
type ReducerActionType = {
|
||||||
@ -34,12 +34,12 @@ type ReducerActionType = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
type ContextType = {
|
type ContextType = {
|
||||||
orderBy: NestedKeyOf<IIssue> | null;
|
orderBy: NestedKeyOf<IIssue> | "manual" | null;
|
||||||
issueView: "list" | "kanban" | null;
|
issueView: "list" | "kanban" | null;
|
||||||
groupByProperty: NestedKeyOf<IIssue> | null;
|
groupByProperty: NestedKeyOf<IIssue> | null;
|
||||||
filterIssue: "activeIssue" | "backlogIssue" | null;
|
filterIssue: "activeIssue" | "backlogIssue" | null;
|
||||||
setGroupByProperty: (property: NestedKeyOf<IIssue> | null) => void;
|
setGroupByProperty: (property: NestedKeyOf<IIssue> | null) => void;
|
||||||
setOrderBy: (property: NestedKeyOf<IIssue> | null) => void;
|
setOrderBy: (property: NestedKeyOf<IIssue> | "manual" | null) => void;
|
||||||
setFilterIssue: (property: "activeIssue" | "backlogIssue" | null) => void;
|
setFilterIssue: (property: "activeIssue" | "backlogIssue" | null) => void;
|
||||||
resetFilterToDefault: () => void;
|
resetFilterToDefault: () => void;
|
||||||
setNewFilterDefaultView: () => void;
|
setNewFilterDefaultView: () => void;
|
||||||
@ -51,7 +51,7 @@ type StateType = {
|
|||||||
issueView: "list" | "kanban" | null;
|
issueView: "list" | "kanban" | null;
|
||||||
groupByProperty: NestedKeyOf<IIssue> | null;
|
groupByProperty: NestedKeyOf<IIssue> | null;
|
||||||
filterIssue: "activeIssue" | "backlogIssue" | null;
|
filterIssue: "activeIssue" | "backlogIssue" | null;
|
||||||
orderBy: NestedKeyOf<IIssue> | null;
|
orderBy: NestedKeyOf<IIssue> | "manual" | null;
|
||||||
};
|
};
|
||||||
type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
|
type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
|
||||||
|
|
||||||
@ -219,7 +219,7 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
|
|||||||
);
|
);
|
||||||
|
|
||||||
const setOrderBy = useCallback(
|
const setOrderBy = useCallback(
|
||||||
(property: NestedKeyOf<IIssue> | null) => {
|
(property: NestedKeyOf<IIssue> | "manual" | null) => {
|
||||||
dispatch({
|
dispatch({
|
||||||
type: "SET_ORDER_BY_PROPERTY",
|
type: "SET_ORDER_BY_PROPERTY",
|
||||||
payload: {
|
payload: {
|
||||||
|
|||||||
@ -1,4 +1,6 @@
|
|||||||
export const renderDateFormat = (date: string | Date) => {
|
export const renderDateFormat = (date: string | Date | null) => {
|
||||||
|
if (!date) return "N/A";
|
||||||
|
|
||||||
var d = new Date(date),
|
var d = new Date(date),
|
||||||
month = "" + (d.getMonth() + 1),
|
month = "" + (d.getMonth() + 1),
|
||||||
day = "" + d.getDate(),
|
day = "" + d.getDate(),
|
||||||
|
|||||||
@ -65,6 +65,8 @@ const useIssueView = (projectIssues: IIssue[]) => {
|
|||||||
...groupBy(projectIssues ?? [], groupByProperty ?? ""),
|
...groupBy(projectIssues ?? [], groupByProperty ?? ""),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (groupByProperty === "priority") delete groupedByIssues.None;
|
||||||
|
|
||||||
if (orderBy) {
|
if (orderBy) {
|
||||||
groupedByIssues = Object.fromEntries(
|
groupedByIssues = Object.fromEntries(
|
||||||
Object.entries(groupedByIssues).map(([key, value]) => [
|
Object.entries(groupedByIssues).map(([key, value]) => [
|
||||||
@ -74,7 +76,7 @@ const useIssueView = (projectIssues: IIssue[]) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (filterIssue !== null) {
|
if (filterIssue) {
|
||||||
if (filterIssue === "activeIssue") {
|
if (filterIssue === "activeIssue") {
|
||||||
const filteredStates = states?.filter(
|
const filteredStates = states?.filter(
|
||||||
(state) => state.group === "started" || state.group === "unstarted"
|
(state) => state.group === "started" || state.group === "unstarted"
|
||||||
|
|||||||
@ -191,7 +191,7 @@ const WorkspacePage: NextPage = () => {
|
|||||||
<a className="flex items-center justify-between">
|
<a className="flex items-center justify-between">
|
||||||
<div className="flex items-center gap-2 text-sm">
|
<div className="flex items-center gap-2 text-sm">
|
||||||
{project.icon ? (
|
{project.icon ? (
|
||||||
<span className="grid flex-shrink-0 place-items-center rounded uppercase text-white">
|
<span className="grid flex-shrink-0 place-items-center rounded uppercase">
|
||||||
{String.fromCodePoint(parseInt(project.icon))}
|
{String.fromCodePoint(parseInt(project.icon))}
|
||||||
</span>
|
</span>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React from "react";
|
import React, { useState } from "react";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
// headless ui
|
// headless ui
|
||||||
@ -17,26 +17,39 @@ import useIssuesProperties from "hooks/use-issue-properties";
|
|||||||
// types
|
// types
|
||||||
import { IIssue, Properties } from "types";
|
import { IIssue, Properties } from "types";
|
||||||
// components
|
// components
|
||||||
import { IssueListItem } from "components/issues";
|
import { DeleteIssueModal, MyIssuesListItem } from "components/issues";
|
||||||
// helpers
|
// helpers
|
||||||
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
|
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
|
||||||
// types
|
// types
|
||||||
import type { NextPage } from "next";
|
import type { NextPage } from "next";
|
||||||
|
|
||||||
const MyIssuesPage: NextPage = () => {
|
const MyIssuesPage: NextPage = () => {
|
||||||
|
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||||
|
const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug } = router.query;
|
const { workspaceSlug } = router.query;
|
||||||
|
|
||||||
// fetching user issues
|
// fetching user issues
|
||||||
const { myIssues } = useIssues(workspaceSlug?.toString());
|
const { myIssues } = useIssues(workspaceSlug as string);
|
||||||
|
|
||||||
// FIXME: remove this hard-coded value
|
|
||||||
const [properties, setProperties] = useIssuesProperties(
|
const [properties, setProperties] = useIssuesProperties(
|
||||||
workspaceSlug ? (workspaceSlug as string) : undefined,
|
workspaceSlug ? (workspaceSlug as string) : undefined,
|
||||||
undefined
|
undefined
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const handleDeleteIssue = (issue: IIssue) => {
|
||||||
|
setDeleteIssueModal(true);
|
||||||
|
setIssueToDelete(issue);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<DeleteIssueModal
|
||||||
|
handleClose={() => setDeleteIssueModal(false)}
|
||||||
|
isOpen={deleteIssueModal}
|
||||||
|
data={issueToDelete}
|
||||||
|
/>
|
||||||
<AppLayout
|
<AppLayout
|
||||||
breadcrumbs={
|
breadcrumbs={
|
||||||
<Breadcrumbs>
|
<Breadcrumbs>
|
||||||
@ -142,7 +155,13 @@ const MyIssuesPage: NextPage = () => {
|
|||||||
<Disclosure.Panel>
|
<Disclosure.Panel>
|
||||||
<div className="divide-y-2">
|
<div className="divide-y-2">
|
||||||
{myIssues.map((issue: IIssue) => (
|
{myIssues.map((issue: IIssue) => (
|
||||||
<IssueListItem key={issue.id} issue={issue} properties={properties} />
|
<MyIssuesListItem
|
||||||
|
key={issue.id}
|
||||||
|
issue={issue}
|
||||||
|
properties={properties}
|
||||||
|
projectId={issue.project}
|
||||||
|
handleDeleteIssue={() => handleDeleteIssue(issue)}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</Disclosure.Panel>
|
</Disclosure.Panel>
|
||||||
@ -185,6 +204,7 @@ const MyIssuesPage: NextPage = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</AppLayout>
|
</AppLayout>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -3,8 +3,29 @@ import React, { useEffect, useState } from "react";
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
|
|
||||||
|
// react-hook-form
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
|
// lib
|
||||||
|
import { requiredAuth } from "lib/auth";
|
||||||
|
// services
|
||||||
|
import projectService from "services/project.service";
|
||||||
|
// hooks
|
||||||
|
import useUser from "hooks/use-user";
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
// layouts
|
||||||
|
import AppLayout from "layouts/app-layout";
|
||||||
|
// services
|
||||||
|
import userService from "services/user.service";
|
||||||
|
import workspaceService from "services/workspace.service";
|
||||||
|
// components
|
||||||
|
import { ImageUploadModal } from "components/core";
|
||||||
|
// ui
|
||||||
|
import { Button, Input, Spinner } from "components/ui";
|
||||||
|
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||||
|
// icons
|
||||||
import {
|
import {
|
||||||
ChevronRightIcon,
|
ChevronRightIcon,
|
||||||
ClipboardDocumentListIcon,
|
ClipboardDocumentListIcon,
|
||||||
@ -14,30 +35,11 @@ import {
|
|||||||
UserPlusIcon,
|
UserPlusIcon,
|
||||||
XMarkIcon,
|
XMarkIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
import type { NextPage, NextPageContext } from "next";
|
|
||||||
|
|
||||||
// hooks
|
|
||||||
import type { IIssue, IUser } from "types";
|
|
||||||
import useUser from "hooks/use-user";
|
|
||||||
import useToast from "hooks/use-toast";
|
|
||||||
// lib
|
|
||||||
import { requiredAuth } from "lib/auth";
|
|
||||||
// services
|
|
||||||
import projectService from "services/project.service";
|
|
||||||
// layouts
|
|
||||||
import AppLayout from "layouts/app-layout";
|
|
||||||
// constants
|
|
||||||
import { USER_ISSUE, USER_WORKSPACE_INVITATIONS, PROJECTS_LIST } from "constants/fetch-keys";
|
|
||||||
// services
|
|
||||||
import userService from "services/user.service";
|
|
||||||
import workspaceService from "services/workspace.service";
|
|
||||||
// components
|
|
||||||
import { ImageUploadModal } from "components/common/image-upload-modal";
|
|
||||||
// ui
|
|
||||||
import { Button, Input, Spinner } from "components/ui";
|
|
||||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
|
||||||
// icons
|
|
||||||
// types
|
// types
|
||||||
|
import type { NextPage, NextPageContext } from "next";
|
||||||
|
import type { IIssue, IUser } from "types";
|
||||||
|
// fetch-keys
|
||||||
|
import { USER_ISSUE, USER_WORKSPACE_INVITATIONS, PROJECTS_LIST } from "constants/fetch-keys";
|
||||||
|
|
||||||
const defaultValues: Partial<IUser> = {
|
const defaultValues: Partial<IUser> = {
|
||||||
avatar: "",
|
avatar: "",
|
||||||
|
|||||||
@ -11,13 +11,9 @@ import AppLayout from "layouts/app-layout";
|
|||||||
// contexts
|
// contexts
|
||||||
import { IssueViewContextProvider } from "contexts/issue-view.context";
|
import { IssueViewContextProvider } from "contexts/issue-view.context";
|
||||||
// components
|
// components
|
||||||
import CyclesListView from "components/project/cycles/list-view";
|
|
||||||
import CyclesBoardView from "components/project/cycles/board-view";
|
|
||||||
import { CreateUpdateIssueModal } from "components/issues";
|
import { CreateUpdateIssueModal } from "components/issues";
|
||||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
|
||||||
import ExistingIssuesListModal from "components/common/existing-issues-list-modal";
|
|
||||||
import CycleDetailSidebar from "components/project/cycles/cycle-detail-sidebar";
|
import CycleDetailSidebar from "components/project/cycles/cycle-detail-sidebar";
|
||||||
import View from "components/core/view";
|
|
||||||
// services
|
// services
|
||||||
import issuesServices from "services/issues.service";
|
import issuesServices from "services/issues.service";
|
||||||
import cycleServices from "services/cycles.service";
|
import cycleServices from "services/cycles.service";
|
||||||
@ -36,15 +32,14 @@ import {
|
|||||||
CYCLE_ISSUES,
|
CYCLE_ISSUES,
|
||||||
CYCLE_LIST,
|
CYCLE_LIST,
|
||||||
PROJECT_ISSUES_LIST,
|
PROJECT_ISSUES_LIST,
|
||||||
PROJECT_MEMBERS,
|
|
||||||
PROJECT_DETAILS,
|
PROJECT_DETAILS,
|
||||||
|
CYCLE_DETAILS,
|
||||||
} from "constants/fetch-keys";
|
} from "constants/fetch-keys";
|
||||||
|
|
||||||
const SingleCycle: React.FC<UserAuth> = (props) => {
|
const SingleCycle: React.FC<UserAuth> = (props) => {
|
||||||
const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
|
const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
|
||||||
const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
|
const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
|
||||||
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
|
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
|
||||||
const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
|
|
||||||
const [cycleSidebar, setCycleSidebar] = useState(true);
|
const [cycleSidebar, setCycleSidebar] = useState(true);
|
||||||
|
|
||||||
const [preloadedData, setPreloadedData] = useState<
|
const [preloadedData, setPreloadedData] = useState<
|
||||||
@ -77,6 +72,18 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
|||||||
: null
|
: null
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const { data: cycleDetails } = useSWR(
|
||||||
|
cycleId ? CYCLE_DETAILS(cycleId as string) : null,
|
||||||
|
workspaceSlug && projectId && cycleId
|
||||||
|
? () =>
|
||||||
|
cycleServices.getCycleDetails(
|
||||||
|
workspaceSlug as string,
|
||||||
|
projectId as string,
|
||||||
|
cycleId as string
|
||||||
|
)
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(
|
const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(
|
||||||
workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,
|
workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,
|
||||||
workspaceSlug && projectId && cycleId
|
workspaceSlug && projectId && cycleId
|
||||||
@ -95,19 +102,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
|||||||
cycle: cycleId as string,
|
cycle: cycleId as string,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const { data: members } = useSWR(
|
|
||||||
workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
|
|
||||||
: null,
|
|
||||||
{
|
|
||||||
onErrorRetry(err, _, __, revalidate, revalidateOpts) {
|
|
||||||
if (err?.status === 403) return;
|
|
||||||
setTimeout(() => revalidate(revalidateOpts), 5000);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const openCreateIssueModal = (
|
const openCreateIssueModal = (
|
||||||
issue?: IIssue,
|
issue?: IIssue,
|
||||||
actionType: "create" | "edit" | "delete" = "create"
|
actionType: "create" | "edit" | "delete" = "create"
|
||||||
@ -138,30 +132,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const removeIssueFromCycle = (bridgeId: string) => {
|
|
||||||
if (!workspaceSlug || !projectId) return;
|
|
||||||
|
|
||||||
mutate<CycleIssueResponse[]>(
|
|
||||||
CYCLE_ISSUES(cycleId as string),
|
|
||||||
(prevData) => prevData?.filter((p) => p.id !== bridgeId),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
issuesServices
|
|
||||||
.removeIssueFromCycle(
|
|
||||||
workspaceSlug as string,
|
|
||||||
projectId as string,
|
|
||||||
cycleId as string,
|
|
||||||
bridgeId
|
|
||||||
)
|
|
||||||
.then((res) => {
|
|
||||||
console.log(res);
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<IssueViewContextProvider>
|
<IssueViewContextProvider>
|
||||||
<CreateUpdateIssueModal
|
<CreateUpdateIssueModal
|
||||||
@ -181,11 +151,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
|||||||
issues={issues?.results.filter((i) => !i.issue_cycle) ?? []}
|
issues={issues?.results.filter((i) => !i.issue_cycle) ?? []}
|
||||||
handleOnSubmit={handleAddIssuesToCycle}
|
handleOnSubmit={handleAddIssuesToCycle}
|
||||||
/>
|
/>
|
||||||
<ConfirmIssueDeletion
|
|
||||||
handleClose={() => setDeleteIssue(undefined)}
|
|
||||||
isOpen={!!deleteIssue}
|
|
||||||
data={issues?.results.find((issue) => issue.id === deleteIssue)}
|
|
||||||
/>
|
|
||||||
<AppLayout
|
<AppLayout
|
||||||
breadcrumbs={
|
breadcrumbs={
|
||||||
<Breadcrumbs>
|
<Breadcrumbs>
|
||||||
@ -200,7 +165,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
|||||||
label={
|
label={
|
||||||
<>
|
<>
|
||||||
<CyclesIcon className="h-3 w-3" />
|
<CyclesIcon className="h-3 w-3" />
|
||||||
{cycles?.find((c) => c.id === cycleId)?.name}
|
{cycleDetails?.name}
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
className="ml-1.5"
|
className="ml-1.5"
|
||||||
@ -221,7 +186,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
|||||||
<div
|
<div
|
||||||
className={`flex items-center gap-2 ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}
|
className={`flex items-center gap-2 ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}
|
||||||
>
|
>
|
||||||
<View issues={cycleIssuesArray ?? []} />
|
<IssuesFilterView issues={cycleIssuesArray ?? []} />
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100 ${
|
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100 ${
|
||||||
@ -237,22 +202,11 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
|||||||
{cycleIssuesArray ? (
|
{cycleIssuesArray ? (
|
||||||
cycleIssuesArray.length > 0 ? (
|
cycleIssuesArray.length > 0 ? (
|
||||||
<div className={`h-full ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}>
|
<div className={`h-full ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}>
|
||||||
<CyclesListView
|
<IssuesView
|
||||||
|
type="cycle"
|
||||||
issues={cycleIssuesArray ?? []}
|
issues={cycleIssuesArray ?? []}
|
||||||
openCreateIssueModal={openCreateIssueModal}
|
|
||||||
openIssuesListModal={openIssuesListModal}
|
|
||||||
removeIssueFromCycle={removeIssueFromCycle}
|
|
||||||
setPreloadedData={setPreloadedData}
|
|
||||||
userAuth={props}
|
userAuth={props}
|
||||||
/>
|
|
||||||
<CyclesBoardView
|
|
||||||
issues={cycleIssuesArray ?? []}
|
|
||||||
members={members}
|
|
||||||
openCreateIssueModal={openCreateIssueModal}
|
|
||||||
openIssuesListModal={openIssuesListModal}
|
openIssuesListModal={openIssuesListModal}
|
||||||
handleDeleteIssue={setDeleteIssue}
|
|
||||||
setPreloadedData={setPreloadedData}
|
|
||||||
userAuth={props}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
@ -270,13 +224,13 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
|||||||
title="Create a new issue"
|
title="Create a new issue"
|
||||||
description="Click to create a new issue inside the cycle."
|
description="Click to create a new issue inside the cycle."
|
||||||
Icon={PlusIcon}
|
Icon={PlusIcon}
|
||||||
action={() => openCreateIssueModal()}
|
action={openCreateIssueModal}
|
||||||
/>
|
/>
|
||||||
<EmptySpaceItem
|
<EmptySpaceItem
|
||||||
title="Add an existing issue"
|
title="Add an existing issue"
|
||||||
description="Open list"
|
description="Open list"
|
||||||
Icon={ListBulletIcon}
|
Icon={ListBulletIcon}
|
||||||
action={() => openIssuesListModal()}
|
action={openIssuesListModal}
|
||||||
/>
|
/>
|
||||||
</EmptySpace>
|
</EmptySpace>
|
||||||
</div>
|
</div>
|
||||||
@ -287,7 +241,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<CycleDetailSidebar
|
<CycleDetailSidebar
|
||||||
cycle={cycles?.find((c) => c.id === (cycleId as string))}
|
cycle={cycleDetails}
|
||||||
isOpen={cycleSidebar}
|
isOpen={cycleSidebar}
|
||||||
cycleIssues={cycleIssues ?? []}
|
cycleIssues={cycleIssues ?? []}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -14,11 +14,15 @@ import { requiredAdmin, requiredAuth } from "lib/auth";
|
|||||||
// layouts
|
// layouts
|
||||||
import AppLayout from "layouts/app-layout";
|
import AppLayout from "layouts/app-layout";
|
||||||
// components
|
// components
|
||||||
import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
|
import {
|
||||||
import IssueDetailSidebar from "components/project/issues/issue-detail/issue-detail-sidebar";
|
IssueDescriptionForm,
|
||||||
import AddIssueComment from "components/project/issues/issue-detail/comment/issue-comment-section";
|
SubIssuesList,
|
||||||
import IssueActivitySection from "components/project/issues/issue-detail/activity";
|
CreateUpdateIssueModal,
|
||||||
import { IssueDescriptionForm, SubIssueList, CreateUpdateIssueModal } from "components/issues";
|
IssueDetailsSidebar,
|
||||||
|
IssueActivitySection,
|
||||||
|
AddComment,
|
||||||
|
SubIssuesListModal,
|
||||||
|
} from "components/issues";
|
||||||
// ui
|
// ui
|
||||||
import { Loader, CustomMenu } from "components/ui";
|
import { Loader, CustomMenu } from "components/ui";
|
||||||
import { Breadcrumbs } from "components/breadcrumbs";
|
import { Breadcrumbs } from "components/breadcrumbs";
|
||||||
@ -46,13 +50,14 @@ const defaultValues = {
|
|||||||
blocked_list: [],
|
blocked_list: [],
|
||||||
target_date: new Date().toString(),
|
target_date: new Date().toString(),
|
||||||
issue_cycle: null,
|
issue_cycle: null,
|
||||||
|
issue_module: null,
|
||||||
labels_list: [],
|
labels_list: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
const IssueDetailsPage: NextPage<UserAuth> = (props) => {
|
const IssueDetailsPage: NextPage<UserAuth> = (props) => {
|
||||||
// states
|
// states
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false);
|
const [subIssuesListModal, setSubIssuesListModal] = useState(false);
|
||||||
const [preloadedData, setPreloadedData] = useState<
|
const [preloadedData, setPreloadedData] = useState<
|
||||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
||||||
>(undefined);
|
>(undefined);
|
||||||
@ -104,25 +109,6 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
|
|||||||
defaultValues,
|
defaultValues,
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (issueDetails) {
|
|
||||||
mutateIssueActivities();
|
|
||||||
reset({
|
|
||||||
...issueDetails,
|
|
||||||
blockers_list:
|
|
||||||
issueDetails.blockers_list ??
|
|
||||||
issueDetails.blocker_issues?.map((issue) => issue.blocker_issue_detail?.id),
|
|
||||||
blocked_list:
|
|
||||||
issueDetails.blocked_list ??
|
|
||||||
issueDetails.blocked_issues?.map((issue) => issue.blocked_issue_detail?.id),
|
|
||||||
assignees_list:
|
|
||||||
issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id),
|
|
||||||
labels_list: issueDetails.labels_list ?? issueDetails.labels,
|
|
||||||
labels: issueDetails.labels_list ?? issueDetails.labels,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [issueDetails, reset, mutateIssueActivities]);
|
|
||||||
|
|
||||||
const submitChanges = useCallback(
|
const submitChanges = useCallback(
|
||||||
(formData: Partial<IIssue>) => {
|
(formData: Partial<IIssue>) => {
|
||||||
if (!workspaceSlug || !projectId || !issueId) return;
|
if (!workspaceSlug || !projectId || !issueId) return;
|
||||||
@ -182,6 +168,25 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (issueDetails) {
|
||||||
|
mutateIssueActivities();
|
||||||
|
reset({
|
||||||
|
...issueDetails,
|
||||||
|
blockers_list:
|
||||||
|
issueDetails.blockers_list ??
|
||||||
|
issueDetails.blocker_issues?.map((issue) => issue.blocker_issue_detail?.id),
|
||||||
|
blocked_list:
|
||||||
|
issueDetails.blocked_list ??
|
||||||
|
issueDetails.blocked_issues?.map((issue) => issue.blocked_issue_detail?.id),
|
||||||
|
assignees_list:
|
||||||
|
issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id),
|
||||||
|
labels_list: issueDetails.labels_list ?? issueDetails.labels,
|
||||||
|
labels: issueDetails.labels_list ?? issueDetails.labels,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [issueDetails, reset, mutateIssueActivities]);
|
||||||
|
|
||||||
const isNotAllowed = props.isGuest || props.isViewer;
|
const isNotAllowed = props.isGuest || props.isViewer;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -211,10 +216,10 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{isAddAsSubIssueOpen && (
|
{subIssuesListModal && (
|
||||||
<AddAsSubIssue
|
<SubIssuesListModal
|
||||||
isOpen={isAddAsSubIssueOpen}
|
isOpen={subIssuesListModal}
|
||||||
setIsOpen={setIsAddAsSubIssueOpen}
|
handleClose={() => setSubIssuesListModal(false)}
|
||||||
parent={issueDetails}
|
parent={issueDetails}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
@ -276,7 +281,7 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
|
|||||||
/>
|
/>
|
||||||
<div className="mt-2">
|
<div className="mt-2">
|
||||||
{issueId && workspaceSlug && projectId && subIssues?.length > 0 ? (
|
{issueId && workspaceSlug && projectId && subIssues?.length > 0 ? (
|
||||||
<SubIssueList
|
<SubIssuesList
|
||||||
issues={subIssues}
|
issues={subIssues}
|
||||||
parentIssue={issueDetails}
|
parentIssue={issueDetails}
|
||||||
projectId={projectId?.toString()}
|
projectId={projectId?.toString()}
|
||||||
@ -309,7 +314,7 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
|
|||||||
</CustomMenu.MenuItem>
|
</CustomMenu.MenuItem>
|
||||||
<CustomMenu.MenuItem
|
<CustomMenu.MenuItem
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIsAddAsSubIssueOpen(true);
|
setSubIssuesListModal(true);
|
||||||
setPreloadedData({
|
setPreloadedData({
|
||||||
parent: issueDetails.id,
|
parent: issueDetails.id,
|
||||||
actionType: "createIssue",
|
actionType: "createIssue",
|
||||||
@ -329,11 +334,11 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
|
|||||||
issueActivities={issueActivities || []}
|
issueActivities={issueActivities || []}
|
||||||
mutate={mutateIssueActivities}
|
mutate={mutateIssueActivities}
|
||||||
/>
|
/>
|
||||||
<AddIssueComment mutate={mutateIssueActivities} />
|
<AddComment mutate={mutateIssueActivities} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="basis-1/3 space-y-5 border-l p-5">
|
<div className="basis-1/3 space-y-5 border-l p-5">
|
||||||
<IssueDetailSidebar
|
<IssueDetailsSidebar
|
||||||
control={control}
|
control={control}
|
||||||
issueDetail={issueDetails}
|
issueDetail={issueDetails}
|
||||||
submitChanges={submitChanges}
|
submitChanges={submitChanges}
|
||||||
|
|||||||
@ -1,8 +1,7 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import useSWR, { mutate } from "swr";
|
|
||||||
import { RectangleStackIcon } from "@heroicons/react/24/outline";
|
import useSWR from "swr";
|
||||||
import { PlusIcon } from "@heroicons/react/20/solid";
|
|
||||||
// lib
|
// lib
|
||||||
import { requiredAdmin, requiredAuth } from "lib/auth";
|
import { requiredAdmin, requiredAuth } from "lib/auth";
|
||||||
// services
|
// services
|
||||||
@ -13,30 +12,21 @@ import AppLayout from "layouts/app-layout";
|
|||||||
// contexts
|
// contexts
|
||||||
import { IssueViewContextProvider } from "contexts/issue-view.context";
|
import { IssueViewContextProvider } from "contexts/issue-view.context";
|
||||||
// components
|
// components
|
||||||
import ListView from "components/project/issues/list-view";
|
import { IssuesFilterView, IssuesView } from "components/core";
|
||||||
import BoardView from "components/project/issues/BoardView";
|
|
||||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
|
||||||
import { CreateUpdateIssueModal } from "components/issues";
|
|
||||||
import View from "components/core/view";
|
|
||||||
// ui
|
// ui
|
||||||
import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton } from "components/ui";
|
import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton } from "components/ui";
|
||||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||||
|
// icons
|
||||||
|
import { RectangleStackIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||||
// types
|
// types
|
||||||
import type { IIssue, UserAuth } from "types";
|
import type { UserAuth } from "types";
|
||||||
import type { NextPage, NextPageContext } from "next";
|
import type { NextPage, NextPageContext } from "next";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import { PROJECT_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
|
import { PROJECT_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
|
||||||
|
|
||||||
const ProjectIssues: NextPage<UserAuth> = (props) => {
|
const ProjectIssues: NextPage<UserAuth> = (props) => {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const router = useRouter();
|
||||||
const [selectedIssue, setSelectedIssue] = useState<
|
const { workspaceSlug, projectId } = router.query;
|
||||||
(IIssue & { actionType: "edit" | "delete" }) | undefined
|
|
||||||
>(undefined);
|
|
||||||
const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
|
|
||||||
|
|
||||||
const {
|
|
||||||
query: { workspaceSlug, projectId },
|
|
||||||
} = useRouter();
|
|
||||||
|
|
||||||
const { data: projectIssues } = useSWR(
|
const { data: projectIssues } = useSWR(
|
||||||
workspaceSlug && projectId
|
workspaceSlug && projectId
|
||||||
@ -54,20 +44,6 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
|
|||||||
: null
|
: null
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isOpen) {
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
setSelectedIssue(undefined);
|
|
||||||
clearTimeout(timer);
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
}, [isOpen]);
|
|
||||||
|
|
||||||
const handleEditIssue = (issue: IIssue) => {
|
|
||||||
setIsOpen(true);
|
|
||||||
setSelectedIssue({ ...issue, actionType: "edit" });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<IssueViewContextProvider>
|
<IssueViewContextProvider>
|
||||||
<AppLayout
|
<AppLayout
|
||||||
@ -79,7 +55,9 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
|
|||||||
}
|
}
|
||||||
right={
|
right={
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<View issues={projectIssues?.results.filter((p) => p.parent === null) ?? []} />
|
<IssuesFilterView
|
||||||
|
issues={projectIssues?.results.filter((p) => p.parent === null) ?? []}
|
||||||
|
/>
|
||||||
<HeaderButton
|
<HeaderButton
|
||||||
Icon={PlusIcon}
|
Icon={PlusIcon}
|
||||||
label="Add Issue"
|
label="Add Issue"
|
||||||
@ -93,34 +71,12 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
|
|||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<CreateUpdateIssueModal
|
{projectIssues ? (
|
||||||
isOpen={isOpen && selectedIssue?.actionType !== "delete"}
|
projectIssues.count > 0 ? (
|
||||||
prePopulateData={{ ...selectedIssue }}
|
<IssuesView
|
||||||
handleClose={() => setIsOpen(false)}
|
|
||||||
data={selectedIssue}
|
|
||||||
/>
|
|
||||||
<ConfirmIssueDeletion
|
|
||||||
handleClose={() => setDeleteIssue(undefined)}
|
|
||||||
isOpen={!!deleteIssue}
|
|
||||||
data={projectIssues?.results.find((issue) => issue.id === deleteIssue)}
|
|
||||||
/>
|
|
||||||
{!projectIssues ? (
|
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
|
||||||
<Spinner />
|
|
||||||
</div>
|
|
||||||
) : projectIssues.count > 0 ? (
|
|
||||||
<>
|
|
||||||
<ListView
|
|
||||||
issues={projectIssues?.results.filter((p) => p.parent === null) ?? []}
|
issues={projectIssues?.results.filter((p) => p.parent === null) ?? []}
|
||||||
handleEditIssue={handleEditIssue}
|
|
||||||
userAuth={props}
|
userAuth={props}
|
||||||
/>
|
/>
|
||||||
<BoardView
|
|
||||||
issues={projectIssues?.results.filter((p) => p.parent === null) ?? []}
|
|
||||||
handleDeleteIssue={setDeleteIssue}
|
|
||||||
userAuth={props}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
) : (
|
||||||
<div className="grid h-full w-full place-items-center px-4 sm:px-0">
|
<div className="grid h-full w-full place-items-center px-4 sm:px-0">
|
||||||
<EmptySpace
|
<EmptySpace
|
||||||
@ -137,10 +93,20 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
|
|||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
Icon={PlusIcon}
|
Icon={PlusIcon}
|
||||||
action={() => setIsOpen(true)}
|
action={() => {
|
||||||
|
const e = new KeyboardEvent("keydown", {
|
||||||
|
key: "c",
|
||||||
|
});
|
||||||
|
document.dispatchEvent(e);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</EmptySpace>
|
</EmptySpace>
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</AppLayout>
|
</AppLayout>
|
||||||
</IssueViewContextProvider>
|
</IssueViewContextProvider>
|
||||||
|
|||||||
@ -8,21 +8,15 @@ import useSWR, { mutate } from "swr";
|
|||||||
import { requiredAdmin, requiredAuth } from "lib/auth";
|
import { requiredAdmin, requiredAuth } from "lib/auth";
|
||||||
// services
|
// services
|
||||||
import modulesService from "services/modules.service";
|
import modulesService from "services/modules.service";
|
||||||
import projectService from "services/project.service";
|
|
||||||
import issuesService from "services/issues.service";
|
import issuesService from "services/issues.service";
|
||||||
// layouts
|
// layouts
|
||||||
import AppLayout from "layouts/app-layout";
|
import AppLayout from "layouts/app-layout";
|
||||||
// contexts
|
// contexts
|
||||||
import { IssueViewContextProvider } from "contexts/issue-view.context";
|
import { IssueViewContextProvider } from "contexts/issue-view.context";
|
||||||
// components
|
// components
|
||||||
import ExistingIssuesListModal from "components/common/existing-issues-list-modal";
|
import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
|
||||||
import ModulesBoardView from "components/project/modules/board-view";
|
|
||||||
import ModulesListView from "components/project/modules/list-view";
|
|
||||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
|
||||||
import ModuleDetailSidebar from "components/project/modules/module-detail-sidebar";
|
|
||||||
import ConfirmModuleDeletion from "components/project/modules/confirm-module-deletion";
|
|
||||||
import { CreateUpdateIssueModal } from "components/issues";
|
import { CreateUpdateIssueModal } from "components/issues";
|
||||||
import View from "components/core/view";
|
import { DeleteModuleModal, ModuleDetailsSidebar } from "components/modules";
|
||||||
// ui
|
// ui
|
||||||
import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
|
import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
|
||||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||||
@ -46,11 +40,10 @@ import {
|
|||||||
import { NextPageContext } from "next";
|
import { NextPageContext } from "next";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import {
|
import {
|
||||||
MODULE_DETAIL,
|
MODULE_DETAILS,
|
||||||
MODULE_ISSUES,
|
MODULE_ISSUES,
|
||||||
MODULE_LIST,
|
MODULE_LIST,
|
||||||
PROJECT_ISSUES_LIST,
|
PROJECT_ISSUES_LIST,
|
||||||
PROJECT_MEMBERS,
|
|
||||||
} from "constants/fetch-keys";
|
} from "constants/fetch-keys";
|
||||||
|
|
||||||
const SingleModule: React.FC<UserAuth> = (props) => {
|
const SingleModule: React.FC<UserAuth> = (props) => {
|
||||||
@ -59,7 +52,6 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
|||||||
const [selectedIssues, setSelectedIssues] = useState<SelectIssue>(null);
|
const [selectedIssues, setSelectedIssues] = useState<SelectIssue>(null);
|
||||||
const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
|
const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
|
||||||
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
|
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
|
||||||
const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
|
|
||||||
const [selectedModuleForDelete, setSelectedModuleForDelete] = useState<SelectModuleType>();
|
const [selectedModuleForDelete, setSelectedModuleForDelete] = useState<SelectModuleType>();
|
||||||
const [preloadedData, setPreloadedData] = useState<
|
const [preloadedData, setPreloadedData] = useState<
|
||||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | null
|
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | null
|
||||||
@ -96,8 +88,8 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
|||||||
: null
|
: null
|
||||||
);
|
);
|
||||||
|
|
||||||
const { data: moduleDetail } = useSWR<IModule>(
|
const { data: moduleDetails } = useSWR<IModule>(
|
||||||
MODULE_DETAIL,
|
moduleId ? MODULE_DETAILS(moduleId as string) : null,
|
||||||
workspaceSlug && projectId
|
workspaceSlug && projectId
|
||||||
? () =>
|
? () =>
|
||||||
modulesService.getModuleDetails(
|
modulesService.getModuleDetails(
|
||||||
@ -108,19 +100,6 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
|||||||
: null
|
: null
|
||||||
);
|
);
|
||||||
|
|
||||||
const { data: members } = useSWR(
|
|
||||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
|
|
||||||
: null,
|
|
||||||
{
|
|
||||||
onErrorRetry(err, _, __, revalidate, revalidateOpts) {
|
|
||||||
if (err?.status === 403) return;
|
|
||||||
setTimeout(() => revalidate(revalidateOpts), 5000);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const moduleIssuesArray = moduleIssues?.map((issue) => ({
|
const moduleIssuesArray = moduleIssues?.map((issue) => ({
|
||||||
...issue.issue_detail,
|
...issue.issue_detail,
|
||||||
sub_issues_count: issue.sub_issues_count,
|
sub_issues_count: issue.sub_issues_count,
|
||||||
@ -156,34 +135,10 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
|||||||
setModuleIssuesListModal(true);
|
setModuleIssuesListModal(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const removeIssueFromModule = (issueId: string) => {
|
|
||||||
if (!workspaceSlug || !projectId) return;
|
|
||||||
|
|
||||||
mutate<ModuleIssueResponse[]>(
|
|
||||||
MODULE_ISSUES(moduleId as string),
|
|
||||||
(prevData) => prevData?.filter((p) => p.id !== issueId),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
modulesService
|
|
||||||
.removeIssueFromModule(
|
|
||||||
workspaceSlug as string,
|
|
||||||
projectId as string,
|
|
||||||
moduleId as string,
|
|
||||||
issueId
|
|
||||||
)
|
|
||||||
.then((res) => {
|
|
||||||
console.log(res);
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteModule = () => {
|
const handleDeleteModule = () => {
|
||||||
if (!moduleDetail) return;
|
if (!moduleDetails) return;
|
||||||
|
|
||||||
setSelectedModuleForDelete({ ...moduleDetail, actionType: "delete" });
|
setSelectedModuleForDelete({ ...moduleDetails, actionType: "delete" });
|
||||||
setModuleDeleteModal(true);
|
setModuleDeleteModal(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -208,12 +163,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
|||||||
issues={issues?.results.filter((i) => !i.issue_module) ?? []}
|
issues={issues?.results.filter((i) => !i.issue_module) ?? []}
|
||||||
handleOnSubmit={handleAddIssuesToModule}
|
handleOnSubmit={handleAddIssuesToModule}
|
||||||
/>
|
/>
|
||||||
<ConfirmIssueDeletion
|
<DeleteModuleModal
|
||||||
handleClose={() => setDeleteIssue(undefined)}
|
|
||||||
isOpen={!!deleteIssue}
|
|
||||||
data={moduleIssuesArray?.find((issue) => issue.id === deleteIssue)}
|
|
||||||
/>
|
|
||||||
<ConfirmModuleDeletion
|
|
||||||
isOpen={
|
isOpen={
|
||||||
moduleDeleteModal &&
|
moduleDeleteModal &&
|
||||||
!!selectedModuleForDelete &&
|
!!selectedModuleForDelete &&
|
||||||
@ -226,7 +176,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
|||||||
breadcrumbs={
|
breadcrumbs={
|
||||||
<Breadcrumbs>
|
<Breadcrumbs>
|
||||||
<BreadcrumbItem
|
<BreadcrumbItem
|
||||||
title={`${moduleDetail?.project_detail.name ?? "Project"} Modules`}
|
title={`${moduleDetails?.project_detail.name ?? "Project"} Modules`}
|
||||||
link={`/${workspaceSlug}/projects/${projectId}/modules`}
|
link={`/${workspaceSlug}/projects/${projectId}/modules`}
|
||||||
/>
|
/>
|
||||||
</Breadcrumbs>
|
</Breadcrumbs>
|
||||||
@ -236,7 +186,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
|||||||
label={
|
label={
|
||||||
<>
|
<>
|
||||||
<RectangleGroupIcon className="h-3 w-3" />
|
<RectangleGroupIcon className="h-3 w-3" />
|
||||||
{modules?.find((c) => c.id === moduleId)?.name}
|
{moduleDetails?.name}
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
className="ml-1.5"
|
className="ml-1.5"
|
||||||
@ -257,7 +207,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
|||||||
<div
|
<div
|
||||||
className={`flex items-center gap-2 ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}
|
className={`flex items-center gap-2 ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}
|
||||||
>
|
>
|
||||||
<View issues={moduleIssuesArray ?? []} />
|
<IssuesFilterView issues={moduleIssuesArray ?? []} />
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100 ${
|
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100 ${
|
||||||
@ -273,22 +223,11 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
|||||||
{moduleIssuesArray ? (
|
{moduleIssuesArray ? (
|
||||||
moduleIssuesArray.length > 0 ? (
|
moduleIssuesArray.length > 0 ? (
|
||||||
<div className={`h-full ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}>
|
<div className={`h-full ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}>
|
||||||
<ModulesListView
|
<IssuesView
|
||||||
|
type="module"
|
||||||
issues={moduleIssuesArray ?? []}
|
issues={moduleIssuesArray ?? []}
|
||||||
openCreateIssueModal={openCreateIssueModal}
|
|
||||||
openIssuesListModal={openIssuesListModal}
|
|
||||||
removeIssueFromModule={removeIssueFromModule}
|
|
||||||
setPreloadedData={setPreloadedData}
|
|
||||||
userAuth={props}
|
userAuth={props}
|
||||||
/>
|
|
||||||
<ModulesBoardView
|
|
||||||
issues={moduleIssuesArray ?? []}
|
|
||||||
members={members}
|
|
||||||
openCreateIssueModal={openCreateIssueModal}
|
|
||||||
openIssuesListModal={openIssuesListModal}
|
openIssuesListModal={openIssuesListModal}
|
||||||
handleDeleteIssue={setDeleteIssue}
|
|
||||||
setPreloadedData={setPreloadedData}
|
|
||||||
userAuth={props}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
@ -306,13 +245,13 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
|||||||
title="Create a new issue"
|
title="Create a new issue"
|
||||||
description="Click to create a new issue inside the module."
|
description="Click to create a new issue inside the module."
|
||||||
Icon={PlusIcon}
|
Icon={PlusIcon}
|
||||||
action={() => openCreateIssueModal()}
|
action={openCreateIssueModal}
|
||||||
/>
|
/>
|
||||||
<EmptySpaceItem
|
<EmptySpaceItem
|
||||||
title="Add an existing issue"
|
title="Add an existing issue"
|
||||||
description="Open list"
|
description="Open list"
|
||||||
Icon={ListBulletIcon}
|
Icon={ListBulletIcon}
|
||||||
action={() => openIssuesListModal()}
|
action={openIssuesListModal}
|
||||||
/>
|
/>
|
||||||
</EmptySpace>
|
</EmptySpace>
|
||||||
</div>
|
</div>
|
||||||
@ -322,8 +261,8 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
|||||||
<Spinner />
|
<Spinner />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<ModuleDetailSidebar
|
<ModuleDetailsSidebar
|
||||||
module={modules?.find((m) => m.id === moduleId)}
|
module={moduleDetails}
|
||||||
isOpen={moduleSidebar}
|
isOpen={moduleSidebar}
|
||||||
moduleIssues={moduleIssues}
|
moduleIssues={moduleIssues}
|
||||||
handleDeleteModule={handleDeleteModule}
|
handleDeleteModule={handleDeleteModule}
|
||||||
|
|||||||
@ -12,7 +12,7 @@ import { requiredAuth } from "lib/auth";
|
|||||||
import projectService from "services/project.service";
|
import projectService from "services/project.service";
|
||||||
import modulesService from "services/modules.service";
|
import modulesService from "services/modules.service";
|
||||||
// components
|
// components
|
||||||
import SingleModuleCard from "components/project/modules/single-module-card";
|
import { SingleModuleCard } from "components/modules";
|
||||||
// ui
|
// ui
|
||||||
import { EmptySpace, EmptySpaceItem, HeaderButton, Loader } from "components/ui";
|
import { EmptySpace, EmptySpaceItem, HeaderButton, Loader } from "components/ui";
|
||||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||||
|
|||||||
@ -13,11 +13,7 @@ import { requiredAdmin } from "lib/auth";
|
|||||||
// layouts
|
// layouts
|
||||||
import SettingsLayout from "layouts/settings-layout";
|
import SettingsLayout from "layouts/settings-layout";
|
||||||
// components
|
// components
|
||||||
import ConfirmStateDeletion from "components/project/issues/BoardView/state/confirm-state-delete";
|
import { CreateUpdateStateInline, DeleteStateModal, StateGroup } from "components/states";
|
||||||
import {
|
|
||||||
CreateUpdateStateInline,
|
|
||||||
StateGroup,
|
|
||||||
} from "components/project/issues/BoardView/state/create-update-state-inline";
|
|
||||||
// ui
|
// ui
|
||||||
import { Loader } from "components/ui";
|
import { Loader } from "components/ui";
|
||||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||||
@ -67,7 +63,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ConfirmStateDeletion
|
<DeleteStateModal
|
||||||
isOpen={!!selectDeleteState}
|
isOpen={!!selectDeleteState}
|
||||||
data={states?.find((state) => state.id === selectDeleteState) ?? null}
|
data={states?.find((state) => state.id === selectDeleteState) ?? null}
|
||||||
onClose={() => setSelectDeleteState(null)}
|
onClose={() => setSelectDeleteState(null)}
|
||||||
|
|||||||
@ -21,7 +21,7 @@ import SettingsLayout from "layouts/settings-layout";
|
|||||||
// hooks
|
// hooks
|
||||||
import useToast from "hooks/use-toast";
|
import useToast from "hooks/use-toast";
|
||||||
// components
|
// components
|
||||||
import { ImageUploadModal } from "components/common/image-upload-modal";
|
import { ImageUploadModal } from "components/core";
|
||||||
import ConfirmWorkspaceDeletion from "components/workspace/confirm-workspace-deletion";
|
import ConfirmWorkspaceDeletion from "components/workspace/confirm-workspace-deletion";
|
||||||
// ui
|
// ui
|
||||||
import { Spinner, Button, Input, CustomSelect } from "components/ui";
|
import { Spinner, Button, Input, CustomSelect } from "components/ui";
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user