diff options
Diffstat (limited to 'modern/src/form')
-rw-r--r-- | modern/src/form/LinkField.js | 30 | ||||
-rw-r--r-- | modern/src/form/SelectField.js | 23 |
2 files changed, 28 insertions, 25 deletions
diff --git a/modern/src/form/LinkField.js b/modern/src/form/LinkField.js index b228fb34..26e1471e 100644 --- a/modern/src/form/LinkField.js +++ b/modern/src/form/LinkField.js @@ -1,4 +1,6 @@ -import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core'; +import { + FormControl, InputLabel, MenuItem, Select, +} from '@material-ui/core'; import React, { useState } from 'react'; import { useEffectAsync } from '../reactHelper'; @@ -11,8 +13,8 @@ const LinkField = ({ baseId, keyBase, keyLink, - keyGetter = item => item.id, - titleGetter = item => item.name, + keyGetter = (item) => item.id, + titleGetter = (item) => item.name, }) => { const [items, setItems] = useState(); const [linked, setLinked] = useState(); @@ -28,28 +30,28 @@ const LinkField = ({ const response = await fetch(endpointLinked); if (response.ok) { const data = await response.json(); - setLinked(data.map(it => it.id)); + setLinked(data.map((it) => it.id)); } }, []); - const createBody = linkId => { + const createBody = (linkId) => { const body = {}; body[keyBase] = baseId; body[keyLink] = linkId; return body; - } + }; - const onChange = async event => { + const onChange = async (event) => { const oldValue = linked; const newValue = event.target.value; - for (const added of newValue.filter(it => !oldValue.includes(it))) { + for (const added of newValue.filter((it) => !oldValue.includes(it))) { await fetch('/api/permissions', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(createBody(added)), }); } - for (const removed of oldValue.filter(it => !newValue.includes(it))) { + for (const removed of oldValue.filter((it) => !newValue.includes(it))) { await fetch('/api/permissions', { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, @@ -66,16 +68,16 @@ const LinkField = ({ <Select multiple value={linked} - onChange={onChange}> - {items.map(item => ( + onChange={onChange} + > + {items.map((item) => ( <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem> ))} </Select> </FormControl> ); - } else { - return null; } -} + return null; +}; export default LinkField; diff --git a/modern/src/form/SelectField.js b/modern/src/form/SelectField.js index b179c58e..303d203c 100644 --- a/modern/src/form/SelectField.js +++ b/modern/src/form/SelectField.js @@ -1,4 +1,6 @@ -import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core'; +import { + FormControl, InputLabel, MenuItem, Select, +} from '@material-ui/core'; import React, { useState } from 'react'; import { useEffectAsync } from '../reactHelper'; @@ -12,8 +14,8 @@ const SelectField = ({ onChange, endpoint, data, - keyGetter = item => item.id, - titleGetter = item => item.name, + keyGetter = (item) => item.id, + titleGetter = (item) => item.name, }) => { const [items, setItems] = useState(data); @@ -33,19 +35,18 @@ const SelectField = ({ <Select multiple={multiple} value={value} - onChange={onChange}> - {!multiple && emptyValue !== null && - <MenuItem value={emptyValue}> </MenuItem> - } - {items.map(item => ( + onChange={onChange} + > + {!multiple && emptyValue !== null + && <MenuItem value={emptyValue}> </MenuItem>} + {items.map((item) => ( <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem> ))} </Select> </FormControl> ); - } else { - return null; } -} + return null; +}; export default SelectField; |