mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
style: pages UI (#769)
* style: pages ui * chore: added toast alert and tooltip * fix: fixed issues in pages block * fix: ai buttons inside pages block
This commit is contained in:
Kunal Vishwakarma
GitHub
parent
f1f716e8f6
commit
e4e66b3ae4
@ -23,7 +23,6 @@ import {
|
||||
CYCLE_DRAFT_LIST,
|
||||
CYCLE_INCOMPLETE_LIST,
|
||||
} from "constants/fetch-keys";
|
||||
import { IncomingMessage } from "http";
|
||||
|
||||
type CycleModalProps = {
|
||||
isOpen: boolean;
|
||||
|
||||
@ -1,9 +1,17 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
import { mutate } from "swr";
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
import { SparklesIcon } from "@heroicons/react/24/outline";
|
||||
import { LayerDiagonalIcon } from "components/icons";
|
||||
import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
|
||||
import {
|
||||
BoltIcon,
|
||||
SparklesIcon,
|
||||
TrashIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
// react-hook-form
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
@ -12,22 +20,24 @@ import pagesService from "services/pages.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
|
||||
import { Loader, PrimaryButton, SecondaryButton, CustomMenu, TextArea } from "components/ui";
|
||||
// types
|
||||
import { IPageBlock } from "types";
|
||||
// fetch-keys
|
||||
import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import issuesService from "services/issues.service";
|
||||
import aiService from "services/ai.service";
|
||||
|
||||
type Props = {
|
||||
handleClose: () => void;
|
||||
data?: IPageBlock;
|
||||
setIsSyncing?: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
focus?: keyof IPageBlock;
|
||||
handelAutoGenerateDescription?: () => Promise<void>;
|
||||
iAmFeelingLucky?: boolean;
|
||||
setGptAssistantModal: () => void;
|
||||
handleBlockSync?: () => void;
|
||||
handleCopyText?: () => void;
|
||||
pushBlockIntoIssues?: () => void;
|
||||
deletePageBlock?: () => void;
|
||||
};
|
||||
|
||||
const defaultValues = {
|
||||
@ -49,10 +59,15 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
|
||||
data,
|
||||
setIsSyncing,
|
||||
focus,
|
||||
handelAutoGenerateDescription,
|
||||
setGptAssistantModal,
|
||||
iAmFeelingLucky,
|
||||
handleBlockSync,
|
||||
handleCopyText,
|
||||
pushBlockIntoIssues,
|
||||
deletePageBlock,
|
||||
}) => {
|
||||
|
||||
const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, pageId } = router.query;
|
||||
|
||||
@ -141,6 +156,46 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
|
||||
.finally(() => onClose());
|
||||
};
|
||||
|
||||
const handleAutoGenerateDescription = async () => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
setIAmFeelingLucky(true);
|
||||
|
||||
aiService
|
||||
.createGptTask(workspaceSlug as string, projectId as string, {
|
||||
prompt: watch("name"),
|
||||
task: "Generate a proper description for this issue in context of a project management software.",
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.response === "")
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message:
|
||||
"Block title isn't informative enough to generate the description. Please try with a different title.",
|
||||
});
|
||||
else {
|
||||
setValue("description", {});
|
||||
setValue("description_html", `${watch("description_html")}<p>${res.response}</p>`);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.status === 429)
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message:
|
||||
"You have reached the maximum number of requests of 50 requests per month per user.",
|
||||
});
|
||||
else
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Some error occurred. Please try again.",
|
||||
});
|
||||
}).finally(()=>setIAmFeelingLucky(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (focus) setFocus(focus);
|
||||
|
||||
@ -167,19 +222,56 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
|
||||
}, [handleClose]);
|
||||
|
||||
return (
|
||||
<div className="border rounded-[10px] p-2 ml-6">
|
||||
<form onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}>
|
||||
<Input
|
||||
<div>
|
||||
<form
|
||||
className="border divide-y rounded-md shadow-md"
|
||||
onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
|
||||
>
|
||||
<div className="px-4 pt-4">
|
||||
<div className="flex justify-between">
|
||||
<TextArea
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Title"
|
||||
register={register}
|
||||
className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-base ring-0 -ml-2 focus:ring-gray-200"
|
||||
className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-xl font-semibold ring-0 focus:ring-gray-200"
|
||||
role="textbox"
|
||||
autoComplete="off"
|
||||
maxLength={255}
|
||||
/>
|
||||
<div className="page-block-section font relative -mx-3 -mt-3">
|
||||
<CustomMenu label={<BoltIcon className="h-4.5 w-3.5" />} noBorder noChevron>
|
||||
{data?.issue ? (
|
||||
<>
|
||||
<CustomMenu.MenuItem onClick={handleBlockSync}>
|
||||
<span className="flex items-center gap-1">
|
||||
<ArrowPathIcon className="h-4 w-4" />
|
||||
<span>Turn sync {data?.sync ? "off" : "on"}</span>
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={handleCopyText}>
|
||||
<span className="flex items-center gap-1">
|
||||
<LinkIcon className="h-4 w-4" />
|
||||
Copy issue link
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
</>
|
||||
) : (
|
||||
<CustomMenu.MenuItem onClick={pushBlockIntoIssues}>
|
||||
<span className="flex items-center gap-1">
|
||||
<LayerDiagonalIcon className="h-4 w-4" />
|
||||
Push into issues
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
<CustomMenu.MenuItem onClick={deletePageBlock}>
|
||||
<span className="flex items-center gap-1">
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
Delete block
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
<div className="page-block-section text-[#495057] relative">
|
||||
<Controller
|
||||
name="description"
|
||||
control={control}
|
||||
@ -192,24 +284,20 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
|
||||
}
|
||||
onJSONChange={(jsonValue) => setValue("description", jsonValue)}
|
||||
onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
|
||||
placeholder="Description"
|
||||
aria-hidden
|
||||
placeholder="Write something..."
|
||||
customClassName="text-sm"
|
||||
noBorder
|
||||
borderOnFocus={false}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end items-center gap-2">
|
||||
{ data &&
|
||||
<>
|
||||
{console.log(handelAutoGenerateDescription, setGptAssistantModal, iAmFeelingLucky)}
|
||||
<div className="flex m-2 mt-6 ml-2">
|
||||
<button
|
||||
type="button"
|
||||
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100 ${iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
|
||||
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs border hover:bg-gray-100 ${
|
||||
iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
|
||||
}`}
|
||||
onClick={handelAutoGenerateDescription}
|
||||
onClick={handleAutoGenerateDescription}
|
||||
disabled={iAmFeelingLucky}
|
||||
>
|
||||
{iAmFeelingLucky ? (
|
||||
@ -220,19 +308,21 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
{data && <button
|
||||
type="button"
|
||||
className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100"
|
||||
className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs border ml-4 hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
handleClose();
|
||||
onClose();
|
||||
setGptAssistantModal();
|
||||
}}
|
||||
>
|
||||
<SparklesIcon className="h-4 w-4" />
|
||||
AI
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
</button>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex p-4 justify-end items-center gap-2">
|
||||
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
|
||||
<PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
|
||||
{data
|
||||
|
||||
@ -37,16 +37,21 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
|
||||
<>
|
||||
{pages ? (
|
||||
Object.keys(pages).length > 0 && !isEmpty ? (
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="mt-4 space-y-4 flex flex-col gap-5">
|
||||
{Object.keys(pages).map((key) => {
|
||||
if (pages[key].length === 0) return null;
|
||||
|
||||
return (
|
||||
<React.Fragment key={key}>
|
||||
<h2 className="text-xl font-medium capitalize">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold capitalize mb-4">
|
||||
{replaceUnderscoreIfSnakeCase(key)}
|
||||
</h2>
|
||||
<PagesView pages={pages[key as keyof RecentPagesResponse]} viewType={viewType} />
|
||||
<PagesView
|
||||
pages={pages[key as keyof RecentPagesResponse]}
|
||||
viewType={viewType}
|
||||
/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -207,7 +207,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
|
||||
))}
|
||||
</ul>
|
||||
) : viewType === "detailed" ? (
|
||||
<div className="rounded-[10px] border border-gray-200 bg-white">
|
||||
<div className="rounded-[10px] border divide-y border-gray-200 bg-white">
|
||||
{pages.map((page) => (
|
||||
<SinglePageDetailedItem
|
||||
key={page.id}
|
||||
|
||||
@ -23,13 +23,14 @@ import { CreateUpdateBlockInline } from "components/pages";
|
||||
import { CustomMenu, Loader } from "components/ui";
|
||||
// icons
|
||||
import { LayerDiagonalIcon } from "components/icons";
|
||||
import { ArrowPathIcon } from "@heroicons/react/20/solid";
|
||||
import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
|
||||
import {
|
||||
BoltIcon,
|
||||
CheckIcon,
|
||||
EllipsisVerticalIcon,
|
||||
PencilIcon,
|
||||
SparklesIcon,
|
||||
TrashIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
@ -173,7 +174,7 @@ export const SinglePageBlock: React.FC<Props> = ({
|
||||
});
|
||||
};
|
||||
|
||||
const handelAutoGenerateDescription = async () => {
|
||||
const handleAutoGenerateDescription = async () => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
setIAmFeelingLucky(true);
|
||||
@ -303,17 +304,19 @@ export const SinglePageBlock: React.FC<Props> = ({
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<CreateUpdateBlockInline
|
||||
handelAutoGenerateDescription={handelAutoGenerateDescription}
|
||||
setGptAssistantModal={()=>setGptAssistantModal((prev)=>!prev)}
|
||||
iAmFeelingLucky={iAmFeelingLucky}
|
||||
setGptAssistantModal={() => setGptAssistantModal((prev) => !prev)}
|
||||
handleClose={() => setCreateBlockForm(false)}
|
||||
data={block}
|
||||
setIsSyncing={setIsSyncing}
|
||||
deletePageBlock={deletePageBlock}
|
||||
handleBlockSync={handleBlockSync}
|
||||
handleCopyText={handleCopyText}
|
||||
pushBlockIntoIssues={pushBlockIntoIssues}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={`group relative pl-6 ${
|
||||
className={`group relative ${
|
||||
snapshot.isDragging ? "border-2 bg-white border-theme shadow-lg rounded-md p-6" : ""
|
||||
}`}
|
||||
ref={provided.innerRef}
|
||||
@ -321,13 +324,13 @@ export const SinglePageBlock: React.FC<Props> = ({
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-4 -left-2 p-0.5 hover:bg-gray-100 rounded hidden group-hover:flex"
|
||||
className="absolute top-4 -left-4 p-0.5 hover:bg-gray-100 rounded hidden group-hover:!flex"
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<EllipsisVerticalIcon className="h-[18px]" />
|
||||
<EllipsisVerticalIcon className="h-[18px] -ml-3" />
|
||||
</button>
|
||||
<div className="absolute top-4 right-0 items-center gap-2 hidden group-hover:flex bg-white pl-4">
|
||||
<div className="absolute top-4 right-0 items-center gap-2 hidden group-hover:!flex bg-white pl-4">
|
||||
{block.issue && block.sync && (
|
||||
<div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-gray-100 py-1 px-1.5 text-xs">
|
||||
{isSyncing ? (
|
||||
@ -343,7 +346,7 @@ export const SinglePageBlock: React.FC<Props> = ({
|
||||
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100 ${
|
||||
iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
|
||||
}`}
|
||||
onClick={handelAutoGenerateDescription}
|
||||
onClick={handleAutoGenerateDescription}
|
||||
disabled={iAmFeelingLucky}
|
||||
>
|
||||
{iAmFeelingLucky ? (
|
||||
@ -373,18 +376,32 @@ export const SinglePageBlock: React.FC<Props> = ({
|
||||
{block.issue ? (
|
||||
<>
|
||||
<CustomMenu.MenuItem onClick={handleBlockSync}>
|
||||
<>Turn sync {block.sync ? "off" : "on"}</>
|
||||
<span className="flex items-center gap-1">
|
||||
<ArrowPathIcon className="h-4 w-4" />
|
||||
<span>Turn sync {block.sync ? "off" : "on"}</span>
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={handleCopyText}>
|
||||
<span className="flex items-center gap-1">
|
||||
<LinkIcon className="h-4 w-4" />
|
||||
Copy issue link
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
</>
|
||||
) : (
|
||||
<CustomMenu.MenuItem onClick={pushBlockIntoIssues}>
|
||||
<span className="flex items-center gap-1">
|
||||
<LayerDiagonalIcon className="h-4 w-4" />
|
||||
Push into issues
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
<CustomMenu.MenuItem onClick={deletePageBlock}>Delete block</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={deletePageBlock}>
|
||||
<span className="flex items-center gap-1">
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
Delete block
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
<div
|
||||
@ -392,21 +409,34 @@ export const SinglePageBlock: React.FC<Props> = ({
|
||||
snapshot.isDragging ? "" : "py-4 [&:not(:last-child)]:border-b"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="px-4 w-full overflow-hidden break-all cursor-pointer"
|
||||
onClick={() => setCreateBlockForm(true)}
|
||||
>
|
||||
<div className="flex">
|
||||
{block.issue && (
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}>
|
||||
<a className="flex flex-shrink-0 items-center gap-1 rounded bg-gray-100 px-1.5 py-1 text-xs">
|
||||
<div className="flex mr-1.5">
|
||||
<Link
|
||||
href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}
|
||||
>
|
||||
<a className="flex flex-shrink-0 items-center gap-1 rounded h-6 bg-gray-100 px-1.5 py-1 text-xs">
|
||||
<LayerDiagonalIcon height="16" width="16" color="black" />
|
||||
{projectDetails?.identifier}-{block.issue_detail?.sequence_id}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<h3
|
||||
className="font-medium text-sm break-all"
|
||||
onClick={() => setCreateBlockForm(true)}
|
||||
>
|
||||
<h3 className="font-medium text-base overflow-hidden max-w-[1000px]">
|
||||
{block.name}
|
||||
</h3>
|
||||
</div>
|
||||
{block?.description_stripped.length > 0 && (
|
||||
<p className="mt-3 text-sm text-gray-500 font-normal h-5 truncate">
|
||||
{block.description_stripped}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<GptAssistantModal
|
||||
block={block}
|
||||
isOpen={gptAssistantModal}
|
||||
|
||||
@ -17,7 +17,7 @@ import {
|
||||
} from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
import { renderShortTime } from "helpers/date-time.helper";
|
||||
import { renderShortTime, renderShortDate } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { IPage } from "types";
|
||||
|
||||
@ -44,12 +44,12 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
|
||||
const { user } = useUser();
|
||||
|
||||
return (
|
||||
<div className="relative first:rounded-t last:rounded-b border">
|
||||
<div className="relative">
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
|
||||
<a className="block p-4">
|
||||
<a className="block py-4 px-6">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="mr-2 truncate text-sm font-medium">{truncateText(page.name, 75)}</p>
|
||||
<p className="mr-2 truncate text-xl font-semibold">{truncateText(page.name, 75)}</p>
|
||||
{page.label_details.length > 0 &&
|
||||
page.label_details.map((label) => (
|
||||
<div
|
||||
@ -74,7 +74,14 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Tooltip
|
||||
tooltipContent={`Last updated at ${
|
||||
renderShortTime(page.updated_at) +
|
||||
` ${new Date(page.updated_at).getHours() < 12 ? "am" : "pm"}`
|
||||
} on ${renderShortDate(page.updated_at)}`}
|
||||
>
|
||||
<p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
|
||||
</Tooltip>
|
||||
{page.is_favorite ? (
|
||||
<button
|
||||
type="button"
|
||||
@ -153,7 +160,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
|
||||
</CustomMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-2 space-y-2 text-sm text-gray-600">
|
||||
<div className="relative mt-2 space-y-2 text-base font-normal text-gray-600">
|
||||
{page.blocks.length > 0
|
||||
? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>)
|
||||
: null}
|
||||
|
||||
@ -16,6 +16,7 @@ import {
|
||||
StarIcon,
|
||||
TrashIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { PencilScribbleIcon } from "components/icons";
|
||||
// helpers
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
import { renderShortDate, renderShortTime } from "helpers/date-time.helper";
|
||||
@ -48,11 +49,13 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
|
||||
<li>
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
|
||||
<a>
|
||||
<div className="relative rounded p-4 hover:bg-gray-100">
|
||||
<div className="relative rounded p-4 hover:bg-[#E9ECEF]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<DocumentTextIcon className="h-4 w-4" />
|
||||
<p className="mr-2 truncate text-sm font-medium">{truncateText(page.name, 75)}</p>
|
||||
<PencilScribbleIcon className="h-4 w-4" />
|
||||
<p className="mr-2 truncate text-base text-[#212529] font-medium">
|
||||
{truncateText(page.name, 75)}
|
||||
</p>
|
||||
{page.label_details.length > 0 &&
|
||||
page.label_details.map((label) => (
|
||||
<div
|
||||
@ -78,9 +81,8 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
|
||||
<div className="ml-2 flex flex-shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Tooltip
|
||||
tooltipContent={`Last updated at ${renderShortTime(
|
||||
page.updated_at
|
||||
)} ${renderShortDate(page.updated_at)}`}
|
||||
tooltipContent={`Last updated at ${
|
||||
renderShortTime(page.updated_at)} on ${renderShortDate(page.updated_at)}`}
|
||||
>
|
||||
<p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
|
||||
</Tooltip>
|
||||
|
||||
@ -33,12 +33,12 @@ import {
|
||||
LockClosedIcon,
|
||||
LockOpenIcon,
|
||||
PlusIcon,
|
||||
ShareIcon,
|
||||
StarIcon,
|
||||
LinkIcon
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { ColorPalletteIcon } from "components/icons";
|
||||
import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
|
||||
// helpers
|
||||
import { renderShortTime } from "helpers/date-time.helper";
|
||||
import { renderShortTime, renderShortDate } from "helpers/date-time.helper";
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
import { orderArrayBy } from "helpers/array.helper";
|
||||
// types
|
||||
@ -155,7 +155,13 @@ const SinglePage: NextPage = () => {
|
||||
is_favorite: true,
|
||||
}),
|
||||
false
|
||||
);
|
||||
).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success",
|
||||
message: "Added to favorites",
|
||||
});
|
||||
});;
|
||||
|
||||
pagesService.addPageToFavorites(workspaceSlug as string, projectId as string, {
|
||||
page: pageId as string,
|
||||
@ -172,13 +178,16 @@ const SinglePage: NextPage = () => {
|
||||
is_favorite: false,
|
||||
}),
|
||||
false
|
||||
);
|
||||
).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success",
|
||||
message: "Removed from favorites",
|
||||
});
|
||||
});;
|
||||
|
||||
pagesService.removePageFromFavorites(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
pageId as string
|
||||
);
|
||||
pagesService
|
||||
.removePageFromFavorites(workspaceSlug as string, projectId as string, pageId as string);
|
||||
};
|
||||
|
||||
const handleOnDragEnd = (result: DropResult) => {
|
||||
@ -345,10 +354,10 @@ const SinglePage: NextPage = () => {
|
||||
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"
|
||||
className="flex items-center gap-1 rounded-full bg-gray-100 px-2 pr-2.5 py-1 text-xs hover:bg-gray-200"
|
||||
>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
Add new label
|
||||
Add label
|
||||
</button>
|
||||
}
|
||||
value={pageDetails.labels}
|
||||
@ -359,19 +368,17 @@ const SinglePage: NextPage = () => {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-6">
|
||||
<Tooltip
|
||||
tooltipContent={`Page last updated at ${renderShortTime(pageDetails.updated_at)}`}
|
||||
theme="dark"
|
||||
tooltipContent={`Last updated at ${renderShortTime(
|
||||
pageDetails.updated_at
|
||||
)} on ${renderShortDate(pageDetails.updated_at)}`}
|
||||
>
|
||||
<span className="cursor-default text-sm text-gray-500">
|
||||
{renderShortTime(pageDetails.updated_at)}
|
||||
</span>
|
||||
<p className="text-sm text-gray-500">{renderShortTime(pageDetails.updated_at)}</p>
|
||||
</Tooltip>
|
||||
<PrimaryButton className="flex items-center gap-2" onClick={handleCopyText}>
|
||||
<ShareIcon className="h-4 w-4" />
|
||||
Share
|
||||
</PrimaryButton>
|
||||
<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 }) => (
|
||||
@ -415,7 +422,14 @@ const SinglePage: NextPage = () => {
|
||||
</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."
|
||||
}`}
|
||||
theme="dark"
|
||||
>
|
||||
{pageDetails.access ? (
|
||||
<button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
|
||||
<LockClosedIcon className="h-4 w-4" />
|
||||
@ -429,7 +443,7 @@ const SinglePage: NextPage = () => {
|
||||
<LockOpenIcon className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
</Tooltip>
|
||||
)}
|
||||
{pageDetails.is_favorite ? (
|
||||
<button onClick={handleRemoveFromFavorites} className="z-10">
|
||||
@ -442,20 +456,20 @@ const SinglePage: NextPage = () => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="px-4 pt-6">
|
||||
<TextArea
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Enter issue name"
|
||||
placeholder="Page Title"
|
||||
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-gray-200"
|
||||
className="min-h-10 block w-full resize-none overflow-hidden placeholder:text-[#858E96] rounded border-none bg-transparent px-3 py-2 text-3xl font-semibold outline-none ring-0 "
|
||||
role="textbox"
|
||||
/>
|
||||
</div>
|
||||
<div className="px-3">
|
||||
<div className="px-7">
|
||||
{pageBlocks ? (
|
||||
<>
|
||||
<DragDropContext onDragEnd={handleOnDragEnd}>
|
||||
@ -481,7 +495,7 @@ const SinglePage: NextPage = () => {
|
||||
{!createBlockForm && (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1 rounded bg-gray-100 px-2.5 py-1 ml-6 text-xs hover:bg-gray-200 mt-4"
|
||||
className="flex items-center gap-1 rounded-full bg-gray-100 px-2 py-1 pr-2.5 text-xs hover:bg-gray-200 mt-4"
|
||||
onClick={handleNewBlock}
|
||||
>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
@ -493,7 +507,7 @@ const SinglePage: NextPage = () => {
|
||||
<CreateUpdateBlockInline
|
||||
handleClose={() => setCreateBlockForm(false)}
|
||||
focus="name"
|
||||
setGptAssistantModal={()=>{}}
|
||||
setGptAssistantModal={() => {}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -177,24 +177,28 @@ const ProjectPages: NextPage = () => {
|
||||
<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"
|
||||
className="flex relative justify-between gap-2 mb-12 rounded-[6px] h-[80px] border border-gray-200 bg-white p-2 shadow-md"
|
||||
>
|
||||
<Input
|
||||
type="text"
|
||||
name="name"
|
||||
register={register}
|
||||
className="border-none outline-none focus:ring-0"
|
||||
placeholder="Type to create a new page..."
|
||||
className="border-none text-start font-semibold flex break-all text-2xl outline-none focus:ring-0"
|
||||
placeholder="Title"
|
||||
/>
|
||||
{watch("name") !== "" && (
|
||||
<PrimaryButton type="submit" loading={isSubmitting}>
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
loading={isSubmitting}
|
||||
className="h-8 absolute top-6 right-2"
|
||||
>
|
||||
{isSubmitting ? "Creating..." : "Create"}
|
||||
</PrimaryButton>
|
||||
)}
|
||||
</form>
|
||||
<div>
|
||||
<Tab.Group>
|
||||
<Tab.List as="div" className="flex items-center justify-between">
|
||||
<Tab.List as="div" className="flex items-center justify-between mb-6">
|
||||
<div className="flex gap-4">
|
||||
{["Recent", "All", "Favorites", "Created by me", "Created by others"].map(
|
||||
(tab, index) => (
|
||||
@ -213,7 +217,7 @@ const ProjectPages: NextPage = () => {
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-x-1">
|
||||
<div className="flex 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 ${
|
||||
|
||||
Loading…
Reference in New Issue
Block a user