Merge pull request #3473 from LiteFarmOrg/LF-4414-The-user-is-able-to…

…-create-an-animal-with-the-incomplete-date-of-birth-or-date-brought-in Lf 4414 the user is able to create an animal with the incomplete date of birth or date brought in
LiteFarmOrg · Sep 26, 2024 · 32aa90e · 32aa90e
2 parents 974f7ac + 6b61f2f
commit 32aa90e
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 4 deletions.
diff --git a/packages/webapp/public/locales/de/common.json b/packages/webapp/public/locales/de/common.json
@@ -28,6 +28,7 @@
   "GO_BACK": "Zurück",
   "GOT_IT": "Verstanden!",
   "HERE": "hier",
+  "INVALID_DATE": "MISSING",
   "LOADING": "Laden...",
   "MARK_ABANDON": "Verwerfen",
   "MARK_COMPLETE": "Als abgeschlossen markieren",

diff --git a/packages/webapp/public/locales/en/common.json b/packages/webapp/public/locales/en/common.json
@@ -37,6 +37,7 @@
   "GO_BACK": "Go back",
   "GOT_IT": "Got it!",
   "HERE": "here",
+  "INVALID_DATE": "Invalid date",
   "LOADING": "Loading...",
   "MARK_ABANDON": "Abandon",
   "MARK_COMPLETE": "Mark Complete",

diff --git a/packages/webapp/public/locales/es/common.json b/packages/webapp/public/locales/es/common.json
@@ -37,6 +37,7 @@
   "GO_BACK": "Volver",
   "GOT_IT": "Entendido",
   "HERE": "aquí",
+  "INVALID_DATE": "MISSING",
   "LOADING": "Cargando...",
   "MARK_ABANDON": "Abandonar",
   "MARK_COMPLETE": "Completar",

diff --git a/packages/webapp/public/locales/fr/common.json b/packages/webapp/public/locales/fr/common.json
@@ -37,6 +37,7 @@
   "GO_BACK": "Retourner",
   "GOT_IT": "J'ai compris !",
   "HERE": "Ici",
+  "INVALID_DATE": "MISSING",
   "LOADING": "Chargement en cours...",
   "MARK_ABANDON": "Marquer Abandonné",
   "MARK_COMPLETE": "Marquer Complet",

diff --git a/packages/webapp/public/locales/hi/common.json b/packages/webapp/public/locales/hi/common.json
@@ -28,6 +28,7 @@
   "GO_BACK": "वापस जाओ",
   "GOT_IT": "समझ गया!",
   "HERE": "यहां",
+  "INVALID_DATE": "MISSING",
   "LOADING": "लोड हो रहा है...",
   "MARK_ABANDON": "छोड़ दें",
   "MARK_COMPLETE": "पूर्ण चिह्नित करें",

diff --git a/packages/webapp/public/locales/ml/common.json b/packages/webapp/public/locales/ml/common.json
@@ -28,6 +28,7 @@
   "GO_BACK": "മടങ്ങിപ്പോവുക",
   "GOT_IT": "മനസ്സിലായി!",
   "HERE": "ഇവിടെ",
+  "INVALID_DATE": "MISSING",
   "LOADING": "ലോഡ് ചെയ്യുന്നു...",
   "MARK_ABANDON": "ഉപേക്ഷിക്കുക",
   "MARK_COMPLETE": "പൂർത്തിയായതായി അടയാളപ്പെടുത്തുക",

diff --git a/packages/webapp/public/locales/pa/common.json b/packages/webapp/public/locales/pa/common.json
@@ -28,6 +28,7 @@
   "GO_BACK": "ਵਾਪਸ ਜਾਓ",
   "GOT_IT": "ਸਮਝ ਗਿਆ!",
   "HERE": "ਇਥੇ",
+  "INVALID_DATE": "MISSING",
   "LOADING": "ਲੋਡ ਹੋ ਰਿਹਾ ਹੈ...",
   "MARK_ABANDON": "ਛੱਡ ਦਿਓ",
   "MARK_COMPLETE": "ਮੁਕੰਮਲ ਦੀ ਨਿਸ਼ਾਨਦੇਹੀ ਕਰੋ",

diff --git a/packages/webapp/public/locales/pt/common.json b/packages/webapp/public/locales/pt/common.json
@@ -37,6 +37,7 @@
   "GO_BACK": "Voltar",
   "GOT_IT": "Feito!",
   "HERE": "aqui",
+  "INVALID_DATE": "MISSING",
   "LOADING": "Carregando...",
   "MARK_ABANDON": "Abandonar",
   "MARK_COMPLETE": "Marcar completo",

diff --git a/packages/webapp/src/components/Animals/DetailCards/Origin.tsx b/packages/webapp/src/components/Animals/DetailCards/Origin.tsx
@@ -13,10 +13,11 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import Input, { getInputErrors } from '../../Form/Input';
 import RadioGroup from '../../Form/RadioGroup';
+import { isNotInFuture } from '../../Form/Input/utils';
 import {
   DetailsFields,
   type Option,
@@ -36,8 +37,11 @@ const Origin = ({ t, currency, originOptions, namePrefix = '' }: OriginProps) =>
     register,
     trigger,
     watch,
+    clearErrors,
     formState: { errors },
   } = useFormContext();
+  const [isBirthDateValid, setIsBirthDateValid] = useState(true);
+  const [isBroughtInDateValid, setIsBroughtInDateValid] = useState(true);
 
   const watchedOrigin = watch(`${namePrefix}${DetailsFields.ORIGIN}`);
 
@@ -56,7 +60,22 @@ const Origin = ({ t, currency, originOptions, namePrefix = '' }: OriginProps) =>
           key={DetailsFields.BROUGHT_IN_DATE}
           type="date"
           label={t('common:DATE')}
-          hookFormRegister={register(`${namePrefix}${DetailsFields.BROUGHT_IN_DATE}`)}
+          hookFormRegister={register(`${namePrefix}${DetailsFields.BROUGHT_IN_DATE}`, {
+            validate: (value) => {
+              if (value === '' && isBroughtInDateValid) return true;
+              return !isNaN(new Date(value).valueOf())
+                ? isNotInFuture(value)
+                : t('common:INVALID_DATE');
+            },
+          })}
+          onCleared={() => {
+            setIsBroughtInDateValid(true);
+            clearErrors(`${namePrefix}${DetailsFields.BROUGHT_IN_DATE}`);
+          }}
+          onKeyUp={(e: any) => {
+            setIsBroughtInDateValid(!e.target.validity.badInput);
+          }}
+          errors={getInputErrors(errors, `${namePrefix}${DetailsFields.BROUGHT_IN_DATE}`)}
           optional
         />
         {/* @ts-ignore */}
@@ -116,14 +135,28 @@ const Origin = ({ t, currency, originOptions, namePrefix = '' }: OriginProps) =>
       </>
     );
   }, [origin, Object.entries(errors)]);
-
   return (
     <div className={styles.sectionWrapper}>
       {/* @ts-ignore */}
       <Input
         type="date"
         label={t('ANIMAL.ATTRIBUTE.DATE_OF_BIRTH')}
-        hookFormRegister={register(`${namePrefix}${DetailsFields.DATE_OF_BIRTH}`)}
+        hookFormRegister={register(`${namePrefix}${DetailsFields.DATE_OF_BIRTH}`, {
+          validate: (value) => {
+            if (value === '' && isBirthDateValid) return true;
+            return !isNaN(new Date(value).valueOf())
+              ? isNotInFuture(value)
+              : t('common:INVALID_DATE');
+          },
+        })}
+        onCleared={() => {
+          setIsBirthDateValid(true);
+          clearErrors(`${namePrefix}${DetailsFields.DATE_OF_BIRTH}`);
+        }}
+        onKeyUp={(e: React.ChangeEvent<HTMLInputElement>): void => {
+          setIsBirthDateValid(!e.target.validity.badInput);
+        }}
+        errors={getInputErrors(errors, `${namePrefix}${DetailsFields.DATE_OF_BIRTH}`)}
         optional
       />
       <div>

diff --git a/packages/webapp/src/components/Form/Input/index.jsx b/packages/webapp/src/components/Form/Input/index.jsx
@@ -49,6 +49,7 @@ const Input = ({
   stepper = false,
   className = '',
   trigger,
+  onCleared,
   ...props
 }) => {
   const { t } = useTranslation(['translation', 'common']);
@@ -75,6 +76,7 @@ const Input = ({
     // Manually trigger validation against the new value ''
     trigger?.(name);
     setShowError(false);
+    onCleared?.();
   };
 
   const onKeyDown = ['number', 'decimal'].includes(type) ? numberOnKeyDown : undefined;
@@ -281,6 +283,7 @@ Input.propTypes = {
   placeholder: PropTypes.string,
   className: PropTypes.string,
   trigger: PropTypes.func,
+  onCleared: PropTypes.func,
 };
 
 export default Input;