fix: bug fixes (#2581)

* fix: module sidebar fix for kanban layout

* chore: cycle & module sidebar improvement

* chore: join project content updated

* chore: project empty state header fix

* chore: create project modal dropdown consistency

* chore: list view group header overlapping issue fix

* chore: popover code refactor

* chore: module sidebar fix for cycle kanban view

* chore: add existing issue option added in module empty state

* chore: add existing issue option added in cycle empty state
This commit is contained in:
Anmol Singh Bhatia 2023-11-01 17:11:07 +05:30 committed by GitHub
parent 13ead7c314
commit 548e95c7e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 229 additions and 157 deletions

View File

@ -7,14 +7,19 @@ export const CircleDotFullIcon: React.FC<ISvgIcons> = ({
...rest ...rest
}) => ( }) => (
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 16 16"
className={`${className} stroke-2`} className={`${className} stroke-1`}
stroke="currentColor"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...rest} {...rest}
> >
<circle cx="8.33333" cy="8.33333" r="5.33333" stroke-linecap="round" /> <circle
cx="8.33333"
cy="8.33333"
r="5.33333"
stroke="currentColor"
stroke-linecap="round"
/>
<circle cx="8.33333" cy="8.33333" r="4.33333" fill="currentColor" /> <circle cx="8.33333" cy="8.33333" r="4.33333" fill="currentColor" />
</svg> </svg>
); );

View File

@ -3,7 +3,7 @@ import React from "react";
import Image from "next/image"; import Image from "next/image";
// ui // ui
import { PrimaryButton } from "components/ui"; import { Button } from "@plane/ui";
type Props = { type Props = {
title: string; title: string;
@ -33,10 +33,14 @@ export const EmptyState: React.FC<Props> = ({
{description && <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>} {description && <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>}
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{primaryButton && ( {primaryButton && (
<PrimaryButton className="flex items-center gap-1.5" onClick={primaryButton.onClick} disabled={disabled}> <Button
{primaryButton.icon} variant="primary"
prependIcon={primaryButton.icon}
onClick={primaryButton.onClick}
disabled={disabled}
>
{primaryButton.text} {primaryButton.text}
</PrimaryButton> </Button>
)} )}
{secondaryButton} {secondaryButton}
</div> </div>

View File

@ -383,41 +383,39 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
</Popover> </Popover>
<MoveRight className="h-4 w-4 text-custom-text-300" /> <MoveRight className="h-4 w-4 text-custom-text-300" />
<Popover className="flex h-full items-center justify-center rounded-lg"> <Popover className="flex h-full items-center justify-center rounded-lg">
{({}) => ( <>
<> <Popover.Button
<Popover.Button disabled={isCompleted ?? false}
disabled={isCompleted ?? false} className="text-sm text-custom-text-300 font-medium cursor-default"
className="text-sm text-custom-text-300 font-medium cursor-default" >
> {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} </Popover.Button>
</Popover.Button>
<Transition <Transition
as={React.Fragment} as={React.Fragment}
enter="transition ease-out duration-200" enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1" enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150" leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden"> <Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
<CustomRangeDatePicker <CustomRangeDatePicker
value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date} value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
onChange={(val) => { onChange={(val) => {
if (val) { if (val) {
handleEndDateChange(val); handleEndDateChange(val);
} }
}} }}
startDate={watch("start_date") ? `${watch("start_date")}` : null} startDate={watch("start_date") ? `${watch("start_date")}` : null}
endDate={watch("end_date") ? `${watch("end_date")}` : null} endDate={watch("end_date") ? `${watch("end_date")}` : null}
minDate={new Date(`${watch("start_date")}`)} minDate={new Date(`${watch("start_date")}`)}
selectsEnd selectsEnd
/> />
</Popover.Panel> </Popover.Panel>
</Transition> </Transition>
</> </>
)}
</Popover> </Popover>
</div> </div>
</div> </div>
@ -459,7 +457,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<Disclosure> <Disclosure>
{({ open }) => ( {({ open }) => (
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}> <div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
<div className="flex w-full items-center justify-between gap-2"> <Disclosure.Button
className="flex w-full items-center justify-between gap-2 p-1.5"
disabled={!isStartValid || !isEndValid}
>
<div className="flex items-center justify-start gap-2 text-sm"> <div className="flex items-center justify-start gap-2 text-sm">
<span className="font-medium text-custom-text-200">Progress</span> <span className="font-medium text-custom-text-200">Progress</span>
</div> </div>
@ -473,12 +474,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
"" ""
)} )}
{isStartValid && isEndValid ? ( {isStartValid && isEndValid ? (
<Disclosure.Button className="p-1.5"> <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
<ChevronDown
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
aria-hidden="true"
/>
</Disclosure.Button>
) : ( ) : (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<AlertCircle height={14} width={14} className="text-custom-text-200" /> <AlertCircle height={14} width={14} className="text-custom-text-200" />
@ -488,7 +484,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
</div> </div>
)} )}
</div> </div>
</div> </Disclosure.Button>
<Transition show={open}> <Transition show={open}>
<Disclosure.Panel> <Disclosure.Panel>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">

View File

@ -10,10 +10,14 @@ import { observer } from "mobx-react-lite";
export const ProjectsHeader = observer(() => { export const ProjectsHeader = observer(() => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query;
// store // store
const { project: projectStore, workspace: workspaceStore } = useMobxStore(); const { project: projectStore, workspace: workspaceStore } = useMobxStore();
const currentWorkspace = workspaceStore.currentWorkspace; const currentWorkspace = workspaceStore.currentWorkspace;
const projectsList = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : [];
return ( return (
<div <div
className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`} className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
@ -29,15 +33,17 @@ export const ProjectsHeader = observer(() => {
</div> </div>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="flex w-full gap-1 items-center justify-start text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100"> {projectsList?.length > 0 && (
<Search className="h-3.5 w-3.5" /> <div className="flex w-full gap-1 items-center justify-start text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
<input <Search className="h-3.5 w-3.5" />
className="min-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none" <input
value={projectStore.searchQuery} className="min-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
onChange={(e) => projectStore.setSearchQuery(e.target.value)} value={projectStore.searchQuery}
placeholder="Search" onChange={(e) => projectStore.setSearchQuery(e.target.value)}
/> placeholder="Search"
</div> />
</div>
)}
<Button <Button
prependIcon={<Plus />} prependIcon={<Plus />}

View File

@ -3,8 +3,13 @@ import { PlusIcon } from "lucide-react";
import { EmptyState } from "components/common"; import { EmptyState } from "components/common";
// assets // assets
import emptyIssue from "public/empty-state/issue.svg"; import emptyIssue from "public/empty-state/issue.svg";
import { Button } from "@plane/ui";
export const CycleEmptyState: React.FC = () => ( type Props = {
openIssuesListModal: () => void;
};
export const CycleEmptyState: React.FC<Props> = ({ openIssuesListModal }) => (
<div className="h-full w-full grid place-items-center"> <div className="h-full w-full grid place-items-center">
<EmptyState <EmptyState
title="Cycle issues will appear here" title="Cycle issues will appear here"
@ -20,6 +25,14 @@ export const CycleEmptyState: React.FC = () => (
document.dispatchEvent(e); document.dispatchEvent(e);
}, },
}} }}
secondaryButton={
<Button
variant="neutral-primary"
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} onClick={openIssuesListModal} />}
>
Add an existing issue
</Button>
}
/> />
</div> </div>
); );

View File

@ -1,10 +1,15 @@
import { PlusIcon } from "lucide-react"; import { PlusIcon } from "lucide-react";
// components // components
import { EmptyState } from "components/common"; import { EmptyState } from "components/common";
import { Button } from "@plane/ui";
// assets // assets
import emptyIssue from "public/empty-state/issue.svg"; import emptyIssue from "public/empty-state/issue.svg";
export const ModuleEmptyState: React.FC = () => ( type Props = {
openIssuesListModal: () => void;
};
export const ModuleEmptyState: React.FC<Props> = ({ openIssuesListModal }) => (
<div className="h-full w-full grid place-items-center"> <div className="h-full w-full grid place-items-center">
<EmptyState <EmptyState
title="Module issues will appear here" title="Module issues will appear here"
@ -20,6 +25,15 @@ export const ModuleEmptyState: React.FC = () => (
document.dispatchEvent(e); document.dispatchEvent(e);
}, },
}} }}
secondaryButton={
<Button
variant="neutral-primary"
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
onClick={openIssuesListModal}
>
Add an existing issue
</Button>
}
/> />
</div> </div>
); );

View File

@ -18,7 +18,11 @@ import { TransferIssues, TransferIssuesModal } from "components/cycles";
// helpers // helpers
import { getDateRangeStatus } from "helpers/date-time.helper"; import { getDateRangeStatus } from "helpers/date-time.helper";
export const CycleLayoutRoot: React.FC = observer(() => { type Props = {
openIssuesListModal: () => void;
};
export const CycleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal }) => {
const [transferIssuesModal, setTransferIssuesModal] = useState(false); const [transferIssuesModal, setTransferIssuesModal] = useState(false);
const router = useRouter(); const router = useRouter();
@ -60,7 +64,7 @@ export const CycleLayoutRoot: React.FC = observer(() => {
{cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />} {cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
<CycleAppliedFiltersRoot /> <CycleAppliedFiltersRoot />
{(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? ( {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
<CycleEmptyState /> <CycleEmptyState openIssuesListModal={openIssuesListModal} />
) : ( ) : (
<div className="w-full h-full overflow-auto"> <div className="w-full h-full overflow-auto">
{activeLayout === "list" ? ( {activeLayout === "list" ? (

View File

@ -16,7 +16,11 @@ import {
ModuleSpreadsheetLayout, ModuleSpreadsheetLayout,
} from "components/issues"; } from "components/issues";
export const ModuleLayoutRoot: React.FC = observer(() => { type Props = {
openIssuesListModal: () => void;
};
export const ModuleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query as { const { workspaceSlug, projectId, moduleId } = router.query as {
workspaceSlug: string; workspaceSlug: string;
@ -53,7 +57,7 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
<div className="relative w-full h-full flex flex-col overflow-hidden"> <div className="relative w-full h-full flex flex-col overflow-hidden">
<ModuleAppliedFiltersRoot /> <ModuleAppliedFiltersRoot />
{(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? ( {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
<ModuleEmptyState /> <ModuleEmptyState openIssuesListModal={openIssuesListModal} />
) : ( ) : (
<div className="h-full w-full overflow-auto"> <div className="h-full w-full overflow-auto">
{activeLayout === "list" ? ( {activeLayout === "list" ? (

View File

@ -239,40 +239,38 @@ export const SidebarLabelSelect: React.FC<Props> = ({
<form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}> <form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}>
<div> <div>
<Popover className="relative"> <Popover className="relative">
{({}) => ( <>
<> <Popover.Button className="grid place-items-center outline-none">
<Popover.Button className="grid place-items-center outline-none"> {watch("color") && watch("color") !== "" && (
{watch("color") && watch("color") !== "" && ( <span
<span className="h-6 w-6 rounded"
className="h-6 w-6 rounded" style={{
style={{ backgroundColor: watch("color") ?? "black",
backgroundColor: watch("color") ?? "black", }}
}} />
/> )}
)} </Popover.Button>
</Popover.Button>
<Transition <Transition
as={React.Fragment} as={React.Fragment}
enter="transition ease-out duration-200" enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1" enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150" leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Popover.Panel className="absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0"> <Popover.Panel className="absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0">
<Controller <Controller
name="color" name="color"
control={control} control={control}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} /> <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
)} )}
/> />
</Popover.Panel> </Popover.Panel>
</Transition> </Transition>
</> </>
)}
</Popover> </Popover>
</div> </div>
<Controller <Controller

View File

@ -327,7 +327,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<Disclosure> <Disclosure>
{({ open }) => ( {({ open }) => (
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}> <div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
<div className="flex w-full items-center justify-between gap-2"> <Disclosure.Button
className="flex w-full items-center justify-between gap-2 p-1.5"
disabled={!isStartValid || !isEndValid}
>
<div className="flex items-center justify-start gap-2 text-sm"> <div className="flex items-center justify-start gap-2 text-sm">
<span className="font-medium text-custom-text-200">Progress</span> <span className="font-medium text-custom-text-200">Progress</span>
</div> </div>
@ -341,12 +344,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
"" ""
)} )}
{isStartValid && isEndValid ? ( {isStartValid && isEndValid ? (
<Disclosure.Button className="p-1.5"> <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
<ChevronDown
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
aria-hidden="true"
/>
</Disclosure.Button>
) : ( ) : (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<AlertCircle height={14} width={14} className="text-custom-text-200" /> <AlertCircle height={14} width={14} className="text-custom-text-200" />
@ -356,7 +354,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
</div> </div>
)} )}
</div> </div>
</div> </Disclosure.Button>
<Transition show={open}> <Transition show={open}>
<Disclosure.Panel> <Disclosure.Panel>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
@ -415,20 +413,21 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<Disclosure> <Disclosure>
{({ open }) => ( {({ open }) => (
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}> <div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
<div className="flex w-full items-center justify-between gap-2"> <Disclosure.Button
className="flex w-full items-center justify-between gap-2 p-1.5"
disabled={!isStartValid || !isEndValid}
>
<div className="flex items-center justify-start gap-2 text-sm"> <div className="flex items-center justify-start gap-2 text-sm">
<span className="font-medium text-custom-text-200">Links</span> <span className="font-medium text-custom-text-200">Links</span>
</div> </div>
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<Disclosure.Button className="p-1.5"> <ChevronDown
<ChevronDown className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true"
aria-hidden="true" />
/>
</Disclosure.Button>
</div> </div>
</div> </Disclosure.Button>
<Transition show={open}> <Transition show={open}>
<Disclosure.Panel> <Disclosure.Panel>
<div className="flex flex-col w-full mt-2 space-y-3 h-72 overflow-y-auto"> <div className="flex flex-col w-full mt-2 space-y-3 h-72 overflow-y-auto">

View File

@ -330,9 +330,9 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
<CustomSelect <CustomSelect
value={value} value={value}
onChange={onChange} onChange={onChange}
buttonClassName="border-[0.5px] shadow-md !py-1.5" buttonClassName="border-[0.5px] shadow-md !py-1.5 shadow-none"
label={ label={
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 text-custom-text-300">
{currentNetwork ? ( {currentNetwork ? (
<> <>
<currentNetwork.icon className="h-[18px] w-[18px]" /> <currentNetwork.icon className="h-[18px] w-[18px]" />

View File

@ -68,7 +68,8 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
Join Project? Join Project?
</Dialog.Title> </Dialog.Title>
<p> <p>
Are you sure you want to join <span className="font-semibold">{project?.name}</span>? Are you sure you want to join the project <span className="font-semibold">{project?.name}</span>?
Please click the &apos;Join Project&apos; button below to continue.
</p> </p>
<div className="space-y-3" /> <div className="space-y-3" />
</div> </div>

View File

@ -74,7 +74,7 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
type="button" type="button"
className={`flex items-center justify-between gap-1 w-full text-xs ${ className={`flex items-center justify-between gap-1 w-full text-xs ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80" disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} `} }`}
> >
{label} {label}
</button> </button>

View File

@ -3,8 +3,12 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// services
import { IssueService } from "services/issue";
// hooks // hooks
import useLocalStorage from "hooks/use-local-storage"; import useLocalStorage from "hooks/use-local-storage";
import useUser from "hooks/use-user";
import useToast from "hooks/use-toast";
// layouts // layouts
import { AppLayout } from "layouts/app-layout"; import { AppLayout } from "layouts/app-layout";
// components // components
@ -16,6 +20,10 @@ import { CycleLayoutRoot } from "components/issues/issue-layouts";
import { EmptyState } from "components/common"; import { EmptyState } from "components/common";
// assets // assets
import emptyCycle from "public/empty-state/cycle.svg"; import emptyCycle from "public/empty-state/cycle.svg";
// types
import { ISearchIssueResponse } from "types";
const issueService = new IssueService();
const SingleCycle: React.FC = () => { const SingleCycle: React.FC = () => {
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false); const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
@ -25,6 +33,10 @@ const SingleCycle: React.FC = () => {
const { cycle: cycleStore } = useMobxStore(); const { cycle: cycleStore } = useMobxStore();
const { user } = useUser();
const { setToastAlert } = useToast();
const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false"); const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false; const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
@ -40,23 +52,27 @@ const SingleCycle: React.FC = () => {
}; };
// TODO: add this function to bulk add issues to cycle // TODO: add this function to bulk add issues to cycle
// const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => { const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
// if (!workspaceSlug || !projectId) return; if (!workspaceSlug || !projectId) return;
// const payload = { const payload = {
// issues: data.map((i) => i.id), issues: data.map((i) => i.id),
// }; };
// await issueService await issueService
// .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user) .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
// .catch(() => { .catch(() => {
// setToastAlert({ setToastAlert({
// type: "error", type: "error",
// title: "Error!", title: "Error!",
// message: "Selected issues could not be added to the cycle. Please try again.", message: "Selected issues could not be added to the cycle. Please try again.",
// }); });
// }); });
// }; };
const openIssuesListModal = () => {
setCycleIssuesListModal(true);
};
return ( return (
<AppLayout header={<CycleIssuesHeader />} withProjectWrapper> <AppLayout header={<CycleIssuesHeader />} withProjectWrapper>
@ -65,7 +81,7 @@ const SingleCycle: React.FC = () => {
isOpen={cycleIssuesListModal} isOpen={cycleIssuesListModal}
handleClose={() => setCycleIssuesListModal(false)} handleClose={() => setCycleIssuesListModal(false)}
searchParams={{ cycle: true }} searchParams={{ cycle: true }}
handleOnSubmit={async () => {}} handleOnSubmit={handleAddIssuesToCycle}
/> />
{error ? ( {error ? (
<EmptyState <EmptyState
@ -80,8 +96,8 @@ const SingleCycle: React.FC = () => {
) : ( ) : (
<> <>
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<div className="h-full w-full"> <div className="h-full w-full overflow-hidden">
<CycleLayoutRoot /> <CycleLayoutRoot openIssuesListModal={openIssuesListModal} />
</div> </div>
{cycleId && !isSidebarCollapsed && ( {cycleId && !isSidebarCollapsed && (
<div <div

View File

@ -3,8 +3,13 @@ import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// services
import { ModuleService } from "services/module.service";
// hooks // hooks
import useLocalStorage from "hooks/use-local-storage"; import useLocalStorage from "hooks/use-local-storage";
import useToast from "hooks/use-toast";
import useUser from "hooks/use-user";
// layouts // layouts
import { AppLayout } from "layouts/app-layout"; import { AppLayout } from "layouts/app-layout";
// components // components
@ -18,6 +23,9 @@ import { EmptyState } from "components/common";
import emptyModule from "public/empty-state/module.svg"; import emptyModule from "public/empty-state/module.svg";
// types // types
import { NextPage } from "next"; import { NextPage } from "next";
import { ISearchIssueResponse } from "types";
const moduleService = new ModuleService();
const ModuleIssuesPage: NextPage = () => { const ModuleIssuesPage: NextPage = () => {
const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false); const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
@ -27,6 +35,10 @@ const ModuleIssuesPage: NextPage = () => {
const { module: moduleStore } = useMobxStore(); const { module: moduleStore } = useMobxStore();
const { user } = useUser();
const { setToastAlert } = useToast();
const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false"); const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false; const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
@ -38,27 +50,27 @@ const ModuleIssuesPage: NextPage = () => {
); );
// TODO: add this function to bulk add issues to cycle // TODO: add this function to bulk add issues to cycle
// const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => { const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
// if (!workspaceSlug || !projectId) return; if (!workspaceSlug || !projectId) return;
// const payload = { const payload = {
// issues: data.map((i) => i.id), issues: data.map((i) => i.id),
// }; };
// await moduleService await moduleService
// .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user) .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
// .catch(() => .catch(() =>
// setToastAlert({ setToastAlert({
// type: "error", type: "error",
// title: "Error!", title: "Error!",
// message: "Selected issues could not be added to the module. Please try again.", message: "Selected issues could not be added to the module. Please try again.",
// }) })
// ); );
// }; };
// const openIssuesListModal = () => { const openIssuesListModal = () => {
// setModuleIssuesListModal(true); setModuleIssuesListModal(true);
// }; };
const toggleSidebar = () => { const toggleSidebar = () => {
setValue(`${!isSidebarCollapsed}`); setValue(`${!isSidebarCollapsed}`);
@ -72,7 +84,7 @@ const ModuleIssuesPage: NextPage = () => {
isOpen={moduleIssuesListModal} isOpen={moduleIssuesListModal}
handleClose={() => setModuleIssuesListModal(false)} handleClose={() => setModuleIssuesListModal(false)}
searchParams={{ module: true }} searchParams={{ module: true }}
handleOnSubmit={async () => {}} handleOnSubmit={handleAddIssuesToModule}
/> />
{error ? ( {error ? (
<EmptyState <EmptyState
@ -86,8 +98,8 @@ const ModuleIssuesPage: NextPage = () => {
/> />
) : ( ) : (
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<div className="h-full w-full"> <div className="h-full w-full overflow-hidden">
<ModuleLayoutRoot /> <ModuleLayoutRoot openIssuesListModal={openIssuesListModal} />
</div> </div>
{moduleId && !isSidebarCollapsed && ( {moduleId && !isSidebarCollapsed && (
<div <div