Erin/Richtext and Edit CaseNote

Added rich text rendering and editing for CaseNotes

app/controllers/pages_controller.rb

@@ -14,7 +14,7 @@ def dashboard
             when 'participant'
               @user = current_user
               @paperworks = @user.participant.paperworks
-              @case_notes = @user.participant.case_notes
+              @case_notes = @user.participant.case_notes.where(internal: false)
               authorize Participant
               dashboard_participants_path
             else

app/javascript/components/CaseNoteCard.jsx

@@ -1,71 +1,152 @@
-import React from "react";
-import { makeStyles } from '@material-ui/core/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import Typography from '@material-ui/core/Typography';
-import Paper from '@material-ui/core/Paper';
-import Grid from '@material-ui/core/Grid';
-import axios from 'axios';
-
-const classes = makeStyles(theme => ({
-    root: {
-        flexGrow: 1,
-    },
-    paper: {
-        padding: theme.spacing(2),
-        textAlign: 'center',
-        color: theme.palette.text.secondary,
-    },
-}));
+import React from 'react';
+import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
+import { Menu, MenuItem, IconButton, Grid, Paper } from '@material-ui/core/';
+import MUIRichTextEditor from 'mui-rte';
+import CaseNoteForm from 'components/CaseNoteForm';
+import DeleteModal from 'components/DeleteModal';
+import PropTypes from 'prop-types';
 
 const styles = {
-    casenoteCardStyle: {
-        marginLeft: '20px',
-        padding: '5px',
-        paddingRight: '10px',
-        boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.15)',
-        borderRadius: '10px',
-        height: '200px'
-    },
-    casenoteTextStyle: {
-        marginLeft: '15px'
-    },
-    casenoteDescStyle: {
-        overflow: 'auto',
-        height: '100px',
-        marginTop: '-10px'
-    },
-}
+  casenoteCardStyle: {
+    marginLeft: '20px',
+    padding: '20px',
+    boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.15)',
+    borderRadius: '10px',
+    height: '200px',
+  },
+  casenoteDescStyle: {
+    overflow: 'auto',
+    height: '100px',
+    marginTop: '-20px',
+  },
+  dialogActionsStyle: {
+    padding: '30px',
+  },
+  MUIRichTextEditorStyle: {
+    border: '5px solid',
+    padding: '10px',
+  },
+  dialogStyle: {
+    padding: '20px',
+  },
+  dialogContentTextStyle: {
+    color: 'black',
+    marginBottom: '2px',
+  },
+  dialogContentTextFieldStyle: {
+    marginTop: '2px',
+    borderStyle: 'solid 4px grey',
+  },
+  saveDocumentButtonStyle: {
+    borderStyle: 'solid 3px grey',
+  },
+};
+
+class CaseNoteCard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      description: this.props.description,
+      title: this.props.title,
+      internal: this.props.internal,
+      id: this.props.id,
+      anchorEl: null,
+      participantId: this.props.participantId,
+    };
+    this.handleClick = this.handleClick.bind(this);
+    this.handleMenuClose = this.handleMenuClose.bind(this);
+  }
+
+  handleClick(event) {
+    this.setState({ anchorEl: event.currentTarget });
+  }
 
-class CaseNoteCard extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            description: this.props.description,
-            title: this.props.title,
-            internal:this.props.interal,
-        };
-    }
+  handleMenuClose() {
+    this.setState({ anchorEl: null });
+  }
 
-    componentDidMount() {
-
-    }
-
-    render () {
-        return (
-            <React.Fragment>
-                <Grid container spacing={3}>
-                    <Grid item xs={11}>
-                        <Paper className={classes.paper} style={styles.casenoteCardStyle}>
-                            <div style={styles.casenoteTextStyle}>
-                                <h3>{this.state.title}</h3>
-                                <p style={styles.casenoteDescStyle}>{this.state.description}</p>
-                            </div>
-                        </Paper>
-                    </Grid>
+  renderMenuItems() {
+    return (
+      <div>
+        <IconButton
+          aria-label="more"
+          aria-controls="long-menu"
+          aria-haspopup="true"
+          onClick={this.handleClick}
+        >
+          <MoreHorizIcon />
+        </IconButton>
+        <Menu
+          id="long-menu"
+          anchorEl={this.state.anchorEl}
+          open={Boolean(this.state.anchorEl)}
+          onClose={this.handleMenuClose}
+          PaperProps={{
+            style: {
+              maxHeight: 180,
+              width: 200,
+            },
+          }}
+        >
+          <CaseNoteForm
+            type="edit"
+            title={this.state.title}
+            description={this.state.description}
+            internal={this.state.internal}
+            participantId={this.state.participantId}
+            id={this.state.id}
+          />
+          <DeleteModal
+            message="Are you sure you want to delete this casenote?"
+            body={{
+              title: this.state.title,
+              description: this.state.description,
+              internal: this.state.internal,
+              participant_id: this.props.participantId,
+            }}
+            req={'/api/case_notes/' + this.state.id}
+          />
+        </Menu>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <>
+        <Grid container spacing={3}>
+          <Grid item xs={11}>
+            <Paper style={styles.casenoteCardStyle}>
+              <Grid container spacing={2}>
+                <Grid item xs={10}>
+                  <h3>{this.state.title}</h3>
+                </Grid>
+                <Grid item xs={2}>
+                  {this.renderMenuItems()}
                 </Grid>
-            </React.Fragment>
-        );
-    }
+              </Grid>
+              <div style={styles.casenoteDescStyle}>
+                <MUIRichTextEditor
+                  value={this.state.description}
+                  readOnly
+                  toolbar={false}
+                />
+              </div>
+            </Paper>
+          </Grid>
+        </Grid>
+      </>
+    );
+  }
 }
 
-export default CaseNoteCard;
+CaseNoteCard.propTypes = {
+  description: PropTypes.string,
+  title: PropTypes.string,
+  internal: PropTypes.bool,
+  id: PropTypes.number,
+  anchorEl: PropTypes.bool,
+  participantId: PropTypes.number,
+};
+
+export default CaseNoteCard;

app/javascript/components/CaseNoteCard/Loadable.js

@@ -0,0 +1,9 @@
+/**
+ *
+ * Asynchronously loads the component for CaseNoteCard
+ *
+ */
+
+import loadable from 'utils/loadable';
+
+export default loadable(() => import('./index'));

app/javascript/components/CaseNoteCard/index.js

@@ -0,0 +1,28 @@
+/**
+ *
+ * CaseNoteCard
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import theme from 'utils/theme';
+import { withStyles, ThemeProvider } from '@material-ui/core/styles';
+import styles from './styles';
+
+class CaseNoteCard extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <ThemeProvider theme={theme}>
+        <div className={classes.root}></div>
+      </ThemeProvider>
+    );
+  }
+}
+
+CaseNoteCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CaseNoteCard);

app/javascript/components/CaseNoteCard/styles.js

@@ -0,0 +1,13 @@
+/*
+ * CaseNoteCard Styles
+ *
+ * This contains all the styles for the CaseNoteCard container.
+ */
+
+export const styles = (/* theme */) => ({
+  root: {
+    backgroundColor: '#000000',
+  },
+});
+
+export default styles;

app/javascript/components/CaseNoteContainer.jsx

@@ -4,9 +4,9 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import Typography from '@material-ui/core/Typography';
 import Container from '@material-ui/core/Container';
 import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
-import NewCaseNote from 'components/NewCaseNote';
+import CaseNoteForm from 'components/CaseNoteForm';
 import CaseNoteCard from 'components/CaseNoteCard';
+import PropTypes from 'prop-types';
 
 const styles = {
   headerStyle: {
@@ -37,18 +37,17 @@ class CaseNoteContainer extends React.Component {
   }
 
   render() {
-    let participant_id = 1;
-    let case_note_cards = this.state.case_notes.map((case_note, index) => {
-      return (
-        <div key={index}>
-          <CaseNoteCard
-            title={case_note.title}
-            description={case_note.description}
-            internal={case_note.internal}
-          />
-        </div>
-      );
-    });
+    const caseNoteCards = this.state.case_notes.map(caseNote => (
+      <div key={caseNote.id}>
+        <CaseNoteCard
+          title={caseNote.title}
+          description={caseNote.description}
+          internal={caseNote.internal}
+          id={caseNote.id}
+          participantId={caseNote.participant_id}
+        />
+      </div>
+    ));
 
     return (
       <>
@@ -62,10 +61,13 @@ class CaseNoteContainer extends React.Component {
               <div className={classes.root} style={{ paddingTop: '20px' }}>
                 <Grid container spacing={3}>
                   <Grid item xs={6}>
-                    <h2 style={styles.headerStyle}>Casenotes</h2>
+                    <h2 style={styles.headerStyle}>Case Notes</h2>
                   </Grid>
                   <Grid item xs={5}>
-                    <NewCaseNote participantId={this.state.participant.id} />
+                    <CaseNoteForm
+                      type="create"
+                      participantId={this.state.participant.id}
+                    />
                   </Grid>
                 </Grid>
                 <div
@@ -76,7 +78,7 @@ class CaseNoteContainer extends React.Component {
                     height: '100vh',
                   }}
                 >
-                  {case_note_cards}
+                  {caseNoteCards}
                 </div>
               </div>
             </Typography>
@@ -87,4 +89,9 @@ class CaseNoteContainer extends React.Component {
   }
 }
 
+CaseNoteContainer.propTypes = {
+  caseNotes: PropTypes.array,
+  participant: PropTypes.object,
+};
+
 export default CaseNoteContainer;