table buttons acessibility and label correction

This commit is contained in:
Mateusz Tylka 2023-10-01 21:31:27 +02:00
parent 970a948cec
commit a77a31d01c
6 changed files with 44 additions and 27 deletions

View File

@ -14,13 +14,6 @@
"eqeqeq": [ "eqeqeq": [
"error", "error",
"always" "always"
],
"quotes": [
2,
"single",
{
"avoidEscape": true
}
] ]
} }
} }

View File

@ -11,6 +11,7 @@ const Table = ({
orderedKeys, orderedKeys,
popUpMessageHandler, popUpMessageHandler,
sortByUpdate, sortByUpdate,
profileInfo,
rowFooter = true, rowFooter = true,
}) => { }) => {
const [, updateState] = React.useState(); const [, updateState] = React.useState();
@ -47,6 +48,7 @@ const Table = ({
popUpMessageHandler={popUpMessageHandler} popUpMessageHandler={popUpMessageHandler}
itemToHandle={itemToHandle} itemToHandle={itemToHandle}
sortByUpdate={sortByUpdate} sortByUpdate={sortByUpdate}
profileInfo={profileInfo}
tableUpdate={tableUpdate} tableUpdate={tableUpdate}
setItemToHandle={setItemToHandle} setItemToHandle={setItemToHandle}
setEditPopUp={setEditPopUp} setEditPopUp={setEditPopUp}
@ -64,6 +66,7 @@ const Table = ({
popUpMessageHandler={popUpMessageHandler} popUpMessageHandler={popUpMessageHandler}
itemToHandle={itemToHandle} itemToHandle={itemToHandle}
sortByUpdate={sortByUpdate} sortByUpdate={sortByUpdate}
profileInfo={profileInfo}
tableUpdate={tableUpdate} tableUpdate={tableUpdate}
setItemToHandle={setItemToHandle} setItemToHandle={setItemToHandle}
setEditPopUp={setEditPopUp} setEditPopUp={setEditPopUp}

View File

@ -32,6 +32,7 @@ const DesktopTable = (props) => {
props.setEditPopUp(true); props.setEditPopUp(true);
}} }}
rowFooter={props.rowFooter} rowFooter={props.rowFooter}
profileInfo={props.profileInfo}
item={item} item={item}
i={i} i={i}
/> />

View File

@ -2,12 +2,19 @@ import React from 'react';
import { FlexRow, Svg } from '../../../../../utils/containers'; import { FlexRow, Svg } from '../../../../../utils/containers';
import theme from '../../../../../utils/theme'; import theme from '../../../../../utils/theme';
const TableRowButtons = ({ buttons, i, active }) => { const TableRowButtons = ({ buttons, i, active, buttonAccessMessage }) => {
const getButtonTitle = (defaultTitle) => {
if (buttonAccessMessage === 'default') {
return defaultTitle;
} else return buttonAccessMessage;
};
return ( return (
<FlexRow gap="12px"> <FlexRow gap="12px" position='relative'>
{buttons.map((button, j) => { {buttons.map((button, j) => {
return ( return (
<Svg <Svg
title={getButtonTitle(button.title)}
key={`table-item-button-${i}-${j}`} key={`table-item-button-${i}-${j}`}
onClick={active ? button.handler : null} onClick={active ? button.handler : null}
src={button.icon} src={button.icon}

View File

@ -6,35 +6,36 @@ import pensilIco from '../../../../../assets/pencil_ico.svg';
import deleteIco from '../../../../../assets/delete_ico.svg'; import deleteIco from '../../../../../assets/delete_ico.svg';
import KeyCloakService from '../../../../../services/KeyCloakService'; import KeyCloakService from '../../../../../services/KeyCloakService';
const TableRowFooter = ({ rowFooter, item, i, deleteItem, editItem }) => { const TableRowFooter = ({ rowFooter, item, i, deleteItem, editItem, profileInfo }) => {
const [profileInfo, setProfileInfo] = React.useState(null); const buttonsActive = () => {
React.useEffect(() => {
KeyCloakService.getProfileInfo(setProfileInfo);
}, []);
const isActive = () => {
if (!KeyCloakService.isLoggedIn()) return false; if (!KeyCloakService.isLoggedIn()) return false;
if (profileInfo) { else if (
if (
profileInfo?.preferred_username !== item.submitter && profileInfo?.preferred_username !== item.submitter &&
profileInfo?.name !== item.submitter profileInfo?.name !== item.submitter
) ) return false;
return false;
}
return true; return true;
}; };
const getButtonAccessMessage = () => {
if (!KeyCloakService.isLoggedIn()) {
return "You must be logged in to use this option.";
} else if (profileInfo?.preferred_username !== item.submitter &&
profileInfo?.name !== item.submitter) {
return "You don't have permission to use this option.";
} return "default";
};
if (rowFooter) { if (rowFooter) {
return ( return (
<FlexRow className="TableStyle__row-footer"> <FlexRow className="TableStyle__row-footer">
<TableRowTags item={item} i={i} /> <TableRowTags item={item} i={i} />
<TableRowButtons <TableRowButtons
buttons={[ buttons={[
{ icon: pensilIco, handler: () => editItem() }, { title: "edit", icon: pensilIco, handler: () => editItem() },
{ icon: deleteIco, handler: () => deleteItem() }, { title: "delete", icon: deleteIco, handler: () => deleteItem() },
]} ]}
active={isActive()} active={buttonsActive()}
buttonAccessMessage={getButtonAccessMessage()}
i={i} i={i}
/> />
</FlexRow> </FlexRow>

View File

@ -9,6 +9,7 @@ import Loading from '../../components/generic/Loading';
import { CALC_PAGES, ELEMENTS_PER_PAGE } from '../../utils/globals'; import { CALC_PAGES, ELEMENTS_PER_PAGE } from '../../utils/globals';
import searchQueryHandler from './searchHandler'; import searchQueryHandler from './searchHandler';
import orderKeys from './orderKeys'; import orderKeys from './orderKeys';
import KeyCloakService from '../../services/KeyCloakService';
const AllEntries = (props) => { const AllEntries = (props) => {
const [entriesAll, setEntriesAll] = React.useState([]); const [entriesAll, setEntriesAll] = React.useState([]);
@ -19,6 +20,15 @@ const AllEntries = (props) => {
const [scoresSorted, setScoresSorted] = React.useState([]); const [scoresSorted, setScoresSorted] = React.useState([]);
const [submitterSorted, setSubmitterSorted] = React.useState(false); const [submitterSorted, setSubmitterSorted] = React.useState(false);
const [whenSorted, setWhenSorted] = React.useState(false); const [whenSorted, setWhenSorted] = React.useState(false);
const [profileInfo, setProfileInfo] = React.useState(null);
const getProfileInfo = () => {
if (KeyCloakService.isLoggedIn()) {
KeyCloakService.getProfileInfo(setProfileInfo);
} else {
setProfileInfo(false);
}
};
React.useMemo(() => { React.useMemo(() => {
if (props.challengeName) { if (props.challengeName) {
@ -30,6 +40,7 @@ const AllEntries = (props) => {
setScoresSorted setScoresSorted
); );
} }
getProfileInfo();
}, [props.challengeName]); }, [props.challengeName]);
const sortByUpdate = React.useCallback( const sortByUpdate = React.useCallback(
@ -121,7 +132,7 @@ const AllEntries = (props) => {
maxWidth="1600px" maxWidth="1600px"
> >
<H2 as="h2">All Entries</H2> <H2 as="h2">All Entries</H2>
{!loading ? ( {!loading && (profileInfo !== null) ? (
<> <>
<Search <Search
searchQueryHandler={(event) => searchQueryHandler={(event) =>
@ -135,6 +146,7 @@ const AllEntries = (props) => {
orderedKeys={orderKeys(entries[0])} orderedKeys={orderKeys(entries[0])}
sortByUpdate={sortByUpdate} sortByUpdate={sortByUpdate}
popUpMessageHandler={props.popUpMessageHandler} popUpMessageHandler={props.popUpMessageHandler}
profileInfo={profileInfo}
/> />
</div> </div>
)} )}