forked from github/plane
96 lines
3.6 KiB
TypeScript
96 lines
3.6 KiB
TypeScript
import { useEffect } from "react";
|
|
import Image from "next/image";
|
|
import { useRouter } from "next/router";
|
|
import { observer } from "mobx-react-lite";
|
|
// components
|
|
import { IssueListView } from "components/issues/board-views/list";
|
|
import { IssueKanbanView } from "components/issues/board-views/kanban";
|
|
import { IssueCalendarView } from "components/issues/board-views/calendar";
|
|
import { IssueSpreadsheetView } from "components/issues/board-views/spreadsheet";
|
|
import { IssueGanttView } from "components/issues/board-views/gantt";
|
|
import { IssuePeekOverview } from "components/issues/peek-overview";
|
|
// mobx store
|
|
import { RootStore } from "store/root";
|
|
import { useMobxStore } from "lib/mobx/store-provider";
|
|
// assets
|
|
import SomethingWentWrongImage from "public/something-went-wrong.svg";
|
|
|
|
export const ProjectDetailsView = observer(() => {
|
|
const router = useRouter();
|
|
const { workspace_slug, project_slug, states, labels, priorities, peekId } = router.query;
|
|
|
|
const {
|
|
issue: issueStore,
|
|
project: projectStore,
|
|
issueDetails: issueDetailStore,
|
|
user: userStore,
|
|
}: RootStore = useMobxStore();
|
|
|
|
useEffect(() => {
|
|
if (!userStore.currentUser) {
|
|
userStore.fetchCurrentUser();
|
|
}
|
|
}, [userStore]);
|
|
|
|
useEffect(() => {
|
|
if (workspace_slug && project_slug) {
|
|
const params = {
|
|
state: states || null,
|
|
labels: labels || null,
|
|
priority: priorities || null,
|
|
};
|
|
issueStore.fetchPublicIssues(workspace_slug?.toString(), project_slug.toString(), params);
|
|
}
|
|
}, [workspace_slug, project_slug, issueStore, states, labels, priorities]);
|
|
|
|
useEffect(() => {
|
|
if (peekId && workspace_slug && project_slug) {
|
|
issueDetailStore.setPeekId(peekId.toString());
|
|
}
|
|
}, [peekId, issueDetailStore, project_slug, workspace_slug]);
|
|
|
|
return (
|
|
<div className="relative h-full w-full overflow-hidden">
|
|
{workspace_slug && <IssuePeekOverview />}
|
|
|
|
{issueStore?.loader && !issueStore.issues ? (
|
|
<div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>
|
|
) : (
|
|
<>
|
|
{issueStore?.error ? (
|
|
<div className="grid h-full w-full place-items-center p-6">
|
|
<div className="text-center">
|
|
<div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
|
|
<div className="grid h-32 w-32 place-items-center">
|
|
<Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
|
|
</div>
|
|
</div>
|
|
<h1 className="mt-12 text-3xl font-semibold">Oops! Something went wrong.</h1>
|
|
<p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
projectStore?.activeBoard && (
|
|
<>
|
|
{projectStore?.activeBoard === "list" && (
|
|
<div className="relative h-full w-full overflow-y-auto">
|
|
<IssueListView />
|
|
</div>
|
|
)}
|
|
{projectStore?.activeBoard === "kanban" && (
|
|
<div className="relative mx-auto h-full w-full p-5">
|
|
<IssueKanbanView />
|
|
</div>
|
|
)}
|
|
{projectStore?.activeBoard === "calendar" && <IssueCalendarView />}
|
|
{projectStore?.activeBoard === "spreadsheet" && <IssueSpreadsheetView />}
|
|
{projectStore?.activeBoard === "gantt" && <IssueGanttView />}
|
|
</>
|
|
)
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|