From dac214c3ac6066a6f23cf92807da89cc1a86c105 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 25 Oct 2020 20:30:04 -0700 Subject: Implement linking field --- modern/src/form/LinkField.js | 81 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 modern/src/form/LinkField.js (limited to 'modern/src/form') diff --git a/modern/src/form/LinkField.js b/modern/src/form/LinkField.js new file mode 100644 index 00000000..b228fb34 --- /dev/null +++ b/modern/src/form/LinkField.js @@ -0,0 +1,81 @@ +import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core'; +import React, { useState } from 'react'; +import { useEffectAsync } from '../reactHelper'; + +const LinkField = ({ + margin, + variant, + label, + endpointAll, + endpointLinked, + baseId, + keyBase, + keyLink, + keyGetter = item => item.id, + titleGetter = item => item.name, +}) => { + const [items, setItems] = useState(); + const [linked, setLinked] = useState(); + + useEffectAsync(async () => { + const response = await fetch(endpointAll); + if (response.ok) { + setItems(await response.json()); + } + }, []); + + useEffectAsync(async () => { + const response = await fetch(endpointLinked); + if (response.ok) { + const data = await response.json(); + setLinked(data.map(it => it.id)); + } + }, []); + + const createBody = linkId => { + const body = {}; + body[keyBase] = baseId; + body[keyLink] = linkId; + return body; + } + + const onChange = async event => { + const oldValue = linked; + const newValue = event.target.value; + 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))) { + await fetch('/api/permissions', { + method: 'DELETE', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(createBody(removed)), + }); + } + setLinked(newValue); + }; + + if (items && linked) { + return ( + + {label} + + + ); + } else { + return null; + } +} + +export default LinkField; -- cgit v1.2.3