forked from github/plane
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
GitHub
parent
13ead7c314
commit
548e95c7e0
@ -7,14 +7,19 @@ export const CircleDotFullIcon: React.FC<ISvgIcons> = ({
|
||||
...rest
|
||||
}) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className={`${className} stroke-2`}
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
className={`${className} stroke-1`}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...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" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -3,7 +3,7 @@ import React from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
// ui
|
||||
import { PrimaryButton } from "components/ui";
|
||||
import { Button } from "@plane/ui";
|
||||
|
||||
type Props = {
|
||||
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>}
|
||||
<div className="flex items-center gap-4">
|
||||
{primaryButton && (
|
||||
<PrimaryButton className="flex items-center gap-1.5" onClick={primaryButton.onClick} disabled={disabled}>
|
||||
{primaryButton.icon}
|
||||
<Button
|
||||
variant="primary"
|
||||
prependIcon={primaryButton.icon}
|
||||
onClick={primaryButton.onClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
{primaryButton.text}
|
||||
</PrimaryButton>
|
||||
</Button>
|
||||
)}
|
||||
{secondaryButton}
|
||||
</div>
|
||||
|
||||
@ -383,41 +383,39 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
</Popover>
|
||||
<MoveRight className="h-4 w-4 text-custom-text-300" />
|
||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
{({}) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
disabled={isCompleted ?? false}
|
||||
className="text-sm text-custom-text-300 font-medium cursor-default"
|
||||
>
|
||||
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
|
||||
</Popover.Button>
|
||||
<>
|
||||
<Popover.Button
|
||||
disabled={isCompleted ?? false}
|
||||
className="text-sm text-custom-text-300 font-medium cursor-default"
|
||||
>
|
||||
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
|
||||
</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 top-10 -right-5 z-20 transform overflow-hidden">
|
||||
<CustomRangeDatePicker
|
||||
value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
|
||||
onChange={(val) => {
|
||||
if (val) {
|
||||
handleEndDateChange(val);
|
||||
}
|
||||
}}
|
||||
startDate={watch("start_date") ? `${watch("start_date")}` : null}
|
||||
endDate={watch("end_date") ? `${watch("end_date")}` : null}
|
||||
minDate={new Date(`${watch("start_date")}`)}
|
||||
selectsEnd
|
||||
/>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
<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 top-10 -right-5 z-20 transform overflow-hidden">
|
||||
<CustomRangeDatePicker
|
||||
value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
|
||||
onChange={(val) => {
|
||||
if (val) {
|
||||
handleEndDateChange(val);
|
||||
}
|
||||
}}
|
||||
startDate={watch("start_date") ? `${watch("start_date")}` : null}
|
||||
endDate={watch("end_date") ? `${watch("end_date")}` : null}
|
||||
minDate={new Date(`${watch("start_date")}`)}
|
||||
selectsEnd
|
||||
/>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
@ -459,7 +457,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<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">
|
||||
<span className="font-medium text-custom-text-200">Progress</span>
|
||||
</div>
|
||||
@ -473,12 +474,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
""
|
||||
)}
|
||||
{isStartValid && isEndValid ? (
|
||||
<Disclosure.Button className="p-1.5">
|
||||
<ChevronDown
|
||||
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
<ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
|
||||
) : (
|
||||
<div className="flex items-center gap-1">
|
||||
<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>
|
||||
</Disclosure.Button>
|
||||
<Transition show={open}>
|
||||
<Disclosure.Panel>
|
||||
<div className="flex flex-col gap-3">
|
||||
|
||||
@ -10,10 +10,14 @@ import { observer } from "mobx-react-lite";
|
||||
|
||||
export const ProjectsHeader = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
// store
|
||||
const { project: projectStore, workspace: workspaceStore } = useMobxStore();
|
||||
const currentWorkspace = workspaceStore.currentWorkspace;
|
||||
|
||||
const projectsList = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : [];
|
||||
|
||||
return (
|
||||
<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`}
|
||||
@ -29,15 +33,17 @@ export const ProjectsHeader = observer(() => {
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
<input
|
||||
className="min-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
|
||||
value={projectStore.searchQuery}
|
||||
onChange={(e) => projectStore.setSearchQuery(e.target.value)}
|
||||
placeholder="Search"
|
||||
/>
|
||||
</div>
|
||||
{projectsList?.length > 0 && (
|
||||
<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">
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
<input
|
||||
className="min-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
|
||||
value={projectStore.searchQuery}
|
||||
onChange={(e) => projectStore.setSearchQuery(e.target.value)}
|
||||
placeholder="Search"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
prependIcon={<Plus />}
|
||||
|
||||
@ -3,8 +3,13 @@ import { PlusIcon } from "lucide-react";
|
||||
import { EmptyState } from "components/common";
|
||||
// assets
|
||||
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">
|
||||
<EmptyState
|
||||
title="Cycle issues will appear here"
|
||||
@ -20,6 +25,14 @@ export const CycleEmptyState: React.FC = () => (
|
||||
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>
|
||||
);
|
||||
|
||||
@ -1,10 +1,15 @@
|
||||
import { PlusIcon } from "lucide-react";
|
||||
// components
|
||||
import { EmptyState } from "components/common";
|
||||
import { Button } from "@plane/ui";
|
||||
// assets
|
||||
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">
|
||||
<EmptyState
|
||||
title="Module issues will appear here"
|
||||
@ -20,6 +25,15 @@ export const ModuleEmptyState: React.FC = () => (
|
||||
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>
|
||||
);
|
||||
|
||||
@ -18,7 +18,11 @@ import { TransferIssues, TransferIssuesModal } from "components/cycles";
|
||||
// helpers
|
||||
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 router = useRouter();
|
||||
@ -60,7 +64,7 @@ export const CycleLayoutRoot: React.FC = observer(() => {
|
||||
{cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
|
||||
<CycleAppliedFiltersRoot />
|
||||
{(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
|
||||
<CycleEmptyState />
|
||||
<CycleEmptyState openIssuesListModal={openIssuesListModal} />
|
||||
) : (
|
||||
<div className="w-full h-full overflow-auto">
|
||||
{activeLayout === "list" ? (
|
||||
|
||||
@ -16,7 +16,11 @@ import {
|
||||
ModuleSpreadsheetLayout,
|
||||
} 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 { workspaceSlug, projectId, moduleId } = router.query as {
|
||||
workspaceSlug: string;
|
||||
@ -53,7 +57,7 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
|
||||
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
||||
<ModuleAppliedFiltersRoot />
|
||||
{(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
|
||||
<ModuleEmptyState />
|
||||
<ModuleEmptyState openIssuesListModal={openIssuesListModal} />
|
||||
) : (
|
||||
<div className="h-full w-full overflow-auto">
|
||||
{activeLayout === "list" ? (
|
||||
|
||||
@ -239,40 +239,38 @@ export const SidebarLabelSelect: React.FC<Props> = ({
|
||||
<form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}>
|
||||
<div>
|
||||
<Popover className="relative">
|
||||
{({}) => (
|
||||
<>
|
||||
<Popover.Button className="grid place-items-center outline-none">
|
||||
{watch("color") && watch("color") !== "" && (
|
||||
<span
|
||||
className="h-6 w-6 rounded"
|
||||
style={{
|
||||
backgroundColor: watch("color") ?? "black",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Popover.Button>
|
||||
<>
|
||||
<Popover.Button className="grid place-items-center outline-none">
|
||||
{watch("color") && watch("color") !== "" && (
|
||||
<span
|
||||
className="h-6 w-6 rounded"
|
||||
style={{
|
||||
backgroundColor: watch("color") ?? "black",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</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 z-10 mt-1.5 max-w-xs px-2 sm:px-0">
|
||||
<Controller
|
||||
name="color"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
|
||||
)}
|
||||
/>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
<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 z-10 mt-1.5 max-w-xs px-2 sm:px-0">
|
||||
<Controller
|
||||
name="color"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
|
||||
)}
|
||||
/>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
</Popover>
|
||||
</div>
|
||||
<Controller
|
||||
|
||||
@ -327,7 +327,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<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">
|
||||
<span className="font-medium text-custom-text-200">Progress</span>
|
||||
</div>
|
||||
@ -341,12 +344,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
""
|
||||
)}
|
||||
{isStartValid && isEndValid ? (
|
||||
<Disclosure.Button className="p-1.5">
|
||||
<ChevronDown
|
||||
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
<ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
|
||||
) : (
|
||||
<div className="flex items-center gap-1">
|
||||
<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>
|
||||
</Disclosure.Button>
|
||||
<Transition show={open}>
|
||||
<Disclosure.Panel>
|
||||
<div className="flex flex-col gap-3">
|
||||
@ -415,20 +413,21 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<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">
|
||||
<span className="font-medium text-custom-text-200">Links</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Disclosure.Button className="p-1.5">
|
||||
<ChevronDown
|
||||
className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
<ChevronDown
|
||||
className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
<Transition show={open}>
|
||||
<Disclosure.Panel>
|
||||
<div className="flex flex-col w-full mt-2 space-y-3 h-72 overflow-y-auto">
|
||||
|
||||
@ -330,9 +330,9 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
||||
<CustomSelect
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
buttonClassName="border-[0.5px] shadow-md !py-1.5"
|
||||
buttonClassName="border-[0.5px] shadow-md !py-1.5 shadow-none"
|
||||
label={
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 text-custom-text-300">
|
||||
{currentNetwork ? (
|
||||
<>
|
||||
<currentNetwork.icon className="h-[18px] w-[18px]" />
|
||||
|
||||
@ -68,7 +68,8 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
|
||||
Join Project?
|
||||
</Dialog.Title>
|
||||
<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 'Join Project' button below to continue.
|
||||
</p>
|
||||
<div className="space-y-3" />
|
||||
</div>
|
||||
|
||||
@ -74,7 +74,7 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
|
||||
type="button"
|
||||
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"
|
||||
} `}
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
|
||||
@ -3,8 +3,12 @@ import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// services
|
||||
import { IssueService } from "services/issue";
|
||||
// hooks
|
||||
import useLocalStorage from "hooks/use-local-storage";
|
||||
import useUser from "hooks/use-user";
|
||||
import useToast from "hooks/use-toast";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
// components
|
||||
@ -16,6 +20,10 @@ import { CycleLayoutRoot } from "components/issues/issue-layouts";
|
||||
import { EmptyState } from "components/common";
|
||||
// assets
|
||||
import emptyCycle from "public/empty-state/cycle.svg";
|
||||
// types
|
||||
import { ISearchIssueResponse } from "types";
|
||||
|
||||
const issueService = new IssueService();
|
||||
|
||||
const SingleCycle: React.FC = () => {
|
||||
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
|
||||
@ -25,6 +33,10 @@ const SingleCycle: React.FC = () => {
|
||||
|
||||
const { cycle: cycleStore } = useMobxStore();
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "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
|
||||
// const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
|
||||
// if (!workspaceSlug || !projectId) return;
|
||||
const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
// const payload = {
|
||||
// issues: data.map((i) => i.id),
|
||||
// };
|
||||
const payload = {
|
||||
issues: data.map((i) => i.id),
|
||||
};
|
||||
|
||||
// await issueService
|
||||
// .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
|
||||
// .catch(() => {
|
||||
// setToastAlert({
|
||||
// type: "error",
|
||||
// title: "Error!",
|
||||
// message: "Selected issues could not be added to the cycle. Please try again.",
|
||||
// });
|
||||
// });
|
||||
// };
|
||||
await issueService
|
||||
.addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Selected issues could not be added to the cycle. Please try again.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const openIssuesListModal = () => {
|
||||
setCycleIssuesListModal(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<AppLayout header={<CycleIssuesHeader />} withProjectWrapper>
|
||||
@ -65,7 +81,7 @@ const SingleCycle: React.FC = () => {
|
||||
isOpen={cycleIssuesListModal}
|
||||
handleClose={() => setCycleIssuesListModal(false)}
|
||||
searchParams={{ cycle: true }}
|
||||
handleOnSubmit={async () => {}}
|
||||
handleOnSubmit={handleAddIssuesToCycle}
|
||||
/>
|
||||
{error ? (
|
||||
<EmptyState
|
||||
@ -80,8 +96,8 @@ const SingleCycle: React.FC = () => {
|
||||
) : (
|
||||
<>
|
||||
<div className="flex h-full w-full">
|
||||
<div className="h-full w-full">
|
||||
<CycleLayoutRoot />
|
||||
<div className="h-full w-full overflow-hidden">
|
||||
<CycleLayoutRoot openIssuesListModal={openIssuesListModal} />
|
||||
</div>
|
||||
{cycleId && !isSidebarCollapsed && (
|
||||
<div
|
||||
|
||||
@ -3,8 +3,13 @@ import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
|
||||
// services
|
||||
import { ModuleService } from "services/module.service";
|
||||
// hooks
|
||||
import useLocalStorage from "hooks/use-local-storage";
|
||||
import useToast from "hooks/use-toast";
|
||||
import useUser from "hooks/use-user";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
// components
|
||||
@ -18,6 +23,9 @@ import { EmptyState } from "components/common";
|
||||
import emptyModule from "public/empty-state/module.svg";
|
||||
// types
|
||||
import { NextPage } from "next";
|
||||
import { ISearchIssueResponse } from "types";
|
||||
|
||||
const moduleService = new ModuleService();
|
||||
|
||||
const ModuleIssuesPage: NextPage = () => {
|
||||
const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
|
||||
@ -27,6 +35,10 @@ const ModuleIssuesPage: NextPage = () => {
|
||||
|
||||
const { module: moduleStore } = useMobxStore();
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "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
|
||||
// const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
|
||||
// if (!workspaceSlug || !projectId) return;
|
||||
const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
// const payload = {
|
||||
// issues: data.map((i) => i.id),
|
||||
// };
|
||||
const payload = {
|
||||
issues: data.map((i) => i.id),
|
||||
};
|
||||
|
||||
// await moduleService
|
||||
// .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
|
||||
// .catch(() =>
|
||||
// setToastAlert({
|
||||
// type: "error",
|
||||
// title: "Error!",
|
||||
// message: "Selected issues could not be added to the module. Please try again.",
|
||||
// })
|
||||
// );
|
||||
// };
|
||||
await moduleService
|
||||
.addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
|
||||
.catch(() =>
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Selected issues could not be added to the module. Please try again.",
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
// const openIssuesListModal = () => {
|
||||
// setModuleIssuesListModal(true);
|
||||
// };
|
||||
const openIssuesListModal = () => {
|
||||
setModuleIssuesListModal(true);
|
||||
};
|
||||
|
||||
const toggleSidebar = () => {
|
||||
setValue(`${!isSidebarCollapsed}`);
|
||||
@ -72,7 +84,7 @@ const ModuleIssuesPage: NextPage = () => {
|
||||
isOpen={moduleIssuesListModal}
|
||||
handleClose={() => setModuleIssuesListModal(false)}
|
||||
searchParams={{ module: true }}
|
||||
handleOnSubmit={async () => {}}
|
||||
handleOnSubmit={handleAddIssuesToModule}
|
||||
/>
|
||||
{error ? (
|
||||
<EmptyState
|
||||
@ -86,8 +98,8 @@ const ModuleIssuesPage: NextPage = () => {
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full">
|
||||
<div className="h-full w-full">
|
||||
<ModuleLayoutRoot />
|
||||
<div className="h-full w-full overflow-hidden">
|
||||
<ModuleLayoutRoot openIssuesListModal={openIssuesListModal} />
|
||||
</div>
|
||||
{moduleId && !isSidebarCollapsed && (
|
||||
<div
|
||||
|
||||
Loading…
Reference in New Issue
Block a user