From db1d8c1f72422bc4d759e926b2eddb446961f187 Mon Sep 17 00:00:00 2001
From: Jiheng Li <136323923+JihengLi@users.noreply.github.com>
Date: Mon, 15 Apr 2024 21:47:42 -0500
Subject: [PATCH 1/4] Add a column for the judgement state -- whether a team
 has been judged (#467)

* 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
---
 components/judges/TeamSelect.tsx | 16 +++++++++++++++-
 components/judges/schedule.tsx   | 12 ++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/components/judges/TeamSelect.tsx b/components/judges/TeamSelect.tsx
index 03fe84f9..4dca5d2a 100644
--- a/components/judges/TeamSelect.tsx
+++ b/components/judges/TeamSelect.tsx
@@ -20,6 +20,18 @@ function withCheckMark(value: string) {
 		</Row>
 	);
 }
+
+const optionComparator = (input: string, option: string) => {
+	let searchPosition = 0;
+	const cin = input.toLowerCase();
+	const opt = option.toLowerCase();
+	for (let i = 0; i < opt.length; ++i) {
+		if (opt[i] === cin[searchPosition]) ++searchPosition;
+		else break;
+	}
+	return searchPosition === input.length;
+};
+
 export default function TeamSelect(props: TeamSelectProps) {
 	const { teamsData, currentTeamID, handleChange } = props;
 	const { data: session } = useSession();
@@ -34,10 +46,12 @@ export default function TeamSelect(props: TeamSelectProps) {
 				Team:
 			</strong>
 			<Select
+				showSearch
 				value={currentTeamID ? currentTeamID : 'Select a team'}
 				style={{ width: 300, maxWidth: '60vw' }}
 				onChange={handleChange}
-				allowClear>
+				allowClear
+				filterOption={(input, option) => optionComparator(input, String(option?.children))}>
 				{session?.userType === 'JUDGE' && (
 					<OptGroup label="My Teams">
 						{teamsData
diff --git a/components/judges/schedule.tsx b/components/judges/schedule.tsx
index b49bb613..92ca9cda 100644
--- a/components/judges/schedule.tsx
+++ b/components/judges/schedule.tsx
@@ -205,7 +205,7 @@ export function JudgeSchedule({ data, cutoffIndex, handleChange }: ScheduleProps
 			title: 'Project',
 			dataIndex: 'project',
 			key: 'project',
-			width: '30%',
+			width: '25%',
 			render: ({ name, link }: { name: string; link: URL }) => (
 				<>
 					<td>{name}</td>
@@ -223,7 +223,7 @@ export function JudgeSchedule({ data, cutoffIndex, handleChange }: ScheduleProps
 			title: 'Team Members',
 			dataIndex: 'teamMembers',
 			key: 'teamMembers',
-			width: '30%',
+			width: '25%',
 			render: (members: User[]) => members.map(member => <Tag key={member.id}>{member.name}</Tag>),
 		},
 		{
@@ -244,6 +244,13 @@ export function JudgeSchedule({ data, cutoffIndex, handleChange }: ScheduleProps
 				</Button>
 			),
 		},
+		{
+			title: 'Judgement State',
+			dataIndex: 'scores',
+			key: 'scores',
+			width: '10%',
+			render: (scores: []) => <Tag>{scores.length ? 'Judged' : 'Without Judgement'}</Tag>,
+		},
 	];
 	const dataSource = data.slice(showPast ? 0 : cutoffIndex).map(item => {
 		return {
@@ -253,6 +260,7 @@ export function JudgeSchedule({ data, cutoffIndex, handleChange }: ScheduleProps
 			teamMembers: item.team.members,
 			judge: item.judge,
 			teamId: item.team._id,
+			scores: item.team.scores,
 		};
 	});
 

From a068d11c39676801570b5edbadc62377adfbdcbb Mon Sep 17 00:00:00 2001
From: Jiheng Li <136323923+JihengLi@users.noreply.github.com>
Date: Mon, 15 Apr 2024 21:52:29 -0500
Subject: [PATCH 2/4] Henry li/solve the runtime error of the eye icon (#471)

* 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
---
 components/Organizer/ApplicantsTab/ApplicantsTab.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/Organizer/ApplicantsTab/ApplicantsTab.tsx b/components/Organizer/ApplicantsTab/ApplicantsTab.tsx
index 1ec1d4e0..1fd0b0de 100644
--- a/components/Organizer/ApplicantsTab/ApplicantsTab.tsx
+++ b/components/Organizer/ApplicantsTab/ApplicantsTab.tsx
@@ -415,10 +415,13 @@ export const ApplicantsTab = () => {
 					visible={isAppModalOpen}
 					onOk={handleAppCloseModal}
 					onCancel={handleAppCloseModal}>
-					{selectedApplicant &&
-						Object.entries(selectedApplicant.application!)
+					{selectedApplicant?.application ? (
+						Object.entries(selectedApplicant.application)
 							.filter(([field, _]) => field in APPLICATION_KEY_MAP)
-							.map(createSingleApplicantEntry)}
+							.map(createSingleApplicantEntry)
+					) : (
+						<p>Application details are not available.</p>
+					)}
 				</Modal>
 			)}
 			{isCheckinModalOpen && (

From 3d4766281d4e8f25f43e637de3fe04bbae19071c Mon Sep 17 00:00:00 2001
From: Stanley Zheng <stanley.zheng00@gmail.com>
Date: Tue, 16 Apr 2024 20:16:53 -0400
Subject: [PATCH 3/4] change slider to radio buttons in judge (#456)

* fixed slider and button spacing

* Run Prettier

* changed slider to group of buttons

* Run Prettier

* fixed buttons and input box

* Run Prettier

---------

Co-authored-by: Stanley Zheng <szheng31@stuy.edu>
Co-authored-by: szheng31 <szheng31@users.noreply.github.com>
Co-authored-by: Isaac  Liu <69013063+xnscdev@users.noreply.github.com>
---
 components/judges/ScoreInput.tsx | 39 +++++++++++++++++++++++++++++---
 styles/Judge.module.css          |  7 ++++++
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/components/judges/ScoreInput.tsx b/components/judges/ScoreInput.tsx
index a91bc1ac..9f59d8b2 100644
--- 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
index 71883f2a..918635b1 100644
--- 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;
+}

From 48b2d67d570d24c2cdeb264c71e6aeaa60bd1e83 Mon Sep 17 00:00:00 2001
From: Jiheng Li <136323923+JihengLi@users.noreply.github.com>
Date: Tue, 16 Apr 2024 19:34:50 -0500
Subject: [PATCH 4/4] 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 <69013063+xnscdev@users.noreply.github.com>
---
 .../Organizer/ApplicantsTab/ApplicantsTab.tsx | 17 ++---
 .../ManageUsersTab/manageRoleForm.tsx         | 67 +++++++++++++++++--
 2 files changed, 65 insertions(+), 19 deletions(-)

diff --git a/components/Organizer/ApplicantsTab/ApplicantsTab.tsx b/components/Organizer/ApplicantsTab/ApplicantsTab.tsx
index 1fd0b0de..6e582213 100644
--- a/components/Organizer/ApplicantsTab/ApplicantsTab.tsx
+++ b/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
diff --git a/components/Organizer/ManageUsersTab/manageRoleForm.tsx b/components/Organizer/ManageUsersTab/manageRoleForm.tsx
index a7e6c981..dc580e33 100644
--- 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={{