init new mobile table

This commit is contained in:
Mateusz Tylka 2023-07-21 16:00:05 +02:00
parent 0b3d809e3b
commit d26a91b65c
7 changed files with 153 additions and 31 deletions

View File

@ -53,7 +53,6 @@ const getChallengeLeaderboard = (
for (let _ of tests) { for (let _ of tests) {
initSetScoreSorted.push(false); initSetScoreSorted.push(false);
} }
console.log(result);
for (let setDataState of setDataStates) setDataState(result); for (let setDataState of setDataStates) setDataState(result);
if (setScoreSorted) setScoreSorted(initSetScoreSorted); if (setScoreSorted) setScoreSorted(initSetScoreSorted);
if (setLoadingState) setLoadingState(false); if (setLoadingState) setLoadingState(false);

View File

@ -7,6 +7,8 @@ import TableRowFooter from './components/TableRowFooter';
import deleteSubmission from '../../../api/deleteSubmission'; import deleteSubmission from '../../../api/deleteSubmission';
import theme from '../../../utils/theme'; import theme from '../../../utils/theme';
import DeletePopUp from './components/DeletePopUp/DeletePopUp'; import DeletePopUp from './components/DeletePopUp/DeletePopUp';
import MobileTable from './components/MobileTable/MobileTable';
import Media from 'react-media';
const Table = ({ const Table = ({
items, items,
@ -31,34 +33,52 @@ const Table = ({
); );
}; };
const desktopRender = () => {
return (
<TableStyle rowFooter={rowFooter}>
<TableHeader
orderedKeys={orderedKeys}
sortByUpdate={sortByUpdate}
tableUpdate={tableUpdate}
/>
{itemsToRender.map((item, i) => {
return (
<tr key={`table-row-${i}`} className="TableStyle__tr">
<DeletePopUp
item={item}
setDeletePopUp={setDeletePopUp}
deletePopUp={deletePopUp}
deleteItem={deleteItem}
/>
<TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
<TableRowFooter
deleteItem={() => setDeletePopUp(true)}
rowFooter={rowFooter}
item={item}
i={i}
/>
<RowsBackgroundStyle i={i} />
</tr>
);
})}
</TableStyle>
);
};
return ( return (
<TableStyle rowFooter={rowFooter}> <>
<TableHeader <Media query={theme.mobile}>
orderedKeys={orderedKeys} <MobileTable
sortByUpdate={sortByUpdate} elements={itemsToRender}
tableUpdate={tableUpdate} setDeletePopUp={setDeletePopUp}
/> deletePopUp={deletePopUp}
{itemsToRender.map((item, i) => { deleteItem={deleteItem}
return ( orderedKeys={orderedKeys}
<tr key={`table-row-${i}`} className="TableStyle__tr"> rowFooter={rowFooter}
<DeletePopUp />
item={item} </Media>
setDeletePopUp={setDeletePopUp} <Media query={theme.desktop}>{desktopRender()}</Media>
deletePopUp={deletePopUp} </>
deleteItem={deleteItem}
/>
<TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
<TableRowFooter
deleteItem={() => setDeletePopUp(true)}
rowFooter={rowFooter}
item={item}
i={i}
/>
<RowsBackgroundStyle i={i} />
</tr>
);
})}
</TableStyle>
); );
}; };

View File

@ -0,0 +1,96 @@
import React from 'react';
import { Container } from '../../../../../utils/containers';
import styled from 'styled-components';
import DeletePopUp from '../DeletePopUp/DeletePopUp';
import TableRowItems from '../TableRowItems/TableRowItems';
import TableRowFooter from '../TableRowFooter/TableRowFooter';
const MobileTableStyle = styled(Container)`
width: 100%;
border-collapse: collapse;
margin: 32px 0;
tr:nth-of-type(odd) {
background: ${({ theme }) => theme.colors.dark03};
}
th {
background: ${({ theme }) => theme.colors.dark05};
color: ${({ theme }) => theme.colors.white};
}
td,
th {
padding: 6px;
border: 1px solid ${({ theme }) => theme.colors.white};
text-align: left;
}
thead,
tbody,
th,
tr,
td {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
border: none;
border-bottom: 1px solid ${({ theme }) => theme.colors.dark01};
position: relative;
padding-left: 50%;
}
.mobile-table-header {
font-weight: 500;
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
.TableStyle__row-footer {
padding: 0 8px;
min-height: 36px;
justify-content: space-between;
}
.TableStyle__tag {
color: ${({ theme }) => theme.colors.white};
background-color: ${({ theme }) => theme.colors.green08};
padding: 4px;
border-radius: 2px;
font-size: 12px;
font-weight: 600;
}
.TableStyle__tags-container {
gap: 4px;
}
`;
const MobileTable = (props) => {
return (
<MobileTableStyle as="table">
{props.elements.map((item, i) => {
return (
<tr key={`table-row-${i}`} className="TableStyle__tr">
<DeletePopUp
item={item}
setDeletePopUp={props.setDeletePopUp}
deletePopUp={props.deletePopUp}
deleteItem={props.deleteItem}
/>
<TableRowItems orderedKeys={props.orderedKeys} item={item} i={i} />
<TableRowFooter
deleteItem={() => props.setDeletePopUp(true)}
rowFooter={props.rowFooter}
item={item}
i={i}
/>
</tr>
);
})}
</MobileTableStyle>
);
};
export default MobileTable;

View File

@ -0,0 +1 @@
export { default } from './MobileTable';

View File

@ -1,5 +1,10 @@
import React from 'react'; import React from 'react';
import { RENDER_WHEN, RENDER_METRIC_VALUE } from '../../../../../utils/globals'; import {
RENDER_WHEN,
RENDER_METRIC_VALUE,
IS_MOBILE,
} from '../../../../../utils/globals';
import { Container } from '../../../../../utils/containers';
const TableRowItems = ({ orderedKeys, item, i }) => { const TableRowItems = ({ orderedKeys, item, i }) => {
const renderValue = (keyValue) => { const renderValue = (keyValue) => {
@ -15,6 +20,9 @@ const TableRowItems = ({ orderedKeys, item, i }) => {
{orderedKeys.map((keyValue, j) => { {orderedKeys.map((keyValue, j) => {
return ( return (
<td key={`table-item-${i}-${j}`} className="TableStyle__td"> <td key={`table-item-${i}-${j}`} className="TableStyle__td">
{IS_MOBILE() && (
<Container className="mobile-table-header">{keyValue}</Container>
)}
{renderValue(keyValue)} {renderValue(keyValue)}
</td> </td>
); );

View File

@ -159,7 +159,6 @@ const Leaderboard = (props) => {
const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2); const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
const elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2); const elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
console.log(entries);
return ( return (
<FlexColumn <FlexColumn

View File

@ -1,7 +1,6 @@
import SUBMIT_ACTION from './SubmitActionEnum'; import SUBMIT_ACTION from './SubmitActionEnum';
const SubmitReducer = (state, action) => { const SubmitReducer = (state, action) => {
console.log(`SubmitReducer: ${action.type}`);
let newTags = state.tags; let newTags = state.tags;
switch (action.type) { switch (action.type) {
case SUBMIT_ACTION.SET_DESCRIPTION: case SUBMIT_ACTION.SET_DESCRIPTION: