diff --git a/client/coral-admin/src/actions/settings.js b/client/coral-admin/src/actions/settings.js index 71106e1f7..1dfda51b9 100644 --- a/client/coral-admin/src/actions/settings.js +++ b/client/coral-admin/src/actions/settings.js @@ -26,7 +26,10 @@ export const updateSettings = settings => { }; export const saveSettingsToServer = () => (dispatch, getState) => { - const settings = getState().settings.toJS().settings; + let settings = getState().settings.toJS().settings; + if (settings.charCount) { + settings.charCount = parseInt(settings.charCount); + } dispatch({type: SAVE_SETTINGS_LOADING}); coralApi('/settings', {method: 'PUT', body: settings}) .then(() => { diff --git a/client/coral-admin/src/containers/Configure/CommentSettings.js b/client/coral-admin/src/containers/Configure/CommentSettings.js index 194af720c..3a6a796e4 100644 --- a/client/coral-admin/src/containers/Configure/CommentSettings.js +++ b/client/coral-admin/src/containers/Configure/CommentSettings.js @@ -8,9 +8,25 @@ import { ListItemContent, ListItemAction, Textfield, - Checkbox + Checkbox, + Icon } from 'react-mdl'; +const updateCharCountEnable = (updateSettings, charCountChecked) => () => { + const charCountEnable = !charCountChecked; + updateSettings({charCountEnable}); +}; + +const updateCharCount = (updateSettings, settingsError) => (event) => { + const charCount = event.target.value; + if (charCount.match(/[^0-9]/) || charCount.length === 0) { + settingsError('charCount', true); + } else { + settingsError('charCount', false); + } + updateSettings({charCount: charCount}); +}; + const updateModeration = (updateSettings, mod) => () => { const moderation = mod === 'pre' ? 'post' : 'pre'; updateSettings({moderation}); @@ -31,48 +47,80 @@ const updateClosedMessage = (updateSettings) => (event) => { updateSettings({closedMessage}); }; -const CommentSettings = (props) => - - - - - {lang.t('configure.enable-pre-moderation')} - - - - - - - {lang.t('configure.include-comment-stream')} -

- {lang.t('configure.include-comment-stream-desc')} +const CommentSettings = ({updateSettings, settingsError, settings, errors}) => + + + + + +

{lang.t('configure.enable-pre-moderation')}
+

+ {lang.t('configure.enable-pre-moderation-text')}

-
- - - - - - - - {lang.t('configure.closed-comments-desc')} - - - -
; + + + + + + +
{lang.t('configure.comment-count-header')}
+

+ {lang.t('configure.comment-count-text-pre')} + + {lang.t('configure.comment-count-text-post')} + { + errors.charCount && + +
+ + {lang.t('configure.comment-count-error')} +
+ } +

+
+
+ + + + + + {lang.t('configure.include-comment-stream')} +

+ {lang.t('configure.include-comment-stream-desc')} +

+
+
+ + + + + + + + {lang.t('configure.closed-comments-desc')} + + + + ; export default CommentSettings; diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css index 388813a64..667bb4744 100644 --- a/client/coral-admin/src/containers/Configure/Configure.css +++ b/client/coral-admin/src/containers/Configure/Configure.css @@ -18,9 +18,27 @@ .configSetting { border: 1px solid #ccc; border-radius: 4px; - height: 90px; + height: 95px; margin-bottom: 10px; - cursor: pointer; + align-items: flex-start; +} + +.settingsError { + color: #d50000; +} + +.settingsError i { + font-size: 14px; + margin-right: 3px; +} + +.settingsHeader { + margin-top: 3px; + margin-bottom: 10px; +} + +.disabledSettingText { + color: #ccc; } .configSettingInfoBox { @@ -45,6 +63,22 @@ display: block; } +.charCountTexfield { + width: 4em; + padding: 0px; + border-color: #ccc; + border-style: solid; + border-width: 0px 0px 1px 0px; +} + +.charCountTexfieldEnabled { + border-color: #4caf50; +} + +.charCountTexfield:focus { + outline: none; +} + .changedSave { background-color:#4caf50; } @@ -84,7 +118,15 @@ margin-bottom:3px; } +.enabledSetting { + border-left-color: #4caf50; + border-left-style: solid; + border-left-width: 7px; +} +.disabledSetting { + padding-left: 22px; +} .hidden { display: none; diff --git a/client/coral-admin/src/containers/Configure/Configure.js b/client/coral-admin/src/containers/Configure/Configure.js index db3bf6f20..8dd106cd0 100644 --- a/client/coral-admin/src/containers/Configure/Configure.js +++ b/client/coral-admin/src/containers/Configure/Configure.js @@ -22,7 +22,8 @@ class Configure extends React.Component { this.state = { activeSection: 'comments', wordlist: [], - changed: false + changed: false, + errors: {} }; } @@ -64,12 +65,23 @@ class Configure extends React.Component { this.props.dispatch(updateSettings(setting)); } + // Sets an arbitrary error string and a boolean state. + // This allows the system to track multiple errors. + onSettingError = (error, state) => { + this.setState((prevState) => { + prevState.errors[error] = state; + return prevState; + }); + } + getSection = (section) => { switch(section){ case 'comments': return ; + updateSettings={this.onSettingUpdate} + errors={this.state.errors} + settingsError={this.onSettingError}/>; case 'embed': return ; case 'wordlist': @@ -94,6 +106,9 @@ class Configure extends React.Component { let pageTitle = this.getPageTitle(this.state.activeSection); const section = this.getSection(this.state.activeSection); + const showSave = Object.keys(this.state.errors).reduce( + (bool, error) => this.state.errors[error] ? false : bool, this.state.changed); + if (this.props.fetchingSettings) { pageTitle += ' - Loading...'; } @@ -119,7 +134,7 @@ class Configure extends React.Component { { - this.state.changed ? + showSave ?