feat: pages (#533)
* style: page details * style: page blocks design * chore: pages list end points * feat: add blocks, push blocks to issues * feat: page labels, color options * feat: added labels to pages * fix: update page mutation
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
578d724e41
commit
5d67029b5a
36 changed files with 1842 additions and 1058 deletions
|
|
@ -1,126 +1,78 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// react-hook-form
|
||||
import { useForm } from "react-hook-form";
|
||||
// headless ui
|
||||
import { Popover, Transition } from "@headlessui/react";
|
||||
// react-color
|
||||
import { TwitterPicker } from "react-color";
|
||||
// lib
|
||||
import { requiredAuth } from "lib/auth";
|
||||
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
|
||||
import pagesService from "services/pages.service";
|
||||
import issuesService from "services/issues.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// layouts
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// components
|
||||
import { SinglePageBlock } from "components/pages";
|
||||
// ui
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
|
||||
// fetching keys
|
||||
import { PAGE_BLOCK_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
|
||||
// components
|
||||
import { CustomMenu } from "components/ui";
|
||||
|
||||
import { CustomSearchSelect, Loader, PrimaryButton, TextArea } from "components/ui";
|
||||
// icons
|
||||
import { ArrowLeftIcon, PlusIcon, ShareIcon, StarIcon } from "@heroicons/react/24/outline";
|
||||
import { ColorPalletteIcon } from "components/icons";
|
||||
// helpers
|
||||
import { renderShortTime } from "helpers/date-time.helper";
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { IPageBlock, IView } from "types";
|
||||
import type { NextPage, GetServerSidePropsContext } from "next";
|
||||
import pagesService from "services/pages.service";
|
||||
import useToast from "hooks/use-toast";
|
||||
import { IIssueLabels, IPage, IPageBlock } from "types";
|
||||
// fetch-keys
|
||||
import {
|
||||
PAGE_BLOCKS_LIST,
|
||||
PAGE_DETAILS,
|
||||
PROJECT_DETAILS,
|
||||
PROJECT_ISSUE_LABELS,
|
||||
} from "constants/fetch-keys";
|
||||
|
||||
const SinglePage: NextPage = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, pageId } = router.query;
|
||||
|
||||
const PageBlock: React.FC<any> = ({ pageBlock }: { pageBlock: IPageBlock }) => {
|
||||
const [name, setName] = useState(pageBlock.name);
|
||||
const { setToastAlert } = useToast();
|
||||
const {
|
||||
query: { workspaceSlug, projectId, pageId },
|
||||
} = useRouter();
|
||||
|
||||
const updatePageBlock = async () => {
|
||||
const pageBlockId = pageBlock.id;
|
||||
await pagesService
|
||||
.patchPageBlock(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
pageId as string,
|
||||
pageBlockId as string,
|
||||
{
|
||||
name,
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
mutate(PAGE_BLOCK_LIST(pageId as string));
|
||||
console.log("Updated block");
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Page could not be updated. Please try again.",
|
||||
});
|
||||
});
|
||||
};
|
||||
const { handleSubmit, reset, watch, setValue, control } = useForm<IPage>({
|
||||
defaultValues: { name: "" },
|
||||
});
|
||||
|
||||
const deletePageBlock = async () => {
|
||||
const pageBlockId = pageBlock.id;
|
||||
await pagesService
|
||||
.deletePageBlock(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
pageId as string,
|
||||
pageBlockId as string
|
||||
)
|
||||
.then(() => {
|
||||
mutate(PAGE_BLOCK_LIST(pageId as string));
|
||||
console.log("deleted block");
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Page could not be deleted. Please try again.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<li className="group flex justify-between rounded p-2 hover:bg-slate-100">
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
console.log("Updating...");
|
||||
updatePageBlock();
|
||||
}
|
||||
}}
|
||||
onChange={(e) => {
|
||||
setName(e.target.value);
|
||||
}}
|
||||
className="border-none bg-transparent outline-none"
|
||||
/>
|
||||
<div className="hidden group-hover:block">
|
||||
<CustomMenu>
|
||||
<CustomMenu.MenuItem>Convert to issue</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={deletePageBlock}>Delete block</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
const ProjectPages: NextPage = () => {
|
||||
const { setToastAlert } = useToast();
|
||||
const {
|
||||
query: { workspaceSlug, projectId, pageId },
|
||||
} = useRouter();
|
||||
|
||||
const { data: activeProject } = useSWR(
|
||||
const { data: projectDetails } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.getProject(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: pageDetails } = useSWR(
|
||||
workspaceSlug && projectId && pageId ? PAGE_DETAILS(pageId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () =>
|
||||
pagesService.getPageDetails(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
pageId as string
|
||||
)
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: pageBlocks } = useSWR(
|
||||
workspaceSlug && projectId && pageId ? PAGE_BLOCK_LIST(pageId as string) : null,
|
||||
workspaceSlug && projectId && pageId ? PAGE_BLOCKS_LIST(pageId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () =>
|
||||
pagesService.listPageBlocks(
|
||||
|
|
@ -131,13 +83,65 @@ const ProjectPages: NextPage = () => {
|
|||
: null
|
||||
);
|
||||
|
||||
const { data: labels } = useSWR<IIssueLabels[]>(
|
||||
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const updatePage = async (formData: IPage) => {
|
||||
if (!workspaceSlug || !projectId || !pageId) return;
|
||||
|
||||
if (!formData.name || formData.name.length === 0 || formData.name === "") return;
|
||||
|
||||
await pagesService
|
||||
.patchPage(workspaceSlug as string, projectId as string, pageId as string, formData)
|
||||
.then(() => {
|
||||
mutate<IPage>(
|
||||
PAGE_DETAILS(pageId as string),
|
||||
(prevData) => ({
|
||||
...prevData,
|
||||
...formData,
|
||||
}),
|
||||
false
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const partialUpdatePage = async (formData: Partial<IPage>) => {
|
||||
if (!workspaceSlug || !projectId || !pageId) return;
|
||||
|
||||
mutate<IPage>(
|
||||
PAGE_DETAILS(pageId as string),
|
||||
(prevData) => ({
|
||||
...(prevData as IPage),
|
||||
...formData,
|
||||
labels: formData.labels_list ? formData.labels_list : (prevData as IPage).labels,
|
||||
}),
|
||||
false
|
||||
);
|
||||
|
||||
await pagesService
|
||||
.patchPage(workspaceSlug as string, projectId as string, pageId as string, formData)
|
||||
.then(() => {
|
||||
mutate(PAGE_DETAILS(pageId as string));
|
||||
});
|
||||
};
|
||||
|
||||
const createPageBlock = async () => {
|
||||
if (!workspaceSlug || !projectId || !pageId) return;
|
||||
|
||||
await pagesService
|
||||
.createPageBlock(workspaceSlug as string, projectId as string, pageId as string, {
|
||||
name: "New block",
|
||||
})
|
||||
.then(() => {
|
||||
mutate(PAGE_BLOCK_LIST(pageId as string));
|
||||
.then((res) => {
|
||||
mutate<IPageBlock[]>(
|
||||
PAGE_BLOCKS_LIST(pageId as string),
|
||||
(prevData) => [...(prevData as IPageBlock[]), res],
|
||||
false
|
||||
);
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
|
|
@ -148,6 +152,82 @@ const ProjectPages: NextPage = () => {
|
|||
});
|
||||
};
|
||||
|
||||
const handleAddToFavorites = () => {
|
||||
if (!workspaceSlug || !projectId || !pageId) return;
|
||||
|
||||
mutate<IPage>(
|
||||
PAGE_DETAILS(pageId as string),
|
||||
(prevData) => ({
|
||||
...(prevData as IPage),
|
||||
is_favorite: true,
|
||||
}),
|
||||
false
|
||||
);
|
||||
|
||||
pagesService.addPageToFavorites(workspaceSlug as string, projectId as string, {
|
||||
page: pageId as string,
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemoveFromFavorites = () => {
|
||||
if (!workspaceSlug || !projectId || !pageId) return;
|
||||
|
||||
mutate<IPage>(
|
||||
PAGE_DETAILS(pageId as string),
|
||||
(prevData) => ({
|
||||
...(prevData as IPage),
|
||||
is_favorite: false,
|
||||
}),
|
||||
false
|
||||
);
|
||||
|
||||
pagesService.removePageFromFavorites(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
pageId as string
|
||||
);
|
||||
};
|
||||
|
||||
const handleCopyText = () => {
|
||||
const originURL =
|
||||
typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
|
||||
|
||||
copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/pages/${pageId}`).then(
|
||||
() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Link Copied!",
|
||||
message: "Page link copied to clipboard.",
|
||||
});
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const options =
|
||||
labels?.map((label) => ({
|
||||
value: label.id,
|
||||
query: label.name,
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="h-2 w-2 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
|
||||
}}
|
||||
/>
|
||||
{label.name}
|
||||
</div>
|
||||
),
|
||||
})) ?? [];
|
||||
|
||||
useEffect(() => {
|
||||
if (!pageDetails) return;
|
||||
|
||||
reset({
|
||||
...pageDetails,
|
||||
});
|
||||
}, [reset, pageDetails]);
|
||||
|
||||
return (
|
||||
<AppLayout
|
||||
meta={{
|
||||
|
|
@ -156,21 +236,205 @@ const ProjectPages: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
|
||||
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Pages`} />
|
||||
<BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Pages`} />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<div className="flex space-x-4 px-2">
|
||||
<button onClick={createPageBlock}>Li</button>
|
||||
<button onClick={() => {}}>P</button>
|
||||
</div>
|
||||
<div className="rounded border border-slate-200 bg-white p-4 ">
|
||||
{pageBlocks
|
||||
? pageBlocks.length === 0
|
||||
? "Write something..."
|
||||
: pageBlocks.map((pageBlock) => <PageBlock key={pageBlock.id} pageBlock={pageBlock} />)
|
||||
: "Loading..."}
|
||||
</div>
|
||||
{pageDetails ? (
|
||||
<div className="h-full w-full space-y-4 rounded-md border bg-white p-4">
|
||||
<div className="flex items-center justify-between gap-2 px-3">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 text-sm text-gray-500"
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<ArrowLeftIcon className="h-4 w-4" />
|
||||
Back
|
||||
</button>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{pageDetails.labels.length > 0 ? (
|
||||
<>
|
||||
{pageDetails.labels.map((labelId) => {
|
||||
const label = labels?.find((label) => label.id === labelId);
|
||||
|
||||
if (!label) return;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={label.id}
|
||||
className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
|
||||
style={{
|
||||
backgroundColor: `${
|
||||
label?.color && label.color !== "" ? label.color : "#000000"
|
||||
}20`,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor:
|
||||
label?.color && label.color !== "" ? label.color : "#000000",
|
||||
}}
|
||||
/>
|
||||
{label.name}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<CustomSearchSelect
|
||||
customButton={
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1 rounded-md bg-gray-100 p-1.5 text-xs hover:bg-gray-200"
|
||||
>
|
||||
<PlusIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
}
|
||||
value={pageDetails.labels}
|
||||
onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
|
||||
options={options}
|
||||
multiple
|
||||
noChevron
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<CustomSearchSelect
|
||||
customButton={
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1 rounded-md bg-gray-100 px-3 py-1.5 text-xs hover:bg-gray-200"
|
||||
>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
Add new label
|
||||
</button>
|
||||
}
|
||||
value={pageDetails.labels}
|
||||
onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
|
||||
options={options}
|
||||
multiple
|
||||
noChevron
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-gray-500">
|
||||
{renderShortTime(pageDetails.created_at)}
|
||||
</span>
|
||||
<PrimaryButton className="flex items-center gap-2" onClick={handleCopyText}>
|
||||
<ShareIcon className="h-4 w-4" />
|
||||
Share
|
||||
</PrimaryButton>
|
||||
<button type="button" className="text-sm">
|
||||
AI
|
||||
</button>
|
||||
<div className="flex-shrink-0">
|
||||
<Popover className="relative grid place-items-center">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
type="button"
|
||||
className={`group inline-flex items-center outline-none ${
|
||||
open ? "text-gray-900" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{watch("color") && watch("color") !== "" ? (
|
||||
<span
|
||||
className="h-4 w-4 rounded"
|
||||
style={{
|
||||
backgroundColor: watch("color") ?? "black",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<ColorPalletteIcon height={16} width={16} />
|
||||
)}
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute top-full right-0 z-20 mt-1 max-w-xs px-2 sm:px-0">
|
||||
<TwitterPicker
|
||||
color={pageDetails.color}
|
||||
onChange={(val) => partialUpdatePage({ color: val.hex })}
|
||||
/>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
{pageDetails.is_favorite ? (
|
||||
<button onClick={handleRemoveFromFavorites} className="z-10">
|
||||
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={handleAddToFavorites} type="button" className="z-10">
|
||||
<StarIcon className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<TextArea
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Enter issue name"
|
||||
value={watch("name")}
|
||||
onBlur={handleSubmit(updatePage)}
|
||||
onChange={(e) => setValue("name", e.target.value)}
|
||||
required={true}
|
||||
className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-semibold outline-none ring-0 focus:ring-1 focus:ring-theme"
|
||||
role="textbox"
|
||||
/>
|
||||
</div>
|
||||
<div className="px-3">
|
||||
{pageBlocks ? (
|
||||
pageBlocks.length === 0 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1 rounded px-2.5 py-1 text-xs hover:bg-gray-100"
|
||||
onClick={createPageBlock}
|
||||
>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
Add new block
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-4">
|
||||
{pageBlocks.map((block) => (
|
||||
<SinglePageBlock key={block.id} block={block} />
|
||||
))}
|
||||
</div>
|
||||
<div className="">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1 rounded px-2.5 py-1 text-xs hover:bg-gray-100"
|
||||
onClick={createPageBlock}
|
||||
>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
Add new block
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
) : (
|
||||
<Loader>
|
||||
<Loader.Item height="150px" />
|
||||
<Loader.Item height="150px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Loader>
|
||||
<Loader.Item height="200px" />
|
||||
</Loader>
|
||||
)}
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
|
@ -196,4 +460,4 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
|
|||
};
|
||||
};
|
||||
|
||||
export default ProjectPages;
|
||||
export default SinglePage;
|
||||
|
|
|
|||
|
|
@ -1,197 +1,248 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
import type { GetServerSidePropsContext, NextPage } from "next";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// react-hook-form
|
||||
import { useForm } from "react-hook-form";
|
||||
// lib
|
||||
import { requiredAuth } from "lib/auth";
|
||||
|
||||
// headless ui
|
||||
import { Tab } from "@headlessui/react";
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
import pagesService from "services/pages.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// icons
|
||||
import { PlusIcon } from "components/icons";
|
||||
// layouts
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// ui
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// fetching keys
|
||||
import { PAGE_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
|
||||
// components
|
||||
import { HeaderButton } from "components/ui";
|
||||
import { CreateUpdatePageModal } from "components/pages/create-update-page-modal";
|
||||
import { PagesList } from "components/pages/pages-list";
|
||||
import { IPage } from "types";
|
||||
import PagesMasonry from "components/pages/pages-masonry";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import { ListBulletIcon, RectangleGroupIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
|
||||
import { PagesGrid } from "components/pages/pages-grid";
|
||||
import { RecentPagesList, CreateUpdatePageModal } from "components/pages";
|
||||
// ui
|
||||
import { HeaderButton, Input, PrimaryButton } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// icons
|
||||
import { ListBulletIcon, RectangleGroupIcon } from "@heroicons/react/20/solid";
|
||||
// types
|
||||
import { IPage, TPageViewProps } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECT_DETAILS, RECENT_PAGES_LIST } from "constants/fetch-keys";
|
||||
|
||||
const TabPill: React.FC<any> = (props) => (
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`rounded-full border px-5 py-1.5 text-sm outline-none ${
|
||||
selected
|
||||
? "border-theme bg-theme text-white"
|
||||
: "border-gray-300 bg-white hover:bg-hover-gray"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{props.children}
|
||||
</Tab>
|
||||
const AllPagesList = dynamic<{ viewType: TPageViewProps }>(
|
||||
() => import("components/pages").then((a) => a.AllPagesList),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const FavoritePagesList = dynamic<{ viewType: TPageViewProps }>(
|
||||
() => import("components/pages").then((a) => a.FavoritePagesList),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const MyPagesList = dynamic<{ viewType: TPageViewProps }>(
|
||||
() => import("components/pages").then((a) => a.MyPagesList),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const OtherPagesList = dynamic<{ viewType: TPageViewProps }>(
|
||||
() => import("components/pages").then((a) => a.OtherPagesList),
|
||||
{
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
|
||||
const ProjectPages: NextPage = () => {
|
||||
const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false);
|
||||
const [selectedPage, setSelectedPage] = useState<IPage>();
|
||||
const [viewType, setViewType] = useState("list");
|
||||
const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
|
||||
|
||||
const [viewType, setViewType] = useState<TPageViewProps>("list");
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { data: activeProject } = useSWR(
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
register,
|
||||
watch,
|
||||
reset,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<Partial<IPage>>({
|
||||
defaultValues: {
|
||||
name: "",
|
||||
},
|
||||
});
|
||||
|
||||
const { data: projectDetails } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.getProject(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: pages } = useSWR(
|
||||
workspaceSlug && projectId ? PAGE_LIST(projectId as string) : null,
|
||||
const { data: recentPages } = useSWR(
|
||||
workspaceSlug && projectId ? RECENT_PAGES_LIST(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => pagesService.listPages(workspaceSlug as string, projectId as string)
|
||||
? () => pagesService.getRecentPages(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isCreateUpdatePageModalOpen) return;
|
||||
const timer = setTimeout(() => {
|
||||
setSelectedPage(undefined);
|
||||
clearTimeout(timer);
|
||||
}, 500);
|
||||
const createPage = async (formData: Partial<IPage>) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
};
|
||||
}, [isCreateUpdatePageModalOpen]);
|
||||
if (formData.name === "") {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Page name is required",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
await pagesService
|
||||
.createPage(workspaceSlug as string, projectId as string, formData)
|
||||
.then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Page created successfully.",
|
||||
});
|
||||
reset();
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Page could not be created. Please try again",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<AppLayout
|
||||
meta={{
|
||||
title: "Plane - Pages",
|
||||
}}
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
|
||||
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Pages`} />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
right={
|
||||
<HeaderButton
|
||||
Icon={PlusIcon}
|
||||
label="Create Page"
|
||||
onClick={() => setIsCreateUpdatePageModalOpen(true)}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<>
|
||||
<CreateUpdatePageModal
|
||||
isOpen={isCreateUpdatePageModalOpen}
|
||||
handleClose={() => setIsCreateUpdatePageModalOpen(false)}
|
||||
data={selectedPage}
|
||||
isOpen={createUpdatePageModal}
|
||||
handleClose={() => setCreateUpdatePageModal(false)}
|
||||
/>
|
||||
<div className="space-y-4">
|
||||
<div className="overflow-hidden rounded-lg border border-gray-200 bg-white px-4 pt-3 pb-4 shadow-sm ">
|
||||
<label htmlFor="name" className="sr-only">
|
||||
Title
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
className="block w-full border-0 pt-2.5 text-lg font-medium placeholder-gray-500 outline-none focus:ring-0"
|
||||
placeholder="Title"
|
||||
/>
|
||||
<label htmlFor="description" className="sr-only">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
rows={2}
|
||||
name="description"
|
||||
id="description"
|
||||
className="block w-full resize-none border-0 pb-8 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
placeholder="Write something..."
|
||||
defaultValue={""}
|
||||
<AppLayout
|
||||
meta={{
|
||||
title: "Plane - Pages",
|
||||
}}
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
|
||||
<BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Pages`} />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
right={
|
||||
<HeaderButton
|
||||
Icon={PlusIcon}
|
||||
label="Create Page"
|
||||
onClick={() => setCreateUpdatePageModal(true)}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<form
|
||||
onSubmit={handleSubmit(createPage)}
|
||||
className="flex items-center justify-between gap-2 rounded-[10px] border border-gray-200 bg-white p-2 shadow-sm"
|
||||
>
|
||||
<Input
|
||||
type="text"
|
||||
name="name"
|
||||
register={register}
|
||||
className="border-none outline-none focus:ring-0"
|
||||
placeholder="Type to create a new page..."
|
||||
/>
|
||||
{watch("name") !== "" && (
|
||||
<PrimaryButton type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Creating..." : "Create"}
|
||||
</PrimaryButton>
|
||||
)}
|
||||
</form>
|
||||
<div>
|
||||
<Tab.Group>
|
||||
<Tab.List as="div" className="flex items-center justify-between">
|
||||
<div className="flex gap-4">
|
||||
{["Recent", "All", "Favorites", "Created by me", "Created by others"].map(
|
||||
(tab, index) => (
|
||||
<Tab
|
||||
key={index}
|
||||
className={({ selected }) =>
|
||||
`rounded-full border px-5 py-1.5 text-sm outline-none ${
|
||||
selected
|
||||
? "border-theme bg-theme text-white"
|
||||
: "border-gray-300 bg-white hover:bg-hover-gray"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{tab}
|
||||
</Tab>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-x-1">
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
|
||||
viewType === "list" ? "bg-gray-200" : ""
|
||||
}`}
|
||||
onClick={() => setViewType("list")}
|
||||
>
|
||||
<ListBulletIcon className="h-4 w-4" />
|
||||
</button>
|
||||
{/* <button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
|
||||
viewType === "detailed" ? "bg-gray-200" : ""
|
||||
}`}
|
||||
onClick={() => setViewType("detailed")}
|
||||
>
|
||||
<Squares2X2Icon className="h-4 w-4" />
|
||||
</button> */}
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
|
||||
viewType === "masonry" ? "bg-gray-200" : ""
|
||||
}`}
|
||||
onClick={() => setViewType("masonry")}
|
||||
>
|
||||
<RectangleGroupIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Tab.Panel>
|
||||
<RecentPagesList pages={recentPages} viewType={viewType} />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<AllPagesList viewType={viewType} />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<FavoritePagesList viewType={viewType} />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<MyPagesList viewType={viewType} />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<OtherPagesList viewType={viewType} />
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className="space-y-2 pb-8">
|
||||
<h3 className="text-3xl font-semibold text-black">Pages</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
Note down all the important and minor details in the way you want to.
|
||||
</p>
|
||||
</div> */}
|
||||
<div>
|
||||
<Tab.Group>
|
||||
<Tab.List as="div" className="flex items-center justify-between ">
|
||||
<div className="flex gap-4 text-base font-medium">
|
||||
<TabPill>Recent</TabPill>
|
||||
<TabPill>All</TabPill>
|
||||
<TabPill>Favorites</TabPill>
|
||||
<TabPill>Created by me</TabPill>
|
||||
<TabPill>Created by others</TabPill>
|
||||
</div>
|
||||
<div className="flex items-center gap-x-1">
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
|
||||
viewType === "list" ? "bg-gray-200" : ""
|
||||
}`}
|
||||
onClick={() => setViewType("list")}
|
||||
>
|
||||
<ListBulletIcon className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
|
||||
viewType === "grid" ? "bg-gray-200" : ""
|
||||
}`}
|
||||
onClick={() => setViewType("grid")}
|
||||
>
|
||||
<Squares2X2Icon className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
|
||||
viewType === "masonry" ? "bg-gray-200" : ""
|
||||
}`}
|
||||
onClick={() => setViewType("masonry")}
|
||||
>
|
||||
<RectangleGroupIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</Tab.List>
|
||||
</Tab.Group>
|
||||
</div>
|
||||
|
||||
{viewType === "list" && (
|
||||
<PagesList
|
||||
setSelectedPage={setSelectedPage}
|
||||
setCreateUpdatePageModal={setIsCreateUpdatePageModalOpen}
|
||||
pages={pages}
|
||||
/>
|
||||
)}
|
||||
{viewType === "grid" && (
|
||||
<PagesGrid
|
||||
setSelectedPage={setSelectedPage}
|
||||
setCreateUpdatePageModal={setIsCreateUpdatePageModalOpen}
|
||||
pages={pages}
|
||||
/>
|
||||
)}
|
||||
{viewType === "masonry" && <PagesMasonry />}
|
||||
</div>
|
||||
</AppLayout>
|
||||
</AppLayout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue