binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: minor bugs and ux improvements (#322)

Browse source 
* fix: ellipsis added to issue title

* feat: toolttip added

* feat: assignees tooltip added

* fix: build fix

* fix: build fix

* fix: build error

* fix: minor bugs and ux improvements

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
This commit is contained in:
Aaryan Khandelwal 2023-02-23 10:54:54 +05:30 • committed by GitHub
parent 702cfeb4ee
commit 92f717962c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 317 additions and 272 deletions
Download patch file Download diff file Expand all files Collapse all files

69
apps/app/components/issues/description-form.tsx
View file

@ -1,4 +1,4 @@
import { FC, useCallback, useEffect, useMemo } from "react";
import { FC, useCallback, useEffect, useMemo, useState } from "react";
import dynamic from "next/dynamic";
@ -18,7 +18,6 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
});
// types
import { IIssue, UserAuth } from "types";
import useToast from "hooks/use-toast";
export interface IssueDescriptionFormValues {
name: string;
@ -37,7 +36,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
handleFormSubmit,
userAuth,
}) => {
const { setToastAlert } = useToast();
const [characterLimit, setCharacterLimit] = useState(false);
const {
handleSubmit,
@ -55,23 +54,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
const handleDescriptionFormSubmit = useCallback(
(formData: Partial<IIssue>) => {
if (!formData.name || formData.name === "") {
setToastAlert({
type: "error",
title: "Error in saving!",
message: "Title is required.",
});
return;
}
if (formData.name.length > 255) {
setToastAlert({
type: "error",
title: "Error in saving!",
message: "Title cannot have more than 255 characters.",
});
return;
}
if (!formData.name || formData.name.length === 0 || formData.name.length > 255) return;
handleFormSubmit({
name: formData.name ?? "",
@ -79,7 +62,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
description_html: formData.description_html ?? "<p></p>",
});
},
[handleFormSubmit, setToastAlert]
[handleFormSubmit]
);
const debounceHandler = useMemo(
@ -105,21 +88,37 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
return (
<div>
<TextArea
id="name"
placeholder="Enter issue name"
name="name"
value={watch("name")}
onChange={(e) => {
setValue("name", e.target.value);
debounceHandler();
}}
required={true}
className="block px-3 py-2 text-xl
<div className="relative">
<TextArea
id="name"
name="name"
placeholder="Enter issue name"
value={watch("name")}
onFocus={() => setCharacterLimit(true)}
onBlur={() => setCharacterLimit(false)}
onChange={(e) => {
setValue("name", e.target.value);
debounceHandler();
}}
required={true}
className="block px-3 py-2 text-xl
w-full overflow-hidden resize-none min-h-10
rounded border-none bg-transparent ring-0 focus:ring-1 focus:ring-theme outline-none "
role="textbox "
/>
rounded border-none bg-transparent ring-0 focus:ring-1 focus:ring-theme outline-none"
role="textbox"
/>
{characterLimit && (
<div className="absolute bottom-0 right-0 text-xs bg-white p-1 rounded pointer-events-none z-[2]">
<span
className={`${
watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
}`}
>
{watch("name").length}
</span>
/255
</div>
)}
</div>
<span>{errors.name ? errors.name.message : null}</span>
<RemirrorRichTextEditor
value={watch("description")}