Merge pull request #165 from coralproject/set-char-count

Set char count as admin
This commit is contained in:
David Jay
2016-12-13 12:02:24 -05:00
committed by GitHub
6 changed files with 176 additions and 50 deletions
+4 -1
View File
@@ -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(() => {
@@ -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) => <List>
<ListItem className={styles.configSetting}>
<ListItemAction>
<Checkbox
onClick={updateModeration(props.updateSettings, props.settings.moderation)}
checked={props.settings.moderation === 'pre'} />
</ListItemAction>
{lang.t('configure.enable-pre-moderation')}
</ListItem>
<ListItem threeLine className={styles.configSettingInfoBox}>
<ListItemAction>
<Checkbox
onClick={updateInfoBoxEnable(props.updateSettings, props.settings.infoBoxEnable)}
checked={props.settings.infoBoxEnable} />
</ListItemAction>
<ListItemContent>
{lang.t('configure.include-comment-stream')}
<p>
{lang.t('configure.include-comment-stream-desc')}
const CommentSettings = ({updateSettings, settingsError, settings, errors}) => <List>
<ListItem className={`${styles.configSetting} ${settings.moderation === 'pre' ? styles.enabledSetting : styles.disabledSetting}`}>
<ListItemAction>
<Checkbox
onClick={updateModeration(updateSettings, settings.moderation)}
checked={settings.moderation === 'pre'} />
</ListItemAction>
<ListItemContent>
<div className={styles.settingsHeader}>{lang.t('configure.enable-pre-moderation')}</div>
<p className={settings.moderation === 'pre' ? '' : styles.disabledSettingText}>
{lang.t('configure.enable-pre-moderation-text')}
</p>
</ListItemContent>
</ListItem>
<ListItem className={`${styles.configSettingInfoBox} ${props.settings.infoBoxEnable ? null : styles.hidden}`} >
<ListItemContent>
<Textfield
onChange={updateInfoBoxContent(props.updateSettings)}
value={props.settings.infoBoxContent}
label={lang.t('configure.include-text')}
rows={3}/>
</ListItemContent>
</ListItem>
<ListItem className={styles.configSettingInfoBox}>
<ListItemContent>
{lang.t('configure.closed-comments-desc')}
<Textfield
onChange={updateClosedMessage(props.updateSettings)}
value={props.settings.closedMessage}
label={lang.t('configure.closed-comments-label')}
rows={3}/>
</ListItemContent>
</ListItem>
</List>;
</ListItem>
<ListItem className={`${styles.configSetting} ${settings.charCountEnable ? styles.enabledSetting : styles.disabledSetting}`}>
<ListItemAction>
<Checkbox
onClick={updateCharCountEnable(updateSettings, settings.charCountEnable)}
checked={settings.charCountEnable} />
</ListItemAction>
<ListItemContent>
<div className={styles.settingsHeader}>{lang.t('configure.comment-count-header')}</div>
<p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
<span>{lang.t('configure.comment-count-text-pre')}</span>
<input type='text'
className={`${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
htmlFor='charCount'
onChange={updateCharCount(updateSettings, settingsError)}
value={settings.charCount}/>
<span>{lang.t('configure.comment-count-text-post')}</span>
{
errors.charCount &&
<span className={styles.settingsError}>
<br/>
<Icon name="error_outline"/>
{lang.t('configure.comment-count-error')}
</span>
}
</p>
</ListItemContent>
</ListItem>
<ListItem threeLine className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? styles.enabledSetting : styles.disabledSetting}`}>
<ListItemAction>
<Checkbox
onClick={updateInfoBoxEnable(updateSettings, settings.infoBoxEnable)}
checked={settings.infoBoxEnable} />
</ListItemAction>
<ListItemContent>
{lang.t('configure.include-comment-stream')}
<p>
{lang.t('configure.include-comment-stream-desc')}
</p>
</ListItemContent>
</ListItem>
<ListItem className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
<ListItemContent>
<Textfield
onChange={updateInfoBoxContent(updateSettings)}
value={settings.infoBoxContent}
label={lang.t('configure.include-text')}
rows={3}/>
</ListItemContent>
</ListItem>
<ListItem className={styles.configSettingInfoBox}>
<ListItemContent>
{lang.t('configure.closed-comments-desc')}
<Textfield
onChange={updateClosedMessage(updateSettings)}
value={settings.closedMessage}
label={lang.t('configure.closed-comments-label')}
rows={3}/>
</ListItemContent>
</ListItem>
</List>;
export default CommentSettings;
@@ -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;
@@ -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 <CommentSettings
settings={this.props.settings}
updateSettings={this.onSettingUpdate}/>;
updateSettings={this.onSettingUpdate}
errors={this.state.errors}
settingsError={this.onSettingError}/>;
case 'embed':
return <EmbedLink/>;
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 {
</ListItem>
</List>
{
this.state.changed ?
showSave ?
<Button
raised
onClick={this.saveSettings}
+12 -2
View File
@@ -41,6 +41,7 @@
},
"configure": {
"enable-pre-moderation": "Enable pre-moderation",
"enable-pre-moderation-text": "Moderators must approve any comment before it is published.",
"include-comment-stream": "Include Comment Stream Description for Readers.",
"include-comment-stream-desc": "Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.",
"include-text": "Include your text here.",
@@ -55,7 +56,11 @@
"configure": "Configure",
"community": "Community",
"closed-comments-desc": "Write a message for closed threads",
"closed-comments-label": "Write a message..."
"closed-comments-label": "Write a message...",
"comment-count-header": "Limit Comment Length",
"comment-count-text-pre": "Comments will be limited to ",
"comment-count-text-post": " characters.",
"comment-count-error": "Please enter a valid number."
},
"bandialog": {
"ban_user": "Ban User?",
@@ -96,6 +101,7 @@
},
"configure": {
"enable-pre-moderation": "Habilitar pre-moderación",
"enable-pre-moderation-text": "Los moderadores deben aprobar cada comentario antes de que sea publicado.",
"include-comment-stream": "Incluir la Descripción a un Hilo de Comentario para los y las Lectoras.",
"include-comment-stream-desc": "Escribir un mensaje que será agregado a la parte de arriba del tu hilo de comentarios. Por ejemplo, un tema, guias de comunidad, etc.",
"include-text": "Incluir tu texto aqui.",
@@ -110,7 +116,11 @@
"configure": "Configurar",
"community": "Comunidad",
"closed-comments-desc": "Escribe un mensaje para cuando los comentarios se encuentran cerrados",
"closed-comments-label": "Escribe un mensaje..."
"closed-comments-label": "Escribe un mensaje...",
"comment-count-header": "Limitar el largo del comentario",
"comment-count-text-pre": "El largo de comentarios será ",
"comment-count-text-post": " caracteres",
"comment-count-error": "Por favor escribe un número válido."
},
"bandialog": {
"ban_user": "Quieres suspender el Usuario?",
+9 -1
View File
@@ -38,7 +38,15 @@ const SettingSchema = new Schema({
type: String,
default: ''
},
wordlist: [String]
wordlist: [String],
charCount: {
type: Number,
default: 5000
},
charCountEnable: {
type: Boolean,
default: false
}
}, {
timestamps: {
createdAt: 'created_at',