diff --git a/src/components/specific_challenge/Leaderboard/Leaderboard.js b/src/components/specific_challenge/Leaderboard/Leaderboard.js index 8a67b25..8ffb2c6 100644 --- a/src/components/specific_challenge/Leaderboard/Leaderboard.js +++ b/src/components/specific_challenge/Leaderboard/Leaderboard.js @@ -11,7 +11,6 @@ import { CALC_PAGES, EVALUATIONS_FORMAT, RENDER_WHEN, - } from '../../../utils/globals'; import Search from '../../generic/Search'; import Pager from '../../generic/Pager'; @@ -23,6 +22,7 @@ const Leaderboard = (props) => { const [pageNr, setPageNr] = React.useState(1); const [loading, setLoading] = React.useState(true); const [submitterSorted, setSubmitterSorted] = React.useState(false); + const [descriptionSorted, setDescriptionSorted] = React.useState(false); const [entriesSorted, setEntriesSorted] = React.useState(false); const [whenSorted, setWhenSorted] = React.useState(false); const [scoresSorted, setScoresSorted] = React.useState([]); @@ -65,7 +65,7 @@ const Leaderboard = (props) => { }; const getLeaderboardHeader = () => { - let header = ['#', 'submitter']; + let header = ['#', 'submitter', 'description']; for (let metric of getPossibleMetrics()) { header.push(metric); } @@ -75,7 +75,7 @@ const Leaderboard = (props) => { }; const getLeaderboardHeaderMobile = () => { - let header = ['#', 'submitter', 'entries', 'when']; + let header = ['#', 'submitter', 'description', 'entries', 'when']; for (let metric of getPossibleMetrics()) { header.push(metric); } @@ -107,6 +107,27 @@ const Leaderboard = (props) => { setSubmitterSorted(true); } break; + case 'description': + if (descriptionSorted) { + newEntries = newEntries.sort((a, b) => + a.description.toLowerCase() < b.description.toLowerCase() + ? 1 + : b.description.toLowerCase() < a.description.toLowerCase() + ? -1 + : 0 + ); + setDescriptionSorted(false); + } else { + newEntries = newEntries.sort((a, b) => + a.description.toLowerCase() > b.description.toLowerCase() + ? 1 + : b.description.toLowerCase() > a.description.toLowerCase() + ? -1 + : 0 + ); + setDescriptionSorted(true); + } + break; case 'entries': if (entriesSorted) { newEntries = newEntries.sort((a, b) => b.times - a.times); @@ -170,7 +191,7 @@ const Leaderboard = (props) => { tableType="leaderboard" gridTemplateColumns={ entries[0] - ? '1fr 3fr ' + + ? '1fr 2fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : '' @@ -179,6 +200,7 @@ const Leaderboard = (props) => { staticColumnElements={[ { name: 'id', format: null, order: 1, align: 'left' }, { name: 'submitter', format: null, order: 2, align: 'left' }, + { name: 'description', format: null, order: 3, align: 'left' }, { name: 'times', format: null, order: 4, align: 'left' }, { name: 'when', format: RENDER_WHEN, order: 5, align: 'right' }, ]} @@ -224,7 +246,7 @@ const Leaderboard = (props) => { headerElements={getLeaderboardHeader()} gridTemplateColumns={ entries[0] - ? '1fr 3fr ' + + ? '1fr 2fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : '' @@ -233,6 +255,7 @@ const Leaderboard = (props) => { staticColumnElements={[ { name: 'id', format: null, order: 1, align: 'left' }, { name: 'submitter', format: null, order: 2, align: 'left' }, + { name: 'description', format: null, order: 3, align: 'left' }, { name: 'times', format: null, order: 4, align: 'left' }, { name: 'when', format: RENDER_WHEN, order: 5, align: 'right' }, ]} @@ -255,7 +278,6 @@ const Leaderboard = (props) => { width="72px" borderRadius="64px" pages={CALC_PAGES(entries, 2)} - number={`${pageNr} / ${CALC_PAGES(entries, 2)}`} />