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

uat
Quy_FE 3 months ago
parent 81205da08c
commit a88f014c12
  1. 2
      src/_screens/home/detail-room-education/detailRoomEducation.style.scss
  2. 76
      src/_screens/home/detail-room-education/index.js
  3. 4
      src/_screens/home/outstanding-teacher/index.js
  4. 1
      src/_screens/home/outstanding-teacher/outstandingTeacher.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;

@ -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 trường nào

@ -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">

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

Loading…
Cancel
Save