#324 Single crop selection

src/ui/App.tsx

@@ -18,6 +18,7 @@ import Header from './layout/Header';
 import Footer from './layout/Footer';
 import Snackbar from 'ui/common/snackbar/Snackbar';
 import renderRoutes from 'ui/renderRoutes';
+import {Crop} from 'model/crop.model';
 
 interface IAppProps extends React.ClassAttributes<any> {
     children: any;
@@ -28,6 +29,8 @@ interface IAppProps extends React.ClassAttributes<any> {
     loginAppRequest: () => Promise<any>;
     setAppMounted: () => void;
     updateHistory: (path: string) => void;
+    crops: Crop[];
+    listCrops: () => void;
 }
 
 class App extends React.Component<IAppProps, any> {
@@ -38,7 +41,14 @@ class App extends React.Component<IAppProps, any> {
 
     public constructor(props: any) {
         super(props);
-     }
+    }
+
+    public componentWillMount() {
+        const { crops, listCrops } = this.props;
+        if (!crops || crops.length === 0) {
+            listCrops();
+        }
+    }
 
     public componentWillReceiveProps(nextProps) {
         const {updateHistory} = this.props;
@@ -63,6 +73,7 @@ class App extends React.Component<IAppProps, any> {
 }
 
 const mapStateToProps = (state) => ({
+    crops: state.crop.list,
   // accessToken: state.login.access_token,
 });
 
@@ -71,6 +82,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
   loginAppRequest,
   setAppMounted,
   updateHistory,
+  listCrops,
 }, dispatch);
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

src/ui/catalog/crop/CropSelector.tsx

@@ -5,17 +5,20 @@ import { translate } from 'react-i18next';
 import Grid from 'material-ui/Grid';
 import { FormControlLabel, FormLabel, FormControl, FormHelperText } from 'material-ui/Form';
 import Checkbox from 'material-ui/Checkbox';
+import Radio from 'material-ui/Radio';
 
 import {Crop} from 'model/crop.model';
 
 interface ICropSelectorProps extends React.ClassAttributes<any> {
     t: any;
     crops: Crop[];
-    fields: any;
+    fields?: any;
     label: string;
+    input?: any;
+    single?: boolean;
 }
 
-const handleChange = (fields, code) => () => {
+const handleCheckboxChange = (fields, code) => () => {
     const index = fields.getAll() ? fields.getAll().indexOf(code) : -1;
 
     if (index === -1) {
@@ -25,7 +28,27 @@ const handleChange = (fields, code) => () => {
     }
 };
 
-const CropSelector = ({t, fields, crops, label}: ICropSelectorProps) => crops && (
+const handleRadioButtonChange = (input, code) => () => {
+    input.onChange(code);
+};
+
+const renderCheckbox = (fields, code) =>  (
+    <Checkbox
+        checked={ fields.getAll() && fields.getAll().indexOf(code) !== -1 }
+        onChange={ handleCheckboxChange(fields, code) }
+        value={ code }
+    />
+);
+
+const renderRadioButton = (input, code) =>  (
+    <Radio
+        checked={ input.value === code }
+        onChange={ handleRadioButtonChange(input, code) }
+        value={ code }
+    />
+);
+
+const CropSelector = ({t, crops, label, single, fields, input}: ICropSelectorProps) => crops && (
     <FormControl fullWidth>
         <FormLabel>{ label }</FormLabel>
         <FormHelperText>{ t('m.crop.helper') }</FormHelperText>
@@ -35,11 +58,8 @@ const CropSelector = ({t, fields, crops, label}: ICropSelectorProps) => crops &&
                     <Grid item key={ crop.uuid } xs={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
                         <FormControlLabel
                             control={
-                                <Checkbox
-                                    checked={ fields.getAll() && fields.getAll().indexOf(crop.code) !== -1 }
-                                    onChange={ handleChange(fields, crop.code) }
-                                    value={ crop.code }
-                                />
+                                single ? renderRadioButton(input, crop.code)
+                                    : renderCheckbox(fields, crop.code)
                             }
                             label={ crop.title }
                         />
@@ -52,7 +72,7 @@ const CropSelector = ({t, fields, crops, label}: ICropSelectorProps) => crops &&
 
 
 const mapStateToProps = (state) => ({
-	crops: state.crop.list,
+    crops: state.crop.list,
 });
 
 

src/ui/pages/descriptor/c/DescriptorForm.tsx

@@ -24,6 +24,7 @@ import { FormLabel, FormControlLabel } from 'material-ui/Form';
 import Grid from 'material-ui/Grid';
 import { setPageTitle } from 'actions/pageTitle';
 import { bindActionCreators } from 'redux';
+import CropSelector from 'ui/catalog/crop/CropSelector';
 
 // FIXME Use Descriptor.DATATYPES
 const renderDataTypeRadioGroup = ({input, meta, ...rest}) => (
@@ -141,8 +142,9 @@ class DescriptorForm extends React.Component<any, any> {
                         validate={ [ Validators.required ] }
                     />
                     <Field name="crop"
-                        label="Crop code" placeholder="maize"
-                        component={ TextField }
+                        label="Crop code"
+                        component={ CropSelector }
+                        single
                     />
                     <Field required name="title"
                         label="Descriptor title" placeholder="Color of magic"

src/ui/pages/descriptorlist/c/DescriptorListForm.tsx

@@ -8,6 +8,7 @@ import Authorize from 'ui/common/authorized/Authorize';
 import SelectPartner from 'ui/catalog/partner/SelectPartner';
 import Validators from 'utilities/Validators';
 import remoteSubmit from 'ui/pages/descriptorlist/descriptorlist-stepper/steps/basic-info/RemoteSubmit';
+import CropSelector from 'ui/catalog/crop/CropSelector';
 
 class DescriptorListForm extends React.Component<any, any> {
 
@@ -50,7 +51,8 @@ class DescriptorListForm extends React.Component<any, any> {
                 <Field name="crop"
                     label="Crop code"
                     placeholder="maize"
-                    component={ TextField }
+                    component={ CropSelector }
+                    single
                 />
                 <Field required
                        name="title"
@@ -61,7 +63,7 @@ class DescriptorListForm extends React.Component<any, any> {
                        validate={ [Validators.required] }
                 />
                 <Field required
-                       disabled={ initialValues.uuid }
+                       disabled={ !!initialValues.uuid }
                        name="versionTag"
                        label="Version tag"
                        placeholder="1.0"