s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

table buttons acessibility and label correction

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.eslintrc.json
View File

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

3
src/components/generic/Table/Table.js
View File

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

1
src/components/generic/Table/components/DesktopTable/DesktopTable.js
View File

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

13
src/components/generic/Table/components/TableRowButtons/TableRowButtons.js
View File

@ -2,12 +2,19 @@ import React from 'react';
import { FlexRow, Svg } from '../../../../../utils/containers';
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 (
<FlexRow gap="12px">
<FlexRow gap="12px" position='relative'>
{buttons.map((button, j) => {
return (
<Svg
title={getButtonTitle(button.title)}
key={`table-item-button-${i}-${j}`}
onClick={active ? button.handler : null}
src={button.icon}
@ -17,7 +24,7 @@ const TableRowButtons = ({ buttons, i, active }) => {
width="16px"
height="16px"
/>
);
);
})}
</FlexRow>
);

33
src/components/generic/Table/components/TableRowFooter/TableRowFooter.js
View File

@ -6,35 +6,36 @@ import pensilIco from '../../../../../assets/pencil_ico.svg';
import deleteIco from '../../../../../assets/delete_ico.svg';
import KeyCloakService from '../../../../../services/KeyCloakService';
const TableRowFooter = ({ rowFooter, item, i, deleteItem, editItem }) => {
const [profileInfo, setProfileInfo] = React.useState(null);
React.useEffect(() => {
KeyCloakService.getProfileInfo(setProfileInfo);
}, []);
const isActive = () => {
const TableRowFooter = ({ rowFooter, item, i, deleteItem, editItem, profileInfo }) => {
const buttonsActive = () => {
if (!KeyCloakService.isLoggedIn()) return false;
if (profileInfo) {
if (
else if (
profileInfo?.preferred_username !== item.submitter &&
profileInfo?.name !== item.submitter
)
return false;
}
) return false;
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) {
return (
<FlexRow className="TableStyle__row-footer">
<TableRowTags item={item} i={i} />
<TableRowButtons
buttons={[
{ icon: pensilIco, handler: () => editItem() },
{ icon: deleteIco, handler: () => deleteItem() },
{ title: "edit", icon: pensilIco, handler: () => editItem() },
{ title: "delete", icon: deleteIco, handler: () => deleteItem() },
]}
active={isActive()}
active={buttonsActive()}
buttonAccessMessage={getButtonAccessMessage()}
i={i}
/>
</FlexRow>

14
src/pages/AllEntries/AllEntries.js
View File

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