@craftercms/studio-ui/components/UsersGrid/UsersGridUI.js

Services, components, models & utils to build CrafterCMS authoring extensions.

/*
 * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License version 3 as published by
 * the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

/*
 * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as published by
 * the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
import TableContainer from '@mui/material/TableContainer';
import Table from '@mui/material/Table';
import TableHead from '@mui/material/TableHead';
import Typography from '@mui/material/Typography';
import { FormattedMessage } from 'react-intl';
import TableBody from '@mui/material/TableBody';
import React from 'react';
import Avatar from '@mui/material/Avatar';
import Pagination from '../Pagination';
import useStyles from './styles';
import GlobalAppGridRow from '../GlobalAppGridRow';
import GlobalAppGridCell from '../GlobalAppGridCell';
import Box from '@mui/material/Box';
export function UsersGridUI(props) {
  const { users, onRowClicked, onPageChange, onRowsPerPageChange } = props;
  const { classes } = useStyles();
  return React.createElement(
    Box,
    { display: 'flex', flexDirection: 'column' },
    React.createElement(
      TableContainer,
      null,
      React.createElement(
        Table,
        { className: classes.tableRoot },
        React.createElement(
          TableHead,
          null,
          React.createElement(
            GlobalAppGridRow,
            { className: 'hoverDisabled' },
            React.createElement(
              GlobalAppGridCell,
              { align: 'center', className: 'avatar' },
              React.createElement('span', null)
            ),
            React.createElement(
              GlobalAppGridCell,
              { align: 'left', className: 'pl20 width20' },
              React.createElement(
                Typography,
                { variant: 'subtitle2' },
                React.createElement(FormattedMessage, { id: 'words.name', defaultMessage: 'Name' })
              )
            ),
            React.createElement(
              GlobalAppGridCell,
              { align: 'left', className: 'width20' },
              React.createElement(
                Typography,
                { variant: 'subtitle2' },
                React.createElement(FormattedMessage, { id: 'words.username', defaultMessage: 'Username' })
              )
            ),
            React.createElement(
              GlobalAppGridCell,
              { align: 'left', className: 'width60' },
              React.createElement(
                Typography,
                { variant: 'subtitle2' },
                React.createElement(FormattedMessage, { id: 'words.email', defaultMessage: 'E-mail' })
              )
            )
          )
        ),
        React.createElement(
          TableBody,
          null,
          users === null || users === void 0
            ? void 0
            : users.map((user, i) => {
                var _a, _b;
                return React.createElement(
                  GlobalAppGridRow,
                  { key: user.id, onClick: () => onRowClicked(user) },
                  React.createElement(
                    GlobalAppGridCell,
                    { align: 'center', className: 'avatar' },
                    React.createElement(
                      Avatar,
                      { className: classes.avatar },
                      user.firstName.charAt(0),
                      (_b = (_a = user.lastName) === null || _a === void 0 ? void 0 : _a.charAt(0)) !== null &&
                        _b !== void 0
                        ? _b
                        : ''
                    )
                  ),
                  React.createElement(
                    GlobalAppGridCell,
                    { align: 'left', className: 'pl20 width20' },
                    user.firstName,
                    ' ',
                    user.lastName
                  ),
                  React.createElement(
                    GlobalAppGridCell,
                    { align: 'left', className: 'width20' },
                    React.createElement(
                      Typography,
                      { variant: 'body2', noWrap: true, title: user.username },
                      user.username
                    )
                  ),
                  React.createElement(GlobalAppGridCell, { align: 'left', className: 'width60' }, user.email)
                );
              })
        )
      )
    ),
    React.createElement(Pagination, {
      mode: 'table',
      count: users.total,
      rowsPerPage: users.limit,
      page: users && Math.ceil(users.offset / users.limit),
      onPageChange: (e, page) => onPageChange(page),
      onRowsPerPageChange: onRowsPerPageChange
    })
  );
}
export default UsersGridUI;