fix: header buttons not working (#228)

fix:

header buttons not working.
sub-issues mutation.
customized the datepicker.
mutation in the list and kanban view.
some icons not displaying.
fixed routing and added toast alert after creating a workspace.
workspace logo display design in workspace settings.
delete issue mutation error in cycles and modules.

feat:

added authorization to issue details page.
This commit is contained in:
Aaryan Khandelwal 2023-02-01 20:33:18 +05:30 committed by GitHub
parent 848fb2b960
commit 7e92efee23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 887 additions and 736 deletions

View File

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

View File

@ -5,9 +5,6 @@ import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// react-datepicker
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
// services
import issuesService from "services/issues.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";
// components
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
// icons
import { CalendarDaysIcon } from "@heroicons/react/24/outline";
// helpers
import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
import { addSpaceIfCamelCase } from "helpers/string.helper";
// types
import { IIssue, IWorkspaceMember, Properties, UserAuth } from "types";
import {
CycleIssueResponse,
IIssue,
IssueResponse,
IWorkspaceMember,
ModuleIssueResponse,
Properties,
UserAuth,
} from "types";
// fetch-keys
import {
CYCLE_ISSUES,
@ -76,6 +79,60 @@ const SingleListIssue: React.FC<Props> = ({
const partialUpdateIssue = (formData: Partial<IIssue>) => {
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
.patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
.then((res) => {
@ -255,44 +312,24 @@ const SingleListIssue: React.FC<Props> = ({
<CustomDatePicker
placeholder="N/A"
value={issue?.target_date}
onChange={(val: Date) => {
onChange={(val) =>
partialUpdateIssue({
target_date: val
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
: null,
});
}}
target_date: val,
})
}
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">
<h5 className="mb-1 font-medium text-gray-900">Due date</h5>
<div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
<div>
{issue.target_date &&
(issue.target_date < new Date().toISOString()
{issue.target_date
? issue.target_date < new Date().toISOString()
? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
: findHowManyDaysLeft(issue.target_date) <= 3
? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
: "Due date")}
: "Due date"
: "N/A"}
</div>
</div>
</div>

View File

@ -47,10 +47,10 @@ const View: React.FC<Props> = ({ issues }) => {
);
return (
<div className="flex items-center gap-2">
<div className="flex items-center gap-x-1">
{issues && (
<>
<>
{issues && issues.length > 0 && (
<div className="flex items-center gap-2">
<div className="flex items-center gap-x-1">
<button
type="button"
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" />
</button>
</>
)}
</div>
<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 ${
open ? "bg-gray-100 text-gray-900" : "text-gray-500"
}`}
>
<span>View</span>
<ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
</Popover.Button>
</div>
<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 ${
open ? "bg-gray-100 text-gray-900" : "text-gray-500"
}`}
>
<span>View</span>
<ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
</Popover.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
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">
<div className="relative divide-y-2">
{issues && (
<div className="space-y-4 pb-3">
<div className="flex items-center justify-between">
<h4 className="text-sm text-gray-600">Group by</h4>
<CustomMenu
label={
groupByOptions.find((option) => option.key === groupByProperty)?.name ??
"Select"
}
width="lg"
>
{groupByOptions.map((option) => (
<CustomMenu.MenuItem
key={option.key}
onClick={() => setGroupByProperty(option.key)}
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
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">
<div className="relative divide-y-2">
{issues && (
<div className="space-y-4 pb-3">
<div className="flex items-center justify-between">
<h4 className="text-sm text-gray-600">Group by</h4>
<CustomMenu
label={
groupByOptions.find((option) => option.key === groupByProperty)
?.name ?? "Select"
}
width="lg"
>
{option.name}
</CustomMenu.MenuItem>
))}
</CustomMenu>
</div>
<div className="flex items-center justify-between">
<h4 className="text-sm text-gray-600">Order by</h4>
<CustomMenu
label={
orderByOptions.find((option) => option.key === orderBy)?.name ??
"Select"
}
width="lg"
>
{orderByOptions.map((option) =>
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)}
{groupByOptions.map((option) => (
<CustomMenu.MenuItem
key={option.key}
onClick={() => setGroupByProperty(option.key)}
>
{option.name}
</CustomMenu.MenuItem>
))}
</CustomMenu>
</div>
<div className="flex items-center justify-between">
<h4 className="text-sm text-gray-600">Order by</h4>
<CustomMenu
label={
orderByOptions.find((option) => option.key === orderBy)?.name ??
"Select"
}
width="lg"
>
{option.name}
</CustomMenu.MenuItem>
{orderByOptions.map((option) =>
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 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 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>
))}
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
)}
</>
);
};

View File

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

View File

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

View File

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

View File

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

View File

@ -55,15 +55,17 @@ const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
const handleCreateWorkspace = async (formData: IWorkspace) => {
await workspaceService
.workspaceSlugCheck(formData.slug)
.then((res) => {
.then(async (res) => {
if (res.status === true) {
workspaceService
setSlugError(false);
await workspaceService
.createWorkspace(formData)
.then((res) => {
console.log(res);
setToastAlert({
type: "success",
title: "Workspace created successfully!",
title: "Success!",
message: "Workspace created successfully.",
});
setWorkspace(res);
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>
<Input
name="slug"
mode="transparent"
mode="trueTransparent"
autoComplete="off"
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>
{slugError && (

View File

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

View File

@ -1,6 +1,7 @@
import { useEffect } from "react";
import { useRouter } from "next/router";
import Image from "next/image";
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" />
<p>Owned by</p>
</div>
<div className="sm:basis-1/2">
{cycle.owned_by.first_name !== "" ? (
<>
{cycle.owned_by.first_name} {cycle.owned_by.last_name}
</>
) : (
cycle.owned_by.email
)}
<div className="sm:basis-1/2 flex items-center gap-1">
{cycle.owned_by &&
(cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
<div className="h-5 w-5 rounded-full border-2 border-transparent">
<Image
src={cycle.owned_by.avatar}
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 className="flex flex-wrap items-center py-2">
@ -171,13 +186,11 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
render={({ field: { value } }) => (
<CustomDatePicker
value={value}
onChange={(val: Date) => {
onChange={(val) =>
submitChanges({
start_date: val
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
: null,
});
}}
start_date: val,
})
}
isClearable={false}
/>
)}
@ -196,13 +209,11 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
render={({ field: { value } }) => (
<CustomDatePicker
value={value}
onChange={(val: Date) => {
onChange={(val) =>
submitChanges({
end_date: val
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
: null,
});
}}
end_date: val,
})
}
isClearable={false}
/>
)}

View File

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

View File

@ -39,7 +39,7 @@ import {
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
// types
import type { ICycle, IIssue, IIssueLabels } from "types";
import type { ICycle, IIssue, IIssueLabels, UserAuth } from "types";
// 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;
issueDetail: IIssue | undefined;
watch: UseFormWatch<IIssue>;
userAuth: UserAuth;
};
const defaultValues: Partial<IIssueLabels> = {
@ -62,6 +63,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
submitChanges,
issueDetail,
watch: watchIssue,
userAuth,
}) => {
const [createLabelForm, setCreateLabelForm] = useState(false);
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
@ -122,6 +124,8 @@ const IssueDetailSidebar: React.FC<Props> = ({
});
};
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<>
<ConfirmIssueDeletion
@ -158,20 +162,22 @@ const IssueDetailSidebar: React.FC<Props> = ({
>
<LinkIcon className="h-3.5 w-3.5" />
</button>
<button
type="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"
onClick={() => setDeleteIssueModal(true)}
>
<TrashIcon className="h-3.5 w-3.5" />
</button>
{!isNotAllowed && (
<button
type="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"
onClick={() => setDeleteIssueModal(true)}
>
<TrashIcon className="h-3.5 w-3.5" />
</button>
)}
</div>
</div>
<div className="divide-y-2 divide-gray-100">
<div className="py-1">
<SelectState control={control} submitChanges={submitChanges} />
<SelectAssignee control={control} submitChanges={submitChanges} />
<SelectPriority control={control} submitChanges={submitChanges} watch={watchIssue} />
<SelectState control={control} submitChanges={submitChanges} userAuth={userAuth} />
<SelectAssignee control={control} submitChanges={submitChanges} userAuth={userAuth} />
<SelectPriority control={control} submitChanges={submitChanges} userAuth={userAuth} />
</div>
<div className="py-1">
<SelectParent
@ -202,16 +208,19 @@ const IssueDetailSidebar: React.FC<Props> = ({
)
}
watch={watchIssue}
userAuth={userAuth}
/>
<SelectBlocker
submitChanges={submitChanges}
issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
watch={watchIssue}
userAuth={userAuth}
/>
<SelectBlocked
submitChanges={submitChanges}
issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
watch={watchIssue}
userAuth={userAuth}
/>
<div className="flex flex-wrap items-center py-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>
</div>
<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
control={control}
name="target_date"
render={({ field: { value } }) => (
<CustomDatePicker
value={value}
onChange={(val: Date) => {
onChange={(val) =>
submitChanges({
target_date: val
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
: null,
});
}}
target_date: val,
})
}
disabled={isNotAllowed}
/>
)}
/>
@ -260,7 +250,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
<SelectCycle
issueDetail={issueDetail}
handleCycleChange={handleCycleChange}
watch={watchIssue}
userAuth={userAuth}
/>
</div>
</div>
@ -290,7 +280,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
>
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{ backgroundColor: singleLabel.colour ?? "green" }}
style={{ backgroundColor: singleLabel?.colour ?? "green" }}
/>
{singleLabel.name}
<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 })}
className="flex-shrink-0"
multiple
disabled={isNotAllowed}
>
{({ open }) => (
<>
<Listbox.Label className="sr-only">Label</Listbox.Label>
<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
</Listbox.Button>
@ -361,8 +358,11 @@ const IssueDetailSidebar: React.FC<Props> = ({
/>
<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)}
disabled={isNotAllowed}
>
{createLabelForm ? (
<>

View File

@ -5,29 +5,29 @@ import { useRouter } from "next/router";
import useSWR from "swr";
// react-hook-form
import { Control, Controller } from "react-hook-form";
// services
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// services
import { UserGroupIcon } from "@heroicons/react/24/outline";
import workspaceService from "services/workspace.service";
// hooks
// headless ui
// ui
import { AssigneesList } from "components/ui/avatar";
import { Spinner } from "components/ui";
// icons
import User from "public/user.png";
// types
import { IIssue } from "types";
import { IIssue, UserAuth } from "types";
// constants
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
type Props = {
control: Control<IIssue, any>;
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 { workspaceSlug } = router.query;
@ -36,6 +36,8 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
);
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<div className="flex flex-wrap items-center py-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 });
}}
className="flex-shrink-0"
disabled={isNotAllowed}
>
{({ open }) => (
<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
className={`hidden truncate text-left sm:block ${
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) ? (
<AssigneesList userIds={value} length={10} />
) : null}
@ -82,7 +89,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
leaveFrom="transform opacity-100 scale-100"
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">
{people ? (
people.length > 0 ? (

View File

@ -19,7 +19,7 @@ import { Button } from "components/ui";
import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { BlockedIcon, LayerDiagonalIcon } from "components/icons";
// types
import { IIssue } from "types";
import { IIssue, UserAuth } from "types";
// fetch-keys
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
@ -31,9 +31,10 @@ type Props = {
submitChanges: (formData: Partial<IIssue>) => void;
issuesList: 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 [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
@ -95,6 +96,8 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
.includes(query.toLowerCase())
);
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<div className="flex flex-wrap items-start py-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>
<div className="flex items-center justify-end gap-2 p-3">
<div>
<Button type="button" theme="secondary" size="sm" onClick={handleClose}>
Close
{filteredIssues.length > 0 && (
<div className="flex items-center justify-end gap-2 p-3">
<div>
<Button type="button" theme="secondary" size="sm" onClick={handleClose}>
Close
</Button>
</div>
<Button onClick={handleSubmit(onSubmit)} size="sm">
Add selected issues
</Button>
</div>
<Button onClick={handleSubmit(onSubmit)} size="sm">
Add selected issues
</Button>
</div>
)}
</form>
</Dialog.Panel>
</Transition.Child>
@ -284,8 +289,11 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
</Transition.Root>
<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)}
disabled={isNotAllowed}
>
Select issues
</button>

View File

@ -19,7 +19,7 @@ import { Button } from "components/ui";
import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { BlockerIcon, LayerDiagonalIcon } from "components/icons";
// types
import { IIssue } from "types";
import { IIssue, UserAuth } from "types";
// fetch-keys
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
@ -31,9 +31,10 @@ type Props = {
submitChanges: (formData: Partial<IIssue>) => void;
issuesList: 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 [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
@ -95,6 +96,8 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
.includes(query.toLowerCase())
);
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<div className="flex flex-wrap items-start py-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>
<div className="flex items-center justify-end gap-2 p-3">
<div>
<Button type="button" theme="secondary" size="sm" onClick={handleClose}>
Close
{filteredIssues.length > 0 && (
<div className="flex items-center justify-end gap-2 p-3">
<div>
<Button type="button" theme="secondary" size="sm" onClick={handleClose}>
Close
</Button>
</div>
<Button onClick={handleSubmit(onSubmit)} size="sm">
Add selected issues
</Button>
</div>
<Button onClick={handleSubmit(onSubmit)} size="sm">
Add selected issues
</Button>
</div>
)}
</Dialog.Panel>
</Transition.Child>
</div>
@ -282,8 +287,11 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
</Transition.Root>
<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)}
disabled={isNotAllowed}
>
Select issues
</button>

View File

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

View File

@ -13,7 +13,7 @@ import issuesServices from "services/issues.service";
import IssuesListModal from "components/project/issues/issues-list-modal";
// icons
// types
import { IIssue } from "types";
import { IIssue, UserAuth } from "types";
// fetch-keys
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
@ -23,6 +23,7 @@ type Props = {
issuesList: IIssue[];
customDisplay: JSX.Element;
watch: UseFormWatch<IIssue>;
userAuth: UserAuth;
};
const SelectParent: React.FC<Props> = ({
@ -31,6 +32,7 @@ const SelectParent: React.FC<Props> = ({
issuesList,
customDisplay,
watch,
userAuth,
}) => {
const [isParentModalOpen, setIsParentModalOpen] = useState(false);
@ -46,6 +48,8 @@ const SelectParent: React.FC<Props> = ({
: null
);
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<div className="flex flex-wrap items-center py-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
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)}
disabled={isNotAllowed}
>
{watch("parent") && watch("parent") !== ""
? `${

View File

@ -7,7 +7,7 @@ import { ChartBarIcon } from "@heroicons/react/24/outline";
import { CustomSelect } from "components/ui";
// icons
// types
import { IIssue } from "types";
import { IIssue, UserAuth } from "types";
// common
// constants
import { getPriorityIcon } from "constants/global";
@ -16,52 +16,54 @@ import { PRIORITIES } from "constants/";
type Props = {
control: Control<IIssue, any>;
submitChanges: (formData: Partial<IIssue>) => void;
watch: UseFormWatch<IIssue>;
userAuth: UserAuth;
};
const SelectPriority: React.FC<Props> = ({ control, submitChanges, watch }) => (
<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>
const SelectPriority: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<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 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;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -12,7 +12,7 @@ import { UserGroupIcon } from "@heroicons/react/24/outline";
import workspaceService from "services/workspace.service";
// headless ui
// ui
import { AssigneesList, Spinner } from "components/ui";
import { AssigneesList } from "components/ui";
// types
import { IModule } from "types";
// constants
@ -78,7 +78,7 @@ const SelectMembers: React.FC<Props> = ({ control, submitChanges }) => {
leaveFrom="transform opacity-100 scale-100"
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">
{people ? (
people.length > 0 ? (
@ -118,7 +118,7 @@ const SelectMembers: React.FC<Props> = ({ control, submitChanges }) => {
<div className="text-center">No members found</div>
)
) : (
<Spinner />
<p className="text-xs text-gray-500 px-2">Loading...</p>
)}
</div>
</Listbox.Options>

View File

@ -88,7 +88,7 @@ export const ProjectSidebarList: FC = () => {
}`}
>
{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))}
</span>
) : (

View File

@ -39,8 +39,8 @@ const CustomSelect = ({
<div>
<Listbox.Button
className={`flex w-full ${
disabled ? "cursor-not-allowed" : "cursor-pointer"
} 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 ${
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} 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"
} ${
textAlignment === "right"
@ -51,7 +51,7 @@ const CustomSelect = ({
}`}
>
{label}
{!noChevron && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
{!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
</Listbox.Button>
</div>

View File

@ -5,12 +5,13 @@ import "react-datepicker/dist/react-datepicker.css";
type Props = {
renderAs?: "input" | "button";
value: Date | string | null | undefined;
onChange: (arg: Date) => void;
onChange: (val: string | null) => void;
placeholder?: string;
displayShortForm?: boolean;
error?: boolean;
className?: string;
isClearable?: boolean;
disabled?: boolean;
};
export const CustomDatePicker: React.FC<Props> = ({
@ -22,19 +23,37 @@ export const CustomDatePicker: React.FC<Props> = ({
error = false,
className = "",
isClearable = true,
disabled = false,
}) => (
<DatePicker
placeholderText={placeholder}
selected={value ? new Date(value) : null}
onChange={onChange}
dateFormat="dd-MM-yyyy"
onChange={(val) => {
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} ${
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"
? "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}
disabled={disabled}
/>
);

View File

@ -39,6 +39,8 @@ export const Input: React.FC<Props> = ({
? "rounded-md border border-gray-300"
: mode === "transparent"
? "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" : ""} ${
fullWidth ? "w-full" : ""

View File

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

View File

@ -88,7 +88,6 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
}`}
onClick={() => {
const e = new KeyboardEvent("keydown", {
ctrlKey: true,
key: "h",
});
document.dispatchEvent(e);

View File

@ -129,7 +129,6 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
}`}
onClick={() => {
const e = new KeyboardEvent("keydown", {
ctrlKey: true,
key: "h",
});
document.dispatchEvent(e);

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,12 +1,16 @@
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import Image from "next/image";
import { mutate } from "swr";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// services
import type { IWorkspace } from "types";
import type { NextPage, NextPageContext } from "next";
import workspaceService from "services/workspace.service";
// hooks
import useToast from "hooks/use-toast";
// constants
import { requiredAuth } from "lib/auth";
// layouts
@ -15,8 +19,11 @@ import DefaultLayout from "layouts/default-layout";
import { CustomSelect, Input } from "components/ui";
// images
import Logo from "public/onboarding/logo.svg";
import { USER_WORKSPACES } from "constants/fetch-keys";
// types
import type { IWorkspace } from "types";
import type { NextPage, NextPageContext } from "next";
// fetch-keys
import { USER_WORKSPACES } from "constants/fetch-keys";
// constants
import { companySize } from "constants/";
@ -29,6 +36,10 @@ const defaultValues = {
const CreateWorkspace: NextPage = () => {
const [slugError, setSlugError] = useState(false);
const router = useRouter();
const { setToastAlert } = useToast();
const {
register,
handleSubmit,
@ -39,18 +50,22 @@ const CreateWorkspace: NextPage = () => {
formState: { errors, isSubmitting },
} = useForm<IWorkspace>({ defaultValues });
const router = useRouter();
const onSubmit = async (formData: IWorkspace) => {
await workspaceService
.workspaceSlugCheck(formData.slug)
.then((res) => {
.then(async (res) => {
if (res.status === true) {
workspaceService
setSlugError(false);
await workspaceService
.createWorkspace(formData)
.then((res) => {
router.push("/");
setToastAlert({
type: "success",
title: "Success!",
message: "Workspace created successfully.",
});
mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) => [res, ...(prevData ?? [])]);
router.push(`/${formData.slug}`);
})
.catch((err) => {
console.error(err);
@ -105,11 +120,11 @@ const CreateWorkspace: NextPage = () => {
<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>
<Input
mode="transparent"
mode="trueTransparent"
autoComplete="off"
name="slug"
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>
{slugError && (

View File

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