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

Merge pull request #229 from makeplane/develop

Browse Source 
Stage Release
This commit is contained in:
sriram veeraghanta 2023-02-01 20:34:06 +05:30 committed by GitHub
commit 6966666bf5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
44 changed files with 927 additions and 772 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -102,50 +102,54 @@ const CommandPalette: React.FC = () => {
!(e.target instanceof HTMLInputElement) && !(e.target instanceof HTMLInputElement) &&
!(e.target as Element).classList?.contains("remirror-editor") !(e.target as Element).classList?.contains("remirror-editor")
) { ) {
if ((e.ctrlKey || e.metaKey) && e.key === "k") { if ((e.ctrlKey || e.metaKey) && (e.key === "k" || e.key === "K")) {
e.preventDefault(); e.preventDefault();
setIsPaletteOpen(true); setIsPaletteOpen(true);
} else if (e.ctrlKey && e.key === "c") { } else if (e.ctrlKey && (e.key === "c" || e.key === "C")) {
console.log("Text copied"); if (e.altKey) {
} else if (e.key === "c") { e.preventDefault();
if (!router.query.issueId) return;
const url = new URL(window.location.href);
console.log(url);
copyTextToClipboard(url.href)
.then(() => {
setToastAlert({
type: "success",
title: "Copied to clipboard",
});
})
.catch(() => {
setToastAlert({
type: "error",
title: "Some error occurred",
});
});
console.log("URL Copied");
} else {
console.log("Text copied");
}
} else if (e.key === "c" || e.key === "C") {
e.preventDefault(); e.preventDefault();
setIsIssueModalOpen(true); setIsIssueModalOpen(true);
} else if (e.key === "p") { } else if (e.key === "p" || e.key === "P") {
e.preventDefault(); e.preventDefault();
setIsProjectModalOpen(true); setIsProjectModalOpen(true);
} else if ((e.ctrlKey || e.metaKey) && e.key === "b") { } else if ((e.ctrlKey || e.metaKey) && (e.key === "b" || e.key === "B")) {
e.preventDefault(); e.preventDefault();
toggleCollapsed(); toggleCollapsed();
} else if (e.key === "h") { } else if (e.key === "h" || e.key === "H") {
e.preventDefault(); e.preventDefault();
setIsShortcutsModalOpen(true); setIsShortcutsModalOpen(true);
} else if (e.key === "q") { } else if (e.key === "q" || e.key === "Q") {
e.preventDefault(); e.preventDefault();
setIsCreateCycleModalOpen(true); setIsCreateCycleModalOpen(true);
} else if (e.key === "m") { } else if (e.key === "m" || e.key === "M") {
e.preventDefault(); e.preventDefault();
setIsCreateModuleModalOpen(true); setIsCreateModuleModalOpen(true);
} else if (e.key === "Delete") { } else if (e.key === "Delete") {
e.preventDefault(); e.preventDefault();
setIsBulkDeleteIssuesModalOpen(true); setIsBulkDeleteIssuesModalOpen(true);
} else if ((e.ctrlKey || e.metaKey) && e.altKey && e.key === "c") {
e.preventDefault();
if (!router.query.issueId) return;
const url = new URL(window.location.href);
copyTextToClipboard(url.href)
.then(() => {
setToastAlert({
type: "success",
title: "Copied to clipboard",
});
})
.catch(() => {
setToastAlert({
type: "error",
title: "Some error occurred",
});
});
} }
} }
}, },

14
apps/app/components/command-palette/shortcuts.tsx
View File

@ -15,7 +15,7 @@ const shortcuts = [
{ {
title: "Navigation", title: "Navigation",
shortcuts: [ shortcuts: [
{ keys: "ctrl,cmd,k", description: "To open navigator" }, { keys: "Ctrl,Cmd,K", description: "To open navigator" },
{ keys: "↑", description: "Move up" }, { keys: "↑", description: "Move up" },
{ keys: "↓", description: "Move down" }, { keys: "↓", description: "Move down" },
{ keys: "←", description: "Move left" }, { keys: "←", description: "Move left" },
@ -27,14 +27,14 @@ const shortcuts = [
{ {
title: "Common", title: "Common",
shortcuts: [ shortcuts: [
{ keys: "p", description: "To create project" }, { keys: "P", description: "To create project" },
{ keys: "c", description: "To create issue" }, { keys: "C", description: "To create issue" },
{ keys: "q", description: "To create cycle" }, { keys: "Q", description: "To create cycle" },
{ keys: "m", description: "To create module" }, { keys: "M", description: "To create module" },
{ keys: "Delete", description: "To bulk delete issues" }, { keys: "Delete", description: "To bulk delete issues" },
{ keys: "h", description: "To open shortcuts guide" }, { keys: "H", description: "To open shortcuts guide" },
{ {
keys: "ctrl,cmd,alt,c", keys: "Ctrl,Cmd,Alt,C",
description: "To copy issue url when on issue detail page.", description: "To copy issue url when on issue detail page.",
}, },
], ],

75
apps/app/components/common/board-view/single-issue.tsx
View File

@ -25,7 +25,16 @@ import { AssigneesList, CustomDatePicker } from "components/ui";
import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper"; import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
import { addSpaceIfCamelCase } from "helpers/string.helper"; import { addSpaceIfCamelCase } from "helpers/string.helper";
// types // types
import { IIssue, IUserLite, IWorkspaceMember, Properties, UserAuth } from "types"; import {
CycleIssueResponse,
IIssue,
IssueResponse,
IUserLite,
IWorkspaceMember,
ModuleIssueResponse,
Properties,
UserAuth,
} from "types";
// common // common
import { PRIORITIES } from "constants/"; import { PRIORITIES } from "constants/";
import { import {
@ -80,6 +89,60 @@ const SingleBoardIssue: React.FC<Props> = ({
const partialUpdateIssue = (formData: Partial<IIssue>) => { const partialUpdateIssue = (formData: Partial<IIssue>) => {
if (!workspaceSlug || !projectId) return; if (!workspaceSlug || !projectId) return;
if (typeId) {
mutate<CycleIssueResponse[]>(
CYCLE_ISSUES(typeId ?? ""),
(prevData) => {
const updatedIssues = (prevData ?? []).map((p) => {
if (p.issue_detail.id === issue.id) {
return {
...p,
issue_detail: {
...p.issue_detail,
...formData,
},
};
}
return p;
});
return [...updatedIssues];
},
false
);
mutate<ModuleIssueResponse[]>(
MODULE_ISSUES(typeId ?? ""),
(prevData) => {
const updatedIssues = (prevData ?? []).map((p) => {
if (p.issue_detail.id === issue.id) {
return {
...p,
issue_detail: {
...p.issue_detail,
...formData,
},
};
}
return p;
});
return [...updatedIssues];
},
false
);
}
mutate<IssueResponse>(
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
(prevData) => ({
...(prevData as IssueResponse),
results: (prevData?.results ?? []).map((p) => {
if (p.id === issue.id) return { ...p, ...formData };
return p;
}),
}),
false
);
issuesService issuesService
.patchIssue(workspaceSlug as string, projectId as string, issue.id, formData) .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
.then((res) => { .then((res) => {
@ -270,13 +333,11 @@ const SingleBoardIssue: React.FC<Props> = ({
<CustomDatePicker <CustomDatePicker
placeholder="N/A" placeholder="N/A"
value={issue?.target_date} value={issue?.target_date}
onChange={(val: Date) => { onChange={(val) =>
partialUpdateIssue({ partialUpdateIssue({
target_date: val target_date: val,
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` })
: null, }
});
}}
className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"} className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
/> />
{/* <DatePicker {/* <DatePicker

105
apps/app/components/common/list-view/single-issue.tsx
View File

@ -5,9 +5,6 @@ import { useRouter } from "next/router";
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
// react-datepicker
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
// services // services
import issuesService from "services/issues.service"; import issuesService from "services/issues.service";
import workspaceService from "services/workspace.service"; import workspaceService from "services/workspace.service";
@ -18,13 +15,19 @@ import { Listbox, Transition } from "@headlessui/react";
import { CustomMenu, CustomSelect, AssigneesList, Avatar, CustomDatePicker } from "components/ui"; import { CustomMenu, CustomSelect, AssigneesList, Avatar, CustomDatePicker } from "components/ui";
// components // components
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion"; import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
// icons
import { CalendarDaysIcon } from "@heroicons/react/24/outline";
// helpers // helpers
import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper"; import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
import { addSpaceIfCamelCase } from "helpers/string.helper"; import { addSpaceIfCamelCase } from "helpers/string.helper";
// types // types
import { IIssue, IWorkspaceMember, Properties, UserAuth } from "types"; import {
CycleIssueResponse,
IIssue,
IssueResponse,
IWorkspaceMember,
ModuleIssueResponse,
Properties,
UserAuth,
} from "types";
// fetch-keys // fetch-keys
import { import {
CYCLE_ISSUES, CYCLE_ISSUES,
@ -76,6 +79,60 @@ const SingleListIssue: React.FC<Props> = ({
const partialUpdateIssue = (formData: Partial<IIssue>) => { const partialUpdateIssue = (formData: Partial<IIssue>) => {
if (!workspaceSlug || !projectId) return; if (!workspaceSlug || !projectId) return;
if (typeId) {
mutate<CycleIssueResponse[]>(
CYCLE_ISSUES(typeId ?? ""),
(prevData) => {
const updatedIssues = (prevData ?? []).map((p) => {
if (p.issue_detail.id === issue.id) {
return {
...p,
issue_detail: {
...p.issue_detail,
...formData,
},
};
}
return p;
});
return [...updatedIssues];
},
false
);
mutate<ModuleIssueResponse[]>(
MODULE_ISSUES(typeId ?? ""),
(prevData) => {
const updatedIssues = (prevData ?? []).map((p) => {
if (p.issue_detail.id === issue.id) {
return {
...p,
issue_detail: {
...p.issue_detail,
...formData,
},
};
}
return p;
});
return [...updatedIssues];
},
false
);
}
mutate<IssueResponse>(
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
(prevData) => ({
...(prevData as IssueResponse),
results: (prevData?.results ?? []).map((p) => {
if (p.id === issue.id) return { ...p, ...formData };
return p;
}),
}),
false
);
issuesService issuesService
.patchIssue(workspaceSlug as string, projectId as string, issue.id, formData) .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
.then((res) => { .then((res) => {
@ -255,44 +312,24 @@ const SingleListIssue: React.FC<Props> = ({
<CustomDatePicker <CustomDatePicker
placeholder="N/A" placeholder="N/A"
value={issue?.target_date} value={issue?.target_date}
onChange={(val: Date) => { onChange={(val) =>
partialUpdateIssue({ partialUpdateIssue({
target_date: val target_date: val,
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` })
: null, }
});
}}
className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"} className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
/> />
{/* <DatePicker
placeholderText="N/A"
value={
issue?.target_date ? `${renderShortNumericDateFormat(issue.target_date)}` : "N/A"
}
selected={issue?.target_date ? new Date(issue.target_date) : null}
onChange={(val: Date) => {
partialUpdateIssue({
target_date: val
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
: null,
});
}}
dateFormat="dd-MM-yyyy"
className={`cursor-pointer rounded-md border px-2 py-[3px] text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
issue?.target_date ? "w-[4.5rem]" : "w-[3rem] text-center"
}`}
isClearable
/> */}
<div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block"> <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
<h5 className="mb-1 font-medium text-gray-900">Due date</h5> <h5 className="mb-1 font-medium text-gray-900">Due date</h5>
<div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div> <div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
<div> <div>
{issue.target_date && {issue.target_date
(issue.target_date < new Date().toISOString() ? issue.target_date < new Date().toISOString()
? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days` ? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
: findHowManyDaysLeft(issue.target_date) <= 3 : findHowManyDaysLeft(issue.target_date) <= 3
? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days` ? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
: "Due date")} : "Due date"
: "N/A"}
</div> </div>
</div> </div>
</div> </div>

259
apps/app/components/core/view.tsx
View File

@ -47,10 +47,10 @@ const View: React.FC<Props> = ({ issues }) => {
); );
return ( return (
<div className="flex items-center gap-2"> <>
<div className="flex items-center gap-x-1"> {issues && issues.length > 0 && (
{issues && ( <div className="flex items-center gap-2">
<> <div className="flex items-center gap-x-1">
<button <button
type="button" type="button"
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${ className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
@ -69,137 +69,138 @@ const View: React.FC<Props> = ({ issues }) => {
> >
<Squares2X2Icon className="h-4 w-4" /> <Squares2X2Icon className="h-4 w-4" />
</button> </button>
</> </div>
)} <Popover className="relative">
</div> {({ open }) => (
<Popover className="relative"> <>
{({ open }) => ( <Popover.Button
<> className={`group flex items-center gap-2 rounded-md border bg-transparent p-2 text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${
<Popover.Button open ? "bg-gray-100 text-gray-900" : "text-gray-500"
className={`group flex items-center gap-2 rounded-md border bg-transparent p-2 text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${ }`}
open ? "bg-gray-100 text-gray-900" : "text-gray-500" >
}`} <span>View</span>
> <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
<span>View</span> </Popover.Button>
<ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
</Popover.Button>
<Transition <Transition
as={React.Fragment} as={React.Fragment}
enter="transition ease-out duration-200" enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1" enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150" leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform overflow-hidden rounded-lg bg-white p-3 shadow-lg"> <Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform overflow-hidden rounded-lg bg-white p-3 shadow-lg">
<div className="relative divide-y-2"> <div className="relative divide-y-2">
{issues && ( {issues && (
<div className="space-y-4 pb-3"> <div className="space-y-4 pb-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-sm text-gray-600">Group by</h4> <h4 className="text-sm text-gray-600">Group by</h4>
<CustomMenu <CustomMenu
label={ label={
groupByOptions.find((option) => option.key === groupByProperty)?.name ?? groupByOptions.find((option) => option.key === groupByProperty)
"Select" ?.name ?? "Select"
} }
width="lg" width="lg"
>
{groupByOptions.map((option) => (
<CustomMenu.MenuItem
key={option.key}
onClick={() => setGroupByProperty(option.key)}
> >
{option.name} {groupByOptions.map((option) => (
</CustomMenu.MenuItem> <CustomMenu.MenuItem
))} key={option.key}
</CustomMenu> onClick={() => setGroupByProperty(option.key)}
</div> >
<div className="flex items-center justify-between"> {option.name}
<h4 className="text-sm text-gray-600">Order by</h4> </CustomMenu.MenuItem>
<CustomMenu ))}
label={ </CustomMenu>
orderByOptions.find((option) => option.key === orderBy)?.name ?? </div>
"Select" <div className="flex items-center justify-between">
} <h4 className="text-sm text-gray-600">Order by</h4>
width="lg" <CustomMenu
> label={
{orderByOptions.map((option) => orderByOptions.find((option) => option.key === orderBy)?.name ??
groupByProperty === "priority" && option.key === "priority" ? null : ( "Select"
<CustomMenu.MenuItem }
key={option.key} width="lg"
onClick={() => setOrderBy(option.key)}
>
{option.name}
</CustomMenu.MenuItem>
)
)}
</CustomMenu>
</div>
<div className="flex items-center justify-between">
<h4 className="text-sm text-gray-600">Issue type</h4>
<CustomMenu
label={
filterIssueOptions.find((option) => option.key === filterIssue)?.name ??
"Select"
}
width="lg"
>
{filterIssueOptions.map((option) => (
<CustomMenu.MenuItem
key={option.key}
onClick={() => setFilterIssue(option.key)}
> >
{option.name} {orderByOptions.map((option) =>
</CustomMenu.MenuItem> groupByProperty === "priority" &&
option.key === "priority" ? null : (
<CustomMenu.MenuItem
key={option.key}
onClick={() => setOrderBy(option.key)}
>
{option.name}
</CustomMenu.MenuItem>
)
)}
</CustomMenu>
</div>
<div className="flex items-center justify-between">
<h4 className="text-sm text-gray-600">Issue type</h4>
<CustomMenu
label={
filterIssueOptions.find((option) => option.key === filterIssue)
?.name ?? "Select"
}
width="lg"
>
{filterIssueOptions.map((option) => (
<CustomMenu.MenuItem
key={option.key}
onClick={() => setFilterIssue(option.key)}
>
{option.name}
</CustomMenu.MenuItem>
))}
</CustomMenu>
</div>
<div className="relative flex justify-end gap-x-3">
<button
type="button"
className="text-xs"
onClick={() => resetFilterToDefault()}
>
Reset to default
</button>
<button
type="button"
className="text-xs font-medium text-theme"
onClick={() => setNewFilterDefaultView()}
>
Set as default
</button>
</div>
</div>
)}
<div className="space-y-2 py-3">
<h4 className="text-sm text-gray-600">Display Properties</h4>
<div className="flex flex-wrap items-center gap-2">
{Object.keys(properties).map((key) => (
<button
key={key}
type="button"
className={`rounded border px-2 py-1 text-xs capitalize ${
properties[key as keyof Properties]
? "border-theme bg-theme text-white"
: "border-gray-300"
}`}
onClick={() => setProperties(key as keyof Properties)}
>
{replaceUnderscoreIfSnakeCase(key)}
</button>
))} ))}
</CustomMenu> </div>
</div>
<div className="relative flex justify-end gap-x-3">
<button
type="button"
className="text-xs"
onClick={() => resetFilterToDefault()}
>
Reset to default
</button>
<button
type="button"
className="text-xs font-medium text-theme"
onClick={() => setNewFilterDefaultView()}
>
Set as default
</button>
</div> </div>
</div> </div>
)} </Popover.Panel>
<div className="space-y-2 py-3"> </Transition>
<h4 className="text-sm text-gray-600">Display Properties</h4> </>
<div className="flex flex-wrap items-center gap-2"> )}
{Object.keys(properties).map((key) => ( </Popover>
<button </div>
key={key} )}
type="button" </>
className={`rounded border px-2 py-1 text-xs capitalize ${
properties[key as keyof Properties]
? "border-theme bg-theme text-white"
: "border-gray-300"
}`}
onClick={() => setProperties(key as keyof Properties)}
>
{replaceUnderscoreIfSnakeCase(key)}
</button>
))}
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
); );
}; };

13
apps/app/components/issues/description-form.tsx
View File

@ -17,7 +17,7 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
), ),
}); });
// types // types
import { IIssue } from "types"; import { IIssue, UserAuth } from "types";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
export interface IssueDescriptionFormValues { export interface IssueDescriptionFormValues {
@ -29,9 +29,14 @@ export interface IssueDescriptionFormValues {
export interface IssueDetailsProps { export interface IssueDetailsProps {
issue: IIssue; issue: IIssue;
handleFormSubmit: (value: IssueDescriptionFormValues) => void; handleFormSubmit: (value: IssueDescriptionFormValues) => void;
userAuth: UserAuth;
} }
export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormSubmit }) => { export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
issue,
handleFormSubmit,
userAuth,
}) => {
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const { const {
@ -97,6 +102,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
reset(issue); reset(issue);
}, [issue, reset]); }, [issue, reset]);
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
<div> <div>
<Input <Input
@ -111,6 +118,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
}} }}
mode="transparent" mode="transparent"
className="text-xl font-medium" className="text-xl font-medium"
disabled={isNotAllowed}
/> />
<span>{errors.name ? errors.name.message : null}</span> <span>{errors.name ? errors.name.message : null}</span>
<RemirrorRichTextEditor <RemirrorRichTextEditor
@ -121,6 +129,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
debounceHandler(); debounceHandler();
}} }}
onHTMLChange={(html) => setValue("description_html", html)} onHTMLChange={(html) => setValue("description_html", html)}
editable={!isNotAllowed}
/> />
</div> </div>
); );

8
apps/app/components/issues/form.tsx
View File

@ -291,13 +291,7 @@ export const IssueForm: FC<IssueFormProps> = ({
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<CustomDatePicker <CustomDatePicker
value={value} value={value}
onChange={(val: Date) => { onChange={onChange}
onChange(
val
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
: null
);
}}
className="max-w-[7rem]" className="max-w-[7rem]"
/> />
)} )}

172
apps/app/components/issues/sub-issue-list.tsx
View File

@ -7,7 +7,7 @@ import { CustomMenu } from "components/ui";
import { CreateUpdateIssueModal } from "components/issues"; import { CreateUpdateIssueModal } from "components/issues";
import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue"; import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
// types // types
import { IIssue } from "types"; import { IIssue, UserAuth } from "types";
export interface SubIssueListProps { export interface SubIssueListProps {
issues: IIssue[]; issues: IIssue[];
@ -15,6 +15,7 @@ export interface SubIssueListProps {
workspaceSlug: string; workspaceSlug: string;
parentIssue: IIssue; parentIssue: IIssue;
handleSubIssueRemove: (subIssueId: string) => void; handleSubIssueRemove: (subIssueId: string) => void;
userAuth: UserAuth;
} }
export const SubIssueList: FC<SubIssueListProps> = ({ export const SubIssueList: FC<SubIssueListProps> = ({
@ -23,6 +24,7 @@ export const SubIssueList: FC<SubIssueListProps> = ({
parentIssue, parentIssue,
workspaceSlug, workspaceSlug,
projectId, projectId,
userAuth,
}) => { }) => {
// states // states
const [isIssueModalActive, setIssueModalActive] = useState(false); const [isIssueModalActive, setIssueModalActive] = useState(false);
@ -45,6 +47,8 @@ export const SubIssueList: FC<SubIssueListProps> = ({
setSubIssueModalActive(false); setSubIssueModalActive(false);
}; };
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
<> <>
<CreateUpdateIssueModal <CreateUpdateIssueModal
@ -57,71 +61,71 @@ export const SubIssueList: FC<SubIssueListProps> = ({
setIsOpen={setSubIssueModalActive} setIsOpen={setSubIssueModalActive}
parent={parentIssue} parent={parentIssue}
/> />
{parentIssue?.id && workspaceSlug && projectId && issues?.length > 0 ? ( <Disclosure defaultOpen={true}>
<Disclosure defaultOpen={true}> {({ open }) => (
{({ open }) => ( <>
<> <div className="flex items-center justify-between">
<div className="flex items-center justify-between"> <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100">
<Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"> <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
<ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} /> Sub-issues <span className="ml-1 text-gray-600">{issues.length}</span>
Sub-issues <span className="ml-1 text-gray-600">{issues.length}</span> </Disclosure.Button>
</Disclosure.Button> {open && !isNotAllowed ? (
{open ? ( <div className="flex items-center">
<div className="flex items-center"> <button
<button type="button"
type="button" className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100" onClick={() => {
openIssueModal();
setPreloadedData({
parent: parentIssue.id,
});
}}
>
<PlusIcon className="h-3 w-3" />
Create new
</button>
<CustomMenu ellipsis>
<CustomMenu.MenuItem
onClick={() => { onClick={() => {
openIssueModal(); setSubIssueModalActive(true);
setPreloadedData({
parent: parentIssue.id,
});
}} }}
> >
<PlusIcon className="h-3 w-3" /> Add an existing issue
Create new </CustomMenu.MenuItem>
</button> </CustomMenu>
</div>
<CustomMenu ellipsis> ) : null}
<CustomMenu.MenuItem </div>
onClick={() => { <Transition
setSubIssueModalActive(true); enter="transition duration-100 ease-out"
}} enterFrom="transform scale-95 opacity-0"
> enterTo="transform scale-100 opacity-100"
Add an existing issue leave="transition duration-75 ease-out"
</CustomMenu.MenuItem> leaveFrom="transform scale-100 opacity-100"
</CustomMenu> leaveTo="transform scale-95 opacity-0"
</div> >
) : null} <Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
</div> {issues.map((issue) => (
<Transition <div
enter="transition duration-100 ease-out" key={issue.id}
enterFrom="transform scale-95 opacity-0" className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100"
enterTo="transform scale-100 opacity-100" >
leave="transition duration-75 ease-out" <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}>
leaveFrom="transform scale-100 opacity-100" <a className="flex items-center gap-2 rounded text-xs">
leaveTo="transform scale-95 opacity-0" <span
> className={`block h-1.5 w-1.5 rounded-full`}
<Disclosure.Panel className="mt-3 flex flex-col gap-y-1"> style={{
{issues.map((issue) => ( backgroundColor: issue.state_detail.color,
<div }}
key={issue.id} />
className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100" <span className="flex-shrink-0 text-gray-600">
> {issue.project_detail.identifier}-{issue.sequence_id}
<Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}> </span>
<a className="flex items-center gap-2 rounded text-xs"> <span className="max-w-sm break-all font-medium">{issue.name}</span>
<span </a>
className={`block h-1.5 w-1.5 rounded-full`} </Link>
style={{ {!isNotAllowed && (
backgroundColor: issue.state_detail.color,
}}
/>
<span className="flex-shrink-0 text-gray-600">
{issue.project_detail.identifier}-{issue.sequence_id}
</span>
<span className="max-w-sm break-all font-medium">{issue.name}</span>
</a>
</Link>
<div className="opacity-0 group-hover:opacity-100"> <div className="opacity-0 group-hover:opacity-100">
<CustomMenu ellipsis> <CustomMenu ellipsis>
<CustomMenu.MenuItem onClick={() => handleSubIssueRemove(issue.id)}> <CustomMenu.MenuItem onClick={() => handleSubIssueRemove(issue.id)}>
@ -129,40 +133,14 @@ export const SubIssueList: FC<SubIssueListProps> = ({
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
</CustomMenu> </CustomMenu>
</div> </div>
</div> )}
))} </div>
</Disclosure.Panel> ))}
</Transition> </Disclosure.Panel>
</> </Transition>
)} </>
</Disclosure> )}
) : ( </Disclosure>
<CustomMenu
label={
<>
<PlusIcon className="h-3 w-3" />
Add sub-issue
</>
}
optionsPosition="left"
noBorder
>
<CustomMenu.MenuItem
onClick={() => {
openIssueModal();
}}
>
Create new
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
openSubIssueModal();
}}
>
Add an existing issue
</CustomMenu.MenuItem>
</CustomMenu>
)}
</> </>
); );
}; };

4
apps/app/components/onboarding/user-details.tsx
View File

@ -34,8 +34,8 @@ const UserDetails: React.FC<Props> = ({ user, setStep }) => {
defaultValues, defaultValues,
}); });
const onSubmit = (formData: IUser) => { const onSubmit = async (formData: IUser) => {
userService await userService
.updateUser(formData) .updateUser(formData)
.then(() => { .then(() => {
setToastAlert({ setToastAlert({

12
apps/app/components/onboarding/workspace.tsx
View File

@ -55,15 +55,17 @@ const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
const handleCreateWorkspace = async (formData: IWorkspace) => { const handleCreateWorkspace = async (formData: IWorkspace) => {
await workspaceService await workspaceService
.workspaceSlugCheck(formData.slug) .workspaceSlugCheck(formData.slug)
.then((res) => { .then(async (res) => {
if (res.status === true) { if (res.status === true) {
workspaceService setSlugError(false);
await workspaceService
.createWorkspace(formData) .createWorkspace(formData)
.then((res) => { .then((res) => {
console.log(res); console.log(res);
setToastAlert({ setToastAlert({
type: "success", type: "success",
title: "Workspace created successfully!", title: "Success!",
message: "Workspace created successfully.",
}); });
setWorkspace(res); setWorkspace(res);
setStep(3); setStep(3);
@ -160,10 +162,10 @@ const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
<span className="text-sm text-slate-600">{"https://app.plane.so/"}</span> <span className="text-sm text-slate-600">{"https://app.plane.so/"}</span>
<Input <Input
name="slug" name="slug"
mode="transparent" mode="trueTransparent"
autoComplete="off" autoComplete="off"
register={register} register={register}
className="block w-full rounded-md bg-transparent py-2 px-0 text-sm focus:outline-none focus:ring-0" className="block w-full rounded-md bg-transparent py-2 px-0 text-sm focus:outline-none focus:ring-0"
/> />
</div> </div>
{slugError && ( {slugError && (

20
apps/app/components/project/cycles/create-update-cycle-modal.tsx
View File

@ -217,15 +217,7 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
<CustomDatePicker <CustomDatePicker
renderAs="input" renderAs="input"
value={value} value={value}
onChange={(val: Date) => { onChange={onChange}
onChange(
val
? `${val.getFullYear()}-${
val.getMonth() + 1
}-${val.getDate()}`
: null
);
}}
error={errors.start_date ? true : false} error={errors.start_date ? true : false}
/> />
)} )}
@ -246,15 +238,7 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
<CustomDatePicker <CustomDatePicker
renderAs="input" renderAs="input"
value={value} value={value}
onChange={(val: Date) => { onChange={onChange}
onChange(
val
? `${val.getFullYear()}-${
val.getMonth() + 1
}-${val.getDate()}`
: null
);
}}
error={errors.end_date ? true : false} error={errors.end_date ? true : false}
/> />
)} )}

51
apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
View File

@ -1,6 +1,7 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Image from "next/image";
import { mutate } from "swr"; import { mutate } from "swr";
@ -129,14 +130,28 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
<UserIcon className="h-4 w-4 flex-shrink-0" /> <UserIcon className="h-4 w-4 flex-shrink-0" />
<p>Owned by</p> <p>Owned by</p>
</div> </div>
<div className="sm:basis-1/2"> <div className="sm:basis-1/2 flex items-center gap-1">
{cycle.owned_by.first_name !== "" ? ( {cycle.owned_by &&
<> (cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
{cycle.owned_by.first_name} {cycle.owned_by.last_name} <div className="h-5 w-5 rounded-full border-2 border-transparent">
</> <Image
) : ( src={cycle.owned_by.avatar}
cycle.owned_by.email height="100%"
)} width="100%"
className="rounded-full"
alt={cycle.owned_by?.first_name}
/>
</div>
) : (
<div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
{cycle.owned_by?.first_name && cycle.owned_by.first_name !== ""
? cycle.owned_by.first_name.charAt(0)
: cycle.owned_by?.email.charAt(0)}
</div>
))}
{cycle.owned_by.first_name !== ""
? cycle.owned_by.first_name
: cycle.owned_by.email}
</div> </div>
</div> </div>
<div className="flex flex-wrap items-center py-2"> <div className="flex flex-wrap items-center py-2">
@ -171,13 +186,11 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
render={({ field: { value } }) => ( render={({ field: { value } }) => (
<CustomDatePicker <CustomDatePicker
value={value} value={value}
onChange={(val: Date) => { onChange={(val) =>
submitChanges({ submitChanges({
start_date: val start_date: val,
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` })
: null, }
});
}}
isClearable={false} isClearable={false}
/> />
)} )}
@ -196,13 +209,11 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
render={({ field: { value } }) => ( render={({ field: { value } }) => (
<CustomDatePicker <CustomDatePicker
value={value} value={value}
onChange={(val: Date) => { onChange={(val) =>
submitChanges({ submitChanges({
end_date: val end_date: val,
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` })
: null, }
});
}}
isClearable={false} isClearable={false}
/> />
)} )}

10
apps/app/components/project/issues/confirm-issue-deletion.tsx
View File

@ -25,9 +25,7 @@ type Props = {
data?: IIssue; data?: IIssue;
}; };
const ConfirmIssueDeletion: React.FC<Props> = (props) => { const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) => {
const { isOpen, handleClose, data } = props;
const cancelButtonRef = useRef(null); const cancelButtonRef = useRef(null);
const [isDeleteLoading, setIsDeleteLoading] = useState(false); const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@ -45,6 +43,8 @@ const ConfirmIssueDeletion: React.FC<Props> = (props) => {
handleClose(); handleClose();
}; };
console.log(data);
const handleDeletion = async () => { const handleDeletion = async () => {
setIsDeleteLoading(true); setIsDeleteLoading(true);
if (!data || !workspaceSlug) return; if (!data || !workspaceSlug) return;
@ -62,8 +62,8 @@ const ConfirmIssueDeletion: React.FC<Props> = (props) => {
false false
); );
const moduleId = data.issue_module?.module; const moduleId = data?.module;
const cycleId = data.issue_cycle?.cycle; const cycleId = data?.cycle;
if (moduleId) { if (moduleId) {
mutate<ModuleIssueResponse[]>( mutate<ModuleIssueResponse[]>(

78
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
View File

@ -39,7 +39,7 @@ import {
// helpers // helpers
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard } from "helpers/string.helper";
// types // types
import type { ICycle, IIssue, IIssueLabels } from "types"; import type { ICycle, IIssue, IIssueLabels, UserAuth } from "types";
// fetch-keys // fetch-keys
import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys"; import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
@ -50,6 +50,7 @@ type Props = {
submitChanges: (formData: Partial<IIssue>) => void; submitChanges: (formData: Partial<IIssue>) => void;
issueDetail: IIssue | undefined; issueDetail: IIssue | undefined;
watch: UseFormWatch<IIssue>; watch: UseFormWatch<IIssue>;
userAuth: UserAuth;
}; };
const defaultValues: Partial<IIssueLabels> = { const defaultValues: Partial<IIssueLabels> = {
@ -62,6 +63,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
submitChanges, submitChanges,
issueDetail, issueDetail,
watch: watchIssue, watch: watchIssue,
userAuth,
}) => { }) => {
const [createLabelForm, setCreateLabelForm] = useState(false); const [createLabelForm, setCreateLabelForm] = useState(false);
const [deleteIssueModal, setDeleteIssueModal] = useState(false); const [deleteIssueModal, setDeleteIssueModal] = useState(false);
@ -122,6 +124,8 @@ const IssueDetailSidebar: React.FC<Props> = ({
}); });
}; };
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
<> <>
<ConfirmIssueDeletion <ConfirmIssueDeletion
@ -158,20 +162,22 @@ const IssueDetailSidebar: React.FC<Props> = ({
> >
<LinkIcon className="h-3.5 w-3.5" /> <LinkIcon className="h-3.5 w-3.5" />
</button> </button>
<button {!isNotAllowed && (
type="button" <button
className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-50 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" type="button"
onClick={() => setDeleteIssueModal(true)} className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-50 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
> onClick={() => setDeleteIssueModal(true)}
<TrashIcon className="h-3.5 w-3.5" /> >
</button> <TrashIcon className="h-3.5 w-3.5" />
</button>
)}
</div> </div>
</div> </div>
<div className="divide-y-2 divide-gray-100"> <div className="divide-y-2 divide-gray-100">
<div className="py-1"> <div className="py-1">
<SelectState control={control} submitChanges={submitChanges} /> <SelectState control={control} submitChanges={submitChanges} userAuth={userAuth} />
<SelectAssignee control={control} submitChanges={submitChanges} /> <SelectAssignee control={control} submitChanges={submitChanges} userAuth={userAuth} />
<SelectPriority control={control} submitChanges={submitChanges} watch={watchIssue} /> <SelectPriority control={control} submitChanges={submitChanges} userAuth={userAuth} />
</div> </div>
<div className="py-1"> <div className="py-1">
<SelectParent <SelectParent
@ -202,16 +208,19 @@ const IssueDetailSidebar: React.FC<Props> = ({
) )
} }
watch={watchIssue} watch={watchIssue}
userAuth={userAuth}
/> />
<SelectBlocker <SelectBlocker
submitChanges={submitChanges} submitChanges={submitChanges}
issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []} issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
watch={watchIssue} watch={watchIssue}
userAuth={userAuth}
/> />
<SelectBlocked <SelectBlocked
submitChanges={submitChanges} submitChanges={submitChanges}
issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []} issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
watch={watchIssue} watch={watchIssue}
userAuth={userAuth}
/> />
<div className="flex flex-wrap items-center py-2"> <div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2"> <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -219,37 +228,18 @@ const IssueDetailSidebar: React.FC<Props> = ({
<p>Due date</p> <p>Due date</p>
</div> </div>
<div className="sm:basis-1/2"> <div className="sm:basis-1/2">
{/* <Controller
control={control}
name="target_date"
render={({ field: { value, onChange } }) => (
<DatePicker
selected={value ? new Date(value) : new Date()}
onChange={(val: Date) => {
submitChanges({
target_date: `${val.getFullYear()}-${
val.getMonth() + 1
}-${val.getDate()}`,
});
onChange(`${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`);
}}
dateFormat="dd-MM-yyyy"
/>
)}
/> */}
<Controller <Controller
control={control} control={control}
name="target_date" name="target_date"
render={({ field: { value } }) => ( render={({ field: { value } }) => (
<CustomDatePicker <CustomDatePicker
value={value} value={value}
onChange={(val: Date) => { onChange={(val) =>
submitChanges({ submitChanges({
target_date: val target_date: val,
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` })
: null, }
}); disabled={isNotAllowed}
}}
/> />
)} )}
/> />
@ -260,7 +250,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
<SelectCycle <SelectCycle
issueDetail={issueDetail} issueDetail={issueDetail}
handleCycleChange={handleCycleChange} handleCycleChange={handleCycleChange}
watch={watchIssue} userAuth={userAuth}
/> />
</div> </div>
</div> </div>
@ -290,7 +280,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
> >
<span <span
className="h-2 w-2 flex-shrink-0 rounded-full" className="h-2 w-2 flex-shrink-0 rounded-full"
style={{ backgroundColor: singleLabel.colour ?? "green" }} style={{ backgroundColor: singleLabel?.colour ?? "green" }}
/> />
{singleLabel.name} {singleLabel.name}
<XMarkIcon className="h-2 w-2 group-hover:text-red-500" /> <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
@ -307,12 +297,19 @@ const IssueDetailSidebar: React.FC<Props> = ({
onChange={(val: any) => submitChanges({ labels_list: val })} onChange={(val: any) => submitChanges({ labels_list: val })}
className="flex-shrink-0" className="flex-shrink-0"
multiple multiple
disabled={isNotAllowed}
> >
{({ open }) => ( {({ open }) => (
<> <>
<Listbox.Label className="sr-only">Label</Listbox.Label> <Listbox.Label className="sr-only">Label</Listbox.Label>
<div className="relative"> <div className="relative">
<Listbox.Button className="flex cursor-pointer items-center gap-2 rounded-2xl border px-2 py-0.5 text-xs hover:bg-gray-100"> <Listbox.Button
className={`flex ${
isNotAllowed
? "cursor-not-allowed"
: "cursor-pointer hover:bg-gray-100"
} items-center gap-2 rounded-2xl border px-2 py-0.5 text-xs`}
>
Select Label Select Label
</Listbox.Button> </Listbox.Button>
@ -361,8 +358,11 @@ const IssueDetailSidebar: React.FC<Props> = ({
/> />
<button <button
type="button" type="button"
className="flex cursor-pointer items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs hover:bg-gray-100" className={`flex ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs`}
onClick={() => setCreateLabelForm((prevData) => !prevData)} onClick={() => setCreateLabelForm((prevData) => !prevData)}
disabled={isNotAllowed}
> >
{createLabelForm ? ( {createLabelForm ? (
<> <>

25
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
View File

@ -5,29 +5,29 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// react-hook-form
import { Control, Controller } from "react-hook-form"; import { Control, Controller } from "react-hook-form";
// services // headless ui
import { Listbox, Transition } from "@headlessui/react"; import { Listbox, Transition } from "@headlessui/react";
// services
import { UserGroupIcon } from "@heroicons/react/24/outline"; import { UserGroupIcon } from "@heroicons/react/24/outline";
import workspaceService from "services/workspace.service"; import workspaceService from "services/workspace.service";
// hooks // hooks
// headless ui
// ui // ui
import { AssigneesList } from "components/ui/avatar"; import { AssigneesList } from "components/ui/avatar";
import { Spinner } from "components/ui"; import { Spinner } from "components/ui";
// icons
import User from "public/user.png";
// types // types
import { IIssue } from "types"; import { IIssue, UserAuth } from "types";
// constants // constants
import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
type Props = { type Props = {
control: Control<IIssue, any>; control: Control<IIssue, any>;
submitChanges: (formData: Partial<IIssue>) => void; submitChanges: (formData: Partial<IIssue>) => void;
userAuth: UserAuth;
}; };
const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => { const SelectAssignee: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
@ -36,6 +36,8 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
); );
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
<div className="flex flex-wrap items-center py-2"> <div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2"> <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -55,16 +57,21 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
submitChanges({ assignees_list: value }); submitChanges({ assignees_list: value });
}} }}
className="flex-shrink-0" className="flex-shrink-0"
disabled={isNotAllowed}
> >
{({ open }) => ( {({ open }) => (
<div className="relative"> <div className="relative">
<Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs"> <Listbox.Button
className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
} items-center gap-1 text-xs`}
>
<span <span
className={`hidden truncate text-left sm:block ${ className={`hidden truncate text-left sm:block ${
value ? "" : "text-gray-900" value ? "" : "text-gray-900"
}`} }`}
> >
<div className="flex cursor-pointer items-center gap-1 text-xs"> <div className="flex items-center gap-1 text-xs">
{value && Array.isArray(value) ? ( {value && Array.isArray(value) ? (
<AssigneesList userIds={value} length={10} /> <AssigneesList userIds={value} length={10} />
) : null} ) : null}
@ -82,7 +89,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 w-auto overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"> <Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1"> <div className="py-1">
{people ? ( {people ? (
people.length > 0 ? ( people.length > 0 ? (

30
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
View File

@ -19,7 +19,7 @@ import { Button } from "components/ui";
import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { BlockedIcon, LayerDiagonalIcon } from "components/icons"; import { BlockedIcon, LayerDiagonalIcon } from "components/icons";
// types // types
import { IIssue } from "types"; import { IIssue, UserAuth } from "types";
// fetch-keys // fetch-keys
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys"; import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
@ -31,9 +31,10 @@ type Props = {
submitChanges: (formData: Partial<IIssue>) => void; submitChanges: (formData: Partial<IIssue>) => void;
issuesList: IIssue[]; issuesList: IIssue[];
watch: UseFormWatch<IIssue>; watch: UseFormWatch<IIssue>;
userAuth: UserAuth;
}; };
const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) => { const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch, userAuth }) => {
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false); const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
@ -95,6 +96,8 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
.includes(query.toLowerCase()) .includes(query.toLowerCase())
); );
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
<div className="flex flex-wrap items-start py-2"> <div className="flex flex-wrap items-start py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2"> <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -266,16 +269,18 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
</Combobox.Options> </Combobox.Options>
</Combobox> </Combobox>
<div className="flex items-center justify-end gap-2 p-3"> {filteredIssues.length > 0 && (
<div> <div className="flex items-center justify-end gap-2 p-3">
<Button type="button" theme="secondary" size="sm" onClick={handleClose}> <div>
Close <Button type="button" theme="secondary" size="sm" onClick={handleClose}>
Close
</Button>
</div>
<Button onClick={handleSubmit(onSubmit)} size="sm">
Add selected issues
</Button> </Button>
</div> </div>
<Button onClick={handleSubmit(onSubmit)} size="sm"> )}
Add selected issues
</Button>
</div>
</form> </form>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
@ -284,8 +289,11 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
</Transition.Root> </Transition.Root>
<button <button
type="button" type="button"
className="flex w-full cursor-pointer items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
onClick={() => setIsBlockedModalOpen(true)} onClick={() => setIsBlockedModalOpen(true)}
disabled={isNotAllowed}
> >
Select issues Select issues
</button> </button>

30
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
View File

@ -19,7 +19,7 @@ import { Button } from "components/ui";
import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { BlockerIcon, LayerDiagonalIcon } from "components/icons"; import { BlockerIcon, LayerDiagonalIcon } from "components/icons";
// types // types
import { IIssue } from "types"; import { IIssue, UserAuth } from "types";
// fetch-keys // fetch-keys
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys"; import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
@ -31,9 +31,10 @@ type Props = {
submitChanges: (formData: Partial<IIssue>) => void; submitChanges: (formData: Partial<IIssue>) => void;
issuesList: IIssue[]; issuesList: IIssue[];
watch: UseFormWatch<IIssue>; watch: UseFormWatch<IIssue>;
userAuth: UserAuth;
}; };
const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) => { const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch, userAuth }) => {
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false); const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
@ -95,6 +96,8 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
.includes(query.toLowerCase()) .includes(query.toLowerCase())
); );
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
<div className="flex flex-wrap items-start py-2"> <div className="flex flex-wrap items-start py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2"> <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -265,16 +268,18 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
</Combobox.Options> </Combobox.Options>
</Combobox> </Combobox>
<div className="flex items-center justify-end gap-2 p-3"> {filteredIssues.length > 0 && (
<div> <div className="flex items-center justify-end gap-2 p-3">
<Button type="button" theme="secondary" size="sm" onClick={handleClose}> <div>
Close <Button type="button" theme="secondary" size="sm" onClick={handleClose}>
Close
</Button>
</div>
<Button onClick={handleSubmit(onSubmit)} size="sm">
Add selected issues
</Button> </Button>
</div> </div>
<Button onClick={handleSubmit(onSubmit)} size="sm"> )}
Add selected issues
</Button>
</div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
</div> </div>
@ -282,8 +287,11 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
</Transition.Root> </Transition.Root>
<button <button
type="button" type="button"
className="flex w-full cursor-pointer items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
onClick={() => setIsBlockerModalOpen(true)} onClick={() => setIsBlockerModalOpen(true)}
disabled={isNotAllowed}
> >
Select issues Select issues
</button> </button>

11
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
View File

@ -4,8 +4,6 @@ import { useRouter } from "next/router";
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
// react-hook-form
import { UseFormWatch } from "react-hook-form";
// services // services
import issuesService from "services/issues.service"; import issuesService from "services/issues.service";
import cyclesService from "services/cycles.service"; import cyclesService from "services/cycles.service";
@ -14,17 +12,17 @@ import { Spinner, CustomSelect } from "components/ui";
// icons // icons
import { CyclesIcon } from "components/icons"; import { CyclesIcon } from "components/icons";
// types // types
import { ICycle, IIssue } from "types"; import { ICycle, IIssue, UserAuth } from "types";
// fetch-keys // fetch-keys
import { CYCLE_ISSUES, CYCLE_LIST, ISSUE_DETAILS } from "constants/fetch-keys"; import { CYCLE_ISSUES, CYCLE_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
type Props = { type Props = {
issueDetail: IIssue | undefined; issueDetail: IIssue | undefined;
handleCycleChange: (cycle: ICycle) => void; handleCycleChange: (cycle: ICycle) => void;
watch: UseFormWatch<IIssue>; userAuth: UserAuth;
}; };
const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange }) => { const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange, userAuth }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query; const { workspaceSlug, projectId, issueId } = router.query;
@ -52,6 +50,8 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange }) => {
const issueCycle = issueDetail?.issue_cycle; const issueCycle = issueDetail?.issue_cycle;
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
<div className="flex flex-wrap items-center py-2"> <div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2"> <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -73,6 +73,7 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange }) => {
? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "") ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
: handleCycleChange(cycles?.find((c) => c.id === value) as any); : handleCycleChange(cycles?.find((c) => c.id === value) as any);
}} }}
disabled={isNotAllowed}
> >
{cycles ? ( {cycles ? (
cycles.length > 0 ? ( cycles.length > 0 ? (

11
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx
View File

@ -13,7 +13,7 @@ import issuesServices from "services/issues.service";
import IssuesListModal from "components/project/issues/issues-list-modal"; import IssuesListModal from "components/project/issues/issues-list-modal";
// icons // icons
// types // types
import { IIssue } from "types"; import { IIssue, UserAuth } from "types";
// fetch-keys // fetch-keys
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys"; import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
@ -23,6 +23,7 @@ type Props = {
issuesList: IIssue[]; issuesList: IIssue[];
customDisplay: JSX.Element; customDisplay: JSX.Element;
watch: UseFormWatch<IIssue>; watch: UseFormWatch<IIssue>;
userAuth: UserAuth;
}; };
const SelectParent: React.FC<Props> = ({ const SelectParent: React.FC<Props> = ({
@ -31,6 +32,7 @@ const SelectParent: React.FC<Props> = ({
issuesList, issuesList,
customDisplay, customDisplay,
watch, watch,
userAuth,
}) => { }) => {
const [isParentModalOpen, setIsParentModalOpen] = useState(false); const [isParentModalOpen, setIsParentModalOpen] = useState(false);
@ -46,6 +48,8 @@ const SelectParent: React.FC<Props> = ({
: null : null
); );
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
<div className="flex flex-wrap items-center py-2"> <div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2"> <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -73,8 +77,11 @@ const SelectParent: React.FC<Props> = ({
/> />
<button <button
type="button" type="button"
className="flex w-full cursor-pointer items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
onClick={() => setIsParentModalOpen(true)} onClick={() => setIsParentModalOpen(true)}
disabled={isNotAllowed}
> >
{watch("parent") && watch("parent") !== "" {watch("parent") && watch("parent") !== ""
? `${ ? `${

92
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
View File

@ -7,7 +7,7 @@ import { ChartBarIcon } from "@heroicons/react/24/outline";
import { CustomSelect } from "components/ui"; import { CustomSelect } from "components/ui";
// icons // icons
// types // types
import { IIssue } from "types"; import { IIssue, UserAuth } from "types";
// common // common
// constants // constants
import { getPriorityIcon } from "constants/global"; import { getPriorityIcon } from "constants/global";
@ -16,52 +16,54 @@ import { PRIORITIES } from "constants/";
type Props = { type Props = {
control: Control<IIssue, any>; control: Control<IIssue, any>;
submitChanges: (formData: Partial<IIssue>) => void; submitChanges: (formData: Partial<IIssue>) => void;
watch: UseFormWatch<IIssue>; userAuth: UserAuth;
}; };
const SelectPriority: React.FC<Props> = ({ control, submitChanges, watch }) => ( const SelectPriority: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
<div className="flex flex-wrap items-center py-2"> const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
<ChartBarIcon className="h-4 w-4 flex-shrink-0" /> return (
<p>Priority</p> <div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
<ChartBarIcon className="h-4 w-4 flex-shrink-0" />
<p>Priority</p>
</div>
<div className="sm:basis-1/2">
<Controller
control={control}
name="priority"
render={({ field: { value } }) => (
<CustomSelect
label={
<span
className={`flex items-center gap-2 text-left capitalize ${
value ? "" : "text-gray-900"
}`}
>
{getPriorityIcon(value && value !== "" ? value ?? "" : "None", "text-sm")}
{value && value !== "" ? value : "None"}
</span>
}
value={value}
onChange={(value: any) => {
submitChanges({ priority: value });
}}
disabled={isNotAllowed}
>
{PRIORITIES.map((option) => (
<CustomSelect.Option key={option} value={option} className="capitalize">
<>
{getPriorityIcon(option, "text-sm")}
{option ?? "None"}
</>
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
</div>
</div> </div>
<div className="sm:basis-1/2"> );
<Controller };
control={control}
name="state"
render={({ field: { value } }) => (
<CustomSelect
label={
<span
className={`flex items-center gap-2 text-left capitalize ${
value ? "" : "text-gray-900"
}`}
>
{getPriorityIcon(
watch("priority") && watch("priority") !== "" ? watch("priority") ?? "" : "None",
"text-sm"
)}
{watch("priority") && watch("priority") !== "" ? watch("priority") : "None"}
</span>
}
value={value}
onChange={(value: any) => {
submitChanges({ priority: value });
}}
>
{PRIORITIES.map((option) => (
<CustomSelect.Option key={option} value={option} className="capitalize">
<>
{getPriorityIcon(option, "text-sm")}
{option ?? "None"}
</>
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
</div>
</div>
);
export default SelectPriority; export default SelectPriority;

8
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx
View File

@ -12,16 +12,17 @@ import stateService from "services/state.service";
import { Spinner, CustomSelect } from "components/ui"; import { Spinner, CustomSelect } from "components/ui";
// icons // icons
// types // types
import { IIssue } from "types"; import { IIssue, UserAuth } from "types";
// constants // constants
import { STATE_LIST } from "constants/fetch-keys"; import { STATE_LIST } from "constants/fetch-keys";
type Props = { type Props = {
control: Control<IIssue, any>; control: Control<IIssue, any>;
submitChanges: (formData: Partial<IIssue>) => void; submitChanges: (formData: Partial<IIssue>) => void;
userAuth: UserAuth;
}; };
const SelectState: React.FC<Props> = ({ control, submitChanges }) => { const SelectState: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
@ -32,6 +33,8 @@ const SelectState: React.FC<Props> = ({ control, submitChanges }) => {
: null : null
); );
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
<div className="flex flex-wrap items-center py-2"> <div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2"> <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -67,6 +70,7 @@ const SelectState: React.FC<Props> = ({ control, submitChanges }) => {
onChange={(value: any) => { onChange={(value: any) => {
submitChanges({ state: value }); submitChanges({ state: value });
}} }}
disabled={isNotAllowed}
> >
{states ? ( {states ? (
states.length > 0 ? ( states.length > 0 ? (

20
apps/app/components/project/modules/create-update-module-modal/index.tsx
View File

@ -207,15 +207,7 @@ const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, pro
<CustomDatePicker <CustomDatePicker
renderAs="input" renderAs="input"
value={value} value={value}
onChange={(val: Date) => { onChange={onChange}
onChange(
val
? `${val.getFullYear()}-${
val.getMonth() + 1
}-${val.getDate()}`
: null
);
}}
error={errors.start_date ? true : false} error={errors.start_date ? true : false}
/> />
)} )}
@ -236,15 +228,7 @@ const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, pro
<CustomDatePicker <CustomDatePicker
renderAs="input" renderAs="input"
value={value} value={value}
onChange={(val: Date) => { onChange={onChange}
onChange(
val
? `${val.getFullYear()}-${
val.getMonth() + 1
}-${val.getDate()}`
: null
);
}}
error={errors.target_date ? true : false} error={errors.target_date ? true : false}
/> />
)} )}

71
apps/app/components/project/modules/create-update-module-modal/select-status.tsx
View File

@ -1,14 +1,14 @@
// react
import React from "react"; import React from "react";
// react hook form // react hook form
import { Controller, FieldError, Control } from "react-hook-form"; import { Controller, FieldError, Control } from "react-hook-form";
import { Squares2X2Icon } from "@heroicons/react/24/outline";
// import type { Control } from "react-hook-form";
// ui // ui
import type { IModule } from "types";
import { CustomListbox } from "components/ui"; import { CustomListbox } from "components/ui";
// icons // icons
import { Squares2X2Icon } from "@heroicons/react/24/outline";
// types // types
import type { IModule } from "types";
// constants
import { MODULE_STATUS } from "constants/"; import { MODULE_STATUS } from "constants/";
type Props = { type Props = {
@ -16,38 +16,33 @@ type Props = {
error?: FieldError; error?: FieldError;
}; };
const SelectStatus: React.FC<Props> = (props) => { const SelectStatus: React.FC<Props> = ({ control, error }) => (
const { control, error } = props; <Controller
control={control}
return ( rules={{ required: true }}
<Controller name="status"
control={control} render={({ field: { value, onChange } }) => (
rules={{ required: true }} <div>
name="status" <CustomListbox
render={({ field: { value, onChange } }) => ( className={`${
<div> error
<CustomListbox ? "border-red-500 bg-red-100 hover:bg-red-100 focus:outline-none focus:ring-red-500"
className={`${ : ""
error }`}
? "border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500" title="Status"
: "" options={MODULE_STATUS.map((status) => ({
}`} value: status.value,
title="Status" display: status.label,
options={MODULE_STATUS.map((status) => ({ color: status.color,
value: status.value, }))}
display: status.label, value={value}
color: status.color, optionsFontsize="sm"
}))} onChange={onChange}
value={value} icon={<Squares2X2Icon className={`h-3 w-3 ${error ? "text-black" : "text-gray-400"}`} />}
optionsFontsize="sm" />
onChange={onChange} {error && <p className="mt-1 text-sm text-red-600">{error.message}</p>}
icon={<Squares2X2Icon className="h-3 w-3 text-gray-400" />} </div>
/> )}
{error && <p className="mt-1 text-sm text-red-600">{error.message}</p>} />
</div> );
)}
/>
);
};
export default SelectStatus; export default SelectStatus;

27
apps/app/components/project/modules/module-detail-sidebar/index.tsx
View File

@ -5,6 +5,7 @@ import { useRouter } from "next/router";
import { mutate } from "swr"; import { mutate } from "swr";
// react-hook-form
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// services // services
import { import {
@ -160,7 +161,11 @@ const ModuleDetailSidebar: React.FC<Props> = ({
</div> </div>
<div className="divide-y-2 divide-gray-100 text-xs"> <div className="divide-y-2 divide-gray-100 text-xs">
<div className="py-1"> <div className="py-1">
<SelectLead control={control} submitChanges={submitChanges} /> <SelectLead
control={control}
submitChanges={submitChanges}
lead={module.lead_detail}
/>
<SelectMembers control={control} submitChanges={submitChanges} /> <SelectMembers control={control} submitChanges={submitChanges} />
<div className="flex flex-wrap items-center py-2"> <div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2"> <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -194,13 +199,11 @@ const ModuleDetailSidebar: React.FC<Props> = ({
render={({ field: { value } }) => ( render={({ field: { value } }) => (
<CustomDatePicker <CustomDatePicker
value={value} value={value}
onChange={(val: Date) => { onChange={(val) =>
submitChanges({ submitChanges({
start_date: val start_date: val,
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` })
: null, }
});
}}
/> />
)} )}
/> />
@ -218,13 +221,11 @@ const ModuleDetailSidebar: React.FC<Props> = ({
render={({ field: { value } }) => ( render={({ field: { value } }) => (
<CustomDatePicker <CustomDatePicker
value={value} value={value}
onChange={(val: Date) => { onChange={(val) =>
submitChanges({ submitChanges({
target_date: val target_date: val,
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}` })
: null, }
});
}}
/> />
)} )}
/> />

197
apps/app/components/project/modules/module-detail-sidebar/select-lead.tsx
View File

@ -5,26 +5,27 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// react-hook-form
import { Control, Controller } from "react-hook-form"; import { Control, Controller } from "react-hook-form";
// services
import { Listbox, Transition } from "@headlessui/react";
import { UserIcon } from "@heroicons/react/24/outline";
import workspaceService from "services/workspace.service";
// headless ui // headless ui
// ui import { Listbox, Transition } from "@headlessui/react";
import { Spinner } from "components/ui"; // services
import workspaceService from "services/workspace.service";
// icons // icons
import { UserIcon } from "@heroicons/react/24/outline";
import User from "public/user.png";
// types // types
import { IModule } from "types"; import { IModule, IUserLite } from "types";
// constants // fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
type Props = { type Props = {
control: Control<Partial<IModule>, any>; control: Control<Partial<IModule>, any>;
submitChanges: (formData: Partial<IModule>) => void; submitChanges: (formData: Partial<IModule>) => void;
lead: IUserLite | null;
}; };
const SelectLead: React.FC<Props> = ({ control, submitChanges }) => { const SelectLead: React.FC<Props> = ({ control, submitChanges, lead }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
@ -52,102 +53,110 @@ const SelectLead: React.FC<Props> = ({ control, submitChanges }) => {
}} }}
className="flex-shrink-0" className="flex-shrink-0"
> >
{({ open }) => { {({ open }) => (
const person = people?.find((p) => p.member.id === value)?.member; <div className="relative">
<Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs">
return ( <span
<div className="relative"> className={`hidden truncate text-left sm:block ${
<Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs"> value ? "" : "text-gray-900"
<span }`}
className={`hidden truncate text-left sm:block ${ >
value ? "" : "text-gray-900" <div className="flex items-center gap-1 text-xs">
}`} {lead ? (
> lead.avatar && lead.avatar !== "" ? (
<div className="flex cursor-pointer items-center gap-1 text-xs">
{person && person.avatar && person.avatar !== "" ? (
<div className="h-5 w-5 rounded-full border-2 border-transparent"> <div className="h-5 w-5 rounded-full border-2 border-transparent">
<Image <Image
src={person.avatar} src={lead.avatar}
height="100%" height="100%"
width="100%" width="100%"
className="rounded-full" className="rounded-full"
alt={person.first_name} alt={lead?.first_name}
/> />
</div> </div>
) : ( ) : (
<div <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
className={`grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white`} {lead?.first_name && lead.first_name !== ""
> ? lead.first_name.charAt(0)
{person?.first_name && person.first_name !== "" : lead?.email.charAt(0)}
? person.first_name.charAt(0)
: person?.email.charAt(0)}
</div> </div>
)} )
{person?.first_name && person.first_name !== "" ) : (
? person?.first_name + " " + person?.last_name <div className="h-5 w-5 rounded-full border-2 border-white bg-white">
: person?.email} <Image
</div> src={User}
</span> height="100%"
</Listbox.Button> width="100%"
className="rounded-full"
alt="No user"
/>
</div>
)}
{lead
? lead?.first_name && lead.first_name !== ""
? lead?.first_name
: lead?.email
: "N/A"}
</div>
</span>
</Listbox.Button>
<Transition <Transition
show={open} show={open}
as={React.Fragment} as={React.Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75" leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"> <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1"> <div className="py-1">
{people ? ( {people ? (
people.length > 0 ? ( people.length > 0 ? (
people.map((option) => ( people.map((option) => (
<Listbox.Option <Listbox.Option
key={option.member.id} key={option.member.id}
className={({ active, selected }) => className={({ active, selected }) =>
`${ `${
active || selected ? "bg-indigo-50" : "" active || selected ? "bg-indigo-50" : ""
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900` } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
} }
value={option.member.id} value={option.member.id}
> >
{option.member.avatar && option.member.avatar !== "" ? ( {option.member.avatar && option.member.avatar !== "" ? (
<div className="relative h-4 w-4"> <div className="relative h-4 w-4">
<Image <Image
src={option.member.avatar} src={option.member.avatar}
alt="avatar" alt="avatar"
className="rounded-full" className="rounded-full"
layout="fill" layout="fill"
objectFit="cover" objectFit="cover"
/> />
</div> </div>
) : ( ) : (
<div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white"> <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
{option.member.first_name && option.member.first_name !== "" {option.member.first_name && option.member.first_name !== ""
? option.member.first_name.charAt(0) ? option.member.first_name.charAt(0)
: option.member.email.charAt(0)} : option.member.email.charAt(0)}
</div> </div>
)} )}
{option.member.first_name && option.member.first_name !== "" {option.member.first_name && option.member.first_name !== ""
? option.member.first_name ? option.member.first_name
: option.member.email} : option.member.email}
</Listbox.Option> </Listbox.Option>
)) ))
) : (
<div className="text-center">No members found</div>
)
) : ( ) : (
<Spinner /> <div className="text-center">No members found</div>
)} )
</div> ) : (
</Listbox.Options> <p className="text-xs text-gray-500 px-2">Loading...</p>
</Transition> )}
</div> </div>
); </Listbox.Options>
}} </Transition>
</div>
)}
</Listbox> </Listbox>
)} )}
/> />

6
apps/app/components/project/modules/module-detail-sidebar/select-members.tsx
View File

@ -12,7 +12,7 @@ import { UserGroupIcon } from "@heroicons/react/24/outline";
import workspaceService from "services/workspace.service"; import workspaceService from "services/workspace.service";
// headless ui // headless ui
// ui // ui
import { AssigneesList, Spinner } from "components/ui"; import { AssigneesList } from "components/ui";
// types // types
import { IModule } from "types"; import { IModule } from "types";
// constants // constants
@ -78,7 +78,7 @@ const SelectMembers: React.FC<Props> = ({ control, submitChanges }) => {
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 w-auto overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"> <Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none w-full">
<div className="py-1"> <div className="py-1">
{people ? ( {people ? (
people.length > 0 ? ( people.length > 0 ? (
@ -118,7 +118,7 @@ const SelectMembers: React.FC<Props> = ({ control, submitChanges }) => {
<div className="text-center">No members found</div> <div className="text-center">No members found</div>
) )
) : ( ) : (
<Spinner /> <p className="text-xs text-gray-500 px-2">Loading...</p>
)} )}
</div> </div>
</Listbox.Options> </Listbox.Options>

2
apps/app/components/project/sidebar-list.tsx
View File

@ -88,7 +88,7 @@ export const ProjectSidebarList: FC = () => {
}`} }`}
> >
{project.icon ? ( {project.icon ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase text-white"> <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{String.fromCodePoint(parseInt(project.icon))} {String.fromCodePoint(parseInt(project.icon))}
</span> </span>
) : ( ) : (

6
apps/app/components/ui/custom-select/index.tsx
View File

@ -39,8 +39,8 @@ const CustomSelect = ({
<div> <div>
<Listbox.Button <Listbox.Button
className={`flex w-full ${ className={`flex w-full ${
disabled ? "cursor-not-allowed" : "cursor-pointer" disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} items-center justify-between gap-1 rounded-md border shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${ } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
input ? "border-gray-300 px-3 py-2 text-sm" : "px-2 py-1 text-xs" input ? "border-gray-300 px-3 py-2 text-sm" : "px-2 py-1 text-xs"
} ${ } ${
textAlignment === "right" textAlignment === "right"
@ -51,7 +51,7 @@ const CustomSelect = ({
}`} }`}
> >
{label} {label}
{!noChevron && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />} {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
</Listbox.Button> </Listbox.Button>
</div> </div>

31
apps/app/components/ui/datepicker.tsx
View File

@ -5,12 +5,13 @@ import "react-datepicker/dist/react-datepicker.css";
type Props = { type Props = {
renderAs?: "input" | "button"; renderAs?: "input" | "button";
value: Date | string | null | undefined; value: Date | string | null | undefined;
onChange: (arg: Date) => void; onChange: (val: string | null) => void;
placeholder?: string; placeholder?: string;
displayShortForm?: boolean; displayShortForm?: boolean;
error?: boolean; error?: boolean;
className?: string; className?: string;
isClearable?: boolean; isClearable?: boolean;
disabled?: boolean;
}; };
export const CustomDatePicker: React.FC<Props> = ({ export const CustomDatePicker: React.FC<Props> = ({
@ -22,19 +23,37 @@ export const CustomDatePicker: React.FC<Props> = ({
error = false, error = false,
className = "", className = "",
isClearable = true, isClearable = true,
disabled = false,
}) => ( }) => (
<DatePicker <DatePicker
placeholderText={placeholder} placeholderText={placeholder}
selected={value ? new Date(value) : null} selected={value ? new Date(value) : null}
onChange={onChange} onChange={(val) => {
dateFormat="dd-MM-yyyy" if (!val) onChange(null);
else {
const year = val.getFullYear();
let month: number | string = val.getMonth() + 1;
let date: number | string = val.getDate();
if (date < 10) date = `0${date}`;
if (month < 10) month = `0${month}`;
onChange(`${year}-${month}-${date}`);
}
}}
className={`${className} ${ className={`${className} ${
renderAs === "input" renderAs === "input"
? "block bg-transparent text-sm focus:outline-none rounded-md border border-gray-300 px-3 py-2 w-full cursor-pointer" ? "block bg-transparent text-sm focus:outline-none border-gray-300 px-3 py-2"
: renderAs === "button" : renderAs === "button"
? "w-full rounded-md border px-2 py-1 text-xs shadow-sm hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 duration-300 cursor-pointer" ? `px-2 py-1 text-xs shadow-sm ${
disabled ? "" : "hover:bg-gray-100"
} focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 duration-300`
: "" : ""
} ${error ? "border-red-500 bg-red-200" : ""} bg-transparent caret-transparent`} } ${error ? "border-red-500 bg-red-100" : ""} ${
disabled ? "cursor-not-allowed" : "cursor-pointer"
} w-full rounded-md bg-transparent border caret-transparent`}
dateFormat="dd-MM-yyyy"
isClearable={isClearable} isClearable={isClearable}
disabled={disabled}
/> />
); );

2
apps/app/components/ui/input/index.tsx
View File

@ -39,6 +39,8 @@ export const Input: React.FC<Props> = ({
? "rounded-md border border-gray-300" ? "rounded-md border border-gray-300"
: mode === "transparent" : mode === "transparent"
? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-indigo-500" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-indigo-500"
: mode === "trueTransparent"
? "rounded border-none bg-transparent ring-0"
: "" : ""
} ${error ? "border-red-500" : ""} ${error && mode === "primary" ? "bg-red-100" : ""} ${ } ${error ? "border-red-500" : ""} ${error && mode === "primary" ? "bg-red-100" : ""} ${
fullWidth ? "w-full" : "" fullWidth ? "w-full" : ""

2
apps/app/components/ui/input/types.d.ts vendored
View File

@ -5,7 +5,7 @@ export interface Props extends React.ComponentPropsWithoutRef<"input"> {
label?: string; label?: string;
name: string; name: string;
value?: string | number | readonly string[]; value?: string | number | readonly string[];
mode?: "primary" | "transparent" | "secondary" | "disabled"; mode?: "primary" | "transparent" | "trueTransparent" | "secondary" | "disabled";
register?: UseFormRegister<any>; register?: UseFormRegister<any>;
validations?: RegisterOptions; validations?: RegisterOptions;
error?: any; error?: any;

3
apps/app/components/workspace/help-section.tsx
View File

@ -57,7 +57,7 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
return ( return (
<div <div
className={`flex w-full items-center self-baseline bg-primary px-2 py-2 ${ className={`flex w-full items-center justify-between self-baseline bg-primary px-2 py-2 ${
sidebarCollapse ? "flex-col-reverse" : "" sidebarCollapse ? "flex-col-reverse" : ""
}`} }`}
> >
@ -88,7 +88,6 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
}`} }`}
onClick={() => { onClick={() => {
const e = new KeyboardEvent("keydown", { const e = new KeyboardEvent("keydown", {
ctrlKey: true,
key: "h", key: "h",
}); });
document.dispatchEvent(e); document.dispatchEvent(e);

3
apps/app/layouts/navbar/main-sidebar.tsx
View File

@ -98,7 +98,7 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
<WorkspaceOptions sidebarCollapse={sidebarCollapse} /> <WorkspaceOptions sidebarCollapse={sidebarCollapse} />
<ProjectsList navigation={navigation} sidebarCollapse={sidebarCollapse} /> <ProjectsList navigation={navigation} sidebarCollapse={sidebarCollapse} />
<div <div
className={`flex w-full items-center self-baseline bg-primary px-2 py-2 ${ className={`flex w-full items-center justify-between self-baseline bg-primary px-2 py-2 ${
sidebarCollapse ? "flex-col-reverse" : "" sidebarCollapse ? "flex-col-reverse" : ""
}`} }`}
> >
@ -129,7 +129,6 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
}`} }`}
onClick={() => { onClick={() => {
const e = new KeyboardEvent("keydown", { const e = new KeyboardEvent("keydown", {
ctrlKey: true,
key: "h", key: "h",
}); });
document.dispatchEvent(e); document.dispatchEvent(e);

6
apps/app/pages/[workspaceSlug]/me/my-issues.tsx
View File

@ -98,8 +98,7 @@ const MyIssuesPage: NextPage = () => {
label="Add Issue" label="Add Issue"
onClick={() => { onClick={() => {
const e = new KeyboardEvent("keydown", { const e = new KeyboardEvent("keydown", {
key: "i", key: "c",
ctrlKey: true,
}); });
document.dispatchEvent(e); document.dispatchEvent(e);
@ -170,8 +169,7 @@ const MyIssuesPage: NextPage = () => {
Icon={PlusIcon} Icon={PlusIcon}
action={() => { action={() => {
const e = new KeyboardEvent("keydown", { const e = new KeyboardEvent("keydown", {
key: "i", key: "c",
ctrlKey: true,
}); });
document.dispatchEvent(e); document.dispatchEvent(e);
}} }}

23
apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
View File

@ -92,6 +92,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
...issue.issue_detail, ...issue.issue_detail,
sub_issues_count: issue.sub_issues_count, sub_issues_count: issue.sub_issues_count,
bridge: issue.id, bridge: issue.id,
cycle: cycleId as string,
})); }));
const { data: members } = useSWR( const { data: members } = useSWR(
@ -124,17 +125,17 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
}; };
const handleAddIssuesToCycle = async (data: { issues: string[] }) => { const handleAddIssuesToCycle = async (data: { issues: string[] }) => {
if (workspaceSlug && projectId) { if (!workspaceSlug || !projectId) return;
await issuesServices
.addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, data) await issuesServices
.then((res) => { .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, data)
console.log(res); .then((res) => {
mutate(CYCLE_ISSUES(cycleId as string)); console.log(res);
}) mutate(CYCLE_ISSUES(cycleId as string));
.catch((e) => { })
console.log(e); .catch((e) => {
}); console.log(e);
} });
}; };
const removeIssueFromCycle = (bridgeId: string) => { const removeIssueFromCycle = (bridgeId: string) => {

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

@ -99,7 +99,6 @@ const ProjectCycles: NextPage = () => {
label="Add Cycle" label="Add Cycle"
onClick={() => { onClick={() => {
const e = new KeyboardEvent("keydown", { const e = new KeyboardEvent("keydown", {
ctrlKey: true,
key: "q", key: "q",
}); });
document.dispatchEvent(e); document.dispatchEvent(e);
@ -185,7 +184,6 @@ const ProjectCycles: NextPage = () => {
Icon={PlusIcon} Icon={PlusIcon}
action={() => { action={() => {
const e = new KeyboardEvent("keydown", { const e = new KeyboardEvent("keydown", {
ctrlKey: true,
key: "q", key: "q",
}); });
document.dispatchEvent(e); document.dispatchEvent(e);

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

@ -10,7 +10,7 @@ import { useForm } from "react-hook-form";
// services // services
import issuesService from "services/issues.service"; import issuesService from "services/issues.service";
// lib // lib
import { requiredAuth } from "lib/auth"; import { requiredAdmin, requiredAuth } from "lib/auth";
// layouts // layouts
import AppLayout from "layouts/app-layout"; import AppLayout from "layouts/app-layout";
// components // components
@ -25,7 +25,7 @@ import { Breadcrumbs } from "components/breadcrumbs";
// icons // icons
import { PlusIcon } from "@heroicons/react/24/outline"; import { PlusIcon } from "@heroicons/react/24/outline";
// types // types
import { IIssue, IssueResponse } from "types"; import { IIssue, IssueResponse, UserAuth } from "types";
import type { NextPage, NextPageContext } from "next"; import type { NextPage, NextPageContext } from "next";
// fetch-keys // fetch-keys
import { import {
@ -49,7 +49,7 @@ const defaultValues = {
labels_list: [], labels_list: [],
}; };
const IssueDetailsPage: NextPage = () => { const IssueDetailsPage: NextPage<UserAuth> = (props) => {
// states // states
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false); const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false);
@ -182,6 +182,8 @@ const IssueDetailsPage: NextPage = () => {
}); });
}; };
const isNotAllowed = props.isGuest || props.isViewer;
return ( return (
<AppLayout <AppLayout
noPadding={true} noPadding={true}
@ -267,7 +269,11 @@ const IssueDetailsPage: NextPage = () => {
</CustomMenu> </CustomMenu>
</div> </div>
) : null} ) : null}
<IssueDescriptionForm issue={issueDetails} handleFormSubmit={submitChanges} /> <IssueDescriptionForm
issue={issueDetails}
handleFormSubmit={submitChanges}
userAuth={props}
/>
<div className="mt-2"> <div className="mt-2">
{issueId && workspaceSlug && projectId && subIssues?.length > 0 ? ( {issueId && workspaceSlug && projectId && subIssues?.length > 0 ? (
<SubIssueList <SubIssueList
@ -276,41 +282,44 @@ const IssueDetailsPage: NextPage = () => {
projectId={projectId?.toString()} projectId={projectId?.toString()}
workspaceSlug={workspaceSlug?.toString()} workspaceSlug={workspaceSlug?.toString()}
handleSubIssueRemove={handleSubIssueRemove} handleSubIssueRemove={handleSubIssueRemove}
userAuth={props}
/> />
) : ( ) : (
<CustomMenu !isNotAllowed && (
label={ <CustomMenu
<> label={
<PlusIcon className="h-3 w-3" /> <>
Add sub-issue <PlusIcon className="h-3 w-3" />
</> Add sub-issue
} </>
optionsPosition="left" }
noBorder optionsPosition="left"
> noBorder
<CustomMenu.MenuItem
onClick={() => {
setIsOpen(true);
setPreloadedData({
parent: issueDetails.id,
actionType: "createIssue",
});
}}
> >
Create new <CustomMenu.MenuItem
</CustomMenu.MenuItem> onClick={() => {
<CustomMenu.MenuItem setIsOpen(true);
onClick={() => { setPreloadedData({
setIsAddAsSubIssueOpen(true); parent: issueDetails.id,
setPreloadedData({ actionType: "createIssue",
parent: issueDetails.id, });
actionType: "createIssue", }}
}); >
}} Create new
> </CustomMenu.MenuItem>
Add an existing issue <CustomMenu.MenuItem
</CustomMenu.MenuItem> onClick={() => {
</CustomMenu> setIsAddAsSubIssueOpen(true);
setPreloadedData({
parent: issueDetails.id,
actionType: "createIssue",
});
}}
>
Add an existing issue
</CustomMenu.MenuItem>
</CustomMenu>
)
)} )}
</div> </div>
</div> </div>
@ -329,6 +338,7 @@ const IssueDetailsPage: NextPage = () => {
issueDetail={issueDetails} issueDetail={issueDetails}
submitChanges={submitChanges} submitChanges={submitChanges}
watch={watch} watch={watch}
userAuth={props}
/> />
</div> </div>
</div> </div>
@ -366,9 +376,17 @@ export const getServerSideProps = async (ctx: NextPageContext) => {
}; };
} }
const projectId = ctx.query.projectId as string;
const workspaceSlug = ctx.query.workspaceSlug as string;
const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie);
return { return {
props: { props: {
user, isOwner: memberDetail?.role === 20,
isMember: memberDetail?.role === 15,
isViewer: memberDetail?.role === 10,
isGuest: memberDetail?.role === 5,
}, },
}; };
}; };

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

@ -22,7 +22,7 @@ import View from "components/core/view";
import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton } from "components/ui"; import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// types // types
import type { IIssue, IssueResponse, UserAuth } from "types"; import type { IIssue, UserAuth } from "types";
import type { NextPage, NextPageContext } from "next"; import type { NextPage, NextPageContext } from "next";
// fetch-keys // fetch-keys
import { PROJECT_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys"; import { PROJECT_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
@ -85,8 +85,7 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
label="Add Issue" label="Add Issue"
onClick={() => { onClick={() => {
const e = new KeyboardEvent("keydown", { const e = new KeyboardEvent("keydown", {
key: "i", key: "c",
ctrlKey: true,
}); });
document.dispatchEvent(e); document.dispatchEvent(e);
}} }}

21
apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View File

@ -125,18 +125,19 @@ const SingleModule: React.FC<UserAuth> = (props) => {
...issue.issue_detail, ...issue.issue_detail,
sub_issues_count: issue.sub_issues_count, sub_issues_count: issue.sub_issues_count,
bridge: issue.id, bridge: issue.id,
module: moduleId as string,
})); }));
const handleAddIssuesToModule = (data: { issues: string[] }) => { const handleAddIssuesToModule = async (data: { issues: string[] }) => {
if (workspaceSlug && projectId) { if (!workspaceSlug || !projectId) return;
modulesService
.addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, data) await modulesService
.then((res) => { .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, data)
console.log(res); .then((res) => {
mutate(MODULE_ISSUES(moduleId as string)); console.log(res);
}) mutate(MODULE_ISSUES(moduleId as string));
.catch((e) => console.log(e)); })
} .catch((e) => console.log(e));
}; };
const openCreateIssueModal = ( const openCreateIssueModal = (

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

@ -58,7 +58,6 @@ const ProjectModules: NextPage = () => {
label="Add Module" label="Add Module"
onClick={() => { onClick={() => {
const e = new KeyboardEvent("keydown", { const e = new KeyboardEvent("keydown", {
ctrlKey: true,
key: "m", key: "m",
}); });
document.dispatchEvent(e); document.dispatchEvent(e);
@ -93,7 +92,6 @@ const ProjectModules: NextPage = () => {
Icon={PlusIcon} Icon={PlusIcon}
action={() => { action={() => {
const e = new KeyboardEvent("keydown", { const e = new KeyboardEvent("keydown", {
ctrlKey: true,
key: "m", key: "m",
}); });
document.dispatchEvent(e); document.dispatchEvent(e);

16
apps/app/pages/[workspaceSlug]/projects/index.tsx
View File

@ -2,9 +2,10 @@ import React, { useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { mutate } from "swr"; import { mutate } from "swr";
// services // services
import { ClipboardDocumentListIcon, PlusIcon } from "@heroicons/react/24/outline";
import type { NextPage } from "next";
import projectService from "services/project.service"; import projectService from "services/project.service";
// hooks
import useProjects from "hooks/use-projects";
import useWorkspaces from "hooks/use-workspaces";
// layouts // layouts
import AppLayout from "layouts/app-layout"; import AppLayout from "layouts/app-layout";
// components // components
@ -15,11 +16,10 @@ import ConfirmProjectDeletion from "components/project/confirm-project-deletion"
import { HeaderButton, EmptySpace, EmptySpaceItem, Loader } from "components/ui"; import { HeaderButton, EmptySpace, EmptySpaceItem, Loader } from "components/ui";
import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs"; import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
// icons // icons
// hooks import { ClipboardDocumentListIcon, PlusIcon } from "@heroicons/react/24/outline";
import useProjects from "hooks/use-projects";
import useWorkspaces from "hooks/use-workspaces";
// types // types
// constants import type { NextPage } from "next";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";
const ProjectsPage: NextPage = () => { const ProjectsPage: NextPage = () => {
@ -45,7 +45,7 @@ const ProjectsPage: NextPage = () => {
Icon={PlusIcon} Icon={PlusIcon}
label="Add Project" label="Add Project"
onClick={() => { onClick={() => {
const e = new KeyboardEvent("keydown", { key: "p", ctrlKey: true }); const e = new KeyboardEvent("keydown", { key: "p" });
document.dispatchEvent(e); document.dispatchEvent(e);
}} }}
/> />
@ -94,7 +94,7 @@ const ProjectsPage: NextPage = () => {
} }
Icon={PlusIcon} Icon={PlusIcon}
action={() => { action={() => {
const e = new KeyboardEvent("keydown", { key: "p", ctrlKey: true }); const e = new KeyboardEvent("keydown", { key: "p" });
document.dispatchEvent(e); document.dispatchEvent(e);
}} }}
/> />

37
apps/app/pages/[workspaceSlug]/settings/index.tsx
View File

@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
// react-hook-form // react-hook-form
@ -157,24 +158,24 @@ const WorkspaceSettings: NextPage<TWorkspaceSettingsProps> = (props) => {
{({ getRootProps, getInputProps }) => ( {({ getRootProps, getInputProps }) => (
<div> <div>
<input {...getInputProps()} /> <input {...getInputProps()} />
<div> <div {...getRootProps()}>
<div {(watch("logo") && watch("logo") !== null && watch("logo") !== "") ||
className="grid w-16 place-items-center rounded-md border p-2" (image && image !== null) ? (
{...getRootProps()} <div className="relative mx-auto flex h-12 w-12">
> <Image
{((watch("logo") && watch("logo") !== null && watch("logo") !== "") || src={image ? URL.createObjectURL(image) : watch("logo") ?? ""}
(image && image !== null)) && ( alt="Workspace Logo"
<div className="relative mx-auto flex h-12 w-12"> objectFit="cover"
<Image layout="fill"
src={image ? URL.createObjectURL(image) : watch("logo") ?? ""} className="rounded-md"
alt="Workspace Logo" priority
objectFit="cover" />
layout="fill" </div>
priority ) : (
/> <div className="relative flex h-12 w-12 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
</div> {activeWorkspace?.name?.charAt(0) ?? "N"}
)} </div>
</div> )}
</div> </div>
</div> </div>
)} )}

35
apps/app/pages/create-workspace/index.tsx → apps/app/pages/create-workspace.tsx
View File

@ -1,12 +1,16 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Image from "next/image"; import Image from "next/image";
import { mutate } from "swr"; import { mutate } from "swr";
// react-hook-form
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// services // services
import type { IWorkspace } from "types";
import type { NextPage, NextPageContext } from "next";
import workspaceService from "services/workspace.service"; import workspaceService from "services/workspace.service";
// hooks
import useToast from "hooks/use-toast";
// constants // constants
import { requiredAuth } from "lib/auth"; import { requiredAuth } from "lib/auth";
// layouts // layouts
@ -15,8 +19,11 @@ import DefaultLayout from "layouts/default-layout";
import { CustomSelect, Input } from "components/ui"; import { CustomSelect, Input } from "components/ui";
// images // images
import Logo from "public/onboarding/logo.svg"; import Logo from "public/onboarding/logo.svg";
import { USER_WORKSPACES } from "constants/fetch-keys";
// types // types
import type { IWorkspace } from "types";
import type { NextPage, NextPageContext } from "next";
// fetch-keys
import { USER_WORKSPACES } from "constants/fetch-keys";
// constants // constants
import { companySize } from "constants/"; import { companySize } from "constants/";
@ -29,6 +36,10 @@ const defaultValues = {
const CreateWorkspace: NextPage = () => { const CreateWorkspace: NextPage = () => {
const [slugError, setSlugError] = useState(false); const [slugError, setSlugError] = useState(false);
const router = useRouter();
const { setToastAlert } = useToast();
const { const {
register, register,
handleSubmit, handleSubmit,
@ -39,18 +50,22 @@ const CreateWorkspace: NextPage = () => {
formState: { errors, isSubmitting }, formState: { errors, isSubmitting },
} = useForm<IWorkspace>({ defaultValues }); } = useForm<IWorkspace>({ defaultValues });
const router = useRouter();
const onSubmit = async (formData: IWorkspace) => { const onSubmit = async (formData: IWorkspace) => {
await workspaceService await workspaceService
.workspaceSlugCheck(formData.slug) .workspaceSlugCheck(formData.slug)
.then((res) => { .then(async (res) => {
if (res.status === true) { if (res.status === true) {
workspaceService setSlugError(false);
await workspaceService
.createWorkspace(formData) .createWorkspace(formData)
.then((res) => { .then((res) => {
router.push("/"); setToastAlert({
type: "success",
title: "Success!",
message: "Workspace created successfully.",
});
mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) => [res, ...(prevData ?? [])]); mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) => [res, ...(prevData ?? [])]);
router.push(`/${formData.slug}`);
}) })
.catch((err) => { .catch((err) => {
console.error(err); console.error(err);
@ -105,11 +120,11 @@ const CreateWorkspace: NextPage = () => {
<div className="flex items-center rounded-md border border-gray-300 px-3"> <div className="flex items-center rounded-md border border-gray-300 px-3">
<span className="text-sm text-slate-600">{"https://app.plane.so/"}</span> <span className="text-sm text-slate-600">{"https://app.plane.so/"}</span>
<Input <Input
mode="transparent" mode="trueTransparent"
autoComplete="off" autoComplete="off"
name="slug" name="slug"
register={register} register={register}
className="block w-full rounded-md bg-transparent py-2 px-0 text-sm focus:outline-none focus:ring-0" className="block w-full rounded-md bg-transparent py-2 px-0 text-sm"
/> />
</div> </div>
{slugError && ( {slugError && (

4
apps/app/types/modules.d.ts vendored
View File

@ -8,9 +8,9 @@ export interface IModule {
description_html: any; description_html: any;
id: string; id: string;
lead: string | null; lead: string | null;
lead_detail: IUserLite; lead_detail: IUserLite | null;
link_module: { link_module: {
created_at: Date created_at: Date;
created_by: string; created_by: string;
created_by_detail: IUserLite; created_by_detail: IUserLite;
id: string; id: string;