|
@@ -11,7 +11,6 @@ import {
|
|
} from '@material-ui/core';
|
|
} from '@material-ui/core';
|
|
import { withStyles, makeStyles } from '@material-ui/core/styles';
|
|
import { withStyles, makeStyles } from '@material-ui/core/styles';
|
|
import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
|
|
import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
|
|
-import { MButton } from '..';
|
|
|
|
|
|
|
|
const filter = createFilterOptions();
|
|
const filter = createFilterOptions();
|
|
|
|
|
|
@@ -82,33 +81,58 @@ const useStyles = makeStyles((theme) => ({
|
|
}
|
|
}
|
|
}));
|
|
}));
|
|
|
|
|
|
-function FieldList(props) {
|
|
+function MButton(props) {
|
|
|
|
+ const classes = useStyles();
|
|
|
|
+ const { action, onCallback } = props;
|
|
|
|
+
|
|
|
|
+ const handleAction = () => {
|
|
|
|
+ onCallback();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ <div className={classes.root}>
|
|
|
|
+ <Box>
|
|
|
|
+ <Button
|
|
|
|
+ variant="contained" style={{ float: 'right', margin: "5px" }}
|
|
|
|
+ onClick={(e) => { handleAction }}
|
|
|
|
+ >{action.icon}{action.label}</Button>
|
|
|
|
+ </Box>
|
|
|
|
+ </div>
|
|
|
|
+ );
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+MButton.propTypes = {
|
|
|
|
+ history: PropTypes.object,
|
|
|
|
+ action: PropTypes.object,
|
|
|
|
+ onCallback: PropTypes.func
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+function MkForm(props) {
|
|
const classes = useStyles();
|
|
const classes = useStyles();
|
|
const {
|
|
const {
|
|
fields = [],
|
|
fields = [],
|
|
- updateData = {},
|
|
+ data = {},
|
|
- isNew = false,
|
|
+ onDropdownCreateNew,
|
|
- currentTabName,
|
|
|
|
- onCancel,
|
|
|
|
- onCanCreateNew,
|
|
|
|
actions = [],
|
|
actions = [],
|
|
} = props;
|
|
} = props;
|
|
- const [data, setDataField] = React.useState(updateData != undefined ? updateData : {});
|
|
+ const [_data, setDataField] = React.useState(data != undefined ? data : {});
|
|
|
|
|
|
const handleTextString = (e, fieldName) => {
|
|
const handleTextString = (e, fieldName) => {
|
|
- setDataField({ ...data, [fieldName]: e.target.value });
|
|
+ setDataField({ ..._data, [fieldName]: e.target.value });
|
|
}
|
|
}
|
|
|
|
|
|
const handleTextNumber = (e, fieldName) => {
|
|
const handleTextNumber = (e, fieldName) => {
|
|
- setDataField({ ...data, [fieldName]: e.target.value });
|
|
+ setDataField({ ..._data, [fieldName]: e.target.value });
|
|
}
|
|
}
|
|
|
|
|
|
const handleTextMultiline = (e, fieldName) => {
|
|
const handleTextMultiline = (e, fieldName) => {
|
|
- setDataField({ ...data, [fieldName]: e.target.value });
|
|
+ setDataField({ ..._data, [fieldName]: e.target.value });
|
|
}
|
|
}
|
|
|
|
|
|
const handleDate = (e, fieldName) => {
|
|
const handleDate = (e, fieldName) => {
|
|
- setDataField({ ...data, [fieldName]: e.target.value });
|
|
+ setDataField({ ..._data, [fieldName]: e.target.value });
|
|
}
|
|
}
|
|
|
|
|
|
const handleDropDownChange = (e, fieldName) => {
|
|
const handleDropDownChange = (e, fieldName) => {
|
|
@@ -117,7 +141,7 @@ function FieldList(props) {
|
|
|
|
|
|
var fn = fieldName.split('_');
|
|
var fn = fieldName.split('_');
|
|
var fieldId = fn[0] + '_' + 'id';
|
|
var fieldId = fn[0] + '_' + 'id';
|
|
- setDataField({ ...data, [fieldName]: selectedValue, [fieldId]: e.target.value });
|
|
+ setDataField({ ..._data, [fieldName]: selectedValue, [fieldId]: e.target.value });
|
|
}
|
|
}
|
|
|
|
|
|
const handleImgUpload = (e, fieldName) => {
|
|
const handleImgUpload = (e, fieldName) => {
|
|
@@ -129,28 +153,15 @@ function FieldList(props) {
|
|
setImgPreviewPath(reader.result);
|
|
setImgPreviewPath(reader.result);
|
|
}
|
|
}
|
|
reader.readAsDataURL(file);
|
|
reader.readAsDataURL(file);
|
|
- setDataField({ ...data, [fieldName]: e.target.files[0].name });
|
|
+ setDataField({ ..._data, [fieldName]: e.target.files[0].name });
|
|
- }
|
|
|
|
-
|
|
|
|
- const handleCancel = () => {
|
|
|
|
- onCancel();
|
|
|
|
}
|
|
}
|
|
|
|
|
|
const handleCanCreateNew = (data) => {
|
|
const handleCanCreateNew = (data) => {
|
|
- onCanCreateNew(data);
|
|
+ onDropdownCreateNew(data);
|
|
}
|
|
}
|
|
|
|
|
|
const onChangeValue = (fieldName, value) => {
|
|
const onChangeValue = (fieldName, value) => {
|
|
- var fn = fieldName.split('_');
|
|
+ setDataField({ ..._data, [fieldName]: value });
|
|
- var fieldId = fn[0] + '_' + 'id';
|
|
|
|
- var d = value['name'] != undefined ? value['name'] : value['product_desc']
|
|
|
|
-
|
|
|
|
- if (isNew) {
|
|
|
|
- setDataField({ ...data, [fieldName]: d, [fieldId]: value['id'] });
|
|
|
|
-
|
|
|
|
- } else {
|
|
|
|
- setDataField({ ...data, [fieldName]: d, [fieldId]: value['id'] });
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
return (
|
|
@@ -160,14 +171,14 @@ function FieldList(props) {
|
|
{fields.map((f, i) => {
|
|
{fields.map((f, i) => {
|
|
|
|
|
|
if (f.type == 'text_string') {
|
|
if (f.type == 'text_string') {
|
|
- return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
+ return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Box style={{ width: '150px' }}>
|
|
<Box style={{ width: '150px' }}>
|
|
<Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
<Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item xs={12} sm={7}>
|
|
<Grid item xs={12} sm={7}>
|
|
- <TextField id={f.fieldName}
|
|
+ <TextField id={f.field_name}
|
|
variant="outlined"
|
|
variant="outlined"
|
|
autoComplete="off"
|
|
autoComplete="off"
|
|
size={"small"}
|
|
size={"small"}
|
|
@@ -175,14 +186,14 @@ function FieldList(props) {
|
|
InputProps={{
|
|
InputProps={{
|
|
readOnly: f.readOnly ? f.readOnly : false,
|
|
readOnly: f.readOnly ? f.readOnly : false,
|
|
}}
|
|
}}
|
|
- value={data != undefined ? data[f.fieldName] : ''}
|
|
+ value={_data != undefined ? _data[f.field_name] : ''}
|
|
- onChange={(e) => handleTextString(e, f.fieldName)}
|
|
+ onChange={(e) => handleTextString(e, f.field_name)}
|
|
/>
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>;
|
|
</Grid>;
|
|
}
|
|
}
|
|
else if (f.type == 'text_number') {
|
|
else if (f.type == 'text_number') {
|
|
- return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
+ return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Box style={{ width: '150px' }}>
|
|
<Box style={{ width: '150px' }}>
|
|
<Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
<Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
@@ -190,20 +201,20 @@ function FieldList(props) {
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item xs={12} sm={7}>
|
|
<Grid item xs={12} sm={7}>
|
|
<TextField
|
|
<TextField
|
|
- id={f.fieldName}
|
|
+ id={f.field_name}
|
|
variant="outlined"
|
|
variant="outlined"
|
|
autoComplete="off"
|
|
autoComplete="off"
|
|
size={"small"}
|
|
size={"small"}
|
|
style={{ width: '100%' }}
|
|
style={{ width: '100%' }}
|
|
type="number"
|
|
type="number"
|
|
- value={data != undefined ? data[f.fieldName] : ''}
|
|
+ value={_data != undefined ? _data[f.field_name] : ''}
|
|
- onChange={(e) => handleTextNumber(e, f.fieldName)}
|
|
+ onChange={(e) => handleTextNumber(e, f.field_name)}
|
|
/>
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>;
|
|
</Grid>;
|
|
}
|
|
}
|
|
else if (f.type == 'text_multiline') {
|
|
else if (f.type == 'text_multiline') {
|
|
- return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
+ return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Box style={{ width: '150px' }}>
|
|
<Box style={{ width: '150px' }}>
|
|
<Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
<Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
@@ -211,21 +222,21 @@ function FieldList(props) {
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item xs={12} sm={7}>
|
|
<Grid item xs={12} sm={7}>
|
|
<TextField
|
|
<TextField
|
|
- id={f.fieldName}
|
|
+ id={f.field_name}
|
|
multiline
|
|
multiline
|
|
autoComplete="off"
|
|
autoComplete="off"
|
|
rows={3}
|
|
rows={3}
|
|
size={"small"}
|
|
size={"small"}
|
|
style={{ width: '100%' }}
|
|
style={{ width: '100%' }}
|
|
- value={data != undefined ? data[f.fieldName] : ''}
|
|
+ value={_data != undefined ? _data[f.field_name] : ''}
|
|
variant="outlined"
|
|
variant="outlined"
|
|
- onChange={(e) => handleTextMultiline(e, f.fieldName)}
|
|
+ onChange={(e) => handleTextMultiline(e, f.field_name)}
|
|
/>
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>;
|
|
</Grid>;
|
|
}
|
|
}
|
|
else if (f.type == 'date') {
|
|
else if (f.type == 'date') {
|
|
- return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
+ return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Box style={{ width: '150px' }}>
|
|
<Box style={{ width: '150px' }}>
|
|
<Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
<Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
@@ -233,23 +244,23 @@ function FieldList(props) {
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item xs={12} sm={7}>
|
|
<Grid item xs={12} sm={7}>
|
|
<TextField
|
|
<TextField
|
|
- id={f.fieldName}
|
|
+ id={f.field_name}
|
|
variant="outlined"
|
|
variant="outlined"
|
|
autoComplete="off"
|
|
autoComplete="off"
|
|
size={"small"}
|
|
size={"small"}
|
|
- value={data != undefined ? data[f.fieldName] : ''}
|
|
+ value={_data != undefined ? _data[f.field_name] : ''}
|
|
type="date"
|
|
type="date"
|
|
style={{ width: '100%' }}
|
|
style={{ width: '100%' }}
|
|
- onChange={(e) => handleDate(e, f.fieldName)}
|
|
+ onChange={(e) => handleDate(e, f.field_name)}
|
|
/>
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>;
|
|
</Grid>;
|
|
}
|
|
}
|
|
else if (f.type == 'dropdown') {
|
|
else if (f.type == 'dropdown') {
|
|
- if (f.options != undefined) {
|
|
+ if (f.options != undefined && f.option_label_field != undefined) {
|
|
- if (f.fieldName == 'priority') {
|
|
+ if (f.field_name == 'priority') {
|
|
|
|
|
|
- return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
+ return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Box style={{ width: '150px' }}>
|
|
<Box style={{ width: '150px' }}>
|
|
<Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
<Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
@@ -258,9 +269,9 @@ function FieldList(props) {
|
|
<Grid item xs={12} sm={7}>
|
|
<Grid item xs={12} sm={7}>
|
|
<NativeSelect
|
|
<NativeSelect
|
|
id="demo-customized-select-native"
|
|
id="demo-customized-select-native"
|
|
- value={data != undefined ? data[f.fieldName] : ''}
|
|
+ value={_data != undefined ? _data[f.field_name] : ''}
|
|
- onChange={(e) => handleDropDownChange(e, f.fieldName)}
|
|
+ onChange={(e) => handleDropDownChange(e, f.field_name)}
|
|
- id={f.fieldName}
|
|
+ id={f.field_name}
|
|
input={<BootstrapInput />}
|
|
input={<BootstrapInput />}
|
|
style={{ width: '100%' }}
|
|
style={{ width: '100%' }}
|
|
>
|
|
>
|
|
@@ -272,97 +283,66 @@ function FieldList(props) {
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>;
|
|
</Grid>;
|
|
} else {
|
|
} else {
|
|
- var fn = f.fieldName.split('_');
|
|
+ return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
- var fieldId = fn[0] + '_' + 'id';
|
|
+ <Grid item xs={12} sm={5}>
|
|
-
|
|
+ <Box style={{ width: '150px' }}>
|
|
- if (isNew) {
|
|
+ <Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
- return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
+ </Box>
|
|
- <Grid item xs={12} sm={5}>
|
|
+ </Grid>
|
|
- <Box style={{ width: '150px' }}>
|
|
+ <Grid item xs={12} sm={7}>
|
|
- <Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
+ <Autocomplete
|
|
- </Box>
|
|
+ id="combo-box-demo"
|
|
- </Grid>
|
|
+ options={f.options}
|
|
- <Grid item xs={12} sm={7}>
|
|
+ getOptionLabel={(option) => {
|
|
- <Autocomplete
|
|
+ if (typeof option === 'string') {
|
|
- id="combo-box-demo"
|
|
+ return option;
|
|
- options={f.options}
|
|
+ }
|
|
- getOptionLabel={(option) => {
|
|
+ return option[f.option_label_field];
|
|
- if (typeof option === 'string') {
|
|
+ }}
|
|
- return option;
|
|
+ style={{ width: '100%' }}
|
|
|
|
+ size='small'
|
|
|
|
+ value={_data != undefined ? _data[f.field_name] ? _data[f.field_name] : " " : " "}
|
|
|
|
+ filterOptions={(options, params) => {
|
|
|
|
+ console.log("Autocomplete", f.can_create);
|
|
|
|
+ if (f.can_create) {
|
|
|
|
+ var newFilter = ['+ Add New']
|
|
|
|
+ var filtered = filter(options, params);
|
|
|
|
+ return [...newFilter, ...filtered];
|
|
|
|
+ } else {
|
|
|
|
+ var filtered = filter(options, params);
|
|
|
|
+ return filtered;
|
|
|
|
+ }
|
|
|
|
+ }}
|
|
|
|
+ onChange={(event, newValue) => {
|
|
|
|
+ if (typeof newValue === 'string') {
|
|
|
|
+ console.log('f.field_name', f.field_name, " f.can_create", f.can_create);
|
|
|
|
+ var d = {
|
|
|
|
+ "canCreate": f.can_create,
|
|
|
|
+ "fields": f.fields,
|
|
|
|
+ "name": f.name,
|
|
|
|
+ "fieldName": f.field_name
|
|
}
|
|
}
|
|
- return option[f.fieldName] != undefined ? option[f.fieldName] : option.name != undefined ? option.name : option.product_desc != undefined ? option.product_desc : '';
|
|
+ handleCanCreateNew(d);
|
|
- }}
|
|
+ } else {
|
|
- style={{ width: '100%' }}
|
|
+ if (newValue != null && newValue.inputValue != '' && newValue.product_desc != "") {
|
|
- size='small'
|
|
+ onChangeValue(f.field_name, newValue[f.option_label_field]);
|
|
- value={data != undefined ? data[f.fieldName] ? data[f.fieldName] : " " : " "}
|
|
|
|
- filterOptions={(options, params) => {
|
|
|
|
- console.log("Autocomplete", f.canCreate);
|
|
|
|
- if (f.canCreate) {
|
|
|
|
- var newFilter = ['+ Add New']
|
|
|
|
- var filtered = filter(options, params);
|
|
|
|
- return [...newFilter, ...filtered];
|
|
|
|
- } else {
|
|
|
|
- var filtered = filter(options, params);
|
|
|
|
- return filtered;
|
|
|
|
}
|
|
}
|
|
- }}
|
|
+ }
|
|
- onChange={(event, newValue) => {
|
|
+ }}
|
|
- if (typeof newValue === 'string') {
|
|
+ renderInput={(params) => <TextField {...params} variant="outlined" />}
|
|
- console.log('f.fieldName', f.fieldName, " f.canCreate", f.canCreate);
|
|
+
|
|
- var d = {
|
|
+ />
|
|
- "canCreate": f.canCreate,
|
|
|
|
- "fields": f.fields,
|
|
|
|
- "name": f.name,
|
|
|
|
- "fieldName": f.fieldName
|
|
|
|
- }
|
|
|
|
- handleCanCreateNew(d);
|
|
|
|
- } else {
|
|
|
|
- if (newValue != null && newValue.inputValue != '' && newValue.product_desc != "") {
|
|
|
|
- onChangeValue(f.fieldName, newValue);
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }}
|
|
|
|
- renderInput={(params) => <TextField {...params} variant="outlined" />}
|
|
|
|
-
|
|
|
|
- />
|
|
|
|
-
|
|
|
|
- </Grid>
|
|
|
|
- </Grid>;
|
|
|
|
- }
|
|
|
|
- else {
|
|
|
|
- return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
|
|
- <Grid item xs={12} sm={5}>
|
|
|
|
- <Box style={{ width: '150px' }}>
|
|
|
|
- <Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
|
|
- </Box>
|
|
|
|
- </Grid>
|
|
|
|
- <Grid item xs={12} sm={7}>
|
|
|
|
- <NativeSelect
|
|
|
|
- id="demo-customized-select-native"
|
|
|
|
- value={data != undefined ? data[fieldId] : ''}
|
|
|
|
- onChange={(e) => handleDropDownChange(e, f.fieldName)}
|
|
|
|
- id={f.fieldName}
|
|
|
|
- input={<BootstrapInput />}
|
|
|
|
- style={{ width: '100%' }}
|
|
|
|
- >
|
|
|
|
- <option aria-label="None" value="" >Select</option>
|
|
|
|
- {f.options.map((d, i) => {
|
|
|
|
- var name = d[f.fieldName] != undefined ? d[f.fieldName] : d.name;
|
|
|
|
- return <option name={name} value={d.id}>{name}</option>;
|
|
|
|
- })}
|
|
|
|
- </NativeSelect>
|
|
|
|
- </Grid>
|
|
|
|
- </Grid>;
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
+ </Grid>
|
|
|
|
+ </Grid>;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else if (f.type == 'photo_list') {
|
|
else if (f.type == 'photo_list') {
|
|
- console.log('photo_list:', data);
|
|
+ console.log('photo_list:', _data);
|
|
return <div>
|
|
return <div>
|
|
<Grid
|
|
<Grid
|
|
- key={f.fieldName} container
|
|
+ key={f.field_name} container
|
|
style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Box style={{ width: '150px' }}>
|
|
<Box style={{ width: '150px' }}>
|
|
@@ -374,20 +354,20 @@ function FieldList(props) {
|
|
<form>
|
|
<form>
|
|
<div className="form-group">
|
|
<div className="form-group">
|
|
<input type="file" name="imgCollection"
|
|
<input type="file" name="imgCollection"
|
|
- onChange={(e) => onFileChange(e, f.fieldName)} multiple />
|
|
+ onChange={(e) => onFileChange(e, f.field_name)} multiple />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
- {data[f.fieldName] != undefined && data[f.fieldName].length != 0 ?
|
|
+ {_data[f.field_name] != undefined && _data[f.field_name].length != 0 ?
|
|
<Grid
|
|
<Grid
|
|
- key={f.fieldName} container
|
|
+ key={f.field_name} container
|
|
style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
<Grid item xs={12}>
|
|
<Grid item xs={12}>
|
|
<div style={{ display: 'block', alignItems: 'center', marginBottom: '10px' }}>
|
|
<div style={{ display: 'block', alignItems: 'center', marginBottom: '10px' }}>
|
|
<GridList className={classes.gridList}>
|
|
<GridList className={classes.gridList}>
|
|
- {data[f.fieldName] == undefined ? <span /> : data[f.fieldName].map((tile) => (
|
|
+ {_data[f.field_name] == undefined ? <span /> : _data[f.field_name].map((tile) => (
|
|
<GridListTile key={tile} style={{ width: '100px', height: '100px' }}>
|
|
<GridListTile key={tile} style={{ width: '100px', height: '100px' }}>
|
|
<img src={tile} alt={tile} onClick={(e) => {
|
|
<img src={tile} alt={tile} onClick={(e) => {
|
|
setSelectedPhoto(tile);
|
|
setSelectedPhoto(tile);
|
|
@@ -410,7 +390,7 @@ function FieldList(props) {
|
|
</Grid>
|
|
</Grid>
|
|
<br />
|
|
<br />
|
|
<Grid container spacing={3}>
|
|
<Grid container spacing={3}>
|
|
- {data[f.fieldName].length > 0 ? data[f.fieldName].map((value) => (
|
|
+ {_data[f.field_name].length > 0 ? _data[f.field_name].map((value) => (
|
|
<Grid key={value} item>
|
|
<Grid key={value} item>
|
|
<Box className="square" > <img src={value} className="thumnail-img" alt="logo" onClick={(e) => setSelectedPhoto(value)} /></Box>
|
|
<Box className="square" > <img src={value} className="thumnail-img" alt="logo" onClick={(e) => setSelectedPhoto(value)} /></Box>
|
|
</Grid>
|
|
</Grid>
|
|
@@ -424,10 +404,10 @@ function FieldList(props) {
|
|
</div>;
|
|
</div>;
|
|
}
|
|
}
|
|
else if (f.type == 'list') {
|
|
else if (f.type == 'list') {
|
|
- console.log('list', data[f.fieldName]);
|
|
+ console.log('list', _data[f.field_name]);
|
|
return <div>
|
|
return <div>
|
|
<Grid
|
|
<Grid
|
|
- key={f.fieldName} container
|
|
+ key={f.field_name} container
|
|
style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Box style={{ width: '150px' }}>
|
|
<Box style={{ width: '150px' }}>
|
|
@@ -443,7 +423,7 @@ function FieldList(props) {
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid
|
|
<Grid
|
|
- key={f.fieldName} container
|
|
+ key={f.field_name} container
|
|
style={{ display: 'block', alignItems: 'center', marginBottom: '10px' }}>
|
|
style={{ display: 'block', alignItems: 'center', marginBottom: '10px' }}>
|
|
|
|
|
|
<div style={{ display: 'block', alignItems: 'center', marginBottom: '10px' }}>
|
|
<div style={{ display: 'block', alignItems: 'center', marginBottom: '10px' }}>
|
|
@@ -457,7 +437,7 @@ function FieldList(props) {
|
|
</TableRow>
|
|
</TableRow>
|
|
</TableHead>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableBody>
|
|
- {data[f.fieldName].length > 0 ? data[f.fieldName].map((row) => (
|
|
+ {_data[f.field_name].length > 0 ? _data[f.field_name].map((row) => (
|
|
<TableRow key={row.name}>
|
|
<TableRow key={row.name}>
|
|
{partHeaders.map((h, i) => {
|
|
{partHeaders.map((h, i) => {
|
|
return (<TableCell key={h.id} align={h.numeric ? 'right' : 'left'}>{row[h.id]}</TableCell>);
|
|
return (<TableCell key={h.id} align={h.numeric ? 'right' : 'left'}>{row[h.id]}</TableCell>);
|
|
@@ -474,7 +454,7 @@ function FieldList(props) {
|
|
</div>;
|
|
</div>;
|
|
}
|
|
}
|
|
else if (f.type == 'time') {
|
|
else if (f.type == 'time') {
|
|
- return <Grid key={f.fieldName} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
+ return <Grid key={f.field_name} container style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Grid item xs={12} sm={5}>
|
|
<Box style={{ width: '150px' }}>
|
|
<Box style={{ width: '150px' }}>
|
|
<Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
<Typography style={{ paddingRight: '30px', color: 'grey' }}>{f.label}</Typography>
|
|
@@ -492,7 +472,7 @@ function FieldList(props) {
|
|
inputProps={{
|
|
inputProps={{
|
|
step: 300,
|
|
step: 300,
|
|
}}
|
|
}}
|
|
- onChange={(e) => handleTime(e, f.fieldName)}
|
|
+ onChange={(e) => handleTime(e, f.field_name)}
|
|
/>
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>;
|
|
</Grid>;
|
|
@@ -503,42 +483,28 @@ function FieldList(props) {
|
|
|
|
|
|
{}
|
|
{}
|
|
{actions.length > 0 ?
|
|
{actions.length > 0 ?
|
|
- currentTabName === 'account' ? <Grid item xs={12}>
|
|
+ <Grid item xs={12}>
|
|
- {data != undefined ?
|
|
+ {actions.map((a) => {
|
|
- actions.map((a) => {
|
|
+ if (a.status === _data.status) {
|
|
- if (a.status === data.status) {
|
|
+ return <MButton action={a} onCallback={a.callback(_data)}></MButton>;
|
|
- return <MButton action={a} onCallback={a.callback(data)}></MButton>;
|
|
+ }
|
|
- }
|
|
+ })}
|
|
-
|
|
|
|
- })
|
|
|
|
- : <Grid />
|
|
|
|
- }
|
|
|
|
- </Grid>
|
|
|
|
- : <Grid item xs={12}>
|
|
|
|
- {actions.map((a) => {
|
|
|
|
- if (a.status === data.status && currentTabName !== 'account') {
|
|
|
|
- return <MButton action={a} onCallback={a.callback(data)}></MButton>;
|
|
|
|
- }
|
|
|
|
- })}
|
|
|
|
|
|
|
|
- </Grid>
|
|
+ </Grid> : <Grid />}
|
|
- : <Grid />}
|
|
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
);
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
-FieldList.propTypes = {
|
|
+MkForm.propTypes = {
|
|
history: PropTypes.object,
|
|
history: PropTypes.object,
|
|
fields: PropTypes.array.isRequired,
|
|
fields: PropTypes.array.isRequired,
|
|
- updateData: PropTypes.object,
|
|
+ data: PropTypes.object,
|
|
isNew: PropTypes.bool,
|
|
isNew: PropTypes.bool,
|
|
- currentTabName: PropTypes.string,
|
|
|
|
- onCancel: PropTypes.func,
|
|
|
|
actions: PropTypes.array,
|
|
actions: PropTypes.array,
|
|
- onCanCreateNew: PropTypes.func
|
|
+ onDropdownCreateNew: PropTypes.func
|
|
};
|
|
};
|
|
|
|
|
|
-export default (FieldList);
|
|
+export default (MkForm);
|
|
|
|
|