// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import $ from 'jquery';
import SettingItemMin from '../setting_item_min.jsx';
import SettingItemMax from '../setting_item_max.jsx';
import ManageLanguages from './manage_languages.jsx';
import ThemeSetting from './user_settings_theme.jsx';
import * as AsyncClient from 'utils/async_client.jsx';
import PreferenceStore from 'stores/preference_store.jsx';
import UserStore from 'stores/user_store.jsx';
import * as Utils from 'utils/utils.jsx';
import * as I18n from 'i18n/i18n.jsx';
import Constants from 'utils/constants.jsx';
const Preferences = Constants.Preferences;
import {FormattedMessage} from 'react-intl';
function getDisplayStateFromStores() {
return {
militaryTime: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', 'false'),
nameFormat: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'username'),
selectedFont: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', Constants.DEFAULT_FONT),
channelDisplayMode: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT),
messageDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT),
collapseDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, Preferences.COLLAPSE_DISPLAY_DEFAULT)
};
}
import React from 'react';
export default class UserSettingsDisplay extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleClockRadio = this.handleClockRadio.bind(this);
this.handleNameRadio = this.handleNameRadio.bind(this);
this.handleFont = this.handleFont.bind(this);
this.updateSection = this.updateSection.bind(this);
this.updateState = this.updateState.bind(this);
this.createCollapseSection = this.createCollapseSection.bind(this);
this.state = getDisplayStateFromStores();
}
componentWillUnmount() {
Utils.applyFont(PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', Constants.DEFAULT_FONT));
}
handleSubmit() {
const userId = UserStore.getCurrentId();
const timePreference = {
user_id: userId,
category: Preferences.CATEGORY_DISPLAY_SETTINGS,
name: 'use_military_time',
value: this.state.militaryTime
};
const namePreference = {
user_id: userId,
category: Preferences.CATEGORY_DISPLAY_SETTINGS,
name: 'name_format',
value: this.state.nameFormat
};
const fontPreference = {
user_id: userId,
category: Preferences.CATEGORY_DISPLAY_SETTINGS,
name: 'selected_font',
value: this.state.selectedFont
};
const channelDisplayModePreference = {
user_id: userId,
category: Preferences.CATEGORY_DISPLAY_SETTINGS,
name: Preferences.CHANNEL_DISPLAY_MODE,
value: this.state.channelDisplayMode
};
const messageDisplayPreference = {
user_id: userId,
category: Preferences.CATEGORY_DISPLAY_SETTINGS,
name: Preferences.MESSAGE_DISPLAY,
value: this.state.messageDisplay
};
const collapseDisplayPreference = {
user_id: userId,
category: Preferences.CATEGORY_DISPLAY_SETTINGS,
name: Preferences.COLLAPSE_DISPLAY,
value: this.state.collapseDisplay
};
AsyncClient.savePreferences([timePreference, namePreference, fontPreference, channelDisplayModePreference, messageDisplayPreference, collapseDisplayPreference],
() => {
this.updateSection('');
},
(err) => {
this.setState({serverError: err.message});
}
);
}
handleClockRadio(militaryTime) {
this.setState({militaryTime});
}
handleNameRadio(nameFormat) {
this.setState({nameFormat});
}
handleChannelDisplayModeRadio(channelDisplayMode) {
this.setState({channelDisplayMode});
}
handlemessageDisplayRadio(messageDisplay) {
this.setState({messageDisplay});
}
handleFont(selectedFont) {
Utils.applyFont(selectedFont);
this.setState({selectedFont});
}
handleCollapseRadio(collapseDisplay) {
this.setState({collapseDisplay});
}
updateSection(section) {
if ($('.section-max').length) {
$('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
}
this.updateState();
this.props.updateSection(section);
}
updateState() {
const newState = getDisplayStateFromStores();
if (!Utils.areObjectsEqual(newState, this.state)) {
this.handleFont(newState.selectedFont);
this.setState(newState);
}
}
createCollapseSection() {
if (this.props.activeSection === 'collapse') {
const collapseFormat = [false, false];
if (this.state.collapseDisplay === 'false') {
collapseFormat[0] = true;
} else {
collapseFormat[1] = true;
}
const handleUpdateCollapseSection = (e) => {
this.updateSection('');
e.preventDefault();
};
const inputs = [
];
return (
}
inputs={inputs}
submit={this.handleSubmit}
server_error={this.state.serverError}
updateSection={handleUpdateCollapseSection}
/>
);
}
let describe;
if (this.state.collapseDisplay === 'false') {
describe = (
);
} else {
describe = (
);
}
const handleUpdateCollapseSection = () => {
this.props.updateSection('collapse');
};
return (
}
describe={describe}
updateSection={handleUpdateCollapseSection}
/>
);
}
render() {
const serverError = this.state.serverError || null;
let clockSection;
let nameFormatSection;
let channelDisplayModeSection;
let fontSection;
let languagesSection;
let messageDisplaySection;
const collapseSection = this.createCollapseSection();
if (this.props.activeSection === 'clock') {
const clockFormat = [false, false];
if (this.state.militaryTime === 'true') {
clockFormat[1] = true;
} else {
clockFormat[0] = true;
}
const handleUpdateClockSection = (e) => {
this.updateSection('');
e.preventDefault();
};
const inputs = [
];
clockSection = (
}
inputs={inputs}
submit={this.handleSubmit}
server_error={serverError}
updateSection={handleUpdateClockSection}
/>
);
} else {
let describe;
if (this.state.militaryTime === 'true') {
describe = (
);
} else {
describe = (
);
}
const handleUpdateClockSection = () => {
this.props.updateSection('clock');
};
clockSection = (
}
describe={describe}
updateSection={handleUpdateClockSection}
/>
);
}
const showUsername = (
);
const showNickname = (
);
const showFullName = (
);
if (this.props.activeSection === 'name_format') {
const nameFormat = [false, false, false];
if (this.state.nameFormat === 'nickname_full_name') {
nameFormat[0] = true;
} else if (this.state.nameFormat === 'full_name') {
nameFormat[2] = true;
} else {
nameFormat[1] = true;
}
const inputs = [
];
nameFormatSection = (
}
inputs={inputs}
submit={this.handleSubmit}
server_error={serverError}
updateSection={(e) => {
this.updateSection('');
e.preventDefault();
}}
/>
);
} else {
let describe;
if (this.state.nameFormat === 'username') {
describe = (
);
} else if (this.state.nameFormat === 'full_name') {
describe = (
);
} else {
describe = (
);
}
nameFormatSection = (
}
describe={describe}
updateSection={() => {
this.props.updateSection('name_format');
}}
/>
);
}
if (this.props.activeSection === Preferences.MESSAGE_DISPLAY) {
const messageDisplay = [false, false];
if (this.state.messageDisplay === Preferences.MESSAGE_DISPLAY_CLEAN) {
messageDisplay[0] = true;
} else {
messageDisplay[1] = true;
}
const inputs = [
];
messageDisplaySection = (
}
inputs={inputs}
submit={this.handleSubmit}
server_error={serverError}
updateSection={(e) => {
this.updateSection('');
e.preventDefault();
}}
/>
);
} else {
let describe;
if (this.state.messageDisplay === Preferences.MESSAGE_DISPLAY_CLEAN) {
describe = (
);
} else {
describe = (
);
}
messageDisplaySection = (
}
describe={describe}
updateSection={() => {
this.props.updateSection(Preferences.MESSAGE_DISPLAY);
}}
/>
);
}
if (this.props.activeSection === Preferences.CHANNEL_DISPLAY_MODE) {
const channelDisplayMode = [false, false];
if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN) {
channelDisplayMode[0] = true;
} else {
channelDisplayMode[1] = true;
}
const inputs = [
];
channelDisplayModeSection = (
}
inputs={inputs}
submit={this.handleSubmit}
server_error={serverError}
updateSection={(e) => {
this.updateSection('');
e.preventDefault();
}}
/>
);
} else {
let describe;
if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN) {
describe = (
);
} else {
describe = (
);
}
channelDisplayModeSection = (
}
describe={describe}
updateSection={() => {
this.props.updateSection(Preferences.CHANNEL_DISPLAY_MODE);
}}
/>
);
}
if (this.props.activeSection === 'font') {
const options = [];
Object.keys(Constants.FONTS).forEach((fontName, idx) => {
const className = Constants.FONTS[fontName];
options.push(
);
});
const inputs = [
];
fontSection = (
}
inputs={inputs}
submit={this.handleSubmit}
server_error={serverError}
updateSection={(e) => {
this.updateSection('');
e.preventDefault();
}}
/>
);
} else {
fontSection = (
}
describe={this.state.selectedFont}
updateSection={() => {
this.props.updateSection('font');
}}
/>
);
}
const userLocale = this.props.user.locale;
if (this.props.activeSection === 'languages') {
if (!I18n.isLanguageAvailable(userLocale)) {
this.props.user.locale = global.window.mm_config.DefaultClientLocale;
}
languagesSection = (
{
this.updateSection('');
e.preventDefault();
}}
/>
);
} else {
let locale;
if (I18n.isLanguageAvailable(userLocale)) {
locale = I18n.getLanguageInfo(userLocale).name;
} else {
locale = I18n.getLanguageInfo(global.window.mm_config.DefaultClientLocale).name;
}
languagesSection = (
}
width='medium'
describe={locale}
updateSection={() => {
this.updateSection('languages');
}}
/>
);
}
return (
{fontSection}
{clockSection}
{nameFormatSection}
{collapseSection}
{messageDisplaySection}
{channelDisplayModeSection}
{languagesSection}
);
}
}
UserSettingsDisplay.propTypes = {
user: React.PropTypes.object,
updateSection: React.PropTypes.func,
updateTab: React.PropTypes.func,
activeSection: React.PropTypes.string,
closeModal: React.PropTypes.func.isRequired,
collapseModal: React.PropTypes.func.isRequired,
setRequireConfirm: React.PropTypes.func.isRequired,
setEnforceFocus: React.PropTypes.func.isRequired
};