mirror of
https://github.com/makeplane/plane.git
synced 2026-07-13 22:09:12 +02:00
dev: common title and description input component added (#2064)
This commit is contained in:
Anmol Singh Bhatia
committed by
GitHub
GitHub
parent
dbdd6b8f06
commit
4c4ebd0988
176
web/ee/components/common/input/description-input.tsx
Normal file
176
web/ee/components/common/input/description-input.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
"use client";
|
||||
|
||||
import { FC, useCallback, useEffect, useState } from "react";
|
||||
import debounce from "lodash/debounce";
|
||||
import { observer } from "mobx-react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// types
|
||||
import { TNameDescriptionLoader } from "@plane/types";
|
||||
import { EFileAssetType } from "@plane/types/src/enums";
|
||||
// ui
|
||||
import { Loader } from "@plane/ui";
|
||||
// components
|
||||
import { RichTextEditor, RichTextReadOnlyEditor } from "@/components/editor";
|
||||
// helpers
|
||||
import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
|
||||
// hooks
|
||||
import { useWorkspace } from "@/hooks/store";
|
||||
// plane web services
|
||||
import { WorkspaceService } from "@/plane-web/services";
|
||||
// services
|
||||
import { FileService } from "@/services/file.service";
|
||||
|
||||
const workspaceService = new WorkspaceService();
|
||||
const fileService = new FileService();
|
||||
|
||||
interface IFormData {
|
||||
id: string;
|
||||
description_html: string;
|
||||
}
|
||||
|
||||
export type DescriptionInputProps = {
|
||||
workspaceSlug: string;
|
||||
projectId?: string;
|
||||
itemId: string;
|
||||
initialValue: string | undefined;
|
||||
onSubmit: (value: string) => Promise<void>;
|
||||
fileAssetType: EFileAssetType;
|
||||
placeholder?: string | ((isFocused: boolean, value: string) => string);
|
||||
setIsSubmitting: (initialValue: TNameDescriptionLoader) => void;
|
||||
swrDescription?: string | null | undefined;
|
||||
containerClassName?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export const DescriptionInput: FC<DescriptionInputProps> = observer((props) => {
|
||||
const {
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
itemId,
|
||||
initialValue,
|
||||
onSubmit,
|
||||
fileAssetType,
|
||||
placeholder,
|
||||
setIsSubmitting,
|
||||
swrDescription,
|
||||
containerClassName,
|
||||
disabled,
|
||||
} = props;
|
||||
// store hooks
|
||||
const { getWorkspaceBySlug } = useWorkspace();
|
||||
|
||||
// states
|
||||
const [localDescription, setLocalDescription] = useState({
|
||||
id: itemId,
|
||||
description_html: initialValue,
|
||||
});
|
||||
|
||||
// form
|
||||
const { handleSubmit, reset, control } = useForm<IFormData>({
|
||||
defaultValues: {
|
||||
id: itemId,
|
||||
description_html: initialValue || "",
|
||||
},
|
||||
});
|
||||
|
||||
// handlers
|
||||
const handleDescriptionFormSubmit = useCallback(
|
||||
async (formData: IFormData) => {
|
||||
await onSubmit(formData.description_html ?? "<p></p>");
|
||||
},
|
||||
[onSubmit]
|
||||
);
|
||||
|
||||
// computed values
|
||||
const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id as string;
|
||||
|
||||
// reset form values
|
||||
useEffect(() => {
|
||||
if (!itemId) return;
|
||||
reset({
|
||||
id: itemId,
|
||||
description_html: initialValue === "" ? "<p></p>" : initialValue,
|
||||
});
|
||||
setLocalDescription({
|
||||
id: itemId,
|
||||
description_html: initialValue === "" ? "<p></p>" : initialValue,
|
||||
});
|
||||
}, [initialValue, itemId, reset]);
|
||||
|
||||
// ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS
|
||||
// TODO: Verify the exhaustive-deps warning
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
const debouncedFormSave = useCallback(
|
||||
debounce(async () => {
|
||||
handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
|
||||
}, 1500),
|
||||
[handleSubmit, itemId]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{localDescription.description_html ? (
|
||||
<Controller
|
||||
name="description_html"
|
||||
control={control}
|
||||
render={({ field: { onChange } }) =>
|
||||
!disabled ? (
|
||||
<RichTextEditor
|
||||
id={itemId}
|
||||
initialValue={localDescription.description_html ?? "<p></p>"}
|
||||
value={swrDescription ?? null}
|
||||
workspaceSlug={workspaceSlug}
|
||||
workspaceId={workspaceId}
|
||||
projectId={projectId}
|
||||
dragDropEnabled
|
||||
onChange={(_description: object, description_html: string) => {
|
||||
setIsSubmitting("submitting");
|
||||
onChange(description_html);
|
||||
debouncedFormSave();
|
||||
}}
|
||||
placeholder={
|
||||
placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value)
|
||||
}
|
||||
searchMentionCallback={async (payload) =>
|
||||
await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
|
||||
...payload,
|
||||
project_id: projectId?.toString() ?? "",
|
||||
})
|
||||
}
|
||||
containerClassName={containerClassName}
|
||||
uploadFile={async (file) => {
|
||||
const params = {
|
||||
entity_identifier: itemId,
|
||||
entity_type: fileAssetType,
|
||||
};
|
||||
try {
|
||||
const uploadAsset = projectId
|
||||
? fileService.uploadProjectAsset(workspaceSlug, projectId, params, file)
|
||||
: fileService.uploadWorkspaceAsset(workspaceSlug, params, file);
|
||||
const { asset_id } = await uploadAsset;
|
||||
return asset_id;
|
||||
} catch (error) {
|
||||
console.log("Error in uploading asset:", error);
|
||||
throw new Error("Asset upload failed. Please try again later.");
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<RichTextReadOnlyEditor
|
||||
id={itemId}
|
||||
initialValue={localDescription.description_html ?? ""}
|
||||
containerClassName={containerClassName}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Loader>
|
||||
<Loader.Item height="150px" />
|
||||
</Loader>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
2
web/ee/components/common/input/index.ts
Normal file
2
web/ee/components/common/input/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from "./description-input";
|
||||
export * from "./title-input";
|
||||
124
web/ee/components/common/input/title-input.tsx
Normal file
124
web/ee/components/common/input/title-input.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
"use client";
|
||||
|
||||
import { FC, useState, useEffect, useCallback } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
// components
|
||||
import { TextArea } from "@plane/ui";
|
||||
// helpers
|
||||
import { cn } from "@/helpers/common.helper";
|
||||
// hooks
|
||||
import useDebounce from "@/hooks/use-debounce";
|
||||
|
||||
export type TitleInputProps = {
|
||||
value: string | undefined | null;
|
||||
isSubmitting: "submitting" | "submitted" | "saved";
|
||||
setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
|
||||
onSubmit: (value: string) => Promise<void>;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export const TitleInput: FC<TitleInputProps> = observer((props) => {
|
||||
const { value, isSubmitting, setIsSubmitting, onSubmit, className, containerClassName, disabled } = props;
|
||||
// states
|
||||
const [title, setTitle] = useState("");
|
||||
const [isLengthVisible, setIsLengthVisible] = useState(false);
|
||||
// hooks
|
||||
const debouncedValue = useDebounce(title, 1500);
|
||||
|
||||
useEffect(() => {
|
||||
if (value) setTitle(value);
|
||||
}, [value]);
|
||||
|
||||
useEffect(() => {
|
||||
const textarea = document.querySelector("#title-input");
|
||||
if (debouncedValue && debouncedValue !== value) {
|
||||
if (debouncedValue.trim().length > 0) {
|
||||
onSubmit(debouncedValue).finally(() => {
|
||||
setIsSubmitting("saved");
|
||||
if (textarea && !textarea.matches(":focus")) {
|
||||
const trimmedTitle = debouncedValue.trim();
|
||||
if (trimmedTitle !== title) setTitle(trimmedTitle);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
setTitle(value || "");
|
||||
setIsSubmitting("saved");
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [debouncedValue]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleBlur = () => {
|
||||
const trimmedTitle = title.trim();
|
||||
if (trimmedTitle !== title && isSubmitting !== "submitting") {
|
||||
if (trimmedTitle.length > 0) {
|
||||
setTitle(trimmedTitle);
|
||||
setIsSubmitting("submitting");
|
||||
} else {
|
||||
setTitle(value || "");
|
||||
setIsSubmitting("saved");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const textarea = document.querySelector("#title-input");
|
||||
if (textarea) {
|
||||
textarea.addEventListener("blur", handleBlur);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (textarea) {
|
||||
textarea.removeEventListener("blur", handleBlur);
|
||||
}
|
||||
};
|
||||
}, [title, isSubmitting, setIsSubmitting, value]);
|
||||
|
||||
const handleTitleChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setIsSubmitting("submitting");
|
||||
setTitle(e.target.value);
|
||||
},
|
||||
[setIsSubmitting]
|
||||
);
|
||||
|
||||
if (disabled) return <div className="text-2xl font-medium whitespace-pre-line">{title}</div>;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className={cn("relative", containerClassName)}>
|
||||
<TextArea
|
||||
id="title-input"
|
||||
className={cn(
|
||||
"block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-0 text-2xl font-medium outline-none ring-0",
|
||||
{
|
||||
"ring-1 ring-red-400 mx-2.5": title?.length === 0,
|
||||
},
|
||||
className
|
||||
)}
|
||||
disabled={disabled}
|
||||
value={title}
|
||||
onChange={handleTitleChange}
|
||||
maxLength={255}
|
||||
placeholder="Title"
|
||||
onFocus={() => setIsLengthVisible(true)}
|
||||
onBlur={() => setIsLengthVisible(false)}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
|
||||
{
|
||||
"opacity-100": isLengthVisible,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
|
||||
/255
|
||||
</div>
|
||||
</div>
|
||||
{title?.length === 0 && <span className="text-sm font-medium text-red-500">Title is required</span>}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user