yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-10-10 15:43:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Webhook delete with popup warning

Browse Source
This commit is contained in:
Virginie Ky 2019-12-18 09:45:21 +01:00
parent 72af5851b3
commit 6de7367ea6
5 changed files with 116 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/strapi-admin/admin/src/components/ListRow/StyledListRow.js Normal file
View File

@ -0,0 +1,44 @@
/**
*
* StyledListRow
*
*/
import styled from 'styled-components';
import { CustomRow as Row } from '@buffetjs/styles';
import { sizes } from 'strapi-helper-plugin';
const StyledListRow = styled(Row)`
td {
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:first-of-type {
padding-left: 30px;
width: 65px;
}
&:nth-of-type(2) {
max-width: 158px;
}
&:nth-of-type(3) {
max-width: 300px;
}
&:nth-of-type(4) {
min-width: 125px;
}
&:nth-of-type(5) {
.popup-wrapper {
width: 0;
}
}
@media (min-width: ${sizes.wide}) {
&:nth-of-type(3) {
max-width: 400px;
}
}
}
`;
export default StyledListRow;

68
packages/strapi-admin/admin/src/components/ListRow/index.js
View File

@ -4,12 +4,13 @@
*
*/
import React from 'react';
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { CustomRow as Row } from '@buffetjs/styles';
import { PopUpWarning } from 'strapi-helper-plugin';
import { Checkbox, IconLinks } from '@buffetjs/core';
import Switch from '../Switch';
import StyledListRow from './StyledListRow';
function ListRow({
id,
@ -20,6 +21,8 @@ function ListRow({
onDeleteCLick,
onEditClick,
}) {
const [showModal, setShowModal] = useState(false);
const links = [
{
icon: 'pencil',
@ -30,7 +33,7 @@ function ListRow({
{
icon: 'trash',
onClick: () => {
onDeleteCLick(id);
setShowModal(true);
},
},
];
@ -39,28 +42,43 @@ function ListRow({
onEnabledChange(value, id);
};
const handleDeleteConfirm = () => {
onDeleteCLick(id);
setShowModal(false);
};
return (
<Row>
<td>
<Checkbox name={name} value={false} onChange={() => {}} />
</td>
<td>
<p>{name}</p>
</td>
<td>
<p>{url}</p>
</td>
<td>
<Switch
name={name}
value={isEnabled}
onChange={handleEnabledChange}
></Switch>
</td>
<td>
<IconLinks links={links} />
</td>
</Row>
<>
<StyledListRow>
<td>
<Checkbox name={name} value={false} onChange={() => {}} />
</td>
<td>
<p>{name}</p>
</td>
<td>
<p>{url}</p>
</td>
<td>
<Switch
name={name}
value={isEnabled}
onChange={handleEnabledChange}
></Switch>
</td>
<td>
<IconLinks links={links} />
<div className="popup-wrapper">
<PopUpWarning
isOpen={showModal}
toggleModal={() => setShowModal(!showModal)}
popUpWarningType="danger"
onConfirm={handleDeleteConfirm}
/>
</div>
</td>
</StyledListRow>
</>
);
}

28
packages/strapi-admin/admin/src/containers/Webhooks/ListView/Wrapper.js
View File

@ -5,7 +5,6 @@
*/
import styled from 'styled-components';
import { sizes } from 'strapi-helper-plugin';
const Wrapper = styled.div`
> div:first-of-type {
@ -21,33 +20,6 @@ const Wrapper = styled.div`
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
table tr {
td {
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:first-of-type {
padding-left: 30px;
width: 65px;
}
&:nth-of-type(2) {
max-width: 158px;
}
&:nth-of-type(3) {
max-width: 300px;
}
&:nth-of-type(4) {
min-width: 125px;
}
@media (min-width: ${sizes.wide}) {
&:nth-of-type(3) {
max-width: 400px;
}
}
}
}
}
p {
margin-bottom: 0;

31
packages/strapi-admin/admin/src/containers/Webhooks/ListView/index.js
View File

@ -29,9 +29,6 @@ function ListView() {
try {
const { data } = await request(`/admin/webhooks`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
dispatch({
@ -48,6 +45,9 @@ function ListView() {
fetchData();
}, []);
const webhookIndex = id => webhooks.findIndex(webhook => webhook.id === id);
// New button
const addBtnLabel = formatMessage({
id: `Settings.webhooks.list.button.add`,
});
@ -108,14 +108,28 @@ function ListView() {
};
const handleDeleteClick = id => {
console.log(id);
deleteWebhook(id);
};
const webhookById = id => webhooks.find(webhook => webhook.id === id);
const webhookIndex = id => webhooks.findIndex(webhook => webhook.id === id);
const deleteWebhook = async id => {
try {
await request(`/admin/webhooks/${id}`, {
method: 'DELETE',
});
dispatch({
type: 'WEBHOOK_DELETED',
index: webhookIndex(id),
});
} catch (err) {
if (err.code !== 20) {
strapi.notification.error('notification.error');
}
}
};
const handleEnabledChange = async (value, id) => {
const initialWebhookProps = webhookById(id);
const initialWebhookProps = webhooks[webhookIndex];
const body = {
...initialWebhookProps,
isEnabled: value,
@ -124,9 +138,6 @@ function ListView() {
try {
await request(`/admin/webhooks/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body,
});

8
packages/strapi-admin/admin/src/containers/Webhooks/ListView/reducer.js
View File

@ -10,6 +10,14 @@ const reducer = (state, action) => {
return state.update('webhooks', () => fromJS(action.data));
case 'SET_WEBHOOK_ENABLED':
return state.updateIn(['webhooks', ...action.keys], () => action.value);
case 'WEBHOOK_DELETED': {
console.log(state.get('webhooks'));
console.log(action.index);
return state.update('webhooks', webhooks =>
webhooks.splice(action.index, 1)
);
}
default:
return state;
}