diff options
author | Anton Tananaev <anton@traccar.org> | 2024-04-06 09:22:10 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2024-04-06 09:22:10 -0700 |
commit | f418231b6b2f5e030a0d2dcc390c314602b1f740 (patch) | |
tree | 10326adf3792bc2697e06bb5f2b8ef2a8f7e55fe /modern/src/common/components/LinkField.jsx | |
parent | b392a4af78e01c8e0f50aad5468e9583675b24be (diff) | |
download | trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.tar.gz trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.tar.bz2 trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.zip |
Move modern to the top
Diffstat (limited to 'modern/src/common/components/LinkField.jsx')
-rw-r--r-- | modern/src/common/components/LinkField.jsx | 93 |
1 files changed, 0 insertions, 93 deletions
diff --git a/modern/src/common/components/LinkField.jsx b/modern/src/common/components/LinkField.jsx deleted file mode 100644 index 08c6213a..00000000 --- a/modern/src/common/components/LinkField.jsx +++ /dev/null @@ -1,93 +0,0 @@ -import { Autocomplete, TextField } from '@mui/material'; -import React, { useState } from 'react'; -import { useEffectAsync } from '../../reactHelper'; - -const LinkField = ({ - label, - endpointAll, - endpointLinked, - baseId, - keyBase, - keyLink, - keyGetter = (item) => item.id, - titleGetter = (item) => item.name, -}) => { - const [active, setActive] = useState(false); - const [open, setOpen] = useState(false); - const [items, setItems] = useState(); - const [linked, setLinked] = useState(); - - useEffectAsync(async () => { - if (active) { - const response = await fetch(endpointAll); - if (response.ok) { - setItems(await response.json()); - } else { - throw Error(await response.text()); - } - } - }, [active]); - - useEffectAsync(async () => { - if (active) { - const response = await fetch(endpointLinked); - if (response.ok) { - setLinked(await response.json()); - } else { - throw Error(await response.text()); - } - } - }, [active]); - - const createBody = (linkId) => { - const body = {}; - body[keyBase] = baseId; - body[keyLink] = linkId; - return body; - }; - - const onChange = async (value) => { - const oldValue = linked.map((it) => keyGetter(it)); - const newValue = value.map((it) => keyGetter(it)); - if (!newValue.find((it) => it < 0)) { - const results = []; - newValue.filter((it) => !oldValue.includes(it)).forEach((added) => { - results.push(fetch('/api/permissions', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(createBody(added)), - })); - }); - oldValue.filter((it) => !newValue.includes(it)).forEach((removed) => { - results.push(fetch('/api/permissions', { - method: 'DELETE', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(createBody(removed)), - })); - }); - await Promise.all(results); - setLinked(value); - } - }; - - return ( - <Autocomplete - loading={active && !items} - isOptionEqualToValue={(i1, i2) => keyGetter(i1) === keyGetter(i2)} - options={items || []} - getOptionLabel={(item) => titleGetter(item)} - renderInput={(params) => <TextField {...params} label={label} />} - value={(items && linked) || []} - onChange={(_, value) => onChange(value)} - open={open} - onOpen={() => { - setOpen(true); - setActive(true); - }} - onClose={() => setOpen(false)} - multiple - /> - ); -}; - -export default LinkField; |