From 7ee4e325cfccaef33de941b57de2b95b483ec17d Mon Sep 17 00:00:00 2001 From: Quy_FE Date: Tue, 29 Apr 2025 11:49:47 +0700 Subject: [PATCH] =?UTF-8?q?Feat=20:=20box=20search=20text=20gi=C3=A1o=20vi?= =?UTF-8?q?=C3=AAn?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../detailRoomEducation.style.scss | 17 +++- .../home/detail-room-education/index.js | 68 ++++++++++++++-- .../educationDepartmentHome.style.scss | 17 ++++ .../home/education-department/index.js | 77 ++++++++++++++----- 4 files changed, 152 insertions(+), 27 deletions(-) diff --git a/src/_screens/home/detail-room-education/detailRoomEducation.style.scss b/src/_screens/home/detail-room-education/detailRoomEducation.style.scss index dc9e28b..8ae82ef 100644 --- a/src/_screens/home/detail-room-education/detailRoomEducation.style.scss +++ b/src/_screens/home/detail-room-education/detailRoomEducation.style.scss @@ -30,8 +30,21 @@ padding-right: 32px; } .detail-room-education-list-header{ - justify-content: space-between; - margin-right: 32px; + justify-content: space-around; + margin: 12px 32px; + gap: 32px; + .criteria-manage-search-input { + height: 46px; + border-radius: 40px; + @include screen_pc_sm { + height: 36px; + } + } + + .criteria-manage-item { + min-width: fit-content; + flex: 1; + } } .detail-room-education-list-container { diff --git a/src/_screens/home/detail-room-education/index.js b/src/_screens/home/detail-room-education/index.js index 04bac74..46b5bb9 100644 --- a/src/_screens/home/detail-room-education/index.js +++ b/src/_screens/home/detail-room-education/index.js @@ -1,12 +1,12 @@ import { useEffect, useState } from "react"; import Header from "../../../_components/Header"; -import { renderIconButton, renderIconHome } from "../../../_components/renderIcon"; +import { renderIconButton, renderIconHome, renderIconSearchInput } from "../../../_components/renderIcon"; import RateStar from "../../../_components/RateStar"; import { defaultMonthYearSemester, getListMonthBySemester, LIST_SCHOOL_YEAR, LIST_SEMESTER, PRIMARY_COLOR } from "../../../_constants/common"; import { configConstants, PATH } from "../../../_constants"; import RootSelect from "../../../_components/RootSelect"; import PrimaryButton from "../../../_components/Button/PrimaryButton"; -import { useSelector } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import './detailRoomEducation.style.scss' import BoxDoughnutChart from "../../../_components/boxChart/BoxDoughnutChar"; import BoxDoughnutBarChart from "../../../_components/boxChart/BoxDoughnutBarChart"; @@ -14,6 +14,8 @@ import { apiCaller, history } from "../../../_helpers"; import { exportExcel, replacePathParams } from "../../../_helpers/utils"; import $ from "jquery"; import { useLocation, useParams } from "react-router-dom"; +import InputText from "../../../_components/Auth/InputText"; +import { alertActions } from "../../../_actions"; export default function DetailRoomEducation() { const {idRoom} = useParams() @@ -41,6 +43,8 @@ export default function DetailRoomEducation() { const [offsetOnline, setOffsetOnline] = useState(0); const [isEndOnlineClasses, setIsEndOnlineClasses] = useState(false); const [isLoading, setIsLoading] = useState(false); + const [searchText, setSearchText] = useState(''); + const dispatch = useDispatch(); const getListOrganization = async () => { try { @@ -308,7 +312,36 @@ export default function DetailRoomEducation() { ]); exportExcel(listHeader, listData, `Danh sách trường.xlsx`); }; + const getDataTeacher = async () => { + try { + setIsLoading(true); + const endPoint = `/api_teacher/get_teacher_info?search=${searchText}`; + const res = await apiCaller(endPoint, "GET"); + setIsLoading(false); + if (res?.status) { + const teacherId = res?.data?.[0]?.teacher_id; + const teacherName = encodeURIComponent(res?.data?.[0]?.teacher_name); + const detailPath = replacePathParams(PATH.home.detailTeacher, { teacherId}); + + history.push({ + pathname: detailPath, + search: `?teacher_name=${teacherName}`, + state: { isBack: true } + }); + } + } catch (err) { + setIsLoading(false); + dispatch( + alertActions.error({ + message: err?.toString(), + }), + ); + } + }; + const handleSubmit = () =>{ + getDataTeacher() + } return (
-
+
Danh sách trường - - Xuất excel - + +
+ { + if (e.which == 13 && !isFilterSchool) { + handleSubmit(); + } + }} + /> + + {"Tìm kiếm"} + + + Xuất excel + +
state.authentication); @@ -32,6 +33,7 @@ export default function EducationDepartmentHome() { const [offsetOnline, setOffsetOnline] = useState(0); const [isEndOnlineClasses, setIsEndOnlineClasses] = useState(false); const [isLoading, setIsLoading] = useState(false); + const dispatch = useDispatch(); const getDataOrganization = async () => { try { @@ -106,8 +108,35 @@ export default function EducationDepartmentHome() { getDataTeacherChart() }, [dateTeacherChart]) - const handleSubmit = ()=>{ + const getDataTeacher = async () => { + try { + setIsLoading(true); + const endPoint = `/api_teacher/get_teacher_info?search=${searchText}`; + const res = await apiCaller(endPoint, "GET"); + setIsLoading(false); + if (res?.status) { + const teacherId = res?.data?.[0]?.teacher_id; + const teacherName = encodeURIComponent(res?.data?.[0]?.teacher_name); + const detailPath = replacePathParams(PATH.home.detailTeacher, { teacherId}); + + history.push({ + pathname: detailPath, + search: `?teacher_name=${teacherName}`, + state: { isBack: true } + }); + } + } catch (err) { + setIsLoading(false); + dispatch( + alertActions.error({ + message: err?.toString(), + }), + ); + } + }; + const handleSubmit = () =>{ + getDataTeacher() } const handleScroll = (e) => { @@ -209,23 +238,33 @@ export default function EducationDepartmentHome() {
-

- Danh sách phòng giáo dục -

- {/* { - if (e.which == 13 && !isFilterSchool) { - handleSubmit(); - } - }} - /> */} +
+

+ Danh sách phòng giáo dục +

+
+ { + if (e.which == 13 && !isFilterSchool) { + handleSubmit(); + } + }} + /> + + {"Tìm kiếm"} + +
+
{listOrganization.length > 0 ? listOrganization.map((item, index) => (