Skip to content

Commit 9de551c

Browse files
MichaelZhao21MichaelZhao21
authored
Minor UX fixes (#297)
* Fix overflowing of CSV upload filename field * Make CSV preview scroll at 500px * Fix red text positioning on judge row actions * Consistent pluralization of move group text on project row * Show groups on expo page * Fix swap group message and remove disabling while running * Starting deliberation pauses judging * Fix weird button sizing on actions menu
1 parent 8aadab1 commit 9de551c

File tree

9 files changed

+68
-38
lines changed

9 files changed

+68
-38
lines changed

‎client/src/components/admin/ActionsPopup.tsx‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,17 @@ interface ActionsPopupProps {
1717
}
1818

1919
const ActionsItem = ({ children }: { children: React.ReactNode }) => {
20-
return <div className="flex flex-col md:flex-row mb-4 md:mb-0 items-center gap-3">{children}</div>;
20+
return (
21+
<div className="flex flex-col md:flex-row mb-4 md:mb-0 items-center gap-3">{children}</div>
22+
);
2123
};
2224

2325
const ActionsPopup = (props: ActionsPopupProps) => {
2426
const navigate = useNavigate();
2527
const options = useOptionsStore((state) => state.options);
2628
const fetchOptions = useOptionsStore((state) => state.fetchOptions);
2729
const fetchJudges = useAdminStore((state) => state.fetchJudges);
28-
const clock = useClockStore((state) => state.clock);
30+
const fetchClock = useClockStore((state) => state.fetchClock);
2931
const [deliberationPopup, setDeliberationPopup] = useState(false);
3032
const [swapPopup, setSwapPopup] = useState(false);
3133

@@ -58,6 +60,9 @@ const ActionsPopup = (props: ActionsPopupProps) => {
5860
'Deliberation has started! Judges will no longer be able to edit their rankings.'
5961
);
6062
}
63+
64+
fetchClock();
65+
setDeliberationPopup(false);
6166
};
6267

6368
return (
@@ -66,14 +71,16 @@ const ActionsPopup = (props: ActionsPopupProps) => {
6671
<h1 className="text-5xl text-center font-bold mb-6">Actions</h1>
6772
<div className="flex flex-col w-full gap-3">
6873
<ActionsItem>
69-
<Button
70-
type="primary"
71-
onClick={() => navigate('/admin/log')}
72-
bold
73-
className="py-2 basis-1/2 grow-0 shrink-0"
74-
>
75-
Audit Log
76-
</Button>
74+
<div className="basis-1/2 grow-0 shrink-0 flex items-center justify-center">
75+
<Button
76+
type="primary"
77+
onClick={() => navigate('/admin/log')}
78+
bold
79+
className="py-2"
80+
>
81+
Audit Log
82+
</Button>
83+
</div>
7784
<Paragraph
7885
text="View all changes that have happened in Jury."
7986
className="basis-1/2 grow-0 shrink-0"
@@ -85,7 +92,6 @@ const ActionsPopup = (props: ActionsPopupProps) => {
8592
<Button
8693
type="gold"
8794
onClick={setSwapPopup.bind(null, true)}
88-
disabled={clock.running}
8995
tooltip="Groups can only be swapped when judging is paused"
9096
bold
9197
className="py-2"
@@ -99,21 +105,23 @@ const ActionsPopup = (props: ActionsPopupProps) => {
99105
</div>
100106

101107
<Paragraph
102-
text="Prevent judges from making changes to ranking and stars."
108+
text="Manually swap judge groups, sending every judge to the next group."
103109
className="basis-1/2 grow-0 shrink-0"
104110
/>
105111
</ActionsItem>
106112
)}
107113
<ActionsItem>
108-
<Button
109-
type={options.deliberation ? 'outline' : 'error'}
110-
onClick={setDeliberationPopup.bind(null, true)}
111-
bold
112-
tooltip="Stop judges from editing their rankings during deliberation"
113-
className="py-2 basis-1/2 grow-0 shrink-0"
114-
>
115-
{options.deliberation ? 'End Deliberation' : 'Start Deliberation'}
116-
</Button>
114+
<div className="basis-1/2 grow-0 shrink-0 flex items-center justify-center">
115+
<Button
116+
type={options.deliberation ? 'outline' : 'error'}
117+
onClick={setDeliberationPopup.bind(null, true)}
118+
bold
119+
tooltip="Stop judges from editing their rankings during deliberation"
120+
className="py-2"
121+
>
122+
{options.deliberation ? 'End Deliberation' : 'Start Deliberation'}
123+
</Button>
124+
</div>
117125
<Paragraph
118126
text="Prevent judges from making changes to ranking and stars."
119127
className="basis-1/2 grow-0 shrink-0"

‎client/src/components/admin/CSVPreview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const CSVPreview = (props: CSVPreviewProps) => {
2727
return (
2828
<div className="w-full flex flex-col p-2 border-lightest border-2 rounded-md">
2929
<h2 className="text-center text-2xl font-bold text-light">CSV Preview</h2>
30-
<div className="w-full overflow-x-auto">
30+
<div className="w-full overflow-x-auto max-h-[500px]">
3131
<table className="table-fixed w-full text-lg">
3232
<tbody>
3333
{csvData.map((row, index) => (

‎client/src/components/admin/UploadCSVForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ const UploadCSVForm = (props: UploadCSVFormProps) => {
147147
</label>
148148
</div>
149149
{file && (
150-
<div className="flex w-full h-11 px-4 text-2xl border-2 border-lightest rounded-md text-start items-center">
150+
<div className="flex w-full px-4 py-2 md:text-xl text-md border-2 border-lightest rounded-md text-start items-center">
151151
File Chosen: {fileName}
152152
</div>
153153
)}

‎client/src/components/admin/tables/JudgeRow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ const JudgeRow = ({ judge, idx }: JudgeRowProps) => {
111111
setMovePopup.bind(null, true),
112112
setDeletePopup.bind(null, true),
113113
]}
114-
redIndices={[3]}
114+
redIndices={[4]}
115115
/>
116116
<span
117117
className="cursor-pointer px-1 hover:text-primary duration-150"

‎client/src/components/admin/tables/ProjectRow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ const ProjectRow = ({ project, idx }: ProjectRowProps) => {
150150
project.active ? 'Hide' : 'Unhide',
151151
project.prioritized ? 'Unprioritize' : 'Prioritize',
152152
'Move Table',
153-
'Move Groups',
153+
'Move Group',
154154
'Delete',
155155
]}
156156
actionFunctions={[

‎client/src/pages/Expo.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const Expo = () => {
1414
const [nameSort, setNameSort] = useState(false);
1515
const [track, setTrack] = useState('');
1616
const [challenges, setChallenges] = useState<string[]>([]);
17-
const [groupNames, setGroupNames] = useState<string[]>([]);
17+
const [groupInfo, setGroupInfo] = useState<GroupInfo>({ enabled: false, names: [] });
1818
const [searchParams, _] = useSearchParams();
1919
const navigate = useNavigate();
2020

@@ -36,12 +36,13 @@ const Expo = () => {
3636
return;
3737
}
3838

39-
const groupRes = await getRequest<string[]>('/group-names', '');
39+
const groupRes = await getRequest<GroupInfo>('/group-info', '');
4040
if (groupRes.status !== 200) {
4141
errorAlert(groupRes);
4242
return;
4343
}
44-
setGroupNames(groupRes.data as string[]);
44+
const gi = groupRes.data as GroupInfo;
45+
setGroupInfo({ enabled: gi.enabled && gi.names.length > 0, names: gi.names });
4546

4647
setChallenges(['', ...(res.data as string[])]);
4748
}
@@ -86,15 +87,17 @@ const Expo = () => {
8687
<table className="table-fixed">
8788
<thead className="text-left">
8889
<tr>
89-
<th className="pr-2">Group</th>
90+
{groupInfo.enabled && <th className="pr-2">Group</th>}
9091
<th className="pr-2">Table</th>
9192
<th className="pr-2">Name</th>
9293
</tr>
9394
</thead>
9495
<tbody>
9596
{projects.map((project, idx) => (
9697
<tr key={idx}>
97-
<td className="pr-2">{groupNames[project.group]}</td>
98+
{groupInfo.enabled && (
99+
<td className="pr-2">{groupInfo.names[project.group]}</td>
100+
)}
98101
<td className="pr-2">{project.location}</td>
99102
<td className="pr-2">{project.name}</td>
100103
</tr>
@@ -128,7 +131,7 @@ const Expo = () => {
128131
navigate('/expo/' + t.replace(/\s/g, '%20'));
129132
}}
130133
options={challenges ?? []}
131-
className="my-2"
134+
className="my-2 md:mx-0 mx-4"
132135
/>
133136
<h3 className="text-center font-bold text-lighter text-2xl">
134137
Count: {projects.length}
@@ -142,8 +145,8 @@ const Expo = () => {
142145
Print this page
143146
</Button>
144147
</div>
145-
<table className="mb-4">
146-
<thead>
148+
<table className="mb-4 table-fixed w-full">
149+
<thead className="w-full">
147150
<tr>
148151
<th
149152
onClick={() => setNameSort(true)}
@@ -157,12 +160,13 @@ const Expo = () => {
157160
<th
158161
onClick={() => setNameSort(false)}
159162
className={
160-
'px-4 py-2 cursor-pointer text-left ' +
163+
'px-4 py-2 cursor-pointer text-left w-12 ' +
161164
(!nameSort && 'underline')
162165
}
163166
>
164167
Table
165168
</th>
169+
{groupInfo.enabled && <th className="px-4 py-2 text-left w-32">Group</th>}
166170
</tr>
167171
</thead>
168172
<tbody>
@@ -179,6 +183,9 @@ const Expo = () => {
179183
</a>
180184
</td>
181185
<td className="px-4 py-2">{project.location}</td>
186+
{groupInfo.enabled && (
187+
<td className="px-4 py-2">{groupInfo.names[project.group]}</td>
188+
)}
182189
</tr>
183190
))}
184191
</tbody>

‎client/src/types.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,3 +197,8 @@ interface ResetPopup {
197197
text: string;
198198
handler: null | (() => void);
199199
}
200+
201+
interface GroupInfo {
202+
names: string[];
203+
enabled: boolean;
204+
}

‎server/router/admin.go‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -695,6 +695,13 @@ func SetDeliberation(ctx *gin.Context) {
695695
return
696696
}
697697

698+
// Also pause judging if deliberation has started
699+
if req.Start {
700+
state.Clock.Mutex.Lock()
701+
state.Clock.State.Pause()
702+
state.Clock.Mutex.Unlock()
703+
}
704+
698705
// Send OK
699706
hap := "Started"
700707
if !req.Start {
@@ -704,8 +711,8 @@ func SetDeliberation(ctx *gin.Context) {
704711
ctx.JSON(http.StatusOK, gin.H{"ok": 1})
705712
}
706713

707-
// GET /group-names - GetGroupNames returns the names of the groups
708-
func GetGroupNames(ctx *gin.Context) {
714+
// GET /group-info - GetGroupInfo returns the names of the groups and if groups are enabled
715+
func GetGroupInfo(ctx *gin.Context) {
709716
// Get the state from the context
710717
state := GetState(ctx)
711718

@@ -717,7 +724,10 @@ func GetGroupNames(ctx *gin.Context) {
717724
}
718725

719726
// Send OK
720-
ctx.JSON(http.StatusOK, options.GroupNames)
727+
ctx.JSON(http.StatusOK, gin.H{
728+
"names": options.GroupNames,
729+
"enabled": options.MultiGroup,
730+
})
721731
}
722732

723733
// POST /admin/block-reqs - blocks or unblocks login requests

‎server/router/init.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ func NewRouter(db *mongo.Database, logger *logging.Logger) *gin.Engine {
170170
// Project expo routes
171171
defaultRouter.GET("/project/list/public", ListPublicProjects)
172172
defaultRouter.GET("/challenges", GetChallenges)
173-
defaultRouter.GET("/group-names", GetGroupNames)
173+
defaultRouter.GET("/group-info", GetGroupInfo)
174174

175175
// ######################
176176
// ##### END ROUTES #####

0 commit comments

Comments
 (0)