[EN-6289] feat(cv): preview and max lines

src/components/backoffice/cv/CVFicheEdition/CVFicheEdition.tsx

@@ -64,7 +64,6 @@ export const CVFicheEdition = ({
       updateImage();
     }
   }, [prevPreviewGenerating, previewGenerating, updateImage]);
-
   return (
     <Grid childWidths={['1-1']}>
       <Grid childWidths={['1-1']} match>

src/components/backoffice/cv/CVPageContent/CVModalPreview/CVModalPreview.tsx

@@ -15,7 +15,9 @@ export const CVModalPreview = ({ imageUrl, cv }: ModalPreviewProps) => {
   const [cvPreview, setCVPreview] = useState<CV>(cv);
 
   useEffect(() => {
-    setCVPreview({ ...cv, urlImg: imageUrl });
+    const previewHash = Date.now();
+    const baseUrl = `${process.env.AWSS3_IMAGE_DIRECTORY}${cv.UserId}.${cv.status}`;
+    setCVPreview({ ...cv, urlImg: `${baseUrl}.jpg?${previewHash}` });
   }, [imageUrl, cv]);
 
   return (

src/components/cv/CVPDF/index.ts

@@ -0,0 +1 @@
+export { CVPDF } from './CVPDF';

src/components/forms/fields/GenericField.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   Control,
   useController,
@@ -64,7 +64,16 @@ export function GenericField<S extends FormSchema<AnyCantFix>>({
 }: GenericFieldProps<S>) {
   const { id: formId } = formSchema;
 
-  const rules = mapFieldRules<S, typeof field.component>(field.rules);
+  let rules = mapFieldRules<S, typeof field.component>(field.rules);
+  const [isMaxLinesReached, setIsMaxLinesReached] = useState<boolean>();
+
+  if (field.maxLines) {
+    rules = {
+      ...rules,
+      maxLines: () =>
+        !isMaxLinesReached || 'Vous avez dépassé le nombre de lignes maximum',
+    };
+  }
 
   const {
     field: { onChange, onBlur, value, name, ref },
@@ -156,6 +165,7 @@ export function GenericField<S extends FormSchema<AnyCantFix>>({
         {...commonProps}
         maxLines={field.maxLines}
         maxLength={field.maxLength}
+        setIsMaxLinesReached={setIsMaxLinesReached}
       />
     );
   }

src/components/utils/Inputs/TextArea/TextArea.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, useEffect } from 'react';
 import {
   StyledAnnotations,
   StyledAnnotationsErrorMessage,
@@ -19,6 +19,7 @@ interface TextAreaProps extends CommonInputProps<string, HTMLTextAreaElement> {
   maxLines?: { lines: number; width: number };
   maxLength?: number;
   rows?: number;
+  setIsMaxLinesReached?: (isMaxLinesReached: boolean) => void;
 }
 
 export function TextArea({
@@ -37,6 +38,7 @@ export function TextArea({
   showLabel,
   inputRef,
   rows,
+  setIsMaxLinesReached,
 }: TextAreaProps) {
   const isMobile = useIsMobile();
 
@@ -47,6 +49,15 @@ export function TextArea({
     maxLines?.lines
   );
 
+  useEffect(() => {
+    if (!maxLines) return null;
+    if (remainingLines <= 0) {
+      setIsMaxLinesReached(true);
+    } else {
+      setIsMaxLinesReached(false);
+    }
+  });
+
   if (hidden) {
     return null;
   }

src/components/utils/Inputs/TextArea/useLineLimit.ts

@@ -71,6 +71,7 @@ export function useLineLimit(
       const nbOfLines = Math.ceil(
         (taHeight - taPaddingBottom - taPaddingTop) / taLineHeight
       );
+      setNumberOfLines(!value ? 0 : nbOfLines);
 
       if (nbOfLines > maxLines) {
         if (!prevValue || value.length - prevValue.length > 1) {
@@ -79,11 +80,12 @@ export function useLineLimit(
             'danger'
           );
         }
-
-        onChange(prevValue);
-      } else {
-        setNumberOfLines(!value ? 0 : nbOfLines);
+        // onChange(prevValue);
       }
+      // else {
+      //   // console.log(value);
+      //   setNumberOfLines(!value ? 0 : nbOfLines);
+      // }
     }
   }, [calculateContentHeight, maxLines, name, onChange, prevValue, ref, value]);