1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-18 20:59:44 +02:00
planka/client/src/components/UsersModal/UsersModal.jsx

154 lines
4.8 KiB
React
Raw Normal View History

2019-08-31 04:07:25 +05:00
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { Button, Modal, Table } from 'semantic-ui-react';
import { usePopup } from '../../lib/popup';
2019-08-31 04:07:25 +05:00
import UserAddStepContainer from '../../containers/UserAddStepContainer';
2019-08-31 04:07:25 +05:00
import Item from './Item';
const UsersModal = React.memo(
({
items,
onUpdate,
onUsernameUpdate,
onUsernameUpdateMessageDismiss,
onEmailUpdate,
onEmailUpdateMessageDismiss,
onPasswordUpdate,
onPasswordUpdateMessageDismiss,
onDelete,
onClose,
}) => {
const [t] = useTranslation();
2019-08-31 04:07:25 +05:00
const handleUpdate = useCallback(
(id, data) => {
onUpdate(id, data);
},
[onUpdate],
);
2019-08-31 04:07:25 +05:00
const handleUsernameUpdate = useCallback(
(id, data) => {
onUsernameUpdate(id, data);
},
[onUsernameUpdate],
);
2019-08-31 04:07:25 +05:00
const handleUsernameUpdateMessageDismiss = useCallback(
(id) => {
onUsernameUpdateMessageDismiss(id);
},
[onUsernameUpdateMessageDismiss],
);
const handleEmailUpdate = useCallback(
(id, data) => {
onEmailUpdate(id, data);
},
[onEmailUpdate],
);
const handleEmailUpdateMessageDismiss = useCallback(
(id) => {
onEmailUpdateMessageDismiss(id);
},
[onEmailUpdateMessageDismiss],
);
const handlePasswordUpdate = useCallback(
(id, data) => {
onPasswordUpdate(id, data);
},
[onPasswordUpdate],
);
const handlePasswordUpdateMessageDismiss = useCallback(
(id) => {
onPasswordUpdateMessageDismiss(id);
},
[onPasswordUpdateMessageDismiss],
);
const handleDelete = useCallback(
(id) => {
onDelete(id);
},
[onDelete],
);
const UserAddPopupContainer = usePopup(UserAddStepContainer);
return (
<Modal open closeIcon size="large" centered={false} onClose={onClose}>
<Modal.Header>
{t('common.users', {
context: 'title',
})}
</Modal.Header>
<Modal.Content scrolling>
<Table unstackable basic="very">
<Table.Header>
<Table.Row>
<Table.HeaderCell />
<Table.HeaderCell width={4}>{t('common.name')}</Table.HeaderCell>
<Table.HeaderCell width={4}>{t('common.username')}</Table.HeaderCell>
<Table.HeaderCell width={4}>{t('common.email')}</Table.HeaderCell>
<Table.HeaderCell>{t('common.administrator')}</Table.HeaderCell>
<Table.HeaderCell />
</Table.Row>
</Table.Header>
<Table.Body>
{items.map((item) => (
<Item
key={item.id}
email={item.email}
username={item.username}
name={item.name}
avatarUrl={item.avatarUrl}
organization={item.organization}
phone={item.phone}
isAdmin={item.isAdmin}
isLocked={item.isLocked}
emailUpdateForm={item.emailUpdateForm}
passwordUpdateForm={item.passwordUpdateForm}
usernameUpdateForm={item.usernameUpdateForm}
onUpdate={(data) => handleUpdate(item.id, data)}
onUsernameUpdate={(data) => handleUsernameUpdate(item.id, data)}
onUsernameUpdateMessageDismiss={() => handleUsernameUpdateMessageDismiss(item.id)}
onEmailUpdate={(data) => handleEmailUpdate(item.id, data)}
onEmailUpdateMessageDismiss={() => handleEmailUpdateMessageDismiss(item.id)}
onPasswordUpdate={(data) => handlePasswordUpdate(item.id, data)}
onPasswordUpdateMessageDismiss={() => handlePasswordUpdateMessageDismiss(item.id)}
onDelete={() => handleDelete(item.id)}
/>
))}
</Table.Body>
</Table>
</Modal.Content>
<Modal.Actions>
<UserAddPopupContainer>
<Button positive content={t('action.addUser')} />
</UserAddPopupContainer>
</Modal.Actions>
</Modal>
);
},
);
2019-08-31 04:07:25 +05:00
UsersModal.propTypes = {
items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
onUpdate: PropTypes.func.isRequired,
onUsernameUpdate: PropTypes.func.isRequired,
onUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
onEmailUpdate: PropTypes.func.isRequired,
onEmailUpdateMessageDismiss: PropTypes.func.isRequired,
onPasswordUpdate: PropTypes.func.isRequired,
onPasswordUpdateMessageDismiss: PropTypes.func.isRequired,
2019-08-31 04:07:25 +05:00
onDelete: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
};
export default UsersModal;