Ivan - Add language selector using FormField [skip ci]

client/src/app-components/language-selector.js

@@ -16,7 +16,7 @@ const languageCodes = Object.values(codeLanguages).concat(['en']);
 
 class LanguageSelector extends React.Component {
     static propTypes = {
-        language: React.PropTypes.oneOf(languageCodes)
+        value: React.PropTypes.oneOf(languageCodes)
     };
 
     render() {
@@ -30,7 +30,8 @@ class LanguageSelector extends React.Component {
             className: this.getClass(),
             items: this.getLanguageList(),
             selectedIndex: this.getSelectedIndex(),
-            onChange: this.changeLanguage.bind(this)
+            onChange: this.changeLanguage.bind(this),
+            size: this.props.size
         };
     }
 
@@ -60,7 +61,7 @@ class LanguageSelector extends React.Component {
     }
 
     getPropLanguage() {
-        let language = this.props.language;
+        let language = this.props.value;
 
         if (language === 'en') {
             language = 'us';
@@ -77,7 +78,11 @@ class LanguageSelector extends React.Component {
         }
 
         if (this.props.onChange) {
-            this.props.onChange(language);
+            this.props.onChange({
+                target: {
+                    value: language
+                }
+            });
         }
     }
 }

client/src/app/admin/panel/tickets/admin-panel-custom-responses.js

@@ -8,6 +8,7 @@ import API from 'lib-app/api-call';
 import AdminDataActions from 'actions/admin-data-actions';
 
 import AreYouSure from 'app-components/are-you-sure';
+import LanguageSelector from 'app-components/language-selector';
 
 import Icon from 'core-components/icon';
 import Button from 'core-components/button';
@@ -28,7 +29,11 @@ class AdminPanelCustomResponses extends React.Component {
         selectedIndex: -1,
         edited: false,
         errors: {},
-        form: {}
+        form: {
+            title: '',
+            content: RichTextEditor.createEmptyValue(),
+            language: 'en'
+        }
     };
     
     componentDidMount() {
@@ -54,7 +59,14 @@ class AdminPanelCustomResponses extends React.Component {
                 </div>
                 <div className="col-md-9">
                     <Form {...this.getFormProps()}>
-                        <FormField label={i18n('TITLE')} name="title" validation="TITLE" required fieldProps={{size: 'large'}}/>
+                        <div className="row">
+                            <div className="col-md-7">
+                                <FormField label={i18n('TITLE')} name="title" validation="TITLE" required fieldProps={{size: 'large'}}/>
+                            </div>
+                            <div className="col-md-5">
+                                <FormField label={i18n('LANGUAGE')} name="language" field="input" decorator={LanguageSelector} fieldProps={{size: 'medium'}} />
+                            </div>
+                        </div>
                         <FormField label={i18n('CONTENT')} name="content" validation="TEXT_AREA" required field="textarea" />
                         <div className="admin-panel-custom-responses__actions">
                             <div className="admin-panel-custom-responses__save-button">
@@ -154,7 +166,6 @@ class AdminPanelCustomResponses extends React.Component {
             API.call({
                 path: '/ticket/add-custom-response',
                 data: {
-                    id: this.state.selectedIndex,
                     name: form.title,
                     content: form.content,
                     language: form.language
@@ -188,6 +199,7 @@ class AdminPanelCustomResponses extends React.Component {
 
         form.title = (this.props.items[index] && this.props.items[index].name) || '';
         form.content = RichTextEditor.createValueFromString((this.props.items[index] && this.props.items[index].content) || '', 'html');
+        form.language = (this.props.items[index] && this.props.items[index].language) || 'en';
 
         this.setState({
             selectedIndex: index,

client/src/app/main/main-layout-header.js

@@ -43,13 +43,13 @@ class MainLayoutHeader extends React.Component {
     getLanguageSelectorProps() {
         return {
             className: 'main-layout-header__languages',
-            language: this.props.config.language,
+            value: this.props.config.language,
             onChange: this.changeLanguage.bind(this)
         };
     }
 
-    changeLanguage(language) {
-        this.props.dispatch(ConfigActions.changeLanguage(language));
+    changeLanguage(event) {
+        this.props.dispatch(ConfigActions.changeLanguage(event.target.value));
     }
 }
 

client/src/core-components/form-field.js

@@ -14,6 +14,7 @@ class FormField extends React.Component {
     };
 
     static propTypes = {
+        decorator: React.PropTypes.func,
         validation: React.PropTypes.string,
         onChange: React.PropTypes.func,
         onBlur: React.PropTypes.func,
@@ -62,13 +63,17 @@ class FormField extends React.Component {
     }
 
     renderField() {
-        const Field = {
+        let Field = {
             'input': Input,
             'textarea': TextEditor,
             'select': DropDown,
             'checkbox': Checkbox
         }[this.props.field];
 
+        if(this.props.decorator) {
+            Field = this.props.decorator;
+        }
+
         return <Field {...this.getFieldProps()} />;
     }
 

client/src/data/languages/en.js

@@ -59,6 +59,7 @@ export default {
     'SAVE': 'Save',
     'DISCARD_CHANGES': 'Discard changes',
     'DELETE': 'Delete',
+    'LANGUAGE': 'Language',
 
     //VIEW DESCRIPTIONS
     'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',

client/src/lib-app/validations/alphanumeric-validator.js

@@ -8,7 +8,7 @@ class AlphaNumericValidator extends Validator {
     }
 
     validate(value, form) {
-        let alphaMatch = /^[ A-Za-z0-9_@./#&+-]*$/;
+        let alphaMatch = /^[ A-Za-z0-9_@./#&+-äöüÄÖÜß]*$/;
 
         if (!alphaMatch.test(value)) return this.getError(this.errorKey);
     }