Editor file split into 2 to be cleaner

frontend/src/components/university/shared/Editor.js

@@ -13,16 +13,11 @@ import Slide from '@material-ui/core/Slide';
 import MyComponent from '../../MyComponent';
 import Alert from './Alert';
 import Notification from './Notification';
-import getObjModerationLevel from '../../../utils/getObjModerationLevels';
-import SelectField from './fields/SelectField';
-import UsefulLinksField from './fields/UsefulLinksField';
-import MarkdownField from './fields/MarkdownField';
-import TextField from './fields/TextField';
-import MultiSelectField from './fields/MultiSelectField';
-import NumberField from './fields/NumberField';
 
 import __map from 'lodash/map';
 
+import renderFieldsMixIn from './editorFunctions/renderFieldsMixIn';
+
 function Transition(props) {
   return <Slide direction="up" {...props} />;
 }
@@ -239,178 +234,6 @@ class Editor extends MyComponent {
     return (<div>No editor set</div>)
   }
 
-  renderObjModerationLevelField() {
-    const { obj_moderation_level } = this.props.modelData;
-    const possibleObjModeration = getObjModerationLevel(this.getFetchedData('userData').owner_level, true);
-
-    if (possibleObjModeration.length > 1) {
-      return (
-        <div>
-          <Typography variant='caption'>Niveau de modération souhaité (en plus TODO </Typography>
-          <SelectField label={"Niveau de modération pour ce module"}
-            required={true}
-            value={obj_moderation_level}
-            fieldMapping={"obj_moderation_level"}
-            options={possibleObjModeration}
-            formManager={this}
-          />
-        </div>
-      )
-    } else {
-      return (
-        <Typography variant='caption'>Votre statut ne vous permet pas modifier le niveau local de modération pour ce module.</Typography>
-      )
-    }
-  }
-
-  renderImportanceLevelField() {
-    const { importance_level } = this.props.modelData;
-
-    //TODO change below use JSON
-    const options = [
-      { 'label': 'Normal', 'value': '-' },
-      { 'label': 'Important', 'value': '+' },
-      { 'label': 'Très important', 'value': '++' },
-    ]
-
-    return (
-      <div>
-        <Typography variant='caption'>Qualification de l'importance de l'information présentée</Typography>
-        <SelectField label={"Niveau d'importance"}
-          required={true}
-          value={importance_level}
-          fieldMapping={"importance_level"}
-          options={options}
-          formManager={this}
-        />
-      </div>
-    )
-  }
-
-  renderUsefulLinksField() {
-    const { useful_links } = this.props.modelData;
-    return (
-      <UsefulLinksField label={"Lien(s) utile(s) (ex : vers ces informations)"}
-        value={useful_links}
-        formManager={this}
-        fieldMapping={'useful_links'}
-      />
-    )
-  }
-
-  renderMarkdownField(props) {
-    return (
-      <MarkdownField
-        {...this.addValueToProps(props)}
-        formManager={this}
-      />
-    )
-  }
-
-  renderCommentField() {
-    const { comment } = this.props.modelData;
-    return this.renderMarkdownField({
-      label: "Commentaire associé à ces informations",
-      maxLength: 500,
-      value: comment,
-      formManager: this,
-      fieldMapping: 'comment',
-    })
-  }
-
-  addValueToProps(props){
-    if (typeof props.value == 'undefined'){
-      return Object.assign(props, {value: this.props.modelData[props.fieldMapping]})
-    } else {
-      return props;
-    }
-  }
-  renderTextField(props) {
-    return (
-      <TextField
-        {...this.addValueToProps(props)}
-        formManager={this}
-      />
-    )
-  }
-
-  renderTitleField() {
-    const { title } = this.props.modelData;
-
-    return this.renderTextField({
-      label: 'Titre',
-      required: true,
-      value: title,
-      maxLength: 150,
-      fieldMapping: 'title',
-    })
-  }
-
-  renderUniversitiesField() {
-    const { modelData } = this.props;
-    const { outsideData } = this.props;
-    const universities = __map(outsideData.universities,
-      (univ) => { return { label: univ.name, value: univ.id, disabled: false } }
-    )
-
-    return (
-      <MultiSelectField label={"Universités concernées"}
-        required={true}
-        value={modelData.universities}
-        options={universities}
-        formManager={this}
-        fieldMapping={'universities'}
-      />
-    )
-  }
-
-  renderCountriesField() {
-    const { modelData } = this.props;
-    const { outsideData } = this.props;
-    const countries = __map(outsideData.countries,
-      (country) => { return { label: country.name, value: country.id, disabled: false } }
-    )
-
-    return (
-      <MultiSelectField label={"Pays concernés"}
-        required={true}
-        value={modelData.countries}
-        options={countries}
-        formManager={this}
-        fieldMapping={'countries'}
-      />
-    )
-  }
-
-  renderSelectField(props) {
-    return (
-      <SelectField
-        {...this.addValueToProps(props)}
-        formManager={this}
-      />
-    )
-  }
-
-  renderCurrencyField(props) {
-    const { outsideData } = this.props;
-    const currencies = __map(outsideData.currencies,
-      (c) => { return { label: c.code, value: c.code, disabled: false } }
-    )
-
-    return this.renderSelectField({
-      ...props,
-      options: currencies,
-    })
-  }
-
-  renderNumberField(props) {
-    return (
-      <NumberField
-        {...this.addValueToProps(props)}
-        formManager={this}
-      />
-    )
-  }
 
   myRender() {
     const { classes } = this.props;
@@ -450,6 +273,7 @@ class Editor extends MyComponent {
     );
   }
 }
+Object.assign(Editor.prototype, renderFieldsMixIn)
 
 Editor.propTypes = {
   classes: PropTypes.object.isRequired,

frontend/src/components/university/shared/editorFunctions/renderFieldsMixIn.js

+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import getObjModerationLevel from '../../../../utils/getObjModerationLevels';
+import SelectField from '../fields/SelectField';
+import UsefulLinksField from '../fields/UsefulLinksField';
+import MarkdownField from '../fields/MarkdownField';
+import TextField from '../fields/TextField';
+import MultiSelectField from '../fields/MultiSelectField';
+import NumberField from '../fields/NumberField';
+
+import __map from 'lodash/map';
+
+
+export default {
+  renderObjModerationLevelField() {
+    const { obj_moderation_level } = this.props.modelData;
+    const possibleObjModeration = getObjModerationLevel(this.getFetchedData('userData').owner_level, true);
+
+    if (possibleObjModeration.length > 1) {
+      return (
+        <div>
+          <Typography variant='caption'>Niveau de modération souhaité (en plus TODO </Typography>
+          <SelectField label={"Niveau de modération pour ce module"}
+            required={true}
+            value={obj_moderation_level}
+            fieldMapping={"obj_moderation_level"}
+            options={possibleObjModeration}
+            formManager={this}
+          />
+        </div>
+      )
+    } else {
+      return (
+        <Typography variant='caption'>Votre statut ne vous permet pas modifier le niveau local de modération pour ce module.</Typography>
+      )
+    }
+  },
+
+  renderImportanceLevelField() {
+    const { importance_level } = this.props.modelData;
+
+    //TODO change below use JSON
+    const options = [
+      { 'label': 'Normal', 'value': '-' },
+      { 'label': 'Important', 'value': '+' },
+      { 'label': 'Très important', 'value': '++' },
+    ]
+
+    return (
+      <div>
+        <Typography variant='caption'>Qualification de l'importance de l'information présentée</Typography>
+        <SelectField label={"Niveau d'importance"}
+          required={true}
+          value={importance_level}
+          fieldMapping={"importance_level"}
+          options={options}
+          formManager={this}
+        />
+      </div>
+    )
+  },
+
+  renderUsefulLinksField() {
+    const { useful_links } = this.props.modelData;
+    return (
+      <UsefulLinksField label={"Lien(s) utile(s) (ex : vers ces informations)"}
+        value={useful_links}
+        formManager={this}
+        fieldMapping={'useful_links'}
+      />
+    )
+  },
+
+  renderMarkdownField(props) {
+    return (
+      <MarkdownField
+        {...this.addValueToProps(props)}
+        formManager={this}
+      />
+    )
+  },
+
+  renderCommentField() {
+    const { comment } = this.props.modelData;
+    return this.renderMarkdownField({
+      label: "Commentaire associé à ces informations",
+      maxLength: 500,
+      value: comment,
+      formManager: this,
+      fieldMapping: 'comment',
+    })
+  },
+
+  addValueToProps(props) {
+    if (typeof props.value == 'undefined') {
+      return Object.assign(props, { value: this.props.modelData[props.fieldMapping] })
+    } else {
+      return props;
+    }
+  },
+  renderTextField(props) {
+    return (
+      <TextField
+        {...this.addValueToProps(props)}
+        formManager={this}
+      />
+    )
+  },
+
+  renderTitleField() {
+    const { title } = this.props.modelData;
+
+    return this.renderTextField({
+      label: 'Titre',
+      required: true,
+      value: title,
+      maxLength: 150,
+      fieldMapping: 'title',
+    })
+  },
+
+  renderUniversitiesField() {
+    const { modelData } = this.props;
+    const { outsideData } = this.props;
+    const universities = __map(outsideData.universities,
+      (univ) => { return { label: univ.name, value: univ.id, disabled: false } }
+    )
+
+    return (
+      <MultiSelectField label={"Universités concernées"}
+        required={true}
+        value={modelData.universities}
+        options={universities}
+        formManager={this}
+        fieldMapping={'universities'}
+      />
+    )
+  },
+
+  renderCountriesField() {
+    const { modelData } = this.props;
+    const { outsideData } = this.props;
+    const countries = __map(outsideData.countries,
+      (country) => { return { label: country.name, value: country.id, disabled: false } }
+    )
+
+    return (
+      <MultiSelectField label={"Pays concernés"}
+        required={true}
+        value={modelData.countries}
+        options={countries}
+        formManager={this}
+        fieldMapping={'countries'}
+      />
+    )
+  },
+
+  renderSelectField(props) {
+    return (
+      <SelectField
+        {...this.addValueToProps(props)}
+        formManager={this}
+      />
+    )
+  },
+
+  renderCurrencyField(props) {
+    const { outsideData } = this.props;
+    const currencies = __map(outsideData.currencies,
+      (c) => { return { label: c.code, value: c.code, disabled: false } }
+    )
+
+    return this.renderSelectField({
+      ...props,
+      options: currencies,
+    })
+  },
+
+  renderNumberField(props) {
+    return (
+      <NumberField
+        {...this.addValueToProps(props)}
+        formManager={this}
+      />
+    )
+  },
+
+}
\ No newline at end of file