From 7ac0289e535dfb2e4f0502d78ed6eb556870deac Mon Sep 17 00:00:00 2001
From: Heorhii Shvab <georgiy.shvab@gmail.com>
Date: Fri, 3 Jan 2025 11:54:14 +0200
Subject: [PATCH] Added error messages for admin dashboard forms

---
 .../create-country-form/CreateCountryForm.tsx            | 5 +++++
 .../country-form/edit-country-form/EditCountryForm.tsx   | 5 +++++
 core/src/containers/forms/country-form/styles.scss       | 9 ++++++++-
 .../create-indicator-form/CreateIndicatorForm.tsx        | 5 +++++
 .../edit-indicator-form/EditIndicatorForm.tsx            | 5 +++++
 core/src/containers/forms/indicator-form/styles.scss     | 9 ++++++++-
 .../value-form/create-value-form/CreateValueForm.tsx     | 5 +++++
 .../forms/value-form/edit-value-form/EditValueForm.tsx   | 5 +++++
 core/src/containers/forms/value-form/styles.scss         | 9 ++++++++-
 9 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/core/src/containers/forms/country-form/create-country-form/CreateCountryForm.tsx b/core/src/containers/forms/country-form/create-country-form/CreateCountryForm.tsx
index 22190ca..784b41c 100644
--- a/core/src/containers/forms/country-form/create-country-form/CreateCountryForm.tsx
+++ b/core/src/containers/forms/country-form/create-country-form/CreateCountryForm.tsx
@@ -49,6 +49,8 @@ const CreateCountryForm: FC<CreateCountryFormProps> = ({ onSuccess }) => {
     resolver: yupResolver(createCountryValidationSchema),
   })
 
+  const errorMsg = Object.values(errors)[0]?.message
+
   const handleTagsChange = (tags: string[]) => {
     setValue("searchTags", tags, { shouldDirty: true })
   }
@@ -118,6 +120,9 @@ const CreateCountryForm: FC<CreateCountryFormProps> = ({ onSuccess }) => {
           <TagInput tags={[]} onChange={handleTagsChange} />
         </Label>
       </DataList>
+      <p className="country-form__error-msg">
+        {errorMsg ? errorMsg : <>&nbsp;</>}
+      </p>
       <Button
         disabled={!isDirty || data.isLoading}
         isLoading={data.isLoading}
diff --git a/core/src/containers/forms/country-form/edit-country-form/EditCountryForm.tsx b/core/src/containers/forms/country-form/edit-country-form/EditCountryForm.tsx
index e7381c9..80276d5 100644
--- a/core/src/containers/forms/country-form/edit-country-form/EditCountryForm.tsx
+++ b/core/src/containers/forms/country-form/edit-country-form/EditCountryForm.tsx
@@ -43,6 +43,8 @@ const EditCountryForm: FC<EditCountryFormProps> = ({ country, onSuccess }) => {
     resolver: yupResolver(editCountryValidationSchema),
   })
 
+  const errorMsg = Object.values(errors)[0]?.message
+
   const handleTagsChange = (tags: string[]) => {
     setValue("searchTags", tags, { shouldDirty: true })
   }
@@ -110,6 +112,9 @@ const EditCountryForm: FC<EditCountryFormProps> = ({ country, onSuccess }) => {
           <TagInput tags={country.searchTags} onChange={handleTagsChange} />
         </Label>
       </DataList>
+      <p className="country-form__error-msg">
+        {errorMsg ? errorMsg : <>&nbsp;</>}
+      </p>
       <Button
         isLoading={data.isLoading}
         disabled={!isDirty || data.isLoading}
diff --git a/core/src/containers/forms/country-form/styles.scss b/core/src/containers/forms/country-form/styles.scss
index e015331..94bcc3e 100644
--- a/core/src/containers/forms/country-form/styles.scss
+++ b/core/src/containers/forms/country-form/styles.scss
@@ -1,5 +1,12 @@
 @import "@design-system";
 
 .country-form__data-list {
-  margin-bottom: sp(10);
+  margin-bottom: sp(5);
+}
+
+.country-form__error-msg {
+  font-size: $fs-sm;
+  color: $error;
+  margin-bottom: sp(5);
+  padding-left: sp(2);
 }
diff --git a/core/src/containers/forms/indicator-form/create-indicator-form/CreateIndicatorForm.tsx b/core/src/containers/forms/indicator-form/create-indicator-form/CreateIndicatorForm.tsx
index a792927..6661351 100644
--- a/core/src/containers/forms/indicator-form/create-indicator-form/CreateIndicatorForm.tsx
+++ b/core/src/containers/forms/indicator-form/create-indicator-form/CreateIndicatorForm.tsx
@@ -56,6 +56,8 @@ const CreateIndicatorForm: FC<CreateIndicatorFormProps> = ({ onSuccess }) => {
     await mutate(preparedData)
   }
 
+  const errorMsg = Object.values(errors)[0]?.message
+
   return (
     <form className="indicator-form" onSubmit={handleSubmit(onSubmit)}>
       <DataList className="indicator-form__data-list">
@@ -142,6 +144,9 @@ const CreateIndicatorForm: FC<CreateIndicatorFormProps> = ({ onSuccess }) => {
           <Switch {...register("absolute")}>Absolute</Switch>
         </div>
       </DataList>
+      <p className="indicator-form__error-msg">
+        {errorMsg ? errorMsg : <>&nbsp;</>}
+      </p>
       <Button
         isLoading={data.isLoading}
         disabled={!isDirty || data.isLoading}
diff --git a/core/src/containers/forms/indicator-form/edit-indicator-form/EditIndicatorForm.tsx b/core/src/containers/forms/indicator-form/edit-indicator-form/EditIndicatorForm.tsx
index 8baebf3..dc7eb54 100644
--- a/core/src/containers/forms/indicator-form/edit-indicator-form/EditIndicatorForm.tsx
+++ b/core/src/containers/forms/indicator-form/edit-indicator-form/EditIndicatorForm.tsx
@@ -41,6 +41,8 @@ const EditIndicatorForm: FC<EditIndicatorFormProps> = ({
     resolver: yupResolver(validationSchema),
   })
 
+  const errorMsg = Object.values(errors)[0]?.message
+
   const handleTagsChange = (tags: string[]) => {
     setValue("searchTags", tags, { shouldDirty: true })
   }
@@ -135,6 +137,9 @@ const EditIndicatorForm: FC<EditIndicatorFormProps> = ({
           <Switch {...register("absolute")}>Absolute</Switch>
         </div>
       </DataList>
+      <p className="indicator-form__error-msg">
+        {errorMsg ? errorMsg : <>&nbsp;</>}
+      </p>
       <Button
         isLoading={data.isLoading}
         disabled={!isDirty || data.isLoading}
diff --git a/core/src/containers/forms/indicator-form/styles.scss b/core/src/containers/forms/indicator-form/styles.scss
index e957651..1e00492 100644
--- a/core/src/containers/forms/indicator-form/styles.scss
+++ b/core/src/containers/forms/indicator-form/styles.scss
@@ -7,5 +7,12 @@
 }
 
 .indicator-form__data-list {
-  margin-bottom: sp(6);
+  margin-bottom: sp(1);
+}
+
+.indicator-form__error-msg {
+  font-size: $fs-sm;
+  color: $error;
+  margin-bottom: sp(5);
+  padding-left: sp(2);
 }
diff --git a/core/src/containers/forms/value-form/create-value-form/CreateValueForm.tsx b/core/src/containers/forms/value-form/create-value-form/CreateValueForm.tsx
index f7982d0..a0e25d9 100644
--- a/core/src/containers/forms/value-form/create-value-form/CreateValueForm.tsx
+++ b/core/src/containers/forms/value-form/create-value-form/CreateValueForm.tsx
@@ -36,6 +36,8 @@ const CreateValueForm: FC<CreateValueFormProps> = ({ onSuccess }) => {
     await mutate(data)
   }
 
+  const errorMsg = Object.values(errors)[0]?.message
+
   return (
     <form className="value-form" onSubmit={handleSubmit(onSubmit)}>
       <DataList className="value-form__data-list">
@@ -72,6 +74,9 @@ const CreateValueForm: FC<CreateValueFormProps> = ({ onSuccess }) => {
           </Label>
         </InputGroup>
       </DataList>
+      <p className="value-form__error-msg">
+        {errorMsg ? errorMsg : <>&nbsp;</>}
+      </p>
       <Button
         isLoading={data.isLoading}
         disabled={!isDirty || data.isLoading}
diff --git a/core/src/containers/forms/value-form/edit-value-form/EditValueForm.tsx b/core/src/containers/forms/value-form/edit-value-form/EditValueForm.tsx
index e9c4b9b..5413b0a 100644
--- a/core/src/containers/forms/value-form/edit-value-form/EditValueForm.tsx
+++ b/core/src/containers/forms/value-form/edit-value-form/EditValueForm.tsx
@@ -40,6 +40,8 @@ const EditValueForm: FC<EditValueFormProps> = ({ value, onSuccess }) => {
     await mutate({ ...filteredValues, id: value.id })
   }
 
+  const errorMsg = Object.values(errors)[0]?.message
+
   return (
     <form className="value-form" onSubmit={handleSubmit(onSubmit)}>
       <DataList className="value-form__data-list">
@@ -76,6 +78,9 @@ const EditValueForm: FC<EditValueFormProps> = ({ value, onSuccess }) => {
           </Label>
         </InputGroup>
       </DataList>
+      <p className="value-form__error-msg">
+        {errorMsg ? errorMsg : <>&nbsp;</>}
+      </p>
       <Button
         isLoading={data.isLoading}
         disabled={!isDirty || data.isLoading}
diff --git a/core/src/containers/forms/value-form/styles.scss b/core/src/containers/forms/value-form/styles.scss
index eafc0bb..5e4a269 100644
--- a/core/src/containers/forms/value-form/styles.scss
+++ b/core/src/containers/forms/value-form/styles.scss
@@ -1,5 +1,12 @@
 @import "@design-system";
 
 .value-form__data-list {
-  margin-bottom: sp(10);
+  margin-bottom: sp(5);
+}
+
+.value-form__error-msg {
+  font-size: $fs-sm;
+  color: $error;
+  margin-bottom: sp(5);
+  padding-left: sp(2);
 }