]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/episodes/CrewManagement.js
chat bot protocol ui
[alttp.git] / 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;