mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
feat: sub-issues, fix: loading screen after sign out
This commit is contained in:
Aaryan Khandelwal
parent
2acada35e2
commit
3e5e1ab403
196
apps/app/components/command-palette/addAsSubIssue.tsx
Normal file
196
apps/app/components/command-palette/addAsSubIssue.tsx
Normal file
@ -0,0 +1,196 @@
|
||||
import React, { useState } from "react";
|
||||
// swr
|
||||
import { mutate } from "swr";
|
||||
// react hook form
|
||||
import { useForm } from "react-hook-form";
|
||||
// headless ui
|
||||
import { Combobox, Dialog, Transition } from "@headlessui/react";
|
||||
// hooks
|
||||
import useUser from "lib/hooks/useUser";
|
||||
// icons
|
||||
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
|
||||
import { FolderIcon } from "@heroicons/react/24/outline";
|
||||
// commons
|
||||
import { classNames } from "constants/common";
|
||||
// types
|
||||
import { IIssue, IssueResponse } from "types";
|
||||
import { Button } from "ui";
|
||||
import { PROJECT_ISSUES_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
|
||||
import issuesServices from "lib/services/issues.services";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
parentId: string;
|
||||
};
|
||||
|
||||
type FormInput = {
|
||||
issue_ids: string[];
|
||||
cycleId: string;
|
||||
};
|
||||
|
||||
const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parentId }) => {
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
const { activeWorkspace, activeProject, issues } = useUser();
|
||||
|
||||
const filteredIssues: IIssue[] =
|
||||
query === ""
|
||||
? issues?.results ?? []
|
||||
: issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
|
||||
[];
|
||||
|
||||
const {
|
||||
register,
|
||||
formState: { errors, isSubmitting },
|
||||
handleSubmit,
|
||||
control,
|
||||
reset,
|
||||
setError,
|
||||
} = useForm<FormInput>();
|
||||
|
||||
const handleCommandPaletteClose = () => {
|
||||
setIsOpen(false);
|
||||
setQuery("");
|
||||
reset();
|
||||
};
|
||||
|
||||
const addAsSubIssue = (issueId: string) => {
|
||||
if (activeWorkspace && activeProject) {
|
||||
issuesServices
|
||||
.patchIssue(activeWorkspace.slug, activeProject.id, issueId, { parent: parentId })
|
||||
.then((res) => {
|
||||
mutate<IssueResponse>(
|
||||
PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id),
|
||||
(prevData) => ({
|
||||
...(prevData as IssueResponse),
|
||||
results: (prevData?.results ?? []).map((p) =>
|
||||
p.id === issueId ? { ...p, ...res } : p
|
||||
),
|
||||
}),
|
||||
false
|
||||
);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
|
||||
<Dialog as="div" className="relative z-10" onClose={handleCommandPaletteClose}>
|
||||
<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-25 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||
<Combobox
|
||||
// onChange={(item: ItemType) => {
|
||||
// const { url, onClick } = item;
|
||||
// if (url) router.push(url);
|
||||
// else if (onClick) onClick();
|
||||
// handleCommandPaletteClose();
|
||||
// }}
|
||||
>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
|
||||
placeholder="Search..."
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Combobox.Options
|
||||
static
|
||||
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
|
||||
>
|
||||
{filteredIssues.length > 0 && (
|
||||
<>
|
||||
<li className="p-2">
|
||||
{query === "" && (
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
|
||||
Issues
|
||||
</h2>
|
||||
)}
|
||||
<ul className="text-sm text-gray-700">
|
||||
{filteredIssues.map((issue) => {
|
||||
if (issue.parent === "" || issue.parent === null)
|
||||
return (
|
||||
<Combobox.Option
|
||||
key={issue.id}
|
||||
value={{
|
||||
name: issue.name,
|
||||
}}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
"flex items-center gap-2 cursor-pointer select-none rounded-md px-3 py-2",
|
||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||
)
|
||||
}
|
||||
onClick={() => {
|
||||
addAsSubIssue(issue.id);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={`h-1.5 w-1.5 block rounded-full`}
|
||||
style={{
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
{issue.name}
|
||||
</Combobox.Option>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</Combobox.Options>
|
||||
|
||||
{query !== "" && filteredIssues.length === 0 && (
|
||||
<div className="py-14 px-6 text-center sm:px-14">
|
||||
<FolderIcon
|
||||
className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="mt-4 text-sm text-gray-900">
|
||||
We couldn{"'"}t find any issue with that term. Please try again.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Combobox>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddAsSubIssue;
|
||||
@ -1,4 +1,3 @@
|
||||
import { FC } from "react";
|
||||
import { EditorState, LexicalEditor, $getRoot, $getSelection } from "lexical";
|
||||
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
||||
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
||||
@ -25,12 +24,15 @@ export interface RichTextEditorProps {
|
||||
onChange: (state: string) => void;
|
||||
id: string;
|
||||
value: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
const RichTextEditor: FC<RichTextEditorProps> = (props) => {
|
||||
// props
|
||||
const { onChange, value, id } = props;
|
||||
|
||||
const RichTextEditor: React.FC<RichTextEditorProps> = ({
|
||||
onChange,
|
||||
id,
|
||||
value,
|
||||
placeholder = "Enter some text...",
|
||||
}) => {
|
||||
function handleChange(state: EditorState, editor: LexicalEditor) {
|
||||
state.read(() => {
|
||||
onChange(JSON.stringify(state.toJSON()));
|
||||
@ -54,8 +56,8 @@ const RichTextEditor: FC<RichTextEditorProps> = (props) => {
|
||||
}
|
||||
ErrorBoundary={LexicalErrorBoundary}
|
||||
placeholder={
|
||||
<div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
|
||||
Enter some text...
|
||||
<div className="absolute top-4 left-3 pointer-events-none select-none text-gray-400">
|
||||
{placeholder}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
@ -262,7 +262,7 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<input
|
||||
type="date"
|
||||
value={value ?? new Date().toString()}
|
||||
value={""}
|
||||
onChange={(e: any) => {
|
||||
submitChanges({ target_date: e.target.value });
|
||||
onChange(e.target.value);
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
// hooks
|
||||
import useUser from "lib/hooks/useUser";
|
||||
// layouts
|
||||
import Container from "layouts/Container";
|
||||
import Sidebar from "layouts/Navbar/Sidebar";
|
||||
@ -11,6 +15,14 @@ import type { Props } from "./types";
|
||||
const AdminLayout: React.FC<Props> = ({ meta, children }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { user, isUserLoading } = useUser();
|
||||
|
||||
useEffect(() => {
|
||||
if (!isUserLoading && (!user || user === null)) router.push("/signin");
|
||||
}, [isUserLoading, user, router]);
|
||||
|
||||
return (
|
||||
<Container meta={meta}>
|
||||
<CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} />
|
||||
|
||||
@ -22,8 +22,8 @@ class ProjectIssuesServices extends APIService {
|
||||
super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
|
||||
}
|
||||
|
||||
async createIssues(workspace_slug: string, projectId: string, data: any): Promise<any> {
|
||||
return this.post(ISSUES_ENDPOINT(workspace_slug, projectId), data)
|
||||
async createIssues(workspaceSlug: string, projectId: string, data: any): Promise<any> {
|
||||
return this.post(ISSUES_ENDPOINT(workspaceSlug, projectId), data)
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -32,8 +32,8 @@ class ProjectIssuesServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async getIssues(workspace_slug: string, projectId: string): Promise<any> {
|
||||
return this.get(ISSUES_ENDPOINT(workspace_slug, projectId))
|
||||
async getIssues(workspaceSlug: string, projectId: string): Promise<any> {
|
||||
return this.get(ISSUES_ENDPOINT(workspaceSlug, projectId))
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -42,8 +42,8 @@ class ProjectIssuesServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async getIssue(workspace_slug: string, projectId: string, issueId: string): Promise<any> {
|
||||
return this.get(ISSUE_DETAIL(workspace_slug, projectId, issueId))
|
||||
async getIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
|
||||
return this.get(ISSUE_DETAIL(workspaceSlug, projectId, issueId))
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -53,11 +53,11 @@ class ProjectIssuesServices extends APIService {
|
||||
}
|
||||
|
||||
async getIssueActivities(
|
||||
workspace_slug: string,
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string
|
||||
): Promise<any> {
|
||||
return this.get(ISSUE_ACTIVITIES(workspace_slug, projectId, issueId))
|
||||
return this.get(ISSUE_ACTIVITIES(workspaceSlug, projectId, issueId))
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -66,8 +66,8 @@ class ProjectIssuesServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async getIssueComments(workspace_slug: string, projectId: string, issueId: string): Promise<any> {
|
||||
return this.get(ISSUE_COMMENTS(workspace_slug, projectId, issueId))
|
||||
async getIssueComments(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
|
||||
return this.get(ISSUE_COMMENTS(workspaceSlug, projectId, issueId))
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -76,8 +76,8 @@ class ProjectIssuesServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async getIssueProperties(workspace_slug: string, projectId: string): Promise<any> {
|
||||
return this.get(ISSUE_PROPERTIES_ENDPOINT(workspace_slug, projectId))
|
||||
async getIssueProperties(workspaceSlug: string, projectId: string): Promise<any> {
|
||||
return this.get(ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId))
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -87,14 +87,14 @@ class ProjectIssuesServices extends APIService {
|
||||
}
|
||||
|
||||
async addIssueToSprint(
|
||||
workspace_slug: string,
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
cycleId: string,
|
||||
data: {
|
||||
issue: string;
|
||||
}
|
||||
) {
|
||||
return this.post(CYCLE_DETAIL(workspace_slug, projectId, cycleId), data)
|
||||
return this.post(CYCLE_DETAIL(workspaceSlug, projectId, cycleId), data)
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -103,8 +103,8 @@ class ProjectIssuesServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async createIssueProperties(workspace_slug: string, projectId: string, data: any): Promise<any> {
|
||||
return this.post(ISSUE_PROPERTIES_ENDPOINT(workspace_slug, projectId), data)
|
||||
async createIssueProperties(workspaceSlug: string, projectId: string, data: any): Promise<any> {
|
||||
return this.post(ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId), data)
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -114,13 +114,13 @@ class ProjectIssuesServices extends APIService {
|
||||
}
|
||||
|
||||
async patchIssueProperties(
|
||||
workspace_slug: string,
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issuePropertyId: string,
|
||||
data: any
|
||||
): Promise<any> {
|
||||
return this.patch(
|
||||
ISSUE_PROPERTIES_ENDPOINT(workspace_slug, projectId) + `${issuePropertyId}/`,
|
||||
ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId) + `${issuePropertyId}/`,
|
||||
data
|
||||
)
|
||||
|
||||
@ -133,12 +133,12 @@ class ProjectIssuesServices extends APIService {
|
||||
}
|
||||
|
||||
async createIssueComment(
|
||||
workspace_slug: string,
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
data: any
|
||||
): Promise<any> {
|
||||
return this.post(ISSUE_COMMENTS(workspace_slug, projectId, issueId), data)
|
||||
return this.post(ISSUE_COMMENTS(workspaceSlug, projectId, issueId), data)
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -148,13 +148,13 @@ class ProjectIssuesServices extends APIService {
|
||||
}
|
||||
|
||||
async patchIssueComment(
|
||||
workspace_slug: string,
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
commentId: string,
|
||||
data: IIssueComment
|
||||
): Promise<any> {
|
||||
return this.patch(ISSUE_COMMENT_DETAIL(workspace_slug, projectId, issueId, commentId), data)
|
||||
return this.patch(ISSUE_COMMENT_DETAIL(workspaceSlug, projectId, issueId, commentId), data)
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -164,12 +164,12 @@ class ProjectIssuesServices extends APIService {
|
||||
}
|
||||
|
||||
async deleteIssueComment(
|
||||
workspace_slug: string,
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
commentId: string
|
||||
): Promise<any> {
|
||||
return this.delete(ISSUE_COMMENT_DETAIL(workspace_slug, projectId, issueId, commentId))
|
||||
return this.delete(ISSUE_COMMENT_DETAIL(workspaceSlug, projectId, issueId, commentId))
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -178,8 +178,8 @@ class ProjectIssuesServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async getIssueLabels(workspace_slug: string, projectId: string): Promise<any> {
|
||||
return this.get(ISSUE_LABELS(workspace_slug, projectId))
|
||||
async getIssueLabels(workspaceSlug: string, projectId: string): Promise<any> {
|
||||
return this.get(ISSUE_LABELS(workspaceSlug, projectId))
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -188,8 +188,8 @@ class ProjectIssuesServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async createIssueLabel(workspace_slug: string, projectId: string, data: any): Promise<any> {
|
||||
return this.post(ISSUE_LABELS(workspace_slug, projectId), data)
|
||||
async createIssueLabel(workspaceSlug: string, projectId: string, data: any): Promise<any> {
|
||||
return this.post(ISSUE_LABELS(workspaceSlug, projectId), data)
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -199,12 +199,12 @@ class ProjectIssuesServices extends APIService {
|
||||
}
|
||||
|
||||
async updateIssue(
|
||||
workspace_slug: string,
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
data: any
|
||||
): Promise<any> {
|
||||
return this.put(ISSUE_DETAIL(workspace_slug, projectId, issueId), data)
|
||||
return this.put(ISSUE_DETAIL(workspaceSlug, projectId, issueId), data)
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -214,12 +214,12 @@ class ProjectIssuesServices extends APIService {
|
||||
}
|
||||
|
||||
async patchIssue(
|
||||
workspace_slug: string,
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
data: Partial<IIssue>
|
||||
): Promise<any> {
|
||||
return this.patch(ISSUE_DETAIL(workspace_slug, projectId, issueId), data)
|
||||
return this.patch(ISSUE_DETAIL(workspaceSlug, projectId, issueId), data)
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -228,8 +228,8 @@ class ProjectIssuesServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async deleteIssue(workspace_slug: string, projectId: string, issuesId: string): Promise<any> {
|
||||
return this.delete(ISSUE_DETAIL(workspace_slug, projectId, issuesId))
|
||||
async deleteIssue(workspaceSlug: string, projectId: string, issuesId: string): Promise<any> {
|
||||
return this.delete(ISSUE_DETAIL(workspaceSlug, projectId, issuesId))
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -238,8 +238,8 @@ class ProjectIssuesServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async bulkDeleteIssues(workspace_slug: string, projectId: string, data: any): Promise<any> {
|
||||
return this.delete(BULK_DELETE_ISSUES(workspace_slug, projectId), data)
|
||||
async bulkDeleteIssues(workspaceSlug: string, projectId: string, data: any): Promise<any> {
|
||||
return this.delete(BULK_DELETE_ISSUES(workspaceSlug, projectId), data)
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
@ -249,12 +249,12 @@ class ProjectIssuesServices extends APIService {
|
||||
}
|
||||
|
||||
async bulkAddIssuesToCycle(
|
||||
workspace_slug: string,
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
cycleId: string,
|
||||
data: any
|
||||
): Promise<any> {
|
||||
return this.post(BULK_ADD_ISSUES_TO_CYCLE(workspace_slug, projectId, cycleId), data)
|
||||
return this.post(BULK_ADD_ISSUES_TO_CYCLE(workspaceSlug, projectId, cycleId), data)
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
|
||||
@ -1,19 +1,26 @@
|
||||
// next
|
||||
import type { NextPage } from "next";
|
||||
import { useRouter } from "next/router";
|
||||
import dynamic from "next/dynamic";
|
||||
// react
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
import useSWR, { mutate } from "swr";
|
||||
// react hook form
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
// headless ui
|
||||
import { Tab } from "@headlessui/react";
|
||||
import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import issuesServices from "lib/services/issues.services";
|
||||
import stateServices from "lib/services/state.services";
|
||||
// fetch keys
|
||||
import { PROJECT_ISSUES_ACTIVITY, PROJECT_ISSUES_COMMENTS, STATE_LIST } from "constants/fetch-keys";
|
||||
import {
|
||||
PROJECT_ISSUES_ACTIVITY,
|
||||
PROJECT_ISSUES_COMMENTS,
|
||||
PROJECT_ISSUES_DETAILS,
|
||||
PROJECT_ISSUES_LIST,
|
||||
STATE_LIST,
|
||||
} from "constants/fetch-keys";
|
||||
// hooks
|
||||
import useUser from "lib/hooks/useUser";
|
||||
// layouts
|
||||
@ -34,7 +41,14 @@ import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
|
||||
// types
|
||||
import { IIssue, IIssueComment, IssueResponse, IState } from "types";
|
||||
// icons
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
EllipsisHorizontalIcon,
|
||||
PlusIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import Link from "next/link";
|
||||
import AddAsSubIssue from "components/command-palette/addAsSubIssue";
|
||||
|
||||
const IssueDetail: NextPage = () => {
|
||||
const router = useRouter();
|
||||
@ -44,9 +58,24 @@ const IssueDetail: NextPage = () => {
|
||||
const { activeWorkspace, activeProject, issues, mutateIssues } = useUser();
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false);
|
||||
|
||||
const [issueDetail, setIssueDetail] = useState<IIssue | undefined>(undefined);
|
||||
|
||||
const [preloadedData, setPreloadedData] = useState<
|
||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
||||
>(undefined);
|
||||
|
||||
const [issueDescriptionValue, setIssueDescriptionValue] = useState("");
|
||||
const handleDescriptionChange: any = (value: any) => {
|
||||
console.log(value);
|
||||
setIssueDescriptionValue(value);
|
||||
};
|
||||
|
||||
const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
formState: { errors },
|
||||
@ -151,14 +180,44 @@ const IssueDetail: NextPage = () => {
|
||||
const prevIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) - 1];
|
||||
const nextIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) + 1];
|
||||
|
||||
const subIssues = (issues && issues.results.filter((i) => i.parent === issueDetail?.id)) ?? [];
|
||||
|
||||
const handleRemove = (issueId: string) => {
|
||||
if (activeWorkspace && activeProject) {
|
||||
issuesServices
|
||||
.patchIssue(activeWorkspace.slug, activeProject.id, issueId, { parent: null })
|
||||
.then((res) => {
|
||||
mutate<IssueResponse>(
|
||||
PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id),
|
||||
(prevData) => ({
|
||||
...(prevData as IssueResponse),
|
||||
results: (prevData?.results ?? []).map((p) =>
|
||||
p.id === issueId ? { ...p, ...res } : p
|
||||
),
|
||||
}),
|
||||
false
|
||||
);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AdminLayout>
|
||||
<CreateUpdateIssuesModal
|
||||
isOpen={isOpen}
|
||||
setIsOpen={setIsOpen}
|
||||
projectId={projectId as string}
|
||||
data={isOpen ? issueDetail : undefined}
|
||||
isUpdatingSingleIssue
|
||||
prePopulateData={{
|
||||
...preloadedData,
|
||||
}}
|
||||
/>
|
||||
<AddAsSubIssue
|
||||
isOpen={isAddAsSubIssueOpen}
|
||||
setIsOpen={setIsAddAsSubIssueOpen}
|
||||
parentId={issueDetail?.id ?? ""}
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between w-full mb-5">
|
||||
@ -200,33 +259,235 @@ const IssueDetail: NextPage = () => {
|
||||
<div className="grid grid-cols-4 gap-5">
|
||||
<div className="col-span-3 space-y-5">
|
||||
<div className="bg-secondary rounded-lg p-4">
|
||||
<TextArea
|
||||
id="name"
|
||||
placeholder="Enter issue name"
|
||||
name="name"
|
||||
autoComplete="off"
|
||||
validations={{ required: true }}
|
||||
register={register}
|
||||
onChange={debounce(() => {
|
||||
handleSubmit(submitChanges)();
|
||||
}, 5000)}
|
||||
mode="transparent"
|
||||
className="text-xl font-medium"
|
||||
/>
|
||||
<TextArea
|
||||
id="description"
|
||||
{/* <Controller
|
||||
control={control}
|
||||
name="description"
|
||||
error={errors.description}
|
||||
validations={{
|
||||
required: true,
|
||||
}}
|
||||
onChange={debounce(() => {
|
||||
handleSubmit(submitChanges)();
|
||||
}, 5000)}
|
||||
placeholder="Enter issue description"
|
||||
mode="transparent"
|
||||
register={register}
|
||||
/>
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<RichTextEditor
|
||||
onChange={(state: string) => {
|
||||
handleDescriptionChange(state);
|
||||
onChange(issueDescriptionValue);
|
||||
}}
|
||||
value={issueDescriptionValue}
|
||||
id="editor"
|
||||
/>
|
||||
)}
|
||||
/> */}
|
||||
<div>
|
||||
<TextArea
|
||||
id="name"
|
||||
placeholder="Enter issue name"
|
||||
name="name"
|
||||
autoComplete="off"
|
||||
validations={{ required: true }}
|
||||
register={register}
|
||||
onChange={debounce(() => {
|
||||
handleSubmit(submitChanges)();
|
||||
}, 5000)}
|
||||
mode="transparent"
|
||||
className="text-xl font-medium"
|
||||
/>
|
||||
<TextArea
|
||||
id="description"
|
||||
name="description"
|
||||
error={errors.description}
|
||||
validations={{
|
||||
required: true,
|
||||
}}
|
||||
onChange={debounce(() => {
|
||||
handleSubmit(submitChanges)();
|
||||
}, 5000)}
|
||||
placeholder="Enter issue description"
|
||||
mode="transparent"
|
||||
register={register}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
{subIssues && subIssues.length > 0 ? (
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="flex justify-between items-center">
|
||||
<Disclosure.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
|
||||
<ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
|
||||
Sub-issues{" "}
|
||||
<span className="text-gray-600 ml-1">{subIssues.length}</span>
|
||||
</Disclosure.Button>
|
||||
{open ? (
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium"
|
||||
onClick={() => {
|
||||
setIsOpen(true);
|
||||
setPreloadedData({
|
||||
parent: issueDetail.id,
|
||||
actionType: "createIssue",
|
||||
});
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
Add new
|
||||
</button>
|
||||
|
||||
<Menu as="div" className="relative inline-block">
|
||||
<Menu.Button className="grid relative place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none">
|
||||
<EllipsisHorizontalIcon className="h-4 w-4" />
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
|
||||
<div className="p-1">
|
||||
<Menu.Item as="div">
|
||||
{(active) => (
|
||||
<button
|
||||
className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
|
||||
onClick={() => setIsAddAsSubIssueOpen(true)}
|
||||
>
|
||||
Add an existing issue
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Disclosure.Panel className="flex flex-col gap-y-1 mt-3">
|
||||
{subIssues.map((subIssue) => (
|
||||
<Link
|
||||
key={subIssue.id}
|
||||
href={`/projects/${activeProject.id}/issues/${subIssue.id}`}
|
||||
>
|
||||
<a className="p-2 flex justify-between items-center rounded text-xs hover:bg-gray-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`h-1.5 w-1.5 block rounded-full`}
|
||||
style={{
|
||||
backgroundColor: subIssue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<span className="text-gray-600">
|
||||
{activeProject.identifier}-{subIssue.sequence_id}
|
||||
</span>
|
||||
<span className="font-medium">{subIssue.name}</span>
|
||||
</div>
|
||||
<div>
|
||||
<Menu as="div" className="relative inline-block">
|
||||
<Menu.Button className="grid relative place-items-center focus:outline-none">
|
||||
<EllipsisHorizontalIcon className="h-4 w-4" />
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
|
||||
<div className="p-1">
|
||||
<Menu.Item as="div">
|
||||
{(active) => (
|
||||
<button
|
||||
className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
|
||||
onClick={() => handleRemove(subIssue.id)}
|
||||
>
|
||||
Remove as sub-issue
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
) : (
|
||||
<Menu as="div" className="relative inline-block">
|
||||
<Menu.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
Add sub-issue
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="origin-top-right absolute left-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
|
||||
<div className="p-1">
|
||||
<Menu.Item as="div">
|
||||
{(active) => (
|
||||
<button
|
||||
type="button"
|
||||
className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
|
||||
onClick={() => {
|
||||
setIsOpen(true);
|
||||
setPreloadedData({
|
||||
parent: issueDetail.id,
|
||||
actionType: "createIssue",
|
||||
});
|
||||
}}
|
||||
>
|
||||
Add new
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item as="div">
|
||||
{(active) => (
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
|
||||
onClick={() => {
|
||||
setIsAddAsSubIssueOpen(true);
|
||||
setPreloadedData({
|
||||
parent: issueDetail.id,
|
||||
actionType: "createIssue",
|
||||
});
|
||||
}}
|
||||
>
|
||||
Add an existing issue
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-secondary rounded-lg p-4 space-y-5">
|
||||
<Tab.Group>
|
||||
|
||||
@ -51,7 +51,7 @@ const ProjectIssues: NextPage = () => {
|
||||
const [editIssue, setEditIssue] = useState<string | undefined>();
|
||||
const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
|
||||
|
||||
const { activeWorkspace, activeProject } = useUser();
|
||||
const { activeWorkspace, activeProject, issues } = useUser();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user