mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
dev: revamp peek overview (#2021)
* dev: mobx for issues store * refactor: peek overview component * chore: update open issue button * fix: issue mutation after any crud action * chore: remove peek overview from gantt * chore: refactor code
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
17aff1f369
commit
f5a076e9a9
@ -665,7 +665,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-custom-text-200">
|
||||
<DiscordIcon className="h-4 w-4" color="#6b7280" />
|
||||
<DiscordIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
|
||||
Join our Discord
|
||||
</div>
|
||||
</Command.Item>
|
||||
|
||||
@ -6,7 +6,6 @@ import { mutate } from "swr";
|
||||
|
||||
// components
|
||||
import {
|
||||
IssuePeekOverview,
|
||||
ViewAssigneeSelect,
|
||||
ViewDueDateSelect,
|
||||
ViewEstimateSelect,
|
||||
@ -76,9 +75,6 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
// issue peek overview
|
||||
const [issuePeekOverview, setIssuePeekOverview] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
|
||||
@ -161,6 +157,15 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
|
||||
[workspaceSlug, projectId, cycleId, moduleId, viewId, params, user]
|
||||
);
|
||||
|
||||
const openPeekOverview = () => {
|
||||
const { query } = router;
|
||||
|
||||
router.push({
|
||||
pathname: router.pathname,
|
||||
query: { ...query, peekIssue: issue.id },
|
||||
});
|
||||
};
|
||||
|
||||
const handleCopyText = () => {
|
||||
const originURL =
|
||||
typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
|
||||
@ -183,15 +188,6 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<IssuePeekOverview
|
||||
handleDeleteIssue={() => handleDeleteIssue(issue)}
|
||||
handleUpdateIssue={async (formData) => partialUpdateIssue(formData, issue)}
|
||||
issue={issue}
|
||||
isOpen={issuePeekOverview}
|
||||
onClose={() => setIssuePeekOverview(false)}
|
||||
workspaceSlug={workspaceSlug?.toString() ?? ""}
|
||||
readOnly={isNotAllowed}
|
||||
/>
|
||||
<div
|
||||
className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
|
||||
style={{ gridTemplateColumns }}
|
||||
@ -280,7 +276,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
|
||||
<button
|
||||
type="button"
|
||||
className="truncate text-custom-text-100 text-left cursor-pointer w-full text-[0.825rem]"
|
||||
onClick={() => setIssuePeekOverview(true)}
|
||||
onClick={openPeekOverview}
|
||||
>
|
||||
{issue.name}
|
||||
</button>
|
||||
|
||||
@ -6,6 +6,7 @@ import { useRouter } from "next/router";
|
||||
// components
|
||||
import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
|
||||
import { CustomMenu, Spinner } from "components/ui";
|
||||
import { IssuePeekOverview } from "components/issues";
|
||||
// hooks
|
||||
import useIssuesProperties from "hooks/use-issue-properties";
|
||||
import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
|
||||
@ -38,7 +39,7 @@ export const SpreadsheetView: React.FC<Props> = ({
|
||||
|
||||
const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
|
||||
|
||||
const { spreadsheetIssues } = useSpreadsheetIssuesView();
|
||||
const { spreadsheetIssues, mutateIssues } = useSpreadsheetIssuesView();
|
||||
|
||||
const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
|
||||
|
||||
@ -59,80 +60,88 @@ export const SpreadsheetView: React.FC<Props> = ({
|
||||
.join(" ");
|
||||
|
||||
return (
|
||||
<div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
|
||||
<div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
|
||||
<SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
|
||||
</div>
|
||||
{spreadsheetIssues ? (
|
||||
<div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
|
||||
{spreadsheetIssues.map((issue: IIssue, index) => (
|
||||
<SpreadsheetIssues
|
||||
key={`${issue.id}_${index}`}
|
||||
index={index}
|
||||
issue={issue}
|
||||
expandedIssues={expandedIssues}
|
||||
setExpandedIssues={setExpandedIssues}
|
||||
gridTemplateColumns={gridTemplateColumns}
|
||||
properties={properties}
|
||||
handleIssueAction={handleIssueAction}
|
||||
disableUserActions={disableUserActions}
|
||||
user={user}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
))}
|
||||
<div
|
||||
className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
|
||||
style={{ gridTemplateColumns }}
|
||||
>
|
||||
{type === "issue" ? (
|
||||
<button
|
||||
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", { key: "c" });
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Issue
|
||||
</button>
|
||||
) : (
|
||||
!disableUserActions && (
|
||||
<CustomMenu
|
||||
className="sticky left-0 z-[1]"
|
||||
customButton={
|
||||
<button
|
||||
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
|
||||
type="button"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Issue
|
||||
</button>
|
||||
}
|
||||
position="left"
|
||||
optionsClassName="left-5 !w-36"
|
||||
noBorder
|
||||
>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", { key: "c" });
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
>
|
||||
Create new
|
||||
</CustomMenu.MenuItem>
|
||||
{openIssuesListModal && (
|
||||
<CustomMenu.MenuItem onClick={openIssuesListModal}>
|
||||
Add an existing issue
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
</CustomMenu>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<>
|
||||
<IssuePeekOverview
|
||||
handleMutation={() => mutateIssues()}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
workspaceSlug={workspaceSlug?.toString() ?? ""}
|
||||
readOnly={disableUserActions}
|
||||
/>
|
||||
<div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
|
||||
<div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
|
||||
<SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
|
||||
</div>
|
||||
) : (
|
||||
<Spinner />
|
||||
)}
|
||||
</div>
|
||||
{spreadsheetIssues ? (
|
||||
<div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
|
||||
{spreadsheetIssues.map((issue: IIssue, index) => (
|
||||
<SpreadsheetIssues
|
||||
key={`${issue.id}_${index}`}
|
||||
index={index}
|
||||
issue={issue}
|
||||
expandedIssues={expandedIssues}
|
||||
setExpandedIssues={setExpandedIssues}
|
||||
gridTemplateColumns={gridTemplateColumns}
|
||||
properties={properties}
|
||||
handleIssueAction={handleIssueAction}
|
||||
disableUserActions={disableUserActions}
|
||||
user={user}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
))}
|
||||
<div
|
||||
className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
|
||||
style={{ gridTemplateColumns }}
|
||||
>
|
||||
{type === "issue" ? (
|
||||
<button
|
||||
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", { key: "c" });
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Issue
|
||||
</button>
|
||||
) : (
|
||||
!disableUserActions && (
|
||||
<CustomMenu
|
||||
className="sticky left-0 z-[1]"
|
||||
customButton={
|
||||
<button
|
||||
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
|
||||
type="button"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Issue
|
||||
</button>
|
||||
}
|
||||
position="left"
|
||||
optionsClassName="left-5 !w-36"
|
||||
noBorder
|
||||
>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", { key: "c" });
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
>
|
||||
Create new
|
||||
</CustomMenu.MenuItem>
|
||||
{openIssuesListModal && (
|
||||
<CustomMenu.MenuItem onClick={openIssuesListModal}>
|
||||
Add an existing issue
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
</CustomMenu>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Spinner />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -15,7 +15,7 @@ export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center relative h-full w-full rounded"
|
||||
className="flex items-center relative h-full w-full rounded cursor-pointer"
|
||||
style={{ backgroundColor: data?.state_detail?.color }}
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/issues/${data?.id}`)}
|
||||
>
|
||||
@ -49,7 +49,7 @@ export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative w-full flex items-center gap-2 h-full"
|
||||
className="relative w-full flex items-center gap-2 h-full cursor-pointer"
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/issues/${data?.id}`)}
|
||||
>
|
||||
{getStateGroupIcon(data?.state_detail?.group, "14", "14", data?.state_detail?.color)}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
// components
|
||||
import {
|
||||
PeekOverviewHeader,
|
||||
PeekOverviewIssueActivity,
|
||||
@ -5,13 +6,16 @@ import {
|
||||
PeekOverviewIssueProperties,
|
||||
TPeekOverviewModes,
|
||||
} from "components/issues";
|
||||
// ui
|
||||
import { Loader } from "components/ui";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
|
||||
type Props = {
|
||||
handleClose: () => void;
|
||||
handleDeleteIssue: () => void;
|
||||
handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
|
||||
issue: IIssue;
|
||||
handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
|
||||
issue: IIssue | undefined;
|
||||
mode: TPeekOverviewModes;
|
||||
readOnly: boolean;
|
||||
setMode: (mode: TPeekOverviewModes) => void;
|
||||
@ -40,39 +44,59 @@ export const FullScreenPeekView: React.FC<Props> = ({
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
</div>
|
||||
<div className="h-full w-full px-6 overflow-y-auto">
|
||||
{/* issue title and description */}
|
||||
<div className="w-full">
|
||||
<PeekOverviewIssueDetails
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
readOnly={readOnly}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
{issue ? (
|
||||
<div className="h-full w-full px-6 overflow-y-auto">
|
||||
{/* issue title and description */}
|
||||
<div className="w-full">
|
||||
<PeekOverviewIssueDetails
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
readOnly={readOnly}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
</div>
|
||||
{/* divider */}
|
||||
<div className="h-[1] w-full border-t border-custom-border-200 my-5" />
|
||||
{/* issue activity/comments */}
|
||||
<div className="w-full pb-5">
|
||||
<PeekOverviewIssueActivity
|
||||
workspaceSlug={workspaceSlug}
|
||||
issue={issue}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* divider */}
|
||||
<div className="h-[1] w-full border-t border-custom-border-200 my-5" />
|
||||
{/* issue activity/comments */}
|
||||
<div className="w-full">
|
||||
<PeekOverviewIssueActivity
|
||||
workspaceSlug={workspaceSlug}
|
||||
issue={issue}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Loader className="px-6">
|
||||
<Loader.Item height="30px" />
|
||||
<div className="space-y-2 mt-3">
|
||||
<Loader.Item height="20px" width="70%" />
|
||||
<Loader.Item height="20px" width="60%" />
|
||||
<Loader.Item height="20px" width="60%" />
|
||||
</div>
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-span-3 h-full w-full overflow-y-auto">
|
||||
{/* issue properties */}
|
||||
<div className="w-full px-6 py-5">
|
||||
<PeekOverviewIssueProperties
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
issue={issue}
|
||||
mode="full"
|
||||
onChange={handleUpdateIssue}
|
||||
readOnly={readOnly}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
{issue ? (
|
||||
<PeekOverviewIssueProperties
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
mode="full"
|
||||
readOnly={readOnly}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
) : (
|
||||
<Loader className="mt-11 space-y-4">
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="30px" />
|
||||
<Loader.Item height="30px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,18 +1,21 @@
|
||||
import Link from "next/link";
|
||||
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { CustomSelect, Icon } from "components/ui";
|
||||
// icons
|
||||
import { East, OpenInFull } from "@mui/icons-material";
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import { TPeekOverviewModes } from "./layout";
|
||||
import { ArrowRightAlt, CloseFullscreen, East, OpenInFull } from "@mui/icons-material";
|
||||
|
||||
type Props = {
|
||||
handleClose: () => void;
|
||||
handleDeleteIssue: () => void;
|
||||
issue: IIssue;
|
||||
issue: IIssue | undefined;
|
||||
mode: TPeekOverviewModes;
|
||||
setMode: (mode: TPeekOverviewModes) => void;
|
||||
workspaceSlug: string;
|
||||
@ -47,12 +50,9 @@ export const PeekOverviewHeader: React.FC<Props> = ({
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const handleCopyLink = () => {
|
||||
const originURL =
|
||||
typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
|
||||
const urlToCopy = window.location.href;
|
||||
|
||||
copyTextToClipboard(
|
||||
`${originURL}/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`
|
||||
).then(() => {
|
||||
copyTextToClipboard(urlToCopy).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Link copied!",
|
||||
@ -73,23 +73,15 @@ export const PeekOverviewHeader: React.FC<Props> = ({
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
{mode === "modal" || mode === "full" ? (
|
||||
<button type="button" onClick={() => setMode("side")}>
|
||||
<CloseFullscreen
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" onClick={() => setMode("modal")}>
|
||||
<Link href={`/${workspaceSlug}/projects/${issue?.project}/issues/${issue?.id}`}>
|
||||
<a>
|
||||
<OpenInFull
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</a>
|
||||
</Link>
|
||||
<CustomSelect
|
||||
value={mode}
|
||||
onChange={(val: TPeekOverviewModes) => setMode(val)}
|
||||
@ -119,7 +111,7 @@ export const PeekOverviewHeader: React.FC<Props> = ({
|
||||
</CustomSelect>
|
||||
</div>
|
||||
{(mode === "side" || mode === "modal") && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<button type="button" onClick={handleCopyLink} className="-rotate-45">
|
||||
<Icon iconName="link" />
|
||||
</button>
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
// mobx
|
||||
import { observer } from "mobx-react-lite";
|
||||
// headless ui
|
||||
import { Disclosure } from "@headlessui/react";
|
||||
import { getStateGroupIcon } from "components/icons";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import useUser from "hooks/use-user";
|
||||
// components
|
||||
import {
|
||||
SidebarAssigneeSelect,
|
||||
@ -9,27 +14,27 @@ import {
|
||||
SidebarStateSelect,
|
||||
TPeekOverviewModes,
|
||||
} from "components/issues";
|
||||
// icons
|
||||
// ui
|
||||
import { CustomDatePicker, Icon } from "components/ui";
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
import useToast from "hooks/use-toast";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
|
||||
type Props = {
|
||||
handleDeleteIssue: () => void;
|
||||
handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
|
||||
issue: IIssue;
|
||||
mode: TPeekOverviewModes;
|
||||
onChange: (issueProperty: Partial<IIssue>) => void;
|
||||
readOnly: boolean;
|
||||
workspaceSlug: string;
|
||||
};
|
||||
|
||||
export const PeekOverviewIssueProperties: React.FC<Props> = ({
|
||||
handleDeleteIssue,
|
||||
handleUpdateIssue,
|
||||
issue,
|
||||
mode,
|
||||
onChange,
|
||||
readOnly,
|
||||
workspaceSlug,
|
||||
}) => {
|
||||
@ -86,7 +91,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
|
||||
<div className="w-3/4">
|
||||
<SidebarStateSelect
|
||||
value={issue.state}
|
||||
onChange={(val: string) => onChange({ state: val })}
|
||||
onChange={(val: string) => handleUpdateIssue({ state: val })}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
</div>
|
||||
@ -99,7 +104,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
|
||||
<div className="w-3/4">
|
||||
<SidebarAssigneeSelect
|
||||
value={issue.assignees_list}
|
||||
onChange={(val: string[]) => onChange({ assignees_list: val })}
|
||||
onChange={(val: string[]) => handleUpdateIssue({ assignees_list: val })}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
</div>
|
||||
@ -112,7 +117,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
|
||||
<div className="w-3/4">
|
||||
<SidebarPrioritySelect
|
||||
value={issue.priority}
|
||||
onChange={(val: string) => onChange({ priority: val })}
|
||||
onChange={(val: string) => handleUpdateIssue({ priority: val })}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
</div>
|
||||
@ -128,7 +133,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
|
||||
placeholder="Start date"
|
||||
value={issue.start_date}
|
||||
onChange={(val) =>
|
||||
onChange({
|
||||
handleUpdateIssue({
|
||||
start_date: val,
|
||||
})
|
||||
}
|
||||
@ -153,7 +158,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
|
||||
placeholder="Due date"
|
||||
value={issue.target_date}
|
||||
onChange={(val) =>
|
||||
onChange({
|
||||
handleUpdateIssue({
|
||||
target_date: val,
|
||||
})
|
||||
}
|
||||
@ -175,7 +180,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
|
||||
<div className="w-3/4">
|
||||
<SidebarEstimateSelect
|
||||
value={issue.estimate_point}
|
||||
onChange={(val: number | null) => onChange({ estimate_point: val })}
|
||||
onChange={(val: number | null) =>handleUpdateIssue({ estimate_point: val })}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,107 +1,184 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// mobx
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// headless ui
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
// components
|
||||
import { FullScreenPeekView, SidePeekView } from "components/issues";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
|
||||
type Props = {
|
||||
handleDeleteIssue: () => void;
|
||||
handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
|
||||
issue: IIssue | null;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
workspaceSlug: string;
|
||||
handleMutation: () => void;
|
||||
projectId: string;
|
||||
readOnly: boolean;
|
||||
workspaceSlug: string;
|
||||
};
|
||||
|
||||
export type TPeekOverviewModes = "side" | "modal" | "full";
|
||||
|
||||
export const IssuePeekOverview: React.FC<Props> = ({
|
||||
handleDeleteIssue,
|
||||
handleUpdateIssue,
|
||||
issue,
|
||||
isOpen,
|
||||
onClose,
|
||||
workspaceSlug,
|
||||
readOnly,
|
||||
}) => {
|
||||
const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
|
||||
export const IssuePeekOverview: React.FC<Props> = observer(
|
||||
({ handleMutation, projectId, readOnly, workspaceSlug }) => {
|
||||
const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
|
||||
const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
|
||||
const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
setPeekOverviewMode("side");
|
||||
};
|
||||
const router = useRouter();
|
||||
const { peekIssue } = router.query;
|
||||
|
||||
if (!issue || !isOpen) return null;
|
||||
const { issues: issuesStore } = useMobxStore();
|
||||
const { deleteIssue, getIssueById, issues, updateIssue } = issuesStore;
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
{/* add backdrop conditionally */}
|
||||
{(peekOverviewMode === "modal" || peekOverviewMode === "full") && (
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
)}
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
<div className="relative h-full w-full">
|
||||
const issue = issues[peekIssue?.toString() ?? ""];
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const handleClose = () => {
|
||||
const { query } = router;
|
||||
delete query.peekIssue;
|
||||
|
||||
router.push({
|
||||
pathname: router.pathname,
|
||||
query: { ...query },
|
||||
});
|
||||
};
|
||||
|
||||
const handleUpdateIssue = async (formData: Partial<IIssue>) => {
|
||||
if (!issue || !user) return;
|
||||
|
||||
await updateIssue(workspaceSlug, projectId, issue.id, formData, user);
|
||||
handleMutation();
|
||||
};
|
||||
|
||||
const handleDeleteIssue = async () => {
|
||||
if (!issue || !user) return;
|
||||
|
||||
await deleteIssue(workspaceSlug, projectId, issue.id, user);
|
||||
handleMutation();
|
||||
|
||||
handleClose();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!peekIssue) return;
|
||||
|
||||
getIssueById(workspaceSlug, projectId, peekIssue.toString());
|
||||
}, [getIssueById, peekIssue, projectId, workspaceSlug]);
|
||||
|
||||
useEffect(() => {
|
||||
if (peekIssue) {
|
||||
if (peekOverviewMode === "side") {
|
||||
setIsSidePeekOpen(true);
|
||||
setIsModalPeekOpen(false);
|
||||
} else {
|
||||
setIsModalPeekOpen(true);
|
||||
setIsSidePeekOpen(false);
|
||||
}
|
||||
} else {
|
||||
console.log("Triggered");
|
||||
setIsSidePeekOpen(false);
|
||||
setIsModalPeekOpen(false);
|
||||
}
|
||||
}, [peekIssue, peekOverviewMode]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
<div className="relative h-full w-full">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="transition-transform duration-300"
|
||||
enterFrom="translate-x-full"
|
||||
enterTo="translate-x-0"
|
||||
leave="transition-transform duration-200"
|
||||
leaveFrom="translate-x-0"
|
||||
leaveTo="translate-x-full"
|
||||
>
|
||||
<Dialog.Panel className="absolute z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
|
||||
<SidePeekView
|
||||
handleClose={handleClose}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
mode={peekOverviewMode}
|
||||
readOnly={readOnly}
|
||||
setMode={(mode) => setPeekOverviewMode(mode)}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
<Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Dialog.Panel
|
||||
className={`absolute z-20 bg-custom-background-100 ${
|
||||
peekOverviewMode === "side"
|
||||
? "top-0 right-0 h-full w-1/2 shadow-custom-shadow-md"
|
||||
: peekOverviewMode === "modal"
|
||||
? "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[70%] w-3/5 rounded-lg shadow-custom-shadow-xl"
|
||||
: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[95%] w-[95%] rounded-lg shadow-custom-shadow-xl"
|
||||
}`}
|
||||
>
|
||||
{(peekOverviewMode === "side" || peekOverviewMode === "modal") && (
|
||||
<SidePeekView
|
||||
handleClose={handleClose}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
mode={peekOverviewMode}
|
||||
readOnly={readOnly}
|
||||
setMode={(mode) => setPeekOverviewMode(mode)}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
)}
|
||||
{peekOverviewMode === "full" && (
|
||||
<FullScreenPeekView
|
||||
handleClose={handleClose}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
mode={peekOverviewMode}
|
||||
readOnly={readOnly}
|
||||
setMode={(mode) => setPeekOverviewMode(mode)}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
)}
|
||||
</Dialog.Panel>
|
||||
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
<div className="relative h-full w-full">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Dialog.Panel
|
||||
className={`absolute z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
|
||||
peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
|
||||
}`}
|
||||
>
|
||||
{peekOverviewMode === "modal" && (
|
||||
<SidePeekView
|
||||
handleClose={handleClose}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
mode={peekOverviewMode}
|
||||
readOnly={readOnly}
|
||||
setMode={(mode) => setPeekOverviewMode(mode)}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
)}
|
||||
{peekOverviewMode === "full" && (
|
||||
<FullScreenPeekView
|
||||
handleClose={handleClose}
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
mode={peekOverviewMode}
|
||||
readOnly={readOnly}
|
||||
setMode={(mode) => setPeekOverviewMode(mode)}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
)}
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
</>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
// components
|
||||
import {
|
||||
PeekOverviewHeader,
|
||||
PeekOverviewIssueActivity,
|
||||
@ -5,13 +6,16 @@ import {
|
||||
PeekOverviewIssueProperties,
|
||||
TPeekOverviewModes,
|
||||
} from "components/issues";
|
||||
// ui
|
||||
import { Loader } from "components/ui";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
|
||||
type Props = {
|
||||
handleClose: () => void;
|
||||
handleDeleteIssue: () => void;
|
||||
handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
|
||||
issue: IIssue;
|
||||
handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
|
||||
issue: IIssue | undefined;
|
||||
mode: TPeekOverviewModes;
|
||||
readOnly: boolean;
|
||||
setMode: (mode: TPeekOverviewModes) => void;
|
||||
@ -39,37 +43,50 @@ export const SidePeekView: React.FC<Props> = ({
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
</div>
|
||||
<div className="h-full w-full px-6 overflow-y-auto">
|
||||
{/* issue title and description */}
|
||||
<div className="w-full">
|
||||
<PeekOverviewIssueDetails
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
readOnly={readOnly}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
{issue ? (
|
||||
<div className="h-full w-full px-6 overflow-y-auto">
|
||||
{/* issue title and description */}
|
||||
<div className="w-full">
|
||||
<PeekOverviewIssueDetails
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
readOnly={readOnly}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
</div>
|
||||
{/* issue properties */}
|
||||
<div className="w-full mt-10">
|
||||
<PeekOverviewIssueProperties
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
mode={mode}
|
||||
readOnly={readOnly}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
</div>
|
||||
{/* divider */}
|
||||
<div className="h-[1] w-full border-t border-custom-border-200 my-5" />
|
||||
{/* issue activity/comments */}
|
||||
<div className="w-full pb-5">
|
||||
{issue && (
|
||||
<PeekOverviewIssueActivity
|
||||
workspaceSlug={workspaceSlug}
|
||||
issue={issue}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* issue properties */}
|
||||
<div className="w-full mt-10">
|
||||
<PeekOverviewIssueProperties
|
||||
handleDeleteIssue={handleDeleteIssue}
|
||||
issue={issue}
|
||||
mode={mode}
|
||||
onChange={handleUpdateIssue}
|
||||
readOnly={readOnly}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
</div>
|
||||
{/* divider */}
|
||||
<div className="h-[1] w-full border-t border-custom-border-200 my-5" />
|
||||
{/* issue activity/comments */}
|
||||
<div className="w-full pb-5">
|
||||
<PeekOverviewIssueActivity
|
||||
workspaceSlug={workspaceSlug}
|
||||
issue={issue}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Loader className="px-6">
|
||||
<Loader.Item height="30px" />
|
||||
<div className="space-y-2 mt-3">
|
||||
<Loader.Item height="20px" width="70%" />
|
||||
<Loader.Item height="20px" width="60%" />
|
||||
<Loader.Item height="20px" width="60%" />
|
||||
</div>
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -48,7 +48,7 @@ const useSpreadsheetIssuesView = () => {
|
||||
sub_issue: "false",
|
||||
};
|
||||
|
||||
const { data: projectSpreadsheetIssues } = useSWR(
|
||||
const { data: projectSpreadsheetIssues, mutate: mutateProjectSpreadsheetIssues } = useSWR(
|
||||
workspaceSlug && projectId
|
||||
? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params)
|
||||
: null,
|
||||
@ -58,7 +58,7 @@ const useSpreadsheetIssuesView = () => {
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: cycleSpreadsheetIssues } = useSWR(
|
||||
const { data: cycleSpreadsheetIssues, mutate: mutateCycleSpreadsheetIssues } = useSWR(
|
||||
workspaceSlug && projectId && cycleId
|
||||
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
|
||||
: null,
|
||||
@ -73,7 +73,7 @@ const useSpreadsheetIssuesView = () => {
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: moduleSpreadsheetIssues } = useSWR(
|
||||
const { data: moduleSpreadsheetIssues, mutate: mutateModuleSpreadsheetIssues } = useSWR(
|
||||
workspaceSlug && projectId && moduleId
|
||||
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
|
||||
: null,
|
||||
@ -88,7 +88,7 @@ const useSpreadsheetIssuesView = () => {
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: viewSpreadsheetIssues } = useSWR(
|
||||
const { data: viewSpreadsheetIssues, mutate: mutateViewSpreadsheetIssues } = useSWR(
|
||||
workspaceSlug && projectId && viewId && params ? VIEW_ISSUES(viewId.toString(), params) : null,
|
||||
workspaceSlug && projectId && viewId && params
|
||||
? () =>
|
||||
@ -106,6 +106,13 @@ const useSpreadsheetIssuesView = () => {
|
||||
|
||||
return {
|
||||
issueView,
|
||||
mutateIssues: cycleId
|
||||
? mutateCycleSpreadsheetIssues
|
||||
: moduleId
|
||||
? mutateModuleSpreadsheetIssues
|
||||
: viewId
|
||||
? mutateViewSpreadsheetIssues
|
||||
: mutateProjectSpreadsheetIssues,
|
||||
spreadsheetIssues: spreadsheetIssues ?? [],
|
||||
orderBy,
|
||||
setOrderBy,
|
||||
|
||||
172
apps/app/store/issues.ts
Normal file
172
apps/app/store/issues.ts
Normal file
@ -0,0 +1,172 @@
|
||||
// mobx
|
||||
import { action, observable, runInAction, makeAutoObservable } from "mobx";
|
||||
// services
|
||||
import issueService from "services/issues.service";
|
||||
// types
|
||||
import type { ICurrentUserResponse, IIssue } from "types";
|
||||
|
||||
class IssuesStore {
|
||||
issues: { [key: string]: IIssue } = {};
|
||||
isIssuesLoading: boolean = false;
|
||||
rootStore: any | null = null;
|
||||
|
||||
constructor(_rootStore: any | null = null) {
|
||||
makeAutoObservable(this, {
|
||||
issues: observable.ref,
|
||||
loadIssues: action,
|
||||
getIssueById: action,
|
||||
isIssuesLoading: observable,
|
||||
createIssue: action,
|
||||
updateIssue: action,
|
||||
deleteIssue: action,
|
||||
});
|
||||
|
||||
this.rootStore = _rootStore;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Fetch all issues of a project and hydrate issues field
|
||||
*/
|
||||
|
||||
loadIssues = async (workspaceSlug: string, projectId: string) => {
|
||||
this.isIssuesLoading = true;
|
||||
try {
|
||||
const issuesResponse: IIssue[] = (await issueService.getIssuesWithParams(
|
||||
workspaceSlug,
|
||||
projectId
|
||||
)) as IIssue[];
|
||||
|
||||
const issues: { [kye: string]: IIssue } = {};
|
||||
issuesResponse.forEach((issue) => {
|
||||
issues[issue.id] = issue;
|
||||
});
|
||||
|
||||
runInAction(() => {
|
||||
this.issues = issues;
|
||||
this.isIssuesLoading = false;
|
||||
});
|
||||
} catch (error) {
|
||||
this.isIssuesLoading = false;
|
||||
console.error("Fetching issues error", error);
|
||||
}
|
||||
};
|
||||
|
||||
getIssueById = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string
|
||||
): Promise<IIssue> => {
|
||||
if (this.issues[issueId]) return this.issues[issueId];
|
||||
|
||||
try {
|
||||
const issueResponse: IIssue = await issueService.retrieve(workspaceSlug, projectId, issueId);
|
||||
|
||||
const issues = {
|
||||
...this.issues,
|
||||
[issueId]: { ...issueResponse },
|
||||
};
|
||||
|
||||
runInAction(() => {
|
||||
this.issues = issues;
|
||||
});
|
||||
|
||||
return issueResponse;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
createIssue = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueForm: IIssue,
|
||||
user: ICurrentUserResponse
|
||||
): Promise<IIssue> => {
|
||||
try {
|
||||
const issueResponse = await issueService.createIssues(
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
issueForm,
|
||||
user
|
||||
);
|
||||
|
||||
const issues = {
|
||||
...this.issues,
|
||||
[issueResponse.id]: { ...issueResponse },
|
||||
};
|
||||
|
||||
runInAction(() => {
|
||||
this.issues = issues;
|
||||
});
|
||||
return issueResponse;
|
||||
} catch (error) {
|
||||
console.error("Creating issue error", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
updateIssue = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
issueForm: Partial<IIssue>,
|
||||
user: ICurrentUserResponse
|
||||
) => {
|
||||
// keep a copy of the issue in the store
|
||||
const originalIssue = { ...this.issues[issueId] };
|
||||
|
||||
// immediately update the issue in the store
|
||||
const updatedIssue = { ...originalIssue, ...issueForm };
|
||||
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.issues[issueId] = updatedIssue;
|
||||
});
|
||||
|
||||
// make a patch request to update the issue
|
||||
const issueResponse: IIssue = await issueService.patchIssue(
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
issueId,
|
||||
issueForm,
|
||||
user
|
||||
);
|
||||
|
||||
const updatedIssues = { ...this.issues };
|
||||
updatedIssues[issueId] = { ...issueResponse };
|
||||
|
||||
runInAction(() => {
|
||||
this.issues = updatedIssues;
|
||||
});
|
||||
} catch (error) {
|
||||
// if there is an error, revert the changes
|
||||
runInAction(() => {
|
||||
this.issues[issueId] = originalIssue;
|
||||
});
|
||||
|
||||
return error;
|
||||
}
|
||||
};
|
||||
|
||||
deleteIssue = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
user: ICurrentUserResponse
|
||||
) => {
|
||||
const issues = { ...this.issues };
|
||||
delete issues[issueId];
|
||||
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.issues = issues;
|
||||
});
|
||||
|
||||
issueService.deleteIssue(workspaceSlug, projectId, issueId, user);
|
||||
} catch (error) {
|
||||
console.error("Deleting issue error", error);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default IssuesStore;
|
||||
@ -3,6 +3,7 @@ import { enableStaticRendering } from "mobx-react-lite";
|
||||
// store imports
|
||||
import UserStore from "./user";
|
||||
import ThemeStore from "./theme";
|
||||
import IssuesStore from "./issues";
|
||||
import ProjectPublishStore, { IProjectPublishStore } from "./project-publish";
|
||||
|
||||
enableStaticRendering(typeof window === "undefined");
|
||||
@ -11,10 +12,12 @@ export class RootStore {
|
||||
user;
|
||||
theme;
|
||||
projectPublish: IProjectPublishStore;
|
||||
issues: IssuesStore;
|
||||
|
||||
constructor() {
|
||||
this.user = new UserStore(this);
|
||||
this.theme = new ThemeStore(this);
|
||||
this.projectPublish = new ProjectPublishStore(this);
|
||||
this.issues = new IssuesStore(this);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user