show roles in participation table

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 = {

diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index 87806b2b5b91b62f65d3b06a22c155d28776a4bc..95520057e30d8ce29621c085c1eeabf0592fd6e1 100644 (file)
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -105,6 +105,12 @@ export default {
                        empty: 'Noch keine Teilnehmer eingetragen',
                        heading: 'Teilnehmer',
                        participant: 'Teilnehmer',
+                       roleNames: {
+                               admin: 'Administrator',
+                               runner: 'Runner',
+                       },
+                       roles: 'Teilnahme als',
+                       tournament: 'Turnier',
                        score: 'Punktzahl',
                },
                protocol: {

diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index 533ba51a93529b8c0395500f7c556d3150dece63..24be59f563c4f2c2f2e50b9159bf0ec066760dda 100644 (file)
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -105,6 +105,12 @@ export default {
                        empty: 'No participants on record',
                        heading: 'Participants',
                        participant: 'Participant',
+                       roleNames: {
+                               admin: 'Administrator',
+                               runner: 'Runner',
+                       },
+                       roles: 'Participated as',
+                       tournament: 'Tournament',
                        score: 'Score',
                },
                protocol: {