aboutsummaryrefslogtreecommitdiff
path: root/modern/src/common/components/LinkField.jsx
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2024-04-06 09:22:10 -0700
committerAnton Tananaev <anton@traccar.org>2024-04-06 09:22:10 -0700
commitf418231b6b2f5e030a0d2dcc390c314602b1f740 (patch)
tree10326adf3792bc2697e06bb5f2b8ef2a8f7e55fe /modern/src/common/components/LinkField.jsx
parentb392a4af78e01c8e0f50aad5468e9583675b24be (diff)
downloadtrackermap-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.jsx93
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;