Initial commit

client/src/components/UsersModal/Item.jsx

@@ -0,0 +1,52 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button, Radio, Table } from 'semantic-ui-react';
+
+import DeletePopup from '../DeletePopup';
+
+import styles from './Item.module.css';
+
+const Item = React.memo(({
+  name, email, isAdmin, onUpdate, onDelete,
+}) => {
+  const [t] = useTranslation();
+
+  const handleIsAdminChange = useCallback(() => {
+    onUpdate({
+      isAdmin: !isAdmin,
+    });
+  }, [isAdmin, onUpdate]);
+
+  return (
+    <Table.Row>
+      <Table.Cell>{name}</Table.Cell>
+      <Table.Cell>{email}</Table.Cell>
+      <Table.Cell collapsing>
+        <Radio toggle checked={isAdmin} onChange={handleIsAdminChange} />
+      </Table.Cell>
+      <Table.Cell collapsing>
+        <DeletePopup
+          title={t('common.deleteUser', {
+            context: 'title',
+          })}
+          content={t('common.areYouSureYouWantToDeleteThisUser')}
+          buttonContent={t('action.deleteUser')}
+          onConfirm={onDelete}
+        >
+          <Button content={t('action.delete')} className={styles.button} />
+        </DeletePopup>
+      </Table.Cell>
+    </Table.Row>
+  );
+});
+
+Item.propTypes = {
+  name: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  isAdmin: PropTypes.bool.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+};
+
+export default Item;

client/src/components/UsersModal/Item.module.css

@@ -0,0 +1,3 @@
+.button {
+  box-shadow: 0 1px 0 #cbcccc;
+}

client/src/components/UsersModal/UsersModal.jsx

@@ -0,0 +1,83 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import {
+  Button, Header, Modal, Table,
+} from 'semantic-ui-react';
+
+import AddUserPopupContainer from '../../containers/AddUserPopupContainer';
+import Item from './Item';
+
+import styles from './UsersModal.module.css';
+
+const UsersModal = React.memo(({
+  items, onUpdate, onDelete, onClose,
+}) => {
+  const [t] = useTranslation();
+
+  const handleUpdate = useCallback(
+    (id, data) => {
+      onUpdate(id, data);
+    },
+    [onUpdate],
+  );
+
+  const handleDelete = useCallback(
+    (id) => {
+      onDelete(id);
+    },
+    [onDelete],
+  );
+
+  return (
+    <Modal open closeIcon size="large" onClose={onClose}>
+      <Modal.Content>
+        <Header size="huge" className={styles.title}>
+          {t('common.users', {
+            context: 'title',
+          })}
+        </Header>
+        <Table basic="very">
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>{t('common.name')}</Table.HeaderCell>
+              <Table.HeaderCell>{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}
+                name={item.name}
+                email={item.email}
+                isAdmin={item.isAdmin}
+                onUpdate={(data) => handleUpdate(item.id, data)}
+                onDelete={() => handleDelete(item.id)}
+              />
+            ))}
+          </Table.Body>
+          <Table.Footer>
+            <Table.Row>
+              <Table.HeaderCell colSpan="4">
+                <AddUserPopupContainer>
+                  <Button positive content={t('action.addUser')} className={styles.button} />
+                </AddUserPopupContainer>
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Footer>
+        </Table>
+      </Modal.Content>
+    </Modal>
+  );
+});
+
+UsersModal.propTypes = {
+  items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  onUpdate: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default UsersModal;

client/src/components/UsersModal/UsersModal.module.css

@@ -0,0 +1,11 @@
+.button {
+  float: right;
+  height: 32px;
+  line-height: 20px;
+  margin-top: -2px;
+  padding: 6px 12px;
+}
+
+.title {
+  display: inline-block;
+}

client/src/components/UsersModal/index.js

@@ -0,0 +1,3 @@
+import UsersModal from './UsersModal';
+
+export default UsersModal;