feat(students): add hide and search button in advanced search collaps…

…ible
sws2apps · Jun 27, 2022 · 808509d · 808509d
1 parent b175141
commit 808509d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git a/src/components/students/StudentAdvancedSearch.js b/src/components/students/StudentAdvancedSearch.js
@@ -3,18 +3,24 @@ import { useTranslation } from 'react-i18next';
 import Box from '@mui/material/Box';
 import Checkbox from '@mui/material/Checkbox';
 import Collapse from '@mui/material/Collapse';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
+import IconButton from '@mui/material/IconButton';
+import PersonSearchIcon from '@mui/icons-material/PersonSearch';
 import Typography from '@mui/material/Typography';
 
 const StudentAdvancedSearch = ({
 	advancedOpen,
 	isFemale,
 	isMale,
 	assTypes,
+	handleSearchStudent,
+	setAdvancedOpen,
 	setIsFemale,
 	setIsMale,
 	setAssTypes,
+	txtSearch,
 }) => {
 	const { t } = useTranslation();
 
@@ -24,6 +30,10 @@ const StudentAdvancedSearch = ({
 	const [isBibleStudy, setIsBibleStudy] = useState(false);
 	const [isTalk, setIsTalk] = useState(false);
 
+	const handleSearchAdvanced = () => {
+		handleSearchStudent(txtSearch, isMale, isFemale, assTypes);
+	};
+
 	const handleCheckBRead = (value) => {
 		if (value) {
 			if (assTypes.findIndex((assType) => assType === 100) === -1) {
@@ -223,6 +233,30 @@ const StudentAdvancedSearch = ({
 						</FormGroup>
 					</Box>
 				</Box>
+				<Box sx={{ marginTop: '10px' }}>
+					<IconButton
+						sx={{ backgroundColor: '#A9CCE3', marginRight: '10px' }}
+						onClick={() => setAdvancedOpen(false)}
+					>
+						<ExpandLessIcon
+							sx={{
+								fontSize: '25px',
+								color: 'black',
+							}}
+						/>
+					</IconButton>
+					<IconButton
+						sx={{ backgroundColor: '#A9CCE3' }}
+						onClick={handleSearchAdvanced}
+					>
+						<PersonSearchIcon
+							sx={{
+								fontSize: '25px',
+								color: 'black',
+							}}
+						/>
+					</IconButton>
+				</Box>
 			</Box>
 		</Collapse>
 	);

diff --git a/src/pages/Students.js b/src/pages/Students.js
@@ -386,12 +386,17 @@ const Students = () => {
 
 			<StudentAdvancedSearch
 				advancedOpen={advancedOpen}
+				setAdvancedOpen={(value) => setAdvancedOpen(value)}
 				isMale={isMale}
 				isFemale={isFemale}
+				handleSearchStudent={(txtSearch, isMale, isFemale, assTypes) =>
+					handleSearchStudent(txtSearch, isMale, isFemale, assTypes)
+				}
 				assTypes={assTypes}
 				setIsMale={(value) => setIsMale(value)}
 				setIsFemale={(value) => setIsFemale(value)}
 				setAssTypes={(value) => setAssTypes(value)}
+				txtSearch={txtSearch}
 			/>
 
 			<Box sx={{ marginBottom: '10px', marginRight: '5px' }}>