From 098e865e9105d2867572fc96b146cb34a9c87172 Mon Sep 17 00:00:00 2001 From: Mateusz Tylka Date: Fri, 9 Jun 2023 12:42:19 +0200 Subject: [PATCH] sort columns in New Table complete --- src/api/getAllEntries.js | 2 +- src/pages/NewTable/NewTable.js | 11 ++- src/pages/NewTable/NewTablePageTest.js | 84 ++++++++++++++++++- .../components/TableHeader/TableHeader.js | 25 +++++- .../components/TableRowItems/TableRowItems.js | 6 +- .../styles/SortButtonContainerStyle.js | 8 +- src/utils/globals.js | 6 ++ 7 files changed, 124 insertions(+), 18 deletions(-) diff --git a/src/api/getAllEntries.js b/src/api/getAllEntries.js index b26cf50..ff3582b 100644 --- a/src/api/getAllEntries.js +++ b/src/api/getAllEntries.js @@ -38,7 +38,7 @@ const getAllEntries = ( ...item, evaluations: { ...item.evaluations, - [`${test.metric}.${test.name}`]: 'N/A', + [`${test.metric}.${test.name}`]: -999999999, }, }; } diff --git a/src/pages/NewTable/NewTable.js b/src/pages/NewTable/NewTable.js index 53feb80..8ef4348 100644 --- a/src/pages/NewTable/NewTable.js +++ b/src/pages/NewTable/NewTable.js @@ -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 ( - + {items.map((item, i) => { return ( diff --git a/src/pages/NewTable/NewTablePageTest.js b/src/pages/NewTable/NewTablePageTest.js index 9af3590..247eaa4 100644 --- a/src/pages/NewTable/NewTablePageTest.js +++ b/src/pages/NewTable/NewTablePageTest.js @@ -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] && ( - + )} { + const [activeIcon, setActiveIcon] = React.useState(null); + const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false); + return ( {props.orderedKeys.map((keyValue, i) => { return ( - + { + if (activeIcon === i) { + let newRotateActiveIcon = !rotateActiveIcon; + setRotateActiveIcon(newRotateActiveIcon); + } else { + setRotateActiveIcon(false); + } + setActiveIcon(i); + props.sortByUpdate(keyValue); + props.tableUpdate(); + }} + > {keyValue} - + ); diff --git a/src/pages/NewTable/components/TableRowItems/TableRowItems.js b/src/pages/NewTable/components/TableRowItems/TableRowItems.js index ed0ae80..94cce8e 100644 --- a/src/pages/NewTable/components/TableRowItems/TableRowItems.js +++ b/src/pages/NewTable/components/TableRowItems/TableRowItems.js @@ -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 ( - {keyValue === 'when' ? RENDER_WHEN(item[keyValue]) : item[keyValue]} + {keyValue === 'when' + ? RENDER_WHEN(item[keyValue]) + : RENDER_METRIC_VALUE(item[keyValue])} ); })} diff --git a/src/pages/NewTable/styles/SortButtonContainerStyle.js b/src/pages/NewTable/styles/SortButtonContainerStyle.js index 552edb4..32cc82a 100644 --- a/src/pages/NewTable/styles/SortButtonContainerStyle.js +++ b/src/pages/NewTable/styles/SortButtonContainerStyle.js @@ -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; diff --git a/src/utils/globals.js b/src/utils/globals.js index 404368b..d6a7513 100644 --- a/src/utils/globals.js +++ b/src/utils/globals.js @@ -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,