yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-07 12:32:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

added a column for provider icon

Browse Source
This commit is contained in:
ronronscelestes 2021-08-18 11:45:34 +02:00
parent 4c73122e76
commit 1929d72e3f
1 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/plugins/users-permissions/admin/src/pages/Providers/index.js
View File

@ -25,9 +25,9 @@ import { Main } from '@strapi/parts/Main';
import { Stack } from '@strapi/parts/Stack'; import { Stack } from '@strapi/parts/Stack';
import { Table, Thead, Tr, Th, Tbody, Td } from '@strapi/parts/Table'; import { Table, Thead, Tr, Th, Tbody, Td } from '@strapi/parts/Table';
import { Text, TableLabel } from '@strapi/parts/Text'; import { Text, TableLabel } from '@strapi/parts/Text';
// import { Row as FlexRow } from '@strapi/parts/Row'; import { Row as FlexRow } from '@strapi/parts/Row';
import { VisuallyHidden } from '@strapi/parts/VisuallyHidden'; import { VisuallyHidden } from '@strapi/parts/VisuallyHidden';
// import { Box } from '@strapi/parts/Box'; import { Box } from '@strapi/parts/Box';
import { IconButton } from '@strapi/parts/IconButton'; import { IconButton } from '@strapi/parts/IconButton';
import EditIcon from '@strapi/icons/EditIcon'; import EditIcon from '@strapi/icons/EditIcon';
import forms from './utils/forms'; import forms from './utils/forms';
@ -36,7 +36,7 @@ import ModalForm from '../../components/ModalForm';
import { getRequestURL, getTrad } from '../../utils'; import { getRequestURL, getTrad } from '../../utils';
import { useForm } from '../../hooks'; import { useForm } from '../../hooks';
import pluginPermissions from '../../permissions'; import pluginPermissions from '../../permissions';
// import Settings from '@strapi/icons/Settings'; import Settings from '@strapi/icons/Settings';
const ProvidersPage = () => { const ProvidersPage = () => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
@ -68,7 +68,7 @@ const ProvidersPage = () => {
} = useForm('providers', updatePermissions); } = useForm('providers', updatePermissions);
const providers = useMemo(() => createProvidersArray(modifiedData), [modifiedData]); const providers = useMemo(() => createProvidersArray(modifiedData), [modifiedData]);
const rowCount = providers.length;
// const enabledProvidersCount = useMemo( // const enabledProvidersCount = useMemo(
// () => providers.filter(provider => provider.enabled).length, // () => providers.filter(provider => provider.enabled).length,
// [providers] // [providers]
@ -222,9 +222,14 @@ const ProvidersPage = () => {
title={formatMessage({ id: getTrad('HeaderNav.link.providers') })} title={formatMessage({ id: getTrad('HeaderNav.link.providers') })}
/> />
<ContentLayout> <ContentLayout>
<Table colCount={3} rowCount={2}> <Table colCount={4} rowCount={rowCount + 1}>
<Thead> <Thead>
<Tr> <Tr>
<Th>
<TableLabel>
<VisuallyHidden>image</VisuallyHidden>
</TableLabel>
</Th>
<Th> <Th>
<TableLabel>name</TableLabel> <TableLabel>name</TableLabel>
</Th> </Th>
@ -234,28 +239,24 @@ const ProvidersPage = () => {
<Th> <Th>
<TableLabel> <TableLabel>
<VisuallyHidden>Settings</VisuallyHidden> <VisuallyHidden>Settings</VisuallyHidden>
{/* <Box hasRadius padding={2} shadow="filterShadow">
<Settings />
</Box> */}
</TableLabel> </TableLabel>
</Th> </Th>
</Tr> </Tr>
</Thead> </Thead>
<Tbody> <Tbody>
{providers.map(provider => ( {providers.map(provider => (
<Tr key={provider.name}> <Tr key={provider.name}>
<Td width="40%"> <Td width="">
{/* <FlexRow alignItems='center'> */} <FontAwesomeIcon icon={provider.icon} />
<Stack horizontal size={5}>
<FontAwesomeIcon icon={provider.icon} />
<Text highlighted textColor="neutral800">
{provider.name}
</Text>
</Stack>
{/* </FlexRow> */}
</Td> </Td>
<Td width="60%"> <Td width="45%">
<Text textColor="neutral800">{provider.enabled ? 'enabled' : 'disabled'}</Text> <Text highlighted textColor="neutral800">
{provider.name}
</Text>
</Td>
<Td width="65%">
<Text textColor={provider.enabled ? 'success600' : 'danger600'}>{provider.enabled ? 'enabled' : 'disabled'}</Text>
</Td> </Td>
<Td> <Td>
{canUpdate && ( {canUpdate && (