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

Max Red - Modified fixtures, added recoverSettings and modified visual layout [skip ci]

This commit is contained in:
ivan 2017-01-04 17:57:20 -03:00
parent 37ae4b1bfe
commit f6a0ab29a0
4 changed files with 163 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,6 @@
import React from 'react'; import React from 'react';
import _ from 'lodash';
import languageList from 'data/language-list';
import Form from 'core-components/form'; import Form from 'core-components/form';
import FormField from 'core-components/form-field'; import FormField from 'core-components/form-field';
@ -6,6 +8,7 @@ import Header from 'core-components/header';
import SubmitButton from 'core-components/submit-button'; import SubmitButton from 'core-components/submit-button';
import Button from 'core-components/button'; import Button from 'core-components/button';
import API from 'lib-app/api-call';
import ToggleButton from 'app-components/toggle-button'; import ToggleButton from 'app-components/toggle-button';
import i18n from 'lib-app/i18n'; import i18n from 'lib-app/i18n';
@ -17,73 +20,92 @@ class AdminPanelSystemPreferences extends React.Component {
} }
}; };
componentDidMount() {
this.recoverSettings();
}
render() { render() {
return ( return (
<div className="admin-panel-system-preferences"> <div className="admin-panel-system-preferences">
<Header title={i18n('SYSTEM_PREFERENCES')} description="Here you can adjust your system preferences :)"/> <Header title={i18n('SYSTEM_PREFERENCES')} description="Here you can adjust your system preferences :)"/>
<Form values={this.state.values} onChange={values => this.setState({values})} onSubmit={this.onSubmit.bind(this)}> <Form values={this.state.values} onChange={values => this.setState({values})} onSubmit={this.onSubmit.bind(this)}>
<div className="admin-panel-system-preferences__maintenance"> <div className="row">
<span>Maintenance Mode</span> <div className="col-md-12">
<FormField className="admin-panel-system-preferences__maintenance-field" name="maintenance-mode" decorator={ToggleButton}/> <div className="admin-panel-system-preferences__maintenance">
<span>Maintenance Mode</span>
<FormField className="admin-panel-system-preferences__maintenance-field" name="maintenance-mode" decorator={ToggleButton}/>
</div>
</div>
</div>
<div className="row">
<div className="col-md-12">
<span className="separator" />
</div>
</div> </div>
<span className="separator" />
<div className="row"> <div className="row">
<div className="col-md-6"> <div className="col-md-6">
<FormField label={i18n('SUPPORT_CENTER_URL')} fieldProps={{size: 'large'}} name="url"/> <FormField label={i18n('SUPPORT_CENTER_URL')} fieldProps={{size: 'large'}} name="url"/>
<FormField label={i18n('SUPPORT_CENTER_LAYOUT')} fieldProps={{size: 'large', items: [{content: i18n('BOXED')}, {content: i18n('FULL_WIDTH')}]}} field="select" name="layout"/> <FormField label={i18n('SUPPORT_CENTER_LAYOUT')} fieldProps={{size: 'large', items: [{content: i18n('BOXED')}, {content: i18n('FULL_WIDTH')}]}} field="select" name="layout"/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<FormField label={i18n('SUPPORT_CENTER_TITLE')} fieldProps={{size: 'large'}} name="system-title"/> <FormField label={i18n('SUPPORT_CENTER_TITLE')} fieldProps={{size: 'large'}} name="title"/>
<FormField label={i18n('DEFAULT_TIMEZONE')} fieldProps={{size: 'large'}} name="time-zone"/> <FormField label={i18n('DEFAULT_TIMEZONE')} fieldProps={{size: 'large'}} name="time-zone"/>
</div> </div>
</div> </div>
<span className="separator" />
<div className="row"> <div className="row">
<div className="col-md-4"> <div className="col-md-12">
asd <span className="separator" />
</div>
<div className="col-md-8">
<div className="row"> <div className="row">
<div className="col-md-6"> <div className="col-md-6">
<FormField label={i18n('NOREPLY_EMAIL')} fieldProps={{size: 'auto'}} name="email"/> <FormField label={i18n('NOREPLY_EMAIL')} fieldProps={{size: 'large'}} name="no-reply-email"/>
<FormField label={i18n('SMTP_USER')} fieldProps={{size: 'auto'}} name="smtp_user"/> <FormField label={i18n('SMTP_USER')} fieldProps={{size: 'large'}} name="smtp-user"/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<div className="row"> <div className="row">
<div className="col-md-9"> <div className="col-md-9">
<FormField label={i18n('SMTP_SERVER')} fieldProps={{size: 'auto'}} name="smtp_server"/> <FormField label={i18n('SMTP_SERVER')} fieldProps={{size: 'large'}} name="smtp-host"/>
<FormField label={i18n('SMTP_PASSWORD')} fieldProps={{size: 'large', password: true}} name="smtp-pass"/>
</div> </div>
<div className="col-md-3"> <div className="col-md-3">
<FormField label={i18n('PORT')} fieldProps={{size: 'auto'}} name="port"/> <FormField label={i18n('PORT')} fieldProps={{size: 'auto'}} name="smtp-port"/>
</div> </div>
</div> </div>
<FormField label={i18n('SMTP_PASSWORD')} fieldProps={{size: 'auto'}} name="smtp_password"/>
</div> </div>
</div> </div>
</div>
</div>
<div className="row">
<div className="col-md-12">
<span className="separator" /> <span className="separator" />
<div className="row"> </div>
<div className="col-md-6"> <div className="col-md-6">
<FormField label={i18n('RECAPTCHA_PUBLIC_KEY')} fieldProps={{size: 'auto'}} name="public_key"/> <div className="row admin-panel-system-preferences__languages">
<div className="col-md-6 admin-panel-system-preferences__languages-allowed">
<div>{i18n('ALLOWED_LANGUAGES')}</div>
<FormField name="allowedLanguages" field="checkbox-group" fieldProps={{items: this.getLanguageList()}} />
</div> </div>
<div className="col-md-6"> <div className="col-md-6 admin-panel-system-preferences__languages-supported">
<FormField label={i18n('RECAPTCHA_PRIVATE_KEY')} fieldProps={{size: 'auto'}} name="private_key"/> <div>{i18n('SUPPORTED_LANGUAGES')}</div>
<FormField name="supportedLanguages" field="checkbox-group" fieldProps={{items: this.getLanguageList()}} />
</div> </div>
</div> </div>
</div>
<div className="col-md-6">
<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">
<span>{i18n('ALLOW_FILE_ATTACHMENTS')}</span>
<FormField className="admin-panel-system-preferences__file-attachments-field" name="file-attachments" decorator={ToggleButton}/>
</div>
<div className="admin-panel-system-preferences__max-size">
<span>{i18n('MAX_SIZE_KB')}</span>
<FormField className="admin-panel-system-preferences__max-size-field" fieldProps={{size: 'small'}} name="max-size"/>
</div>
</div>
</div>
<div className="row">
<div className="col-md-12">
<span className="separator" /> <span className="separator" />
<div className="row">
<div className="col-md-5 col-md-offset-1">
<div className="admin-panel-system-preferences__file-attachments">
<span>{i18n('ALLOW_FILE_ATTACHMENTS')}</span>
<FormField className="admin-panel-system-preferences__file-attachments-field" name="file-attachments" decorator={ToggleButton}/>
</div>
</div>
<div className="col-md-6">
<div className="admin-panel-system-preferences__max-size">
<span>{i18n('MAX_SIZE_KB')}</span>
<FormField className="admin-panel-system-preferences__max-size-field" fieldProps={{size: 'small'}} name="max-size"/>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div className="row"> <div className="row">
@ -102,6 +124,49 @@ asd
onSubmit() { onSubmit() {
alert('WESA'); alert('WESA');
} }
getLanguageList() {
return Object.keys(languageList).map(key => languageList[key].name);
}
recoverSettings() {
API.call({
path: '/system/get-settings',
data: {
allSettings: true
}
}).then(this.onRecoverSettingsSuccess.bind(this)).catch(this.onRecoverSettingsFail.bind(this));
}
onRecoverSettingsSuccess(result) {
let fullList = Object.keys(languageList);
this.setState({
values: {
'language': result.data.language,
'reCaptchaKey': result.data.reCaptchaKey,
'reCaptchaPrivate': result.data.reCaptchaPrivate,
'url': result.data['url'],
'title': result.data['title'],
'layout': result.data['layout'] == 'Full width' ? 1 : 0,
'time-zone': result.data['time-zone'],
'no-reply-email': result.data['no-reply-email'],
'smtp-host': result.data['smtp-host'],
'smtp-port': result.data['smtp-port'],
'smtp-user': result.data['smtp-user'],
'smtp-pass': '',
'maintenance-mode': result.data['maintenance-mode'],
'file-attachments': result.data['file-attachments'],
'max-size': result.data['max-size'],
'departments': result.data.departments,
'allowedLanguages': result.data.allowedLanguages.map(lang => (_.indexOf(fullList, lang))),
'supportedLanguages': result.data.supportedLanguages.map(lang => (_.indexOf(fullList, lang)))
}
});
}
onRecoverSettingsFail(result) {
}
} }
export default AdminPanelSystemPreferences; export default AdminPanelSystemPreferences;

16
client/src/app/admin/panel/settings/admin-panel-system-preferences.scss
View File

@ -29,4 +29,20 @@
display: inline-block; display: inline-block;
margin-left: 30px; margin-left: 30px;
} }
&__languages {
margin: 0 auto;
&-allowed {
text-align: left;
display: inline-block;
//background-color: red;
}
&-supported {
text-align: left;
display: inline-block;
//background-color: $light-grey;
}
}
} }

62
client/src/data/fixtures/system-fixtures.js
View File

@ -2,22 +2,52 @@ module.exports = [
{ {
path: '/system/get-settings', path: '/system/get-settings',
time: 1000, time: 1000,
response: function () { response: function (params) {
return { if(params && params.allSettings) {
status: 'success', return {
data: { status: 'success',
'language': 'en', data: {
'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS', 'language': 'en',
'maintenance-mode': false, 'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS',
'departments': [ 'reCaptchaPrivate': 'LALA',
{id: 1, name: 'Sales Support', owners: 2}, 'url': 'hola@lala.com',
{id: 2, name: 'Technical Issues', owners: 5}, 'title': 'Very Cool',
{id: 3, name: 'System and Administration', owners: 0} 'layout': 'Boxed',
], 'time-zone': 3,
'allowedLanguages': ['en', 'es', 'de', 'fr', 'pt', 'jp', 'ru', 'cn', 'in', 'tr'], 'no-reply-email': 'shitr@post.com',
'supportedLanguages': ['en', 'es', 'de'] 'smtp-host': 'localhost',
} 'smtp-port': '7070',
}; 'smtp-user': 'Wesa',
'maintenance-mode': false,
'fileAttachments': false,
'max-size': 500,
'departments': [
{id: 1, name: 'Sales Support', owners: 2},
{id: 2, name: 'Technical Issues', owners: 5},
{id: 3, name: 'System and Administration', owners: 0}
],
'allowedLanguages': ['en', 'es', 'de', 'fr', 'pt', 'jp', 'ru', 'cn', 'in', 'tr'],
'supportedLanguages': ['en', 'es', 'de']
}
};
} else {
return {
status: 'success',
data: {
'language': 'en',
'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS',
'maintenance-mode': false,
'departments': [
{id: 1, name: 'Sales Support', owners: 2},
{id: 2, name: 'Technical Issues', owners: 5},
{id: 3, name: 'System and Administration', owners: 0}
],
'allowedLanguages': ['en', 'es', 'de', 'fr', 'pt', 'jp', 'ru', 'cn', 'in', 'tr'],
'supportedLanguages': ['en', 'es', 'de']
}
};
}
} }
}, },
{ {

3
client/src/data/languages/en.js
View File

@ -132,7 +132,8 @@ export default {
'ALLOW_FILE_ATTACHMENTS': 'Allow file attachments', 'ALLOW_FILE_ATTACHMENTS': 'Allow file attachments',
'MAX_SIZE_KB': 'Max Size (KB)', 'MAX_SIZE_KB': 'Max Size (KB)',
'UPDATE_SYSTEM': 'Update system', 'UPDATE_SYSTEM': 'Update system',
'DISCARD_CHANGES': 'Discard changes', 'SUPPORTED_LANGUAGES': 'Supported Languages',
'ALLOWED_LANGUAGES': 'Allowed Languages',
'ON': 'On', 'ON': 'On',
'OFF': 'Off', 'OFF': 'Off',
'BOXED': 'Boxed', 'BOXED': 'Boxed',