-
Notifications
You must be signed in to change notification settings - Fork 12
/
ConceptContainerDelete.jsx
66 lines (64 loc) · 2.51 KB
/
ConceptContainerDelete.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import React from 'react';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from '@mui/material';
import MuiAlert from '@mui/material/Alert';
import { last } from 'lodash';
import { RED } from '../../common/constants';
const ConceptContainerDelete = ({open, resource, onClose, onDelete, associatedResources, associationRelation, summaryContent}) => {
const resourceEntity = resource.type
const resourceType = resourceEntity.toLowerCase()
const resourceId = resource.short_code || resource.id
const [input, setInput] = React.useState('');
const canDelete = input === resourceId
const opacity = canDelete ? 1 : 0.5;
const onSubmit = () => {
onClose();
onDelete();
}
const associations = (associatedResources || ['versions', 'concepts', 'mappings'])
let associationsLabel = associations.slice(0, -1).join(', ') + ' and ' + last(associations)
const relationship = associationRelation || 'associated'
return (
<React.Fragment>
<Dialog open={open} onClose={onClose}>
<DialogTitle>
{`Delete ${resourceEntity}: ${resourceId}`}
</DialogTitle>
<DialogContent>
<MuiAlert variant="filled" severity="warning" style={{marginBottom: '10px'}}>
Unexpected bad things will happen if you don’t read this!
</MuiAlert>
<p>
{`Are you sure you want to permanently delete this ${resourceType} `}
<b>{resourceId}</b>?
</p>
{ summaryContent || '' }
<p>
This action <b>cannot</b> be undone!
{
` This will delete the entire ${resourceType} and all of its ${relationship} ${associationsLabel} (if any).`
}
</p>
<p>
Please type <b>{resourceId}</b> to confirm.
</p>
<div className='col-md-12 no-side-padding'>
<TextField
fullWidth
variant='outlined' size="small" onChange={event => setInput(event.target.value)}
/>
</div>
</DialogContent>
<DialogActions style={{textAlign: 'center', justifyContent: 'center', margin: '15px 0'}}>
<Button
disabled={!canDelete}
style={{color: RED, fontWeight: 'bold', opacity: opacity}}
variant='outlined'
onClick={onSubmit}>
{`I understand the consequences, delete this ${resourceType}`}
</Button>
</DialogActions>
</Dialog>
</React.Fragment>
)
}
export default ConceptContainerDelete;