yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-07 15:49:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

integrated DS + deleteOne, updateOne

Browse Source
This commit is contained in:
ronronscelestes 2021-08-13 12:38:21 +02:00
parent ec1d8e6829
commit 73a03fbfc8
1 changed files with 187 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

237
packages/core/admin/admin/src/pages/Webhooks/ListView/index.js
View File

@ -6,30 +6,43 @@
import React, { useEffect, useReducer, useRef, useState } from 'react'; import React, { useEffect, useReducer, useRef, useState } from 'react';
import { useHistory, useLocation } from 'react-router-dom'; import { useHistory, useLocation } from 'react-router-dom';
import { Header, List } from '@buffetjs/custom';
import { Button } from '@buffetjs/core';
import { Plus } from '@buffetjs/icons'; import { Plus } from '@buffetjs/icons';
import { omit } from 'lodash';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { import {
request, request,
ListButton,
PopUpWarning, PopUpWarning,
useRBAC, useRBAC,
LoadingIndicatorPage, LoadingIndicatorPage,
EmptyState, EmptyState,
useNotification, useNotification,
} from '@strapi/helper-plugin'; } from '@strapi/helper-plugin';
import adminPermissions from '../../../permissions';
import PageTitle from '../../../components/SettingsPageTitle'; import { HeaderLayout, Layout, ContentLayout } from '@strapi/parts/Layout';
import { ListRow } from '../../../components/Webhooks'; import { Row } from '@strapi/parts/Row';
import Wrapper from './Wrapper'; import { Box } from '@strapi/parts/Box';
import { IconButton } from '@strapi/parts/IconButton';
import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
import { Table, Thead, Tr, Th, Tbody, Td, TFooter } from '@strapi/parts/Table';
import { Text, TableLabel } from '@strapi/parts/Text';
import { Button } from '@strapi/parts/Button';
import { VisuallyHidden } from '@strapi/parts/VisuallyHidden';
import { Switch } from '@strapi/parts/Switch';
import AddIcon from '@strapi/icons/AddIcon';
import EditIcon from '@strapi/icons/EditIcon';
import DeleteIcon from '@strapi/icons/DeleteIcon';
import reducer, { initialState } from './reducer'; import reducer, { initialState } from './reducer';
import PageTitle from '../../../components/SettingsPageTitle';
import adminPermissions from '../../../permissions';
function ListView() { function ListView() {
const { const {
isLoading, isLoading,
allowedActions: { canCreate, canRead, canUpdate, canDelete }, allowedActions: {
canCreate,
canRead,
// canUpdate,
// canDelete,
},
} = useRBAC(adminPermissions.settings.webhooks); } = useRBAC(adminPermissions.settings.webhooks);
const toggleNotification = useNotification(); const toggleNotification = useNotification();
const isMounted = useRef(true); const isMounted = useRef(true);
@ -101,30 +114,30 @@ function ListView() {
// List props // List props
const rowsCount = webhooks.length; const rowsCount = webhooks.length;
const titleLabel = `${ // const titleLabel = `${
rowsCount > 1 // rowsCount > 1
? formatMessage({ id: 'Settings.webhooks.title' }) // ? formatMessage({ id: 'Settings.webhooks.title' })
: formatMessage({ id: 'Settings.webhooks.singular' }) // : formatMessage({ id: 'Settings.webhooks.singular' })
}`; // }`;
const title = `${rowsCount} ${titleLabel}`; // const title = `${rowsCount} ${titleLabel}`;
/* eslint-disable indent */ /* eslint-disable indent */
const deleteButtonProps = canDelete // const deleteButtonProps = canDelete
? { // ? {
color: 'delete', // color: 'delete',
disabled: !(webhooksToDelete.length > 0), // disabled: !(webhooksToDelete.length > 0),
label: formatMessage({ id: 'app.utils.delete' }), // label: formatMessage({ id: 'app.utils.delete' }),
onClick: () => setShowModal(true), // onClick: () => setShowModal(true),
type: 'button', // type: 'button',
} // }
: null; // : null;
/* eslint-enable indent */ /* eslint-enable indent */
const listProps = { // const listProps = {
title, // title,
button: deleteButtonProps, // button: deleteButtonProps,
items: webhooks, // items: webhooks,
}; // };
const fetchData = async () => { const fetchData = async () => {
try { try {
@ -151,6 +164,7 @@ function ListView() {
}; };
const handleChange = (value, id) => { const handleChange = (value, id) => {
// console.log(value, id);
dispatch({ dispatch({
type: 'SET_WEBHOOKS_TO_DELETE', type: 'SET_WEBHOOKS_TO_DELETE',
value, value,
@ -224,10 +238,10 @@ function ListView() {
id, id,
}); });
}; };
console.log(webhooks);
const handleEnabledChange = async (value, id) => { const handleEnabledChange = async (value, id) => {
// console.log(!value)
const webhookIndex = getWebhookIndex(id); const webhookIndex = getWebhookIndex(id);
const initialWebhookProps = webhooks[webhookIndex]; const initialWebhookProps = webhooks[webhookIndex];
const keys = [webhookIndex, 'isEnabled']; const keys = [webhookIndex, 'isEnabled'];
@ -276,29 +290,106 @@ function ListView() {
} }
return ( return (
<Wrapper> <Layout>
<PageTitle name="Webhooks" /> <PageTitle name="Webhooks" />
<Header {...headerProps} /> <HeaderLayout
{canRead && ( title={headerProps.title.label}
<div className="list-wrapper"> subtitle={headerProps.content}
primaryAction={(
<Button onClick={() => (canCreate ? handleGoTo('create') : {})} startIcon={<AddIcon />}>
{headerProps.actions[0].label}
</Button>
)}
/>
<ContentLayout>
<>
{rowsCount > 0 ? ( {rowsCount > 0 ? (
<List <Table
{...listProps} colCount={5}
customRowComponent={props => { rowCount={webhooks.length}
return ( footer={(
<ListRow <TFooter onClick={() => (canCreate ? handleGoTo('create') : {})} icon={<AddIcon />}>
{...props} Add another field to this collection type
canUpdate={canUpdate} </TFooter>
canDelete={canDelete} )}
onCheckChange={handleChange} >
onEditClick={handleGoTo} <Thead>
onDeleteCLick={handleDeleteClick} <Tr>
onEnabledChange={handleEnabledChange} <Th>
itemsToDelete={webhooksToDelete} <BaseCheckbox aria-label="Select all entries" />
</Th>
<Th>
<TableLabel>name</TableLabel>
</Th>
<Th>
<TableLabel>url</TableLabel>
</Th>
<Th>
<TableLabel>status</TableLabel>
</Th>
<Th>
<VisuallyHidden>actions</VisuallyHidden>
</Th>
</Tr>
</Thead>
<Tbody>
{webhooks.map(webhook => (
<Tr key={webhook.id}>
<Td>
<BaseCheckbox
aria-label={`Select ${webhook.name}`}
onValueChange={value => handleChange(value, webhook.id)}
id={`Select ${webhook.id}`}
name={`Select ${webhook.name}`}
/> />
); </Td>
<Td>
<Text highlighted textColor="neutral800">
{webhook.name}
</Text>
</Td>
<Td>
<Text textColor="neutral800">{webhook.url}</Text>
</Td>
<Td>
<Row>
<Switch
onLabel="Enabled"
offLabel="Not enabled"
label={`${webhook.name} status`}
selected={webhook.isEnabled}
onChange={() => handleEnabledChange(webhook.isEnabled, webhook.id)}
visibleLabels
/>
</Row>
</Td>
<Td>
<Row justifyContent="flex-end">
<IconButton
onClick={() => {
handleGoTo(webhook.id);
}} }}
label="Edit"
icon={<EditIcon />}
noBorder
/> />
<Box paddingLeft={1}>
<IconButton
onClick={() => {
handleDeleteClick(webhook.id);
}}
label="Delete"
icon={<DeleteIcon />}
noBorder
/>
</Box>
</Row>
</Td>
</Tr>
))}
</Tbody>
</Table>
) : ( ) : (
<EmptyState <EmptyState
title={formatMessage({ id: 'Settings.webhooks.list.empty.title' })} title={formatMessage({ id: 'Settings.webhooks.list.empty.title' })}
@ -307,17 +398,57 @@ function ListView() {
linkText={formatMessage({ id: 'Settings.webhooks.list.empty.link' })} linkText={formatMessage({ id: 'Settings.webhooks.list.empty.link' })}
/> />
)} )}
<ListButton>{canCreate && <Button {...omit(newButtonProps, 'Component')} />}</ListButton> </>
</div> </ContentLayout>
)}
<PopUpWarning <PopUpWarning
isOpen={showModal} isOpen={showModal}
toggleModal={() => setShowModal(!showModal)} toggleModal={() => setShowModal(!showModal)}
popUpWarningType="danger" popUpWarningType="danger"
onConfirm={handleConfirmDelete} onConfirm={handleConfirmDelete}
/> />
</Wrapper> </Layout>
); );
} }
export default ListView; export default ListView;
// TO KEEP AS EXEMPLE UNTIL WE KNOW HOW TO DEAL WITH EVENTS AND FUNCTIONS DEFINED IN THIS COMPONENT
// {canRead && (
// <>
// {rowsCount > 0 ?
// (
// <List
// {...listProps}
// customRowComponent={props => {
// return (
// <ListRow
// {...props}
// canUpdate={canUpdate}
// canDelete={canDelete}
// onCheckChange={handleChange}
// onEditClick={handleGoTo}
// onDeleteCLick={handleDeleteClick}
// onEnabledChange={handleEnabledChange}
// itemsToDelete={webhooksToDelete}
// />
// );
// }}
// />
// ) : (
// <EmptyState
// title={formatMessage({ id: 'Settings.webhooks.list.empty.title' })}
// description={formatMessage({ id: 'Settings.webhooks.list.empty.description' })}
// link="https://strapi.io/documentation/developer-docs/latest/development/backend-customization.html#webhooks"
// linkText={formatMessage({ id: 'Settings.webhooks.list.empty.link' })}
// />
// )}
// <ListButton>{canCreate && <Button {...omit(newButtonProps, 'Component')} />}</ListButton>
// </>
// )}
// <PopUpWarning
// isOpen={showModal}
// toggleModal={() => setShowModal(!showModal)}
// popUpWarningType="danger"
// onConfirm={handleConfirmDelete}
// />