binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: refactored and resolved build issues on the issues and issue detail page (#3340)

Browse source 
* fix: handled undefined issue_id in list layout

* dev: issue detail store and optimization

* dev: issue filter and list operations

* fix: typo on labels update

* dev: Handled all issues in the list layout in project issues

* dev: handled kanban and auick add issue in swimlanes

* chore: fixed peekoverview in kanban

* chore: fixed peekoverview in calendar

* chore: fixed peekoverview in gantt

* chore: updated quick add in the gantt chart

* chore: handled issue detail properties and resolved build issues

---------

Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
This commit is contained in:
guru_sainath 2024-01-10 20:09:45 +05:30 • committed by sriram veeraghanta
parent e6b31e2550
commit 4611ec0b83
112 changed files with 3303 additions and 2560 deletions
Download patch file Download diff file Expand all files Collapse all files

145
web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View file

@ -1,143 +1,42 @@
import React, { useCallback, useEffect, ReactElement } from "react";
import React, { ReactElement } from "react";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
import { useForm } from "react-hook-form";
// services
import { IssueService } from "services/issue";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
// layouts
import { AppLayout } from "layouts/app-layout";
// components
import { ProjectIssueDetailsHeader } from "components/headers";
import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
import { IssueDetailRoot } from "components/issues";
// ui
import { EmptyState } from "components/common";
import { Loader } from "@plane/ui";
// images
import emptyIssue from "public/empty-state/issue.svg";
// types
import { TIssue } from "@plane/types";
import { NextPageWithLayout } from "lib/types";
// fetch-keys
import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
import { observer } from "mobx-react-lite";
import { useIssueDetail } from "hooks/store";
const defaultValues: Partial<TIssue> = {
// description: "",
description_html: "",
estimate_point: null,
cycle_id: null,
module_id: null,
name: "",
priority: "low",
start_date: undefined,
state_id: "",
target_date: undefined,
};
// services
const issueService = new IssueService();
const IssueDetailsPage: NextPageWithLayout = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId, issueId: routeIssueId } = router.query;
const { peekIssue, fetchIssue } = useIssueDetail();
useEffect(() => {
if (!workspaceSlug || !projectId || !routeIssueId) return;
fetchIssue(workspaceSlug as string, projectId as string, routeIssueId as string);
}, [workspaceSlug, projectId, routeIssueId, fetchIssue]);
const { workspaceSlug, projectId, issueId } = router.query;
// hooks
const {
data: issueDetails,
mutate: mutateIssueDetails,
error,
} = useSWR(
workspaceSlug && projectId && peekIssue?.issueId ? ISSUE_DETAILS(peekIssue?.issueId as string) : null,
workspaceSlug && projectId && peekIssue?.issueId
? () => issueService.retrieve(workspaceSlug as string, projectId as string, peekIssue?.issueId as string)
fetchIssue,
issue: { getIssueById },
} = useIssueDetail();
const { isLoading } = useSWR(
workspaceSlug && projectId && issueId ? `ISSUE_DETAIL_${workspaceSlug}_${projectId}_${issueId}` : null,
workspaceSlug && projectId && issueId
? () => fetchIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString())
: null
);
const { reset, control, watch } = useForm<TIssue>({
defaultValues,
});
const submitChanges = useCallback(
async (formData: Partial<TIssue>) => {
if (!workspaceSlug || !projectId || !peekIssue?.issueId) return;
mutate<TIssue>(
ISSUE_DETAILS(peekIssue?.issueId as string),
(prevData) => {
if (!prevData) return prevData;
return {
...prevData,
...formData,
};
},
false
);
const payload: Partial<TIssue> = {
...formData,
};
// delete payload.related_issues;
// delete payload.issue_relations;
await issueService
.patchIssue(workspaceSlug as string, projectId as string, peekIssue?.issueId as string, payload)
.then(() => {
mutateIssueDetails();
mutate(PROJECT_ISSUES_ACTIVITY(peekIssue?.issueId as string));
})
.catch((e) => {
console.error(e);
});
},
[workspaceSlug, peekIssue?.issueId, projectId, mutateIssueDetails]
);
useEffect(() => {
if (!issueDetails) return;
mutate(PROJECT_ISSUES_ACTIVITY(peekIssue?.issueId as string));
reset({
...issueDetails,
});
}, [issueDetails, reset, peekIssue?.issueId]);
const issue = getIssueById(issueId?.toString() || "") || undefined;
const issueLoader = !issue || isLoading ? true : false;
return (
<>
{" "}
{error ? (
<EmptyState
image={emptyIssue}
title="Issue does not exist"
description="The issue you are looking for does not exist, has been archived, or has been deleted."
primaryButton={{
text: "View other issues",
onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/issues`),
}}
/>
) : issueDetails && projectId && peekIssue?.issueId ? (
<div className="flex h-full overflow-hidden">
<div className="h-full w-2/3 space-y-5 divide-y-2 divide-custom-border-300 overflow-y-auto p-5">
<IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
</div>
<div className="h-full w-1/3 space-y-5 overflow-hidden border-l border-custom-border-300 py-5">
<IssueDetailsSidebar
control={control}
issueDetail={issueDetails}
submitChanges={submitChanges}
watch={watch}
/>
</div>
</div>
) : (
{issueLoader ? (
<Loader className="flex h-full gap-5 p-5">
<div className="basis-2/3 space-y-2">
<Loader.Item height="30px" width="40%" />
@ -152,6 +51,16 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
<Loader.Item height="30px" />
</div>
</Loader>
) : (
workspaceSlug &&
projectId &&
issueId && (
<IssueDetailRoot
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
issueId={issueId.toString()}
/>
)
)}
</>
);