feat : scroll danh sách khối

src/_components/Header/index.js

@@ -4,8 +4,10 @@ import { configConstants } from "../../_constants";
 
 export default function Header({ icon, title, subtitles = [] }) {
   const authentication = useSelector((state) => state.authentication);
-
-  const fullName =  authentication?.user?.role==="organization_admin"?`Hiệu trưởng ${authentication?.user?.organization_name}`:authentication?.user?.fullname
+  const { fullname, organization_name, role } = authentication?.user || {};
+  const hasFullName = fullname || organization_name;
+  
+  const fullName = role === "organization_admin" ? `Hiệu trưởng ${hasFullName}` : fullname;
   
   return (
     <div className="header-container">

src/_screens/home/detail-grade/detailGrade.style.scss

@@ -34,7 +34,7 @@
     .arrow-button{
       display: flex;
       justify-content: space-between;
-      width: 70%;
+      width: 100%;
     }
 
     .detail-grade-list-class {

src/_screens/home/detail-grade/index.js

@@ -7,7 +7,7 @@ import { renderIconHome } from "../../../_components/renderIcon";
 import { apiCaller, history } from "../../../_helpers";
 import { useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { defaultMonthYearSemester, getListMonthBySemester, LIST_SCHOOL_YEAR, LIST_SEMESTER } from "../../../_constants/common";
 import { configConstants } from "../../../_constants";
 import { exportExcel } from "../../../_helpers/utils";
@@ -29,6 +29,11 @@ export default function DetailGrade() {
   const [month, setMonth] = useState(grade?.filterGrade?.month);
   const [listClass, setListClass] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [isLoadMoreOnline, setLoadMoreOnline] = useState(true);
+  const [limitOnline] = useState(10);
+  const [offsetOnline, setOffsetOnline] = useState(0);
+  const [isEndOnlineClasses, setIsEndOnlineClasses] = useState(false);
+  const listRef = useRef(null);
 
   const schoolName = !!school_name ? decodeURIComponent(school_name) : '';
   const gradeName = !!grade_name ? decodeURIComponent(grade_name) : '';
@@ -37,8 +42,21 @@ export default function DetailGrade() {
     setSemester(item);
     setMonth(getListMonthBySemester(item?.value)?.[0]);
   };
+  const scrollToTop = () => {
+    if (listRef.current) {
+      listRef.current.scrollTo({
+        top: 0,
+        behavior: 'smooth', 
+      });
+    }
+  };
 
   const handleFilter = () => {
+    setOffsetOnline(0)
+    setLoadMoreOnline(true)
+    setIsEndOnlineClasses(false)
+    setIsFiltered(true);
+    scrollToTop()
     getData();
   };
 
@@ -66,11 +84,9 @@ export default function DetailGrade() {
       item?.assign_number_level || 0,
       `${item?.student_done_per || 0}%`,
       item?.student_done_per_level || 0,
-      schoolName || '',
-      //Huyện
-      "",
-      // Tỉnh
-      "",
+      item?.organization_name || '',
+      item?.organization_district ||'',
+      item?.organization_province ||'',
       !!month?.value
         ? month.value
         : getListMonthBySemester(semester.value)
@@ -120,6 +136,60 @@ export default function DetailGrade() {
     getData();
   }, [])
 
+
+  const handleScroll = (e) => {
+    if (
+      e.target.scrollHeight - e.target.scrollTop < e.target.clientHeight + 5 &&
+      isLoadMoreOnline &&
+      !isLoading
+    ) {
+      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/getListClassInGradeOrganization?school_id=${
+          schoolId
+        }&grade_id=${
+          gradeId
+        }${
+          !!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");
+        console.log('res',res);
+        
+        if (res?.status) {
+          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 = listClass;
+      setListClass(listPrev?.concat(listNext));
+    } catch (e) {
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+
   return (
     <div className="flex-1">
       <Header
@@ -153,15 +223,11 @@ export default function DetailGrade() {
           </div>
           <div className="detail-grade-right-side">
             <div className="detail-grade-list-action detail-grade-right-p-h">
-              {/* <div className="arrow-button">
-                <PrimaryButton onClick={()=>{}}>{'<'}</PrimaryButton>
-                <PrimaryButton onClick={()=>{}}>{'>'}</PrimaryButton>
-              </div> */}
               <div>
                   {!!listClass?.length && <PrimaryButton onClick={handleExport}>Xuất excel</PrimaryButton>}
               </div>
             </div>
-            <div className="detail-grade-list-class detail-grade-right-p-h scrollbar-custom">
+            <div ref={listRef} onScroll={handleScroll} className="detail-grade-list-class detail-grade-right-p-h scrollbar-custom">
               {!isLoading && !listClass?.length && (
                 <p style={{fontSize: '1.8rem', fontWeight: 700}}>
                   Không có lớp nào
@@ -210,6 +276,10 @@ export default function DetailGrade() {
                   );
                 })}
             </div>
+            {/* <div className="arrow-button">
+                <PrimaryButton isDisabled={true} onClick={()=>{}}>{'<'}</PrimaryButton>
+                <PrimaryButton onClick={()=>{}}>{'>'}</PrimaryButton>
+              </div> */}
           </div>
         </div>
       </div>

src/_screens/home/headmaster/index.js

@@ -63,8 +63,11 @@ export default function HeadmasterHome() {
   };
 
   const changeSemester = (item) => {
-    scrollToTop()
     setOffsetOnline(0)
+    setLoadMoreOnline(true)
+    setIsEndOnlineClasses(false)
+    setIsFiltered(true);
+    scrollToTop()
     setSemester(item);
     setMonth(getListMonthBySemester(item?.value)?.[0]);
   };
@@ -89,12 +92,9 @@ export default function HeadmasterHome() {
       item?.criteria_teacher?.assign_number_level || 0,
       item?.criteria_teacher?.student_done_per_level || 0,
       item?.criteria_teacher?.criteria_level || 0,
-      //trường
-      "",
-      // Huyện
-      "",
-      // Tỉnh
-      "",
+      item?.organization_name || '',
+      item?.organization_district ||'',
+      item?.organization_province ||'',
       !!month?.value
         ? month.value
         : getListMonthBySemester(semester.value)