diff --git a/app/views/registrations/index.html.erb b/app/views/registrations/index.html.erb index 055bb0fc9b5..50873c5b899 100644 --- a/app/views/registrations/index.html.erb +++ b/app/views/registrations/index.html.erb @@ -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 %> diff --git a/app/webpacker/components/RegistrationsV2/Registrations/RegistrationList.jsx b/app/webpacker/components/RegistrationsV2/Registrations/RegistrationList.jsx index ec570b7b58f..247a047d101 100644 --- a/app/webpacker/components/RegistrationsV2/Registrations/RegistrationList.jsx +++ b/app/webpacker/components/RegistrationsV2/Registrations/RegistrationList.jsx @@ -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 { @@ -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), @@ -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 ( @@ -127,6 +133,31 @@ export default function RegistrationList({ competitionInfo }) { eventList={competitionInfo.event_ids} selectedEvents={[psychSheetEvent].filter(Boolean)} /> + {userIsInTable && ( + + {userPosition && ( + I18n.t( + 'competitions.registration_v2.list.psychsheets.your_rank', + { psychSheetSortBy, userPosition }, + ) + )} + {!userPosition && isPsychSheet && ( + I18n.t( + 'competitions.registration_v2.list.psychsheets.no_result', + { psychSheetSortBy }, + ) + )} + {' '} + + + )} @@ -195,66 +226,74 @@ export default function RegistrationList({ competitionInfo }) { {data.length > 0 ? ( - data.map((registration) => ( - - {isPsychSheet && ( - - {registration.pos} - - )} - - {registration.user.wca_id ? ( - { + const isUser = registration.user_id === userInfo?.id + return ( + + {isPsychSheet && ( + - {registration.user.name} - - ) : ( - registration.user.name - )} - - - - {countries.byIso2[registration.user.country.iso2].name} - - {isAllCompetitors ? ( - <> - {competitionInfo.event_ids.map((id) => ( - - {registration.competing.event_ids.includes(id) ? ( - - ) : null} - - ))} - - {registration.competing.event_ids.length} + {registration.pos} - - ) : ( - <> - - {psychSheetSortBy === 'single' - ? registration.single_rank - : registration.average_rank} - - - {formatAttemptResult(registration.single_best, psychSheetEvent)} - - - {formatAttemptResult(registration.average_best, psychSheetEvent)} + )} + +
+ {registration.user.wca_id ? ( + + {registration.user.name} + + ) : ( + registration.user.name + )} +
- - )} -
- )) + + + {countries.byIso2[registration.user.country.iso2].name} + + {isAllCompetitors ? ( + <> + {competitionInfo.event_ids.map((id) => ( + + {registration.competing.event_ids.includes(id) ? ( + + ) : null} + + ))} + + {registration.competing.event_ids.length} + + + ) : ( + <> + + {psychSheetSortBy === 'single' + ? registration.single_rank + : registration.average_rank} + + + {formatAttemptResult(registration.single_best, psychSheetEvent)} + + + {formatAttemptResult(registration.average_best, psychSheetEvent)} + + + )} + + ) + }) ) : ( ); diff --git a/app/webpacker/stylesheets/override.scss b/app/webpacker/stylesheets/override.scss index 7b7554693d9..d4f989c5c0d 100644 --- a/app/webpacker/stylesheets/override.scss +++ b/app/webpacker/stylesheets/override.scss @@ -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; + } + } } diff --git a/config/locales/en.yml b/config/locales/en.yml index ea87638cc09..fa067acd418 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -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"