Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Psych sheet current user highlight/info/scroll #10625

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Psych sheet current user highlight/info/scroll #10625

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7348d9c
Provide userInfo to RegistrationList
kr-matthews Jan 14, 2025
8213272
Add user message & scroll to
kr-matthews Jan 15, 2025
18c1902
I18n
kr-matthews Jan 15, 2025
a631f99
Add Bootstrap CSS override for 'active' tr in SemUI
gregorbg Jan 15, 2025
00ea457
Use Table.Row active prop
kr-matthews Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/views/registrations/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<% provide(:title, I18n.t('registrations.list.title', comp: @competition.name)) %>

<%= render layout: "nav" do %>
<%= react_component('RegistrationsV2/Registrations', { competitionInfo: @competition.to_competition_info }) %>
<%= react_component('RegistrationsV2/Registrations', { competitionInfo: @competition.to_competition_info, userInfo: @current_user }) %>
<% end %>
157 changes: 98 additions & 59 deletions app/webpacker/components/RegistrationsV2/Registrations/RegistrationList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import { useQuery } from '@tanstack/react-query';
import React, {
useMemo,
useReducer,
useRef,
useState,
} from 'react';
import {
Flag, Icon, Segment, Table,
Button, Flag, Icon, Message, Segment, Table,
} from 'semantic-ui-react';
import _ from 'lodash';
import {
Expand All @@ -24,7 +25,7 @@ import { EventSelector } from '../../wca/EventSelector';

const sortReducer = createSortReducer(['name', 'country', 'total']);

export default function RegistrationList({ competitionInfo }) {
export default function RegistrationList({ competitionInfo, userInfo }) {
const { isLoading: registrationsLoading, data: registrations, isError } = useQuery({
queryKey: ['registrations', competitionInfo.id],
queryFn: () => getConfirmedRegistrations(competitionInfo),
Expand Down Expand Up @@ -101,6 +102,11 @@ export default function RegistrationList({ competitionInfo }) {
return [];
}, [isAllCompetitors, registrationsWithPsychSheet, sortColumn, sortDirection]);

const userRegistration = data?.find((row) => row.user_id === userInfo?.id);
const userIsInTable = Boolean(userRegistration)
const userPosition = userRegistration?.pos
const userRowRef = useRef()

if (isError) {
return (
<Errored componentName="RegistrationList" />
Expand All @@ -127,6 +133,31 @@ export default function RegistrationList({ competitionInfo }) {
eventList={competitionInfo.event_ids}
selectedEvents={[psychSheetEvent].filter(Boolean)}
/>
{userIsInTable && (
<Message>
{userPosition && (
I18n.t(
'competitions.registration_v2.list.psychsheets.your_rank',
{ psychSheetSortBy, userPosition },
)
)}
{!userPosition && isPsychSheet && (
I18n.t(
'competitions.registration_v2.list.psychsheets.no_result',
{ psychSheetSortBy },
)
)}
{' '}
<Button
size="mini"
onClick={
() => userRowRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })
}
>
{I18n.t('competitions.registration_v2.list.psychsheets.scroll_to_me')}
</Button>
</Message>
)}
<Table striped sortable unstackable compact singleLine textAlign="left">
<Table.Header>
<Table.Row>
Expand Down Expand Up @@ -195,66 +226,74 @@ export default function RegistrationList({ competitionInfo }) {
</Table.Header>
<Table.Body>
{data.length > 0 ? (
data.map((registration) => (
<Table.Row key={`registration-table-row-${registration.user.id}`}>
{isPsychSheet && (
<Table.Cell
collapsing
textAlign="right"
disabled={registration.tied_previous}
>
{registration.pos}
</Table.Cell>
)}
<Table.Cell>
{registration.user.wca_id ? (
<a
href={personUrl(registration.user.wca_id)}
data.map((registration) => {
const isUser = registration.user_id === userInfo?.id
return (
<Table.Row
key={`registration-table-row-${registration.user.id}`}
active={isUser}
>
{isPsychSheet && (
<Table.Cell
collapsing
textAlign="right"
disabled={registration.tied_previous}
>
{registration.user.name}
</a>
) : (
registration.user.name
)}
</Table.Cell>
<Table.Cell>
<Flag
name={registration.user.country.iso2.toLowerCase()}
/>
{countries.byIso2[registration.user.country.iso2].name}
</Table.Cell>
{isAllCompetitors ? (
<>
{competitionInfo.event_ids.map((id) => (
<Table.Cell
key={`registration-table-row-${registration.user.id}-${id}`}
>
{registration.competing.event_ids.includes(id) ? (
<EventIcon id={id} size="1em" hoverable={false} />
) : null}
</Table.Cell>
))}
<Table.Cell>
{registration.competing.event_ids.length}
{registration.pos}
</Table.Cell>
</>
) : (
<>
<Table.Cell>
{psychSheetSortBy === 'single'
? registration.single_rank
: registration.average_rank}
</Table.Cell>
<Table.Cell>
{formatAttemptResult(registration.single_best, psychSheetEvent)}
</Table.Cell>
<Table.Cell>
{formatAttemptResult(registration.average_best, psychSheetEvent)}
)}
<Table.Cell>
<div ref={isUser ? userRowRef : undefined}>
{registration.user.wca_id ? (
<a
href={personUrl(registration.user.wca_id)}
>
{registration.user.name}
</a>
) : (
registration.user.name
)}
</div>
</Table.Cell>
</>
)}
</Table.Row>
))
<Table.Cell>
<Flag
name={registration.user.country.iso2.toLowerCase()}
/>
{countries.byIso2[registration.user.country.iso2].name}
</Table.Cell>
{isAllCompetitors ? (
<>
{competitionInfo.event_ids.map((id) => (
<Table.Cell
key={`registration-table-row-${registration.user.id}-${id}`}
>
{registration.competing.event_ids.includes(id) ? (
<EventIcon id={id} size="1em" hoverable={false} />
) : null}
</Table.Cell>
))}
<Table.Cell>
{registration.competing.event_ids.length}
</Table.Cell>
</>
) : (
<>
<Table.Cell>
{psychSheetSortBy === 'single'
? registration.single_rank
: registration.average_rank}
</Table.Cell>
<Table.Cell>
{formatAttemptResult(registration.single_best, psychSheetEvent)}
</Table.Cell>
<Table.Cell>
{formatAttemptResult(registration.average_best, psychSheetEvent)}
</Table.Cell>
</>
)}
</Table.Row>
)
})
) : (
<Table.Row>
<Table.Cell
Expand Down
3 changes: 2 additions & 1 deletion app/webpacker/components/RegistrationsV2/Registrations/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@ import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import RegistrationList from './RegistrationList';

export default function Index({ competitionInfo }) {
export default function Index({ competitionInfo, userInfo }) {
return (
<QueryClientProvider client={new QueryClient()}>
<RegistrationList
competitionInfo={competitionInfo}
userInfo={userInfo}
/>
</QueryClientProvider>
);
Expand Down
11 changes: 11 additions & 0 deletions app/webpacker/stylesheets/override.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,4 +104,15 @@ body, html {
.ui.radio.checkbox {
margin: 1.5px 0px;
}

// This overrides the Bootstrap table row color for the `active` property
// for the SemUI `active` property.
.ui.table > tbody > tr {
> td.active,
> th.active,
&.active > td,
&.active > th {
background-color: #e0e0e0 !important;
}
}
}
4 changes: 3 additions & 1 deletion config/locales/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1845,7 +1845,9 @@ en:
initialized: "Payment process was started on %{date}, but not finished."
refunded: "Payment was refunded on %{date}."
psychsheets:
go_back: "Go Back"
scroll_to_me: "Scroll to me"
your_rank: "Your rank by %{psychSheetSortBy} is %{userPosition}."
no_result: "You do not have an official %{psychSheetSortBy}."
timestamp: "Timestamp"
comment_and_note: "Comment & Note"
edit_waiting_list: "Enable Waiting List Edit Mode"
Expand Down
Loading