Feat : box search text giáo viên

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;
+      justify-content: space-around;
-      margin-right: 32px;
+      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 {

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 (
     <div className="flex-1">
       <Header
@@ -365,11 +398,34 @@ export default function DetailRoomEducation() {
             </div>
           <div className="detail-room-education-right-side">
             <div className="detail-room-education-list-container">
-              <div className="d-flex detail-room-education-list-header">
+              <div>
                 <span style={{fontSize: '2rem', fontWeight: 700, padding: '0 3.2rem'}}>Danh sách trường</span>
-                <PrimaryButton onClick={handleExport}>
+
-                  Xuất excel
+                <div className="d-flex detail-education-department-list-header">
-                </PrimaryButton>
+                    <InputText
+                    className="criteria-manage-search-input criteria-manage-item"
+                    value={searchText}
+                    setValue={setSearchText}
+                    type="text"
+                    name="searchText"
+                    placeholder={"Nhập email hoặc số điện thoại giáo viên"}
+                    renderLabelIcon={renderIconSearchInput}
+                    onKeyUp={(e) => {
+                      if (e.which == 13 && !isFilterSchool) {
+                        handleSubmit();
+                      }
+                    }}
+                    />
+                    <PrimaryButton
+                      isDisabled={false}
+                      onClick={handleSubmit}
+                    >
+                      {"Tìm kiếm"}
+                    </PrimaryButton>
+                    <PrimaryButton onClick={handleExport}>
+                      Xuất excel
+                    </PrimaryButton>
+                </div>
               </div>
               <div className="flex gap-16 align-item-center" style={{padding: '1rem 3.2rem'}}>
                 <RootSelect

src/_screens/home/education-department/educationDepartmentHome.style.scss

@@ -96,3 +96,20 @@
     }
   }
 }
+.detail-education-department-list-header{
+  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;
+  }
+}

src/_screens/home/education-department/index.js

@@ -16,7 +16,8 @@ import PrimaryButton from "../../../_components/Button/PrimaryButton";
 import { apiCaller, history } from "../../../_helpers";
 import { PATH } from "../../../_constants";
 import { replacePathParams } from "../../../_helpers/utils";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { alertActions } from "../../../_actions";
 
 export default function EducationDepartmentHome() {
   const authentication = useSelector((state) => 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() {
             </div>
           </div>
           <div className="education-department-home-list-container">
-            <p className="education-department-home-note">
+            <div>
-              Danh sách phòng giáo dục
+              <p className="education-department-home-note">
-            </p>
+                Danh sách phòng giáo dục
-            {/* <InputText
+              </p>
-                className="search-input"
+              <div className="d-flex detail-education-department-list-header">
-                value={searchText}
+              <InputText
-                setValue={setSearchText}
+                  className="criteria-manage-search-input criteria-manage-item"
-                type="text"
+                  value={searchText}
-                name="searchText"
+                  setValue={setSearchText}
-                placeholder={"Nhập tên giáo viên"}
+                  type="text"
-                renderLabelIcon={renderIconSearchInput}
+                  name="searchText"
-                onKeyUp={(e) => {
+                  placeholder={"Nhập email hoặc số điện thoại giáo viên"}
-                  if (e.which == 13 && !isFilterSchool) {
+                  renderLabelIcon={renderIconSearchInput}
-                    handleSubmit();
+                  onKeyUp={(e) => {
-                  }
+                    if (e.which == 13 && !isFilterSchool) {
-                }}
+                      handleSubmit();
-              /> */}
+                    }
+                  }}
+                  />
+              <PrimaryButton
+                isDisabled={false}
+                onClick={handleSubmit}
+              >
+                {"Tìm kiếm"}
+              </PrimaryButton>
+              </div>
+            </div>
             <div onScroll={handleScroll} className="education-department-home-list-content scrollbar-custom">
               <div className="education-department-home-list-room">
                 {listOrganization.length > 0 ? listOrganization.map((item, index) => (