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