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
9 changed files with 286 additions and 135 deletions
|
|
@ -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,49 +222,82 @@ 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
|
||||
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"
|
||||
role="textbox"
|
||||
autoComplete="off"
|
||||
maxLength={255}
|
||||
/>
|
||||
<div className="page-block-section font relative -mx-3 -mt-3">
|
||||
<Controller
|
||||
name="description"
|
||||
control={control}
|
||||
render={({ field: { value } }) => (
|
||||
<RemirrorRichTextEditor
|
||||
value={
|
||||
!value || (typeof value === "object" && Object.keys(value).length === 0)
|
||||
? watch("description_html")
|
||||
: value
|
||||
}
|
||||
onJSONChange={(jsonValue) => setValue("description", jsonValue)}
|
||||
onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
|
||||
placeholder="Description"
|
||||
aria-hidden
|
||||
customClassName="text-sm"
|
||||
noBorder
|
||||
borderOnFocus={false}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end items-center gap-2">
|
||||
{ data &&
|
||||
<>
|
||||
{console.log(handelAutoGenerateDescription, setGptAssistantModal, iAmFeelingLucky)}
|
||||
<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-xl font-semibold ring-0 focus:ring-gray-200"
|
||||
role="textbox"
|
||||
autoComplete="off"
|
||||
maxLength={255}
|
||||
/>
|
||||
<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}
|
||||
render={({ field: { value } }) => (
|
||||
<RemirrorRichTextEditor
|
||||
value={
|
||||
!value || (typeof value === "object" && Object.keys(value).length === 0)
|
||||
? watch("description_html")
|
||||
: value
|
||||
}
|
||||
onJSONChange={(jsonValue) => setValue("description", jsonValue)}
|
||||
onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
|
||||
placeholder="Write something..."
|
||||
customClassName="text-sm"
|
||||
noBorder
|
||||
borderOnFocus={false}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<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" : ""
|
||||
}`}
|
||||
onClick={handelAutoGenerateDescription}
|
||||
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={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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue