Merge pull request #235 from Payel-Manna/feature/admission-validation-modal

Feature: Add step validation modal for admission form

Author: abhishek-nexgen-dev

src/components/Templates/admission/DropDown.jsx

@@ -9,7 +9,7 @@ import {
 const Dropdown = ({
    placeholder,
    options,
-   handleSelect,
+   onChange,
    name,
    isRequired = false,
    errorMessage = 'This field is required.',
@@ -50,15 +50,16 @@ const Dropdown = ({
    // Sync selectedOption with Redux
    useEffect(() => {
       if (selectedOption !== placeholder) {
-         if (find_index !== -1) {
+         const idx = admission.findIndex(item => item.name === name);
+         if (idx !== -1) {
             dispatch(
                setOneAdmission({ name, value: selectedOption }),
             );
          } else {
             dispatch(setAdmission({ name, value: selectedOption }));
          }
       }
-   }, [selectedOption]);
+   }, [selectedOption,admission]);
 
    const validateDropdown = () => {
       if (
@@ -72,6 +73,7 @@ const Dropdown = ({
    };
    const handleOptionClick = option => {
       setSelectedOption(option);
+      onChange && onChange({ target: { name, value: option } });
       setIsOpen(false);
       setIsError(false);
    };

src/components/Templates/admission/StepValidateModal.jsx

@@ -1,6 +1,12 @@
 import React from 'react';
 
-const StepValidateModal = ({ isOpen, onClose, title, message }) => {
+const StepValidateModal = ({
+   isOpen,
+   onClose,
+   title,
+   message,
+   missingFields,
+}) => {
    if (!isOpen) return null;
 
    return (
@@ -11,7 +17,14 @@ const StepValidateModal = ({ isOpen, onClose, title, message }) => {
                {title}
             </h2>
             <p className='mt-4 text-gray-600'>{message}</p>
-            <button
+            {missingFields?.length > 0 && (
+               <ul className='mt-3 list-disc pl-6 text-red-500'>
+                  {missingFields.map(field => (
+                     <li key={field}>{field}</li>
+                  ))}
+               </ul>
+            )}
+            <button type="button"
                onClick={onClose}
                className='mt-6 w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700 transition'
             >

src/components/Templates/admission/Steps.jsx

@@ -12,24 +12,42 @@ import axios from 'axios';
 import admissionConstant from './admission.constant.mjs';
 
 const Steps = () => {
-   const [isModalOpen, setIsModalOpen] = useState(false);
+   
    const [activeStep, setActiveStep] = useState(0);
    const [isLoading, setIsLoading] = useState(false);
    const [image, setImage] = useState(null);
    const [imageUploadSuccess, setImageUploadSuccess] =
       useState(false);
-   const [formData, setFormData] = useState({});
+  
    const [Avtor, setAvtor] = useState(null);
-
-
-      useEffect(() => {
+   const [missingFields, setMissingFields] = useState([]);
+   const [showErrors, setShowErrors] = useState(false);
+   
+    const [formData, setFormData] = useState({
+      firstName: '',
+      middleName: '',
+      lastName: '',
+      fatherName: '',
+      motherName: '',
+      AadharCardNumber: '',
+      email: '',
+      contactNumber: '',
+      dateOfBirth: '',
+      gender: '',
+      nationality: '',
+      street: '',
+      city: '',
+      state: '',
+      pinCode: '',
+   });
+   useEffect(() => {
       const savedData = sessionStorage.getItem('admissionFormData');
       if (savedData) {
-          setFormData(JSON.parse(savedData));
+         setFormData(JSON.parse(savedData));
       }
-      }, []);
-      
+   }, []);
 
+     
    let admission = useSelector(state => state.admission.admission);
 
    let dispatch = useDispatch();
@@ -40,6 +58,9 @@ const Steps = () => {
          ...prevData,
          [name]: value,
       }));
+
+     setMissingFields((prev) => prev.filter((err) => !err.toLowerCase().includes(name.toLowerCase())));
+
    };
 
    const handleDropdownChange = (name, value) => {
@@ -117,6 +138,8 @@ const Steps = () => {
             <YourInfo
                handleInputChange={handleInputChange}
                handleDropdownChange={handleDropdownChange}
+               errors={missingFields}
+               showErrors={showErrors}
             />
          ),
       },
@@ -144,37 +167,83 @@ const Steps = () => {
    ];
 
    const validateStep = () => {
-      const requiredFields = [];
-
-      if (activeStep === 0) {
-         requiredFields.push('firstName', 'lastName', 'email');
-      } else if (activeStep === 1) {
-         requiredFields.push('fatherName', 'motherName');
-      } else if (activeStep === 4 && !image) {
-         setIsModalOpen(true);
-         return false;
-      }
-      //check values in formData
-      for(let field of requiredFields){
-         if(!formData[field] || formData[field].trim()===''){
-            setIsModalOpen(true);
-            return false;
+      const stepValidationConfig = {
+         0: [
+            'firstName',
+            'lastName',
+            'email',
+            'fatherName',
+            'motherName',
+            'AadharCardNumber',
+            'contactNumber',
+            'dateOfBirth',
+            'gender',
+            'nationality',
+            'street',
+            'city',
+            'state',
+            'pinCode',
+         ],
+         1: ['Gname', 'Grelation', 'GcontactNumber'],
+         2: [], // AreYouHuman step
+         3: [
+            'tenthBoard',
+            'tenthGrade',
+            'twelfthMarks',
+            'twelfthGrade',
+         ],
+         4: ['university', 'courseName', 'mode'],
+      };
+
+      const missing = [];
+      const requiredFields = stepValidationConfig[activeStep] || [];
+
+      for (const field of requiredFields) {
+         const value = formData[field];
+         if (
+            value === undefined ||
+            value === null ||
+            (typeof value === 'string' && value.trim() === '')
+         ) {
+            const formatted = field
+               .replace(/([A-Z])/g, ' $1')
+               .replace(/^./, str => str.toUpperCase());
+            missing.push(formatted);
          }
-            
       }
-      //Save current changes
-      sessionStorage.setItem('admissionFormData', JSON.stringify(formData));
+
+      if (activeStep === 4 && !image) {
+         missing.push('Profile Picture');
+      }
+
+      sessionStorage.setItem(
+         'admissionFormData',
+         JSON.stringify(formData),
+      );
 
-      return true;
+
+
+      setMissingFields(missing);
+      return missing.length === 0;
 
    };
 
-   const handleNext = () => {
+   const handleNext = (e) => {
+       e.preventDefault();// Prevent accidental page reload
+      setShowErrors(true);
       if (validateStep()) {
          if (activeStep < steps.length - 1) {
             setActiveStep(prevStep => prevStep + 1);
+            setShowErrors(false);
          }
-      }
+      }else {
+   //  setIsModalOpen(true);
+
+      const firstErrorField = document.querySelector('.input-error');
+      firstErrorField?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
+
+      
    };
 
    const handlePrevious = () => {
@@ -303,13 +372,13 @@ const Steps = () => {
                </div>
             )}
          </form>
-
-         <StepValidateModal
+         {/* <StepValidateModal
             isOpen={isModalOpen}
             onClose={() => setIsModalOpen(false)}
             title='Incomplete Form'
             message='Please fill in all fields before proceeding!'
-         />
+            missingFields={missingFields}
+         /> */}
       </>
    );
 };