New table search
This commit is contained in:
parent
8211ed629c
commit
3fcd4b4154
@ -7,14 +7,14 @@ import getAllEntries from '../../api/getAllEntries';
|
||||
import NewTable from './NewTable';
|
||||
import Loading from '../../components/generic/Loading';
|
||||
import { CALC_PAGES, ELEMENTS_PER_PAGE } from '../../utils/globals';
|
||||
import searchQueryHandler from './searchHandler';
|
||||
|
||||
const NewTablePageTest = (props) => {
|
||||
// eslint-disable-next-line
|
||||
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([]);
|
||||
@ -60,20 +60,24 @@ const NewTablePageTest = (props) => {
|
||||
return null;
|
||||
};
|
||||
|
||||
console.log(entriesFromApi);
|
||||
console.log(entriesAll);
|
||||
console.log(entries);
|
||||
|
||||
const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
|
||||
let elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
|
||||
|
||||
if (!loading) {
|
||||
return (
|
||||
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px">
|
||||
<H2 as="h2" margin="0 0 32px 0">
|
||||
New Table Test
|
||||
</H2>
|
||||
<Search searchQueryHandler={() => console.log('siema')} />
|
||||
<FlexColumn
|
||||
padding="24px"
|
||||
gap="32px"
|
||||
as="section"
|
||||
width="100%"
|
||||
maxWidth="1600px"
|
||||
>
|
||||
<H2 as="h2">New Table Test</H2>
|
||||
<Search
|
||||
searchQueryHandler={(event) =>
|
||||
searchQueryHandler(event, entriesAll, setPageNr, setEntries)
|
||||
}
|
||||
/>
|
||||
{elements.length > 0 && entries[0] && (
|
||||
<NewTable items={elements} orderedKeys={orderKeys(entries[0])} />
|
||||
)}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { RENDER_WHEN } from '../../../../utils/globals';
|
||||
|
||||
const TableRowItems = ({ orderedKeys, item, i }) => {
|
||||
return (
|
||||
@ -6,7 +7,7 @@ const TableRowItems = ({ orderedKeys, item, i }) => {
|
||||
{orderedKeys.map((keyValue, j) => {
|
||||
return (
|
||||
<td key={`table-item-${i}-${j}`} className="NewTableStyle__td">
|
||||
{item[keyValue]}
|
||||
{keyValue === 'when' ? RENDER_WHEN(item[keyValue]) : item[keyValue]}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
|
18
src/pages/NewTable/searchHandler.js
Normal file
18
src/pages/NewTable/searchHandler.js
Normal file
@ -0,0 +1,18 @@
|
||||
const searchQueryHandler = (event, entriesAll, setPageNr, setEntries) => {
|
||||
let searchQuery = event.target.value;
|
||||
let submissionsToRender = [];
|
||||
setPageNr(1);
|
||||
if (searchQuery === '') setEntries(entriesAll);
|
||||
else {
|
||||
for (let entry of entriesAll) {
|
||||
const { when } = entry;
|
||||
const otherKeys = Object.values(entry).join(' ');
|
||||
const str = `${when.slice(11, 16)} ${when.slice(0, 10)} ${otherKeys}`;
|
||||
if (str.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||
submissionsToRender.push(entry);
|
||||
}
|
||||
setEntries(submissionsToRender);
|
||||
}
|
||||
};
|
||||
|
||||
export default searchQueryHandler;
|
@ -2,7 +2,7 @@ import styled from 'styled-components';
|
||||
import { FlexRow } from '../../../utils/containers';
|
||||
|
||||
const getRightAttribute = (column) => {
|
||||
const staticColumns = ['id', 'when', 'submitter'];
|
||||
const staticColumns = ['id', 'when'];
|
||||
if (staticColumns.includes(column)) return '32%';
|
||||
return '16%';
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user