+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Form } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import UserSelect from '../common/UserSelect';
+import UserBox from '../users/Box';
+import { compareUsername } from '../../helpers/User';
+
+const sortCrew = (crew) => {
+ const sorted = [...crew];
+ sorted.sort((a, b) => compareUsername(a.user, b.user));
+ return sorted;
+};
+
+const Crew = ({ toggleRole, tournament }) => {
+ const { t } = useTranslation();
+
+ const [newUser, setNewUser] = React.useState('');
+
+ const crews = React.useMemo(() => {
+ const participants = (tournament?.participants || []).filter((p) => p.roles.includes('admin') || p.roles.includes('monitor'));
+ sortCrew(participants);
+ return participants;
+ }, [tournament]);
+
+ return <div>
+ {crews.map((crew) => (
+ <div className="d-flex align-items-center justify-content-between my-2" key={crew.id}>
+ <UserBox user={crew.user} />
+ <div className="button-bar d-flex align-items-center">
+ {['admin', 'monitor'].map((role =>
+ <Button
+ key={role}
+ onClick={() => { toggleRole(crew.user_id, role); }}
+ variant={crew.roles.includes(role) ? 'primary' : 'outline-secondary'}
+ >
+ {t(`participants.roleNames.${role}`)}
+ </Button>
+ ))}
+ </div>
+ </div>
+ ))}
+ <Form.Group controlId="crew.addCrew">
+ <Form.Label>{t('events.addCrew')}</Form.Label>
+ <div className="d-flex align-items-center justify-content-between my-2">
+ <Form.Control
+ as={UserSelect}
+ excludeIds={crews.map(c => c.user_id)}
+ onChange={(e) => setNewUser(e.target.value)}
+ value={newUser}
+ />
+ <div className="button-bar d-flex align-items-center">
+ {['admin', 'monitor'].map((role =>
+ <Button
+ key={role}
+ onClick={() => { toggleRole(newUser, role); setNewUser(''); }}
+ variant="outline-secondary"
+ >
+ {t(`participants.roleNames.${role}`)}
+ </Button>
+ ))}
+ </div>
+ </div>
+ </Form.Group>
+ </div>;
+};
+
+Crew.propTypes = {
+ toggleRole: PropTypes.func,
+ tournament: PropTypes.shape({
+ participants: PropTypes.arrayOf(PropTypes.shape({
+ })),
+ }),
+};
+
+export default Crew;