-
{status ? "Update" : "Create"} Page
+
+
{data ? "Update" : "Create"} Page
-
-
-
+
+
(
+
+
+ {PAGE_ACCESS_SPECIFIERS.map((access) => (
+
+
+
+ ))}
+
+
+ {PAGE_ACCESS_SPECIFIERS.find((access) => access.key === value)?.label}
+
+
+
+
+
);
diff --git a/web/components/pages/pages-list/all-pages-list.tsx b/web/components/pages/pages-list/all-pages-list.tsx
index 22460f734..33e9b3198 100644
--- a/web/components/pages/pages-list/all-pages-list.tsx
+++ b/web/components/pages/pages-list/all-pages-list.tsx
@@ -1,29 +1,26 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import { PageService } from "services/page.service";
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
// components
-import { PagesView } from "components/pages";
-// types
-import { TPagesListProps } from "./types";
+import { PagesListView } from "components/pages/pages-list";
// fetch-keys
-import { ALL_PAGES_LIST } from "constants/fetch-keys";
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Loader } from "@plane/ui";
-// services
-const pageService = new PageService();
+export const AllPagesList: FC = observer(() => {
+ // store
+ const {
+ page: { projectPages },
+ } = useMobxStore();
-export const AllPagesList: React.FC
= ({ viewType }) => {
- const router = useRouter();
- const { workspaceSlug, projectId } = router.query;
+ if (!projectPages)
+ return (
+
+
+
+
+
+ );
- const { data: pages } = useSWR(
- workspaceSlug && projectId ? ALL_PAGES_LIST(projectId as string) : null,
- workspaceSlug && projectId
- ? () => pageService.getPagesWithParams(workspaceSlug as string, projectId as string, "all")
- : null
- );
-
- return ;
-};
+ return ;
+});
diff --git a/web/components/pages/pages-list/archived-pages-list.tsx b/web/components/pages/pages-list/archived-pages-list.tsx
new file mode 100644
index 000000000..26baa0f5c
--- /dev/null
+++ b/web/components/pages/pages-list/archived-pages-list.tsx
@@ -0,0 +1,25 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { PagesListView } from "components/pages/pages-list";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Loader } from "@plane/ui";
+
+export const ArchivedPagesList: FC = observer(() => {
+ const {
+ page: { archivedProjectPages },
+ } = useMobxStore();
+
+ if (!archivedProjectPages)
+ return (
+
+
+
+
+
+ );
+
+ return ;
+});
diff --git a/web/components/pages/pages-list/favorite-pages-list.tsx b/web/components/pages/pages-list/favorite-pages-list.tsx
index ef50f296a..b20ce73fc 100644
--- a/web/components/pages/pages-list/favorite-pages-list.tsx
+++ b/web/components/pages/pages-list/favorite-pages-list.tsx
@@ -1,29 +1,25 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import { PageService } from "services/page.service";
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
// components
-import { PagesView } from "components/pages";
-// types
-import { TPagesListProps } from "./types";
-// fetch-keys
-import { FAVORITE_PAGES_LIST } from "constants/fetch-keys";
+import { PagesListView } from "components/pages/pages-list";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Loader } from "@plane/ui";
-// services
-const pageService = new PageService();
+export const FavoritePagesList: FC = observer(() => {
+ const {
+ page: { favoriteProjectPages },
+ } = useMobxStore();
-export const FavoritePagesList: React.FC = ({ viewType }) => {
- const router = useRouter();
- const { workspaceSlug, projectId } = router.query;
+ if (!favoriteProjectPages)
+ return (
+
+
+
+
+
+ );
- const { data: pages } = useSWR(
- workspaceSlug && projectId ? FAVORITE_PAGES_LIST(projectId as string) : null,
- workspaceSlug && projectId
- ? () => pageService.getPagesWithParams(workspaceSlug as string, projectId as string, "favorite")
- : null
- );
-
- return ;
-};
+ return ;
+});
diff --git a/web/components/pages/pages-list/index.ts b/web/components/pages/pages-list/index.ts
index 898138710..1f199296a 100644
--- a/web/components/pages/pages-list/index.ts
+++ b/web/components/pages/pages-list/index.ts
@@ -1,6 +1,8 @@
export * from "./all-pages-list";
+export * from "./archived-pages-list";
export * from "./favorite-pages-list";
-export * from "./my-pages-list";
-export * from "./other-pages-list";
+export * from "./private-page-list";
+export * from "./shared-pages-list";
export * from "./recent-pages-list";
export * from "./types";
+export * from "./list-view";
diff --git a/web/components/pages/pages-list/list-item.tsx b/web/components/pages/pages-list/list-item.tsx
new file mode 100644
index 000000000..c4f9f9f16
--- /dev/null
+++ b/web/components/pages/pages-list/list-item.tsx
@@ -0,0 +1,303 @@
+import { FC, useState } from "react";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+// icons
+import {
+ AlertCircle,
+ Archive,
+ ArchiveRestoreIcon,
+ FileText,
+ Globe2,
+ LinkIcon,
+ Lock,
+ Pencil,
+ Star,
+ Trash2,
+} from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+import { renderShortDate, render24HourFormatTime, renderLongDateFormat } from "helpers/date-time.helper";
+// ui
+import { CustomMenu, Tooltip } from "@plane/ui";
+// components
+import { CreateUpdatePageModal, DeletePageModal } from "components/pages";
+// types
+import { IPage } from "types";
+
+export interface IPagesListItem {
+ workspaceSlug: string;
+ projectId: string;
+ page: IPage;
+}
+
+export const PagesListItem: FC = observer((props) => {
+ const { workspaceSlug, projectId, page } = props;
+ // states
+ const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
+ const [deletePageModal, setDeletePageModal] = useState(false);
+ // store
+ const {
+ page: { archivePage, removeFromFavorites, addToFavorites, makePublic, makePrivate, restorePage },
+ user: { currentProjectRole },
+ projectMember: { projectMembers },
+ } = useMobxStore();
+ // hooks
+ const { setToastAlert } = useToast();
+
+ const handleCopyUrl = (e: any) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/pages/${page.id}`).then(() => {
+ setToastAlert({
+ type: "success",
+ title: "Link Copied!",
+ message: "Page link copied to clipboard.",
+ });
+ });
+ };
+
+ const handleAddToFavorites = (e: any) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ addToFavorites(workspaceSlug, projectId, page.id)
+ .then(() => {
+ setToastAlert({
+ type: "success",
+ title: "Success!",
+ message: "Successfully added the page to favorites.",
+ });
+ })
+ .catch(() => {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: "Couldn't add the page to favorites. Please try again.",
+ });
+ });
+ };
+
+ const handleRemoveFromFavorites = (e: any) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ removeFromFavorites(workspaceSlug, projectId, page.id)
+ .then(() => {
+ setToastAlert({
+ type: "success",
+ title: "Success!",
+ message: "Successfully removed the page from favorites.",
+ });
+ })
+ .catch(() => {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: "Couldn't remove the page from favorites. Please try again.",
+ });
+ });
+ };
+
+ const handleMakePublic = (e: any) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ makePublic(workspaceSlug, projectId, page.id);
+ };
+
+ const handleMakePrivate = (e: any) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ makePrivate(workspaceSlug, projectId, page.id);
+ };
+
+ const handleArchivePage = (e: any) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ archivePage(workspaceSlug, projectId, page.id);
+ };
+
+ const handleRestorePage = (e: any) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ restorePage(workspaceSlug, projectId, page.id);
+ };
+
+ const handleDeletePage = (e: any) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ setDeletePageModal(true);
+ };
+
+ const handleEditPage = (e: any) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ setCreateUpdatePageModal(true);
+ };
+
+ const userCanEdit = currentProjectRole === 15 || currentProjectRole === 20;
+
+ return (
+ <>
+ setCreateUpdatePageModal(false)}
+ data={page}
+ projectId={projectId}
+ />
+ setDeletePageModal(false)} data={page} />
+
+
+
+
+
+
+
+
{page.name}
+ {page.label_details.length > 0 &&
+ page.label_details.map((label) => (
+
+
+ {label.name}
+
+ ))}
+
+
+ {page.archived_at ? (
+
+ {render24HourFormatTime(page.archived_at)}
+
+ ) : (
+
+ {render24HourFormatTime(page.updated_at)}
+
+ )}
+ {!page.archived_at && userCanEdit && (
+
+ {page.is_favorite ? (
+
+ ) : (
+
+ )}
+
+ )}
+ {!page.archived_at && userCanEdit && (
+
+ {page.access ? (
+
+ ) : (
+
+ )}
+
+ )}
+
projectMember.member.id === page.created_by)?.member
+ .display_name ?? ""
+ } on ${renderLongDateFormat(`${page.created_at}`)}`}
+ >
+
+
+ {page.archived_at ? (
+
+ {userCanEdit && (
+ <>
+
+
+
+
+
+
+ Delete page
+
+
+
+ )}
+
+
+
+ Copy page link
+
+
+
+ ) : (
+
+ {userCanEdit && (
+ <>
+
+
+
+
+
+
+
+ )}
+
+
+
+ Copy page link
+
+
+
+ )}
+
+
+
+ {pages.length > 0 ? (
+
+ {pages.map((page) => (
+
+ ))}
+
+ ) : (
+
,
+ text: "New Page",
+ onClick: () => commandPaletteStore.toggleCreatePageModal(true),
+ }}
+ />
+ )}
+
-
- {replaceUnderscoreIfSnakeCase(key)}
-
-
+
{replaceUnderscoreIfSnakeCase(key)}
+
- {pages.length > 0 ? (
- viewType === "list" ? (
-
- {pages.map((page) => (
- handleEditPage(page)}
- handleDeletePage={() => handleDeletePage(page)}
- handleAddToFavorites={() => handleAddToFavorites(page)}
- handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
- partialUpdatePage={partialUpdatePage}
- />
- ))}
-
- ) : viewType === "detailed" ? (
-
- {pages.map((page) => (
- handleEditPage(page)}
- handleDeletePage={() => handleDeletePage(page)}
- handleAddToFavorites={() => handleAddToFavorites(page)}
- handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
- partialUpdatePage={partialUpdatePage}
- />
- ))}
-
- ) : (
-
- {pages.map((page) => (
- handleEditPage(page)}
- handleDeletePage={() => handleDeletePage(page)}
- handleAddToFavorites={() => handleAddToFavorites(page)}
- handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
- partialUpdatePage={partialUpdatePage}
- />
- ))}
-
- )
- ) : (
-
,
- text: "New Page",
- onClick: () => commandPaletteStore.toggleCreatePageModal(true),
- }}
- />
- )}
-
${response}
`);
- handleSubmit(updatePageBlock)()
- .then(() => {
- setToastAlert({
- type: "success",
- title: "Success!",
- message: "Block description updated successfully.",
- });
- })
- .catch(() => {
- setToastAlert({
- type: "error",
- title: "Error!",
- message: "Block description could not be updated. Please try again.",
- });
- });
- };
-
- const handleBlockSync = () => {
- if (!workspaceSlug || !projectId || !pageId) return;
-
- mutate(
- PAGE_BLOCKS_LIST(pageId as string),
- (prevData) =>
- (prevData ?? []).map((p) => {
- if (p.id === block.id) return { ...p, sync: !block.sync };
-
- return p;
- }),
- false
- );
-
- pageService.patchPageBlock(workspaceSlug as string, projectId as string, pageId as string, block.id, {
- sync: !block.sync,
- });
- };
-
- const handleCopyText = () => {
- const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-
- copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`).then(() => {
- setToastAlert({
- type: "success",
- title: "Link Copied!",
- message: "Issue link copied to clipboard.",
- });
- });
- };
-
- useEffect(() => {
- if (!block) return;
-
- reset({ ...block });
- }, [reset, block]);
-
- useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
- return (
-
- {(provided, snapshot) => (
- <>
- {createBlockForm ? (
-
- setCreateBlockForm(false)}
- data={block}
- setIsSyncing={setIsSyncing}
- focus="name"
- user={user}
- />
-
- ) : (
-
-
-
- {block.issue && block.sync && (
-
- {isSyncing ? : }
- {isSyncing ? "Syncing..." : "Synced"}
-
- )}
-
-
-
-
setIsMenuActive(!isMenuActive)}
- >
-
-
- }
- >
- {block.issue ? (
- <>
-
-
-
- Turn sync {block.sync ? "off" : "on"}
-
-
-
-
-
- Copy issue link
-
-
-
- ) : (
-
-
-
- Push into issues
-
-
- )}
-
-
-
- Delete block
-
-
-
-
-
setCreateBlockForm(true)}
- >
-
- {block.issue && (
-
- )}
-
-
-
- {showBlockDetails
- ? block.description_html.length > 7 && (
-
- )
- : block.description_stripped.length > 0 && (
-
- {block.description_stripped}
-
- )}
-
-
- )}
-
- )}
-
- );
-};
diff --git a/web/components/pages/single-page-detailed-item.tsx b/web/components/pages/single-page-detailed-item.tsx
deleted file mode 100644
index d1cade380..000000000
--- a/web/components/pages/single-page-detailed-item.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import React from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// hooks
-import useUser from "hooks/use-user";
-import useToast from "hooks/use-toast";
-// ui
-import { CustomMenu, Tooltip } from "@plane/ui";
-// icons
-import { AlertCircle, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react";
-// helpers
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-import { render24HourFormatTime, renderShortDate, renderLongDateFormat } from "helpers/date-time.helper";
-// types
-import { IPage, IProjectMember } from "types";
-
-type TSingleStatProps = {
- page: IPage;
- people: IProjectMember[] | undefined;
- handleEditPage: () => void;
- handleDeletePage: () => void;
- handleAddToFavorites: () => void;
- handleRemoveFromFavorites: () => void;
- partialUpdatePage: (page: IPage, formData: Partial
) => void;
-};
-
-export const SinglePageDetailedItem: React.FC = ({
- page,
- people,
- handleEditPage,
- handleDeletePage,
- handleAddToFavorites,
- handleRemoveFromFavorites,
- partialUpdatePage,
-}) => {
- const router = useRouter();
- const { workspaceSlug, projectId } = router.query;
-
- const { user } = useUser();
-
- const { setToastAlert } = useToast();
-
- const handleCopyText = () => {
- const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
- copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`).then(() => {
- setToastAlert({
- type: "success",
- title: "Link Copied!",
- message: "Page link copied to clipboard.",
- });
- });
- };
-
- return (
-
- );
-};
diff --git a/web/components/pages/single-page-list-item.tsx b/web/components/pages/single-page-list-item.tsx
deleted file mode 100644
index 6f39f3e26..000000000
--- a/web/components/pages/single-page-list-item.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import React from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// hooks
-import useUser from "hooks/use-user";
-import useToast from "hooks/use-toast";
-// ui
-import { CustomMenu, Tooltip } from "@plane/ui";
-// icons
-import { AlertCircle, FileText, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react";
-// helpers
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-import { renderLongDateFormat, renderShortDate, render24HourFormatTime } from "helpers/date-time.helper";
-// types
-import { IPage, IProjectMember } from "types";
-
-type TSingleStatProps = {
- page: IPage;
- people: IProjectMember[] | undefined;
- handleEditPage: () => void;
- handleDeletePage: () => void;
- handleAddToFavorites: () => void;
- handleRemoveFromFavorites: () => void;
- partialUpdatePage: (page: IPage, formData: Partial) => void;
-};
-
-export const SinglePageListItem: React.FC = ({
- page,
- people,
- handleEditPage,
- handleDeletePage,
- handleAddToFavorites,
- handleRemoveFromFavorites,
- partialUpdatePage,
-}) => {
- const router = useRouter();
- const { workspaceSlug, projectId } = router.query;
-
- const { user } = useUser();
-
- const { setToastAlert } = useToast();
-
- const handleCopyText = () => {
- const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
- copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`).then(() => {
- setToastAlert({
- type: "success",
- title: "Link Copied!",
- message: "Page link copied to clipboard.",
- });
- });
- };
-
- return (
-
-
-
-
-
-
-
-
{page.name}
- {page.label_details.length > 0 &&
- page.label_details.map((label) => (
-
-
- {label.name}
-
- ))}
-
-
-
-
- {render24HourFormatTime(page.updated_at)}
-
- {page.is_favorite ? (
-
- ) : (
-
- )}
- {page.created_by === user?.id && (
-
-
-
- )}
-
person.member.id === page.created_by)?.member.display_name ?? ""
- } on ${renderLongDateFormat(`${page.created_at}`)}`}
- >
-
-
-
-
-
-
- {
- e.preventDefault();
- e.stopPropagation();
- handleEditPage();
- }}
- >
-
-
- Edit Page
-
-
- {
- e.preventDefault();
- e.stopPropagation();
- handleDeletePage();
- }}
- >
-
-
- Delete Page
-
-
- {
- e.preventDefault();
- e.stopPropagation();
- handleCopyText();
- }}
- >
-
-
- Copy Page link
-
-
-
-
-
-
-