tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Language selection for system preferences [skip ci]

This commit is contained in:
Ivan Diaz 2017-01-05 17:15:20 -03:00
parent 9098a36df2
commit e78808eb6c
3 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/app-components/language-selector.js
View File

@ -3,6 +3,7 @@ import {connect} from 'react-redux';
import classNames from 'classnames';
import languageList from 'data/language-list';
import i18n from 'lib-app/i18n';
import DropDown from 'core-components/drop-down';
const languageCodes = Object.keys(languageList);
@ -10,13 +11,15 @@ const languageCodes = Object.keys(languageList);
class LanguageSelector extends React.Component {
static propTypes = {
value: React.PropTypes.oneOf(languageCodes),
type: React.PropTypes.oneOf(['allowed', 'supported']),
type: React.PropTypes.oneOf(['allowed', 'supported', 'custom']),
customList: React.PropTypes.array,
allowedLanguages: React.PropTypes.array,
supportedLanguages: React.PropTypes.array
};
static defaultProps = {
type: 'allowed',
customList: ['en'],
allowedLanguages: languageCodes,
supportedLanguages: languageCodes
};
@ -75,7 +78,14 @@ class LanguageSelector extends React.Component {
}
getLanguageList() {
return (this.props.type === 'supported') ? this.props.supportedLanguages : this.props.allowedLanguages;
switch(this.props.type) {
case 'supported':
return this.props.supportedLanguages;
case 'allowed':
return this.props.supportedLanguages;
case 'custom':
return this.props.customList;
}
}
}

32
client/src/app/admin/panel/settings/admin-panel-system-preferences.js
View File

@ -15,13 +15,15 @@ import Button from 'core-components/button';
import Message from 'core-components/message';
import InfoTooltip from 'core-components/info-tooltip';
const languageKeys = Object.keys(languageList);
class AdminPanelSystemPreferences extends React.Component {
state = {
loading: true,
message: null,
values: {
'maintenance': false
maintenance: false
}
};
@ -33,7 +35,7 @@ class AdminPanelSystemPreferences extends React.Component {
return (
<div className="admin-panel-system-preferences">
<Header title={i18n('SYSTEM_PREFERENCES')} description={i18n('SYSTEM_PREFERENCES_DESCRIPTION')}/>
<Form values={this.state.values} onChange={values => this.setState({values, message: null})} onSubmit={this.onSubmit.bind(this)} loading={this.state.loading}>
<Form values={this.state.values} onChange={this.onFormChange.bind(this)} onSubmit={this.onSubmit.bind(this)} loading={this.state.loading}>
<div className="row">
<div className="col-md-12">
<div className="admin-panel-system-preferences__maintenance">
@ -96,7 +98,10 @@ class AdminPanelSystemPreferences extends React.Component {
</div>
</div>
<div className="col-md-6">
<FormField className="admin-panel-system-preferences__default-language-field" name="language" label={i18n('DEFAULT_LANGUAGE')} decorator={LanguageSelector} />
<FormField className="admin-panel-system-preferences__default-language-field" name="language" label={i18n('DEFAULT_LANGUAGE')} decorator={LanguageSelector} fieldProps={{
type: 'custom',
customList: (this.state.values.supportedLanguages && this.state.values.supportedLanguages.length) ? this.state.values.supportedLanguages.map(index => languageKeys[index]) : undefined
}} />
<FormField label={i18n('RECAPTCHA_PUBLIC_KEY')} fieldProps={{size: 'large'}} name="reCaptchaKey"/>
<FormField label={i18n('RECAPTCHA_PRIVATE_KEY')} fieldProps={{size: 'large'}} name="reCaptchaPrivate"/>
<div className="admin-panel-system-preferences__file-attachments">
@ -139,8 +144,17 @@ class AdminPanelSystemPreferences extends React.Component {
}
}
onFormChange(form) {
let values = _.clone(form);
_.extend(values, {
supportedLanguages: _.filter(values.supportedLanguages, (language) => _.includes(values.allowedLanguages, language))
});
this.setState({values, message: null});
}
onSubmit(form) {
let fullList = Object.keys(languageList);
this.setState({loading: true});
API.call({
@ -161,8 +175,8 @@ class AdminPanelSystemPreferences extends React.Component {
'maintenance-mode': form['maintenance-mode'],
'allow-attachments': form['allow-attachments'],
'max-size': form['max-size'],
'allowedLanguages': JSON.stringify(form.allowedLanguages.map(index => fullList[index])),
'supportedLanguages': JSON.stringify(form.supportedLanguages.map(index => fullList[index]))
'allowedLanguages': JSON.stringify(form.allowedLanguages.map(index => languageKeys[index])),
'supportedLanguages': JSON.stringify(form.supportedLanguages.map(index => languageKeys[index]))
}
}).then(this.onSubmitSuccess.bind(this)).catch(() => this.setState({loading: false, message: 'fail'}));
}
@ -189,8 +203,6 @@ class AdminPanelSystemPreferences extends React.Component {
}
onRecoverSettingsSuccess(result) {
let fullList = Object.keys(languageList);
this.setState({
loading: false,
values: {
@ -209,8 +221,8 @@ class AdminPanelSystemPreferences extends React.Component {
'maintenance-mode': result.data['maintenance-mode'],
'allow-attachments': result.data['allow-attachments'],
'max-size': result.data['max-size'],
'allowedLanguages': result.data.allowedLanguages.map(lang => (_.indexOf(fullList, lang))),
'supportedLanguages': result.data.supportedLanguages.map(lang => (_.indexOf(fullList, lang)))
'allowedLanguages': result.data.allowedLanguages.map(lang => (_.indexOf(languageKeys, lang))),
'supportedLanguages': result.data.supportedLanguages.map(lang => (_.indexOf(languageKeys, lang)))
}
});
}

2
client/src/core-components/form-field.js
View File

@ -22,7 +22,7 @@ class FormField extends React.Component {
onBlur: React.PropTypes.func,
required: React.PropTypes.bool,
error: React.PropTypes.string,
infoMessage: React.PropTypes.string,
infoMessage: React.PropTypes.node,
value: React.PropTypes.any,
field: React.PropTypes.oneOf(['input', 'textarea', 'select', 'checkbox', 'checkbox-group']),
fieldProps: React.PropTypes.object