import { Helmet } from 'react-helmet-async';
import { filter } from 'lodash';
import { sentenceCase } from 'change-case';
import { useState } from 'react';
// @mui
import {
Card,
Table,
Stack,
Paper,
Avatar,
Button,
Popover,
Checkbox,
TableRow,
MenuItem,
TableBody,
TableCell,
Container,
Typography,
IconButton,
TableContainer,
TablePagination,
} from '@mui/material';
// components
import Label from '../components/label';
import Iconify from '../components/iconify';
import Scrollbar from '../components/scrollbar';
// sections
import { UserListHead, UserListToolbar } from '../sections/@dashboard/user';
// mock
import USERLIST from '../_mock/user';
// ----------------------------------------------------------------------
const TABLE_HEAD = [
{ id: 'name', label: 'Name', alignRight: false },
{ id: 'company', label: 'Company', alignRight: false },
{ id: 'role', label: 'Role', alignRight: false },
{ id: 'isVerified', label: 'Verified', alignRight: false },
{ id: 'status', label: 'Status', alignRight: false },
{ id: '' },
];
// ----------------------------------------------------------------------
function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
function getComparator(order, orderBy) {
return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
function applySortFilter(array, comparator, query) {
const stabilizedThis = array.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) return order;
return a[1] - b[1];
});
if (query) {
return filter(array, (_user) => _user.name.toLowerCase().indexOf(query.toLowerCase()) !== -1);
}
return stabilizedThis.map((el) => el[0]);
}
export default function UserPage() {
const [open, setOpen] = useState(null);
const [page, setPage] = useState(0);
const [order, setOrder] = useState('asc');
const [selected, setSelected] = useState([]);
const [orderBy, setOrderBy] = useState('name');
const [filterName, setFilterName] = useState('');
const [rowsPerPage, setRowsPerPage] = useState(5);
const handleOpenMenu = (event) => {
setOpen(event.currentTarget);
};
const handleCloseMenu = () => {
setOpen(null);
};
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
};
const handleSelectAllClick = (event) => {
if (event.target.checked) {
const newSelecteds = USERLIST.map((n) => n.name);
setSelected(newSelecteds);
return;
}
setSelected([]);
};
const handleClick = (event, name) => {
const selectedIndex = selected.indexOf(name);
let newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
}
setSelected(newSelected);
};
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setPage(0);
setRowsPerPage(parseInt(event.target.value, 10));
};
const handleFilterByName = (event) => {
setPage(0);
setFilterName(event.target.value);
};
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - USERLIST.length) : 0;
const filteredUsers = applySortFilter(USERLIST, getComparator(order, orderBy), filterName);
const isNotFound = !filteredUsers.length && !!filterName;
return (
<>
User | Minimal UI
User
}>
New User
{filteredUsers.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => {
const { id, name, role, status, company, avatarUrl, isVerified } = row;
const selectedUser = selected.indexOf(name) !== -1;
return (
handleClick(event, name)} />
{name}
{company}
{role}
{isVerified ? 'Yes' : 'No'}
);
})}
{emptyRows > 0 && (
)}
{isNotFound && (
Not found
No results found for
"{filterName}".
Try checking for typos or using complete words.
)}
>
);
}