Ks 2020 09 multi language organisation form

adhocracy-plus/assets/js/app.js

@@ -23,6 +23,7 @@ import * as ReactDocuments from '../../../apps/documents/assets/react_documents.
 import * as ReactPolls from '../../../apps/polls/assets/react_polls.jsx'
 import * as ReactQuestions from '../../../apps/questions/assets/react_questions.jsx'
 import * as ReactQuestionsPresent from '../../../apps/questions/assets/react_questions_present.jsx'
+import * as ReactLanguageChoice from '../../../apps/organisations/assets/react_language_choice.jsx'
 
 function init () {
   ReactWidget.initialise('a4', 'comment', ReactComments.renderComment)
@@ -38,6 +39,8 @@ function init () {
   ReactWidget.initialise('speakup', 'questions', ReactQuestions.renderQuestions)
   ReactWidget.initialise('speakup', 'present', ReactQuestionsPresent.renderData)
 
+  ReactWidget.initialise('euth', 'language-choice', ReactLanguageChoice.renderLanguageChoice)
+
   $('.timeline-carousel__item').slick({
     initialSlide: parseInt($('#timeline-carousel').attr('data-initial-slide')),
     focusOnSelect: false,

adhocracy-plus/assets/scss/components/_language_choice.scss

@@ -0,0 +1,51 @@
+.language-choice-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.language-choice-list label {
+    display: block;
+}
+
+.checkbox-list {
+    padding-left: 0;
+    margin-left: 0;
+    list-style: none;
+
+    input {
+        display: none;
+    }
+
+    li {
+        display: inline-block;
+    }
+
+    a {
+        color: $black;
+        margin-right: 2px;
+    }
+
+    .active a {
+        background-color: $bg-secondary;
+    }
+}
+
+.language-choice-list .dropdown {
+    float: left;
+}
+
+.language-choice {
+    display: none;
+}
+
+:checked + .language-choice {
+    display: block;
+}
+
+.language-choice-panel {
+    display: none;
+
+    &.active {
+        display: block;
+    }
+}

adhocracy-plus/assets/scss/style.scss

@@ -50,6 +50,7 @@
 @import 'components/infographic';
 @import 'components/item_detail';
 @import 'components/label';
+@import 'components/language_choice';
 @import 'components/list_item_tiny';
 @import 'components/list_item';
 @import 'components/lr_bar';

adhocracy-plus/config/settings/base.py

@@ -38,6 +38,7 @@
     'ckeditor_uploader',
     'capture_tag',
     'background_task',
+    'parler',
 
     # Wagtail cms components
     'wagtail.contrib.forms',
@@ -194,6 +195,11 @@
     ('nl', _('Dutch'))
 ]
 
+PARLER_LANGUAGES = {
+    1: [{'code': language_code} for language_code, language in LANGUAGES],
+    'default': {'fallbacks': ['en', 'de'],
+                }
+}
 
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/1.8/howto/static-files/

adhocracy-plus/fixtures/orga-dev.json

@@ -5,9 +5,26 @@
     "fields": {
       "name": "liqd-orga",
       "slug": "liqd-orga",
-      "description": "description liqd-orga",
       "imprint": "imprint liqd-orga",
       "initiators": ["1","3"]
     }
+  },
+  {
+  "model": "a4_candy_organisations.organisationtranslation",
+  "pk": 1,
+  "fields": {
+    "language_code": "de",
+    "description": "Beschreibung liqd-orga",
+    "master": 1
+    }
+  },
+  {
+    "model": "a4_candy_organisations.organisationtranslation",
+    "pk": 2,
+    "fields": {
+      "language_code": "en",
+      "description": "description liqd-orga",
+      "master": 1
+    }
   }
 ]

apps/organisations/admin.py

@@ -1,4 +1,5 @@
 from django.contrib import admin
+from parler.admin import TranslatableAdmin
 
 from . import models
 
@@ -13,7 +14,7 @@ class MemberInline(admin.TabularInline):
 
 
 @admin.register(models.Organisation)
-class OrganisationAdmin(admin.ModelAdmin):
+class OrganisationAdmin(TranslatableAdmin):
     search_fields = ('name', 'slug')
     list_display = (
         'id', 'name', 'slug', 'site'

apps/organisations/assets/react_language_choice.jsx

@@ -0,0 +1,156 @@
+var PropTypes = require('prop-types')
+var React = require('react')
+var ReactDOM = require('react-dom')
+
+class LanguageChoice extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      activeLanguages: this.props.activeLanguages,
+      activeTab: this.getInitialActiveTab()
+    }
+  }
+
+  getInitialActiveTab () {
+    if (this.props.activeLanguages.length > 0) {
+      return this.props.activeLanguages[0]
+    } else {
+      return 'de'
+    }
+  }
+
+  getNewActiveTab (removedLanguage) {
+    var index = this.state.activeLanguages.indexOf(removedLanguage)
+    var newActiveLanguages = this.state.activeLanguages.concat([])
+    if (index !== -1) {
+      newActiveLanguages.splice(index, 1)
+    }
+    if (newActiveLanguages.length > 0) {
+      return newActiveLanguages[0]
+    } else {
+      return ''
+    }
+  }
+
+  activateTab (e) {
+    var languageCode = e.target.textContent
+    this.setState({ activeTab: languageCode })
+  }
+
+  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)
+    }
+    this.setState({
+      activeLanguages: newActiveLanguages,
+      activeTab: languageCode
+    })
+  }
+
+  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
+    })
+    if (this.state.activeTab === languageCode) {
+      this.setState({
+        activeTab: this.getNewActiveTab(languageCode)
+      })
+    }
+  }
+
+  render () {
+    return (
+      <div className="language-choice-container">
+        <ul className="checkbox-list" ref="checkboxList">
+          {
+            this.props.languages.map((languageCode, i) => {
+              return (
+                <li key={languageCode} className={languageCode === this.state.activeTab ? 'active' : ''}>
+                  <input
+                    type="checkbox" name={languageCode} id={languageCode + '_language-choice'} value={languageCode}
+                    checked={this.state.activeLanguages.indexOf(languageCode) !== -1} readOnly
+                  />
+                  <a
+                    href={'#' + languageCode + '_language_panel'} className={'btn btn--light btn--small language-choice ' + (languageCode === this.state.activeTab ? 'active' : '')}
+                    data-toggle="tab" onClick={this.activateTab.bind(this)}
+                  >{languageCode}
+                  </a>
+                </li>
+              )
+            })
+          }
+        </ul>
+
+        <div className="dropdown ml-5">
+          <button className="dropdown-toggle btn btn--light btn--small" type="button" data-toggle="dropdown" ref="toggleButton">
+            <i className="fa fa-plus" />
+          </button>
+          <ul className="dropdown-menu">
+            {
+              this.props.languages.map((languageCode, i) => {
+                return (
+                  <span key={languageCode}>
+                    {this.state.activeLanguages.indexOf(languageCode) === -1 &&
+                      <li className="dropdown-item" key={languageCode}>
+                        <a
+                          href={'#' + languageCode + '_language_panel'} className={'dropdown-item ' + (languageCode === this.state.activeTab ? 'active' : '')}
+                          data-toggle="tab" onClick={this.addLanguage.bind(this)}
+                        >{languageCode}
+                        </a>
+                      </li>}
+                  </span>
+                )
+              })
+            }
+          </ul>
+        </div>
+
+        {this.state.activeLanguages.length > 1 &&
+          <div className="dropdown">
+            <button className="dropdown-toggle btn btn--light btn--small" type="button" data-toggle="dropdown" ref="toggleButton">
+              <i className="fa fa-minus" />
+            </button>
+            <ul className="dropdown-menu">
+              {
+                this.state.activeLanguages.map(languageCode => {
+                  return (
+                    <li className="dropdown-item" key={languageCode}>
+                      <a
+                        href={'#' + this.getNewActiveTab(languageCode) + '_language_panel'} className={'dropdown-item ' + (languageCode === this.getNewActiveTab(languageCode) ? 'active' : '')}
+                        data-toggle="tab" onClick={this.removeLanguage.bind(this)}
+                      >{languageCode}
+                      </a>
+                    </li>
+                  )
+                })
+              }
+            </ul>
+          </div>}
+      </div>
+    )
+  }
+}
+
+LanguageChoice.propTypes = {
+  activeLanguages: PropTypes.arrayOf(PropTypes.string)
+}
+
+module.exports.renderLanguageChoice = function (el) {
+  const languages = el.getAttribute('data-languages').split(' ')
+  const activeLanguages = el.getAttribute('data-active-languages').split(' ')
+  ReactDOM.render(
+    <LanguageChoice languages={languages} activeLanguages={activeLanguages} />,
+    el
+  )
+}