fix: create issue modal bugs (#257)

This commit is contained in:
Aaryan Khandelwal 2023-02-08 23:58:53 +05:30 committed by GitHub
parent 8e3541b947
commit 4ffa31fd02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 36 additions and 67 deletions

View File

@ -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">

View File

@ -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[];

View File

@ -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">

View File

@ -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">

View File

@ -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[];

View File

@ -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"

View File

@ -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"