resources/js/components/results/DetailDialog.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
   4 import { withTranslation } from 'react-i18next';
   5
   6 import Box from '../users/Box';
   7 import { getTime } from '../../helpers/Result';
   8 import { findResult } from '../../helpers/Participant';
   9 import { maySeeResults } from '../../helpers/permissions';
  10 import { withUser } from '../../helpers/UserContext';
  11 import i18n from '../../i18n';
  12
  13 const getPlacement = result =>
  14         `${result.placement}. (${i18n.t('results.points', { count: result.score })})`;
  15
  16 const DetailDialog = ({
  17         onHide,
  18         participant,
  19         round,
  20         show,
  21         tournament,
  22         user,
  23 }) => {
  24         const result = findResult(participant, round);
  25         const maySee = maySeeResults(user, tournament, round);
  26         return <Modal className="result-dialog" onHide={onHide} show={show}>
  27                 <Modal.Header closeButton>
  28                         <Modal.Title>
  29                                 {i18n.t('results.details')}
  30                         </Modal.Title>
  31                 </Modal.Header>
  32                 <Modal.Body>
  33                         <Row>
  34                                 <Form.Group as={Col} sm={6}>
  35                                         <Form.Label>{i18n.t('results.round')}</Form.Label>
  36                                         <div>
  37                                                 #{round.number || '?'}
  38                                                 {' '}
  39                                                 {i18n.t('rounds.date', { date: new Date(round.created_at) })}
  40                                         </div>
  41                                 </Form.Group>
  42                                 <Form.Group as={Col} sm={6}>
  43                                         <Form.Label>{i18n.t('results.runner')}</Form.Label>
  44                                         <div><Box user={participant.user} /></div>
  45                                 </Form.Group>
  46                                 <Form.Group as={Col} sm={6}>
  47                                         <Form.Label>{i18n.t('results.result')}</Form.Label>
  48                                         <div>
  49                                                 {maySee && result && result.has_finished
  50                                                         ? getTime(result, maySee)
  51                                                         : i18n.t('results.pending')}
  52                                         </div>
  53                                 </Form.Group>
  54                                 <Form.Group as={Col} sm={6}>
  55                                         <Form.Label>{i18n.t('results.placement')}</Form.Label>
  56                                         <div>
  57                                                 {maySee && result && result.placement
  58                                                         ? getPlacement(result)
  59                                                         : i18n.t('results.pending')}
  60                                         </div>
  61                                 </Form.Group>
  62                                 {maySee && result && result.comment ?
  63                                         <Form.Group as={Col} sm={12}>
  64                                                 <Form.Label>{i18n.t('results.comment')}</Form.Label>
  65                                                 <div>{result.comment}</div>
  66                                         </Form.Group>
  67                                 : null}
  68                         </Row>
  69                 </Modal.Body>
  70                 <Modal.Footer>
  71                         <Button onClick={onHide} variant="secondary">
  72                                 {i18n.t('button.close')}
  73                         </Button>
  74                 </Modal.Footer>
  75         </Modal>;
  76 };
  77
  78 DetailDialog.propTypes = {
  79         onHide: PropTypes.func,
  80         participant: PropTypes.shape({
  81                 user: PropTypes.shape({
  82                 }),
  83         }),
  84         round: PropTypes.shape({
  85                 created_at: PropTypes.string,
  86                 number: PropTypes.number,
  87         }),
  88         show: PropTypes.bool,
  89         tournament: PropTypes.shape({
  90         }),
  91         user: PropTypes.shape({
  92         }),
  93 };
  94
  95 export default withTranslation()(withUser(DetailDialog));