Dataset creators update

- i18n
- New codes

locales/en/translations.json

@@ -91,5 +91,21 @@
       "suggestion5": "Anything on 'cassava'?",
       "suggestion6": "Maybe 'drought'"
     }
+  },
+  "dataset": {
+    "creator": {
+      "role": {
+        "MANAGER": "Data manager",
+        "COLLECTOR": "Data collector",
+        "DIGITIZER": "Data digitizer",
+        "CURATOR": "Data curator"
+      },
+      "roledesc": {
+        "MANAGER": "Responsible of the planning and execution of the germplasm characterization and evaluation activity which resulted in the dataset. Oversees the collection and management of characterization and evaluation data, and has final sign-off on publication.",
+        "COLLECTOR": "Records germplasm characterization or evaluation data in the field.",
+        "DIGITIZER": "Digitizes data.",
+        "CURATOR": "Organizes and validates data and metadata in correct format, ensures quality of both."
+      }
+    }
   }
 }

src/model/creator.model.ts

@@ -20,8 +20,10 @@ class Creator extends UuidModel {
 }
 
 enum CreatorRole {
-  CONTACT = 'CONTACT',
-  CONTRIBUTOR = 'CONTRIBUTOR',
+  MANAGER = 'MANAGER',
+  COLLECTOR = 'COLLECTOR',
+  DIGITIZER = 'DIGITIZER',
+  CURATOR = 'CURATOR',
 }
 
 export { Creator, CreatorRole };

src/service/CreatorService.ts

@@ -8,7 +8,7 @@ export class CreatorService {
 
     public static createCreator(token: string, uuid: string): Promise<Creator> {
         log('Create Creator');
-        const creator = { role: CreatorRole.CONTACT, fullName: '' };
+        const creator = { role: CreatorRole.CURATOR, fullName: '' };
         return authenticatedRequest(token, {
             url: `${MAIN_URL_PART_CREATOR_URL}/${uuid}${CREATE_CREATOR_URL}`,
             method: 'POST',

src/ui/common/forms/FormControl.tsx

@@ -16,23 +16,25 @@ interface IProps {
 const styles = (theme) => {
   console.log(theme);
   return ({
-    errors: {
+    helper: {
+      paddingTop: '0.5rem',
       color: theme.palette.error.A400,
-      // margin: '2rem',
     },
   });
 };
 
 const FormControl = ({ fullWidth = false, required = false, label = null, children, meta = {}, classes }: IProps) => {
   // console.log('Meta', meta);
-  const { touched, error, warning } = meta;
+  const { error, warning } = meta;
 
   return (
     <MuiFormControl fullWidth={ fullWidth }>
-        { label && <InputLabel error={ touched && error && true } required={ required }>{ label }</InputLabel> }
+        { label && <InputLabel error={ error && true } required={ required }>{ label }</InputLabel> }
         { children }
         {
-          ((error && <h6 className={ touched ? classes.errors : '' }>{ error }</h6>) || (warning && <h6 className={ touched ? classes.errors : '' }>{ warning }</h6>))
+          ((error && <div className={ classes.helper }>{ error }</div>)
+          ||
+          (warning && <div className={ classes.helper }>{ warning }</div>))
         }
     </MuiFormControl>
   );

src/ui/pages/dataset/c/DatasetDisplay.tsx

 
 import * as React from 'react';
+import { translate } from 'react-i18next';
 import { withStyles } from 'material-ui/styles';
 
 import {log} from 'utilities/debug';
@@ -121,6 +122,7 @@ const styles = (theme) => ({
 });
 
 interface IDetailInfoProps extends React.ClassAttributes<any> {
+    t: any;
     classes: any;
     dataset: Dataset;
     publishDataset?: (dataset: Dataset, publish?: boolean) => any;
@@ -185,7 +187,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
     }
 
     public render() {
-        const { classes, dataset, publishDataset, deleteDataset } = this.props;
+        const { classes, dataset, publishDataset, deleteDataset, t } = this.props;
 
         if (! dataset) {
           log('Waiting for dataset.');
@@ -239,17 +241,19 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
                     { dataset.creators && dataset.creators.length > 0 &&
                       <div>
                         <div className="pt-15 pb-15 pl-20 pr-20">
-                            <h4 className="font-bold m-0">Creators</h4>
+                            <h4 className="font-bold m-0">Dataset creators</h4>
                         </div>
                         <Divider/>
                         <Grid container spacing={ 0 } className="p-20">
                             <Grid item xs={ 12 }>
                               <Properties>
                                 { dataset.creators && dataset.creators.map((e: Creator, i) => (
-                                  <PropertiesItem title={ e.role } key={ e.id }>
-                                      <p><b>{ e.fullName }</b></p>
-                                      { e.institutionalAffiliation && <p>{ e.institutionalAffiliation }</p> }
-                                      { e.email && <div><a href={ `mailto:${e.email}` }>{ e.email }</a></div> }
+                                  <PropertiesItem title={ t(`dataset.creator.role.${e.role}`) } key={ e.id }>
+                                      <span>
+                                        <b>{ e.fullName }</b>
+                                        { e.institutionalAffiliation && <span> { e.institutionalAffiliation }</span> }
+                                      </span>
+                                      { /* { e.email && <div><a href={ `mailto:${e.email}` }>{ e.email }</a></div> } */ }
                                   </PropertiesItem>
                                 )) }
                               </Properties>
@@ -393,4 +397,4 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
 
 }
 
-export default ((withStyles as any)(styles)(DetailInfo));
+export default translate()((withStyles as any)(styles)(DetailInfo));

src/ui/pages/dataset/dataset-stepper/steps/creators/DatasetCreatorForm.tsx

 import * as React from 'react';
+import { translate } from 'react-i18next';
+
 import {Field, reduxForm, FieldArray} from 'redux-form';
 import {withStyles} from 'material-ui/styles';
 import * as _ from 'lodash';
@@ -16,9 +18,10 @@ import {log} from 'utilities/debug';
 import {TextField} from 'ui/common/text-field';
 import {DATASET_CREATOR_FORM} from 'constants/datasets';
 import {Dataset} from 'model/dataset.model';
-import {Creator} from 'model/creator.model';
+import {Creator, CreatorRole} from 'model/creator.model';
 
 interface IDatasetCreatorFormProps extends React.ClassAttributes<any> {
+    t: any;
     initialValues: any;
     fields: any;
     classes: any;
@@ -32,7 +35,7 @@ const styles = (theme) => ({
   // none
 });
 
-const renderRadioGroup = ({input, meta, ...rest}) => {
+const renderRadioGroup = translate()(({input, meta, t}) => {
   const onInputChange = (event, value) => input.onChange(value);
 
   return (
@@ -40,16 +43,16 @@ const renderRadioGroup = ({input, meta, ...rest}) => {
         <FormLabel>Role:</FormLabel>
         <RadioGroup
             { ...input }
-            { ...rest }
             value={ input.value }
             onChange={ onInputChange }
         >
-            <FormControlLabel value="CONTACT" label="Contact" control={ <Radio /> }/>
-            <FormControlLabel value="CONTRIBUTOR" label="Contributor" control={ <Radio /> }/>
+            { Object.keys(CreatorRole).map((role) => (
+              <FormControlLabel key={ role } value={ role } label={ t(`dataset.creator.role.${role}`) } control={ <Radio /> } />
+            )) }
         </RadioGroup>
     </FormControl>
   );
-};
+});
 
 class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any> {
 
@@ -91,8 +94,12 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
                                  validate={ [ Validators.required ] }
                         />
                         <Field  required name={ `${creator}.role` } component={ renderRadioGroup }
-                                onBlur={ this.updateCreator(fields, index) }/>
-
+                                onBlur={ this.updateCreator(fields, index) }
+                        />
+                        <Field  name={ `${creator}.institutionalAffiliation` } component={ TextField } type="text" label="Institutional affiliation"
+                                placeholder="Institutional affiliation"
+                                onBlur={ this.updateCreator(fields, index) }
+                        />
                         <Field  name={ `${creator}.email` } component={ TextField } type="text" label="Email address"
                                 placeholder="name@domain.com"
                                 onBlur={ this.updateCreator(fields, index) }
@@ -108,10 +115,6 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
                                 onBlur={ this.updateCreator(fields, index) }
                                 validate={ [ Validators.phoneNumber ] }
                         />
-                        <Field  name={ `${creator}.institutionalAffiliation` } component={ TextField } type="text" label="Institutional affiliation"
-                                placeholder="Institutional affiliation"
-                                onBlur={ this.updateCreator(fields, index) }
-                        />
                         <Field  name={ `${creator}.instituteAddress` } component={ TextField } type="text" label="Address"
                                 placeholder="Address"
                                 onBlur={ this.updateCreator(fields, index) }
@@ -127,7 +130,7 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
         return (
             <Grid spacing={ 0 } container>
                 <form className="full-width">
-                    <FieldArray name="creators" component={ this.renderCreators }/>
+                    <FieldArray name="creators" component={ this.renderCreators } />
                 </form>
                 <Grid item xs={ 12 } className="back-white">
                     <Button raised type="button" onClick={ this.createCreator } className="m-20">
@@ -142,4 +145,4 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
 export default reduxForm({
     form: DATASET_CREATOR_FORM,
     enableReinitialize: true,
-})((withStyles as any)(styles)(DatasetCreatorForm));
+})(translate()(((withStyles as any)(styles)(DatasetCreatorForm))));