Admin: KPI forms updated

- Select type with <Radio />
- Specify Execution parameter
- Added missing keys to repeated items

locales/en/translations.json

@@ -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",

src/kpi/translations.json

@@ -31,7 +31,8 @@
         "parameter": "Parameter",
         "parameterSelector": {
           "selectParameter": "Select parameter"
-        }
+        },
+        "property": "Parameter property"
       },
       "jpaDimensionExtra": {
         "condition": "Condition",

src/kpi/ui/admin/ExecutionDialog.tsx

 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>
         }

src/kpi/ui/admin/c/dimensionForm/StringListDimensionFormExtra.tsx

@@ -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>

src/kpi/ui/admin/c/executionForm/DimensionListField.tsx

@@ -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 }

src/kpi/ui/admin/c/executionForm/ParameterSelector.tsx

@@ -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>
               ))

src/kpi/ui/admin/c/executionForm/index.tsx

@@ -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`) }