resources/js/components/episodes/CrewManagement.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button, Form } from 'react-bootstrap';
   4 import { useTranslation } from 'react-i18next';
   5
   6 import CrewMember from './CrewMember';
   7 import Icon from '../common/Icon';
   8 import UserSelect from '../common/UserSelect';
   9
  10 const CrewManagement = ({
  11         channel,
  12         episode,
  13         manageCrew,
  14         role,
  15 }) => {
  16         const { t } = useTranslation();
  17
  18         const crews = React.useMemo(() =>
  19                 (episode.crew || [])
  20                 .filter(c => c.channel_id === channel.id && c.role === role)
  21         , [channel, episode, role]);
  22
  23         const addCrew = React.useCallback(user_id => {
  24                 manageCrew({
  25                         add: user_id,
  26                         channel_id: channel.id,
  27                         episode_id: episode.id,
  28                         role,
  29                 });
  30         }, [channel, episode, manageCrew, role]);
  31
  32         const confirmCrew = React.useCallback(crew => {
  33                 manageCrew({
  34                         channel_id: channel.id,
  35                         confirm: crew.id,
  36                         episode_id: episode.id,
  37                         role,
  38                 });
  39         }, [channel, episode, manageCrew, role]);
  40
  41         const removeCrew = React.useCallback(crew => {
  42                 manageCrew({
  43                         channel_id: channel.id,
  44                         episode_id: episode.id,
  45                         remove: crew.id,
  46                         role,
  47                 });
  48         }, [channel, episode, manageCrew, role]);
  49
  50         const unconfirmCrew = React.useCallback(crew => {
  51                 manageCrew({
  52                         channel_id: channel.id,
  53                         episode_id: episode.id,
  54                         role,
  55                         unconfirm: crew.id,
  56                 });
  57         }, [channel, episode, manageCrew, role]);
  58
  59         return <div className="mt-2">
  60                 <div className="fs-4">{t(`crew.roles.${role}`)}</div>
  61                 {crews.map(crew =>
  62                         <div className="d-flex align-items-center justify-content-between" key={crew.id}>
  63                                 <CrewMember crew={crew} />
  64                                 <div className="button-bar">
  65                                         {crew.confirmed ?
  66                                                 <Button
  67                                                         onClick={() => unconfirmCrew(crew)}
  68                                                         title={t('button.unconfirm')}
  69                                                         variant="outline-danger"
  70                                                 >
  71                                                         <Icon.REJECT title="" />
  72                                                 </Button>
  73                                         : null}
  74                                         {!crew.confirmed ?
  75                                                 <Button
  76                                                         onClick={() => confirmCrew(crew)}
  77                                                         title={t('button.confirm')}
  78                                                         variant="outline-success"
  79                                                 >
  80                                                         <Icon.ACCEPT />
  81                                                 </Button>
  82                                         : null}
  83                                         <Button
  84                                                 onClick={() => removeCrew(crew)}
  85                                                 title={t('button.remove')}
  86                                                 variant="outline-danger"
  87                                         >
  88                                                 <Icon.DELETE title="" />
  89                                         </Button>
  90                                 </div>
  91                         </div>
  92                 )}
  93                 <Form.Group controlId="crew.addUser">
  94                         <Form.Label>{t('episodes.restreamDialog.addUser')}</Form.Label>
  95                         <Form.Control
  96                                 as={UserSelect}
  97                                 onChange={e => addCrew(e.target.value)}
  98                                 value=""
  99                         />
 100                 </Form.Group>
 101         </div>;
 102 };
 103
 104 CrewManagement.propTypes = {
 105         channel: PropTypes.shape({
 106                 id: PropTypes.number,
 107         }),
 108         episode: PropTypes.shape({
 109                 crew: PropTypes.arrayOf(PropTypes.shape({
 110                         channel_id: PropTypes.number,
 111                         role: PropTypes.string,
 112                 })),
 113                 id: PropTypes.number,
 114         }),
 115         manageCrew: PropTypes.func,
 116         role: PropTypes.string,
 117 };
 118
 119 export default CrewManagement;