From a4d4169148dca60379aa76fc71bb8e60df56b780 Mon Sep 17 00:00:00 2001 From: Quy_FE Date: Mon, 21 Apr 2025 09:20:46 +0700 Subject: [PATCH] =?UTF-8?q?feat=20:=20scroll=20danh=20s=C3=A1ch=20kh?= =?UTF-8?q?=E1=BB=91i?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_components/Header/index.js | 6 +- .../home/detail-grade/detailGrade.style.scss | 2 +- src/_screens/home/detail-grade/index.js | 92 ++++++++++++++++--- src/_screens/home/headmaster/index.js | 14 +-- 4 files changed, 93 insertions(+), 21 deletions(-) diff --git a/src/_components/Header/index.js b/src/_components/Header/index.js index 663dafe..43db49e 100644 --- a/src/_components/Header/index.js +++ b/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 (
diff --git a/src/_screens/home/detail-grade/detailGrade.style.scss b/src/_screens/home/detail-grade/detailGrade.style.scss index 428fac2..fa02897 100644 --- a/src/_screens/home/detail-grade/detailGrade.style.scss +++ b/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 { diff --git a/src/_screens/home/detail-grade/index.js b/src/_screens/home/detail-grade/index.js index bbfa69b..f3e8a2d 100644 --- a/src/_screens/home/detail-grade/index.js +++ b/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 (
- {/*
- {}}>{'<'} - {}}>{'>'} -
*/}
{!!listClass?.length && Xuất excel}
-
+
{!isLoading && !listClass?.length && (

Không có lớp nào @@ -210,6 +276,10 @@ export default function DetailGrade() { ); })}

+ {/*
+ {}}>{'<'} + {}}>{'>'} +
*/}
diff --git a/src/_screens/home/headmaster/index.js b/src/_screens/home/headmaster/index.js index 2b0f9de..cba9273 100644 --- a/src/_screens/home/headmaster/index.js +++ b/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)