Feat : thêm scroll, thay style cho trang chủ sgd

src/_screens/home/detail-room-education/detailRoomEducation.style.scss

@@ -4,7 +4,7 @@
   display: flex;
 
   .detail-room-education-left-side {
-    width: 40%;
+    width: 48%;
     border-right: 1px solid #c7c7c7;
     display: flex;
     flex-direction: column;

src/_screens/home/detail-room-education/index.js

@@ -34,6 +34,11 @@ export default function DetailRoomEducation() {
   const [isLoadingStatisticCircle, setIsLoadingStatisticCircle] = useState(false);
   const [isLoadingStudentChart, setIsLoadingStudentChart] = useState(false);
   const [isLoadingTeacherChart, setIsLoadingTeacherChart] = useState(false);
+  const [isLoadMoreOnline, setLoadMoreOnline] = useState(true);
+  const [limitOnline] = useState(10);
+  const [offsetOnline, setOffsetOnline] = useState(0);
+  const [isEndOnlineClasses, setIsEndOnlineClasses] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const getListOrganization = async () => {
     try {
@@ -211,6 +216,69 @@ export default function DetailRoomEducation() {
     }
   }, [isLoadingListOrganization, isLoadingStatisticCircle, isLoadingStudentChart, isLoadingTeacherChart])
 
+  const handleScroll = (e) => {
+    if (
+      e.target.scrollHeight - e.target.scrollTop < e.target.clientHeight + 5 &&
+      isLoadMoreOnline &&
+      !isLoading
+    ) {
+      if(listOrganization.length < limitOnline) return
+      onLoadMoreClasses();
+    }
+  };
+
+  // Load More Classes for Teacher
+  const onLoadMoreClasses = async () => {
+    let offsetOnlineMore = offsetOnline + limitOnline;
+    let listNext = [];
+    setIsLoading(true);
+    try {
+      if (!isEndOnlineClasses) {
+        const endPoint = `/report/api_report/getListOrganizationFromDistrictOrganization?organization_id=${
+          idRoom
+        }${
+          !!schoolYear?.value ? `&year=${schoolYear?.value}` : ""
+        }${
+          !!semester?.value ? `&semester=${semester?.value}` : ""
+        }${
+          !!month?.value ? `&month=${month?.value}` : ""
+        }&limit=${limitOnline}&offset=${offsetOnlineMore}`;
+        const res = await apiCaller(
+          endPoint, 
+          "GET",
+          {},
+          null,
+          true,
+          configConstants.API_URL_SETEST,
+          false
+        )
+        // const endPoint = `/report/api_report/getOrganizationAndCriteria?limit=${limitOnline}&offset=${offsetOnlineMore}${
+        //   queryParams.length ? `&${queryParams.join("&")}` : ""
+        // }`;
+        // const res = await apiCaller(endPoint, "GET");
+
+        if (!res.data){
+          setIsEndOnlineClasses(true);
+        } else {
+          listNext = res?.data;
+          setOffsetOnline(offsetOnline + limitOnline);
+          if (res?.data?.length < limitOnline) {
+            setLoadMoreOnline(false);
+            if (res?.data?.length == 0) setLoadMoreOnline(false);
+            setIsEndOnlineClasses(true);
+          }
+        }
+      } else {
+        setIsEndOnlineClasses(true);
+      }
+
+      let listPrev = listOrganization;
+      setListOrganization(listPrev?.concat(listNext));
+    } catch (e) {
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   return (
     <div className="flex-1">
@@ -273,25 +341,25 @@ export default function DetailRoomEducation() {
                   data={LIST_SCHOOL_YEAR}
                   value={schoolYear}
                   setValue={setSchoolYear}
-                  style={{flex: 1}}
+                  style={{flex: 1,maxWidth: '260px'}}
                 />
                 <RootSelect
                   data={LIST_SEMESTER}
                   value={semester}
                   setValue={changeSemester}
-                  style={{flex: 0.5}}
+                  style={{flex: 0.5,maxWidth: '200px'}}
                 />
                 <RootSelect
                   data={getListMonthBySemester(semester.value)}
                   value={month}
                   setValue={setMonth}
-                  style={{flex: 0.5}}
+                  style={{flex: 0.5,maxWidth: '160px'}}
                 />
                 <PrimaryButton onClick={handleFilter}>
                   Áp dụng
                 </PrimaryButton>
               </div>
-              <div className="detail-room-education-list detail-room-education-right-p-h scrollbar-custom">
+              <div onScroll={handleScroll} className="detail-room-education-list detail-room-education-right-p-h scrollbar-custom">
                 {!isLoadingListOrganization && !listOrganization?.length && (
                   <p style={{fontSize: '1.8rem', fontWeight: 700}}>
                     Không có trường nào

src/_screens/home/outstanding-teacher/index.js

@@ -147,10 +147,10 @@ export default function OutstandingTeacher() {
                               {(index + 2) + '. ' + item?.teacher_name}
                             </p>
                             <p className="outstanding-teacher-info-text">
-                              {item?.email}
+                              {item?.district_name}
                             </p>
                             <p className="outstanding-teacher-info-text">
-                              {item?.phone}
+                              {item?.school_name}
                             </p>
                           </div>
                           <div className="outstanding-teacher-criteria">

src/_screens/home/outstanding-teacher/outstandingTeacher.style.scss

@@ -39,6 +39,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        max-height: 290px;
 
         .outstanding-teacher-best-avatar-box {
           height: 90%;