Henry li/add search sort filter function to manage application (#473)

* Add a column for the judgement state -- whether a team has been judged

* Add the search function to the drop down menu

* typo change

* delete useless import in components/judges/schedule.tsx

* Solved the runtime error of eye icon in manage applications in  organizer

* Fixed a small problem in the search method of manage application -- login name

* delete useless method

* Add search, sort, and filter functions to manage application tab in organizer

---------

Co-authored-by: Isaac  Liu <[email protected]>

components/Organizer/ApplicantsTab/ApplicantsTab.tsx

@@ -172,17 +172,6 @@ export const ApplicantsTab = () => {
 		setFilteredInfo(filters);
 	};
 
-	const handleSearch = (
-		selectedKeys: string[],
-		confirm: (param?: FilterConfirmProps) => void,
-		dataIndex: string,
-		closeDropDown: boolean
-	) => {
-		confirm({ closeDropdown: closeDropDown });
-		setSearchText(selectedKeys[0]);
-		setSearchedColumn(dataIndex);
-	};
-
 	const handleReset = (clearFilters: () => void) => {
 		clearFilters();
 		setSearchText('');
@@ -207,9 +196,11 @@ export const ApplicantsTab = () => {
 					value={selectedKeys[0]}
 					onChange={e => {
 						setSelectedKeys(e.target.value ? [e.target.value] : []);
-						handleSearch(selectedKeys as string[], confirm, dataIndex, false);
+						confirm({ closeDropdown: false });
+						setSearchText(e.target.value);
+						setSearchedColumn(dataIndex);
 					}}
-					onPressEnter={() => handleSearch(selectedKeys as string[], confirm, dataIndex, true)}
+					onPressEnter={() => confirm({ closeDropdown: true })}
 					style={{ marginBottom: 8, display: 'block' }}
 				/>
 				<Button

components/Organizer/ManageUsersTab/manageRoleForm.tsx

@@ -1,8 +1,9 @@
-import { Form, Button, Select, Row, Col, message } from 'antd';
+import { Form, Button, Select, Row, Col, message, Input } from 'antd';
 import Text from 'antd/lib/typography/Text';
 import { useContext, useState } from 'react';
 import { ThemeContext, getAccentColor, getThemedClass } from '../../../theme/themeProvider';
 import styles from '../../../styles/ManageUsersTab.module.css';
+import Highlighter from 'react-highlight-words';
 
 const { Option } = Select;
 
@@ -25,22 +26,76 @@ export default function ManageRoleForm({ onSubmit, formData }: ManageFormProps)
 	};
 
 	const { accentColor, baseTheme } = useContext(ThemeContext);
-
 	const [modified, setModified] = useState<string[]>([]);
-
-	// TODO: probably add search
+	const [nameFilter, setNameFilter] = useState('');
+	const [roleFilter, setRoleFilter] = useState('');
+	const [sortOrder, setSortOrder] = useState('ascend');
 	const [form] = Form.useForm();
 
+	const filteredData = formData
+		.filter(item => {
+			const name = item.name.toLowerCase().includes(nameFilter.toLowerCase());
+			const role = roleFilter ? item.userType === roleFilter : true;
+			return name && role;
+		})
+		.sort((a, b) => {
+			if (sortOrder === 'ascend') {
+				return a.name.localeCompare(b.name);
+			} else {
+				return b.name.localeCompare(a.name);
+			}
+		});
+
+	const changeSortOrder = () => {
+		const newSortOrder = sortOrder === 'ascend' ? 'descend' : 'ascend';
+		setSortOrder(newSortOrder);
+	};
+
 	return (
 		<Form {...layout} labelAlign="left" form={form} onFinish={onSubmit}>
-			{formData.map(config => (
+			<div style={{ marginBottom: 20 }}>
+				<Input
+					placeholder="Search by Name"
+					value={nameFilter}
+					onChange={e => setNameFilter(e.target.value)}
+					style={{ width: 200, marginRight: 8 }}
+				/>
+				<Select
+					placeholder="Filter by Role"
+					style={{ width: 120, marginRight: 8 }}
+					onChange={value => setRoleFilter(value)}
+					allowClear>
+					<Option value="">All Roles</Option>
+					<Option value="HACKER">Hacker</Option>
+					<Option value="JUDGE">Judge</Option>
+					<Option value="ORGANIZER">Organizer</Option>
+				</Select>
+				<Button
+					type="primary"
+					onClick={() => {
+						form.resetFields();
+						setNameFilter('');
+						setRoleFilter('');
+					}}>
+					Reset
+				</Button>
+				<Button type="primary" onClick={changeSortOrder} style={{ marginLeft: 8 }}>
+					Sort by {sortOrder === 'ascend' ? 'A-Z' : 'Z-A'}
+				</Button>
+			</div>
+			{filteredData.map(config => (
 				<Form.Item
 					name={config._id}
 					// display name and email
 					label={
 						<div>
 							<span className={styles[getThemedClass('manageUserPrimaryLabel', baseTheme)]}>
-								{config.name}
+								<Highlighter
+									highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
+									searchWords={[nameFilter]}
+									autoEscape={true}
+									textToHighlight={config.name}
+								/>
 							</span>
 							<div
 								style={{