Merge pull request #23 from makeplane/stage-release

promote staging to master
This commit is contained in:
Vamsi Kurama 2022-12-05 06:48:32 +05:30 committed by GitHub
commit 4fb74439c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 1071 additions and 477 deletions

View 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;

View File

@ -4,7 +4,7 @@ import { useRouter } from "next/router";
// swr
import { mutate } from "swr";
// react hook form
import { SubmitHandler, useForm } from "react-hook-form";
import { Controller, SubmitHandler, useForm } from "react-hook-form";
// headless ui
import { Combobox, Dialog, Transition } from "@headlessui/react";
// hooks
@ -17,6 +17,7 @@ import {
FolderIcon,
RectangleStackIcon,
ClipboardDocumentListIcon,
ArrowPathIcon,
} from "@heroicons/react/24/outline";
// commons
import { classNames, copyTextToClipboard } from "constants/common";
@ -27,7 +28,7 @@ import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssue
import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
// types
import { IIssue, IProject, IssueResponse } from "types";
import { Button } from "ui";
import { Button, SearchListbox } from "ui";
import issuesServices from "lib/services/issues.services";
// fetch keys
import { PROJECTS_LIST, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
@ -40,6 +41,7 @@ type ItemType = {
type FormInput = {
issue_ids: string[];
cycleId: string;
};
const CommandPalette: React.FC = () => {
@ -69,6 +71,7 @@ const CommandPalette: React.FC = () => {
register,
formState: { errors, isSubmitting },
handleSubmit,
control,
reset,
setError,
} = useForm<FormInput>();
@ -143,10 +146,24 @@ const CommandPalette: React.FC = () => {
);
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
.bulkDeleteIssues(activeWorkspace.slug, activeProject.id, data)
.then((res) => {
setToastAlert({
title: "Success",
type: "success",
message: res.message,
});
mutate<IssueResponse>(
PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id),
(prevData) => {
@ -170,10 +187,30 @@ const CommandPalette: React.FC = () => {
};
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
.bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, "", data)
.then((res) => {})
.bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, data.cycleId, data)
.then((res) => {
console.log(res);
})
.catch((e) => {
console.log(e);
});
@ -230,7 +267,7 @@ const CommandPalette: React.FC = () => {
leaveFrom="opacity-100 scale-100"
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>
<Combobox
// 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 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">
Add to Cycle
</Button>

View File

@ -37,7 +37,7 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
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">
<div className="bg-white p-8">
<div className="bg-white p-5">
<div className="sm:flex sm:items-start">
<div className="text-center sm:text-left w-full">
<Dialog.Title
@ -59,37 +59,46 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
{
title: "Navigation",
shortcuts: [
{ key: "Ctrl + /", description: "To open navigator" },
{ key: "↑", description: "Move up" },
{ key: "↓", description: "Move down" },
{ key: "←", description: "Move left" },
{ key: "→", description: "Move right" },
{ key: "Enter", description: "Select" },
{ key: "Esc", description: "Close" },
{ keys: "ctrl,/", description: "To open navigator" },
{ keys: "↑", description: "Move up" },
{ keys: "↓", description: "Move down" },
{ keys: "←", description: "Move left" },
{ keys: "→", description: "Move right" },
{ keys: "Enter", description: "Select" },
{ keys: "Esc", description: "Close" },
],
},
{
title: "Common",
shortcuts: [
{ key: "Ctrl + p", description: "To create project" },
{ key: "Ctrl + i", description: "To create issue" },
{ key: "Ctrl + q", description: "To create cycle" },
{ key: "Ctrl + h", description: "To open shortcuts guide" },
{ keys: "ctrl,p", description: "To create project" },
{ keys: "ctrl,i", description: "To create issue" },
{ keys: "ctrl,q", description: "To create cycle" },
{ 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.",
},
],
},
].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>
<div className="flex flex-col gap-y-3">
{shortcuts.map(({ key, description }) => (
<div className="flex justify-between" key={key}>
{shortcuts.map(({ keys, description }, index) => (
<div key={index} className="flex justify-between">
<p className="text-sm text-gray-500">{description}</p>
<div className="flex gap-x-1">
<kbd className="bg-gray-200 text-sm px-1 rounded">{key}</kbd>
<div className="flex items-center gap-x-1">
{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>
))}

View File

@ -1,4 +1,3 @@
import { FC } from "react";
import { EditorState, LexicalEditor, $getRoot, $getSelection } from "lexical";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
@ -25,12 +24,15 @@ export interface RichTextEditorProps {
onChange: (state: string) => void;
id: string;
value: string;
placeholder?: string;
}
const RichTextEditor: FC<RichTextEditorProps> = (props) => {
// props
const { onChange, value, id } = props;
const RichTextEditor: React.FC<RichTextEditorProps> = ({
onChange,
id,
value,
placeholder = "Enter some text...",
}) => {
function handleChange(state: EditorState, editor: LexicalEditor) {
state.read(() => {
onChange(JSON.stringify(state.toJSON()));
@ -54,8 +56,8 @@ const RichTextEditor: FC<RichTextEditorProps> = (props) => {
}
ErrorBoundary={LexicalErrorBoundary}
placeholder={
<div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
Enter some text...
<div className="absolute top-4 left-3 pointer-events-none select-none text-gray-400">
{placeholder}
</div>
}
/>

View File

@ -21,16 +21,8 @@ import {
$isListNode,
ListNode,
} from "@lexical/list";
import {
$isParentElementRTL,
$isAtNodeEnd,
$wrapNodes,
} from "@lexical/selection";
import {
$createHeadingNode,
$createQuoteNode,
$isHeadingNode,
} from "@lexical/rich-text";
import { $isParentElementRTL, $isAtNodeEnd, $wrapNodes } from "@lexical/selection";
import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
import {
$createCodeNode,
$isCodeNode,
@ -50,15 +42,7 @@ const BLOCK_DATA = [
{ type: "ul", name: "Bulleted List" },
];
const supportedBlockTypes = new Set([
"paragraph",
"quote",
"code",
"h1",
"h2",
"ul",
"ol",
]);
const supportedBlockTypes = new Set(["paragraph", "quote", "code", "h1", "h2", "ul", "ol"]);
const blockTypeToBlockName: any = {
code: "Code Block",
@ -84,8 +68,7 @@ export const BlockTypeSelect: FC<BlockTypeSelectProps> = (props) => {
// refs
const dropDownRef = useRef<any>(null);
// states
const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] =
useState(false);
const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] = useState(false);
useEffect(() => {
const toolbar = toolbarRef.current;
@ -205,6 +188,7 @@ export const BlockTypeSelect: FC<BlockTypeSelectProps> = (props) => {
return (
<div className="relative">
<button
type="button"
className="p-2 mr-2 text-sm flex items-center"
onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
aria-label="Formatting Options"

View File

@ -25,17 +25,9 @@ import {
} from "@lexical/list";
import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import {
$isParentElementRTL,
$wrapNodes,
$isAtNodeEnd,
} from "@lexical/selection";
import { $isParentElementRTL, $wrapNodes, $isAtNodeEnd } from "@lexical/selection";
import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
import {
$createHeadingNode,
$createQuoteNode,
$isHeadingNode,
} from "@lexical/rich-text";
import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
// custom elements
import { FloatingLinkEditor } from "./floating-link-editor";
import { BlockTypeSelect } from "./block-type-select";
@ -67,9 +59,7 @@ export const LexicalToolbar = () => {
const [canUndo, setCanUndo] = useState(false);
const [canRedo, setCanRedo] = useState(false);
const [blockType, setBlockType] = useState("paragraph");
const [selectedElementKey, setSelectedElementKey] = useState<string | null>(
null
);
const [selectedElementKey, setSelectedElementKey] = useState<string | null>(null);
const [isRTL, setIsRTL] = useState(false);
const [isLink, setIsLink] = useState(false);
const [isBold, setIsBold] = useState(false);
@ -83,9 +73,7 @@ export const LexicalToolbar = () => {
if ($isRangeSelection(selection)) {
const anchorNode = selection.anchor.getNode();
const element =
anchorNode.getKey() === "root"
? anchorNode
: anchorNode.getTopLevelElementOrThrow();
anchorNode.getKey() === "root" ? anchorNode : anchorNode.getTopLevelElementOrThrow();
const elementKey = element.getKey();
const elementDOM = editor.getElementByKey(elementKey);
if (elementDOM !== null) {
@ -95,9 +83,7 @@ export const LexicalToolbar = () => {
const type = parentList ? parentList.getTag() : element.getTag();
setBlockType(type);
} else {
const type = $isHeadingNode(element)
? element.getTag()
: element.getType();
const type = $isHeadingNode(element) ? element.getTag() : element.getType();
setBlockType(type);
}
}
@ -166,11 +152,9 @@ export const LexicalToolbar = () => {
);
return (
<div
className="flex items-center mb-1 p-1 w-full flex-wrap border-b "
ref={toolbarRef}
>
<div className="flex items-center mb-1 p-1 w-full flex-wrap border-b " ref={toolbarRef}>
<button
type="button"
disabled={!canUndo}
onClick={(e) => {
e.preventDefault();
@ -195,6 +179,7 @@ export const LexicalToolbar = () => {
</svg>
</button>
<button
type="button"
disabled={!canRedo}
onClick={(e) => {
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>
</svg>
</button>
<BlockTypeSelect
editor={editor}
toolbarRef={toolbarRef}
blockType={blockType}
/>
<BlockTypeSelect editor={editor} toolbarRef={toolbarRef} blockType={blockType} />
<button
type="button"
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
@ -243,6 +225,7 @@ export const LexicalToolbar = () => {
</svg>
</button>
<button
type="button"
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
@ -262,6 +245,7 @@ export const LexicalToolbar = () => {
</svg>
</button>
<button
type="button"
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
@ -281,6 +265,7 @@ export const LexicalToolbar = () => {
</svg>
</button>
<button
type="button"
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
@ -300,6 +285,7 @@ export const LexicalToolbar = () => {
</svg>
</button>
<button
type="button"
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
@ -319,6 +305,7 @@ export const LexicalToolbar = () => {
</svg>
</button>
<button
type="button"
onClick={insertLink}
className={"p-2 mr-2 " + (isLink ? "active" : "")}
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>
</svg>
</button>
{isLink &&
createPortal(<FloatingLinkEditor editor={editor} />, document.body)}
{isLink && createPortal(<FloatingLinkEditor editor={editor} />, document.body)}
<button
type="button"
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
@ -360,6 +347,7 @@ export const LexicalToolbar = () => {
</svg>
</button>
<button
type="button"
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
@ -382,6 +370,7 @@ export const LexicalToolbar = () => {
</svg>
</button>
<button
type="button"
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
@ -404,6 +393,7 @@ export const LexicalToolbar = () => {
</svg>
</button>
<button
type="button"
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");

View File

@ -47,7 +47,7 @@ const SelectAssignee: React.FC<Props> = ({ control }) => {
icon={<UserIcon className="h-4 w-4 text-gray-400" />}
/>
)}
></Controller>
/>
);
};

View File

@ -98,6 +98,12 @@ const ListView: React.FC<Props> = ({
<table className="min-w-full">
<thead className="bg-gray-100">
<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(
(key) =>
properties[key as keyof Properties] && (
@ -156,84 +162,78 @@ const ListView: React.FC<Props> = ({
)}
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(
(key) =>
properties[key as keyof Properties] && (
<td
key={key}
className="px-3 py-4 text-sm font-medium text-gray-900 relative"
>
{(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">
<React.Fragment key={key}>
{(key as keyof Properties) === "key" ? (
<td className="px-3 py-4 font-medium text-gray-900 text-xs whitespace-nowrap">
{activeProject?.identifier}-{issue.sequence_id}
</p>
</td>
) : (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}
</p>
</td>
) : (key as keyof Properties) === "priority" ? (
<Listbox
as="div"
value={issue.priority}
onChange={(data: string) => {
partialUpdateIssue({ priority: data }, issue.id);
}}
className="flex-shrink-0"
>
{({ open }) => (
<>
<div className="">
<Listbox.Button className="inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-1 px-0.5 text-xs font-medium text-gray-500 hover:bg-gray-100 border">
<span
className={classNames(
issue.priority ? "" : "text-gray-900",
"hidden truncate capitalize sm:block w-16"
)}
>
{issue.priority ?? "None"}
</span>
</Listbox.Button>
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
<Listbox
as="div"
value={issue.priority}
onChange={(data: string) => {
partialUpdateIssue({ priority: data }, issue.id);
}}
className="flex-shrink-0"
>
{({ open }) => (
<>
<div className="">
<Listbox.Button className="inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-1 px-0.5 text-xs font-medium text-gray-500 hover:bg-gray-100 border">
<span
className={classNames(
issue.priority ? "" : "text-gray-900",
"hidden truncate capitalize sm:block w-16"
)}
>
{issue.priority ?? "None"}
</span>
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
{PRIORITIES?.map((priority) => (
<Listbox.Option
key={priority}
className={({ active }) =>
classNames(
active ? "bg-indigo-50" : "bg-white",
"cursor-pointer capitalize select-none px-3 py-2"
)
}
value={priority}
>
{priority}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
{PRIORITIES?.map((priority) => (
<Listbox.Option
key={priority}
className={({ active }) =>
classNames(
active ? "bg-indigo-50" : "bg-white",
"cursor-pointer capitalize select-none px-3 py-2"
)
}
value={priority}
>
{priority}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
</td>
) : (key as keyof Properties) === "assignee" ? (
<>
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
<Listbox
as="div"
value={issue.assignees}
@ -329,80 +329,84 @@ const ListView: React.FC<Props> = ({
</>
)}
</Listbox>
</>
</td>
) : (key as keyof Properties) === "state" ? (
<Listbox
as="div"
value={issue.state}
onChange={(data: string) => {
partialUpdateIssue({ state: data }, issue.id);
}}
className="flex-shrink-0"
>
{({ open }) => (
<>
<div>
<Listbox.Button
className="inline-flex items-center whitespace-nowrap rounded-full px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100 border"
style={{
border: `2px solid ${issue.state_detail.color}`,
backgroundColor: `${issue.state_detail.color}20`,
}}
>
<span
className={classNames(
issue.state ? "" : "text-gray-900",
"hidden capitalize sm:block w-16"
)}
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
<Listbox
as="div"
value={issue.state}
onChange={(data: string) => {
partialUpdateIssue({ state: data }, issue.id);
}}
className="flex-shrink-0"
>
{({ open }) => (
<>
<div>
<Listbox.Button
className="inline-flex items-center whitespace-nowrap rounded-full px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100 border"
style={{
border: `2px solid ${issue.state_detail.color}`,
backgroundColor: `${issue.state_detail.color}20`,
}}
>
{addSpaceIfCamelCase(issue.state_detail.name)}
</span>
</Listbox.Button>
<span
className={classNames(
issue.state ? "" : "text-gray-900",
"hidden capitalize sm:block w-16"
)}
>
{addSpaceIfCamelCase(issue.state_detail.name)}
</span>
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
{states?.map((state) => (
<Listbox.Option
key={state.id}
className={({ active }) =>
classNames(
active ? "bg-indigo-50" : "bg-white",
"cursor-pointer select-none px-3 py-2"
)
}
value={state.id}
>
{addSpaceIfCamelCase(state.name)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
{states?.map((state) => (
<Listbox.Option
key={state.id}
className={({ active }) =>
classNames(
active ? "bg-indigo-50" : "bg-white",
"cursor-pointer select-none px-3 py-2"
)
}
value={state.id}
>
{addSpaceIfCamelCase(state.name)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
</td>
) : (key as keyof Properties) === "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" ? (
<p className="whitespace-nowrap">
<td className="px-3 py-4 text-sm font-medium text-gray-900 whitespace-nowrap">
{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] as any)?.name ??
"None"}
</p>
</td>
)}
</td>
</React.Fragment>
)
)}
<td className="px-3">

View File

@ -34,11 +34,13 @@ import {
ClipboardDocumentIcon,
LinkIcon,
ArrowPathIcon,
CalendarDaysIcon,
} from "@heroicons/react/24/outline";
// types
import type { Control } from "react-hook-form";
import type { IIssue, IIssueLabels, IssueResponse, IState, WorkspaceMember } from "types";
import { TwitterPicker } from "react-color";
import useToast from "lib/hooks/useToast";
type Props = {
control: Control<IIssue, any>;
@ -56,6 +58,8 @@ const defaultValues: Partial<IIssueLabels> = {
const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDetail }) => {
const { activeWorkspace, activeProject, cycles } = useUser();
const { setToastAlert } = useToast();
const { data: states } = useSWR<IState[]>(
activeWorkspace && activeProject ? STATE_LIST(activeProject.id) : null,
activeWorkspace && activeProject
@ -164,7 +168,7 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
label: "Due Date",
name: "target_date",
canSelectMultipleOptions: true,
icon: UserIcon,
icon: CalendarDaysIcon,
},
],
[
@ -202,6 +206,18 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
copyTextToClipboard(
`https://app.plane.so/projects/${activeProject?.id}/issues/${issueDetail?.id}`
)
.then(() => {
setToastAlert({
type: "success",
title: "Copied to clipboard",
});
})
.catch(() => {
setToastAlert({
type: "error",
title: "Some error occurred",
});
})
}
>
<LinkIcon className="h-3.5 w-3.5" />
@ -209,7 +225,21 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
<button
type="button"
className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
onClick={() => copyTextToClipboard(`${issueDetail?.id}`)}
onClick={() =>
copyTextToClipboard(`${issueDetail?.id}`)
.then(() => {
setToastAlert({
type: "success",
title: "Copied to clipboard",
});
})
.catch(() => {
setToastAlert({
type: "error",
title: "Some error occurred",
});
})
}
>
<ClipboardDocumentIcon className="h-3.5 w-3.5" />
</button>
@ -232,7 +262,7 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
render={({ field: { value, onChange } }) => (
<input
type="date"
value={value ?? new Date().toString()}
value={""}
onChange={(e: any) => {
submitChanges({ target_date: e.target.value });
onChange(e.target.value);

View File

@ -7,7 +7,7 @@ import {
Squares2X2Icon,
} from "@heroicons/react/24/outline";
import { addSpaceIfCamelCase, timeAgo } from "constants/common";
import { IState } from "types";
import { IIssue, IState } from "types";
import { Spinner } from "ui";
type Props = {
@ -15,7 +15,9 @@ type Props = {
states: IState[] | undefined;
};
const activityIcons = {
const activityIcons: {
[key: string]: JSX.Element;
} = {
state: <Squares2X2Icon className="h-4 w-4" />,
priority: <ChartBarIcon className="h-4 w-4" />,
name: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
@ -28,11 +30,11 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
<>
{issueActivities ? (
<div className="space-y-3">
{issueActivities.map((activity) => {
{issueActivities.map((activity, index) => {
if (activity.field !== "updated_by")
return (
<div key={activity.id} className="relative flex gap-x-2 w-full">
{issueActivities.length > 1 ? (
{issueActivities.length > 1 && index !== issueActivities.length - 1 ? (
<span
className="absolute top-5 left-2.5 h-full w-0.5 bg-gray-200"
aria-hidden="true"
@ -70,8 +72,8 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
<p>
<span className="font-medium">
{activity.actor_detail.first_name} {activity.actor_detail.last_name}
</span>{" "}
<span>{activity.verb}</span>{" "}
</span>
<span> {activity.verb} </span>
{activity.verb !== "created" ? (
<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 ?? ""
)
: "None"
: activity.old_value}
: activity.old_value ?? "None"}
</div>
<div>
<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 ?? ""
)
: "None"
: activity.new_value}
: activity.new_value ?? "None"}
</div>
</div>
)}

View File

@ -16,7 +16,7 @@ const ToastAlerts = () => {
if (!alerts) return null;
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) => (
<div className="relative text-white rounded-md overflow-hidden" key={alert.id}>
<div className="absolute top-1 right-1">

View File

@ -1,5 +1,9 @@
// react
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
// next
import { useRouter } from "next/router";
// hooks
import useUser from "lib/hooks/useUser";
// layouts
import Container from "layouts/Container";
import Sidebar from "layouts/Navbar/Sidebar";
@ -11,6 +15,14 @@ import type { Props } from "./types";
const AdminLayout: React.FC<Props> = ({ meta, children }) => {
const [isOpen, setIsOpen] = useState(false);
const router = useRouter();
const { user, isUserLoading } = useUser();
useEffect(() => {
if (!isUserLoading && (!user || user === null)) router.push("/signin");
}, [isUserLoading, user, router]);
return (
<Container meta={meta}>
<CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} />

View File

@ -22,8 +22,8 @@ class ProjectIssuesServices extends APIService {
super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
}
async createIssues(workspace_slug: string, projectId: string, data: any): Promise<any> {
return this.post(ISSUES_ENDPOINT(workspace_slug, projectId), data)
async createIssues(workspaceSlug: string, projectId: string, data: any): Promise<any> {
return this.post(ISSUES_ENDPOINT(workspaceSlug, projectId), data)
.then((response) => {
return response?.data;
})
@ -32,8 +32,8 @@ class ProjectIssuesServices extends APIService {
});
}
async getIssues(workspace_slug: string, projectId: string): Promise<any> {
return this.get(ISSUES_ENDPOINT(workspace_slug, projectId))
async getIssues(workspaceSlug: string, projectId: string): Promise<any> {
return this.get(ISSUES_ENDPOINT(workspaceSlug, projectId))
.then((response) => {
return response?.data;
})
@ -42,8 +42,8 @@ class ProjectIssuesServices extends APIService {
});
}
async getIssue(workspace_slug: string, projectId: string, issueId: string): Promise<any> {
return this.get(ISSUE_DETAIL(workspace_slug, projectId, issueId))
async getIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
return this.get(ISSUE_DETAIL(workspaceSlug, projectId, issueId))
.then((response) => {
return response?.data;
})
@ -53,11 +53,11 @@ class ProjectIssuesServices extends APIService {
}
async getIssueActivities(
workspace_slug: string,
workspaceSlug: string,
projectId: string,
issueId: string
): Promise<any> {
return this.get(ISSUE_ACTIVITIES(workspace_slug, projectId, issueId))
return this.get(ISSUE_ACTIVITIES(workspaceSlug, projectId, issueId))
.then((response) => {
return response?.data;
})
@ -66,8 +66,8 @@ class ProjectIssuesServices extends APIService {
});
}
async getIssueComments(workspace_slug: string, projectId: string, issueId: string): Promise<any> {
return this.get(ISSUE_COMMENTS(workspace_slug, projectId, issueId))
async getIssueComments(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
return this.get(ISSUE_COMMENTS(workspaceSlug, projectId, issueId))
.then((response) => {
return response?.data;
})
@ -76,8 +76,8 @@ class ProjectIssuesServices extends APIService {
});
}
async getIssueProperties(workspace_slug: string, projectId: string): Promise<any> {
return this.get(ISSUE_PROPERTIES_ENDPOINT(workspace_slug, projectId))
async getIssueProperties(workspaceSlug: string, projectId: string): Promise<any> {
return this.get(ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId))
.then((response) => {
return response?.data;
})
@ -87,14 +87,14 @@ class ProjectIssuesServices extends APIService {
}
async addIssueToSprint(
workspace_slug: string,
workspaceSlug: string,
projectId: string,
cycleId: string,
data: {
issue: string;
}
) {
return this.post(CYCLE_DETAIL(workspace_slug, projectId, cycleId), data)
return this.post(CYCLE_DETAIL(workspaceSlug, projectId, cycleId), data)
.then((response) => {
return response?.data;
})
@ -103,8 +103,8 @@ class ProjectIssuesServices extends APIService {
});
}
async createIssueProperties(workspace_slug: string, projectId: string, data: any): Promise<any> {
return this.post(ISSUE_PROPERTIES_ENDPOINT(workspace_slug, projectId), data)
async createIssueProperties(workspaceSlug: string, projectId: string, data: any): Promise<any> {
return this.post(ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId), data)
.then((response) => {
return response?.data;
})
@ -114,13 +114,13 @@ class ProjectIssuesServices extends APIService {
}
async patchIssueProperties(
workspace_slug: string,
workspaceSlug: string,
projectId: string,
issuePropertyId: string,
data: any
): Promise<any> {
return this.patch(
ISSUE_PROPERTIES_ENDPOINT(workspace_slug, projectId) + `${issuePropertyId}/`,
ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId) + `${issuePropertyId}/`,
data
)
@ -133,12 +133,12 @@ class ProjectIssuesServices extends APIService {
}
async createIssueComment(
workspace_slug: string,
workspaceSlug: string,
projectId: string,
issueId: string,
data: any
): Promise<any> {
return this.post(ISSUE_COMMENTS(workspace_slug, projectId, issueId), data)
return this.post(ISSUE_COMMENTS(workspaceSlug, projectId, issueId), data)
.then((response) => {
return response?.data;
})
@ -148,13 +148,13 @@ class ProjectIssuesServices extends APIService {
}
async patchIssueComment(
workspace_slug: string,
workspaceSlug: string,
projectId: string,
issueId: string,
commentId: string,
data: IIssueComment
): Promise<any> {
return this.patch(ISSUE_COMMENT_DETAIL(workspace_slug, projectId, issueId, commentId), data)
return this.patch(ISSUE_COMMENT_DETAIL(workspaceSlug, projectId, issueId, commentId), data)
.then((response) => {
return response?.data;
})
@ -164,12 +164,12 @@ class ProjectIssuesServices extends APIService {
}
async deleteIssueComment(
workspace_slug: string,
workspaceSlug: string,
projectId: string,
issueId: string,
commentId: string
): Promise<any> {
return this.delete(ISSUE_COMMENT_DETAIL(workspace_slug, projectId, issueId, commentId))
return this.delete(ISSUE_COMMENT_DETAIL(workspaceSlug, projectId, issueId, commentId))
.then((response) => {
return response?.data;
})
@ -178,8 +178,8 @@ class ProjectIssuesServices extends APIService {
});
}
async getIssueLabels(workspace_slug: string, projectId: string): Promise<any> {
return this.get(ISSUE_LABELS(workspace_slug, projectId))
async getIssueLabels(workspaceSlug: string, projectId: string): Promise<any> {
return this.get(ISSUE_LABELS(workspaceSlug, projectId))
.then((response) => {
return response?.data;
})
@ -188,8 +188,8 @@ class ProjectIssuesServices extends APIService {
});
}
async createIssueLabel(workspace_slug: string, projectId: string, data: any): Promise<any> {
return this.post(ISSUE_LABELS(workspace_slug, projectId), data)
async createIssueLabel(workspaceSlug: string, projectId: string, data: any): Promise<any> {
return this.post(ISSUE_LABELS(workspaceSlug, projectId), data)
.then((response) => {
return response?.data;
})
@ -199,12 +199,12 @@ class ProjectIssuesServices extends APIService {
}
async updateIssue(
workspace_slug: string,
workspaceSlug: string,
projectId: string,
issueId: string,
data: any
): Promise<any> {
return this.put(ISSUE_DETAIL(workspace_slug, projectId, issueId), data)
return this.put(ISSUE_DETAIL(workspaceSlug, projectId, issueId), data)
.then((response) => {
return response?.data;
})
@ -214,12 +214,12 @@ class ProjectIssuesServices extends APIService {
}
async patchIssue(
workspace_slug: string,
workspaceSlug: string,
projectId: string,
issueId: string,
data: Partial<IIssue>
): Promise<any> {
return this.patch(ISSUE_DETAIL(workspace_slug, projectId, issueId), data)
return this.patch(ISSUE_DETAIL(workspaceSlug, projectId, issueId), data)
.then((response) => {
return response?.data;
})
@ -228,8 +228,8 @@ class ProjectIssuesServices extends APIService {
});
}
async deleteIssue(workspace_slug: string, projectId: string, issuesId: string): Promise<any> {
return this.delete(ISSUE_DETAIL(workspace_slug, projectId, issuesId))
async deleteIssue(workspaceSlug: string, projectId: string, issuesId: string): Promise<any> {
return this.delete(ISSUE_DETAIL(workspaceSlug, projectId, issuesId))
.then((response) => {
return response?.data;
})
@ -238,8 +238,8 @@ class ProjectIssuesServices extends APIService {
});
}
async bulkDeleteIssues(workspace_slug: string, projectId: string, data: any): Promise<any> {
return this.delete(BULK_DELETE_ISSUES(workspace_slug, projectId), data)
async bulkDeleteIssues(workspaceSlug: string, projectId: string, data: any): Promise<any> {
return this.delete(BULK_DELETE_ISSUES(workspaceSlug, projectId), data)
.then((response) => {
return response?.data;
})
@ -249,12 +249,12 @@ class ProjectIssuesServices extends APIService {
}
async bulkAddIssuesToCycle(
workspace_slug: string,
workspaceSlug: string,
projectId: string,
cycleId: string,
data: any
): Promise<any> {
return this.post(BULK_ADD_ISSUES_TO_CYCLE(workspace_slug, projectId, cycleId), data)
return this.post(BULK_ADD_ISSUES_TO_CYCLE(workspaceSlug, projectId, cycleId), data)
.then((response) => {
return response?.data;
})

View File

@ -18,6 +18,7 @@
"js-cookie": "^3.0.1",
"lexical": "^0.6.4",
"next": "12.2.2",
"pnpm": "^7.17.1",
"prosemirror-example-setup": "^1.2.1",
"prosemirror-model": "^1.18.1",
"prosemirror-schema-basic": "^1.2.0",

View File

@ -1,19 +1,26 @@
// next
import type { NextPage } from "next";
import { useRouter } from "next/router";
import dynamic from "next/dynamic";
// react
import React, { useCallback, useEffect, useState } from "react";
// swr
import useSWR from "swr";
import useSWR, { mutate } from "swr";
// react hook form
import { useForm } from "react-hook-form";
import { useForm, Controller } from "react-hook-form";
// headless ui
import { Tab } from "@headlessui/react";
import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
// services
import issuesServices from "lib/services/issues.services";
import stateServices from "lib/services/state.services";
// fetch keys
import { PROJECT_ISSUES_ACTIVITY, PROJECT_ISSUES_COMMENTS, STATE_LIST } from "constants/fetch-keys";
import {
PROJECT_ISSUES_ACTIVITY,
PROJECT_ISSUES_COMMENTS,
PROJECT_ISSUES_DETAILS,
PROJECT_ISSUES_LIST,
STATE_LIST,
} from "constants/fetch-keys";
// hooks
import useUser from "lib/hooks/useUser";
// layouts
@ -34,7 +41,14 @@ import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
// types
import { IIssue, IIssueComment, IssueResponse, IState } from "types";
// icons
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
import {
ChevronLeftIcon,
ChevronRightIcon,
EllipsisHorizontalIcon,
PlusIcon,
} from "@heroicons/react/24/outline";
import Link from "next/link";
import AddAsSubIssue from "components/command-palette/addAsSubIssue";
const IssueDetail: NextPage = () => {
const router = useRouter();
@ -44,9 +58,24 @@ const IssueDetail: NextPage = () => {
const { activeWorkspace, activeProject, issues, mutateIssues } = useUser();
const [isOpen, setIsOpen] = useState(false);
const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false);
const [issueDetail, setIssueDetail] = useState<IIssue | undefined>(undefined);
const [preloadedData, setPreloadedData] = useState<
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
>(undefined);
const [issueDescriptionValue, setIssueDescriptionValue] = useState("");
const handleDescriptionChange: any = (value: any) => {
console.log(value);
setIssueDescriptionValue(value);
};
const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
ssr: false,
});
const {
register,
formState: { errors },
@ -151,56 +180,100 @@ const IssueDetail: NextPage = () => {
const prevIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) - 1];
const nextIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) + 1];
const subIssues = (issues && issues.results.filter((i) => i.parent === issueDetail?.id)) ?? [];
const handleRemove = (issueId: string) => {
if (activeWorkspace && activeProject) {
issuesServices
.patchIssue(activeWorkspace.slug, activeProject.id, issueId, { parent: null })
.then((res) => {
mutate<IssueResponse>(
PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id),
(prevData) => ({
...(prevData as IssueResponse),
results: (prevData?.results ?? []).map((p) =>
p.id === issueId ? { ...p, ...res } : p
),
}),
false
);
})
.catch((e) => {
console.log(e);
});
}
};
return (
<AdminLayout>
<CreateUpdateIssuesModal
isOpen={isOpen}
setIsOpen={setIsOpen}
projectId={projectId as string}
data={isOpen ? issueDetail : undefined}
isUpdatingSingleIssue
prePopulateData={{
...preloadedData,
}}
/>
<AddAsSubIssue
isOpen={isAddAsSubIssueOpen}
setIsOpen={setIsAddAsSubIssueOpen}
parentId={issueDetail?.id ?? ""}
/>
<div className="space-y-5">
<div className="flex items-center justify-between w-full">
<Breadcrumbs>
<BreadcrumbItem
title={`${activeProject?.name ?? "Project"} Issues`}
link={`/projects/${activeProject?.id}/issues`}
/>
<BreadcrumbItem
title={`Issue ${activeProject?.identifier ?? "Project"}-${
issueDetail?.sequence_id ?? "..."
} Details`}
/>
</Breadcrumbs>
<div className="flex items-center gap-x-3">
<HeaderButton
Icon={ChevronLeftIcon}
label="Previous"
className={`${!prevIssue ? "cursor-not-allowed opacity-70" : ""}`}
onClick={() => {
if (!prevIssue) return;
router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`);
}}
/>
<HeaderButton
Icon={ChevronRightIcon}
disabled={!nextIssue}
label="Next"
className={`${!nextIssue ? "cursor-not-allowed opacity-70" : ""}`}
onClick={() => {
if (!nextIssue) return;
router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`);
}}
position="reverse"
/>
</div>
<div className="flex items-center justify-between w-full mb-5">
<Breadcrumbs>
<BreadcrumbItem
title={`${activeProject?.name ?? "Project"} Issues`}
link={`/projects/${activeProject?.id}/issues`}
/>
<BreadcrumbItem
title={`Issue ${activeProject?.identifier ?? "Project"}-${
issueDetail?.sequence_id ?? "..."
} Details`}
/>
</Breadcrumbs>
<div className="flex items-center gap-x-3">
<HeaderButton
Icon={ChevronLeftIcon}
label="Previous"
className={`${!prevIssue ? "cursor-not-allowed opacity-70" : ""}`}
onClick={() => {
if (!prevIssue) return;
router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`);
}}
/>
<HeaderButton
Icon={ChevronRightIcon}
disabled={!nextIssue}
label="Next"
className={`${!nextIssue ? "cursor-not-allowed opacity-70" : ""}`}
onClick={() => {
if (!nextIssue) return;
router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`);
}}
position="reverse"
/>
</div>
{issueDetail && activeProject ? (
<div className="grid grid-cols-4 gap-5">
<div className="col-span-3 space-y-5">
<div className="bg-secondary rounded-lg p-4">
</div>
{issueDetail && activeProject ? (
<div className="grid grid-cols-4 gap-5">
<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
id="name"
placeholder="Enter issue name"
@ -229,62 +302,238 @@ const IssueDetail: NextPage = () => {
register={register}
/>
</div>
<div className="bg-secondary rounded-lg p-4">
<div className="relative">
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="w-full border-t border-gray-300" />
</div>
<div className="relative flex justify-center">
<span className="bg-white px-2 text-sm text-gray-500">Activity/Comments</span>
</div>
</div>
<div className="w-full space-y-5 mt-3">
<Tab.Group>
<Tab.List className="flex gap-x-3">
{["Comments", "Activity"].map((item) => (
<Tab
key={item}
className={({ selected }) =>
`px-3 py-1 text-sm rounded-md border-2 border-gray-700 ${
selected ? "bg-gray-700 text-white" : ""
}`
}
<div className="mt-2">
{subIssues && subIssues.length > 0 ? (
<Disclosure>
{({ open }) => (
<>
<div className="flex justify-between items-center">
<Disclosure.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
<ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
Sub-issues{" "}
<span className="text-gray-600 ml-1">{subIssues.length}</span>
</Disclosure.Button>
{open ? (
<div className="flex items-center">
<button
type="button"
className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium"
onClick={() => {
setIsOpen(true);
setPreloadedData({
parent: issueDetail.id,
actionType: "createIssue",
});
}}
>
<PlusIcon className="h-3 w-3" />
Add new
</button>
<Menu as="div" className="relative inline-block">
<Menu.Button className="grid relative place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none">
<EllipsisHorizontalIcon className="h-4 w-4" />
</Menu.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
<div className="p-1">
<Menu.Item as="div">
{(active) => (
<button
className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
onClick={() => setIsAddAsSubIssueOpen(true)}
>
Add an existing issue
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
</div>
) : null}
</div>
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
{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>
<Disclosure.Panel className="flex flex-col gap-y-1 mt-3">
{subIssues.map((subIssue) => (
<Link
key={subIssue.id}
href={`/projects/${activeProject.id}/issues/${subIssue.id}`}
>
<a className="p-2 flex justify-between items-center rounded text-xs hover:bg-gray-100">
<div className="flex items-center gap-2">
<span
className={`h-1.5 w-1.5 block rounded-full`}
style={{
backgroundColor: subIssue.state_detail.color,
}}
/>
<span className="text-gray-600">
{activeProject.identifier}-{subIssue.sequence_id}
</span>
<span className="font-medium">{subIssue.name}</span>
</div>
<div>
<Menu as="div" className="relative inline-block">
<Menu.Button className="grid relative place-items-center focus:outline-none">
<EllipsisHorizontalIcon className="h-4 w-4" />
</Menu.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
<div className="p-1">
<Menu.Item as="div">
{(active) => (
<button
className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
onClick={() => handleRemove(subIssue.id)}
>
Remove as sub-issue
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
</div>
</a>
</Link>
))}
</Disclosure.Panel>
</Transition>
</>
)}
</Disclosure>
) : (
<Menu as="div" className="relative inline-block">
<Menu.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
<PlusIcon className="h-3 w-3" />
Add sub-issue
</Menu.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-right absolute left-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
<div className="p-1">
<Menu.Item as="div">
{(active) => (
<button
type="button"
className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
onClick={() => {
setIsOpen(true);
setPreloadedData({
parent: issueDetail.id,
actionType: "createIssue",
});
}}
>
Add new
</button>
)}
</Menu.Item>
<Menu.Item as="div">
{(active) => (
<button
type="button"
className="p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
onClick={() => {
setIsAddAsSubIssueOpen(true);
setPreloadedData({
parent: issueDetail.id,
actionType: "createIssue",
});
}}
>
Add an existing issue
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
)}
</div>
</div>
<div className="sticky top-0 h-min bg-secondary p-4 rounded-lg">
<IssueDetailSidebar
control={control}
issueDetail={issueDetail}
submitChanges={submitChanges}
/>
<div className="bg-secondary rounded-lg p-4 space-y-5">
<Tab.Group>
<Tab.List className="flex gap-x-3">
{["Comments", "Activity"].map((item) => (
<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 className="h-full w-full grid place-items-center px-4 sm:px-0">
<Spinner />
<div className="sticky top-0 h-min bg-secondary p-4 rounded-lg">
<IssueDetailSidebar
control={control}
issueDetail={issueDetail}
submitChanges={submitChanges}
/>
</div>
)}
</div>
</div>
) : (
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<Spinner />
</div>
)}
</AdminLayout>
);
};

View File

@ -51,7 +51,7 @@ const ProjectIssues: NextPage = () => {
const [editIssue, setEditIssue] = useState<string | undefined>();
const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
const { activeWorkspace, activeProject } = useUser();
const { activeWorkspace, activeProject, issues } = useUser();
const router = useRouter();
@ -300,7 +300,7 @@ const ProjectIssues: NextPage = () => {
handleDeleteIssue={setDeleteIssue}
/>
) : (
<div className="h-full pb-7 mb-7">
<div className="h-full">
<BoardView
properties={properties}
selectedGroup={groupByProperty}

View File

@ -22,6 +22,7 @@ import { Spinner, Button } from "ui";
import { PlusIcon, EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
import HeaderButton from "ui/HeaderButton";
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
import Image from "next/image";
const ROLE = {
5: "Guest",
@ -54,6 +55,8 @@ const ProjectMembers: NextPage = () => {
let members = [
...(projectMembers?.map((item: any) => ({
id: item.id,
avatar: item.member?.avatar,
first_name: item.member?.first_name,
email: item.member?.email,
role: item.role,
status: true,
@ -61,6 +64,8 @@ const ProjectMembers: NextPage = () => {
})) || []),
...(projectInvitations?.map((item: any) => ({
id: item.id,
avatar: item.avatar ?? "",
first_name: item.first_name ?? item.email,
email: item.email,
role: item.role,
status: item.accepted,
@ -115,7 +120,20 @@ const ProjectMembers: NextPage = () => {
<tbody className="divide-y divide-gray-200 bg-white">
{members?.map((member: any) => (
<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."}
</td>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">

View File

@ -1,15 +1,15 @@
import React, { useEffect, useCallback, useState } from "react";
// swr
import { mutate } from "swr";
// next
import type { NextPage } from "next";
import { useRouter } from "next/router";
// swr
import { mutate } from "swr";
// swr
import useSWR from "swr";
// react hook form
import { useForm, Controller } from "react-hook-form";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
import { Listbox, Tab, Transition } from "@headlessui/react";
// layouts
import AdminLayout from "layouts/AdminLayout";
// service
@ -37,7 +37,7 @@ import {
PencilIcon,
} from "@heroicons/react/24/outline";
// types
import type { IProject, IState, IWorkspace, WorkspaceMember } from "types";
import type { IProject, IWorkspace, WorkspaceMember } from "types";
const defaultValues: Partial<IProject> = {
name: "",
@ -142,7 +142,7 @@ const ProjectSettings: NextPage = () => {
return (
<AdminLayout>
<div className="space-y-5">
<div className="space-y-5 mb-5">
<CreateUpdateStateModal
isOpen={isCreateStateModalOpen || Boolean(selectedState)}
handleClose={() => {
@ -154,13 +154,29 @@ const ProjectSettings: NextPage = () => {
/>
<Breadcrumbs>
<BreadcrumbItem title="Projects" link="/projects" />
<BreadcrumbItem title={`${activeProject?.name} Settings`} />
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Settings`} />
</Breadcrumbs>
</div>
{projectDetails ? (
<div className="space-y-3">
{projectDetails ? (
<div>
<form onSubmit={handleSubmit(onSubmit)} className="mt-3">
<div className="space-y-8">
<form onSubmit={handleSubmit(onSubmit)} className="mt-3">
<Tab.Group>
<Tab.List className="flex items-center gap-x-4 gap-y-2 flex-wrap">
{["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">
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900">General</h3>
@ -237,6 +253,8 @@ const ProjectSettings: NextPage = () => {
/>
</div>
</section>
</Tab.Panel>
<Tab.Panel>
<section className="space-y-5">
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900">Control</h3>
@ -406,6 +424,8 @@ const ProjectSettings: NextPage = () => {
</Button>
</div>
</section>
</Tab.Panel>
<Tab.Panel>
<section className="space-y-5">
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900">State</h3>
@ -447,6 +467,8 @@ const ProjectSettings: NextPage = () => {
</div>
</div>
</section>
</Tab.Panel>
<Tab.Panel>
<section className="space-y-5">
<div className="flex items-center justify-between">
<div>
@ -500,16 +522,16 @@ const ProjectSettings: NextPage = () => {
))}
</div>
</section>
</div>
</form>
</div>
) : (
<div className="w-full h-full flex justify-center items-center">
<Spinner />
</div>
)}
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</form>
</div>
</div>
) : (
<div className="h-full w-full flex justify-center items-center">
<Spinner />
</div>
)}
</AdminLayout>
);
};

View File

@ -1,6 +1,7 @@
import React, { useState } from "react";
// next
import type { NextPage } from "next";
import Image from "next/image";
// swr
import useSWR from "swr";
// headless ui
@ -49,6 +50,8 @@ const WorkspaceInvite: NextPage = () => {
const members = [
...(workspaceMembers?.map((item) => ({
id: item.id,
avatar: item.member?.avatar,
first_name: item.member?.first_name,
email: item.member?.email,
role: item.role,
status: true,
@ -56,6 +59,8 @@ const WorkspaceInvite: NextPage = () => {
})) || []),
...(workspaceInvitations?.map((item) => ({
id: item.id,
avatar: item.avatar ?? "",
first_name: item.first_name ?? item.email,
email: item.email,
role: item.role,
status: item.accepted,
@ -119,7 +124,20 @@ const WorkspaceInvite: NextPage = () => {
<tbody className="divide-y divide-gray-200 bg-white">
{members?.map((member: any) => (
<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."}
</td>
<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

View File

@ -36,13 +36,13 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
"inline-flex items-center rounded justify-center font-medium",
theme === "primary"
? `${
disabled ? "opacity-70" : "bg-theme hover:bg-indigo-700"
} text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 border border-transparent`
disabled ? "opacity-70" : ""
} 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"
? "border border-gray-300 bg-white"
: `${
disabled ? "opacity-70" : "bg-red-600 hover:bg-red-700"
} text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 border border-transparent`,
disabled ? "opacity-70" : ""
} 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"
? "p-2 text-xs"
: size === "md"

View File

@ -39,14 +39,52 @@ const SearchListbox: React.FC<Props> = ({
}
return (
<Combobox as="div" {...props} className="flex-shrink-0">
<Combobox as="div" {...props} className="relative flex-shrink-0">
{({ open }: any) => (
<>
<Combobox.Label className="sr-only"> {title} </Combobox.Label>
<div className="relative">
<Combobox.Button
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"
<Combobox.Label className="sr-only">{title}</Combobox.Label>
<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 ${
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"
: width === "md"
? "w-48"
@ -57,91 +95,51 @@ const SearchListbox: React.FC<Props> = ({
: width === "2xl"
? "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}
<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 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>
)
<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">Loading...</p>
)}
</div>
</Combobox.Options>
</Transition>
</div>
<p className="text-sm text-gray-500">No {title.toLowerCase()} found</p>
)
) : (
<p className="text-sm text-gray-500">Loading...</p>
)}
</div>
</Combobox.Options>
</Transition>
</>
)}
</Combobox>

View File

@ -1999,6 +1999,11 @@ pify@^2.3.0:
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
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:
version "14.1.0"
resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"