mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
fix: existing issues modal for cycle and module (#2664)
* fix: existing issues modal for cycle and module * refactor: existing issues modal code * fix: build errors
This commit is contained in:
parent
1ed72c51df
commit
742143766f
@ -1,38 +1,85 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { observer } from "mobx-react-lite";
|
||||||
import { PlusIcon } from "lucide-react";
|
import { PlusIcon } from "lucide-react";
|
||||||
|
// mobx store
|
||||||
|
import { useMobxStore } from "lib/mobx/store-provider";
|
||||||
|
// hooks
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
// components
|
// components
|
||||||
import { EmptyState } from "components/common";
|
import { EmptyState } from "components/common";
|
||||||
|
import { ExistingIssuesListModal } from "components/core";
|
||||||
|
// ui
|
||||||
|
import { Button } from "@plane/ui";
|
||||||
// assets
|
// assets
|
||||||
import emptyIssue from "public/empty-state/issue.svg";
|
import emptyIssue from "public/empty-state/issue.svg";
|
||||||
import { Button } from "@plane/ui";
|
// types
|
||||||
|
import { ISearchIssueResponse } from "types";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
openIssuesListModal: () => void;
|
workspaceSlug: string | undefined;
|
||||||
|
projectId: string | undefined;
|
||||||
|
cycleId: string | undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const CycleEmptyState: React.FC<Props> = ({ openIssuesListModal }) => (
|
export const CycleEmptyState: React.FC<Props> = observer((props) => {
|
||||||
<div className="h-full w-full grid place-items-center">
|
const { workspaceSlug, projectId, cycleId } = props;
|
||||||
<EmptyState
|
// states
|
||||||
title="Cycle issues will appear here"
|
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
|
||||||
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
|
|
||||||
image={emptyIssue}
|
const { cycleIssue: cycleIssueStore } = useMobxStore();
|
||||||
primaryButton={{
|
|
||||||
text: "New issue",
|
const { setToastAlert } = useToast();
|
||||||
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
|
|
||||||
onClick: () => {
|
const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
|
||||||
const e = new KeyboardEvent("keydown", {
|
if (!workspaceSlug || !projectId || !cycleId) return;
|
||||||
key: "c",
|
|
||||||
});
|
const issueIds = data.map((i) => i.id);
|
||||||
document.dispatchEvent(e);
|
|
||||||
},
|
await cycleIssueStore
|
||||||
}}
|
.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds)
|
||||||
secondaryButton={
|
.catch(() => {
|
||||||
<Button
|
setToastAlert({
|
||||||
variant="neutral-primary"
|
type: "error",
|
||||||
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} onClick={openIssuesListModal} />}
|
title: "Error!",
|
||||||
>
|
message: "Selected issues could not be added to the cycle. Please try again.",
|
||||||
Add an existing issue
|
});
|
||||||
</Button>
|
});
|
||||||
}
|
};
|
||||||
/>
|
|
||||||
</div>
|
return (
|
||||||
);
|
<>
|
||||||
|
<ExistingIssuesListModal
|
||||||
|
isOpen={cycleIssuesListModal}
|
||||||
|
handleClose={() => setCycleIssuesListModal(false)}
|
||||||
|
searchParams={{ cycle: true }}
|
||||||
|
handleOnSubmit={handleAddIssuesToCycle}
|
||||||
|
/>
|
||||||
|
<div className="h-full w-full grid place-items-center">
|
||||||
|
<EmptyState
|
||||||
|
title="Cycle issues will appear here"
|
||||||
|
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
|
||||||
|
image={emptyIssue}
|
||||||
|
primaryButton={{
|
||||||
|
text: "New issue",
|
||||||
|
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
|
||||||
|
onClick: () => {
|
||||||
|
const e = new KeyboardEvent("keydown", {
|
||||||
|
key: "c",
|
||||||
|
});
|
||||||
|
document.dispatchEvent(e);
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
secondaryButton={
|
||||||
|
<Button
|
||||||
|
variant="neutral-primary"
|
||||||
|
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
|
||||||
|
onClick={() => setCycleIssuesListModal(true)}
|
||||||
|
>
|
||||||
|
Add an existing issue
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
@ -4,36 +4,78 @@ import { EmptyState } from "components/common";
|
|||||||
import { Button } from "@plane/ui";
|
import { Button } from "@plane/ui";
|
||||||
// assets
|
// assets
|
||||||
import emptyIssue from "public/empty-state/issue.svg";
|
import emptyIssue from "public/empty-state/issue.svg";
|
||||||
|
import { ExistingIssuesListModal } from "components/core";
|
||||||
|
import { observer } from "mobx-react-lite";
|
||||||
|
import { useMobxStore } from "lib/mobx/store-provider";
|
||||||
|
import { ISearchIssueResponse } from "types";
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
openIssuesListModal: () => void;
|
workspaceSlug: string | undefined;
|
||||||
|
projectId: string | undefined;
|
||||||
|
moduleId: string | undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ModuleEmptyState: React.FC<Props> = ({ openIssuesListModal }) => (
|
export const ModuleEmptyState: React.FC<Props> = observer((props) => {
|
||||||
<div className="h-full w-full grid place-items-center">
|
const { workspaceSlug, projectId, moduleId } = props;
|
||||||
<EmptyState
|
// states
|
||||||
title="Module issues will appear here"
|
const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
|
||||||
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
|
|
||||||
image={emptyIssue}
|
const { moduleIssue: moduleIssueStore } = useMobxStore();
|
||||||
primaryButton={{
|
|
||||||
text: "New issue",
|
const { setToastAlert } = useToast();
|
||||||
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
|
|
||||||
onClick: () => {
|
const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
|
||||||
const e = new KeyboardEvent("keydown", {
|
if (!workspaceSlug || !projectId || !moduleId) return;
|
||||||
key: "c",
|
|
||||||
});
|
const issueIds = data.map((i) => i.id);
|
||||||
document.dispatchEvent(e);
|
|
||||||
},
|
await moduleIssueStore
|
||||||
}}
|
.addIssueToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds)
|
||||||
secondaryButton={
|
.catch(() =>
|
||||||
<Button
|
setToastAlert({
|
||||||
variant="neutral-primary"
|
type: "error",
|
||||||
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
|
title: "Error!",
|
||||||
onClick={openIssuesListModal}
|
message: "Selected issues could not be added to the module. Please try again.",
|
||||||
>
|
})
|
||||||
Add an existing issue
|
);
|
||||||
</Button>
|
};
|
||||||
}
|
|
||||||
/>
|
return (
|
||||||
</div>
|
<>
|
||||||
);
|
<ExistingIssuesListModal
|
||||||
|
isOpen={moduleIssuesListModal}
|
||||||
|
handleClose={() => setModuleIssuesListModal(false)}
|
||||||
|
searchParams={{ module: true }}
|
||||||
|
handleOnSubmit={handleAddIssuesToModule}
|
||||||
|
/>
|
||||||
|
<div className="h-full w-full grid place-items-center">
|
||||||
|
<EmptyState
|
||||||
|
title="Module issues will appear here"
|
||||||
|
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
|
||||||
|
image={emptyIssue}
|
||||||
|
primaryButton={{
|
||||||
|
text: "New issue",
|
||||||
|
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
|
||||||
|
onClick: () => {
|
||||||
|
const e = new KeyboardEvent("keydown", {
|
||||||
|
key: "c",
|
||||||
|
});
|
||||||
|
document.dispatchEvent(e);
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
secondaryButton={
|
||||||
|
<Button
|
||||||
|
variant="neutral-primary"
|
||||||
|
prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
|
||||||
|
onClick={() => setModuleIssuesListModal(true)}
|
||||||
|
>
|
||||||
|
Add an existing issue
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
@ -20,11 +20,7 @@ import { Spinner } from "@plane/ui";
|
|||||||
// helpers
|
// helpers
|
||||||
import { getDateRangeStatus } from "helpers/date-time.helper";
|
import { getDateRangeStatus } from "helpers/date-time.helper";
|
||||||
|
|
||||||
type Props = {
|
export const CycleLayoutRoot: React.FC = observer(() => {
|
||||||
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();
|
||||||
@ -73,7 +69,11 @@ export const CycleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal
|
|||||||
{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 openIssuesListModal={openIssuesListModal} />
|
<CycleEmptyState
|
||||||
|
workspaceSlug={workspaceSlug?.toString()}
|
||||||
|
projectId={projectId?.toString()}
|
||||||
|
cycleId={cycleId?.toString()}
|
||||||
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="w-full h-full overflow-auto">
|
<div className="w-full h-full overflow-auto">
|
||||||
{activeLayout === "list" ? (
|
{activeLayout === "list" ? (
|
||||||
|
@ -18,11 +18,7 @@ import {
|
|||||||
// ui
|
// ui
|
||||||
import { Spinner } from "@plane/ui";
|
import { Spinner } from "@plane/ui";
|
||||||
|
|
||||||
type Props = {
|
export const ModuleLayoutRoot: React.FC = observer(() => {
|
||||||
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;
|
||||||
@ -66,7 +62,11 @@ export const ModuleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal
|
|||||||
<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 openIssuesListModal={openIssuesListModal} />
|
<ModuleEmptyState
|
||||||
|
workspaceSlug={workspaceSlug?.toString()}
|
||||||
|
projectId={projectId?.toString()}
|
||||||
|
moduleId={moduleId?.toString()}
|
||||||
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="h-full w-full overflow-auto">
|
<div className="h-full w-full overflow-auto">
|
||||||
{activeLayout === "list" ? (
|
{activeLayout === "list" ? (
|
||||||
|
@ -74,13 +74,13 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
|||||||
};
|
};
|
||||||
const addIssueToCycle = async (cycleId: string) => {
|
const addIssueToCycle = async (cycleId: string) => {
|
||||||
if (!workspaceSlug || !issue || !cycleId) return;
|
if (!workspaceSlug || !issue || !cycleId) return;
|
||||||
cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), issue.project_detail.id, cycleId, issue.id);
|
cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), issue.project_detail.id, cycleId, [issue.id]);
|
||||||
};
|
};
|
||||||
|
|
||||||
const addIssueToModule = async (moduleId: string) => {
|
const addIssueToModule = async (moduleId: string) => {
|
||||||
if (!workspaceSlug || !issue || !moduleId) return;
|
if (!workspaceSlug || !issue || !moduleId) return;
|
||||||
|
|
||||||
moduleIssueStore.addIssueToModule(workspaceSlug.toString(), issue.project_detail.id, moduleId, issue.id);
|
moduleIssueStore.addIssueToModule(workspaceSlug.toString(), issue.project_detail.id, moduleId, [issue.id]);
|
||||||
};
|
};
|
||||||
const handleLabels = (formData: Partial<IIssue>) => {
|
const handleLabels = (formData: Partial<IIssue>) => {
|
||||||
issueUpdate({ ...issue, ...formData });
|
issueUpdate({ ...issue, ...formData });
|
||||||
|
@ -171,13 +171,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
|
|||||||
const addIssueToCycle = async (issueId: string, cycleId: string) => {
|
const addIssueToCycle = async (issueId: string, cycleId: string) => {
|
||||||
if (!workspaceSlug || !activeProject) return;
|
if (!workspaceSlug || !activeProject) return;
|
||||||
|
|
||||||
cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), activeProject, cycleId, issueId);
|
cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), activeProject, cycleId, [issueId]);
|
||||||
};
|
};
|
||||||
|
|
||||||
const addIssueToModule = async (issueId: string, moduleId: string) => {
|
const addIssueToModule = async (issueId: string, moduleId: string) => {
|
||||||
if (!workspaceSlug || !activeProject) return;
|
if (!workspaceSlug || !activeProject) return;
|
||||||
|
|
||||||
moduleIssueStore.addIssueToModule(workspaceSlug.toString(), activeProject, moduleId, issueId);
|
moduleIssueStore.addIssueToModule(workspaceSlug.toString(), activeProject, moduleId, [issueId]);
|
||||||
};
|
};
|
||||||
|
|
||||||
const createIssue = async (payload: Partial<IIssue>) => {
|
const createIssue = async (payload: Partial<IIssue>) => {
|
||||||
|
@ -1,19 +1,14 @@
|
|||||||
import { useState, ReactElement } from "react";
|
import { ReactElement } from "react";
|
||||||
import { useRouter } from "next/router";
|
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
|
||||||
import { CycleIssuesHeader } from "components/headers";
|
import { CycleIssuesHeader } from "components/headers";
|
||||||
import { ExistingIssuesListModal } from "components/core";
|
|
||||||
import { CycleDetailsSidebar } from "components/cycles";
|
import { CycleDetailsSidebar } from "components/cycles";
|
||||||
import { CycleLayoutRoot } from "components/issues/issue-layouts";
|
import { CycleLayoutRoot } from "components/issues/issue-layouts";
|
||||||
// ui
|
// ui
|
||||||
@ -21,23 +16,14 @@ import { EmptyState } from "components/common";
|
|||||||
// assets
|
// assets
|
||||||
import emptyCycle from "public/empty-state/cycle.svg";
|
import emptyCycle from "public/empty-state/cycle.svg";
|
||||||
// types
|
// types
|
||||||
import { ISearchIssueResponse } from "types";
|
|
||||||
import { NextPageWithLayout } from "types/app";
|
import { NextPageWithLayout } from "types/app";
|
||||||
|
|
||||||
const issueService = new IssueService();
|
|
||||||
|
|
||||||
const CycleDetailPage: NextPageWithLayout = () => {
|
const CycleDetailPage: NextPageWithLayout = () => {
|
||||||
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
|
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId, cycleId } = router.query;
|
const { workspaceSlug, projectId, cycleId } = router.query;
|
||||||
|
|
||||||
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;
|
||||||
|
|
||||||
@ -52,38 +38,8 @@ const CycleDetailPage: NextPageWithLayout = () => {
|
|||||||
setValue(`${!isSidebarCollapsed}`);
|
setValue(`${!isSidebarCollapsed}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
// TODO: add this function to bulk add issues to cycle
|
|
||||||
const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
|
|
||||||
if (!workspaceSlug || !projectId) return;
|
|
||||||
|
|
||||||
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.",
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const openIssuesListModal = () => {
|
|
||||||
setCycleIssuesListModal(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* TODO: Update logic to bulk add issues to a cycle */}
|
|
||||||
<ExistingIssuesListModal
|
|
||||||
isOpen={cycleIssuesListModal}
|
|
||||||
handleClose={() => setCycleIssuesListModal(false)}
|
|
||||||
searchParams={{ cycle: true }}
|
|
||||||
handleOnSubmit={handleAddIssuesToCycle}
|
|
||||||
/>
|
|
||||||
{error ? (
|
{error ? (
|
||||||
<EmptyState
|
<EmptyState
|
||||||
image={emptyCycle}
|
image={emptyCycle}
|
||||||
@ -98,7 +54,7 @@ const CycleDetailPage: NextPageWithLayout = () => {
|
|||||||
<>
|
<>
|
||||||
<div className="flex h-full w-full">
|
<div className="flex h-full w-full">
|
||||||
<div className="h-full w-full overflow-hidden">
|
<div className="h-full w-full overflow-hidden">
|
||||||
<CycleLayoutRoot openIssuesListModal={openIssuesListModal} />
|
<CycleLayoutRoot />
|
||||||
</div>
|
</div>
|
||||||
{cycleId && !isSidebarCollapsed && (
|
{cycleId && !isSidebarCollapsed && (
|
||||||
<div
|
<div
|
||||||
|
@ -1,18 +1,13 @@
|
|||||||
import { useState, ReactElement } from "react";
|
import { ReactElement } from "react";
|
||||||
import { useRouter } from "next/router";
|
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
|
||||||
import { ExistingIssuesListModal } from "components/core";
|
|
||||||
import { ModuleDetailsSidebar } from "components/modules";
|
import { ModuleDetailsSidebar } from "components/modules";
|
||||||
import { ModuleLayoutRoot } from "components/issues";
|
import { ModuleLayoutRoot } from "components/issues";
|
||||||
import { ModuleIssuesHeader } from "components/headers";
|
import { ModuleIssuesHeader } from "components/headers";
|
||||||
@ -22,21 +17,13 @@ import { EmptyState } from "components/common";
|
|||||||
import emptyModule from "public/empty-state/module.svg";
|
import emptyModule from "public/empty-state/module.svg";
|
||||||
// types
|
// types
|
||||||
import { NextPageWithLayout } from "types/app";
|
import { NextPageWithLayout } from "types/app";
|
||||||
import { ISearchIssueResponse } from "types";
|
|
||||||
|
|
||||||
const moduleService = new ModuleService();
|
|
||||||
|
|
||||||
const ModuleIssuesPage: NextPageWithLayout = () => {
|
const ModuleIssuesPage: NextPageWithLayout = () => {
|
||||||
// states
|
|
||||||
const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
|
|
||||||
// router
|
// router
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId, moduleId } = router.query;
|
const { workspaceSlug, projectId, moduleId } = router.query;
|
||||||
// store
|
// store
|
||||||
const { module: moduleStore } = useMobxStore();
|
const { module: moduleStore } = useMobxStore();
|
||||||
// hooks
|
|
||||||
const { user } = useUser();
|
|
||||||
const { setToastAlert } = useToast();
|
|
||||||
// local storage
|
// local storage
|
||||||
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;
|
||||||
@ -48,42 +35,12 @@ const ModuleIssuesPage: NextPageWithLayout = () => {
|
|||||||
: null
|
: null
|
||||||
);
|
);
|
||||||
|
|
||||||
// TODO: add this function to bulk add issues to cycle
|
|
||||||
const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
|
|
||||||
if (!workspaceSlug || !projectId) return;
|
|
||||||
|
|
||||||
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.",
|
|
||||||
})
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const openIssuesListModal = () => {
|
|
||||||
setModuleIssuesListModal(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleSidebar = () => {
|
const toggleSidebar = () => {
|
||||||
setValue(`${!isSidebarCollapsed}`);
|
setValue(`${!isSidebarCollapsed}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* TODO: Update logic to bulk add issues to a cycle */}
|
|
||||||
<ExistingIssuesListModal
|
|
||||||
isOpen={moduleIssuesListModal}
|
|
||||||
handleClose={() => setModuleIssuesListModal(false)}
|
|
||||||
searchParams={{ module: true }}
|
|
||||||
handleOnSubmit={handleAddIssuesToModule}
|
|
||||||
/>
|
|
||||||
{error ? (
|
{error ? (
|
||||||
<EmptyState
|
<EmptyState
|
||||||
image={emptyModule}
|
image={emptyModule}
|
||||||
@ -97,7 +54,7 @@ const ModuleIssuesPage: NextPageWithLayout = () => {
|
|||||||
) : (
|
) : (
|
||||||
<div className="flex h-full w-full">
|
<div className="flex h-full w-full">
|
||||||
<div className="h-full w-full overflow-hidden">
|
<div className="h-full w-full overflow-hidden">
|
||||||
<ModuleLayoutRoot openIssuesListModal={openIssuesListModal} />
|
<ModuleLayoutRoot />
|
||||||
</div>
|
</div>
|
||||||
{moduleId && !isSidebarCollapsed && (
|
{moduleId && !isSidebarCollapsed && (
|
||||||
<div
|
<div
|
||||||
|
@ -36,7 +36,7 @@ export interface ICycleIssueStore {
|
|||||||
updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
|
updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
|
||||||
updateGanttIssueStructure: (workspaceSlug: string, cycleId: string, issue: IIssue, payload: IBlockUpdateData) => void;
|
updateGanttIssueStructure: (workspaceSlug: string, cycleId: string, issue: IIssue, payload: IBlockUpdateData) => void;
|
||||||
deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
|
deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
|
||||||
addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => void;
|
addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
|
||||||
removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, bridgeId: string) => void;
|
removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, bridgeId: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -322,7 +322,7 @@ export class CycleIssueStore implements ICycleIssueStore {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
|
addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
|
||||||
try {
|
try {
|
||||||
const user = this.rootStore.user.currentUser ?? undefined;
|
const user = this.rootStore.user.currentUser ?? undefined;
|
||||||
|
|
||||||
@ -331,7 +331,7 @@ export class CycleIssueStore implements ICycleIssueStore {
|
|||||||
projectId,
|
projectId,
|
||||||
cycleId,
|
cycleId,
|
||||||
{
|
{
|
||||||
issues: [issueId],
|
issues: issueIds,
|
||||||
},
|
},
|
||||||
user
|
user
|
||||||
);
|
);
|
||||||
|
@ -40,7 +40,7 @@ export interface IModuleIssueStore {
|
|||||||
payload: IBlockUpdateData
|
payload: IBlockUpdateData
|
||||||
) => void;
|
) => void;
|
||||||
deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
|
deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
|
||||||
addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => Promise<any>;
|
addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => Promise<void>;
|
||||||
removeIssueFromModule: (workspaceSlug: string, projectId: string, moduleId: string, bridgeId: string) => Promise<any>;
|
removeIssueFromModule: (workspaceSlug: string, projectId: string, moduleId: string, bridgeId: string) => Promise<any>;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -337,7 +337,7 @@ export class ModuleIssueStore implements IModuleIssueStore {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
addIssueToModule = async (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => {
|
addIssueToModule = async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => {
|
||||||
try {
|
try {
|
||||||
const user = this.rootStore.user.currentUser ?? undefined;
|
const user = this.rootStore.user.currentUser ?? undefined;
|
||||||
|
|
||||||
@ -346,7 +346,7 @@ export class ModuleIssueStore implements IModuleIssueStore {
|
|||||||
projectId,
|
projectId,
|
||||||
moduleId,
|
moduleId,
|
||||||
{
|
{
|
||||||
issues: [issueId],
|
issues: issueIds,
|
||||||
},
|
},
|
||||||
user
|
user
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user