From 5a968ff0268be828c20e68800529e4fa9f18b626 Mon Sep 17 00:00:00 2001 From: Mateusz Tylka Date: Fri, 9 Jun 2023 11:10:41 +0200 Subject: [PATCH] new table structure complete --- src/api/getAllEntries.js | 26 ++-- src/api/getMyEntries.js | 4 +- src/components/generic/Pager.js | 4 +- src/components/generic/Table/Table.js | 2 +- src/pages/NewTable/NewTable.js | 70 +++------- src/pages/NewTable/NewTablePageTest.js | 121 ++++++++++++------ .../components/TableHeader/TableHeader.js | 24 ++++ .../NewTable/components/TableHeader/index.js | 1 + .../TableRowButtons/TableRowButtons.js | 26 ++++ .../components/TableRowButtons/index.js | 1 + .../components/TableRowItems/TableRowItems.js | 17 +++ .../components/TableRowItems/index.js | 1 + .../components/TableRowTags/TableRowTags.js | 12 ++ .../NewTable/components/TableRowTags/index.js | 1 + .../components/TableRowTags/renderTags.js | 18 +++ 15 files changed, 217 insertions(+), 111 deletions(-) create mode 100644 src/pages/NewTable/components/TableHeader/TableHeader.js create mode 100644 src/pages/NewTable/components/TableHeader/index.js create mode 100644 src/pages/NewTable/components/TableRowButtons/TableRowButtons.js create mode 100644 src/pages/NewTable/components/TableRowButtons/index.js create mode 100644 src/pages/NewTable/components/TableRowItems/TableRowItems.js create mode 100644 src/pages/NewTable/components/TableRowItems/index.js create mode 100644 src/pages/NewTable/components/TableRowTags/TableRowTags.js create mode 100644 src/pages/NewTable/components/TableRowTags/index.js create mode 100644 src/pages/NewTable/components/TableRowTags/renderTags.js diff --git a/src/api/getAllEntries.js b/src/api/getAllEntries.js index 73573f8..b26cf50 100644 --- a/src/api/getAllEntries.js +++ b/src/api/getAllEntries.js @@ -30,25 +30,25 @@ const getAllEntries = ( }; } for (let test of tests) { - if (item.evaluations) { - if ( - !Object.hasOwn(item.evaluations, `${test.metric}.${test.name}`) - ) { - item = { - ...item, - evaluations: { - ...item.evaluations, - [`${test.metric}.${test.name}`]: '-1', - }, - }; - } + if (!item.evaluations) { + item.evaluations = {}; + } + if (!Object.hasOwn(item.evaluations, `${test.metric}.${test.name}`)) { + item = { + ...item, + evaluations: { + ...item.evaluations, + [`${test.metric}.${test.name}`]: 'N/A', + }, + }; } } item = { - ...item, + ...item.evaluations, id: submission.id, submitter: submission.submitter, when: submission.when, + tags: submission.tags, }; result.push(item); item = {}; diff --git a/src/api/getMyEntries.js b/src/api/getMyEntries.js index e88ffe4..0a8e05e 100644 --- a/src/api/getMyEntries.js +++ b/src/api/getMyEntries.js @@ -39,14 +39,14 @@ const getMyEntries = ( ...item, evaluations: { ...item.evaluations, - [`${test.metric}.${test.name}`]: '-1', + [`${test.metric}.${test.name}`]: '_', }, }; } } } item = { - ...item, + ...item.evaluations, id: submission.id, submitter: submission.submitter, when: submission.when, diff --git a/src/components/generic/Pager.js b/src/components/generic/Pager.js index 7a5b0d0..bcdeeea 100644 --- a/src/components/generic/Pager.js +++ b/src/components/generic/Pager.js @@ -63,7 +63,7 @@ const Pager = (props) => { as="a" href="#start" src={polygon} - onClick={() => PREVIOUS_PAGE(props.pageNr, props.setPage)} + onClick={() => PREVIOUS_PAGE(props.pageNr, props.setPageNr)} size="cover" backgroundColor={leftArrowVisible()} /> @@ -76,7 +76,7 @@ const Pager = (props) => { as="a" href="#start" src={polygon} - onClick={() => NEXT_PAGE(props.elements, props.pageNr, props.setPage)} + onClick={() => NEXT_PAGE(props.elements, props.pageNr, props.setPageNr)} size="cover" backgroundColor={rightArrowVisible()} /> diff --git a/src/components/generic/Table/Table.js b/src/components/generic/Table/Table.js index 9a11cca..1cc743d 100644 --- a/src/components/generic/Table/Table.js +++ b/src/components/generic/Table/Table.js @@ -29,7 +29,7 @@ const Table = (props) => { let newElem = []; for (let metric of props.possibleMetrics) { if (Object.hasOwn(elem, props.iterableColumnElement.name)) { - if (elem[props.iterableColumnElement.name][metric] === '-1') + if (elem[props.iterableColumnElement.name][metric] === '_') newElem.push('N/A'); else newElem.push(elem[props.iterableColumnElement.name][metric]); } else { diff --git a/src/pages/NewTable/NewTable.js b/src/pages/NewTable/NewTable.js index cca00ae..53feb80 100644 --- a/src/pages/NewTable/NewTable.js +++ b/src/pages/NewTable/NewTable.js @@ -1,70 +1,30 @@ import React from 'react'; -import { FlexRow, Svg } from '../../utils/containers'; -import theme from '../../utils/theme'; -import ColumnFilterIcon from '../../components/generic/ColumnFilterIcon'; +import { FlexRow } from '../../utils/containers'; import pensilIco from '../../assets/pencil_ico.svg'; import deleteIco from '../../assets/delete_ico.svg'; import NewTableStyle from './styles/NewTableStyle'; import RowsBackgroundStyle from './styles/RowsBackgroundStyle'; -import SortButtonContainerStyle from './styles/SortButtonContainerStyle'; +import TableHeader from './components/TableHeader'; +import TableRowTags from './components/TableRowTags'; +import TableRowItems from './components/TableRowItems'; +import TableRowButtons from './components/TableRowButtons'; const NewTable = ({ items, orderedKeys }) => { return ( - - {orderedKeys.map((keyValue, i) => { - return ( - - {keyValue} - - - - - ); - })} - - + {items.map((item, i) => { return ( - - {orderedKeys.map((keyValue, j) => { - return ( - - {item[keyValue]} - - ); - })} + + - - {item.tags.map((tag, j) => { - return ( - - {tag} - - ); - })} - - - - - + + console.log('edit') }, + { icon: deleteIco, handler: () => console.log('delete') }, + ]} + /> diff --git a/src/pages/NewTable/NewTablePageTest.js b/src/pages/NewTable/NewTablePageTest.js index 2ca2e8f..04a9c89 100644 --- a/src/pages/NewTable/NewTablePageTest.js +++ b/src/pages/NewTable/NewTablePageTest.js @@ -6,48 +6,59 @@ import Search from '../../components/generic/Search'; import getAllEntries from '../../api/getAllEntries'; import NewTable from './NewTable'; -const orderedKeys = [ - 'id', - 'submitter', - 'Accuracy-dev-0', - 'Likelihood-dev-0', - 'Accuracy-dev-1', - 'Likelihood-dev-1', - 'Accuracy-test-A', - 'Likelihood-test-A', - 'when', -]; +// const orderedKeys = [ +// 'id', +// 'submitter', +// 'Accuracy-dev-0', +// 'Likelihood-dev-0', +// 'Accuracy-dev-1', +// 'Likelihood-dev-1', +// 'Accuracy-test-A', +// 'Likelihood-test-A', +// 'when', +// ]; -const tableItems = [ - { - id: '7962', - submitter: 'wirus wirus', - 'Accuracy-dev-0': '0.68248', - 'Likelihood-dev-0': '0.00000', - 'Accuracy-dev-1': '0.65028', - 'Likelihood-dev-1': '0.00000', - 'Accuracy-test-A': '0.65503', - 'Likelihood-test-A': '0.00000', - when: '2023-01-05 21:47', - tags: ['tag1', 'siema siema', 'dluuuuuggiiiiiiiiiiiiiii tag', 'eloelo'], - }, - { - id: '7371', - submitter: 'Kamil Guttmann', - 'Accuracy-dev-0': '0.68248', - 'Likelihood-dev-0': '0.00000', - 'Accuracy-dev-1': '0.67544', - 'Likelihood-dev-1': '0.00000', - 'Accuracy-test-A': '0.67034', - 'Likelihood-test-A': '0.00000', - when: '2023-01-05 21:47', - tags: ['tag2', 'siema2 siem2', 'looooooooooonggggg tag_tag', 'eloelo3'], - }, -]; +// const tableItems = [ +// { +// id: '7962', +// submitter: 'wirus wirus', +// 'Accuracy-dev-0': '0.68248', +// 'Likelihood-dev-0': '0.00000', +// 'Accuracy-dev-1': '0.65028', +// 'Likelihood-dev-1': '0.00000', +// 'Accuracy-test-A': '0.65503', +// 'Likelihood-test-A': '0.00000', +// when: '2023-01-05 21:47', +// tags: ['tag1', 'siema siema', 'dluuuuuggiiiiiiiiiiiiiii tag', 'eloelo'], +// }, +// { +// id: '7371', +// submitter: 'Kamil Guttmann', +// 'Accuracy.dev-0': '0.68248', +// 'Likelihood.dev-0': '0.00000', +// 'Accuracy.dev-1': '0.67544', +// 'Likelihood.dev-1': '0.00000', +// 'Accuracy.test-A': '0.67034', +// 'Likelihood-test-A': '0.00000', +// when: '2023-01-05 21:47', +// tags: ['tag2', 'siema2 siem2', 'looooooooooonggggg tag_tag', 'eloelo3'], +// }, +// ]; const NewTablePageTest = (props) => { const [entriesFromApi, setEntriesFromApi] = React.useState([]); const [entriesAll, setEntriesAll] = React.useState([]); + const [entries, setEntries] = React.useState([]); + // eslint-disable-next-line + const [pageNr, setPageNr] = React.useState(1); + // eslint-disable-next-line + const [loading, setLoading] = React.useState(true); + // eslint-disable-next-line + 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(() => { if (props.challengeName) challengeDataRequest(props.challengeName); @@ -55,9 +66,41 @@ const NewTablePageTest = (props) => { const challengeDataRequest = (challengeName) => { getAllEntries(challengeName, setEntriesFromApi, setEntriesAll); + getAllEntries( + challengeName, + undefined, + setEntries, + setLoading, + setScoresSorted + ); }; + + const orderKeys = (elem) => { + if (elem) { + let result = ['id', 'submitter']; + const elemKeys = Object.keys(elem); + const dev0keys = elemKeys + .filter((key) => key.split('.')[1] === 'dev-0') + .sort(); + const dev1keys = elemKeys + .filter((key) => key.split('.')[1] === 'dev-1') + .sort(); + const testAkeys = elemKeys + .filter((key) => key.split('.')[1] === 'test-A') + .sort(); + result = result.concat(dev0keys); + result = result.concat(dev1keys); + result = result.concat(testAkeys); + result.push('when'); + return result; + } + return null; + }; + console.log(entriesFromApi); console.log(entriesAll); + console.log(entries); + if (entries[0]) console.log(entries[0].keys); return ( @@ -65,7 +108,9 @@ const NewTablePageTest = (props) => { New Table Test console.log('siema')} /> - + {entries.length > 0 && ( + + )} ); diff --git a/src/pages/NewTable/components/TableHeader/TableHeader.js b/src/pages/NewTable/components/TableHeader/TableHeader.js new file mode 100644 index 0000000..f27aa77 --- /dev/null +++ b/src/pages/NewTable/components/TableHeader/TableHeader.js @@ -0,0 +1,24 @@ +import React from 'react'; +import SortButtonContainerStyle from '../../styles/SortButtonContainerStyle'; +import ColumnFilterIcon from '../../../../components/generic/ColumnFilterIcon'; +import { FlexRow } from '../../../../utils/containers'; + +const TableHeader = (props) => { + return ( + + {props.orderedKeys.map((keyValue, i) => { + return ( + + {keyValue} + + + + + ); + })} + + + ); +}; + +export default TableHeader; diff --git a/src/pages/NewTable/components/TableHeader/index.js b/src/pages/NewTable/components/TableHeader/index.js new file mode 100644 index 0000000..3b412e4 --- /dev/null +++ b/src/pages/NewTable/components/TableHeader/index.js @@ -0,0 +1 @@ +export { default } from './TableHeader'; diff --git a/src/pages/NewTable/components/TableRowButtons/TableRowButtons.js b/src/pages/NewTable/components/TableRowButtons/TableRowButtons.js new file mode 100644 index 0000000..fc9162e --- /dev/null +++ b/src/pages/NewTable/components/TableRowButtons/TableRowButtons.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { FlexRow, Svg } from '../../../../utils/containers'; +import theme from '../../../../utils/theme'; + +const TableRowButtons = ({ buttons, i }) => { + return ( + + {buttons.map((button, j) => { + return ( + + ); + })} + + ); +}; + +export default TableRowButtons; diff --git a/src/pages/NewTable/components/TableRowButtons/index.js b/src/pages/NewTable/components/TableRowButtons/index.js new file mode 100644 index 0000000..ed5f6c3 --- /dev/null +++ b/src/pages/NewTable/components/TableRowButtons/index.js @@ -0,0 +1 @@ +export { default } from './TableRowButtons'; diff --git a/src/pages/NewTable/components/TableRowItems/TableRowItems.js b/src/pages/NewTable/components/TableRowItems/TableRowItems.js new file mode 100644 index 0000000..502125f --- /dev/null +++ b/src/pages/NewTable/components/TableRowItems/TableRowItems.js @@ -0,0 +1,17 @@ +import React from 'react'; + +const TableRowItems = ({ orderedKeys, item, i }) => { + return ( + <> + {orderedKeys.map((keyValue, j) => { + return ( + + {item[keyValue]} + + ); + })} + + ); +}; + +export default TableRowItems; diff --git a/src/pages/NewTable/components/TableRowItems/index.js b/src/pages/NewTable/components/TableRowItems/index.js new file mode 100644 index 0000000..5170f4e --- /dev/null +++ b/src/pages/NewTable/components/TableRowItems/index.js @@ -0,0 +1 @@ +export { default } from './TableRowItems'; diff --git a/src/pages/NewTable/components/TableRowTags/TableRowTags.js b/src/pages/NewTable/components/TableRowTags/TableRowTags.js new file mode 100644 index 0000000..eec0f3a --- /dev/null +++ b/src/pages/NewTable/components/TableRowTags/TableRowTags.js @@ -0,0 +1,12 @@ +import { FlexRow } from '../../../../utils/containers'; +import renderTags from './renderTags'; + +const TableRowTags = ({ item, i }) => { + return ( + + {renderTags(item.tags)} + + ); +}; + +export default TableRowTags; diff --git a/src/pages/NewTable/components/TableRowTags/index.js b/src/pages/NewTable/components/TableRowTags/index.js new file mode 100644 index 0000000..ed9d3ac --- /dev/null +++ b/src/pages/NewTable/components/TableRowTags/index.js @@ -0,0 +1 @@ +export { default } from './TableRowTags'; diff --git a/src/pages/NewTable/components/TableRowTags/renderTags.js b/src/pages/NewTable/components/TableRowTags/renderTags.js new file mode 100644 index 0000000..1a3a5e3 --- /dev/null +++ b/src/pages/NewTable/components/TableRowTags/renderTags.js @@ -0,0 +1,18 @@ +import { FlexRow } from '../../../../utils/containers'; + +const renderTags = (tags, i) => { + if (tags.length > 0) { + return tags.map((tag, j) => { + return ( + + {tag.name} + + ); + }); + } + return ( + submission without tags + ); +}; + +export default renderTags;