sort columns in New Table complete
This commit is contained in:
parent
3fcd4b4154
commit
098e865e91
@ -38,7 +38,7 @@ const getAllEntries = (
|
||||
...item,
|
||||
evaluations: {
|
||||
...item.evaluations,
|
||||
[`${test.metric}.${test.name}`]: 'N/A',
|
||||
[`${test.metric}.${test.name}`]: -999999999,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
@ -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">
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
})}
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user