Commit 51a6bf01 authored by Maxime Chaillet's avatar Maxime Chaillet

rename canEnableSaveButton to onEventModified.

parent 0aa44a6c
......@@ -13,7 +13,7 @@ import { LOCALSTORAGE_KEY_EDITED_EVENT_CONTENT_IN_HTML_FORMAT, LOCALSTORAGE_KEY_
*/
class EventContentDisplayer extends React.Component {
render() {
let { isEditionMode, user, content, useRichTextEditor, investigationId, canEnableSaveButton, storeToLocalStorage } = this.props;
let { isEditionMode, user, content, useRichTextEditor, investigationId, onEventModified, storeToLocalStorage } = this.props;
if (content && content instanceof Array && content.length !== 0) {
if (useRichTextEditor !== null && useRichTextEditor !== undefined) {
let HTMLText = this.getContent(content); // can be null
......@@ -21,7 +21,7 @@ class EventContentDisplayer extends React.Component {
// save the event plainText format to localstorage. This is usefull in case the editor is not changed (when only title is updated)
storeToLocalStorage(EDIT_EVENT_CONTEXT, getContent(content, 'plainText'), PLAINTEXT_CONTENT_FORMAT);
return (<HTMLEditor
canEnableSaveButton={canEnableSaveButton}
onEventModified={onEventModified}
isEditionMode={isEditionMode}
investigationId={investigationId}
storeToLocalStorage={storeToLocalStorage}
......
......@@ -13,13 +13,13 @@ class EventContentPanel extends React.Component {
if (props.event) { this.eventId = props.event._id; }; //required for component will unmount in EDIT_EVENT_CONTEXT
}
render() {
let { event, context, investigationId, user, onEventDataChanged } = this.props;
let { event, context, investigationId, user, onEventModified } = this.props;
if (context === EDIT_EVENT_CONTEXT) {
if (event) {
if (event.type === ANNOTATION) {
return (<AnnotationContent
canEnableSaveButton={onEventDataChanged}
onEventModified={onEventModified}
event={event}
investigationId={investigationId}
setTitleInput={this.setTitleInput}
......@@ -30,7 +30,7 @@ class EventContentPanel extends React.Component {
if (event.type === NOTIFICATION) {
return (<NotificationContent
canEnableSaveButton={onEventDataChanged}
onEventModified={onEventModified}
event={event}
investigationId={investigationId}
storeToLocalStorage={this.storeToLocalStorage}
......@@ -40,7 +40,7 @@ class EventContentPanel extends React.Component {
}
} else if (context === NEW_EVENT_CONTEXT) {
return (<HTMLEditor
canEnableSaveButton={onEventDataChanged}
onEventModified={onEventModified}
investigationId={investigationId}
isEditionMode={true}
storeToLocalStorage={this.storeToLocalStorage}
......@@ -124,7 +124,7 @@ class AnnotationContent extends React.Component {
return (
<div>
<EventContentDisplayer
canEnableSaveButton={this.props.canEnableSaveButton}
onEventModified={this.props.onEventModified}
content={event.content}
eventId={event._id}
investigationId={investigationId}
......@@ -152,13 +152,13 @@ class AnnotationContent extends React.Component {
}
componentDidUpdate() {
this.props.canEnableSaveButton();
this.props.onEventModified();
}
}
AnnotationContent.propTypes = {
/* the callback function which activates the save button */
canEnableSaveButton: PropTypes.func.isRequired,
onEventModified: PropTypes.func.isRequired,
/* The event to be shown */
event: PropTypes.object.isRequired,
/* the investigationId */
......@@ -183,7 +183,7 @@ const NotificationContent = (props) => {
if (getPreviousVersionNumber(event) === 0) {
let fakeContent = [{ format: 'html', text: '<p> </p>' }];
editorContent = (<EventContentDisplayer
canEnableSaveButton={props.canEnableSaveButton}
onEventModified={props.onEventModified}
content={fakeContent}
eventId={event._id}
investigationId={investigationId}
......@@ -194,7 +194,7 @@ const NotificationContent = (props) => {
/>);
} else {
editorContent = (<EventContentDisplayer
canEnableSaveButton={props.canEnableSaveButton}
onEventModified={props.onEventModified}
content={event.content}
eventId={event._id}
investigationId={investigationId}
......@@ -227,7 +227,7 @@ const NotificationContent = (props) => {
NotificationContent.propTypes = {
/* the callback function which activates the save button */
canEnableSaveButton: PropTypes.func.isRequired,
onEventModified: PropTypes.func.isRequired,
/* The event to be shown */
event: PropTypes.object.isRequired,
/* the investigationId */
......
......@@ -99,16 +99,19 @@ class HTMLEditor extends Component {
* @param {string} editorContent the editor content in html format
*/
onEditorChange(editorContent) {
debugger;
this.setImageHeightByCSSRule();
// Inform parent component that the current text equals the original text as provided in the props
if (this.props.canEnableSaveButton) {
if (this.props.onEventModified) {
let hasText = editorContent.length !== 0 ? true : false;
let isCurrentTextEqualsOriginal;
if (this.originalText) {
isCurrentTextEqualsOriginal = (_.isEqual(editorContent, this.originalText)) ? true : false;
} else {
isCurrentTextEqualsOriginal = false;
}
this.props.canEnableSaveButton({ hasText: hasText, currentTextEqualsOriginal: isCurrentTextEqualsOriginal });
this.props.onEventModified({ hasText: hasText, currentTextEqualsOriginal: isCurrentTextEqualsOriginal });
}
this.setState({ editorContent: editorContent });
......@@ -186,7 +189,7 @@ HTMLEditor.propTypes = {
/** the user who is currently logged in */
user: PropTypes.object.isRequired,
/** callback function called when editor content changed : from no text to text or vice versa, or when the current text is identical to the original text provided to the editor*/
canEnableSaveButton: PropTypes.func,
onEventModified: PropTypes.func,
}
export default HTMLEditor;
......@@ -8,6 +8,7 @@ import EventContentPanel from './EventContentPanel';
import { EDIT_EVENT_INVISIBLE, NEW_EVENT_CONTEXT, EDIT_EVENT_CONTEXT, NEW_EVENT_INVISIBLE, EVENT_CATEGORY_COMMENT, ANNOTATION, LOCALSTORAGE_KEY_NEW_EVENT_CONTENT_IN_PLAINTEXT_FORMAT, LOCALSTORAGE_KEY_NEW_EVENT_CONTENT_IN_HTML_FORMAT, LOCALSTORAGE_KEY_EDITED_EVENT_CONTENT_IN_HTML_FORMAT, LOCALSTORAGE_KEY_EDITED_EVENT_CONTENT_IN_PLAINTEXT_FORMAT } from '../../constants/EventTypes';
import EventHistory from './EventHistory';
import { getEventCreationDate, getEventHistoryCreationDate, getOriginalEvent, getPreviousVersionNumber } from '../../helpers/EventHelpers';
import _ from 'lodash';
/**
* React component which renders a Panel for creating of editing an event
......@@ -17,7 +18,8 @@ class NewOrEditEventPanel extends React.Component {
super(props);
this.state = {
hasText: false //whether the editor contains some text or not
isSaveButtonEnabled: false, //whether the editor contains some text or not
isEditorContentValid: false
}
}
render() {
......@@ -32,7 +34,7 @@ class NewOrEditEventPanel extends React.Component {
context={context}
event={event}
investigationId={investigationId}
onEventDataChanged={this.onEventDataChanged}
onEventModified={this.onEventModified}
user={user}
/>
</div>
......@@ -45,7 +47,7 @@ class NewOrEditEventPanel extends React.Component {
<a href={"/investigation/" + this.props.investigationId + "/events/tagManager"} target="_blank" style={{ fontSize: '12px' }}> <Glyphicon glyph='cog' /> </a>
</OverlayTrigger>
<TagContainer
canEnableSaveButton={this.onEventDataChanged}
canEnableSaveButton={this.onEventModified}
context={context}
event={event}
investigationId={this.props.investigationId}
......@@ -63,7 +65,7 @@ class NewOrEditEventPanel extends React.Component {
</div>
<EventFooter
isSaveButtonEnabled={this.state.hasText}
isSaveButtonEnabled={this.state.isSaveButtonEnabled}
onCancelButtonClicked={() => this.onCancelButtonClicked()}
onSaveButtonClicked={() => this.onSaveButtonClicked()} />
</Panel>
......@@ -71,15 +73,55 @@ class NewOrEditEventPanel extends React.Component {
}
/**
* Callback method called when current event data has just changed. This could original from a key press in the editor, a change in tags, ...
* Callback method called when current event has been modified by user. This could original from a key press in the editor, a change in tags, ...
* @param {*} change the object representing the change
* -1- hasText boolean which indicates whether the editor content has text or not; not null
* -2- currentTextEqualsOriginal, boolean, which indicates whether the current content is the same as the original content; not null
*/
onEventDataChanged = (change) => {
if (change) {
if ("hasText" in change) {
this.setState({ hasText: change.hasText })
}
}
onEventModified = (change) => {
let hasEventTitleChangedFromItsOriginalValue = this.inputTitle && this.props.event && this.inputTitle.props.value !== this.props.event.title;
let hasEventTagsChangedFromItsOriginalValue = this.tagContainer && this.props.event &&
!(_.isEqual(this.tagContainer.state.selectedTags.map((tag) => tag._id), this.props.event.tag));
if (hasEventTitleChangedFromItsOriginalValue || hasEventTagsChangedFromItsOriginalValue) {
/* title is not the same as original. can save (even with no content) */
if (this.state.isSaveButtonEnabled !== true) { this.setState({ isSaveButtonEnabled: true }); }
} else {
/* title is the same as original */
if (change) {
/* triggered from the editor */
let hasText = null;
let currentTextEqualsOriginal = null;
if ('hasText' in change) { hasText = change.hasText; };
if ('currentTextEqualsOriginal' in change) {
currentTextEqualsOriginal = change.currentTextEqualsOriginal;
};
if (!hasText) {
// there is no text in the editor
if (this.state.isEditorContentValid !== false) {
this.setState({ isEditorContentValid: false, isSaveButtonEnabled: false });
};
} else {
// there is text in the editor
if (currentTextEqualsOriginal === undefined || currentTextEqualsOriginal === null) {
if (this.state.isEditorContentValid !== false) {
this.setState({ isEditorContentValid: false, isSaveButtonEnabled: false });
};
} else if (currentTextEqualsOriginal) {
// current text in the editor equals the original text
if (this.state.isEditorContentValid !== false) {
this.setState({ isEditorContentValid: false, isSaveButtonEnabled: false });
};
} else if (this.state.isEditorContentValid !== true) {
this.setState({ isEditorContentValid: true, isSaveButtonEnabled: !hasEventTitleChangedFromItsOriginalValue });
};
};
} else if (!this.state.isEditorContentValid) {
/* Editor content is not valid. Can not save */
if (this.state.isSaveButtonEnabled !== false) { this.setState({ isSaveButtonEnabled: false }); }
};
};
}
/**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment