// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import {savePreferences} from '../../utils/client.jsx'; import SettingItemMin from '../setting_item_min.jsx'; import SettingItemMax from '../setting_item_max.jsx'; import Constants from '../../utils/constants.jsx'; import PreferenceStore from '../../stores/preference_store.jsx'; function getDisplayStateFromStores() { const militaryTime = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', {value: 'false'}); const nameFormat = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'username'}); return { militaryTime: militaryTime.value, nameFormat: nameFormat.value }; } 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.updateSection = this.updateSection.bind(this); this.handleClose = this.handleClose.bind(this); this.state = getDisplayStateFromStores(); } handleSubmit() { const timePreference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', this.state.militaryTime); const namePreference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', this.state.nameFormat); savePreferences([timePreference, namePreference], () => { PreferenceStore.emitChange(); this.updateSection(''); }, (err) => { this.setState({serverError: err.message}); } ); } handleClockRadio(militaryTime) { this.setState({militaryTime}); } handleNameRadio(nameFormat) { this.setState({nameFormat}); } updateSection(section) { this.setState(getDisplayStateFromStores()); this.props.updateSection(section); } handleClose() { this.updateSection(''); } componentDidMount() { $('#user_settings').on('hidden.bs.modal', this.handleClose); } componentWillUnmount() { $('#user_settings').off('hidden.bs.modal', this.handleClose); } render() { const serverError = this.state.serverError || null; let clockSection; let nameFormatSection; 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 = [



{'Select how you prefer time displayed.'}
]; clockSection = ( ); } else { let describe = ''; if (this.state.militaryTime === 'true') { describe = '24-hour clock (example: 16:00)'; } else { describe = '12-hour clock (example: 4:00 PM)'; } const handleUpdateClockSection = () => { this.props.updateSection('clock'); }; clockSection = ( ); } 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 = [




{'How should other users be shown in Direct Messages list?'}
]; nameFormatSection = ( { this.updateSection(''); e.preventDefault(); }} /> ); } else { let describe = ''; if (this.state.nameFormat === 'username') { describe = 'Show username'; } else if (this.state.nameFormat === 'full_name') { describe = 'Show first and last name'; } else { describe = 'Show nickname if one exists, otherwise show first and last name (team default)'; } nameFormatSection = ( { this.props.updateSection('name_format'); }} /> ); } return (

{'Display Settings'}

{'Display Settings'}

{clockSection}
{nameFormatSection}
); } } UserSettingsDisplay.propTypes = { user: React.PropTypes.object, updateSection: React.PropTypes.func, updateTab: React.PropTypes.func, activeSection: React.PropTypes.string };