scroll-x for tables

This commit is contained in:
Mateusz Tylka 2023-06-30 11:20:55 +02:00
parent 69f65846c2
commit 3610415657
5 changed files with 47 additions and 41 deletions

View File

@ -1,16 +1,15 @@
import {API} from '../utils/globals'; import { API } from '../utils/globals';
import KeyCloakService from '../services/KeyCloakService'; import KeyCloakService from '../services/KeyCloakService';
const getFullUser = (setDataState, setLoadingState) => { const getFullUser = async (setDataState, setLoadingState) => {
fetch(`${API}/full-user-info`, { fetch(`${API}/full-user-info`, {
headers: {'Authorization': `Bearer ${KeyCloakService.getToken()}`} headers: { Authorization: `Bearer ${KeyCloakService.getToken()}` },
}) })
.then(response => response.json()) .then((response) => response.json())
.then(data => { .then((data) => {
setDataState(data); setDataState(data);
if (setLoadingState) if (setLoadingState) setLoadingState(false);
setLoadingState(false); });
});
}; };
export default getFullUser; export default getFullUser;

View File

@ -112,6 +112,8 @@ const AllEntries = (props) => {
const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2); const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
let elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2); let elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
console.log(CALC_PAGES(entries, 2));
console.log(entries);
return ( return (
<FlexColumn <FlexColumn
padding="24px" padding="24px"
@ -129,14 +131,14 @@ const AllEntries = (props) => {
} }
/> />
{elements.length > 0 && entries[0] && ( {elements.length > 0 && entries[0] && (
// <div style={{ width: '100%', overflowX: 'scroll' }}> <div style={{ width: '100%', overflowX: 'auto' }}>
<Table <Table
items={elements} items={elements}
orderedKeys={orderKeys(entries[0])} orderedKeys={orderKeys(entries[0])}
sortByUpdate={sortByUpdate} sortByUpdate={sortByUpdate}
popUpMessageHandler={props.popUpMessageHandler} popUpMessageHandler={props.popUpMessageHandler}
/> />
// </div> </div>
)} )}
<Pager <Pager
pageNr={pageNr} pageNr={pageNr}

View File

@ -9,16 +9,17 @@ const HowTo = (props) => {
const [userFullInfo, setUserFullInfo] = React.useState(null); const [userFullInfo, setUserFullInfo] = React.useState(null);
const username = KeyCloakService.getUsername(); const username = KeyCloakService.getUsername();
React.useEffect(() => { React.useMemo(async () => {
getFullUser(setUserFullInfo); await getFullUser(setUserFullInfo);
setTimeout(() => {
if (!KeyCloakService.isLoggedIn()) { if (!KeyCloakService.isLoggedIn()) {
props.popUpMessageHandler( props.popUpMessageHandler(
'Please log in', 'Please log in',
'To see everything you must log in', 'To see everything you must log in',
() => KeyCloakService.doLogin () => KeyCloakService.doLogin
); );
} }
}, 1000);
}, [props]); }, [props]);
return ( return (

View File

@ -177,12 +177,14 @@ const Leaderboard = (props) => {
} }
/> />
{elements.length > 0 && entries[0] && ( {elements.length > 0 && entries[0] && (
<Table <div style={{ width: '100%', overflowX: 'auto' }}>
items={elements} <Table
orderedKeys={orderKeys(entries[0])} items={elements}
sortByUpdate={sortByUpdate} orderedKeys={orderKeys(entries[0])}
rowFooter={false} sortByUpdate={sortByUpdate}
/> rowFooter={false}
/>
</div>
)} )}
<Pager <Pager
pageNr={pageNr} pageNr={pageNr}

View File

@ -107,11 +107,13 @@ const MyEntries = (props) => {
} }
/> />
{elements.length > 0 && myEntries[0] && ( {elements.length > 0 && myEntries[0] && (
<Table <div style={{ width: '100%', overflowX: 'auto' }}>
items={elements} <Table
orderedKeys={orderKeys(myEntries[0])} items={elements}
sortByUpdate={sortByUpdate} orderedKeys={orderKeys(myEntries[0])}
/> sortByUpdate={sortByUpdate}
/>
</div>
)} )}
<Pager <Pager
pageNr={pageNr} pageNr={pageNr}