thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: complete pages editor not clickable, recent pages calculation logic (#2820)

Browse Source 
* fix: whole editor not clickable

* fix: recent pages calculation

* chore: update older pages calculation logic in recent pages list

* fix: archived pages computed function

* chore: add type for older pages
This commit is contained in:
Aaryan Khandelwal 2023-11-21 15:47:34 +05:30 committed by GitHub
parent 7aaf840fb1
commit 982eba0bd1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 89 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
packages/editor/document-editor/src/ui/components/page-renderer.tsx
View File

@ -1,33 +1,46 @@
import { EditorContainer, EditorContentWrapper } from "@plane/editor-core"
import { Editor } from "@tiptap/react"
import { DocumentDetails } from "../types/editor-types"
import { EditorContainer, EditorContentWrapper } from "@plane/editor-core";
import { Editor } from "@tiptap/react";
import { DocumentDetails } from "../types/editor-types";
interface IPageRenderer {
sidePeakVisible: boolean,
documentDetails: DocumentDetails ,
editor: Editor,
editorClassNames: string,
editorContentCustomClassNames?: string
sidePeakVisible: boolean;
documentDetails: DocumentDetails;
editor: Editor;
editorClassNames: string;
editorContentCustomClassNames?: string;
}
export const PageRenderer = ({ sidePeakVisible, documentDetails, editor, editorClassNames, editorContentCustomClassNames }: IPageRenderer) => {
export const PageRenderer = ({
sidePeakVisible,
documentDetails,
editor,
editorClassNames,
editorContentCustomClassNames,
}: IPageRenderer) => {
return (
<div className={`flex h-[88vh] flex-col w-full max-md:w-full max-md:ml-0 transition-all duration-200 ease-in-out ${sidePeakVisible ? 'ml-[3%] ' : 'ml-0'}`}>
<div
className={`flex h-[88vh] flex-col w-full max-md:w-full max-md:ml-0 transition-all duration-200 ease-in-out ${
sidePeakVisible ? "ml-[3%] " : "ml-0"
}`}
>
<div className="items-start mt-4 h-full flex flex-col w-fit max-md:max-w-full overflow-auto">
<div className="flex flex-col py-2 max-md:max-w-full">
<h1
className="border-none outline-none bg-transparent text-4xl font-bold leading-8 tracking-tight self-center w-[700px] max-w-full"
>{documentDetails.title}</h1>
<h1 className="border-none outline-none bg-transparent text-4xl font-bold leading-8 tracking-tight self-center w-[700px] max-w-full">
{documentDetails.title}
</h1>
</div>
<div className="border-custom-border border-b border-solid self-stretch w-full h-0.5 mt-3" />
<div className="flex flex-col max-md:max-w-full">
<div className="border-b border-custom-border-200 self-stretch w-full h-0.5 mt-3" />
<div className="flex flex-col h-full w-full max-md:max-w-full">
<EditorContainer editor={editor} editorClassNames={editorClassNames}>
<div className="flex flex-col">
<EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
<div className="flex flex-col h-full w-full">
<EditorContentWrapper
editor={editor}
editorContentCustomClassNames={editorContentCustomClassNames}
/>
</div>
</EditorContainer >
</EditorContainer>
</div>
</div>
</div>
)
}
);
};

4
web/components/pages/create-update-page-modal.tsx
View File

@ -38,7 +38,7 @@ export const CreateUpdatePageModal: FC<Props> = (props) => {
const createProjectPage = async (payload: IPage) => {
if (!workspaceSlug) return;
createPage(workspaceSlug.toString(), projectId, payload)
await createPage(workspaceSlug.toString(), projectId, payload)
.then((res) => {
router.push(`/${workspaceSlug}/projects/${projectId}/pages/${res.id}`);
onClose();
@ -67,7 +67,7 @@ export const CreateUpdatePageModal: FC<Props> = (props) => {
const updateProjectPage = async (payload: IPage) => {
if (!data || !workspaceSlug) return;
return updatePage(workspaceSlug.toString(), projectId, data.id, payload)
await updatePage(workspaceSlug.toString(), projectId, data.id, payload)
.then((res) => {
onClose();
setToastAlert({

20
web/components/pages/page-form.tsx
View File

@ -1,9 +1,9 @@
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
// ui
import { Button, Input, Tooltip } from "@plane/ui";
// types
import { IPage } from "types";
// constants
import { PAGE_ACCESS_SPECIFIERS } from "constants/page";
type Props = {
@ -18,31 +18,21 @@ const defaultValues = {
access: 0,
};
export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, data }) => {
export const PageForm: React.FC<Props> = (props) => {
const { handleFormSubmit, handleClose, data } = props;
const {
formState: { errors, isSubmitting },
handleSubmit,
control,
reset,
} = useForm<IPage>({
defaultValues,
defaultValues: { ...defaultValues, ...data },
});
const handleCreateUpdatePage = async (formData: IPage) => {
await handleFormSubmit(formData);
reset({
...defaultValues,
});
};
useEffect(() => {
reset({
...defaultValues,
...data,
});
}, [data, reset]);
return (
<form onSubmit={handleSubmit(handleCreateUpdatePage)}>
<div className="space-y-4">

3
web/components/pages/pages-list/recent-pages-list.tsx
View File

@ -38,8 +38,9 @@ export const RecentPagesList: FC = observer(() => {
<>
{Object.keys(recentProjectPages).map((key) => {
if (recentProjectPages[key].length === 0) return null;
return (
<div key={key} className="h-full overflow-hidden pb-9">
<div key={key} className="overflow-hidden">
<h2 className="text-xl font-semibold capitalize mb-2">{replaceUnderscoreIfSnakeCase(key)}</h2>
<PagesListView pages={recentProjectPages[key]} />
</div>

2
web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View File

@ -235,7 +235,7 @@ const PageDetailsPage: NextPageWithLayout = () => {
debouncedUpdatesEnabled={false}
setIsSubmitting={setIsSubmitting}
value={!value || value === "" ? "<p></p>" : value}
customClassName="tracking-tight self-center w-full max-w-full px-0"
customClassName="tracking-tight self-center px-0 h-full w-full"
onChange={(_description_json: Object, description_html: string) => {
onChange(description_html);
setIsSubmitting("submitting");

2
web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
View File

@ -90,7 +90,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
projectId={projectId.toString()}
/>
)}
<div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
<div className="space-y-5 p-6 h-full overflow-hidden flex flex-col">
<div className="flex gap-4 justify-between">
<h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
</div>

60
web/store/page.store.ts
View File

@ -86,39 +86,67 @@ export class PageStore implements IPageStore {
}
get projectPages() {
if (!this.rootStore.project.projectId) return;
return this.pages?.[this.rootStore.project.projectId] || [];
const projectId = this.rootStore.project.projectId;
if (!projectId || !this.pages[projectId]) return undefined;
return this.pages?.[projectId] || [];
}
get recentProjectPages() {
if (!this.rootStore.project.projectId) return;
const data: IRecentPages = { today: [], yesterday: [], this_week: [] };
data["today"] = this.pages[this.rootStore.project.projectId]?.filter((p) => isToday(new Date(p.created_at))) || [];
data["yesterday"] =
this.pages[this.rootStore.project.projectId]?.filter((p) => isYesterday(new Date(p.created_at))) || [];
const projectId = this.rootStore.project.projectId;
if (!projectId) return undefined;
if (!this.pages[projectId]) return undefined;
const data: IRecentPages = { today: [], yesterday: [], this_week: [], older: [] };
data["today"] = this.pages[projectId]?.filter((p) => isToday(new Date(p.created_at))) || [];
data["yesterday"] = this.pages[projectId]?.filter((p) => isYesterday(new Date(p.created_at))) || [];
data["this_week"] =
this.pages[this.rootStore.project.projectId]?.filter((p) => isThisWeek(new Date(p.created_at))) || [];
this.pages[projectId]?.filter(
(p) =>
isThisWeek(new Date(p.created_at)) && !isToday(new Date(p.created_at)) && !isYesterday(new Date(p.created_at))
) || [];
data["older"] =
this.pages[projectId]?.filter(
(p) => !isThisWeek(new Date(p.created_at)) && !isYesterday(new Date(p.created_at))
) || [];
return data;
}
get favoriteProjectPages() {
if (!this.rootStore.project.projectId) return;
return this.pages[this.rootStore.project.projectId]?.filter((p) => p.is_favorite);
const projectId = this.rootStore.project.projectId;
if (!projectId || !this.pages[projectId]) return undefined;
return this.pages[projectId]?.filter((p) => p.is_favorite);
}
get privateProjectPages() {
if (!this.rootStore.project.projectId) return;
return this.pages[this.rootStore.project.projectId]?.filter((p) => p.access === 1);
const projectId = this.rootStore.project.projectId;
if (!projectId || !this.pages[projectId]) return undefined;
return this.pages[projectId]?.filter((p) => p.access === 1);
}
get sharedProjectPages() {
if (!this.rootStore.project.projectId) return;
return this.pages[this.rootStore.project.projectId]?.filter((p) => p.access === 0);
const projectId = this.rootStore.project.projectId;
if (!projectId || !this.pages[projectId]) return undefined;
return this.pages[projectId]?.filter((p) => p.access === 0);
}
get archivedProjectPages() {
if (!this.rootStore.project.projectId) return;
return this.archivedPages[this.rootStore.project.projectId];
const projectId = this.rootStore.project.projectId;
if (!projectId || !this.archivedPages[projectId]) return undefined;
return this.archivedPages[projectId];
}
addToFavorites = async (workspaceSlug: string, projectId: string, pageId: string) => {

1
web/types/pages.d.ts vendored
View File

@ -30,6 +30,7 @@ export interface IRecentPages {
today: IPage[];
yesterday: IPage[];
this_week: IPage[];
older: IPage[];
[key: string]: IPage[];
}