Init delete users

Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette 2021-09-01 18:15:23 +02:00
parent e4af943104
commit 6c97ef6e67

View File

@ -1,13 +1,25 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Table as TableCompo } from '@strapi/parts'; import { Box, Row, Button, Table as TableCompo, Subtitle } from '@strapi/parts';
import { EmptyBodyTable, useQueryParams } from '@strapi/helper-plugin'; import { EmptyBodyTable, useQueryParams } from '@strapi/helper-plugin';
import { useIntl } from 'react-intl';
import { DeleteIcon } from '@strapi/icons';
import styled from 'styled-components';
import TableHead from './TableHead'; import TableHead from './TableHead';
import TableRows from './TableRows'; import TableRows from './TableRows';
const BlockActions = styled(Row)`
& > * + * {
margin-left: ${({ theme }) => theme.spaces[2]};
}
margin-left: ${({ pullRight }) => (pullRight ? 'auto' : undefined)};
`;
const Table = ({ canDelete, canUpdate, headers, rows, withBulkActions, withMainAction }) => { const Table = ({ canDelete, canUpdate, headers, rows, withBulkActions, withMainAction }) => {
const [entriesToDelete, setEntriesToDelete] = useState([]); const [entriesToDelete, setEntriesToDelete] = useState([]);
const [{ query }] = useQueryParams(); const [{ query }] = useQueryParams();
const { formatMessage } = useIntl();
const ROW_COUNT = rows.length + 1; const ROW_COUNT = rows.length + 1;
const COL_COUNT = headers.length + (withBulkActions ? 1 : 0) + (withMainAction ? 1 : 0); const COL_COUNT = headers.length + (withBulkActions ? 1 : 0) + (withMainAction ? 1 : 0);
const hasFilters = query.filters !== undefined; const hasFilters = query.filters !== undefined;
@ -40,30 +52,61 @@ const Table = ({ canDelete, canUpdate, headers, rows, withBulkActions, withMainA
}; };
return ( return (
<TableCompo colCount={COL_COUNT} rowCount={ROW_COUNT}> <>
<TableHead {entriesToDelete.length > 0 && (
areAllEntriesSelected={areAllEntriesSelected} <Box>
entriesToDelete={entriesToDelete} <Box paddingBottom={4}>
headers={headers} <Row justifyContent="space-between">
onSelectAll={handleSelectAll} <BlockActions>
withMainAction={withMainAction} <Subtitle textColor="neutral600">
withBulkActions={withBulkActions} {/* FIXME: create a common translation */}
/> {formatMessage(
{!rows.length ? ( {
<EmptyBodyTable colSpan={COL_COUNT} content={content} /> id: 'Settings.webhooks.to.delete',
) : ( defaultMessage:
<TableRows '{webhooksToDeleteLength, plural, one {# asset} other {# assets}} selected',
canDelete={canDelete} },
canUpdate={canUpdate} { webhooksToDeleteLength: entriesToDelete.length }
)}
</Subtitle>
<Button
// onClick={() => handleDeleteClick('all')}
startIcon={<DeleteIcon />}
size="L"
variant="danger-light"
>
Delete
</Button>
</BlockActions>
</Row>
</Box>
</Box>
)}
<TableCompo colCount={COL_COUNT} rowCount={ROW_COUNT}>
<TableHead
areAllEntriesSelected={areAllEntriesSelected}
entriesToDelete={entriesToDelete} entriesToDelete={entriesToDelete}
headers={headers} headers={headers}
onSelectRow={handleSelectRow} onSelectAll={handleSelectAll}
rows={rows}
withBulkActions={withBulkActions}
withMainAction={withMainAction} withMainAction={withMainAction}
withBulkActions={withBulkActions}
/> />
)} {!rows.length ? (
</TableCompo> <EmptyBodyTable colSpan={COL_COUNT} content={content} />
) : (
<TableRows
canDelete={canDelete}
canUpdate={canUpdate}
entriesToDelete={entriesToDelete}
headers={headers}
onSelectRow={handleSelectRow}
rows={rows}
withBulkActions={withBulkActions}
withMainAction={withMainAction}
/>
)}
</TableCompo>
</>
); );
}; };