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) => (