mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
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:
parent
848fb2b960
commit
7e92efee23
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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]"
|
||||
/>
|
||||
)}
|
||||
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -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({
|
||||
|
@ -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 && (
|
||||
|
@ -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}
|
||||
/>
|
||||
)}
|
||||
|
@ -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}
|
||||
/>
|
||||
)}
|
||||
|
@ -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[]>(
|
||||
|
@ -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 ? (
|
||||
<>
|
||||
|
@ -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 ? (
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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 ? (
|
||||
|
@ -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") !== ""
|
||||
? `${
|
||||
|
@ -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;
|
||||
|
@ -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 ? (
|
||||
|
@ -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}
|
||||
/>
|
||||
)}
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
@ -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>
|
||||
)}
|
||||
/>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
) : (
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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}
|
||||
/>
|
||||
);
|
||||
|
@ -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" : ""
|
||||
|
2
apps/app/components/ui/input/types.d.ts
vendored
2
apps/app/components/ui/input/types.d.ts
vendored
@ -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;
|
||||
|
@ -88,7 +88,6 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
|
||||
}`}
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", {
|
||||
ctrlKey: true,
|
||||
key: "h",
|
||||
});
|
||||
document.dispatchEvent(e);
|
||||
|
@ -129,7 +129,6 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
|
||||
}`}
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", {
|
||||
ctrlKey: true,
|
||||
key: "h",
|
||||
});
|
||||
document.dispatchEvent(e);
|
||||
|
@ -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);
|
||||
}}
|
||||
|
@ -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) => {
|
||||
|
@ -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);
|
||||
|
@ -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,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
@ -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);
|
||||
}}
|
||||
|
@ -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 = (
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
}}
|
||||
/>
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -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 && (
|
4
apps/app/types/modules.d.ts
vendored
4
apps/app/types/modules.d.ts
vendored
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user