Commit 026f4e1c authored by Maxime Chaillet's avatar Maxime Chaillet

create a labeledElelemtn react compoennt which renders labeled elements.

parent 51a6bf01
This diff is collapsed.
......@@ -14,16 +14,17 @@ class EventContentPanel extends React.Component {
}
render() {
let { event, context, investigationId, user, onEventModified } = this.props;
if (context === EDIT_EVENT_CONTEXT) {
if (event) {
if (event.type === ANNOTATION) {
return (<AnnotationContent
return (<EventContentDisplayer
onEventModified={onEventModified}
event={event}
content={event.content}
eventId={event._id}
investigationId={investigationId}
setTitleInput={this.setTitleInput}
isEditionMode={true}
storeToLocalStorage={this.storeToLocalStorage}
useRichTextEditor={true}
user={user}
/>);
}
......@@ -99,75 +100,75 @@ EventContentPanel.proptype = {
}
/**
* React component which represents the content of an annotation
* @param {*} props the props passed to this component
*/
class AnnotationContent extends React.Component {
constructor(props) {
super(props);
this.state = {
inputTitleValue: this.props.event.title || ''
};
this.onChangeInputValue = this.onChangeInputValue.bind(this);
}
onChangeInputValue(e) {
this.setState({ inputTitleValue: e.target.value });
}
render() {
let { event, investigationId, storeToLocalStorage, user } = this.props;
if (event.type && event.type === ANNOTATION) {
return (
<div>
<EventContentDisplayer
onEventModified={this.props.onEventModified}
content={event.content}
eventId={event._id}
investigationId={investigationId}
isEditionMode={true}
storeToLocalStorage={storeToLocalStorage}
useRichTextEditor={true}
user={user}
/>
<div style={{ paddingTop: '8px' }}>
<InputGroup>
<InputGroup.Addon style={{ backgroundColor: 'transparent', border: 'none' }}> <Label> Title </Label> </InputGroup.Addon>
<FormControl
type='text'
value={this.state.inputTitleValue}
onChange={this.onChangeInputValue}
placeholder='Optional title here'
ref={this.props.setTitleInput}
/>
</InputGroup>
</div>
</div>
);
};
}
componentDidUpdate() {
this.props.onEventModified();
}
}
AnnotationContent.propTypes = {
/* the callback function which activates the save button */
onEventModified: PropTypes.func.isRequired,
/* The event to be shown */
event: PropTypes.object.isRequired,
/* the investigationId */
investigationId: PropTypes.string.isRequired,
/* the callback function which adds a ref to this */
setTitleInput: PropTypes.func.isRequired,
/* the user */
user: PropTypes.object.isRequired
};
// /**
// * React component which represents the content of an annotation
// * @param {*} props the props passed to this component
// */
// class AnnotationContent extends React.Component {
// constructor(props) {
// super(props);
// // this.state = {
// // inputTitleValue: this.props.event.title || ''
// // };
// //this.onChangeInputValue = this.onChangeInputValue.bind(this);
// }
// // onChangeInputValue(e) {
// // this.setState({ inputTitleValue: e.target.value });
// // }
// render() {
// let { event, investigationId, storeToLocalStorage, user } = this.props;
// if (event.type && event.type === ANNOTATION) {
// return (
// <div>
// <EventContentDisplayer
// onEventModified={this.props.onEventModified}
// content={event.content}
// eventId={event._id}
// investigationId={investigationId}
// isEditionMode={true}
// storeToLocalStorage={storeToLocalStorage}
// useRichTextEditor={true}
// user={user}
// />
// {/* <div style={{ paddingTop: '8px' }}>
// <InputGroup>
// <InputGroup.Addon style={{ backgroundColor: 'transparent', border: 'none' }}> <Label> Title </Label> </InputGroup.Addon>
// <FormControl
// type='text'
// value={this.state.inputTitleValue}
// onChange={this.onChangeInputValue}
// placeholder='Optional title here'
// ref={this.props.setTitleInput}
// />
// </InputGroup>
// </div> */}
// </div>
// );
// };
// }
// componentDidUpdate() {
// this.props.onEventModified();
// }
// }
// AnnotationContent.propTypes = {
// /* the callback function which activates the save button */
// onEventModified: PropTypes.func.isRequired,
// /* The event to be shown */
// event: PropTypes.object.isRequired,
// /* the investigationId */
// investigationId: PropTypes.string.isRequired,
// /* the callback function which adds a ref to this */
// setTitleInput: PropTypes.func.isRequired,
// /* the user */
// user: PropTypes.object.isRequired
// };
/**
* React component which represents the content of an notification
......@@ -200,8 +201,8 @@ const NotificationContent = (props) => {
investigationId={investigationId}
isEditionMode={true}
storeToLocalStorage={props.storeToLocalStorage}
user={user}
useRichTextEditor={true}
user={user}
/>);
};
......
......@@ -4,6 +4,7 @@ import { getPreviousVersionNumber, } from '../../helpers/EventHelpers';
import Popup from 'reactjs-popup';
import Moment from 'moment';
import EventVersion from './EventVersion';
import LabeledElement from './LabeledElement';
/**
* React component which renders event history label and the correwsponding modal.
......@@ -14,11 +15,10 @@ class EventHistory extends React.Component {
return (
<div >
<OverlayTrigger
trigger='click'
placement='top'
overlay={eventVersionsPopover(this.props.event)}
rootClose={true} >
<Label> History <div className='arrow-down' /> </Label>
trigger='click' placement='top' overlay={eventVersionsPopover(this.props.event)} rootClose={true} >
<div>
<LabeledElement data={null} type='text' labelText={<span> History <div className='arrow-down' /> </span>} />
</div>
</OverlayTrigger>
</div>);
}
......@@ -94,36 +94,36 @@ function eventVersionsPopover(event) {
</Popover>);
}
/**
* React component which represents the commentBy part.
* @param {*} props
*/
const CommentBy = (props) => {
let { event } = props;
if (getPreviousVersionNumber(event) === 0) {
return (
<div>
<Label> Created by </Label>
<div style={{ paddingTop: '5px', paddingLeft: '10px' }}>
<p style={{ color: '#666666' }}> {props.event.username} </p>
</div>
<hr id='hrEvents' />
</div>
);
};
if (getPreviousVersionNumber(event) !== 0) {
return (
<div>
<Label> Commented by </Label>
<div style={{ paddingTop: '5px', paddingLeft: '10px' }}>
<p style={{ color: '#666666' }}> {props.event.username} </p>
</div>
<hr id='hrEvents' />
</div>
);
};
return null;
};
// /**
// * React component which represents the commentBy part.
// * @param {*} props
// */
// const CommentBy = (props) => {
// let { event } = props;
// if (getPreviousVersionNumber(event) === 0) {
// return (
// <div>
// <Label> Created by </Label>
// <div style={{ paddingTop: '5px', paddingLeft: '10px' }}>
// <p style={{ color: '#666666' }}> {props.event.username} </p>
// </div>
// <hr id='hrEvents' />
// </div>
// );
// };
// if (getPreviousVersionNumber(event) !== 0) {
// return (
// <div>
// <Label> Commented by </Label>
// <div style={{ paddingTop: '5px', paddingLeft: '10px' }}>
// <p style={{ color: '#666666' }}> {props.event.username} </p>
// </div>
// <hr id='hrEvents' />
// </div>
// );
// };
// return null;
// };
/**
* React component which represents on item of the event history
......
......@@ -99,7 +99,6 @@ 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
......
import React from 'react';
import Proptypes from 'prop-types';
import { InputGroup, Label, FormControl, OverlayTrigger, Tooltip } from 'react-bootstrap';
/**
* A React component which renders a labeled elemtn (input or simple text)
*/
class LabeledElement extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: props.data || ''
};
}
render() {
let { type, data, labelText, setTitleInput, tooltip } = this.props;
if (type === 'input') {
return (
<OverlayTrigger
placement='top'
overlay={
<Tooltip id='tooltip'> {tooltip} </Tooltip>
}>
<InputGroup>
<InputGroup.Addon style={{ backgroundColor: 'transparent', border: 'none' }}>
<Label> {labelText} </Label>
</InputGroup.Addon>
<FormControl
type='text'
value={this.state.inputValue}
onChange={this.onChangeInputValue}
placeholder={'Optional ' + labelText + ' here'}
ref={setTitleInput}
/>
</InputGroup>
</ OverlayTrigger>
);
}
if (type === 'text') {
return (<Overlay {...this.props}>
<div>
<Label> {labelText} </Label>
<div style={{ paddingTop: '5px', paddingLeft: '10px', color: '#666666', display: 'inline-block' }}> {data} </div>
</div>
</Overlay>);
}
}
componentDidUpdate() {
if (this.props.type === 'input') { this.props.onEventModified(); };
}
onChangeInputValue = (e) => {
this.setState({ inputValue: e.target.value });
}
};
export default LabeledElement;
LabeledElement.proptypes = {
/** data to render */
data: Proptypes.string,
/** Text of the label */
labelText: Proptypes.string,
/** callback function triggered when user changed the data of the event */
onEventModified: Proptypes.func,
/** Callback function used to get data from this input from the parent compoenent */
setTitleInput: Proptypes.func,
/** When defined, this component has an overlay to display the provided tooltip. No overlay when this prop is not set. */
tooltip: Proptypes.object,
/** type of the element to render : 'input' or */
type: Proptypes.string.isRequired,
}
/** Simple react component which render an overlay or not */
const Overlay = (props) => {
if (props.tooltip) {
return (<OverlayTrigger
placement='top'
overlay={<Tooltip id='tooltip'> {props.tooltip} </Tooltip>}>
{props.children}
</OverlayTrigger>);
};
return props.children // no tooltic by default
}
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
import { Panel, Label, Glyphicon, OverlayTrigger, Tooltip, Grid, Row, Col } from 'react-bootstrap';
import { Panel, Label, Glyphicon, OverlayTrigger, Tooltip, Grid, Row, Col, Button, InputGroup, FormControl } from 'react-bootstrap';
import EventHeader from './EventHeader';
import EventFooter from './EventFooter';
import TagContainer from '../../containers/TagContainer';
......@@ -9,6 +9,7 @@ import { EDIT_EVENT_INVISIBLE, NEW_EVENT_CONTEXT, EDIT_EVENT_CONTEXT, NEW_EVENT_
import EventHistory from './EventHistory';
import { getEventCreationDate, getEventHistoryCreationDate, getOriginalEvent, getPreviousVersionNumber } from '../../helpers/EventHelpers';
import _ from 'lodash';
import LabeledElement from './LabeledElement';
/**
* React component which renders a Panel for creating of editing an event
......@@ -19,7 +20,8 @@ class NewOrEditEventPanel extends React.Component {
this.state = {
isSaveButtonEnabled: false, //whether the editor contains some text or not
isEditorContentValid: false
isEditorContentValid: false,
optionPanelDecollaped: false
}
}
render() {
......@@ -39,6 +41,18 @@ class NewOrEditEventPanel extends React.Component {
/>
</div>
<Grid fluid>
<Row>
<Col xs={4}> <CreationDate event={event} /> </Col>
<Col xs={4}> <CommentBy event={event} /> </Col>
<Col xs={3}> <EventHistory event={event} /> </Col>
<Col xs={1}>
<Button bsSize='xsmall' onClick={() => this.setState({ optionPanelDecollaped: !this.state.optionPanelDecollaped })}>
<Glyphicon glyph='option-vertical' />
</Button>
</Col>
</Row>
</Grid>
<div>
<Label style={{ margin: '6px 6px 6px 12px', paddingRight: '2px' }}> Tags </Label>
<OverlayTrigger
......@@ -55,13 +69,13 @@ class NewOrEditEventPanel extends React.Component {
/>
</div>
<Grid fluid>
<Row>
<Col xs={4}> <CreationDate event={event} /> </Col>
<Col xs={4}> <CommentBy event={event} /> </Col>
<Col xs={4}> <EventHistory event={event} /> </Col>
</Row>
</Grid>
<Panel id="optionPanel" style={{ border: 'none', marginBottom: '0px' }} expanded={this.state.optionPanelDecollaped}>
<Panel.Collapse>
<LabeledElement type='input' data={event ? event.title : null} labelText='title' onEventModified={this.onEventModified} setTitleInput={this.setTitleInput} tooltip='title of the event' />
</Panel.Collapse>
</Panel>
</div>
<EventFooter
......@@ -170,12 +184,17 @@ class NewOrEditEventPanel extends React.Component {
/**
* Callback function used to set the tagcontainer instance to a class instance variable in order to access data stored with the tag container
* Callback function used to set the tagcontainer instance to a class instance variable in order to access data stored within the tag container
*/
setTagContainer = (element) => {
this.tagContainer = element;
}
/** Callback function used to set the titleInput instance to a class instance variable inorder to access data stored within the title input */
setTitleInput = (element) => {
this.inputTitle = element;
}
/**
* Creates an event. It's a request to the server which may fail.
*/
......@@ -244,22 +263,10 @@ NewOrEditEventPanel.propTypes = {
updateEvent: PropTypes.object
}
/** React component which represents the creation date part. */
const CreationDate = (props) => {
if (props.event) {
return (<div>
<Label> Creation date </Label>
<OverlayTrigger
placement='right'
overlay={
<Tooltip id='tooltip'>
<p> Event created on {getEventHistoryCreationDate(getOriginalEvent(props.event))} </p>
</Tooltip>
}>
<div style={{ paddingTop: '5px', paddingLeft: '10px', color: '#666666', display: 'inline-block' }}>
{getEventCreationDate(getOriginalEvent(props.event))}
</div>
</OverlayTrigger>
</div>);
return (<LabeledElement data={getEventCreationDate(getOriginalEvent(props.event))} type='text' labelText='Creation date' tooltip={<p> Event created on {getEventHistoryCreationDate(getOriginalEvent(props.event))} </p>} />);
}
return null;
}
......@@ -269,27 +276,12 @@ const CreationDate = (props) => {
* @param {*} props
*/
const CommentBy = (props) => {
let { event } = props;
if (event) {
if (getPreviousVersionNumber(event) === 0) {
return (
<div>
<Label> Created by </Label>
<div style={{ paddingTop: '5px', paddingLeft: '10px', display: 'inline-block' }}>
<p style={{ color: '#666666' }}> {props.event.username} </p>
</div>
</div>
);
if (props.event) {
if (getPreviousVersionNumber(props.event) === 0) {
return (<LabeledElement data={props.event.username} type='text' labelText='Created by' tooltip='Author of the event' />);
};
if (getPreviousVersionNumber(event) !== 0) {
return (
<div>
<Label> Commented by </Label>
<div style={{ paddingTop: '5px', paddingLeft: '10px', display: 'inline-block' }}>
<p style={{ color: '#666666' }}> {props.event.username} </p>
</div>
</div>
);
if (getPreviousVersionNumber(props.event) !== 0) {
return (<LabeledElement data={props.event.username} type='text' labelText='Commented by' tooltip='Author of the comment' />);
};
}
return null;
......
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