show roles in participation table

[alttp.git] / resources / js / components / users / Participation.js

diff --git a/resources/js/components/users/Participation.js b/resources/js/components/users/Participation.js
index e45fcf668e2fcc26c1bb0121ea6a77bc36a54e68..d0d5d689658dc9f69608d1cf7ab41cae79d1f94a 100644 (file)
--- a/resources/js/components/users/Participation.js
+++ b/resources/js/components/users/Participation.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Alert, Button } from 'react-bootstrap';
+import { Alert, Button, Table } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
@@ -14,16 +14,34 @@ const Participation = ({ user }) => {
                        {i18n.t('users.participationEmpty')}
                </Alert>;
        }
-       return <div className="participation">
-               {user.participation.map(p => <div key={p.id}>
-                       <Button
-                               onClick={() => navigate(`/tournaments/${p.tournament_id}`)}
-                               variant="link"
-                       >
-                               {p.tournament.title}
-                       </Button>
-               </div>)}
-       </div>;
+       return <Table className="participation">
+               <thead>
+                       <tr>
+                               <th>{i18n.t('participants.tournament')}</th>
+                               <th>{i18n.t('participants.roles')}</th>
+                       </tr>
+               </thead>
+               <tbody>
+               {user.participation.map(p => <tr key={p.id}>
+                       <td>
+                               <Button
+                                       onClick={() => navigate(`/tournaments/${p.tournament_id}`)}
+                                       variant="link"
+                               >
+                                       {p.tournament.title}
+                               </Button>
+                       </td>
+                       <td>
+                               {p.roles ? p.roles.map((role, index) =>
+                                       <span key={role}>
+                                               {index === 0 ? '' : ', '}
+                                               {i18n.t(`participants.roleNames.${role}`)}
+                                       </span>
+                               ) : null}
+                       </td>
+               </tr>)}
+               </tbody>
+       </Table>;
 };
 
 Participation.propTypes = {