diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/Table/TableHead/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/Table/TableHead/index.js index 55a1ade93f..e595312ad5 100644 --- a/packages/core/admin/admin/src/pages/Users/ListPage/Table/TableHead/index.js +++ b/packages/core/admin/admin/src/pages/Users/ListPage/Table/TableHead/index.js @@ -10,33 +10,29 @@ import { VisuallyHidden, } from '@strapi/parts'; import { SortIcon, useQueryParams } from '@strapi/helper-plugin'; +import PropTypes from 'prop-types'; -const TableHead = () => { +const TableHead = ({ headers, withMainAction, withBulkActions }) => { const [{ query }, setQuery] = useQueryParams(); const sort = query.sort; const [sortBy, sortOrder] = sort.split(':'); - const headers = [ - { label: 'Name', value: 'firstname', isSortable: true }, - { label: 'Email', value: 'email', isSortable: true }, - { label: 'Roles', value: 'roles', isSortable: false }, - { label: 'Username', value: 'username', isSortable: true }, - { label: 'Active User', value: 'isActive', isSortable: false }, - ]; return ( - - - - {headers.map(({ label, value, isSortable }) => { - const isSorted = sortBy === value; + {withMainAction && ( + + + + )} + {headers.map(({ name, metadatas: { sortable: isSortable, label } }) => { + const isSorted = sortBy === name; const isUp = sortOrder === 'ASC'; const handleClickSort = (shouldAllowClick = true) => { if (isSortable && shouldAllowClick) { const nextSortOrder = isSorted && sortOrder === 'ASC' ? 'DESC' : 'ASC'; - const nextSort = `${value}:${nextSortOrder}`; + const nextSort = `${name}:${nextSortOrder}`; setQuery({ sort: nextSort, @@ -46,7 +42,7 @@ const TableHead = () => { return ( { ); })} - - Actions - + {withBulkActions && ( + + Actions + + )} ); }; +TableHead.defaultProps = { + headers: [], + withBulkActions: false, + withMainAction: false, +}; + +TableHead.propTypes = { + headers: PropTypes.array, + withBulkActions: PropTypes.bool, + withMainAction: PropTypes.bool, +}; + export default TableHead; diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/Table/TableRows/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/Table/TableRows/index.js new file mode 100644 index 0000000000..b71d40cc6b --- /dev/null +++ b/packages/core/admin/admin/src/pages/Users/ListPage/Table/TableRows/index.js @@ -0,0 +1,83 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { BaseCheckbox, Box, IconButton, Tbody, Td, Text, Tr, Row } from '@strapi/parts'; +import { EditIcon, DeleteIcon } from '@strapi/icons'; +import { useHistory } from 'react-router-dom'; + +const TableRows = ({ canUpdate, canDelete, headers, withMainAction, withBulkActions, rows }) => { + const { + push, + location: { pathname }, + } = useHistory(); + + return ( + + {rows.map(data => { + return ( + + {withMainAction && ( + + + + )} + {headers.map(({ key, cellFormatter, name, ...rest }) => { + return ( + + {typeof cellFormatter === 'function' ? ( + cellFormatter(data, { key, name, ...rest }) + ) : ( + {data[name] || '-'} + )} + + ); + })} + + {withBulkActions && ( + + + {canUpdate && ( + push(`${pathname}/${data.id}`)} + label="Edit" + noBorder + icon={} + /> + )} + {canDelete && ( + + console.log('delete')} + label="Delete" + noBorder + icon={} + /> + + )} + + + )} + + ); + })} + + ); +}; + +TableRows.defaultProps = { + canDelete: false, + canUpdate: false, + rows: [], + withBulkActions: false, + withMainAction: false, +}; + +TableRows.propTypes = { + canDelete: PropTypes.bool, + canUpdate: PropTypes.bool, + headers: PropTypes.array.isRequired, + rows: PropTypes.array, + withBulkActions: PropTypes.bool, + withMainAction: PropTypes.bool, +}; + +export default TableRows; diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/Table/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/Table/index.js index be8e5bd005..6696cd3f40 100644 --- a/packages/core/admin/admin/src/pages/Users/ListPage/Table/index.js +++ b/packages/core/admin/admin/src/pages/Users/ListPage/Table/index.js @@ -1,25 +1,17 @@ -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { - BaseCheckbox, - Box, - IconButton, - Table as TableCompo, - Tbody, - Td, - Text, - Tr, - Row, -} from '@strapi/parts'; -import { EditIcon, DeleteIcon } from '@strapi/icons'; -import { EmptyBodyTable, Status, useQueryParams } from '@strapi/helper-plugin'; +import { Table as TableCompo } from '@strapi/parts'; +import { EmptyBodyTable, useQueryParams } from '@strapi/helper-plugin'; import TableHead from './TableHead'; +import TableRows from './TableRows'; -const Table = ({ canDelete, canUpdate, rows }) => { +const Table = ({ canDelete, canUpdate, headers, rows, withBulkActions, withMainAction }) => { + const [entriesToDelete, setEntriesToDelete] = useState([]); const [{ query }] = useQueryParams(); const ROW_COUNT = rows.length + 1; const COL_COUNT = 7; const hasFilters = query.filters !== undefined; + const content = hasFilters ? { id: 'content-manager.components.TableEmpty.withFilters', @@ -30,75 +22,42 @@ const Table = ({ canDelete, canUpdate, rows }) => { return ( - + {!rows.length ? ( ) : ( - - {rows.map(entry => ( - - - - - - - {entry.firstname} {entry.lastname} - - - {entry.email} - - {entry.roles.map(role => role.name).join(',\n')} - - - {entry.username || '-'} - - - - - {entry.isActive ? 'Active' : 'Inactive'} - - - - - {canUpdate && ( - console.log('edit')} - label="Edit" - noBorder - icon={} - /> - )} - {canDelete && ( - - console.log('delete')} - label="Delete" - noBorder - icon={} - /> - - )} - - - - ))} - + )} ); }; Table.defaultProps = { + headers: [], rows: [], + withBulkActions: false, + withMainAction: false, }; Table.propTypes = { canDelete: PropTypes.bool.isRequired, canUpdate: PropTypes.bool.isRequired, + headers: PropTypes.array, rows: PropTypes.array, + withBulkActions: PropTypes.bool, + withMainAction: PropTypes.bool, }; export default Table; diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/index.js index b636f010ba..b4f6d59e73 100644 --- a/packages/core/admin/admin/src/pages/Users/ListPage/index.js +++ b/packages/core/admin/admin/src/pages/Users/ListPage/index.js @@ -17,9 +17,9 @@ import { useIntl } from 'react-intl'; import { useQuery } from 'react-query'; import get from 'lodash/get'; import adminPermissions from '../../../permissions'; - import Table from './Table'; import fetchData from './utils/api'; +import tableHeaders from './utils/tableHeaders'; const ListPage = () => { const { @@ -269,7 +269,10 @@ const ListPage = () => { canCreate={canCreate} canDelete={canDelete} canUpdate={canUpdate} + headers={tableHeaders} rows={data?.results} + withBulkActions + withMainAction={canDelete} /> )} diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/utils/tableHeaders.js b/packages/core/admin/admin/src/pages/Users/ListPage/utils/tableHeaders.js new file mode 100644 index 0000000000..3fd16b620a --- /dev/null +++ b/packages/core/admin/admin/src/pages/Users/ListPage/utils/tableHeaders.js @@ -0,0 +1,47 @@ +import React from 'react'; +import { Text, Row } from '@strapi/parts'; +import { Status } from '@strapi/helper-plugin'; + +const tableHeaders = [ + { + name: 'firstname', + key: 'firstname', + metadatas: { label: 'Name', sortable: true }, + }, + { + key: 'email', + name: 'email', + metadatas: { label: 'Email', sortable: true }, + }, + { + key: 'roles', + name: 'roles', + metadatas: { label: 'Roles', sortable: false }, + /* eslint-disable react/prop-types */ + cellFormatter: ({ roles }) => { + return {roles.map(role => role.name).join(',\n')}; + }, + /* eslint-enable react/prop-types */ + }, + { + key: 'username', + name: 'username', + metadatas: { label: 'Username', sortable: true }, + }, + { + key: 'isActive', + name: 'isActive', + metadatas: { label: 'Active User', sortable: false }, + // eslint-disable-next-line react/prop-types + cellFormatter: ({ isActive }) => { + return ( + + + {isActive ? 'Active' : 'Inactive'} + + ); + }, + }, +]; + +export default tableHeaders;