ben.carrasco/jambonz-webapp
1
0
Fork 0
mirror of https://github.com/jambonz/jambonz-webapp.git synced 2026-07-04 19:21:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Show delete errors in modal instead of in a notification

Browse Source
This commit is contained in:
James Nuanez
2020-04-24 21:14:35 -07:00
parent 344671b2f2
commit d415fca359
7 changed files with 76 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/blocks/FormError.js
+3 -3
View File
@@ -13,7 +13,7 @@ const FormErrorContainer = styled.div`
font-weight: 500;
text-align: left;
${props => props.grid && `grid-column: 2;`}
& > span {
& > div {
margin-left: 0.5rem;
}
& ul {
@@ -28,7 +28,7 @@ const FormErrorContainer = styled.div`
const FormError = props => (
<FormErrorContainer {...props}>
<ErrorIcon />
<span>
<div>
{typeof props.message === 'object' && props.message.length ? (
<ul>
{props.message.map((message, i) => (
@@ -38,7 +38,7 @@ const FormError = props => (
) : (
props.message
)}
</span>
</div>
</FormErrorContainer>
);
src/components/blocks/Modal.js
+4
View File
@@ -17,6 +17,10 @@ const Overlay = styled.div`
`;
const ModalContainer = styled.div`
max-height: calc(100% - 2rem);
max-width: 700px;
overflow: auto;
margin: 1rem;
padding: 2rem;
border-radius: 0.5rem;
background: #FFF;
src/components/blocks/TableContent.js
+35 -22
View File
@@ -9,6 +9,7 @@ import Checkbox from '../elements/Checkbox.js';
import TableMenu from '../blocks/TableMenu.js';
import Loader from '../blocks/Loader.js';
import Modal from '../blocks/Modal.js';
import FormError from '../blocks/FormError.js';
const Td = styled.td`
padding: 0.5rem 0;
@@ -132,10 +133,11 @@ const TableContent = props => {
//=============================================================================
// Handle Deleting content
//=============================================================================
const [ errorMessage, setErrorMessage ] = useState('');
const deleteContent = async () => {
setShowModalLoader(true);
const success = await props.deleteContent(contentToDelete);
if (success) {
const result = await props.deleteContent(contentToDelete);
if (result === 'success') {
const newContent = await props.getContent();
sortTableContent({ newContent });
setContentToDelete({});
@@ -144,7 +146,10 @@ const TableContent = props => {
level: 'success',
message: `${props.name.charAt(0).toUpperCase()}${props.name.slice(1)} deleted successfully`,
});
} else {
setErrorMessage(result);
}
setSelected([]);
setShowModalLoader(false);
};
@@ -159,27 +164,35 @@ const TableContent = props => {
content={
showModalLoader
? <Loader />
: <table>
<tbody>
{props.formatContentToDelete(contentToDelete).map((d, i) => (
<tr key={i}>
<Td>{d.name}</Td>
<Td>
{typeof d.content === 'string'
? d.content
: <ul>
{d.content.map((c, i) => (
<li key={i}>{c}</li>
))}
</ul>
}
</Td>
</tr>
))}
</tbody>
</table>
: <div>
<table>
<tbody>
{props.formatContentToDelete(contentToDelete).map((d, i) => (
<tr key={i}>
<Td>{d.name}</Td>
<Td>
{typeof d.content === 'string'
? d.content
: <ul>
{d.content.map((c, i) => (
<li key={i}>{c}</li>
))}
</ul>
}
</Td>
</tr>
))}
</tbody>
</table>
{errorMessage && (
<FormError message={errorMessage} />
)}
</div>
}
handleCancel={() => setContentToDelete({})}
handleCancel={() => {
setContentToDelete({});
setErrorMessage('');
}}
handleSubmit={deleteContent}
actionText="Delete"
/>
src/components/pages/internal/AccountsList.js
+17 -43
View File
@@ -118,47 +118,26 @@ const AccountsList = () => {
const accountPhoneNumbers = phoneNumbers.filter(p => (
p.account_sid === accountToDelete.sid
));
if (accountApps.length) {
dispatch({
type: 'ADD',
level: 'error',
message:
<div>
let errorMessages = [];
for (const app of accountApps) {
errorMessages.push(`Application: ${app.name}`);
}
for (const num of accountPhoneNumbers) {
errorMessages.push(`Phone Number: ${num.number}`);
}
if (errorMessages.length) {
return (
<React.Fragment>
<p style={{ margin: '0.5rem 0' }}>
This account cannot be deleted because it is in use by the
following application{accountApps.length > 1 && 's'}:
This account cannot be deleted because it is in use by:
</p>
<ul style={{ margin: '0.5rem 0' }}>
{accountApps.map((app, i) => (
<li key={i}>{app.name}</li>
{errorMessages.map((err, i) => (
<li key={i}>{err}</li>
))}
</ul>
</div>
,
});
}
if (accountPhoneNumbers.length) {
dispatch({
type: 'ADD',
level: 'error',
message:
<div>
<p style={{ margin: '0.5rem 0' }}>
This account cannot be deleted because it is in use by the
following phone number{accountPhoneNumbers.length > 1 && 's'}:
</p>
<ul style={{ margin: '0.5rem 0' }}>
{accountPhoneNumbers.map((p, i) => (
<li key={i}>{p.number}</li>
))}
</ul>
</div>
,
});
}
if (accountApps.length || accountPhoneNumbers.length) {
return false;
</React.Fragment>
);
}
// Delete account
@@ -170,7 +149,7 @@ const AccountsList = () => {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
});
return true;
return 'success';
} catch (err) {
if (err.response && err.response.status === 401) {
localStorage.removeItem('token');
@@ -182,14 +161,9 @@ const AccountsList = () => {
message: 'Your session has expired. Please log in and try again.',
});
} else {
dispatch({
type: 'ADD',
level: 'error',
message: (err.response && err.response.data && err.response.data.msg) || 'Unable to delete account',
});
console.log(err.response || err);
return ((err.response && err.response.data && err.response.data.msg) || 'Unable to delete account');
}
return false;
}
};
src/components/pages/internal/ApplicationsList.js
+13 -13
View File
@@ -123,12 +123,17 @@ const ApplicationsList = () => {
if (accountsRequiringThisApp.length) {
const accountName = accountsRequiringThisApp[0].name;
dispatch({
type: 'ADD',
level: 'error',
message: `This application cannot be deleted because it is set to receive SIP Device Calls on account: ${accountName}`,
});
return false;
return (
<React.Fragment>
<p style={{ margin: '0.5rem 0' }}>
This application cannot be deleted because the following
account uses it to receive SIP Device Calls:
</p>
<ul style={{ margin: '0.5rem 0' }}>
<li>{accountName}</li>
</ul>
</React.Fragment>
);
}
await axios({
@@ -139,7 +144,7 @@ const ApplicationsList = () => {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
});
return true;
return 'success';
} catch (err) {
if (err.response && err.response.status === 401) {
localStorage.removeItem('token');
@@ -151,14 +156,9 @@ const ApplicationsList = () => {
message: 'Your session has expired. Please log in and try again.',
});
} else {
dispatch({
type: 'ADD',
level: 'error',
message: (err.response && err.response.data && err.response.data.msg) || 'Unable to delete application',
});
console.log(err.response || err);
return ((err.response && err.response.data && err.response.data.msg) || 'Unable to delete application');
}
return false;
}
};
src/components/pages/internal/PhoneNumbersList.js
+2 -7
View File
@@ -151,7 +151,7 @@ const PhoneNumbersList = () => {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
});
return true;
return 'success';
} catch (err) {
if (err.response && err.response.status === 401) {
localStorage.removeItem('token');
@@ -163,14 +163,9 @@ const PhoneNumbersList = () => {
message: 'Your session has expired. Please log in and try again.',
});
} else {
dispatch({
type: 'ADD',
level: 'error',
message: (err.response && err.response.data && err.response.data.msg) || 'Unable to delete phone number',
});
console.log(err.response || err);
return ((err.response && err.response.data && err.response.data.msg) || 'Unable to delete phone number');
}
return false;
}
};
src/components/pages/internal/SipTrunksList.js
+2 -7
View File
@@ -135,7 +135,7 @@ const SipTrunksList = () => {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
});
return true;
return 'success';
} catch (err) {
if (err.response && err.response.status === 401) {
localStorage.removeItem('token');
@@ -147,14 +147,9 @@ const SipTrunksList = () => {
message: 'Your session has expired. Please log in and try again.',
});
} else {
dispatch({
type: 'ADD',
level: 'error',
message: (err.response && err.response.data && err.response.data.msg) || 'Unable to delete SIP trunk',
});
console.log(err.response || err);
return ((err.response && err.response.data && err.response.data.msg) || 'Unable to delete SIP trunk');
}
return false;
}
};