Commit a8574a7c authored by Matija Obreza's avatar Matija Obreza Committed by Viacheslav Pavlov

Admin: KPI forms updated

- Select type with <Radio />
- Specify Execution parameter
- Added missing keys to repeated items
parent 8a6866ff
......@@ -407,7 +407,7 @@
"public": {
"p": {
"countryList": {
"title": "ISO-3316 list",
"title": "ISO-3166 list",
"subTitle": "Find registered institutes as well as overview on plant genetic resources",
"acceCount": "{{count, number}} accessions",
"acceCountAtInstitutes": "{{count, number}} accessions at {{institutes, number}} institutes",
......@@ -415,8 +415,8 @@
"institutesCountInWIEWS": "{{count, number}} institutes registered in WIEWS",
"instituteLocations": "Institute locations",
"moreInformation": "More information",
"isoCodes": "ISO-3316",
"countryProfile": "ISO-3316 code {{code}}"
"isoCodes": "ISO-3166",
"countryProfile": "ISO-3166 code {{code}}"
},
"regionList": {
"title": "FAO Geographical regions",
......@@ -436,7 +436,7 @@
"longitude": "Longitude",
"address": "Address",
"country": "Country",
"menu": "ISO-3316 codes"
"menu": "ISO-3166 codes"
}
}
......@@ -519,7 +519,8 @@
"parameter": "Parameter",
"parameterSelector": {
"selectParameter": "Select parameter"
}
},
"property": "Parameter property"
},
"jpaDimensionExtra": {
"condition": "Condition",
......
......@@ -31,7 +31,8 @@
"parameter": "Parameter",
"parameterSelector": {
"selectParameter": "Select parameter"
}
},
"property": "Parameter property"
},
"jpaDimensionExtra": {
"condition": "Condition",
......
import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {translate} from 'react-i18next';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
// actions
import {saveExecution} from 'kpi/actions/admin';
import { saveExecution } from 'kpi/actions/admin';
// model
import Execution from 'model/kpi/Execution';
import {withStyles} from '@material-ui/core/styles';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
......@@ -68,7 +68,7 @@ class ExecutionDialog extends React.Component<IExecutionDialogProps, any> {
<Dialog open={ this.state.open } onClose={ this.hide } maxWidth="md" fullWidth>
<DialogTitle>{ t(`kpi.admin.p.executionDialog.title`) }</DialogTitle>
<DialogContent>
<ExecutionForm t={ t } nameDisabled={ execution && execution.name } onCancel={ this.hide } onSubmit={ this.handleSubmit } initialValues={ execution }/>
<ExecutionForm t={ t } nameDisabled={ execution && execution.id !== null } onCancel={ this.hide } onSubmit={ this.handleSubmit } initialValues={ execution }/>
</DialogContent>
</Dialog>
}
......
......@@ -21,7 +21,7 @@ class StringList extends React.Component<IStringListProps> {
return (
<div>
{ renderList && renderList.length > 0 && renderList.map((renderItem, index) => (
<div style={ { margin: '.2rem 0', padding: '.2rem 1rem', backgroundColor: '#e8e5e1', color: '#202222' } } key={ renderItem.value }>
<div key={ renderItem.value } style={ { margin: '.2rem 0', padding: '.2rem 1rem', backgroundColor: '#e8e5e1', color: '#202222' } }>
{ renderItem }
<div className="font-bold float-right" onClick={ () => removeByIndex(index) }>X</div>
</div>
......
......@@ -11,13 +11,14 @@ import MenuItem from '@material-ui/core/MenuItem';
import FormControl from 'ui/common/forms/FormControl';
import Grid from '@material-ui/core/Grid';
import { TextField } from 'ui/common/text-field';
import Validators from 'utilities/Validators';
interface IStringListProps extends React.ClassAttributes<any> {
input: any;
removeByIndex: (index: number) => void;
}
class StringList extends React.Component<IStringListProps> {
class ExecutionDimensionForm extends React.Component<IStringListProps> {
public render() {
const {input: {value: renderList}, removeByIndex} = this.props;
......@@ -25,7 +26,7 @@ class StringList extends React.Component<IStringListProps> {
return (
<div>
{ renderList && renderList.length > 0 && renderList.map((renderItem, index) => (
<Grid container spacing={ 8 } style={ {display: 'flex', alignItems: 'baseline'} }>
<Grid key={ `executionDimensions-${index}` } container spacing={ 8 } style={ {display: 'flex', alignItems: 'baseline'} }>
<Grid item xs={ 6 }>
<div style={ {margin: '.2rem 0', padding: '.2rem 1rem', backgroundColor: '#e8e5e1', color: '#202222'} } key={ renderItem.dimension.name }>
{ renderItem.dimension.title }
......@@ -34,18 +35,19 @@ class StringList extends React.Component<IStringListProps> {
</Grid>
<Grid item xs={ 3 }>
<Field
name={ `executionDimensions[${index}].field` }
name={ `executionDimensions[${index}].link` }
component={ TextField }
type="text"
label={ `kpi.admin.c.executionForm.field` }
label={ `kpi.admin.c.executionForm.link` }
/>
</Grid>
<Grid item xs={ 3 }>
<Field
name={ `executionDimensions[${index}].link` }
name={ `executionDimensions[${index}].field` }
component={ TextField }
type="text"
label={ `kpi.admin.c.executionForm.link` }
label={ `kpi.admin.c.executionForm.field` }
validate={ [Validators.required] }
/>
</Grid>
</Grid>
......@@ -144,9 +146,10 @@ class DimensionListFieldInternal extends React.Component<IListDimensionFormExtra
<div>
<FormControl fullWidth label={ label }>
<Select
value={ `${input.value}` }
onChange={ this.handleAddCurrent }
>
<MenuItem value="" >{ t('kpi.admin.c.executionForm.dimensionList.selectDimension') }</MenuItem>
<MenuItem value="">{ t('kpi.admin.c.executionForm.dimensionList.selectDimension') }</MenuItem>
{ dim && dim.length > 0 &&
dim.map((dimension, i) => (
<MenuItem key={ i } value={ JSON.stringify(dimension) }>
......@@ -156,7 +159,7 @@ class DimensionListFieldInternal extends React.Component<IListDimensionFormExtra
}
</Select>
</FormControl>
<StringList input={ input } removeByIndex={ this.removeByIndex }/>
<ExecutionDimensionForm input={ input } removeByIndex={ this.removeByIndex }/>
</div>
);
}
......@@ -190,7 +193,6 @@ class DimensionListField extends React.Component<IDimensionListFieldProps> {
return(
<Field name={ `executionDimensions` }
component={ DimensionListFieldInternal }
type="text"
label={ label }
t={ t }
dim={ dim }
......
......@@ -37,11 +37,11 @@ class ParameterSelector extends React.Component<any> {
public render() {
const {input, meta, classes, label, t, params} = this.props;
const selectValue = params && params.find((item) => item.name === input.value.name) || null;
const selectValue = params && params.find((item) => item.name === input.value.name) || '';
return (
<div>
<FormControl fullWidth label={ label } meta={ meta } shrink={ selectValue !== null }>
<FormControl fullWidth label={ label } meta={ meta } shrink={ selectValue !== '' }>
<Select
value={ selectValue }
displayEmpty
......@@ -51,7 +51,7 @@ class ParameterSelector extends React.Component<any> {
>
<MenuItem value="" className={ classes.liItem }>{ t('kpi.admin.c.executionForm.parameterSelector.selectParameter') }</MenuItem>
{ params && params.length > 0 && params.map((param, i) => (
<MenuItem key={ i } value={ param } className={ classes.liItem }>
<MenuItem key={ param.id } value={ param } className={ classes.liItem }>
{ param.title }
</MenuItem>
))
......
......@@ -10,6 +10,36 @@ import Button from '@material-ui/core/Button';
import ParameterSelector from './ParameterSelector';
import DimensionListField from './DimensionListField';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
const ExecutionTypeSelector = ({input, meta, t, ...rest}) => {
console.log('Execsel', input, rest);
const handleChange = (value) => {
console.log(`Setting value ${value}`);
input.onChange(value);
};
return (
<FormControl fullWidth>
<FormLabel>{ t(`kpi.admin.c.executionForm.type`) }</FormLabel>
<RadioGroup
value={ `${input.value}` }
onChange={ handleChange }
style={ {flexDirection: 'row', justifyContent: 'space-around'} }
>
<FormControlLabel value="COUNT" control={ <Radio /> } label={ t('kpi.admin.c.execution.type.COUNT') } />
<FormControlLabel value="AVERAGE" control={ <Radio /> } label={ t('kpi.admin.c.execution.type.AVERAGE') } />
<FormControlLabel value="SUM" control={ <Radio /> } label={ t('kpi.admin.c.execution.type.SUM') } />
</RadioGroup>
</FormControl>
);
};
class ExecutionForm extends React.Component<any, void> {
public render() {
......@@ -26,12 +56,6 @@ class ExecutionForm extends React.Component<any, void> {
validate={ [Validators.required] }
disabled={ nameDisabled }
/>
<Field
name={ `type` }
component={ TextField }
type="text"
label={ t(`kpi.admin.c.executionForm.type`) }
/>
<Field
name={ `title` }
component={ TextField }
......@@ -39,12 +63,24 @@ class ExecutionForm extends React.Component<any, void> {
label={ t(`common:label.title`) }
validate={ [Validators.required] }
/>
<Field
name={ `type` }
component={ ExecutionTypeSelector }
validate={ [Validators.required] }
t={ t }
/>
<Field
name={ `parameter` }
component={ ParameterSelector }
label={ t(`kpi.admin.c.executionForm.parameter`) }
validate={ [Validators.required] }
/>
<Field
name={ `property` }
component={ TextField }
type="text"
label={ t(`kpi.admin.c.executionForm.property`) }
/>
<DimensionListField
name={ `dimensions` }
label={ t(`kpi.admin.c.executionForm.dimensions`) }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment