sort columns in New Table complete

This commit is contained in:
Mateusz Tylka 2023-06-09 12:42:19 +02:00
parent 3fcd4b4154
commit 098e865e91
7 changed files with 124 additions and 18 deletions

View File

@ -38,7 +38,7 @@ const getAllEntries = (
...item,
evaluations: {
...item.evaluations,
[`${test.metric}.${test.name}`]: 'N/A',
[`${test.metric}.${test.name}`]: -999999999,
},
};
}

View File

@ -9,10 +9,17 @@ import TableRowTags from './components/TableRowTags';
import TableRowItems from './components/TableRowItems';
import TableRowButtons from './components/TableRowButtons';
const NewTable = ({ items, orderedKeys }) => {
const NewTable = ({ items, orderedKeys, sortByUpdate }) => {
const [, updateState] = React.useState();
const tableUpdate = React.useCallback(() => updateState({}), []);
return (
<NewTableStyle>
<TableHeader orderedKeys={orderedKeys} />
<TableHeader
orderedKeys={orderedKeys}
sortByUpdate={sortByUpdate}
tableUpdate={tableUpdate}
/>
{items.map((item, i) => {
return (
<tr key={`table-row-${i}`} className="NewTableStyle__tr">

View File

@ -16,11 +16,9 @@ const NewTablePageTest = (props) => {
const [entries, setEntries] = React.useState([]);
const [pageNr, setPageNr] = React.useState(1);
const [loading, setLoading] = React.useState(true);
// eslint-disable-next-line
const [idSorted, setIdSorted] = React.useState([]);
const [scoresSorted, setScoresSorted] = React.useState([]);
// eslint-disable-next-line
const [submitterSorted, setSubmitterSorted] = React.useState(false);
// eslint-disable-next-line
const [whenSorted, setWhenSorted] = React.useState(false);
React.useEffect(() => {
@ -38,6 +36,80 @@ const NewTablePageTest = (props) => {
);
};
const sortByUpdate = (elem) => {
let newEntries = entries.slice();
const possibleMetrics = orderKeys(entries[0]).filter(
(key) => !['id', 'submitter', 'when'].includes(key)
);
let metricIndex = possibleMetrics.indexOf(elem);
let newScoresSorted = scoresSorted.slice();
switch (elem) {
case 'id':
if (idSorted) {
setIdSorted(false);
newEntries = newEntries.sort((a, b) =>
a.id > b.id ? 1 : b.id > a.id ? -1 : 0
);
} else {
setIdSorted(true);
newEntries = newEntries.sort((a, b) =>
a.id < b.id ? 1 : b.id < a.id ? -1 : 0
);
}
break;
case 'submitter':
if (submitterSorted) {
setSubmitterSorted(false);
newEntries = newEntries.sort((a, b) =>
a.submitter.toLowerCase() < b.submitter.toLowerCase()
? 1
: b.submitter.toLowerCase() < a.submitter.toLowerCase()
? -1
: 0
);
} else {
setSubmitterSorted(true);
newEntries = newEntries.sort((a, b) =>
a.submitter.toLowerCase() > b.submitter.toLowerCase()
? 1
: b.submitter.toLowerCase() > a.submitter.toLowerCase()
? -1
: 0
);
}
break;
case 'when':
if (whenSorted) {
setWhenSorted(false);
newEntries = newEntries.sort((a, b) =>
a.when < b.when ? 1 : b.when < a.when ? -1 : 0
);
} else {
setWhenSorted(true);
newEntries = newEntries.sort((a, b) =>
a.when > b.when ? 1 : b.when > a.when ? -1 : 0
);
}
break;
default:
if (scoresSorted[metricIndex]) {
newEntries = newEntries.sort(
(a, b) => (b ? b[elem] : -1) - (a ? a[elem] : -1)
);
newScoresSorted[metricIndex] = false;
setScoresSorted(newScoresSorted);
} else {
newEntries = newEntries.sort(
(a, b) => (a ? a[elem] : -1) - (b ? b[elem] : -1)
);
newScoresSorted[metricIndex] = true;
setScoresSorted(newScoresSorted);
}
break;
}
setEntries(newEntries);
};
const orderKeys = (elem) => {
if (elem) {
let result = ['id', 'submitter'];
@ -79,7 +151,11 @@ const NewTablePageTest = (props) => {
}
/>
{elements.length > 0 && entries[0] && (
<NewTable items={elements} orderedKeys={orderKeys(entries[0])} />
<NewTable
items={elements}
orderedKeys={orderKeys(entries[0])}
sortByUpdate={sortByUpdate}
/>
)}
<Pager
pageNr={pageNr}

View File

@ -4,14 +4,35 @@ import ColumnFilterIcon from '../../../../components/generic/ColumnFilterIcon';
import { FlexRow } from '../../../../utils/containers';
const TableHeader = (props) => {
const [activeIcon, setActiveIcon] = React.useState(null);
const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false);
return (
<tr className="NewTableStyle__tr-header">
{props.orderedKeys.map((keyValue, i) => {
return (
<th key={`table-header-${i}`} className="NewTableStyle__th">
<th
key={`table-header-${i}`}
className="NewTableStyle__th"
onClick={() => {
if (activeIcon === i) {
let newRotateActiveIcon = !rotateActiveIcon;
setRotateActiveIcon(newRotateActiveIcon);
} else {
setRotateActiveIcon(false);
}
setActiveIcon(i);
props.sortByUpdate(keyValue);
props.tableUpdate();
}}
>
{keyValue}
<SortButtonContainerStyle as="span" column={keyValue}>
<ColumnFilterIcon index={1} active={2} rotateIcon={false} />
<ColumnFilterIcon
index={i}
active={activeIcon}
rotateIcon={rotateActiveIcon}
/>
</SortButtonContainerStyle>
</th>
);

View File

@ -1,5 +1,5 @@
import React from 'react';
import { RENDER_WHEN } from '../../../../utils/globals';
import { RENDER_WHEN, RENDER_METRIC_VALUE } from '../../../../utils/globals';
const TableRowItems = ({ orderedKeys, item, i }) => {
return (
@ -7,7 +7,9 @@ const TableRowItems = ({ orderedKeys, item, i }) => {
{orderedKeys.map((keyValue, j) => {
return (
<td key={`table-item-${i}-${j}`} className="NewTableStyle__td">
{keyValue === 'when' ? RENDER_WHEN(item[keyValue]) : item[keyValue]}
{keyValue === 'when'
? RENDER_WHEN(item[keyValue])
: RENDER_METRIC_VALUE(item[keyValue])}
</td>
);
})}

View File

@ -1,16 +1,10 @@
import styled from 'styled-components';
import { FlexRow } from '../../../utils/containers';
const getRightAttribute = (column) => {
const staticColumns = ['id', 'when'];
if (staticColumns.includes(column)) return '32%';
return '16%';
};
const SortButtonContainerStyle = styled(FlexRow)`
position: absolute;
top: 15px;
right: ${({ column }) => getRightAttribute(column)};
right: 16%;
`;
export default SortButtonContainerStyle;

View File

@ -111,6 +111,11 @@ const RENDER_WHEN = (when) => {
return `${when.slice(0, 10)} ${when.slice(11, 16)}`;
};
const RENDER_METRIC_VALUE = (value) => {
if (value <= -999999999) return 'N/A';
else return value;
};
const EVALUATIONS_FORMAT = (evaluate) => {
if (Object.hasOwn(evaluate, 'score')) return evaluate.score.slice(0, 7);
return evaluate.slice(0, 7);
@ -146,6 +151,7 @@ export {
RENDER_ICO,
CALC_PAGES,
RENDER_DEADLINE_TIME,
RENDER_METRIC_VALUE,
IS_MOBILE,
RENDER_WHEN,
EVALUATIONS_FORMAT,