Merge branch 'main' into HenryLi/Fix-search-method-organizer

VandyHacks · Apr 19, 2024 · 2841a5a · 2841a5a
2 parents b6ab7a2 + 48b2d67
commit 2841a5a
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 9 deletions.
diff --git a/components/Organizer/ManageUsersTab/manageRoleForm.tsx b/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={{

diff --git a/components/judges/ScoreInput.tsx b/components/judges/ScoreInput.tsx
@@ -1,5 +1,9 @@
-import { Slider, InputNumber, Row, Col } from 'antd';
+import { Slider, Radio, InputNumber, Row, Col } from 'antd';
+import { RadioChangeEvent } from 'antd/lib';
+import { IntegerType } from 'mongodb';
+import styles from '../../styles/Judge.module.css';
 import React from 'react';
+
 interface ScoreInputProps {
 	value: number;
 	onChange: (value: number | null) => void;
@@ -8,10 +12,39 @@ interface ScoreInputProps {
 export default function ScoreInput(props: ScoreInputProps) {
 	const { value, onChange } = props;
 	const [min, max] = [0, 7];
+	const onRadioChange = (e: RadioChangeEvent) => {
+		onChange(e.target.value);
+	};
+
 	return (
 		<Row>
-			<Col span={20}>
-				<Slider min={min} max={max} onChange={onChange} value={value} />
+			<Col flex={1 / 4}>
+				<Radio.Group
+					onChange={onRadioChange}
+					value={value}
+					style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+					<Radio className={styles.CustomRadio} value={1}>
+						1
+					</Radio>
+					<Radio className={styles.CustomRadio} value={2}>
+						2
+					</Radio>
+					<Radio className={styles.CustomRadio} value={3}>
+						3
+					</Radio>
+					<Radio className={styles.CustomRadio} value={4}>
+						4
+					</Radio>
+					<Radio className={styles.CustomRadio} value={5}>
+						5
+					</Radio>
+					<Radio className={styles.CustomRadio} value={6}>
+						6
+					</Radio>
+					<Radio className={styles.CustomRadio} value={7}>
+						7
+					</Radio>
+				</Radio.Group>
 			</Col>
 			<Col span={4}>
 				<InputNumber

diff --git a/styles/Judge.module.css b/styles/Judge.module.css
@@ -191,3 +191,10 @@
 .reportABugText:hover {
 	cursor: pointer;
 }
+
+.CustomRadio {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-right: 20px;
+}