Merge pull request #71 from deepali-chavhan/develop

Bug #227127 fix: UI alignment fixes and data setting on form click
transform1234 · Sep 20, 2024 · 7cc7c36 · 7cc7c36
2 parents 8491904 + ab21182
commit 7cc7c36
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 6 deletions.
diff --git a/packages/admin/src/components/StudentForm.jsx b/packages/admin/src/components/StudentForm.jsx
@@ -95,6 +95,37 @@ function StudentForm({ studentData }) {
     }
   };
 
+  useEffect(() => {
+    if (token && !studentData) {
+      setLoading(true);
+
+      const headers = {
+        Accept: "*/*",
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      };
+
+      const requestDataSchool = { page: 0, filters: {} };
+
+      const apiCalls = [
+        () => axios.post(schoolSearch, requestDataSchool, { headers }),
+        () => axios.post(getStateList, {}, { headers }),
+      ];
+
+      Promise.all(apiCalls.map(call => call()))
+      .then(([schoolResponse, stateResponse]) => {
+        if (schoolResponse) setData(schoolResponse.data.data);
+        if (stateResponse) setStateData(stateResponse.data.data);
+      })
+      .catch(error => {
+        console.error(error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+    }
+  }, [token]);
+
   useEffect(() => {
     if (token && studentData) {
       setLoading(true);

diff --git a/packages/admin/src/components/StudentForm.module.css b/packages/admin/src/components/StudentForm.module.css
@@ -65,14 +65,19 @@
 
 /* Style the Select Element */
 .selectWrapper {
-  width: 104%;
+  width: 103%;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   background-color: white;
   cursor: pointer;
 }
 
+@media only screen and (max-width: 600px) {
+  .selectWrapper {
+    width: 108%;
+  }
+}
 /* Style the Arrow Icon (in modern browsers) */
 .select-wrapper select::after {
   content: "\25BC"; /* Unicode character for a down arrow */

diff --git a/packages/admin/src/components/StudentListView.jsx b/packages/admin/src/components/StudentListView.jsx
@@ -441,11 +441,12 @@ function StudentListView() {
           onRequestClose={handleClose}
           contentLabel="Edit Modal"
           ariaHideApp={false}
+          className={styles.formModal}
         >
           <button onClick={handleClose} className={styles.closeButton}>
             ❌
           </button>
-          <div className={styles.bodyDiv}>
+          <div className={styles.mainDiv}>
             <StudentForm studentData={selectedStudent} />
           </div>
         </FORMmodal>

diff --git a/packages/admin/src/pages/StudentPage.jsx b/packages/admin/src/pages/StudentPage.jsx
@@ -157,14 +157,15 @@ function StudentPage() {
                   onRequestClose={closeFORMModal}
                   contentLabel="Edit Modal"
                   ariaHideApp={false}
+                  className={styles.formModal}
                 >
                   <button
                     onClick={closeFORMModal}
                     className={styles.closeButton}
                   >
                     ❌
                   </button>
-                  <div className={styles.bodyDiv}>
+                  <div className={styles.mainDiv}>
                     <StudentForm />
                   </div>
                 </FORMmodal>

diff --git a/packages/admin/src/pages/StudentPage.module.css b/packages/admin/src/pages/StudentPage.module.css
@@ -3,6 +3,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  padding: 30px;
 }
 
 .bodyDiv {
@@ -20,7 +21,26 @@
   border: none;
   cursor: pointer;
   padding: 0;
-  z-index: 1;
+  z-index: 3;
   color: #000;
-  width: 20%;
+  font-size: 18px;
+}
+
+.formModal {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  max-width: 800px;
+  max-height: 80vh;
+  background-color: white;
+  border-radius: 8px;
+  z-index: 1000;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  padding: 20px;
+  overflow-y: auto;
 }
diff --git a/packages/student-app/src/index.css b/packages/student-app/src/index.css
@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");
 
 * {
-  font-family: "Fredoka One", cursive;
+  font-family:'Rubik', sans-serif;
   letter-spacing: 0.5px;
 }