aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-10-19 09:13:55 -0700
committerAnton Tananaev <anton@traccar.org>2022-10-19 09:13:55 -0700
commit139bedf867a5cb7731cb94c38b93d75f0e8b9ac3 (patch)
treeb6554bd43a4af1686944a327b82757941baa56f6 /modern
parent6c5d543a189906120a1ba48dfb643a91616ea59b (diff)
downloadtrackermap-web-139bedf867a5cb7731cb94c38b93d75f0e8b9ac3.tar.gz
trackermap-web-139bedf867a5cb7731cb94c38b93d75f0e8b9ac3.tar.bz2
trackermap-web-139bedf867a5cb7731cb94c38b93d75f0e8b9ac3.zip
Improve linking fields
Diffstat (limited to 'modern')
-rw-r--r--modern/src/common/components/LinkField.js56
1 files changed, 22 insertions, 34 deletions
diff --git a/modern/src/common/components/LinkField.js b/modern/src/common/components/LinkField.js
index 22ede201..08c6213a 100644
--- a/modern/src/common/components/LinkField.js
+++ b/modern/src/common/components/LinkField.js
@@ -1,6 +1,4 @@
-import {
- FormControl, InputLabel, MenuItem, Select, Skeleton,
-} from '@mui/material';
+import { Autocomplete, TextField } from '@mui/material';
import React, { useState } from 'react';
import { useEffectAsync } from '../../reactHelper';
@@ -34,8 +32,7 @@ const LinkField = ({
if (active) {
const response = await fetch(endpointLinked);
if (response.ok) {
- const data = await response.json();
- setLinked(data.map((it) => it.id));
+ setLinked(await response.json());
} else {
throw Error(await response.text());
}
@@ -49,9 +46,9 @@ const LinkField = ({
return body;
};
- const onChange = async (event) => {
- const oldValue = linked;
- const newValue = event.target.value;
+ 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) => {
@@ -69,36 +66,27 @@ const LinkField = ({
}));
});
await Promise.all(results);
- setLinked(newValue);
+ setLinked(value);
}
};
return (
- <FormControl>
- <InputLabel>{label}</InputLabel>
- <Select
- label={label}
- open={open}
- onOpen={() => {
- setActive(true);
- setOpen(true);
- }}
- onClose={() => setOpen(false)}
- value={linked || []}
- onChange={onChange}
- multiple
- >
- {items && linked
- ? items.map((item) => (
- <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem>
- ))
- : [...Array(3)].map((_, i) => (
- <MenuItem key={-i - 1} value={-i - 1}>
- <Skeleton variant="text" width={`${Math.floor(Math.random() * 30 + 30)}%`} />
- </MenuItem>
- ))}
- </Select>
- </FormControl>
+ <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
+ />
);
};