aboutsummaryrefslogtreecommitdiff
path: root/modern/src/attributes/EditAttributesView.js
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/attributes/EditAttributesView.js')
-rw-r--r--modern/src/attributes/EditAttributesView.js129
1 files changed, 65 insertions, 64 deletions
diff --git a/modern/src/attributes/EditAttributesView.js b/modern/src/attributes/EditAttributesView.js
index 619d857c..e38c02ae 100644
--- a/modern/src/attributes/EditAttributesView.js
+++ b/modern/src/attributes/EditAttributesView.js
@@ -1,13 +1,14 @@
import React, { useState } from 'react';
-import t from '../common/localization';
-
-import { Button, Checkbox, FilledInput, FormControl, FormControlLabel, Grid, IconButton, InputAdornment, InputLabel, makeStyles } from "@material-ui/core";
+import {
+ Button, Checkbox, FilledInput, FormControl, FormControlLabel, Grid, IconButton, InputAdornment, InputLabel, makeStyles,
+} from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';
import AddIcon from '@material-ui/icons/Add';
+import t from '../common/localization';
import AddAttributeDialog from './AddAttributeDialog';
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
addButton: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(1),
@@ -22,10 +23,36 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => {
const [addDialogShown, setAddDialogShown] = useState(false);
+ const updateAttribute = (key, value) => {
+ const updatedAttributes = { ...attributes };
+ updatedAttributes[key] = value;
+ setAttributes(updatedAttributes);
+ };
+
+ const deleteAttribute = (key) => {
+ const updatedAttributes = { ...attributes };
+ delete updatedAttributes[key];
+ setAttributes(updatedAttributes);
+ };
+
+ const getAttributeName = (key) => {
+ const definition = definitions[key];
+ return definition ? definition.name : key;
+ };
+
+ const getAttributeType = (value) => {
+ if (typeof value === 'number') {
+ return 'number';
+ } if (typeof value === 'boolean') {
+ return 'boolean';
+ }
+ return 'string';
+ };
+
const convertToList = (attributes) => {
- let booleanList = [];
- let otherList = [];
- for (const key in attributes) {
+ const booleanList = [];
+ const otherList = [];
+ Object.keys(attributes).forEach((key) => {
const value = attributes[key];
const type = getAttributeType(value);
if (type === 'boolean') {
@@ -33,14 +60,14 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => {
} else {
otherList.push({ key, value, type });
}
- }
+ });
return otherList.concat(booleanList);
- }
+ };
const handleAddResult = (definition) => {
setAddDialogShown(false);
if (definition) {
- switch(definition.type) {
+ switch (definition.type) {
case 'number':
updateAttribute(definition.key, 0);
break;
@@ -48,37 +75,10 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => {
updateAttribute(definition.key, false);
break;
default:
- updateAttribute(definition.key, "");
+ updateAttribute(definition.key, '');
break;
}
}
- }
-
- const updateAttribute = (key, value) => {
- let updatedAttributes = {...attributes};
- updatedAttributes[key] = value;
- setAttributes(updatedAttributes);
- };
-
- const deleteAttribute = (key) => {
- let updatedAttributes = {...attributes};
- delete updatedAttributes[key];
- setAttributes(updatedAttributes);
- };
-
- const getAttributeName = (key) => {
- const definition = definitions[key];
- return definition ? definition.name : key;
- };
-
- const getAttributeType = (value) => {
- if (typeof value === 'number') {
- return 'number';
- } else if (typeof value === 'boolean') {
- return 'boolean';
- } else {
- return 'string';
- }
};
return (
@@ -88,37 +88,37 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => {
return (
<Grid container direction="row" justify="space-between">
<FormControlLabel
- control={
+ control={(
<Checkbox
checked={value}
- onChange={e => updateAttribute(key, e.target.checked)}
- />
- }
- label={getAttributeName(key)} />
+ onChange={(e) => updateAttribute(key, e.target.checked)}
+ />
+ )}
+ label={getAttributeName(key)}
+ />
<IconButton className={classes.removeButton} onClick={() => deleteAttribute(key)}>
<CloseIcon />
</IconButton>
</Grid>
);
- } else {
- return (
- <FormControl variant="filled" margin="normal" key={key}>
- <InputLabel>{getAttributeName(key)}</InputLabel>
- <FilledInput
- type={type === 'number' ? 'number' : 'text'}
- value={value || ''}
- onChange={e => updateAttribute(key, e.target.value)}
- endAdornment={
- <InputAdornment position="end">
- <IconButton onClick={() => deleteAttribute(key)}>
- <CloseIcon />
- </IconButton>
- </InputAdornment>
- }
- />
- </FormControl>
- );
}
+ return (
+ <FormControl variant="filled" margin="normal" key={key}>
+ <InputLabel>{getAttributeName(key)}</InputLabel>
+ <FilledInput
+ type={type === 'number' ? 'number' : 'text'}
+ value={value || ''}
+ onChange={(e) => updateAttribute(key, e.target.value)}
+ endAdornment={(
+ <InputAdornment position="end">
+ <IconButton onClick={() => deleteAttribute(key)}>
+ <CloseIcon />
+ </IconButton>
+ </InputAdornment>
+ )}
+ />
+ </FormControl>
+ );
})}
<Button
size="large"
@@ -126,16 +126,17 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => {
color="primary"
onClick={() => setAddDialogShown(true)}
startIcon={<AddIcon />}
- className={classes.addButton}>
+ className={classes.addButton}
+ >
{t('sharedAdd')}
</Button>
<AddAttributeDialog
open={addDialogShown}
onResult={handleAddResult}
definitions={definitions}
- />
+ />
</>
);
-}
+};
export default EditAttributesView;