-
Notifications
You must be signed in to change notification settings - Fork 1
/
PermissionFormView.tsx
59 lines (56 loc) · 1.87 KB
/
PermissionFormView.tsx
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
import { Button, Checkbox, HTMLTable, Intent } from '@blueprintjs/core'
import { FormikProps } from 'formik'
import lodash from 'lodash'
import React, { FunctionComponent } from 'react'
import { PermissionFormValue } from './PermissionForm'
import './styles.css'
export interface PermissionFormViewProps extends FormikProps<PermissionFormValue> {
availablePermissions: string[]
updatablePermissions: string[]
}
export const PermissionFormView: FunctionComponent<PermissionFormViewProps> = ({
availablePermissions,
updatablePermissions,
handleSubmit,
isSubmitting,
values,
setFieldValue,
}) => {
const chucks = lodash.chunk(availablePermissions, 4)
const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {
const perm = e.target.name
let currentValue = values.permissions
if (currentValue.includes(perm)) {
currentValue = currentValue.filter(p => p !== perm)
} else {
currentValue.push(perm)
}
setFieldValue('permissions', currentValue)
}
return (
<form onSubmit={handleSubmit} className='permission-form'>
<HTMLTable className='permission-table'>
<tbody>
{chucks.map((ch, i) => (
<tr key={i}>
{ch.map(perm => {
const checked = values.permissions.includes(perm)
const disabled = !updatablePermissions.includes(perm)
return (
<td key={perm}>
<Checkbox name={perm} checked={checked} label={perm} disabled={disabled} onChange={handleChange} />
</td>
)
})}
</tr>
))}
</tbody>
</HTMLTable>
<div className='actions'>
<Button disabled={isSubmitting} intent={Intent.SUCCESS} type='submit' icon='floppy-disk'>
{isSubmitting ? `Saving...` : `Save`}
</Button>
</div>
</form>
)
}