Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-02-25 04:35:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Sync: Community Changes #4061

Browse Source
This commit is contained in:
pushya22
2025-09-01 17:33:17 +05:30
committed by GitHub
parent e8dccb6549 c5d7bb6165
commit 1b9e02da36
1 changed files with 65 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
apps/web/core/components/pages/pages-list-main-content.tsx
View File

@@ -1,15 +1,23 @@
import { useMemo } from "react";
"use client";
import { useMemo, useState } from "react";
import { observer } from "mobx-react";
import Image from "next/image";
// plane imports
import { EUserPermissionsLevel, EPageAccess, PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
import { useParams, useRouter } from "next/navigation";
import {
EUserPermissionsLevel,
EPageAccess,
PROJECT_PAGE_TRACKER_ELEMENTS,
PROJECT_PAGE_TRACKER_EVENTS,
} from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { EUserProjectRoles, TPageNavigationTabs } from "@plane/types";
import { EUserProjectRoles, TPage, TPageNavigationTabs } from "@plane/types";
// components
import { setToast, TOAST_TYPE } from "@plane/ui";
import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
import { PageLoader } from "@/components/pages/loaders/page-loader";
import { captureClick } from "@/helpers/event-tracker.helper";
import { useCommandPalette } from "@/hooks/store/use-command-palette";
import { captureClick, captureError, captureSuccess } from "@/helpers/event-tracker.helper";
import { useProject } from "@/hooks/store/use-project";
import { useUserPermissions } from "@/hooks/store/user";
import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
// plane web hooks
@@ -24,9 +32,15 @@ type Props = {
export const ProjectPagesListMainContent: React.FC<Props> = observer((props) => {
const { children, pageType } = props;
// states
const [isCreatingPage, setIsCreatingPage] = useState(false);
// router
const router = useRouter();
const { workspaceSlug } = useParams();
// plane hooks
const { t } = useTranslation();
// store hooks
const { currentProjectDetails } = useProject();
const {
loader,
isAnyPageAvailable,
@@ -35,8 +49,8 @@ export const ProjectPagesListMainContent: React.FC<Props> = observer((props) =>
filteredPrivatePageIds,
filteredArchivedPageIds,
filteredSharedPageIds,
createPage,
} = usePageStore(storeType);
const { toggleCreatePageModal } = useCommandPalette();
const { allowPermissions } = useUserPermissions();
// Get the appropriate page IDs based on page type
@@ -77,6 +91,42 @@ export const ProjectPagesListMainContent: React.FC<Props> = observer((props) =>
extension: "svg",
});
// handle page create
const handleCreatePage = async () => {
setIsCreatingPage(true);
const payload: Partial<TPage> = {
access: pageType === "private" ? EPageAccess.PRIVATE : EPageAccess.PUBLIC,
};
await createPage(payload)
.then((res) => {
captureSuccess({
eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
payload: {
id: res?.id,
state: "SUCCESS",
},
});
const pageId = `/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages/${res?.id}`;
router.push(pageId);
})
.catch((err) => {
captureError({
eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
payload: {
state: "ERROR",
},
});
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: err?.data?.error || "Page could not be created. Please try again.",
});
})
.finally(() => setIsCreatingPage(false));
};
if (loader === "init-loader") return <PageLoader />;
// if no pages exist in the active page type
@@ -88,12 +138,12 @@ export const ProjectPagesListMainContent: React.FC<Props> = observer((props) =>
description={t("project_page.empty_state.general.description")}
assetPath={generalPageResolvedPath}
primaryButton={{
text: t("project_page.empty_state.general.primary_button.text"),
text: isCreatingPage ? t("creating") : t("project_page.empty_state.general.primary_button.text"),
onClick: () => {
toggleCreatePageModal({ isOpen: true });
handleCreatePage();
captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
},
disabled: !canPerformEmptyStateActions,
disabled: !canPerformEmptyStateActions || isCreatingPage,
}}
/>
);
@@ -108,12 +158,12 @@ export const ProjectPagesListMainContent: React.FC<Props> = observer((props) =>
description={t("project_page.empty_state.public.description")}
assetPath={publicPageResolvedPath}
primaryButton={{
text: t("project_page.empty_state.public.primary_button.text"),
text: isCreatingPage ? t("creating") : t("project_page.empty_state.public.primary_button.text"),
onClick: () => {
toggleCreatePageModal({ isOpen: true, pageAccess: EPageAccess.PUBLIC });
handleCreatePage();
captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
},
disabled: !canPerformEmptyStateActions,
disabled: !canPerformEmptyStateActions || isCreatingPage,
}}
/>
);
@@ -124,12 +174,12 @@ export const ProjectPagesListMainContent: React.FC<Props> = observer((props) =>
description={t("project_page.empty_state.private.description")}
assetPath={privatePageResolvedPath}
primaryButton={{
text: t("project_page.empty_state.private.primary_button.text"),
text: isCreatingPage ? t("creating") : t("project_page.empty_state.private.primary_button.text"),
onClick: () => {
toggleCreatePageModal({ isOpen: true, pageAccess: EPageAccess.PRIVATE });
handleCreatePage();
captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
},
disabled: !canPerformEmptyStateActions,
disabled: !canPerformEmptyStateActions || isCreatingPage,
}}
/>
);