forked from github/plane
Merge pull request #23 from makeplane/stage-release
promote staging to master
This commit is contained in:
commit
4fb74439c1
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;
|
@ -4,7 +4,7 @@ import { useRouter } from "next/router";
|
|||||||
// swr
|
// swr
|
||||||
import { mutate } from "swr";
|
import { mutate } from "swr";
|
||||||
// react hook form
|
// react hook form
|
||||||
import { SubmitHandler, useForm } from "react-hook-form";
|
import { Controller, SubmitHandler, useForm } from "react-hook-form";
|
||||||
// headless ui
|
// headless ui
|
||||||
import { Combobox, Dialog, Transition } from "@headlessui/react";
|
import { Combobox, Dialog, Transition } from "@headlessui/react";
|
||||||
// hooks
|
// hooks
|
||||||
@ -17,6 +17,7 @@ import {
|
|||||||
FolderIcon,
|
FolderIcon,
|
||||||
RectangleStackIcon,
|
RectangleStackIcon,
|
||||||
ClipboardDocumentListIcon,
|
ClipboardDocumentListIcon,
|
||||||
|
ArrowPathIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
// commons
|
// commons
|
||||||
import { classNames, copyTextToClipboard } from "constants/common";
|
import { classNames, copyTextToClipboard } from "constants/common";
|
||||||
@ -27,7 +28,7 @@ import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssue
|
|||||||
import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
|
import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
|
||||||
// types
|
// types
|
||||||
import { IIssue, IProject, IssueResponse } from "types";
|
import { IIssue, IProject, IssueResponse } from "types";
|
||||||
import { Button } from "ui";
|
import { Button, SearchListbox } from "ui";
|
||||||
import issuesServices from "lib/services/issues.services";
|
import issuesServices from "lib/services/issues.services";
|
||||||
// fetch keys
|
// fetch keys
|
||||||
import { PROJECTS_LIST, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
|
import { PROJECTS_LIST, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
|
||||||
@ -40,6 +41,7 @@ type ItemType = {
|
|||||||
|
|
||||||
type FormInput = {
|
type FormInput = {
|
||||||
issue_ids: string[];
|
issue_ids: string[];
|
||||||
|
cycleId: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const CommandPalette: React.FC = () => {
|
const CommandPalette: React.FC = () => {
|
||||||
@ -69,6 +71,7 @@ const CommandPalette: React.FC = () => {
|
|||||||
register,
|
register,
|
||||||
formState: { errors, isSubmitting },
|
formState: { errors, isSubmitting },
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
|
control,
|
||||||
reset,
|
reset,
|
||||||
setError,
|
setError,
|
||||||
} = useForm<FormInput>();
|
} = useForm<FormInput>();
|
||||||
@ -143,10 +146,24 @@ const CommandPalette: React.FC = () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const handleDelete: SubmitHandler<FormInput> = (data) => {
|
const handleDelete: SubmitHandler<FormInput> = (data) => {
|
||||||
if (activeWorkspace && activeProject && data.issue_ids) {
|
if (!data.issue_ids || data.issue_ids.length === 0) {
|
||||||
|
setToastAlert({
|
||||||
|
title: "Error",
|
||||||
|
type: "error",
|
||||||
|
message: "Please select atleast one issue",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (activeWorkspace && activeProject) {
|
||||||
issuesServices
|
issuesServices
|
||||||
.bulkDeleteIssues(activeWorkspace.slug, activeProject.id, data)
|
.bulkDeleteIssues(activeWorkspace.slug, activeProject.id, data)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
|
setToastAlert({
|
||||||
|
title: "Success",
|
||||||
|
type: "success",
|
||||||
|
message: res.message,
|
||||||
|
});
|
||||||
mutate<IssueResponse>(
|
mutate<IssueResponse>(
|
||||||
PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id),
|
PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id),
|
||||||
(prevData) => {
|
(prevData) => {
|
||||||
@ -170,10 +187,30 @@ const CommandPalette: React.FC = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleAddToCycle: SubmitHandler<FormInput> = (data) => {
|
const handleAddToCycle: SubmitHandler<FormInput> = (data) => {
|
||||||
if (activeWorkspace && activeProject && data.issue_ids) {
|
if (!data.issue_ids || data.issue_ids.length === 0) {
|
||||||
|
setToastAlert({
|
||||||
|
title: "Error",
|
||||||
|
type: "error",
|
||||||
|
message: "Please select atleast one issue",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.cycleId) {
|
||||||
|
setToastAlert({
|
||||||
|
title: "Error",
|
||||||
|
type: "error",
|
||||||
|
message: "Please select a cycle",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (activeWorkspace && activeProject) {
|
||||||
issuesServices
|
issuesServices
|
||||||
.bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, "", data)
|
.bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, data.cycleId, data)
|
||||||
.then((res) => {})
|
.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
});
|
});
|
||||||
@ -230,7 +267,7 @@ const CommandPalette: React.FC = () => {
|
|||||||
leaveFrom="opacity-100 scale-100"
|
leaveFrom="opacity-100 scale-100"
|
||||||
leaveTo="opacity-0 scale-95"
|
leaveTo="opacity-0 scale-95"
|
||||||
>
|
>
|
||||||
<Dialog.Panel className="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 overflow-hidden rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
<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">
|
||||||
<form>
|
<form>
|
||||||
<Combobox
|
<Combobox
|
||||||
// onChange={(item: ItemType) => {
|
// onChange={(item: ItemType) => {
|
||||||
@ -369,6 +406,23 @@ const CommandPalette: React.FC = () => {
|
|||||||
|
|
||||||
<div className="flex justify-between items-center gap-2 p-3">
|
<div className="flex justify-between items-center gap-2 p-3">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="cycleId"
|
||||||
|
render={({ field: { value, onChange } }) => (
|
||||||
|
<SearchListbox
|
||||||
|
title="Cycle"
|
||||||
|
optionsFontsize="sm"
|
||||||
|
options={cycles?.map((cycle) => {
|
||||||
|
return { value: cycle.id, display: cycle.name };
|
||||||
|
})}
|
||||||
|
multiple={false}
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
icon={<ArrowPathIcon className="h-4 w-4 text-gray-400" />}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
<Button onClick={handleSubmit(handleAddToCycle)} size="sm">
|
<Button onClick={handleSubmit(handleAddToCycle)} size="sm">
|
||||||
Add to Cycle
|
Add to Cycle
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -37,7 +37,7 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||||
>
|
>
|
||||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
||||||
<div className="bg-white p-8">
|
<div className="bg-white p-5">
|
||||||
<div className="sm:flex sm:items-start">
|
<div className="sm:flex sm:items-start">
|
||||||
<div className="text-center sm:text-left w-full">
|
<div className="text-center sm:text-left w-full">
|
||||||
<Dialog.Title
|
<Dialog.Title
|
||||||
@ -59,37 +59,46 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||||||
{
|
{
|
||||||
title: "Navigation",
|
title: "Navigation",
|
||||||
shortcuts: [
|
shortcuts: [
|
||||||
{ key: "Ctrl + /", description: "To open navigator" },
|
{ keys: "ctrl,/", description: "To open navigator" },
|
||||||
{ key: "↑", description: "Move up" },
|
{ keys: "↑", description: "Move up" },
|
||||||
{ key: "↓", description: "Move down" },
|
{ keys: "↓", description: "Move down" },
|
||||||
{ key: "←", description: "Move left" },
|
{ keys: "←", description: "Move left" },
|
||||||
{ key: "→", description: "Move right" },
|
{ keys: "→", description: "Move right" },
|
||||||
{ key: "Enter", description: "Select" },
|
{ keys: "Enter", description: "Select" },
|
||||||
{ key: "Esc", description: "Close" },
|
{ keys: "Esc", description: "Close" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Common",
|
title: "Common",
|
||||||
shortcuts: [
|
shortcuts: [
|
||||||
{ key: "Ctrl + p", description: "To create project" },
|
{ keys: "ctrl,p", description: "To create project" },
|
||||||
{ key: "Ctrl + i", description: "To create issue" },
|
{ keys: "ctrl,i", description: "To create issue" },
|
||||||
{ key: "Ctrl + q", description: "To create cycle" },
|
{ keys: "ctrl,q", description: "To create cycle" },
|
||||||
{ key: "Ctrl + h", description: "To open shortcuts guide" },
|
{ keys: "ctrl,h", description: "To open shortcuts guide" },
|
||||||
{
|
{
|
||||||
key: "Ctrl + alt + c",
|
keys: "ctrl,alt,c",
|
||||||
description: "To copy issue url when on issue detail page.",
|
description: "To copy issue url when on issue detail page.",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
].map(({ title, shortcuts }) => (
|
].map(({ title, shortcuts }) => (
|
||||||
<div className="w-full flex flex-col" key={title}>
|
<div key={title} className="w-full flex flex-col">
|
||||||
<p className="font-medium mb-4">{title}</p>
|
<p className="font-medium mb-4">{title}</p>
|
||||||
<div className="flex flex-col gap-y-3">
|
<div className="flex flex-col gap-y-3">
|
||||||
{shortcuts.map(({ key, description }) => (
|
{shortcuts.map(({ keys, description }, index) => (
|
||||||
<div className="flex justify-between" key={key}>
|
<div key={index} className="flex justify-between">
|
||||||
<p className="text-sm text-gray-500">{description}</p>
|
<p className="text-sm text-gray-500">{description}</p>
|
||||||
<div className="flex gap-x-1">
|
<div className="flex items-center gap-x-1">
|
||||||
<kbd className="bg-gray-200 text-sm px-1 rounded">{key}</kbd>
|
{keys.split(",").map((key, index) => (
|
||||||
|
<span key={index} className="flex items-center gap-1">
|
||||||
|
<kbd className="bg-gray-200 text-sm px-1 rounded">
|
||||||
|
{key}
|
||||||
|
</kbd>
|
||||||
|
{/* {index !== keys.split(",").length - 1 ? (
|
||||||
|
<span className="text-xs">+</span>
|
||||||
|
) : null} */}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import { FC } from "react";
|
|
||||||
import { EditorState, LexicalEditor, $getRoot, $getSelection } from "lexical";
|
import { EditorState, LexicalEditor, $getRoot, $getSelection } from "lexical";
|
||||||
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
||||||
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
||||||
@ -25,12 +24,15 @@ export interface RichTextEditorProps {
|
|||||||
onChange: (state: string) => void;
|
onChange: (state: string) => void;
|
||||||
id: string;
|
id: string;
|
||||||
value: string;
|
value: string;
|
||||||
|
placeholder?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const RichTextEditor: FC<RichTextEditorProps> = (props) => {
|
const RichTextEditor: React.FC<RichTextEditorProps> = ({
|
||||||
// props
|
onChange,
|
||||||
const { onChange, value, id } = props;
|
id,
|
||||||
|
value,
|
||||||
|
placeholder = "Enter some text...",
|
||||||
|
}) => {
|
||||||
function handleChange(state: EditorState, editor: LexicalEditor) {
|
function handleChange(state: EditorState, editor: LexicalEditor) {
|
||||||
state.read(() => {
|
state.read(() => {
|
||||||
onChange(JSON.stringify(state.toJSON()));
|
onChange(JSON.stringify(state.toJSON()));
|
||||||
@ -54,8 +56,8 @@ const RichTextEditor: FC<RichTextEditorProps> = (props) => {
|
|||||||
}
|
}
|
||||||
ErrorBoundary={LexicalErrorBoundary}
|
ErrorBoundary={LexicalErrorBoundary}
|
||||||
placeholder={
|
placeholder={
|
||||||
<div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
|
<div className="absolute top-4 left-3 pointer-events-none select-none text-gray-400">
|
||||||
Enter some text...
|
{placeholder}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
@ -21,16 +21,8 @@ import {
|
|||||||
$isListNode,
|
$isListNode,
|
||||||
ListNode,
|
ListNode,
|
||||||
} from "@lexical/list";
|
} from "@lexical/list";
|
||||||
import {
|
import { $isParentElementRTL, $isAtNodeEnd, $wrapNodes } from "@lexical/selection";
|
||||||
$isParentElementRTL,
|
import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
|
||||||
$isAtNodeEnd,
|
|
||||||
$wrapNodes,
|
|
||||||
} from "@lexical/selection";
|
|
||||||
import {
|
|
||||||
$createHeadingNode,
|
|
||||||
$createQuoteNode,
|
|
||||||
$isHeadingNode,
|
|
||||||
} from "@lexical/rich-text";
|
|
||||||
import {
|
import {
|
||||||
$createCodeNode,
|
$createCodeNode,
|
||||||
$isCodeNode,
|
$isCodeNode,
|
||||||
@ -50,15 +42,7 @@ const BLOCK_DATA = [
|
|||||||
{ type: "ul", name: "Bulleted List" },
|
{ type: "ul", name: "Bulleted List" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const supportedBlockTypes = new Set([
|
const supportedBlockTypes = new Set(["paragraph", "quote", "code", "h1", "h2", "ul", "ol"]);
|
||||||
"paragraph",
|
|
||||||
"quote",
|
|
||||||
"code",
|
|
||||||
"h1",
|
|
||||||
"h2",
|
|
||||||
"ul",
|
|
||||||
"ol",
|
|
||||||
]);
|
|
||||||
|
|
||||||
const blockTypeToBlockName: any = {
|
const blockTypeToBlockName: any = {
|
||||||
code: "Code Block",
|
code: "Code Block",
|
||||||
@ -84,8 +68,7 @@ export const BlockTypeSelect: FC<BlockTypeSelectProps> = (props) => {
|
|||||||
// refs
|
// refs
|
||||||
const dropDownRef = useRef<any>(null);
|
const dropDownRef = useRef<any>(null);
|
||||||
// states
|
// states
|
||||||
const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] =
|
const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] = useState(false);
|
||||||
useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const toolbar = toolbarRef.current;
|
const toolbar = toolbarRef.current;
|
||||||
@ -205,6 +188,7 @@ export const BlockTypeSelect: FC<BlockTypeSelectProps> = (props) => {
|
|||||||
return (
|
return (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
className="p-2 mr-2 text-sm flex items-center"
|
className="p-2 mr-2 text-sm flex items-center"
|
||||||
onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
|
onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
|
||||||
aria-label="Formatting Options"
|
aria-label="Formatting Options"
|
||||||
|
@ -25,17 +25,9 @@ import {
|
|||||||
} from "@lexical/list";
|
} from "@lexical/list";
|
||||||
import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
|
import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
|
||||||
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
||||||
import {
|
import { $isParentElementRTL, $wrapNodes, $isAtNodeEnd } from "@lexical/selection";
|
||||||
$isParentElementRTL,
|
|
||||||
$wrapNodes,
|
|
||||||
$isAtNodeEnd,
|
|
||||||
} from "@lexical/selection";
|
|
||||||
import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
|
import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
|
||||||
import {
|
import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
|
||||||
$createHeadingNode,
|
|
||||||
$createQuoteNode,
|
|
||||||
$isHeadingNode,
|
|
||||||
} from "@lexical/rich-text";
|
|
||||||
// custom elements
|
// custom elements
|
||||||
import { FloatingLinkEditor } from "./floating-link-editor";
|
import { FloatingLinkEditor } from "./floating-link-editor";
|
||||||
import { BlockTypeSelect } from "./block-type-select";
|
import { BlockTypeSelect } from "./block-type-select";
|
||||||
@ -67,9 +59,7 @@ export const LexicalToolbar = () => {
|
|||||||
const [canUndo, setCanUndo] = useState(false);
|
const [canUndo, setCanUndo] = useState(false);
|
||||||
const [canRedo, setCanRedo] = useState(false);
|
const [canRedo, setCanRedo] = useState(false);
|
||||||
const [blockType, setBlockType] = useState("paragraph");
|
const [blockType, setBlockType] = useState("paragraph");
|
||||||
const [selectedElementKey, setSelectedElementKey] = useState<string | null>(
|
const [selectedElementKey, setSelectedElementKey] = useState<string | null>(null);
|
||||||
null
|
|
||||||
);
|
|
||||||
const [isRTL, setIsRTL] = useState(false);
|
const [isRTL, setIsRTL] = useState(false);
|
||||||
const [isLink, setIsLink] = useState(false);
|
const [isLink, setIsLink] = useState(false);
|
||||||
const [isBold, setIsBold] = useState(false);
|
const [isBold, setIsBold] = useState(false);
|
||||||
@ -83,9 +73,7 @@ export const LexicalToolbar = () => {
|
|||||||
if ($isRangeSelection(selection)) {
|
if ($isRangeSelection(selection)) {
|
||||||
const anchorNode = selection.anchor.getNode();
|
const anchorNode = selection.anchor.getNode();
|
||||||
const element =
|
const element =
|
||||||
anchorNode.getKey() === "root"
|
anchorNode.getKey() === "root" ? anchorNode : anchorNode.getTopLevelElementOrThrow();
|
||||||
? anchorNode
|
|
||||||
: anchorNode.getTopLevelElementOrThrow();
|
|
||||||
const elementKey = element.getKey();
|
const elementKey = element.getKey();
|
||||||
const elementDOM = editor.getElementByKey(elementKey);
|
const elementDOM = editor.getElementByKey(elementKey);
|
||||||
if (elementDOM !== null) {
|
if (elementDOM !== null) {
|
||||||
@ -95,9 +83,7 @@ export const LexicalToolbar = () => {
|
|||||||
const type = parentList ? parentList.getTag() : element.getTag();
|
const type = parentList ? parentList.getTag() : element.getTag();
|
||||||
setBlockType(type);
|
setBlockType(type);
|
||||||
} else {
|
} else {
|
||||||
const type = $isHeadingNode(element)
|
const type = $isHeadingNode(element) ? element.getTag() : element.getType();
|
||||||
? element.getTag()
|
|
||||||
: element.getType();
|
|
||||||
setBlockType(type);
|
setBlockType(type);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -166,11 +152,9 @@ export const LexicalToolbar = () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="flex items-center mb-1 p-1 w-full flex-wrap border-b " ref={toolbarRef}>
|
||||||
className="flex items-center mb-1 p-1 w-full flex-wrap border-b "
|
|
||||||
ref={toolbarRef}
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
disabled={!canUndo}
|
disabled={!canUndo}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -195,6 +179,7 @@ export const LexicalToolbar = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
disabled={!canRedo}
|
disabled={!canRedo}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -218,12 +203,9 @@ export const LexicalToolbar = () => {
|
|||||||
<path d="M8 4.466V.534a.25.25 0 01.41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 018 4.466z"></path>
|
<path d="M8 4.466V.534a.25.25 0 01.41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 018 4.466z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<BlockTypeSelect
|
<BlockTypeSelect editor={editor} toolbarRef={toolbarRef} blockType={blockType} />
|
||||||
editor={editor}
|
|
||||||
toolbarRef={toolbarRef}
|
|
||||||
blockType={blockType}
|
|
||||||
/>
|
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
|
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
|
||||||
@ -243,6 +225,7 @@ export const LexicalToolbar = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
|
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
|
||||||
@ -262,6 +245,7 @@ export const LexicalToolbar = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
|
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
|
||||||
@ -281,6 +265,7 @@ export const LexicalToolbar = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
|
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
|
||||||
@ -300,6 +285,7 @@ export const LexicalToolbar = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
|
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
|
||||||
@ -319,6 +305,7 @@ export const LexicalToolbar = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={insertLink}
|
onClick={insertLink}
|
||||||
className={"p-2 mr-2 " + (isLink ? "active" : "")}
|
className={"p-2 mr-2 " + (isLink ? "active" : "")}
|
||||||
aria-label="Insert Link"
|
aria-label="Insert Link"
|
||||||
@ -335,9 +322,9 @@ export const LexicalToolbar = () => {
|
|||||||
<path d="M9 5.5a3 3 0 00-2.83 4h1.098A2 2 0 019 6.5h3a2 2 0 110 4h-1.535a4.02 4.02 0 01-.82 1H12a3 3 0 100-6H9z"></path>
|
<path d="M9 5.5a3 3 0 00-2.83 4h1.098A2 2 0 019 6.5h3a2 2 0 110 4h-1.535a4.02 4.02 0 01-.82 1H12a3 3 0 100-6H9z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
{isLink &&
|
{isLink && createPortal(<FloatingLinkEditor editor={editor} />, document.body)}
|
||||||
createPortal(<FloatingLinkEditor editor={editor} />, document.body)}
|
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
|
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
|
||||||
@ -360,6 +347,7 @@ export const LexicalToolbar = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
|
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
|
||||||
@ -382,6 +370,7 @@ export const LexicalToolbar = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
|
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
|
||||||
@ -404,6 +393,7 @@ export const LexicalToolbar = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
|
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
|
||||||
|
@ -47,7 +47,7 @@ const SelectAssignee: React.FC<Props> = ({ control }) => {
|
|||||||
icon={<UserIcon className="h-4 w-4 text-gray-400" />}
|
icon={<UserIcon className="h-4 w-4 text-gray-400" />}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
></Controller>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -98,6 +98,12 @@ const ListView: React.FC<Props> = ({
|
|||||||
<table className="min-w-full">
|
<table className="min-w-full">
|
||||||
<thead className="bg-gray-100">
|
<thead className="bg-gray-100">
|
||||||
<tr>
|
<tr>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
className="px-3 py-3.5 text-left uppercase text-sm font-semibold text-gray-900"
|
||||||
|
>
|
||||||
|
NAME
|
||||||
|
</th>
|
||||||
{Object.keys(properties).map(
|
{Object.keys(properties).map(
|
||||||
(key) =>
|
(key) =>
|
||||||
properties[key as keyof Properties] && (
|
properties[key as keyof Properties] && (
|
||||||
@ -156,84 +162,78 @@ const ListView: React.FC<Props> = ({
|
|||||||
)}
|
)}
|
||||||
onMouseEnter={() => handleHover(issue.id)}
|
onMouseEnter={() => handleHover(issue.id)}
|
||||||
>
|
>
|
||||||
|
<td className="px-3 py-4 text-sm font-medium text-gray-900 w-[15rem]">
|
||||||
|
<Link href={`/projects/${issue.project}/issues/${issue.id}`}>
|
||||||
|
<a className="hover:text-theme duration-300">{issue.name}</a>
|
||||||
|
</Link>
|
||||||
|
</td>
|
||||||
{Object.keys(properties).map(
|
{Object.keys(properties).map(
|
||||||
(key) =>
|
(key) =>
|
||||||
properties[key as keyof Properties] && (
|
properties[key as keyof Properties] && (
|
||||||
<td
|
<React.Fragment key={key}>
|
||||||
key={key}
|
{(key as keyof Properties) === "key" ? (
|
||||||
className="px-3 py-4 text-sm font-medium text-gray-900 relative"
|
<td className="px-3 py-4 font-medium text-gray-900 text-xs whitespace-nowrap">
|
||||||
>
|
|
||||||
{(key as keyof Properties) === "name" ? (
|
|
||||||
<p className="w-[15rem]">
|
|
||||||
<Link
|
|
||||||
href={`/projects/${issue.project}/issues/${issue.id}`}
|
|
||||||
>
|
|
||||||
<a className="hover:text-theme duration-300">
|
|
||||||
{issue.name}
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
) : (key as keyof Properties) === "key" ? (
|
|
||||||
<p className="text-xs whitespace-nowrap">
|
|
||||||
{activeProject?.identifier}-{issue.sequence_id}
|
{activeProject?.identifier}-{issue.sequence_id}
|
||||||
</p>
|
</td>
|
||||||
) : (key as keyof Properties) === "description" ? (
|
) : (key as keyof Properties) === "description" ? (
|
||||||
<p className="truncate text-xs max-w-[15rem]">
|
<td className="px-3 py-4 font-medium text-gray-900 truncate text-xs max-w-[15rem]">
|
||||||
{issue.description}
|
{issue.description}
|
||||||
</p>
|
</td>
|
||||||
) : (key as keyof Properties) === "priority" ? (
|
) : (key as keyof Properties) === "priority" ? (
|
||||||
<Listbox
|
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
|
||||||
as="div"
|
<Listbox
|
||||||
value={issue.priority}
|
as="div"
|
||||||
onChange={(data: string) => {
|
value={issue.priority}
|
||||||
partialUpdateIssue({ priority: data }, issue.id);
|
onChange={(data: string) => {
|
||||||
}}
|
partialUpdateIssue({ priority: data }, issue.id);
|
||||||
className="flex-shrink-0"
|
}}
|
||||||
>
|
className="flex-shrink-0"
|
||||||
{({ open }) => (
|
>
|
||||||
<>
|
{({ open }) => (
|
||||||
<div className="">
|
<>
|
||||||
<Listbox.Button className="inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-1 px-0.5 text-xs font-medium text-gray-500 hover:bg-gray-100 border">
|
<div className="">
|
||||||
<span
|
<Listbox.Button className="inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-1 px-0.5 text-xs font-medium text-gray-500 hover:bg-gray-100 border">
|
||||||
className={classNames(
|
<span
|
||||||
issue.priority ? "" : "text-gray-900",
|
className={classNames(
|
||||||
"hidden truncate capitalize sm:block w-16"
|
issue.priority ? "" : "text-gray-900",
|
||||||
)}
|
"hidden truncate capitalize sm:block w-16"
|
||||||
>
|
)}
|
||||||
{issue.priority ?? "None"}
|
>
|
||||||
</span>
|
{issue.priority ?? "None"}
|
||||||
</Listbox.Button>
|
</span>
|
||||||
|
</Listbox.Button>
|
||||||
|
|
||||||
<Transition
|
<Transition
|
||||||
show={open}
|
show={open}
|
||||||
as={React.Fragment}
|
as={React.Fragment}
|
||||||
leave="transition ease-in duration-100"
|
leave="transition ease-in duration-100"
|
||||||
leaveFrom="opacity-100"
|
leaveFrom="opacity-100"
|
||||||
leaveTo="opacity-0"
|
leaveTo="opacity-0"
|
||||||
>
|
>
|
||||||
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
|
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
|
||||||
{PRIORITIES?.map((priority) => (
|
{PRIORITIES?.map((priority) => (
|
||||||
<Listbox.Option
|
<Listbox.Option
|
||||||
key={priority}
|
key={priority}
|
||||||
className={({ active }) =>
|
className={({ active }) =>
|
||||||
classNames(
|
classNames(
|
||||||
active ? "bg-indigo-50" : "bg-white",
|
active ? "bg-indigo-50" : "bg-white",
|
||||||
"cursor-pointer capitalize select-none px-3 py-2"
|
"cursor-pointer capitalize select-none px-3 py-2"
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
value={priority}
|
value={priority}
|
||||||
>
|
>
|
||||||
{priority}
|
{priority}
|
||||||
</Listbox.Option>
|
</Listbox.Option>
|
||||||
))}
|
))}
|
||||||
</Listbox.Options>
|
</Listbox.Options>
|
||||||
</Transition>
|
</Transition>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Listbox>
|
</Listbox>
|
||||||
|
</td>
|
||||||
) : (key as keyof Properties) === "assignee" ? (
|
) : (key as keyof Properties) === "assignee" ? (
|
||||||
<>
|
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
|
||||||
<Listbox
|
<Listbox
|
||||||
as="div"
|
as="div"
|
||||||
value={issue.assignees}
|
value={issue.assignees}
|
||||||
@ -329,80 +329,84 @@ const ListView: React.FC<Props> = ({
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Listbox>
|
</Listbox>
|
||||||
</>
|
</td>
|
||||||
) : (key as keyof Properties) === "state" ? (
|
) : (key as keyof Properties) === "state" ? (
|
||||||
<Listbox
|
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
|
||||||
as="div"
|
<Listbox
|
||||||
value={issue.state}
|
as="div"
|
||||||
onChange={(data: string) => {
|
value={issue.state}
|
||||||
partialUpdateIssue({ state: data }, issue.id);
|
onChange={(data: string) => {
|
||||||
}}
|
partialUpdateIssue({ state: data }, issue.id);
|
||||||
className="flex-shrink-0"
|
}}
|
||||||
>
|
className="flex-shrink-0"
|
||||||
{({ open }) => (
|
>
|
||||||
<>
|
{({ open }) => (
|
||||||
<div>
|
<>
|
||||||
<Listbox.Button
|
<div>
|
||||||
className="inline-flex items-center whitespace-nowrap rounded-full px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100 border"
|
<Listbox.Button
|
||||||
style={{
|
className="inline-flex items-center whitespace-nowrap rounded-full px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100 border"
|
||||||
border: `2px solid ${issue.state_detail.color}`,
|
style={{
|
||||||
backgroundColor: `${issue.state_detail.color}20`,
|
border: `2px solid ${issue.state_detail.color}`,
|
||||||
}}
|
backgroundColor: `${issue.state_detail.color}20`,
|
||||||
>
|
}}
|
||||||
<span
|
|
||||||
className={classNames(
|
|
||||||
issue.state ? "" : "text-gray-900",
|
|
||||||
"hidden capitalize sm:block w-16"
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
{addSpaceIfCamelCase(issue.state_detail.name)}
|
<span
|
||||||
</span>
|
className={classNames(
|
||||||
</Listbox.Button>
|
issue.state ? "" : "text-gray-900",
|
||||||
|
"hidden capitalize sm:block w-16"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{addSpaceIfCamelCase(issue.state_detail.name)}
|
||||||
|
</span>
|
||||||
|
</Listbox.Button>
|
||||||
|
|
||||||
<Transition
|
<Transition
|
||||||
show={open}
|
show={open}
|
||||||
as={React.Fragment}
|
as={React.Fragment}
|
||||||
leave="transition ease-in duration-100"
|
leave="transition ease-in duration-100"
|
||||||
leaveFrom="opacity-100"
|
leaveFrom="opacity-100"
|
||||||
leaveTo="opacity-0"
|
leaveTo="opacity-0"
|
||||||
>
|
>
|
||||||
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
|
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
|
||||||
{states?.map((state) => (
|
{states?.map((state) => (
|
||||||
<Listbox.Option
|
<Listbox.Option
|
||||||
key={state.id}
|
key={state.id}
|
||||||
className={({ active }) =>
|
className={({ active }) =>
|
||||||
classNames(
|
classNames(
|
||||||
active ? "bg-indigo-50" : "bg-white",
|
active ? "bg-indigo-50" : "bg-white",
|
||||||
"cursor-pointer select-none px-3 py-2"
|
"cursor-pointer select-none px-3 py-2"
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
value={state.id}
|
value={state.id}
|
||||||
>
|
>
|
||||||
{addSpaceIfCamelCase(state.name)}
|
{addSpaceIfCamelCase(state.name)}
|
||||||
</Listbox.Option>
|
</Listbox.Option>
|
||||||
))}
|
))}
|
||||||
</Listbox.Options>
|
</Listbox.Options>
|
||||||
</Transition>
|
</Transition>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Listbox>
|
</Listbox>
|
||||||
|
</td>
|
||||||
) : (key as keyof Properties) === "children" ? (
|
) : (key as keyof Properties) === "children" ? (
|
||||||
<p>No children.</p>
|
<td className="px-3 py-4 text-sm font-medium text-gray-900">
|
||||||
|
No children.
|
||||||
|
</td>
|
||||||
) : (key as keyof Properties) === "target_date" ? (
|
) : (key as keyof Properties) === "target_date" ? (
|
||||||
<p className="whitespace-nowrap">
|
<td className="px-3 py-4 text-sm font-medium text-gray-900 whitespace-nowrap">
|
||||||
{issue.target_date
|
{issue.target_date
|
||||||
? renderShortNumericDateFormat(issue.target_date)
|
? renderShortNumericDateFormat(issue.target_date)
|
||||||
: "-"}
|
: "-"}
|
||||||
</p>
|
</td>
|
||||||
) : (
|
) : (
|
||||||
<p className="capitalize text-sm">
|
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative capitalize">
|
||||||
{issue[key as keyof IIssue] ??
|
{issue[key as keyof IIssue] ??
|
||||||
(issue[key as keyof IIssue] as any)?.name ??
|
(issue[key as keyof IIssue] as any)?.name ??
|
||||||
"None"}
|
"None"}
|
||||||
</p>
|
</td>
|
||||||
)}
|
)}
|
||||||
</td>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
<td className="px-3">
|
<td className="px-3">
|
||||||
|
@ -34,11 +34,13 @@ import {
|
|||||||
ClipboardDocumentIcon,
|
ClipboardDocumentIcon,
|
||||||
LinkIcon,
|
LinkIcon,
|
||||||
ArrowPathIcon,
|
ArrowPathIcon,
|
||||||
|
CalendarDaysIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
// types
|
// types
|
||||||
import type { Control } from "react-hook-form";
|
import type { Control } from "react-hook-form";
|
||||||
import type { IIssue, IIssueLabels, IssueResponse, IState, WorkspaceMember } from "types";
|
import type { IIssue, IIssueLabels, IssueResponse, IState, WorkspaceMember } from "types";
|
||||||
import { TwitterPicker } from "react-color";
|
import { TwitterPicker } from "react-color";
|
||||||
|
import useToast from "lib/hooks/useToast";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
control: Control<IIssue, any>;
|
control: Control<IIssue, any>;
|
||||||
@ -56,6 +58,8 @@ const defaultValues: Partial<IIssueLabels> = {
|
|||||||
const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDetail }) => {
|
const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDetail }) => {
|
||||||
const { activeWorkspace, activeProject, cycles } = useUser();
|
const { activeWorkspace, activeProject, cycles } = useUser();
|
||||||
|
|
||||||
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
const { data: states } = useSWR<IState[]>(
|
const { data: states } = useSWR<IState[]>(
|
||||||
activeWorkspace && activeProject ? STATE_LIST(activeProject.id) : null,
|
activeWorkspace && activeProject ? STATE_LIST(activeProject.id) : null,
|
||||||
activeWorkspace && activeProject
|
activeWorkspace && activeProject
|
||||||
@ -164,7 +168,7 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
|
|||||||
label: "Due Date",
|
label: "Due Date",
|
||||||
name: "target_date",
|
name: "target_date",
|
||||||
canSelectMultipleOptions: true,
|
canSelectMultipleOptions: true,
|
||||||
icon: UserIcon,
|
icon: CalendarDaysIcon,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
@ -202,6 +206,18 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
|
|||||||
copyTextToClipboard(
|
copyTextToClipboard(
|
||||||
`https://app.plane.so/projects/${activeProject?.id}/issues/${issueDetail?.id}`
|
`https://app.plane.so/projects/${activeProject?.id}/issues/${issueDetail?.id}`
|
||||||
)
|
)
|
||||||
|
.then(() => {
|
||||||
|
setToastAlert({
|
||||||
|
type: "success",
|
||||||
|
title: "Copied to clipboard",
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Some error occurred",
|
||||||
|
});
|
||||||
|
})
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<LinkIcon className="h-3.5 w-3.5" />
|
<LinkIcon className="h-3.5 w-3.5" />
|
||||||
@ -209,7 +225,21 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
|
className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
|
||||||
onClick={() => copyTextToClipboard(`${issueDetail?.id}`)}
|
onClick={() =>
|
||||||
|
copyTextToClipboard(`${issueDetail?.id}`)
|
||||||
|
.then(() => {
|
||||||
|
setToastAlert({
|
||||||
|
type: "success",
|
||||||
|
title: "Copied to clipboard",
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Some error occurred",
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<ClipboardDocumentIcon className="h-3.5 w-3.5" />
|
<ClipboardDocumentIcon className="h-3.5 w-3.5" />
|
||||||
</button>
|
</button>
|
||||||
@ -232,7 +262,7 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
|
|||||||
render={({ field: { value, onChange } }) => (
|
render={({ field: { value, onChange } }) => (
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
value={value ?? new Date().toString()}
|
value={""}
|
||||||
onChange={(e: any) => {
|
onChange={(e: any) => {
|
||||||
submitChanges({ target_date: e.target.value });
|
submitChanges({ target_date: e.target.value });
|
||||||
onChange(e.target.value);
|
onChange(e.target.value);
|
||||||
|
@ -7,7 +7,7 @@ import {
|
|||||||
Squares2X2Icon,
|
Squares2X2Icon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
import { addSpaceIfCamelCase, timeAgo } from "constants/common";
|
import { addSpaceIfCamelCase, timeAgo } from "constants/common";
|
||||||
import { IState } from "types";
|
import { IIssue, IState } from "types";
|
||||||
import { Spinner } from "ui";
|
import { Spinner } from "ui";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@ -15,7 +15,9 @@ type Props = {
|
|||||||
states: IState[] | undefined;
|
states: IState[] | undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
const activityIcons = {
|
const activityIcons: {
|
||||||
|
[key: string]: JSX.Element;
|
||||||
|
} = {
|
||||||
state: <Squares2X2Icon className="h-4 w-4" />,
|
state: <Squares2X2Icon className="h-4 w-4" />,
|
||||||
priority: <ChartBarIcon className="h-4 w-4" />,
|
priority: <ChartBarIcon className="h-4 w-4" />,
|
||||||
name: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
|
name: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
|
||||||
@ -28,11 +30,11 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
|
|||||||
<>
|
<>
|
||||||
{issueActivities ? (
|
{issueActivities ? (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{issueActivities.map((activity) => {
|
{issueActivities.map((activity, index) => {
|
||||||
if (activity.field !== "updated_by")
|
if (activity.field !== "updated_by")
|
||||||
return (
|
return (
|
||||||
<div key={activity.id} className="relative flex gap-x-2 w-full">
|
<div key={activity.id} className="relative flex gap-x-2 w-full">
|
||||||
{issueActivities.length > 1 ? (
|
{issueActivities.length > 1 && index !== issueActivities.length - 1 ? (
|
||||||
<span
|
<span
|
||||||
className="absolute top-5 left-2.5 h-full w-0.5 bg-gray-200"
|
className="absolute top-5 left-2.5 h-full w-0.5 bg-gray-200"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
@ -70,8 +72,8 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
|
|||||||
<p>
|
<p>
|
||||||
<span className="font-medium">
|
<span className="font-medium">
|
||||||
{activity.actor_detail.first_name} {activity.actor_detail.last_name}
|
{activity.actor_detail.first_name} {activity.actor_detail.last_name}
|
||||||
</span>{" "}
|
</span>
|
||||||
<span>{activity.verb}</span>{" "}
|
<span> {activity.verb} </span>
|
||||||
{activity.verb !== "created" ? (
|
{activity.verb !== "created" ? (
|
||||||
<span>{activity.field ?? "commented"}</span>
|
<span>{activity.field ?? "commented"}</span>
|
||||||
) : (
|
) : (
|
||||||
@ -90,7 +92,7 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
|
|||||||
states?.find((s) => s.id === activity.old_value)?.name ?? ""
|
states?.find((s) => s.id === activity.old_value)?.name ?? ""
|
||||||
)
|
)
|
||||||
: "None"
|
: "None"
|
||||||
: activity.old_value}
|
: activity.old_value ?? "None"}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="text-gray-500">To: </span>
|
<span className="text-gray-500">To: </span>
|
||||||
@ -100,7 +102,7 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
|
|||||||
states?.find((s) => s.id === activity.new_value)?.name ?? ""
|
states?.find((s) => s.id === activity.new_value)?.name ?? ""
|
||||||
)
|
)
|
||||||
: "None"
|
: "None"
|
||||||
: activity.new_value}
|
: activity.new_value ?? "None"}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
@ -16,7 +16,7 @@ const ToastAlerts = () => {
|
|||||||
if (!alerts) return null;
|
if (!alerts) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-5 fixed top-8 right-8 w-80 h-full overflow-hidden pointer-events-none z-50">
|
<div className="space-y-5 fixed top-5 right-5 w-80 h-full overflow-hidden pointer-events-none z-50">
|
||||||
{alerts.map((alert) => (
|
{alerts.map((alert) => (
|
||||||
<div className="relative text-white rounded-md overflow-hidden" key={alert.id}>
|
<div className="relative text-white rounded-md overflow-hidden" key={alert.id}>
|
||||||
<div className="absolute top-1 right-1">
|
<div className="absolute top-1 right-1">
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
// react
|
// 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
|
// layouts
|
||||||
import Container from "layouts/Container";
|
import Container from "layouts/Container";
|
||||||
import Sidebar from "layouts/Navbar/Sidebar";
|
import Sidebar from "layouts/Navbar/Sidebar";
|
||||||
@ -11,6 +15,14 @@ import type { Props } from "./types";
|
|||||||
const AdminLayout: React.FC<Props> = ({ meta, children }) => {
|
const AdminLayout: React.FC<Props> = ({ meta, children }) => {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
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 (
|
return (
|
||||||
<Container meta={meta}>
|
<Container meta={meta}>
|
||||||
<CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} />
|
<CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} />
|
||||||
|
@ -22,8 +22,8 @@ class ProjectIssuesServices extends APIService {
|
|||||||
super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
|
super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
|
||||||
}
|
}
|
||||||
|
|
||||||
async createIssues(workspace_slug: string, projectId: string, data: any): Promise<any> {
|
async createIssues(workspaceSlug: string, projectId: string, data: any): Promise<any> {
|
||||||
return this.post(ISSUES_ENDPOINT(workspace_slug, projectId), data)
|
return this.post(ISSUES_ENDPOINT(workspaceSlug, projectId), data)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -32,8 +32,8 @@ class ProjectIssuesServices extends APIService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async getIssues(workspace_slug: string, projectId: string): Promise<any> {
|
async getIssues(workspaceSlug: string, projectId: string): Promise<any> {
|
||||||
return this.get(ISSUES_ENDPOINT(workspace_slug, projectId))
|
return this.get(ISSUES_ENDPOINT(workspaceSlug, projectId))
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -42,8 +42,8 @@ class ProjectIssuesServices extends APIService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async getIssue(workspace_slug: string, projectId: string, issueId: string): Promise<any> {
|
async getIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
|
||||||
return this.get(ISSUE_DETAIL(workspace_slug, projectId, issueId))
|
return this.get(ISSUE_DETAIL(workspaceSlug, projectId, issueId))
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -53,11 +53,11 @@ class ProjectIssuesServices extends APIService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async getIssueActivities(
|
async getIssueActivities(
|
||||||
workspace_slug: string,
|
workspaceSlug: string,
|
||||||
projectId: string,
|
projectId: string,
|
||||||
issueId: string
|
issueId: string
|
||||||
): Promise<any> {
|
): Promise<any> {
|
||||||
return this.get(ISSUE_ACTIVITIES(workspace_slug, projectId, issueId))
|
return this.get(ISSUE_ACTIVITIES(workspaceSlug, projectId, issueId))
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -66,8 +66,8 @@ class ProjectIssuesServices extends APIService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async getIssueComments(workspace_slug: string, projectId: string, issueId: string): Promise<any> {
|
async getIssueComments(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
|
||||||
return this.get(ISSUE_COMMENTS(workspace_slug, projectId, issueId))
|
return this.get(ISSUE_COMMENTS(workspaceSlug, projectId, issueId))
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -76,8 +76,8 @@ class ProjectIssuesServices extends APIService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async getIssueProperties(workspace_slug: string, projectId: string): Promise<any> {
|
async getIssueProperties(workspaceSlug: string, projectId: string): Promise<any> {
|
||||||
return this.get(ISSUE_PROPERTIES_ENDPOINT(workspace_slug, projectId))
|
return this.get(ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId))
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -87,14 +87,14 @@ class ProjectIssuesServices extends APIService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async addIssueToSprint(
|
async addIssueToSprint(
|
||||||
workspace_slug: string,
|
workspaceSlug: string,
|
||||||
projectId: string,
|
projectId: string,
|
||||||
cycleId: string,
|
cycleId: string,
|
||||||
data: {
|
data: {
|
||||||
issue: string;
|
issue: string;
|
||||||
}
|
}
|
||||||
) {
|
) {
|
||||||
return this.post(CYCLE_DETAIL(workspace_slug, projectId, cycleId), data)
|
return this.post(CYCLE_DETAIL(workspaceSlug, projectId, cycleId), data)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -103,8 +103,8 @@ class ProjectIssuesServices extends APIService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async createIssueProperties(workspace_slug: string, projectId: string, data: any): Promise<any> {
|
async createIssueProperties(workspaceSlug: string, projectId: string, data: any): Promise<any> {
|
||||||
return this.post(ISSUE_PROPERTIES_ENDPOINT(workspace_slug, projectId), data)
|
return this.post(ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId), data)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -114,13 +114,13 @@ class ProjectIssuesServices extends APIService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async patchIssueProperties(
|
async patchIssueProperties(
|
||||||
workspace_slug: string,
|
workspaceSlug: string,
|
||||||
projectId: string,
|
projectId: string,
|
||||||
issuePropertyId: string,
|
issuePropertyId: string,
|
||||||
data: any
|
data: any
|
||||||
): Promise<any> {
|
): Promise<any> {
|
||||||
return this.patch(
|
return this.patch(
|
||||||
ISSUE_PROPERTIES_ENDPOINT(workspace_slug, projectId) + `${issuePropertyId}/`,
|
ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId) + `${issuePropertyId}/`,
|
||||||
data
|
data
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -133,12 +133,12 @@ class ProjectIssuesServices extends APIService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async createIssueComment(
|
async createIssueComment(
|
||||||
workspace_slug: string,
|
workspaceSlug: string,
|
||||||
projectId: string,
|
projectId: string,
|
||||||
issueId: string,
|
issueId: string,
|
||||||
data: any
|
data: any
|
||||||
): Promise<any> {
|
): Promise<any> {
|
||||||
return this.post(ISSUE_COMMENTS(workspace_slug, projectId, issueId), data)
|
return this.post(ISSUE_COMMENTS(workspaceSlug, projectId, issueId), data)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -148,13 +148,13 @@ class ProjectIssuesServices extends APIService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async patchIssueComment(
|
async patchIssueComment(
|
||||||
workspace_slug: string,
|
workspaceSlug: string,
|
||||||
projectId: string,
|
projectId: string,
|
||||||
issueId: string,
|
issueId: string,
|
||||||
commentId: string,
|
commentId: string,
|
||||||
data: IIssueComment
|
data: IIssueComment
|
||||||
): Promise<any> {
|
): 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) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -164,12 +164,12 @@ class ProjectIssuesServices extends APIService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async deleteIssueComment(
|
async deleteIssueComment(
|
||||||
workspace_slug: string,
|
workspaceSlug: string,
|
||||||
projectId: string,
|
projectId: string,
|
||||||
issueId: string,
|
issueId: string,
|
||||||
commentId: string
|
commentId: string
|
||||||
): Promise<any> {
|
): 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) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -178,8 +178,8 @@ class ProjectIssuesServices extends APIService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async getIssueLabels(workspace_slug: string, projectId: string): Promise<any> {
|
async getIssueLabels(workspaceSlug: string, projectId: string): Promise<any> {
|
||||||
return this.get(ISSUE_LABELS(workspace_slug, projectId))
|
return this.get(ISSUE_LABELS(workspaceSlug, projectId))
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -188,8 +188,8 @@ class ProjectIssuesServices extends APIService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async createIssueLabel(workspace_slug: string, projectId: string, data: any): Promise<any> {
|
async createIssueLabel(workspaceSlug: string, projectId: string, data: any): Promise<any> {
|
||||||
return this.post(ISSUE_LABELS(workspace_slug, projectId), data)
|
return this.post(ISSUE_LABELS(workspaceSlug, projectId), data)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -199,12 +199,12 @@ class ProjectIssuesServices extends APIService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async updateIssue(
|
async updateIssue(
|
||||||
workspace_slug: string,
|
workspaceSlug: string,
|
||||||
projectId: string,
|
projectId: string,
|
||||||
issueId: string,
|
issueId: string,
|
||||||
data: any
|
data: any
|
||||||
): Promise<any> {
|
): Promise<any> {
|
||||||
return this.put(ISSUE_DETAIL(workspace_slug, projectId, issueId), data)
|
return this.put(ISSUE_DETAIL(workspaceSlug, projectId, issueId), data)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -214,12 +214,12 @@ class ProjectIssuesServices extends APIService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async patchIssue(
|
async patchIssue(
|
||||||
workspace_slug: string,
|
workspaceSlug: string,
|
||||||
projectId: string,
|
projectId: string,
|
||||||
issueId: string,
|
issueId: string,
|
||||||
data: Partial<IIssue>
|
data: Partial<IIssue>
|
||||||
): Promise<any> {
|
): Promise<any> {
|
||||||
return this.patch(ISSUE_DETAIL(workspace_slug, projectId, issueId), data)
|
return this.patch(ISSUE_DETAIL(workspaceSlug, projectId, issueId), data)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -228,8 +228,8 @@ class ProjectIssuesServices extends APIService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async deleteIssue(workspace_slug: string, projectId: string, issuesId: string): Promise<any> {
|
async deleteIssue(workspaceSlug: string, projectId: string, issuesId: string): Promise<any> {
|
||||||
return this.delete(ISSUE_DETAIL(workspace_slug, projectId, issuesId))
|
return this.delete(ISSUE_DETAIL(workspaceSlug, projectId, issuesId))
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -238,8 +238,8 @@ class ProjectIssuesServices extends APIService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async bulkDeleteIssues(workspace_slug: string, projectId: string, data: any): Promise<any> {
|
async bulkDeleteIssues(workspaceSlug: string, projectId: string, data: any): Promise<any> {
|
||||||
return this.delete(BULK_DELETE_ISSUES(workspace_slug, projectId), data)
|
return this.delete(BULK_DELETE_ISSUES(workspaceSlug, projectId), data)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
@ -249,12 +249,12 @@ class ProjectIssuesServices extends APIService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async bulkAddIssuesToCycle(
|
async bulkAddIssuesToCycle(
|
||||||
workspace_slug: string,
|
workspaceSlug: string,
|
||||||
projectId: string,
|
projectId: string,
|
||||||
cycleId: string,
|
cycleId: string,
|
||||||
data: any
|
data: any
|
||||||
): Promise<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) => {
|
.then((response) => {
|
||||||
return response?.data;
|
return response?.data;
|
||||||
})
|
})
|
||||||
|
@ -18,6 +18,7 @@
|
|||||||
"js-cookie": "^3.0.1",
|
"js-cookie": "^3.0.1",
|
||||||
"lexical": "^0.6.4",
|
"lexical": "^0.6.4",
|
||||||
"next": "12.2.2",
|
"next": "12.2.2",
|
||||||
|
"pnpm": "^7.17.1",
|
||||||
"prosemirror-example-setup": "^1.2.1",
|
"prosemirror-example-setup": "^1.2.1",
|
||||||
"prosemirror-model": "^1.18.1",
|
"prosemirror-model": "^1.18.1",
|
||||||
"prosemirror-schema-basic": "^1.2.0",
|
"prosemirror-schema-basic": "^1.2.0",
|
||||||
|
@ -1,19 +1,26 @@
|
|||||||
// next
|
// next
|
||||||
import type { NextPage } from "next";
|
import type { NextPage } from "next";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
// react
|
// react
|
||||||
import React, { useCallback, useEffect, useState } from "react";
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
// swr
|
// swr
|
||||||
import useSWR from "swr";
|
import useSWR, { mutate } from "swr";
|
||||||
// react hook form
|
// react hook form
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm, Controller } from "react-hook-form";
|
||||||
// headless ui
|
// headless ui
|
||||||
import { Tab } from "@headlessui/react";
|
import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
|
||||||
// services
|
// services
|
||||||
import issuesServices from "lib/services/issues.services";
|
import issuesServices from "lib/services/issues.services";
|
||||||
import stateServices from "lib/services/state.services";
|
import stateServices from "lib/services/state.services";
|
||||||
// fetch keys
|
// 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
|
// hooks
|
||||||
import useUser from "lib/hooks/useUser";
|
import useUser from "lib/hooks/useUser";
|
||||||
// layouts
|
// layouts
|
||||||
@ -34,7 +41,14 @@ import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
|
|||||||
// types
|
// types
|
||||||
import { IIssue, IIssueComment, IssueResponse, IState } from "types";
|
import { IIssue, IIssueComment, IssueResponse, IState } from "types";
|
||||||
// icons
|
// 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 IssueDetail: NextPage = () => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@ -44,9 +58,24 @@ const IssueDetail: NextPage = () => {
|
|||||||
const { activeWorkspace, activeProject, issues, mutateIssues } = useUser();
|
const { activeWorkspace, activeProject, issues, mutateIssues } = useUser();
|
||||||
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false);
|
||||||
|
|
||||||
const [issueDetail, setIssueDetail] = useState<IIssue | undefined>(undefined);
|
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 {
|
const {
|
||||||
register,
|
register,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
@ -151,56 +180,100 @@ const IssueDetail: NextPage = () => {
|
|||||||
const prevIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) - 1];
|
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 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 (
|
return (
|
||||||
<AdminLayout>
|
<AdminLayout>
|
||||||
<CreateUpdateIssuesModal
|
<CreateUpdateIssuesModal
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
setIsOpen={setIsOpen}
|
setIsOpen={setIsOpen}
|
||||||
projectId={projectId as string}
|
projectId={projectId as string}
|
||||||
data={isOpen ? issueDetail : undefined}
|
prePopulateData={{
|
||||||
isUpdatingSingleIssue
|
...preloadedData,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<AddAsSubIssue
|
||||||
|
isOpen={isAddAsSubIssueOpen}
|
||||||
|
setIsOpen={setIsAddAsSubIssueOpen}
|
||||||
|
parentId={issueDetail?.id ?? ""}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="space-y-5">
|
<div className="flex items-center justify-between w-full mb-5">
|
||||||
<div className="flex items-center justify-between w-full">
|
<Breadcrumbs>
|
||||||
<Breadcrumbs>
|
<BreadcrumbItem
|
||||||
<BreadcrumbItem
|
title={`${activeProject?.name ?? "Project"} Issues`}
|
||||||
title={`${activeProject?.name ?? "Project"} Issues`}
|
link={`/projects/${activeProject?.id}/issues`}
|
||||||
link={`/projects/${activeProject?.id}/issues`}
|
/>
|
||||||
/>
|
<BreadcrumbItem
|
||||||
<BreadcrumbItem
|
title={`Issue ${activeProject?.identifier ?? "Project"}-${
|
||||||
title={`Issue ${activeProject?.identifier ?? "Project"}-${
|
issueDetail?.sequence_id ?? "..."
|
||||||
issueDetail?.sequence_id ?? "..."
|
} Details`}
|
||||||
} Details`}
|
/>
|
||||||
/>
|
</Breadcrumbs>
|
||||||
</Breadcrumbs>
|
<div className="flex items-center gap-x-3">
|
||||||
<div className="flex items-center gap-x-3">
|
<HeaderButton
|
||||||
<HeaderButton
|
Icon={ChevronLeftIcon}
|
||||||
Icon={ChevronLeftIcon}
|
label="Previous"
|
||||||
label="Previous"
|
className={`${!prevIssue ? "cursor-not-allowed opacity-70" : ""}`}
|
||||||
className={`${!prevIssue ? "cursor-not-allowed opacity-70" : ""}`}
|
onClick={() => {
|
||||||
onClick={() => {
|
if (!prevIssue) return;
|
||||||
if (!prevIssue) return;
|
router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`);
|
||||||
router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`);
|
}}
|
||||||
}}
|
/>
|
||||||
/>
|
<HeaderButton
|
||||||
<HeaderButton
|
Icon={ChevronRightIcon}
|
||||||
Icon={ChevronRightIcon}
|
disabled={!nextIssue}
|
||||||
disabled={!nextIssue}
|
label="Next"
|
||||||
label="Next"
|
className={`${!nextIssue ? "cursor-not-allowed opacity-70" : ""}`}
|
||||||
className={`${!nextIssue ? "cursor-not-allowed opacity-70" : ""}`}
|
onClick={() => {
|
||||||
onClick={() => {
|
if (!nextIssue) return;
|
||||||
if (!nextIssue) return;
|
router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`);
|
||||||
router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`);
|
}}
|
||||||
}}
|
position="reverse"
|
||||||
position="reverse"
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{issueDetail && activeProject ? (
|
</div>
|
||||||
<div className="grid grid-cols-4 gap-5">
|
{issueDetail && activeProject ? (
|
||||||
<div className="col-span-3 space-y-5">
|
<div className="grid grid-cols-4 gap-5">
|
||||||
<div className="bg-secondary rounded-lg p-4">
|
<div className="col-span-3 space-y-5">
|
||||||
|
<div className="bg-secondary rounded-lg p-4">
|
||||||
|
{/* <Controller
|
||||||
|
control={control}
|
||||||
|
name="description"
|
||||||
|
render={({ field: { value, onChange } }) => (
|
||||||
|
<RichTextEditor
|
||||||
|
onChange={(state: string) => {
|
||||||
|
handleDescriptionChange(state);
|
||||||
|
onChange(issueDescriptionValue);
|
||||||
|
}}
|
||||||
|
value={issueDescriptionValue}
|
||||||
|
id="editor"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/> */}
|
||||||
|
<div>
|
||||||
<TextArea
|
<TextArea
|
||||||
id="name"
|
id="name"
|
||||||
placeholder="Enter issue name"
|
placeholder="Enter issue name"
|
||||||
@ -229,62 +302,238 @@ const IssueDetail: NextPage = () => {
|
|||||||
register={register}
|
register={register}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-secondary rounded-lg p-4">
|
<div className="mt-2">
|
||||||
<div className="relative">
|
{subIssues && subIssues.length > 0 ? (
|
||||||
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
<Disclosure>
|
||||||
<div className="w-full border-t border-gray-300" />
|
{({ open }) => (
|
||||||
</div>
|
<>
|
||||||
<div className="relative flex justify-center">
|
<div className="flex justify-between items-center">
|
||||||
<span className="bg-white px-2 text-sm text-gray-500">Activity/Comments</span>
|
<Disclosure.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
|
||||||
</div>
|
<ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
|
||||||
</div>
|
Sub-issues{" "}
|
||||||
<div className="w-full space-y-5 mt-3">
|
<span className="text-gray-600 ml-1">{subIssues.length}</span>
|
||||||
<Tab.Group>
|
</Disclosure.Button>
|
||||||
<Tab.List className="flex gap-x-3">
|
{open ? (
|
||||||
{["Comments", "Activity"].map((item) => (
|
<div className="flex items-center">
|
||||||
<Tab
|
<button
|
||||||
key={item}
|
type="button"
|
||||||
className={({ selected }) =>
|
className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium"
|
||||||
`px-3 py-1 text-sm rounded-md border-2 border-gray-700 ${
|
onClick={() => {
|
||||||
selected ? "bg-gray-700 text-white" : ""
|
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"
|
||||||
>
|
>
|
||||||
{item}
|
<Disclosure.Panel className="flex flex-col gap-y-1 mt-3">
|
||||||
</Tab>
|
{subIssues.map((subIssue) => (
|
||||||
))}
|
<Link
|
||||||
</Tab.List>
|
key={subIssue.id}
|
||||||
<Tab.Panels>
|
href={`/projects/${activeProject.id}/issues/${subIssue.id}`}
|
||||||
<Tab.Panel>
|
>
|
||||||
<IssueCommentSection
|
<a className="p-2 flex justify-between items-center rounded text-xs hover:bg-gray-100">
|
||||||
comments={issueComments}
|
<div className="flex items-center gap-2">
|
||||||
workspaceSlug={activeWorkspace?.slug as string}
|
<span
|
||||||
projectId={projectId as string}
|
className={`h-1.5 w-1.5 block rounded-full`}
|
||||||
issueId={issueId as string}
|
style={{
|
||||||
/>
|
backgroundColor: subIssue.state_detail.color,
|
||||||
</Tab.Panel>
|
}}
|
||||||
<Tab.Panel>
|
/>
|
||||||
<IssueActivitySection issueActivities={issueActivities} states={states} />
|
<span className="text-gray-600">
|
||||||
</Tab.Panel>
|
{activeProject.identifier}-{subIssue.sequence_id}
|
||||||
</Tab.Panels>
|
</span>
|
||||||
</Tab.Group>
|
<span className="font-medium">{subIssue.name}</span>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<div className="sticky top-0 h-min bg-secondary p-4 rounded-lg">
|
<div className="bg-secondary rounded-lg p-4 space-y-5">
|
||||||
<IssueDetailSidebar
|
<Tab.Group>
|
||||||
control={control}
|
<Tab.List className="flex gap-x-3">
|
||||||
issueDetail={issueDetail}
|
{["Comments", "Activity"].map((item) => (
|
||||||
submitChanges={submitChanges}
|
<Tab
|
||||||
/>
|
key={item}
|
||||||
|
className={({ selected }) =>
|
||||||
|
`px-3 py-1 text-sm rounded-md border-2 border-gray-700 ${
|
||||||
|
selected ? "bg-gray-700 text-white" : ""
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</Tab>
|
||||||
|
))}
|
||||||
|
</Tab.List>
|
||||||
|
<Tab.Panels>
|
||||||
|
<Tab.Panel>
|
||||||
|
<IssueCommentSection
|
||||||
|
comments={issueComments}
|
||||||
|
workspaceSlug={activeWorkspace?.slug as string}
|
||||||
|
projectId={projectId as string}
|
||||||
|
issueId={issueId as string}
|
||||||
|
/>
|
||||||
|
</Tab.Panel>
|
||||||
|
<Tab.Panel>
|
||||||
|
<IssueActivitySection issueActivities={issueActivities} states={states} />
|
||||||
|
</Tab.Panel>
|
||||||
|
</Tab.Panels>
|
||||||
|
</Tab.Group>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
<div className="sticky top-0 h-min bg-secondary p-4 rounded-lg">
|
||||||
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
|
<IssueDetailSidebar
|
||||||
<Spinner />
|
control={control}
|
||||||
|
issueDetail={issueDetail}
|
||||||
|
submitChanges={submitChanges}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
) : (
|
||||||
|
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</AdminLayout>
|
</AdminLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -51,7 +51,7 @@ const ProjectIssues: NextPage = () => {
|
|||||||
const [editIssue, setEditIssue] = useState<string | undefined>();
|
const [editIssue, setEditIssue] = useState<string | undefined>();
|
||||||
const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
|
const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
|
||||||
|
|
||||||
const { activeWorkspace, activeProject } = useUser();
|
const { activeWorkspace, activeProject, issues } = useUser();
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
@ -300,7 +300,7 @@ const ProjectIssues: NextPage = () => {
|
|||||||
handleDeleteIssue={setDeleteIssue}
|
handleDeleteIssue={setDeleteIssue}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="h-full pb-7 mb-7">
|
<div className="h-full">
|
||||||
<BoardView
|
<BoardView
|
||||||
properties={properties}
|
properties={properties}
|
||||||
selectedGroup={groupByProperty}
|
selectedGroup={groupByProperty}
|
||||||
|
@ -22,6 +22,7 @@ import { Spinner, Button } from "ui";
|
|||||||
import { PlusIcon, EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
|
import { PlusIcon, EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
|
||||||
import HeaderButton from "ui/HeaderButton";
|
import HeaderButton from "ui/HeaderButton";
|
||||||
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
|
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
const ROLE = {
|
const ROLE = {
|
||||||
5: "Guest",
|
5: "Guest",
|
||||||
@ -54,6 +55,8 @@ const ProjectMembers: NextPage = () => {
|
|||||||
let members = [
|
let members = [
|
||||||
...(projectMembers?.map((item: any) => ({
|
...(projectMembers?.map((item: any) => ({
|
||||||
id: item.id,
|
id: item.id,
|
||||||
|
avatar: item.member?.avatar,
|
||||||
|
first_name: item.member?.first_name,
|
||||||
email: item.member?.email,
|
email: item.member?.email,
|
||||||
role: item.role,
|
role: item.role,
|
||||||
status: true,
|
status: true,
|
||||||
@ -61,6 +64,8 @@ const ProjectMembers: NextPage = () => {
|
|||||||
})) || []),
|
})) || []),
|
||||||
...(projectInvitations?.map((item: any) => ({
|
...(projectInvitations?.map((item: any) => ({
|
||||||
id: item.id,
|
id: item.id,
|
||||||
|
avatar: item.avatar ?? "",
|
||||||
|
first_name: item.first_name ?? item.email,
|
||||||
email: item.email,
|
email: item.email,
|
||||||
role: item.role,
|
role: item.role,
|
||||||
status: item.accepted,
|
status: item.accepted,
|
||||||
@ -115,7 +120,20 @@ const ProjectMembers: NextPage = () => {
|
|||||||
<tbody className="divide-y divide-gray-200 bg-white">
|
<tbody className="divide-y divide-gray-200 bg-white">
|
||||||
{members?.map((member: any) => (
|
{members?.map((member: any) => (
|
||||||
<tr key={member.id}>
|
<tr key={member.id}>
|
||||||
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
<td className="whitespace-nowrap flex items-center gap-2 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
||||||
|
{member.avatar && member.avatar !== "" ? (
|
||||||
|
<Image
|
||||||
|
src={member.avatar}
|
||||||
|
height={20}
|
||||||
|
width={20}
|
||||||
|
className="rounded-full"
|
||||||
|
alt={member.first_name}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<span className="h-5 w-5 capitalize bg-gray-700 text-white grid place-items-center rounded-full">
|
||||||
|
{member.first_name.charAt(0)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
{member.email ?? "No email has been added."}
|
{member.email ?? "No email has been added."}
|
||||||
</td>
|
</td>
|
||||||
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
||||||
|
@ -1,15 +1,15 @@
|
|||||||
import React, { useEffect, useCallback, useState } from "react";
|
import React, { useEffect, useCallback, useState } from "react";
|
||||||
// swr
|
|
||||||
import { mutate } from "swr";
|
|
||||||
// next
|
// next
|
||||||
import type { NextPage } from "next";
|
import type { NextPage } from "next";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
// swr
|
// swr
|
||||||
|
import { mutate } from "swr";
|
||||||
|
// swr
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
// react hook form
|
// react hook form
|
||||||
import { useForm, Controller } from "react-hook-form";
|
import { useForm, Controller } from "react-hook-form";
|
||||||
// headless ui
|
// headless ui
|
||||||
import { Listbox, Transition } from "@headlessui/react";
|
import { Listbox, Tab, Transition } from "@headlessui/react";
|
||||||
// layouts
|
// layouts
|
||||||
import AdminLayout from "layouts/AdminLayout";
|
import AdminLayout from "layouts/AdminLayout";
|
||||||
// service
|
// service
|
||||||
@ -37,7 +37,7 @@ import {
|
|||||||
PencilIcon,
|
PencilIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
// types
|
// types
|
||||||
import type { IProject, IState, IWorkspace, WorkspaceMember } from "types";
|
import type { IProject, IWorkspace, WorkspaceMember } from "types";
|
||||||
|
|
||||||
const defaultValues: Partial<IProject> = {
|
const defaultValues: Partial<IProject> = {
|
||||||
name: "",
|
name: "",
|
||||||
@ -142,7 +142,7 @@ const ProjectSettings: NextPage = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<AdminLayout>
|
<AdminLayout>
|
||||||
<div className="space-y-5">
|
<div className="space-y-5 mb-5">
|
||||||
<CreateUpdateStateModal
|
<CreateUpdateStateModal
|
||||||
isOpen={isCreateStateModalOpen || Boolean(selectedState)}
|
isOpen={isCreateStateModalOpen || Boolean(selectedState)}
|
||||||
handleClose={() => {
|
handleClose={() => {
|
||||||
@ -154,13 +154,29 @@ const ProjectSettings: NextPage = () => {
|
|||||||
/>
|
/>
|
||||||
<Breadcrumbs>
|
<Breadcrumbs>
|
||||||
<BreadcrumbItem title="Projects" link="/projects" />
|
<BreadcrumbItem title="Projects" link="/projects" />
|
||||||
<BreadcrumbItem title={`${activeProject?.name} Settings`} />
|
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Settings`} />
|
||||||
</Breadcrumbs>
|
</Breadcrumbs>
|
||||||
|
</div>
|
||||||
|
{projectDetails ? (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{projectDetails ? (
|
<form onSubmit={handleSubmit(onSubmit)} className="mt-3">
|
||||||
<div>
|
<Tab.Group>
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="mt-3">
|
<Tab.List className="flex items-center gap-x-4 gap-y-2 flex-wrap">
|
||||||
<div className="space-y-8">
|
{["General", "Control", "States", "Labels"].map((tab, index) => (
|
||||||
|
<Tab
|
||||||
|
key={index}
|
||||||
|
className={({ selected }) =>
|
||||||
|
`px-6 py-2 border-2 border-theme hover:bg-theme hover:text-white text-xs font-medium rounded-md duration-300 ${
|
||||||
|
selected ? "bg-theme text-white" : ""
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{tab}
|
||||||
|
</Tab>
|
||||||
|
))}
|
||||||
|
</Tab.List>
|
||||||
|
<Tab.Panels className="mt-8">
|
||||||
|
<Tab.Panel>
|
||||||
<section className="space-y-5">
|
<section className="space-y-5">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-medium leading-6 text-gray-900">General</h3>
|
<h3 className="text-lg font-medium leading-6 text-gray-900">General</h3>
|
||||||
@ -237,6 +253,8 @@ const ProjectSettings: NextPage = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
</Tab.Panel>
|
||||||
|
<Tab.Panel>
|
||||||
<section className="space-y-5">
|
<section className="space-y-5">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-medium leading-6 text-gray-900">Control</h3>
|
<h3 className="text-lg font-medium leading-6 text-gray-900">Control</h3>
|
||||||
@ -406,6 +424,8 @@ const ProjectSettings: NextPage = () => {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
</Tab.Panel>
|
||||||
|
<Tab.Panel>
|
||||||
<section className="space-y-5">
|
<section className="space-y-5">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-medium leading-6 text-gray-900">State</h3>
|
<h3 className="text-lg font-medium leading-6 text-gray-900">State</h3>
|
||||||
@ -447,6 +467,8 @@ const ProjectSettings: NextPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
</Tab.Panel>
|
||||||
|
<Tab.Panel>
|
||||||
<section className="space-y-5">
|
<section className="space-y-5">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
@ -500,16 +522,16 @@ const ProjectSettings: NextPage = () => {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</Tab.Panel>
|
||||||
</form>
|
</Tab.Panels>
|
||||||
</div>
|
</Tab.Group>
|
||||||
) : (
|
</form>
|
||||||
<div className="w-full h-full flex justify-center items-center">
|
|
||||||
<Spinner />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
|
<div className="h-full w-full flex justify-center items-center">
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</AdminLayout>
|
</AdminLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
// next
|
// next
|
||||||
import type { NextPage } from "next";
|
import type { NextPage } from "next";
|
||||||
|
import Image from "next/image";
|
||||||
// swr
|
// swr
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
// headless ui
|
// headless ui
|
||||||
@ -49,6 +50,8 @@ const WorkspaceInvite: NextPage = () => {
|
|||||||
const members = [
|
const members = [
|
||||||
...(workspaceMembers?.map((item) => ({
|
...(workspaceMembers?.map((item) => ({
|
||||||
id: item.id,
|
id: item.id,
|
||||||
|
avatar: item.member?.avatar,
|
||||||
|
first_name: item.member?.first_name,
|
||||||
email: item.member?.email,
|
email: item.member?.email,
|
||||||
role: item.role,
|
role: item.role,
|
||||||
status: true,
|
status: true,
|
||||||
@ -56,6 +59,8 @@ const WorkspaceInvite: NextPage = () => {
|
|||||||
})) || []),
|
})) || []),
|
||||||
...(workspaceInvitations?.map((item) => ({
|
...(workspaceInvitations?.map((item) => ({
|
||||||
id: item.id,
|
id: item.id,
|
||||||
|
avatar: item.avatar ?? "",
|
||||||
|
first_name: item.first_name ?? item.email,
|
||||||
email: item.email,
|
email: item.email,
|
||||||
role: item.role,
|
role: item.role,
|
||||||
status: item.accepted,
|
status: item.accepted,
|
||||||
@ -119,7 +124,20 @@ const WorkspaceInvite: NextPage = () => {
|
|||||||
<tbody className="divide-y divide-gray-200 bg-white">
|
<tbody className="divide-y divide-gray-200 bg-white">
|
||||||
{members?.map((member: any) => (
|
{members?.map((member: any) => (
|
||||||
<tr key={member.id}>
|
<tr key={member.id}>
|
||||||
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
<td className="whitespace-nowrap flex items-center gap-2 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
||||||
|
{member.avatar && member.avatar !== "" ? (
|
||||||
|
<Image
|
||||||
|
src={member.avatar}
|
||||||
|
height={20}
|
||||||
|
width={20}
|
||||||
|
className="rounded-full"
|
||||||
|
alt={member.first_name}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<span className="h-5 w-5 capitalize bg-gray-700 text-white grid place-items-center rounded-full">
|
||||||
|
{member.first_name.charAt(0)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
{member.email ?? "No email has been added."}
|
{member.email ?? "No email has been added."}
|
||||||
</td>
|
</td>
|
||||||
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 919 B |
@ -36,13 +36,13 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
|
|||||||
"inline-flex items-center rounded justify-center font-medium",
|
"inline-flex items-center rounded justify-center font-medium",
|
||||||
theme === "primary"
|
theme === "primary"
|
||||||
? `${
|
? `${
|
||||||
disabled ? "opacity-70" : "bg-theme hover:bg-indigo-700"
|
disabled ? "opacity-70" : ""
|
||||||
} text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 border border-transparent`
|
} text-white shadow-sm bg-theme hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 border border-transparent`
|
||||||
: theme === "secondary"
|
: theme === "secondary"
|
||||||
? "border border-gray-300 bg-white"
|
? "border border-gray-300 bg-white"
|
||||||
: `${
|
: `${
|
||||||
disabled ? "opacity-70" : "bg-red-600 hover:bg-red-700"
|
disabled ? "opacity-70" : ""
|
||||||
} text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 border border-transparent`,
|
} text-white shadow-sm bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 border border-transparent`,
|
||||||
size === "sm"
|
size === "sm"
|
||||||
? "p-2 text-xs"
|
? "p-2 text-xs"
|
||||||
: size === "md"
|
: size === "md"
|
||||||
|
@ -39,14 +39,52 @@ const SearchListbox: React.FC<Props> = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Combobox as="div" {...props} className="flex-shrink-0">
|
<Combobox as="div" {...props} className="relative flex-shrink-0">
|
||||||
{({ open }: any) => (
|
{({ open }: any) => (
|
||||||
<>
|
<>
|
||||||
<Combobox.Label className="sr-only"> {title} </Combobox.Label>
|
<Combobox.Label className="sr-only">{title}</Combobox.Label>
|
||||||
<div className="relative">
|
<Combobox.Button
|
||||||
<Combobox.Button
|
className={`flex items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm duration-300 ${
|
||||||
className={`flex items-center gap-1 hover:bg-gray-100 relative border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm duration-300 ${
|
width === "sm"
|
||||||
width === "sm"
|
? "w-32"
|
||||||
|
: width === "md"
|
||||||
|
? "w-48"
|
||||||
|
: width === "lg"
|
||||||
|
? "w-64"
|
||||||
|
: width === "xl"
|
||||||
|
? "w-80"
|
||||||
|
: width === "2xl"
|
||||||
|
? "w-96"
|
||||||
|
: ""
|
||||||
|
} ${buttonClassName || ""}`}
|
||||||
|
>
|
||||||
|
{icon ?? null}
|
||||||
|
<span
|
||||||
|
className={classNames(
|
||||||
|
value === null || value === undefined ? "" : "text-gray-900",
|
||||||
|
"hidden truncate sm:ml-2 sm:block"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{Array.isArray(value)
|
||||||
|
? value
|
||||||
|
.map((v) => options?.find((option) => option.value === v)?.display)
|
||||||
|
.join(", ") || title
|
||||||
|
: options?.find((option) => option.value === value)?.display || title}
|
||||||
|
</span>
|
||||||
|
</Combobox.Button>
|
||||||
|
|
||||||
|
<Transition
|
||||||
|
show={open}
|
||||||
|
as={React.Fragment}
|
||||||
|
leave="transition ease-in duration-100"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
>
|
||||||
|
<Combobox.Options
|
||||||
|
className={`absolute z-10 mt-1 bg-white shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none max-h-32 overflow-auto ${
|
||||||
|
width === "xs"
|
||||||
|
? "w-20"
|
||||||
|
: width === "sm"
|
||||||
? "w-32"
|
? "w-32"
|
||||||
: width === "md"
|
: width === "md"
|
||||||
? "w-48"
|
? "w-48"
|
||||||
@ -57,91 +95,51 @@ const SearchListbox: React.FC<Props> = ({
|
|||||||
: width === "2xl"
|
: width === "2xl"
|
||||||
? "w-96"
|
? "w-96"
|
||||||
: ""
|
: ""
|
||||||
} ${buttonClassName || ""}`}
|
}} ${
|
||||||
|
optionsFontsize === "sm"
|
||||||
|
? "text-xs"
|
||||||
|
: optionsFontsize === "md"
|
||||||
|
? "text-base"
|
||||||
|
: optionsFontsize === "lg"
|
||||||
|
? "text-lg"
|
||||||
|
: optionsFontsize === "xl"
|
||||||
|
? "text-xl"
|
||||||
|
: optionsFontsize === "2xl"
|
||||||
|
? "text-2xl"
|
||||||
|
: ""
|
||||||
|
} ${optionsClassName || ""}`}
|
||||||
>
|
>
|
||||||
{icon ?? null}
|
<Combobox.Input
|
||||||
<span
|
className="w-full bg-transparent border-b p-2 mb-1 focus:outline-none sm:text-sm"
|
||||||
className={classNames(
|
onChange={(event) => setQuery(event.target.value)}
|
||||||
value === null || value === undefined ? "" : "text-gray-900",
|
placeholder="Search"
|
||||||
"hidden truncate sm:ml-2 sm:block"
|
displayValue={(assigned: any) => assigned?.name}
|
||||||
)}
|
/>
|
||||||
>
|
<div className="p-1">
|
||||||
{Array.isArray(value)
|
{filteredOptions ? (
|
||||||
? value
|
filteredOptions.length > 0 ? (
|
||||||
.map((v) => options?.find((option) => option.value === v)?.display)
|
filteredOptions.map((option) => (
|
||||||
.join(", ") || title
|
<Combobox.Option
|
||||||
: options?.find((option) => option.value === value)?.display || title}
|
key={option.value}
|
||||||
</span>
|
className={({ active }) =>
|
||||||
</Combobox.Button>
|
`${
|
||||||
|
active ? "text-white bg-theme" : "text-gray-900"
|
||||||
<Transition
|
} cursor-pointer select-none truncate font-medium relative p-2 rounded-md`
|
||||||
show={open}
|
}
|
||||||
as={React.Fragment}
|
value={option.value}
|
||||||
leave="transition ease-in duration-100"
|
>
|
||||||
leaveFrom="opacity-100"
|
{option.element ?? option.display}
|
||||||
leaveTo="opacity-0"
|
</Combobox.Option>
|
||||||
>
|
))
|
||||||
<Combobox.Options
|
|
||||||
className={`absolute mt-1 bg-white shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none max-h-32 overflow-auto z-10 ${
|
|
||||||
width === "xs"
|
|
||||||
? "w-20"
|
|
||||||
: width === "sm"
|
|
||||||
? "w-32"
|
|
||||||
: width === "md"
|
|
||||||
? "w-48"
|
|
||||||
: width === "lg"
|
|
||||||
? "w-64"
|
|
||||||
: width === "xl"
|
|
||||||
? "w-80"
|
|
||||||
: width === "2xl"
|
|
||||||
? "w-96"
|
|
||||||
: ""
|
|
||||||
}} ${
|
|
||||||
optionsFontsize === "sm"
|
|
||||||
? "text-xs"
|
|
||||||
: optionsFontsize === "md"
|
|
||||||
? "text-base"
|
|
||||||
: optionsFontsize === "lg"
|
|
||||||
? "text-lg"
|
|
||||||
: optionsFontsize === "xl"
|
|
||||||
? "text-xl"
|
|
||||||
: optionsFontsize === "2xl"
|
|
||||||
? "text-2xl"
|
|
||||||
: ""
|
|
||||||
} ${optionsClassName || ""}`}
|
|
||||||
>
|
|
||||||
<Combobox.Input
|
|
||||||
className="w-full bg-transparent border-b p-2 mb-1 focus:outline-none sm:text-sm"
|
|
||||||
onChange={(event) => setQuery(event.target.value)}
|
|
||||||
placeholder="Search"
|
|
||||||
displayValue={(assigned: any) => assigned?.name}
|
|
||||||
/>
|
|
||||||
<div className="p-1">
|
|
||||||
{filteredOptions ? (
|
|
||||||
filteredOptions.length > 0 ? (
|
|
||||||
filteredOptions.map((option) => (
|
|
||||||
<Combobox.Option
|
|
||||||
key={option.value}
|
|
||||||
className={({ active }) =>
|
|
||||||
`${
|
|
||||||
active ? "text-white bg-theme" : "text-gray-900"
|
|
||||||
} cursor-pointer select-none truncate font-medium relative p-2 rounded-md`
|
|
||||||
}
|
|
||||||
value={option.value}
|
|
||||||
>
|
|
||||||
{option.element ?? option.display}
|
|
||||||
</Combobox.Option>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<p className="text-sm text-gray-500">No {title.toLowerCase()} found</p>
|
|
||||||
)
|
|
||||||
) : (
|
) : (
|
||||||
<p className="text-sm text-gray-500">Loading...</p>
|
<p className="text-sm text-gray-500">No {title.toLowerCase()} found</p>
|
||||||
)}
|
)
|
||||||
</div>
|
) : (
|
||||||
</Combobox.Options>
|
<p className="text-sm text-gray-500">Loading...</p>
|
||||||
</Transition>
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</Combobox.Options>
|
||||||
|
</Transition>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Combobox>
|
</Combobox>
|
||||||
|
@ -1999,6 +1999,11 @@ pify@^2.3.0:
|
|||||||
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
|
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
|
||||||
integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
|
integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
|
||||||
|
|
||||||
|
pnpm@^7.17.1:
|
||||||
|
version "7.17.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/pnpm/-/pnpm-7.17.1.tgz#6e0cd7b9f2cbd93a7fe60121e328e5281a03c903"
|
||||||
|
integrity sha512-O76jPxzoeja81Z/8YyTfuXt+f7qkpsyEJsNBreWYBLHY5rJkjvNE/bIUGQ2uD/rcYPEtmrZZYox21OjAMC9EGw==
|
||||||
|
|
||||||
postcss-import@^14.1.0:
|
postcss-import@^14.1.0:
|
||||||
version "14.1.0"
|
version "14.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
|
resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
|
||||||
|
Loading…
Reference in New Issue
Block a user