feat: New Pages with Enhanced Document Editor Packages made over Editor Core 📝 (#2784)
* fix: page transaction model * fix: page transaction model * feat: updated ui for page route * chore: initailized `document-editor` package for plane * fix: format persistence while pasting markdown in editor * feat: Inititalized Document-Editor and Editor with Ref * feat: added tooltip component and slash command for editor * feat: added `document-editor` extensions * feat: added custom search component for embedding labels * feat: added top bar menu component * feat: created document-editor exposed components * feat: integrated `document-editor` in `pages` route * chore: updated dependencies * feat: merge conflict resolution * chore: modified configuration for document editor * feat: added content browser menu for document editor summary * feat: added fixed menu and editor instances * feat: added document edittor instances and summary table * feat: implemented document-editor in PageDetail * chore: css and export fixes * fix: migration and optimisation * fix: added `on_create` hook in the core editor * feat: added conditional menu bar action in document-editor * feat: added menu actions from single page view * feat: added services for archiving, unarchiving and retriving archived pages * feat: added services for page archives * feat: implemented page archives in page list view * feat: implemented page archives in document-editor * feat: added editor marking hook * chore: seperated editor header from the main content * chore: seperated editor summary utilities from the main editor * chore: refactored necessary components from the document editor * chore: removed summary sidebar component from the main content editor * chore: removed scrollSummaryDependency from Header and Sidebar * feat: seperated page renderer as a seperate component * chore: seperated page_renderer and sidebar as component from index * feat: added locked property to IPage type * feat: added lock/unlock services in page service * chore: seperated DocumentDetails as exported interface from index * feat: seperated document editor configs as seperate interfaces * chore: seperated menu options from the editor header component * fix: fixed page_lock performing lock/unlock operation on queryset instead of single instance * fix: css positioning changes * feat: added archive/lock alert labels * feat: added boolean props in menu-actions/options * feat: added lock/unlock & archive/unarchive services * feat: added on update mutations for archived pages in page-view * feat: added archive/lock on_update mutations in single page vieq * feat: exported readonly editor for locked pages * chore: seperated kanban menu props and saved over passing redundant data * fix: readonly editor not generating markings on first render * fix: cheveron overflowing from editor-header * chore: removed unused utility actions * fix: enabled sidebar view by default * feat: removed locking on pages in archived state * feat: added indentation in heading component * fix: button classnames in vertical dropdowns * feat: added `last_archived_at` and `last_edited_at` details in editor-header * feat: changed types for archived updates and document last updates * feat: updated editor and header props * feat: updated queryset according to new page query format * feat: added parameters in page view for shared / private pages * feat: updated other-page-view to shared page view && same with private pages * feat: added page-view as shared / private * fix: replaced deleting to archiving for pages * feat: handle restoring of page from archived section from list view * feat: made previledge based option render for pages * feat: removed layout view for page list view * feat: linting changes * fix: adding mobx changes to pages * fix: removed uneccessary migrations * fix: mobx store changes * fix: adding date-fns pacakge * fix: updating yarn lock * fix: removing unneccessary method params * chore: added access specifier to the create/update page modal * fix: tab view layout changes * chore: delete endpoint for page * fix: page actions, including- archive, favorite, access control, delete * chore: remove archive page modal * fix: build errors --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com> Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
Henit Chobisa
sriram veeraghanta
parent
2a2e504ebb
commit
4416419c9b
68 changed files with 2800 additions and 2173 deletions
|
|
@ -2,76 +2,49 @@ import React, { useEffect, useRef, useState, ReactElement } from "react";
|
|||
import { useRouter } from "next/router";
|
||||
import useSWR, { mutate } from "swr";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { Popover, Transition } from "@headlessui/react";
|
||||
import { TwitterPicker } from "react-color";
|
||||
import { DragDropContext, DropResult } from "@hello-pangea/dnd";
|
||||
// services
|
||||
import { ProjectService, ProjectMemberService } from "services/project";
|
||||
import { PageService } from "services/page.service";
|
||||
import { IssueLabelService } from "services/issue";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import useUser from "hooks/use-user";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
// components
|
||||
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
||||
import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
|
||||
import { CreateLabelModal } from "components/labels";
|
||||
import { CreateBlock } from "components/pages/create-block";
|
||||
import { PageDetailsHeader } from "components/headers/page-details";
|
||||
// ui
|
||||
import { EmptyState } from "components/common";
|
||||
import { CustomSearchSelect, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
|
||||
// images
|
||||
// ui
|
||||
import { DocumentEditorWithRef, DocumentReadOnlyEditorWithRef } from "@plane/document-editor";
|
||||
import { Loader } from "@plane/ui";
|
||||
// assets
|
||||
import emptyPage from "public/empty-state/page.svg";
|
||||
// icons
|
||||
import { ArrowLeft, Lock, LinkIcon, Palette, Plus, Star, Unlock, X, ChevronDown } from "lucide-react";
|
||||
// helpers
|
||||
import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper";
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
import { orderArrayBy } from "helpers/array.helper";
|
||||
import { renderDateFormat } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { NextPageWithLayout } from "types/app";
|
||||
import { IIssueLabel, IPage, IPageBlock, IProjectMember } from "types";
|
||||
import { IPage } from "types";
|
||||
// fetch-keys
|
||||
import {
|
||||
PAGE_BLOCKS_LIST,
|
||||
PAGE_DETAILS,
|
||||
PROJECT_DETAILS,
|
||||
PROJECT_ISSUE_LABELS,
|
||||
USER_PROJECT_VIEW,
|
||||
} from "constants/fetch-keys";
|
||||
import { PAGE_DETAILS } from "constants/fetch-keys";
|
||||
import { FileService } from "services/file.service";
|
||||
|
||||
// services
|
||||
const projectService = new ProjectService();
|
||||
const projectMemberService = new ProjectMemberService();
|
||||
const fileService = new FileService();
|
||||
const pageService = new PageService();
|
||||
const issueLabelService = new IssueLabelService();
|
||||
|
||||
const PageDetailsPage: NextPageWithLayout = () => {
|
||||
const [createBlockForm, setCreateBlockForm] = useState(false);
|
||||
const [labelModal, setLabelModal] = useState(false);
|
||||
const [showBlock, setShowBlock] = useState(false);
|
||||
const editorRef = useRef<any>(null);
|
||||
|
||||
const scrollToRef = useRef<HTMLDivElement>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, pageId } = router.query;
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const { handleSubmit, reset, watch, setValue, control } = useForm<IPage>({
|
||||
const { handleSubmit, reset, getValues, control } = useForm<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
|
||||
);
|
||||
|
||||
// =================== Fetching Page Details ======================
|
||||
const { data: pageDetails, error } = useSWR(
|
||||
workspaceSlug && projectId && pageId ? PAGE_DETAILS(pageId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
|
|
@ -79,27 +52,6 @@ const PageDetailsPage: NextPageWithLayout = () => {
|
|||
: null
|
||||
);
|
||||
|
||||
const { data: pageBlocks } = useSWR(
|
||||
workspaceSlug && projectId && pageId ? PAGE_BLOCKS_LIST(pageId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => pageService.listPageBlocks(workspaceSlug as string, projectId as string, pageId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: labels } = useSWR<IIssueLabel[]>(
|
||||
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: memberDetails } = useSWR(
|
||||
workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectMemberService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
|
||||
: null
|
||||
);
|
||||
|
||||
const updatePage = async (formData: IPage) => {
|
||||
if (!workspaceSlug || !projectId || !pageId) return;
|
||||
|
||||
|
|
@ -117,159 +69,96 @@ const PageDetailsPage: NextPageWithLayout = () => {
|
|||
});
|
||||
};
|
||||
|
||||
const partialUpdatePage = async (formData: Partial<IPage>) => {
|
||||
if (!workspaceSlug || !projectId || !pageId) return;
|
||||
|
||||
mutate<IPage>(
|
||||
PAGE_DETAILS(pageId as string),
|
||||
(prevData) => ({
|
||||
...(prevData as IPage),
|
||||
...formData,
|
||||
}),
|
||||
false
|
||||
);
|
||||
|
||||
await pageService.patchPage(workspaceSlug as string, projectId as string, pageId as string, formData).then(() => {
|
||||
mutate(PAGE_DETAILS(pageId as string));
|
||||
});
|
||||
const createPage = async (payload: Partial<IPage>) => {
|
||||
await pageService.createPage(workspaceSlug as string, projectId as string, payload);
|
||||
};
|
||||
|
||||
const handleAddToFavorites = () => {
|
||||
if (!workspaceSlug || !projectId || !pageId) return;
|
||||
|
||||
mutate<IPage>(
|
||||
PAGE_DETAILS(pageId as string),
|
||||
(prevData) => ({
|
||||
...(prevData as IPage),
|
||||
is_favorite: true,
|
||||
}),
|
||||
false
|
||||
).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success",
|
||||
message: "Added to favorites",
|
||||
});
|
||||
});
|
||||
|
||||
pageService.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
|
||||
).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success",
|
||||
message: "Removed from favorites",
|
||||
});
|
||||
});
|
||||
|
||||
pageService.removePageFromFavorites(workspaceSlug as string, projectId as string, pageId as string);
|
||||
};
|
||||
|
||||
const handleOnDragEnd = (result: DropResult) => {
|
||||
if (!result.destination || !workspaceSlug || !projectId || !pageId || !pageBlocks) return;
|
||||
|
||||
const { source, destination } = result;
|
||||
|
||||
let newSortOrder = pageBlocks.find((p) => p.id === result.draggableId)?.sort_order ?? 65535;
|
||||
|
||||
if (destination.index === 0) newSortOrder = pageBlocks[0].sort_order - 10000;
|
||||
else if (destination.index === pageBlocks.length - 1)
|
||||
newSortOrder = pageBlocks[pageBlocks.length - 1].sort_order + 10000;
|
||||
else {
|
||||
if (destination.index > source.index)
|
||||
newSortOrder = (pageBlocks[destination.index].sort_order + pageBlocks[destination.index + 1].sort_order) / 2;
|
||||
else if (destination.index < source.index)
|
||||
newSortOrder = (pageBlocks[destination.index - 1].sort_order + pageBlocks[destination.index].sort_order) / 2;
|
||||
}
|
||||
|
||||
const newBlocksList = pageBlocks.map((p) => ({
|
||||
...p,
|
||||
sort_order: p.id === result.draggableId ? newSortOrder : p.sort_order,
|
||||
}));
|
||||
mutate<IPageBlock[]>(
|
||||
PAGE_BLOCKS_LIST(pageId as string),
|
||||
orderArrayBy(newBlocksList, "sort_order", "ascending"),
|
||||
false
|
||||
);
|
||||
|
||||
pageService.patchPageBlock(workspaceSlug as string, projectId as string, pageId as string, result.draggableId, {
|
||||
sort_order: newSortOrder,
|
||||
});
|
||||
};
|
||||
|
||||
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 handleShowBlockToggle = async () => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
const payload: Partial<IProjectMember> = {
|
||||
preferences: {
|
||||
pages: {
|
||||
block_display: !showBlock,
|
||||
},
|
||||
},
|
||||
// ================ Page Menu Actions ==================
|
||||
const duplicate_page = async () => {
|
||||
const currentPageValues = getValues();
|
||||
const formData: Partial<IPage> = {
|
||||
name: "Copy of " + currentPageValues.name,
|
||||
description_html: currentPageValues.description_html,
|
||||
};
|
||||
|
||||
mutate<IProjectMember>(
|
||||
(workspaceSlug as string) && (projectId as string) ? USER_PROJECT_VIEW(projectId as string) : null,
|
||||
(prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
|
||||
return {
|
||||
...prevData,
|
||||
...payload,
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
await projectService.setProjectView(workspaceSlug as string, projectId as string, payload).catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Something went wrong. Please try again.",
|
||||
});
|
||||
});
|
||||
await createPage(formData);
|
||||
};
|
||||
|
||||
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>
|
||||
),
|
||||
}));
|
||||
const archivePage = async () => {
|
||||
try {
|
||||
await pageService.archivePage(workspaceSlug as string, projectId as string, pageId as string).then(() => {
|
||||
mutate<IPage>(
|
||||
PAGE_DETAILS(pageId as string),
|
||||
(prevData) => {
|
||||
if (prevData && prevData.is_locked) {
|
||||
prevData.archived_at = renderDateFormat(new Date());
|
||||
return prevData;
|
||||
}
|
||||
},
|
||||
true
|
||||
);
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
const unArchivePage = async () => {
|
||||
try {
|
||||
await pageService.restorePage(workspaceSlug as string, projectId as string, pageId as string).then(() => {
|
||||
mutate<IPage>(
|
||||
PAGE_DETAILS(pageId as string),
|
||||
(prevData) => {
|
||||
if (prevData && prevData.is_locked) {
|
||||
prevData.archived_at = null;
|
||||
return prevData;
|
||||
}
|
||||
},
|
||||
true
|
||||
);
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
// ========================= Page Lock ==========================
|
||||
const lockPage = async () => {
|
||||
try {
|
||||
await pageService.lockPage(workspaceSlug as string, projectId as string, pageId as string).then(() => {
|
||||
mutate<IPage>(
|
||||
PAGE_DETAILS(pageId as string),
|
||||
(prevData) => {
|
||||
if (prevData && prevData.is_locked) {
|
||||
prevData.is_locked = true;
|
||||
}
|
||||
return prevData;
|
||||
},
|
||||
true
|
||||
);
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
const unlockPage = async () => {
|
||||
try {
|
||||
await pageService.unlockPage(workspaceSlug as string, projectId as string, pageId as string).then(() => {
|
||||
mutate<IPage>(
|
||||
PAGE_DETAILS(pageId as string),
|
||||
(prevData) => {
|
||||
if (prevData && prevData.is_locked) {
|
||||
prevData.is_locked = false;
|
||||
return prevData;
|
||||
}
|
||||
},
|
||||
true
|
||||
);
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!pageDetails) return;
|
||||
|
|
@ -279,10 +168,9 @@ const PageDetailsPage: NextPageWithLayout = () => {
|
|||
});
|
||||
}, [reset, pageDetails]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!memberDetails) return;
|
||||
setShowBlock(memberDetails.preferences.pages.block_display);
|
||||
}, [memberDetails]);
|
||||
const debouncedFormSave = useDebouncedCallback(async () => {
|
||||
handleSubmit(updatePage)().finally(() => setIsSubmitting("submitted"));
|
||||
}, 1500);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -297,312 +185,78 @@ const PageDetailsPage: NextPageWithLayout = () => {
|
|||
}}
|
||||
/>
|
||||
) : pageDetails ? (
|
||||
<div className="flex h-full flex-col justify-between space-y-4 overflow-hidden p-4">
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex w-full flex-col gap-2">
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 text-sm text-custom-text-200"
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
render={() => (
|
||||
<TextArea
|
||||
id="name"
|
||||
name="name"
|
||||
value={watch("name")}
|
||||
placeholder="Page Title"
|
||||
onBlur={handleSubmit(updatePage)}
|
||||
onChange={(e) => setValue("name", e.target.value)}
|
||||
required
|
||||
className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent !px-3 !py-2 text-xl font-semibold outline-none ring-0"
|
||||
role="textbox"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full 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 cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
|
||||
onClick={() => {
|
||||
const updatedLabels = pageDetails.labels.filter((l) => l !== labelId);
|
||||
partialUpdatePage({ labels: updatedLabels });
|
||||
}}
|
||||
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}
|
||||
<X className="h-2.5 w-2.5 group-hover:text-red-500" />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
<CustomSearchSelect
|
||||
customButton={
|
||||
<div className="flex items-center gap-1 rounded-sm bg-custom-background-80 p-1.5 text-xs">
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
{pageDetails.labels.length <= 0 && <span>Add Label</span>}
|
||||
</div>
|
||||
<div className="flex h-full flex-col justify-between pl-5 pr-5">
|
||||
<div className="h-full w-full">
|
||||
{pageDetails.is_locked || pageDetails.archived_at ? (
|
||||
<DocumentReadOnlyEditorWithRef
|
||||
ref={editorRef}
|
||||
value={pageDetails.description_html}
|
||||
customClassName={"tracking-tight self-center w-full max-w-full px-0"}
|
||||
borderOnFocus={false}
|
||||
noBorder={true}
|
||||
documentDetails={{
|
||||
title: pageDetails.name,
|
||||
created_by: pageDetails.created_by,
|
||||
created_on: pageDetails.created_at,
|
||||
last_updated_at: pageDetails.updated_at,
|
||||
last_updated_by: pageDetails.updated_by,
|
||||
}}
|
||||
pageLockConfig={
|
||||
!pageDetails.archived_at && user && pageDetails.owned_by === user.id
|
||||
? { action: unlockPage, is_locked: pageDetails.is_locked }
|
||||
: undefined
|
||||
}
|
||||
pageArchiveConfig={
|
||||
user && pageDetails.owned_by === user.id
|
||||
? {
|
||||
action: pageDetails.archived_at ? unArchivePage : archivePage,
|
||||
is_archived: pageDetails.archived_at ? true : false,
|
||||
archived_at: pageDetails.archived_at ? new Date(pageDetails.archived_at) : undefined,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Controller
|
||||
name="description_html"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<DocumentEditorWithRef
|
||||
documentDetails={{
|
||||
title: pageDetails.name,
|
||||
created_by: pageDetails.created_by,
|
||||
created_on: pageDetails.created_at,
|
||||
last_updated_at: pageDetails.updated_at,
|
||||
last_updated_by: pageDetails.updated_by,
|
||||
}}
|
||||
uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
|
||||
deleteFile={fileService.deleteImage}
|
||||
ref={editorRef}
|
||||
debouncedUpdatesEnabled={false}
|
||||
setIsSubmitting={setIsSubmitting}
|
||||
value={!value || value === "" ? "<p></p>" : value}
|
||||
customClassName="tracking-tight self-center w-full max-w-full px-0"
|
||||
onChange={(_description_json: Object, description_html: string) => {
|
||||
onChange(description_html);
|
||||
setIsSubmitting("submitting");
|
||||
debouncedFormSave();
|
||||
}}
|
||||
duplicationConfig={{ action: duplicate_page }}
|
||||
pageArchiveConfig={
|
||||
user && pageDetails.owned_by === user.id
|
||||
? {
|
||||
is_archived: pageDetails.archived_at ? true : false,
|
||||
action: pageDetails.archived_at ? unArchivePage : archivePage,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
value={pageDetails.labels}
|
||||
footerOption={
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
|
||||
onClick={() => {
|
||||
setLabelModal(true);
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center justify-start gap-1 text-custom-text-200">
|
||||
<Plus className="h-4 w-4" aria-hidden="true" />
|
||||
<span>Create New Label</span>
|
||||
</span>
|
||||
</button>
|
||||
pageLockConfig={
|
||||
user && pageDetails.owned_by === user.id ? { is_locked: false, action: lockPage } : undefined
|
||||
}
|
||||
onChange={(val: string[]) => partialUpdatePage({ labels: val })}
|
||||
options={options}
|
||||
multiple
|
||||
noChevron
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center gap-6 text-custom-text-200">
|
||||
<Tooltip
|
||||
tooltipContent={`Last updated at ${render24HourFormatTime(
|
||||
pageDetails.updated_at
|
||||
)} on ${renderShortDate(pageDetails.updated_at)}`}
|
||||
>
|
||||
<p className="text-sm">{render24HourFormatTime(pageDetails.updated_at)}</p>
|
||||
</Tooltip>
|
||||
<Popover className="relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group flex items-center gap-2 rounded-md border border-custom-sidebar-border-200 bg-transparent px-2 py-1 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
|
||||
open
|
||||
? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
|
||||
: "text-custom-sidebar-text-200"
|
||||
}`}
|
||||
>
|
||||
Display
|
||||
<ChevronDown className="h-3 w-3" aria-hidden="true" />
|
||||
</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 right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
|
||||
<div className="relative divide-y-2 divide-custom-border-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-custom-text-200">Show full block content</span>
|
||||
<ToggleSwitch
|
||||
value={showBlock}
|
||||
onChange={(value) => {
|
||||
setShowBlock(value);
|
||||
handleShowBlockToggle();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
<button className="flex items-center gap-2" onClick={handleCopyText}>
|
||||
<LinkIcon className="h-4 w-4" />
|
||||
</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-custom-text-100" : "text-custom-text-200"
|
||||
}`}
|
||||
>
|
||||
{watch("color") && watch("color") !== "" ? (
|
||||
<span
|
||||
className="h-4 w-4 rounded"
|
||||
style={{
|
||||
backgroundColor: watch("color") ?? "black",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Palette 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}
|
||||
styles={{
|
||||
default: {
|
||||
card: {
|
||||
backgroundColor: `rgba(var(--color-background-80))`,
|
||||
},
|
||||
triangle: {
|
||||
position: "absolute",
|
||||
borderColor:
|
||||
"transparent transparent rgba(var(--color-background-80)) transparent",
|
||||
},
|
||||
input: {
|
||||
border: "none",
|
||||
height: "1.85rem",
|
||||
fontSize: "0.875rem",
|
||||
paddingLeft: "0.25rem",
|
||||
color: `rgba(var(--color-text-200))`,
|
||||
boxShadow: "none",
|
||||
backgroundColor: `rgba(var(--color-background-90))`,
|
||||
borderLeft: `1px solid rgba(var(--color-background-80))`,
|
||||
},
|
||||
hash: {
|
||||
color: `rgba(var(--color-text-200))`,
|
||||
boxShadow: "none",
|
||||
backgroundColor: `rgba(var(--color-background-90))`,
|
||||
},
|
||||
},
|
||||
}}
|
||||
onChange={(val) => partialUpdatePage({ color: val.hex })}
|
||||
/>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
{pageDetails.created_by === user?.id && (
|
||||
<Tooltip
|
||||
tooltipContent={`${
|
||||
pageDetails.access
|
||||
? "This page is only visible to you."
|
||||
: "This page can be viewed by anyone in the project."
|
||||
}`}
|
||||
>
|
||||
{pageDetails.access ? (
|
||||
<button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
|
||||
<Lock className="h-4 w-4" />
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={() => partialUpdatePage({ access: 1 })} type="button" className="z-10">
|
||||
<Unlock className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</Tooltip>
|
||||
)}
|
||||
{pageDetails.is_favorite ? (
|
||||
<button onClick={handleRemoveFromFavorites} className="z-10">
|
||||
<Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={handleAddToFavorites} type="button" className="z-10">
|
||||
<Star className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 h-full w-full">
|
||||
{pageBlocks ? (
|
||||
<>
|
||||
<DragDropContext onDragEnd={handleOnDragEnd}>
|
||||
{pageBlocks.length !== 0 && (
|
||||
<StrictModeDroppable droppableId="blocks-list">
|
||||
{(provided) => (
|
||||
<div
|
||||
className="flex w-full flex-col gap-2"
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
>
|
||||
<>
|
||||
{pageBlocks.map((block, index) => (
|
||||
<SinglePageBlock
|
||||
key={block.id}
|
||||
block={block}
|
||||
projectDetails={projectDetails}
|
||||
showBlockDetails={showBlock}
|
||||
index={index}
|
||||
user={user}
|
||||
/>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</StrictModeDroppable>
|
||||
)}
|
||||
</DragDropContext>
|
||||
{createBlockForm && (
|
||||
<div className="mt-4" ref={scrollToRef}>
|
||||
<CreateUpdateBlockInline handleClose={() => setCreateBlockForm(false)} focus="name" user={user} />
|
||||
</div>
|
||||
)}
|
||||
{labelModal && typeof projectId === "string" && (
|
||||
<CreateLabelModal
|
||||
isOpen={labelModal}
|
||||
handleClose={() => setLabelModal(false)}
|
||||
projectId={projectId}
|
||||
onSuccess={(response) => {
|
||||
partialUpdatePage({
|
||||
labels: [...(pageDetails.labels ?? []), response.id],
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Loader>
|
||||
<Loader.Item height="150px" />
|
||||
<Loader.Item height="150px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<CreateBlock user={user} />
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -2,48 +2,65 @@ import { useState, Fragment, ReactElement } from "react";
|
|||
import { useRouter } from "next/router";
|
||||
import dynamic from "next/dynamic";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import useSWR from "swr";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import useLocalStorage from "hooks/use-local-storage";
|
||||
import useUserAuth from "hooks/use-user-auth";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
// components
|
||||
import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages";
|
||||
import { RecentPagesList, CreateUpdatePageModal } from "components/pages";
|
||||
import { PagesHeader } from "components/headers";
|
||||
// ui
|
||||
import { Tooltip } from "@plane/ui";
|
||||
// types
|
||||
import { TPageViewProps } from "types";
|
||||
import { NextPageWithLayout } from "types/app";
|
||||
// constants
|
||||
import { PAGE_TABS_LIST, PAGE_VIEW_LAYOUTS } from "constants/page";
|
||||
import { PAGE_TABS_LIST } from "constants/page";
|
||||
|
||||
const AllPagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.AllPagesList), {
|
||||
const AllPagesList = dynamic<any>(() => import("components/pages").then((a) => a.AllPagesList), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const FavoritePagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.FavoritePagesList), {
|
||||
const FavoritePagesList = dynamic<any>(() => import("components/pages").then((a) => a.FavoritePagesList), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const MyPagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.MyPagesList), {
|
||||
const PrivatePagesList = dynamic<any>(() => import("components/pages").then((a) => a.PrivatePagesList), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const OtherPagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.OtherPagesList), {
|
||||
const ArchivedPagesList = dynamic<any>(() => import("components/pages").then((a) => a.ArchivedPagesList), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const ProjectPagesPage: NextPageWithLayout = () => {
|
||||
const SharedPagesList = dynamic<any>(() => import("components/pages").then((a) => a.SharedPagesList), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const ProjectPagesPage: NextPageWithLayout = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
// states
|
||||
const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
|
||||
const [viewType, setViewType] = useState<TPageViewProps>("list");
|
||||
|
||||
const { user } = useUserAuth();
|
||||
|
||||
// store
|
||||
const {
|
||||
page: { fetchPages, fetchArchivedPages },
|
||||
} = useMobxStore();
|
||||
// hooks
|
||||
const {} = useUserAuth();
|
||||
// local storage
|
||||
const { storedValue: pageTab, setValue: setPageTab } = useLocalStorage("pageTab", "Recent");
|
||||
// fetching pages from API
|
||||
useSWR(
|
||||
workspaceSlug && projectId ? `ALL_PAGES_LIST_${projectId}` : null,
|
||||
workspaceSlug && projectId ? () => fetchPages(workspaceSlug.toString(), projectId.toString()) : null
|
||||
);
|
||||
// fetching archived pages from API
|
||||
useSWR(
|
||||
workspaceSlug && projectId ? `ALL_ARCHIVED_PAGES_LIST_${projectId}` : null,
|
||||
workspaceSlug && projectId ? () => fetchArchivedPages(workspaceSlug.toString(), projectId.toString()) : null
|
||||
);
|
||||
|
||||
const currentTabValue = (tab: string | null) => {
|
||||
switch (tab) {
|
||||
|
|
@ -53,11 +70,12 @@ const ProjectPagesPage: NextPageWithLayout = () => {
|
|||
return 1;
|
||||
case "Favorites":
|
||||
return 2;
|
||||
case "Created by me":
|
||||
case "Private":
|
||||
return 3;
|
||||
case "Created by others":
|
||||
case "Shared":
|
||||
return 4;
|
||||
|
||||
case "Archived":
|
||||
return 5;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
|
|
@ -69,34 +87,12 @@ const ProjectPagesPage: NextPageWithLayout = () => {
|
|||
<CreateUpdatePageModal
|
||||
isOpen={createUpdatePageModal}
|
||||
handleClose={() => setCreateUpdatePageModal(false)}
|
||||
user={user}
|
||||
workspaceSlug={workspaceSlug.toString()}
|
||||
projectId={projectId.toString()}
|
||||
/>
|
||||
)}
|
||||
<div className="space-y-5 p-8 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 className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
|
||||
{PAGE_VIEW_LAYOUTS.map((layout) => (
|
||||
<Tooltip key={layout.key} tooltipContent={layout.title}>
|
||||
<button
|
||||
type="button"
|
||||
className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
|
||||
viewType == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
|
||||
}`}
|
||||
onClick={() => setViewType(layout.key as TPageViewProps)}
|
||||
>
|
||||
<layout.icon
|
||||
strokeWidth={2}
|
||||
className={`h-3.5 w-3.5 ${
|
||||
viewType == layout.key ? "text-custom-text-100" : "text-custom-text-200"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</Tooltip>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Tab.Group
|
||||
as={Fragment}
|
||||
|
|
@ -110,12 +106,13 @@ const ProjectPagesPage: NextPageWithLayout = () => {
|
|||
case 2:
|
||||
return setPageTab("Favorites");
|
||||
case 3:
|
||||
return setPageTab("Created by me");
|
||||
return setPageTab("Private");
|
||||
case 4:
|
||||
return setPageTab("Created by others");
|
||||
|
||||
return setPageTab("Shared");
|
||||
case 5:
|
||||
return setPageTab("Archived");
|
||||
default:
|
||||
return setPageTab("Recent");
|
||||
return setPageTab("All");
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
|
@ -139,26 +136,29 @@ const ProjectPagesPage: NextPageWithLayout = () => {
|
|||
</Tab.List>
|
||||
<Tab.Panels as={Fragment}>
|
||||
<Tab.Panel as="div" className="h-full overflow-y-auto space-y-5">
|
||||
<RecentPagesList viewType={viewType} />
|
||||
<RecentPagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<AllPagesList viewType={viewType} />
|
||||
<AllPagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<FavoritePagesList viewType={viewType} />
|
||||
<FavoritePagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<MyPagesList viewType={viewType} />
|
||||
<PrivatePagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<OtherPagesList viewType={viewType} />
|
||||
<SharedPagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<ArchivedPagesList />
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
ProjectPagesPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue