resources/js/components/tournament/Detail.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button, Col, Container, Row } from 'react-bootstrap';
   4 import { withTranslation } from 'react-i18next';
   5
   6 import Scoreboard from './Scoreboard';
   7 import Protocol from '../protocol/Protocol';
   8 import Rounds from '../rounds/List';
   9 import Box from '../users/Box';
  10 import {
  11         mayAddRounds,
  12         mayViewProtocol,
  13 } from '../../helpers/permissions';
  14 import {
  15         getTournamentAdmins,
  16         hasRunners,
  17         hasTournamentAdmins,
  18 } from '../../helpers/Tournament';
  19 import { withUser } from '../../helpers/UserContext';
  20 import i18n from '../../i18n';
  21
  22 const Detail = ({
  23         addRound,
  24         tournament,
  25         user,
  26 }) => <Container fluid>
  27         <Row>
  28                 <Col lg={8} xl={9}>
  29                         <div className="d-flex align-items-center justify-content-between">
  30                                 <h1>{tournament.title}</h1>
  31                                 {mayViewProtocol(user, tournament) ?
  32                                         <Protocol id={tournament.id} />
  33                                 : null}
  34                         </div>
  35                 </Col>
  36         </Row>
  37         <Row>
  38                 <Col lg={{ order: 2, span: 4 }} xl={{ order: 2, span: 3 }}>
  39                         <div className="d-flex align-items-center justify-content-between">
  40                                 <h2>{i18n.t('tournaments.scoreboard')}</h2>
  41                         </div>
  42                         {hasRunners(tournament) ?
  43                                 <Scoreboard tournament={tournament} />
  44                         : null}
  45                         {hasTournamentAdmins(tournament) ?
  46                                 <>
  47                                         <div className="d-flex align-items-center justify-content-between">
  48                                                 <h2>{i18n.t('tournaments.admins')}</h2>
  49                                         </div>
  50                                         {getTournamentAdmins(tournament).map(p =>
  51                                                 <p key={p.id}><Box user={p.user} /></p>
  52                                         )}
  53                                 </>
  54                         : null}
  55                 </Col>
  56                 <Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
  57                         <div className="d-flex align-items-center justify-content-between">
  58                                 <h2>{i18n.t('rounds.heading')}</h2>
  59                                 {addRound && mayAddRounds(user, tournament) ?
  60                                         <Button onClick={addRound}>
  61                                                 {i18n.t('rounds.new')}
  62                                         </Button>
  63                                 : null}
  64                         </div>
  65                         {tournament.rounds ?
  66                                 <Rounds rounds={tournament.rounds} tournament={tournament} />
  67                         : null}
  68                 </Col>
  69         </Row>
  70 </Container>;
  71
  72 Detail.propTypes = {
  73         addRound: PropTypes.func,
  74         tournament: PropTypes.shape({
  75                 id: PropTypes.number,
  76                 participants: PropTypes.arrayOf(PropTypes.shape({
  77                 })),
  78                 rounds: PropTypes.arrayOf(PropTypes.shape({
  79                 })),
  80                 title: PropTypes.string,
  81         }),
  82         user: PropTypes.shape({
  83         }),
  84 };
  85
  86 export default withTranslation()(withUser(Detail));