thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

feat: bulk add issues to cycle, style: favicon, avatar in members page

Browse Source
This commit is contained in:
Aaryan Khandelwal 2022-12-01 19:59:21 +05:30
parent 3d25194b02
commit 2acada35e2
20 changed files with 577 additions and 454 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
apps/app/components/command-palette/index.tsx
View File

@ -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>

45
apps/app/components/command-palette/shortcuts.tsx
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" 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>
))} ))}

26
apps/app/components/lexical/toolbar/block-type-select.tsx
View File

@ -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"

50
apps/app/components/lexical/toolbar/index.tsx
View File

@ -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");

2
apps/app/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx
View File

@ -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> />
); );
}; };

264
apps/app/components/project/issues/ListView/index.tsx
View File

@ -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
apps/app/components/project/issues/issue-detail/IssueDetailSidebar.tsx
View File

@ -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>

18
apps/app/components/project/issues/issue-detail/activity/index.tsx
View File

@ -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>
)} )}

2
apps/app/components/toast-alert/index.tsx
View File

@ -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
apps/app/package.json
View File

@ -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",

230
apps/app/pages/projects/[projectId]/issues/[issueId].tsx
View File

@ -161,130 +161,118 @@ const IssueDetail: NextPage = () => {
isUpdatingSingleIssue isUpdatingSingleIssue
/> />
<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>
{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">
<TextArea
id="name"
placeholder="Enter issue name"
name="name"
autoComplete="off"
validations={{ required: true }}
register={register}
onChange={debounce(() => {
handleSubmit(submitChanges)();
}, 5000)}
mode="transparent"
className="text-xl font-medium"
/>
<TextArea
id="description"
name="description"
error={errors.description}
validations={{
required: true,
}}
onChange={debounce(() => {
handleSubmit(submitChanges)();
}, 5000)}
placeholder="Enter issue description"
mode="transparent"
register={register}
/>
</div>
<div className="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="sticky top-0 h-min bg-secondary p-4 rounded-lg">
<IssueDetailSidebar
control={control}
issueDetail={issueDetail}
submitChanges={submitChanges}
/> />
</div> </div>
</div> </div>
{issueDetail && activeProject ? ( ) : (
<div className="grid grid-cols-4 gap-5"> <div className="h-full w-full grid place-items-center px-4 sm:px-0">
<div className="col-span-3 space-y-5"> <Spinner />
<div className="bg-secondary rounded-lg p-4"> </div>
<TextArea )}
id="name"
placeholder="Enter issue name"
name="name"
autoComplete="off"
validations={{ required: true }}
register={register}
onChange={debounce(() => {
handleSubmit(submitChanges)();
}, 5000)}
mode="transparent"
className="text-xl font-medium"
/>
<TextArea
id="description"
name="description"
error={errors.description}
validations={{
required: true,
}}
onChange={debounce(() => {
handleSubmit(submitChanges)();
}, 5000)}
placeholder="Enter issue description"
mode="transparent"
register={register}
/>
</div>
<div className="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" : ""
}`
}
>
{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 className="sticky top-0 h-min bg-secondary p-4 rounded-lg">
<IssueDetailSidebar
control={control}
issueDetail={issueDetail}
submitChanges={submitChanges}
/>
</div>
</div>
) : (
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<Spinner />
</div>
)}
</div>
</AdminLayout> </AdminLayout>
); );
}; };

2
apps/app/pages/projects/[projectId]/issues/index.tsx
View File

@ -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}

20
apps/app/pages/projects/[projectId]/members.tsx
View File

@ -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">

60
apps/app/pages/projects/[projectId]/settings.tsx
View File

@ -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>
); );
}; };

20
apps/app/pages/workspace/members.tsx
View File

@ -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">

BIN
apps/app/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
apps/app/public/favicon/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 919 B

8
apps/app/ui/Button/index.tsx
View File

@ -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"

176
apps/app/ui/SearchListbox/index.tsx
View File

@ -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>

5
yarn.lock
View File

@ -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"