forked from github/plane
fix: create issue modal bugs (#257)
This commit is contained in:
parent
8e3541b947
commit
4ffa31fd02
@ -148,12 +148,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
|
|||||||
"delete_issue_ids",
|
"delete_issue_ids",
|
||||||
selectedIssues.filter((i) => i !== val)
|
selectedIssues.filter((i) => i !== val)
|
||||||
);
|
);
|
||||||
else {
|
else setValue("delete_issue_ids", [...selectedIssues, val]);
|
||||||
const newToDelete = selectedIssues;
|
|
||||||
newToDelete.push(val);
|
|
||||||
|
|
||||||
setValue("delete_issue_ids", newToDelete);
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="relative m-1">
|
<div className="relative m-1">
|
||||||
|
@ -1,21 +1,26 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Tab } from "@headlessui/react";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
import useSWR from "swr";
|
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
|
import useSWR from "swr";
|
||||||
|
|
||||||
|
// headless ui
|
||||||
|
import { Tab } from "@headlessui/react";
|
||||||
|
// services
|
||||||
|
import issuesServices from "services/issues.service";
|
||||||
|
import projectService from "services/project.service";
|
||||||
|
// components
|
||||||
|
import SingleProgressStats from "components/core/sidebar/single-progress-stats";
|
||||||
// ui
|
// ui
|
||||||
import SingleProgressStats from "./single-progress-stats";
|
|
||||||
import { Avatar } from "components/ui";
|
import { Avatar } from "components/ui";
|
||||||
// icons
|
// icons
|
||||||
import User from "public/user.png";
|
import User from "public/user.png";
|
||||||
// types
|
// types
|
||||||
import { IIssue, IIssueLabels } from "types";
|
import { IIssue, IIssueLabels } from "types";
|
||||||
// constants
|
// fetch-keys
|
||||||
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
|
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||||
// services
|
// types
|
||||||
import issuesServices from "services/issues.service";
|
|
||||||
import projectService from "services/project.service";
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
groupedIssues: any;
|
groupedIssues: any;
|
||||||
issues: IIssue[];
|
issues: IIssue[];
|
||||||
|
@ -183,12 +183,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
|||||||
"blocked_issue_ids",
|
"blocked_issue_ids",
|
||||||
selectedIssues.filter((i) => i !== val)
|
selectedIssues.filter((i) => i !== val)
|
||||||
);
|
);
|
||||||
else {
|
else setValue("blocked_issue_ids", [...selectedIssues, val]);
|
||||||
const newBlocked = selectedIssues;
|
|
||||||
newBlocked.push(val);
|
|
||||||
|
|
||||||
setValue("blocked_issue_ids", newBlocked);
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="relative m-1">
|
<div className="relative m-1">
|
||||||
|
@ -184,12 +184,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
|
|||||||
"blocker_issue_ids",
|
"blocker_issue_ids",
|
||||||
selectedIssues.filter((i) => i !== val)
|
selectedIssues.filter((i) => i !== val)
|
||||||
);
|
);
|
||||||
else {
|
else setValue("blocker_issue_ids", [...selectedIssues, val]);
|
||||||
const newBlockers = selectedIssues;
|
|
||||||
newBlockers.push(val);
|
|
||||||
|
|
||||||
setValue("blocker_issue_ids", newBlockers);
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="relative m-1">
|
<div className="relative m-1">
|
||||||
|
@ -7,18 +7,19 @@ import { mutate } from "swr";
|
|||||||
|
|
||||||
// react-hook-form
|
// react-hook-form
|
||||||
import { Controller, useForm } from "react-hook-form";
|
import { Controller, useForm } from "react-hook-form";
|
||||||
// icons
|
// react-circular-progressbar
|
||||||
import { CalendarDaysIcon, ChartPieIcon, LinkIcon, UserIcon } from "@heroicons/react/24/outline";
|
|
||||||
|
|
||||||
// progress-bar
|
|
||||||
import { CircularProgressbar } from "react-circular-progressbar";
|
import { CircularProgressbar } from "react-circular-progressbar";
|
||||||
|
import "react-circular-progressbar/dist/styles.css";
|
||||||
// ui
|
// ui
|
||||||
import { Loader, CustomDatePicker } from "components/ui";
|
import { Loader, CustomDatePicker } from "components/ui";
|
||||||
import "react-circular-progressbar/dist/styles.css";
|
|
||||||
// hooks
|
// hooks
|
||||||
import useToast from "hooks/use-toast";
|
import useToast from "hooks/use-toast";
|
||||||
// services
|
// services
|
||||||
import cyclesService from "services/cycles.service";
|
import cyclesService from "services/cycles.service";
|
||||||
|
// components
|
||||||
|
import SidebarProgressStats from "components/core/sidebar/sidebar-progress-stats";
|
||||||
|
// icons
|
||||||
|
import { CalendarDaysIcon, ChartPieIcon, LinkIcon, UserIcon } from "@heroicons/react/24/outline";
|
||||||
// helpers
|
// helpers
|
||||||
import { copyTextToClipboard } from "helpers/string.helper";
|
import { copyTextToClipboard } from "helpers/string.helper";
|
||||||
import { groupBy } from "helpers/array.helper";
|
import { groupBy } from "helpers/array.helper";
|
||||||
@ -26,7 +27,6 @@ import { groupBy } from "helpers/array.helper";
|
|||||||
import { CycleIssueResponse, ICycle, IIssue } from "types";
|
import { CycleIssueResponse, ICycle, IIssue } from "types";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import { CYCLE_DETAILS } from "constants/fetch-keys";
|
import { CYCLE_DETAILS } from "constants/fetch-keys";
|
||||||
import SidebarProgressStats from "components/core/sidebar/sidebar-progress-stats";
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
issues: IIssue[];
|
issues: IIssue[];
|
||||||
|
@ -14,7 +14,6 @@ import AppLayout from "layouts/app-layout";
|
|||||||
// contexts
|
// contexts
|
||||||
import { IssueViewContextProvider } from "contexts/issue-view.context";
|
import { IssueViewContextProvider } from "contexts/issue-view.context";
|
||||||
// components
|
// components
|
||||||
import { CreateUpdateIssueModal } from "components/issues";
|
|
||||||
import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
|
import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
|
||||||
import CycleDetailSidebar from "components/project/cycles/cycle-detail-sidebar";
|
import CycleDetailSidebar from "components/project/cycles/cycle-detail-sidebar";
|
||||||
// services
|
// services
|
||||||
@ -25,28 +24,20 @@ import projectService from "services/project.service";
|
|||||||
import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
|
import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
|
||||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||||
// types
|
// types
|
||||||
import { CycleIssueResponse, IIssue, IIssueLabels, SelectIssue, UserAuth } from "types";
|
import { CycleIssueResponse, UserAuth } from "types";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import {
|
import {
|
||||||
CYCLE_ISSUES,
|
CYCLE_ISSUES,
|
||||||
CYCLE_LIST,
|
CYCLE_LIST,
|
||||||
PROJECT_ISSUES_LIST,
|
PROJECT_ISSUES_LIST,
|
||||||
PROJECT_DETAILS,
|
PROJECT_DETAILS,
|
||||||
PROJECT_ISSUE_LABELS,
|
|
||||||
CYCLE_DETAILS,
|
CYCLE_DETAILS,
|
||||||
PROJECT_MEMBERS,
|
|
||||||
} from "constants/fetch-keys";
|
} from "constants/fetch-keys";
|
||||||
|
|
||||||
const SingleCycle: React.FC<UserAuth> = (props) => {
|
const SingleCycle: React.FC<UserAuth> = (props) => {
|
||||||
const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
|
|
||||||
const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
|
|
||||||
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
|
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
|
||||||
const [cycleSidebar, setCycleSidebar] = useState(true);
|
const [cycleSidebar, setCycleSidebar] = useState(true);
|
||||||
|
|
||||||
const [preloadedData, setPreloadedData] = useState<
|
|
||||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | null
|
|
||||||
>(null);
|
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId, cycleId } = router.query;
|
const { workspaceSlug, projectId, cycleId } = router.query;
|
||||||
|
|
||||||
@ -104,18 +95,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
|||||||
cycle: cycleId as string,
|
cycle: cycleId as string,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const openCreateIssueModal = (
|
|
||||||
issue?: IIssue,
|
|
||||||
actionType: "create" | "edit" | "delete" = "create"
|
|
||||||
) => {
|
|
||||||
if (issue) {
|
|
||||||
setPreloadedData(null);
|
|
||||||
setSelectedIssues({ ...issue, actionType });
|
|
||||||
} else setSelectedIssues(null);
|
|
||||||
|
|
||||||
setIsIssueModalOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const openIssuesListModal = () => {
|
const openIssuesListModal = () => {
|
||||||
setCycleIssuesListModal(true);
|
setCycleIssuesListModal(true);
|
||||||
};
|
};
|
||||||
@ -136,16 +115,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<IssueViewContextProvider>
|
<IssueViewContextProvider>
|
||||||
<CreateUpdateIssueModal
|
|
||||||
isOpen={isIssueModalOpen && selectedIssues?.actionType !== "delete"}
|
|
||||||
data={selectedIssues}
|
|
||||||
prePopulateData={
|
|
||||||
preloadedData
|
|
||||||
? { cycle: cycleId as string, ...preloadedData }
|
|
||||||
: { cycle: cycleId as string, ...selectedIssues }
|
|
||||||
}
|
|
||||||
handleClose={() => setIsIssueModalOpen(false)}
|
|
||||||
/>
|
|
||||||
<ExistingIssuesListModal
|
<ExistingIssuesListModal
|
||||||
isOpen={cycleIssuesListModal}
|
isOpen={cycleIssuesListModal}
|
||||||
handleClose={() => setCycleIssuesListModal(false)}
|
handleClose={() => setCycleIssuesListModal(false)}
|
||||||
@ -226,7 +195,12 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
|||||||
title="Create a new issue"
|
title="Create a new issue"
|
||||||
description="Click to create a new issue inside the cycle."
|
description="Click to create a new issue inside the cycle."
|
||||||
Icon={PlusIcon}
|
Icon={PlusIcon}
|
||||||
action={openCreateIssueModal}
|
action={() => {
|
||||||
|
const e = new KeyboardEvent("keydown", {
|
||||||
|
key: "c",
|
||||||
|
});
|
||||||
|
document.dispatchEvent(e);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<EmptySpaceItem
|
<EmptySpaceItem
|
||||||
title="Add an existing issue"
|
title="Add an existing issue"
|
||||||
|
@ -245,7 +245,12 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
|||||||
title="Create a new issue"
|
title="Create a new issue"
|
||||||
description="Click to create a new issue inside the module."
|
description="Click to create a new issue inside the module."
|
||||||
Icon={PlusIcon}
|
Icon={PlusIcon}
|
||||||
action={openCreateIssueModal}
|
action={() => {
|
||||||
|
const e = new KeyboardEvent("keydown", {
|
||||||
|
key: "c",
|
||||||
|
});
|
||||||
|
document.dispatchEvent(e);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<EmptySpaceItem
|
<EmptySpaceItem
|
||||||
title="Add an existing issue"
|
title="Add an existing issue"
|
||||||
|
Loading…
Reference in New Issue
Block a user