Ka 2020 04 translate org fields

euth/dashboard/forms.py

@@ -81,7 +81,7 @@ def untranslated(self):
         """
         return [field for field in self if '__' not in field.html_name]
 
-    def prefiled_languages(self):
+    def prefilled_languages(self):
         """
         Return languages tabs that need to be displayed.
         """

euth/dashboard/static/language_switch/react_language_switch.jsx

@@ -1,7 +1,6 @@
 var PropTypes = require('prop-types')
 var React = require('react')
 var ReactDOM = require('react-dom')
-var $ = require('jquery')
 
 class LanguageSwitch extends React.Component {
   constructor (props) {
@@ -11,33 +10,32 @@ class LanguageSwitch extends React.Component {
     }
   }
 
-  switchLanguage (e) {
+  addLanguage (e) {
     var languageCode = e.target.textContent
     var index = this.state.activeLanguages.indexOf(languageCode)
     var newActiveLanguages = this.state.activeLanguages.concat([])
     if (index === -1) {
       // adding language
       newActiveLanguages.push(languageCode)
-    } else {
-      newActiveLanguages.splice(index, 1)
     }
 
     this.setState({
       activeLanguages: newActiveLanguages
-    }, function () {
-      var $checkbox = $('#' + languageCode + '_language-switch')
-      // language was active
-      if (!$checkbox.is(':checked')) {
-        $(this.refs.checkboxList).find(':checked').first().next('a').tab('show')
-      } else {
-        $checkbox.next('a').tab('show')
-      }
     })
   }
 
-  componentDidMount () {
-    $(this.refs.toggleButton).dropdown()
-    $(this.refs.checkboxList).find('.a').tab()
+  removeLanguage (e) {
+    var languageCode = e.target.textContent
+    var index = this.state.activeLanguages.indexOf(languageCode)
+    var newActiveLanguages = this.state.activeLanguages.concat([])
+    if (index !== -1) {
+      // removing language
+      newActiveLanguages.splice(index, 1)
+    }
+
+    this.setState({
+      activeLanguages: newActiveLanguages
+    })
   }
 
   render () {
@@ -68,10 +66,29 @@ class LanguageSwitch extends React.Component {
           </button>
           <ul className="dropdown-menu">
             {
-              this.props.languages.map(languageCode => {
+              this.props.languages.map((languageCode, i) => {
+                return (
+                  <span key={languageCode}>
+                    {this.state.activeLanguages.indexOf(languageCode) === -1 &&
+                      <li key={languageCode}>
+                        <button type="button" onClick={this.addLanguage.bind(this)}>{languageCode}</button>
+                      </li>}
+                  </span>
+                )
+              })
+            }
+          </ul>
+        </div>
+        <div className="dropdown">
+          <button className="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" ref="toggleButton">
+            <i className="fa fa-minus" />
+          </button>
+          <ul className="dropdown-menu">
+            {
+              this.state.activeLanguages.map(languageCode => {
                 return (
                   <li key={languageCode}>
-                    <button type="button" onClick={this.switchLanguage.bind(this)}>{languageCode}</button>
+                    <button type="button" onClick={this.removeLanguage.bind(this)}>{languageCode}</button>
                   </li>
                 )
               })

euth/organisations/templates/euth_organisations/organisation_form.html

@@ -29,7 +29,7 @@ <h1 class="dashboard-content-heading">{% trans "Edit your organisation details"
              id="language-switch-list"
              data-euth-widget="language-switch"
              data-languages="{{ form.languages|join:' ' }}"
-             data-active-languages="{{ form.prefiled_languages|join:' ' }}"
+             data-active-languages="{{ form.prefilled_languages|join:' ' }}"
         ></div>
 
         {% for lang_code, fields in form.translated %}

tests/dashboard/test_dashboard_views.py

@@ -244,7 +244,7 @@ def test_dashboard_update_organisation(client, organisation):
 
     response = client.get(url)
     form = response.context_data['form']
-    assert form.prefiled_languages() == ['en']
+    assert form.prefilled_languages() == ['en']
     assert len(form.untranslated()) == 9
     assert len(form.translated()) == 10
     assert form.translated()[0][0] == 'en'