aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-09-30 22:17:42 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-09-30 22:17:42 -0700
commit230d7d277d0386101dfcf88d8fabed58e4adde3d (patch)
tree055596a88e19157aa42b4ac65794e85fe49cee8b
parent739ca4cb813a7deb910f3dcb1655ae9d484e6487 (diff)
downloadtrackermap-web-230d7d277d0386101dfcf88d8fabed58e4adde3d.tar.gz
trackermap-web-230d7d277d0386101dfcf88d8fabed58e4adde3d.tar.bz2
trackermap-web-230d7d277d0386101dfcf88d8fabed58e4adde3d.zip
Implement common select field component
-rw-r--r--modern/src/form/SelectField.js35
-rw-r--r--modern/src/settings/GroupPage.js33
2 files changed, 44 insertions, 24 deletions
diff --git a/modern/src/form/SelectField.js b/modern/src/form/SelectField.js
new file mode 100644
index 00000000..78a16887
--- /dev/null
+++ b/modern/src/form/SelectField.js
@@ -0,0 +1,35 @@
+import { FormControl, InputLabel, Select } from '@material-ui/core';
+import React, { useState } from 'react';
+import { useEffectAsync } from '../reactHelper';
+
+const SelectField = ({ margin, variant, label, defaultValue, onChange, endpoint }) => {
+ const [items, setItems] = useState();
+
+ useEffectAsync(async () => {
+ const response = await fetch(endpoint);
+ if (response.ok) {
+ setItems(await response.json());
+ }
+ }, []);
+
+ if (items) {
+ return (
+ <FormControl margin={margin} variant={variant}>
+ <InputLabel>{label}</InputLabel>
+ <Select
+ native
+ defaultValue={defaultValue}
+ onChange={onChange}>
+ <option value={0}></option>
+ {items.map(item => (
+ <option key={item.id} value={item.id}>{item.name}</option>
+ ))}
+ </Select>
+ </FormControl>
+ );
+ } else {
+ return null;
+ }
+}
+
+export default SelectField;
diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js
index 0dc61e50..b6a28599 100644
--- a/modern/src/settings/GroupPage.js
+++ b/modern/src/settings/GroupPage.js
@@ -3,11 +3,11 @@ import TextField from '@material-ui/core/TextField';
import t from '../common/localization';
import EditItemView from '../EditItemView';
-import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, Select } from '@material-ui/core';
+import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import EditAttributesView from '../attributes/EditAttributesView';
-import { useEffectAsync } from '../reactHelper';
import deviceAttributes from '../attributes/deviceAttributes';
+import SelectField from '../form/SelectField';
const useStyles = makeStyles(() => ({
details: {
@@ -19,14 +19,6 @@ const GroupPage = () => {
const classes = useStyles();
const [item, setItem] = useState();
- const [groups, setGroups] = useState();
-
- useEffectAsync(async () => {
- const response = await fetch('/api/groups');
- if (response.ok) {
- setGroups(await response.json());
- }
- }, []);
return (
<EditItemView endpoint="groups" item={item} setItem={setItem}>
@@ -54,20 +46,13 @@ const GroupPage = () => {
</Typography>
</AccordionSummary>
<AccordionDetails className={classes.details}>
- {groups &&
- <FormControl margin="normal" variant="filled">
- <InputLabel>{t('groupParent')}</InputLabel>
- <Select
- native
- defaultValue={item.groupId}
- onChange={event => setItem({...item, groupId: Number(event.target.value)})}>
- <option value={0}></option>
- {groups.map(group => (
- <option key={group.id} value={group.id}>{group.name}</option>
- ))}
- </Select>
- </FormControl>
- }
+ <SelectField
+ margin="normal"
+ defaultValue={item.groupId}
+ onChange={event => setItem({...item, groupId: Number(event.target.value)})}
+ endpoint="/api/groups"
+ label={t('groupParent')}
+ variant="filled" />
</AccordionDetails>
</Accordion>
<Accordion>