From a88f014c12c4d79aa8539ce019b8f88913a4cfa2 Mon Sep 17 00:00:00 2001
From: Quy_FE <ngocquywork99@gmail.com>
Date: Mon, 28 Apr 2025 17:03:49 +0700
Subject: [PATCH] =?UTF-8?q?Feat=20:=20th=C3=AAm=20scroll,=20thay=20style?=
 =?UTF-8?q?=20cho=20trang=20ch=E1=BB=A7=20sgd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detailRoomEducation.style.scss            |  2 +-
 .../home/detail-room-education/index.js       | 76 ++++++++++++++++++-
 .../home/outstanding-teacher/index.js         |  4 +-
 .../outstandingTeacher.style.scss             |  1 +
 4 files changed, 76 insertions(+), 7 deletions(-)

diff --git a/src/_screens/home/detail-room-education/detailRoomEducation.style.scss b/src/_screens/home/detail-room-education/detailRoomEducation.style.scss
index 70af0c4..84d9315 100644
--- a/src/_screens/home/detail-room-education/detailRoomEducation.style.scss
+++ b/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;
diff --git a/src/_screens/home/detail-room-education/index.js b/src/_screens/home/detail-room-education/index.js
index 81eb9c1..033f92d 100644
--- a/src/_screens/home/detail-room-education/index.js
+++ b/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
diff --git a/src/_screens/home/outstanding-teacher/index.js b/src/_screens/home/outstanding-teacher/index.js
index 563245f..47c2408 100644
--- a/src/_screens/home/outstanding-teacher/index.js
+++ b/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">
diff --git a/src/_screens/home/outstanding-teacher/outstandingTeacher.style.scss b/src/_screens/home/outstanding-teacher/outstandingTeacher.style.scss
index 8bcf2d2..cea9ee2 100644
--- a/src/_screens/home/outstanding-teacher/outstandingTeacher.style.scss
+++ b/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%;