fix: add max length validation for description field with user feedba…

…ck in NewLesson form
Selleo · Mar 7, 2025 · cb170a3 · cb170a3
1 parent 985f216
commit cb170a3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 0 deletions.
diff --git a/apps/web/app/locales/en/translation.json b/apps/web/app/locales/en/translation.json
@@ -494,6 +494,7 @@
           "atLeastOneOptionRequired": "At least one option is required",
           "imageRequired": "Image is required",
           "descriptionLength": "Description must have at least 10 characters.",
+          "descritpionMaxLength": "Content can have a maximum of 3000 characters.",
           "atLeastOneOptionCorrect": "At least one option must be marked as correct for question.",
           "allOptionsCorrect": "All options must be correct",
           "titleRequired": "Title is required",

diff --git a/apps/web/app/locales/pl/translation.json b/apps/web/app/locales/pl/translation.json
@@ -494,6 +494,7 @@
           "atLeastOneOptionRequired": "Wymagana jest przynajmniej jedna opcja",
           "imageRequired": "Obrazek jest wymagany",
           "descriptionLength": "Opis musi mieć co najmniej 10 znaków.",
+          "descritpionMaxLength": "Treść może mieć maksymalnie 3000 znaków.",
           "atLeastOneOptionCorrect": "Przynajmniej jedna opcja musi być oznaczona jako poprawna.",
           "allOptionsCorrect": "Wszystkie opcje muszą być poprawne",
           "titleRequired": "Tytuł jest wymagany",

diff --git a/...eb/app/modules/Admin/EditCourse/CourseLessons/NewLesson/TextLessonForm/TextLessonForm.tsx b/...eb/app/modules/Admin/EditCourse/CourseLessons/NewLesson/TextLessonForm/TextLessonForm.tsx
@@ -46,6 +46,14 @@ const TextLessonForm = ({
     setIsModalOpen(true);
   };
 
+  const maxDescriptionFieldLength = 3000;
+
+  const watchedContentLength = form.watch("description").length;
+  const descriptionFieldCharactersLeft = Math.max(
+    0,
+    maxDescriptionFieldLength - watchedContentLength,
+  );
+
   return (
     <div className="flex flex-col gap-y-6 rounded-lg bg-white p-8">
       <div className="flex flex-col gap-y-1">
@@ -102,6 +110,11 @@ const TextLessonForm = ({
               </FormItem>
             )}
           />
+
+          <p className="mt-1 text-neutral-800">
+            {descriptionFieldCharactersLeft} {t("adminCourseView.settings.other.charactersLeft")}
+          </p>
+
           {form.formState.errors.description && (
             <p className="details-md flex items-center gap-x-1.5 text-error-600">
               <Icon name="Warning" />

diff --git a/...n/EditCourse/CourseLessons/NewLesson/TextLessonForm/validators/useTextLessonFormSchema.ts b/...n/EditCourse/CourseLessons/NewLesson/TextLessonForm/validators/useTextLessonFormSchema.ts
@@ -10,6 +10,9 @@ export const textLessonFormSchema = (t: typeof i18next.t) =>
     description: z
       .string()
       .min(1, { message: t("adminCourseView.curriculum.lesson.validation.descriptionRequired") })
+      .max(3000, {
+        message: t("adminCourseView.curriculum.lesson.validation.descritpionMaxLength"),
+      })
       .trim()
       .refine((val) => val !== "<p></p>" && val.trim() !== "", {
         message: t("adminCourseView.curriculum.lesson.validation.descriptionRequired"),