Mu irte for action item form

app/controllers/assignments_controller.rb

@@ -22,4 +22,13 @@ def index
         end
     end
 
+    def bulk_modify_select
+      @action_items = authorize ActionItem.select("title, updated_at, category, id").order("updated_at DESC").all
+    end
+
+    def bulk_modify_create
+      @action_item_id = params.fetch(:action_item_id)
+      @assignments = authorize Assignment.where(action_item_id: @action_item_id).order("updated_at DESC").includes(participant: :user)
+    end
+
 end

app/javascript/components/ActionItemCard/index.js

@@ -18,6 +18,7 @@ import { apiPatch } from 'utils/axios';
 import * as Sentry from '@sentry/browser';
 import formatDate from 'utils/utils';
 import styles from './styles';
+import MUIRichTextEditor from 'mui-rte';
 function ActionItemCard({
   classes,
   userType,
@@ -43,7 +44,9 @@ function ActionItemCard({
     initialCompletedParticipant,
   );
   const [completedStaff, setCompletedStaff] = useState(initialCompletedStaff);
-
+  const renderRichText = desc => (
+    <MUIRichTextEditor value={desc} readOnly toolbar={false} />
+  );  
   const renderSelectIcon = () => (
     <IconButton aria-label="add" onClick={handleIconClick}>
       {selected ? <CheckCircleIcon /> : <AddIcon />}
@@ -218,8 +221,9 @@ function ActionItemCard({
           alignItems="center"
         >
           <Grid item className={classes.descriptionStyle} zeroMinWidth>
-            <Typography noWrap variant="body1" style={{ fontSize: '14px' }}>
-              {description}
+            <Typography noWrap variant="h6" style={{ fontSize: '14px' }}>
+              {/* this makes the description backwards compatible TextField or RichText */}
+              {description[0] === '{' ? renderRichText(description) : description} 
             </Typography>
           </Grid>
           <Grid item>
@@ -244,7 +248,7 @@ function ActionItemCard({
         >
           <Grid item>
             {dueDate ? (
-              <Typography variant="body1" style={{ fontSize: '14px' }}>
+              <Typography variant="body1" style={{ fontSize: '14px', marginTop: '20px'}}>
                 Due: {formatDate(dueDate)}
               </Typography>
             ) : null}
@@ -253,7 +257,7 @@ function ActionItemCard({
             item
             container
             justify="flex-end"
-            style={{ 'padding-left': '16px', width: 'calc(100% - 100px)' }}
+            style={{ paddingLeft: '16px', width: 'calc(100% - 100px)' }}
           >
             {/* Make sure renderClose + participantShowPage are not both true, or else you get two edit buttons. */}
             <Grid item>{renderCompleteButton()}</Grid>
@@ -280,8 +284,8 @@ ActionItemCard.propTypes = {
   removeActionItem: PropTypes.func,
   addBorderBottom: PropTypes.bool,
   participantShowPage: PropTypes.bool,
-  initialCompletedStaff: PropTypes.bool.isRequired,
-  initialCompletedParticipant: PropTypes.bool.isRequired,
+  initialCompletedStaff: PropTypes.bool,
+  initialCompletedParticipant: PropTypes.bool,
   assignmentId: PropTypes.number,
 };
 

app/javascript/components/ActionItemCard/styles.js

@@ -35,9 +35,9 @@ const styles = theme => ({
   descriptionStyle: {
     textOverflow: 'ellipsis',
     fontSize: '14px',
-    overflow: 'hidden',
+    overflow: 'auto',
     lineHeight: '1.5em',
-    height: '1.5em',
+    maxHeight: '4em',
     maxWidth: 'calc(100% - 64px)',
   },
   buttonStyle: {

app/javascript/components/ActionItemCreationPage/index.js

@@ -512,7 +512,7 @@ class ActionItemCreationPage extends React.Component {
       </Grid>
     );
     const forwardButton = (
-      <Grid item style={{ 'padding-left': '16px' }}>
+      <Grid item style={{ paddingLeft: '16px' }}>
         <Fab
           className={classes.iconStyle}
           component="span"
@@ -631,7 +631,7 @@ class ActionItemCreationPage extends React.Component {
               item
               direction="row"
               alignItems="flex-start"
-              justifyContent="center"
+              justifycontent="center"
               className={classes.headerStyle}
             >
               <Grid item>

app/javascript/components/ActionItemForm/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react';
-import { withStyles, ThemeProvider } from '@material-ui/core/styles';
+import { withStyles, ThemeProvider, MuiThemeProvider } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
@@ -9,7 +9,9 @@ import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import ActionItemCategoryTag from 'components/ActionItemCategoryTag';
 import theme from 'utils/theme';
-import styles from './styles';
+import { styles, defaultTheme } from './styles';
+import MUIRichTextEditor from 'mui-rte';
+import { convertToRaw } from 'draft-js';
 
 function ActionItemForm({
   classes,
@@ -36,6 +38,11 @@ function ActionItemForm({
     setCategory({ target: { value: newCategory } });
   };
 
+  const handleDescriptionChange = state => {
+    const value = JSON.stringify(convertToRaw(state.getCurrentContent()));
+    setDescription({ target: {value} })
+  };
+
   const categoryList = categories.map(category => {
     const isSelectedCategory =
       categorySelected && categorySelected === category;
@@ -51,7 +58,6 @@ function ActionItemForm({
   });
 
   const allFieldsFilled = title && description && categorySelected;
-
   return (
     <ThemeProvider theme={theme}>
       <Paper elevation={0} className={classes.formStyle}>
@@ -102,18 +108,25 @@ function ActionItemForm({
               >
                 <Typography variant="body1">Assignment Description</Typography>
               </div>
-              <TextField
-                variant="outlined"
+              <MuiThemeProvider theme={defaultTheme}>
+              <MUIRichTextEditor
+                name="description"
                 className={classes.searchBar}
-                onChange={e => setDescription(e)}
-                multiline
-                type="text"
-                margin="dense"
                 value={description}
-                required
-                error={failedSubmit && !description}
-                rows={2}
+                onChange={handleDescriptionChange}
+                variant="outlined"
+                label="Assignment description"
+                controls={[
+                  'bold',
+                  'italic',
+                  'underline',
+                  'numberList',
+                  'bulletList',
+                  'link',
+                  'code',
+                ]}
               />
+              </MuiThemeProvider>
             </Grid>
             <Grid item>
               <Typography variant="body1">Due Date (Optional)</Typography>

app/javascript/components/ActionItemForm/styles.js

@@ -1,4 +1,7 @@
-const styles = theme => ({
+import { createMuiTheme } from '@material-ui/core/styles';
+import theme from 'utils/theme';
+
+const styles = () => ({
   categoryButtonStyle: {
     fontSize: '10px',
     textAlign: 'center',
@@ -43,4 +46,29 @@ const styles = theme => ({
   },
 });
 
-export default styles;
+const defaultTheme = createMuiTheme();
+Object.assign(defaultTheme, {
+  overrides: {
+    MUIRichTextEditor: {
+      root: {
+        borderLeft: `solid 1px ${theme.palette.common.lightGrey}`,
+        borderRight: `solid 1px ${theme.palette.common.lightGrey}`,
+        borderBottom: `solid 1px ${theme.palette.common.lightGrey}`,
+        borderRadius: '4px',
+      },
+      hidePlaceholder: {
+        display: 'block',
+      },
+      editorContainer: {
+        padding: '20px',
+        overflow: 'auto',
+        height: '130px',
+      },
+      toolbar: {
+        backgroundColor: theme.palette.common.lightestGrey,
+      },
+    },
+  },
+});
+
+export { styles, defaultTheme };

app/javascript/components/ActionItemModal/index.js

@@ -11,9 +11,12 @@ import {
   DialogContentText,
   Grid,
 } from '@material-ui/core';
-import { withStyles, ThemeProvider } from '@material-ui/core/styles';
+import { withStyles, ThemeProvider, MuiThemeProvider } from '@material-ui/core/styles';
 import ActionItemCategoryTag from 'components/ActionItemCategoryTag';
-import styles from './styles';
+import { styles, defaultTheme } from './styles';
+import MUIRichTextEditor from 'mui-rte';
+import { convertToRaw } from 'draft-js';
+
 class ActionItemModal extends React.Component {
   constructor(props) {
     super(props);
@@ -34,6 +37,11 @@ class ActionItemModal extends React.Component {
     this.setState({ [name]: value });
   };
 
+  handleDescriptionChange = name => state => {
+    const value = JSON.stringify(convertToRaw(state.getCurrentContent()));
+    this.setState({ [name]: value });
+  };
+
   handleFileChange = event => {
     const file = event.target.files[0] ? event.target.files[0] : null;
     const fileURL = file ? window.URL.createObjectURL(file) : null;
@@ -101,7 +109,6 @@ class ActionItemModal extends React.Component {
         </Grid>
       );
     });
-
     return (
       <ThemeProvider theme={theme}>
         <Dialog
@@ -161,20 +168,42 @@ class ActionItemModal extends React.Component {
             >
               Description
             </DialogContentText>
-            <TextField
-              value={this.state.description}
-              className={classes.dialogContentTextFieldStyle}
-              name="description"
-              onChange={this.handleChange('description')}
-              variant="outlined"
-              margin="dense"
-              id="description"
-              label="Assignment description"
-              type="text"
-              fullWidth
-              multiline
-              rows={4}
-            />
+            <MuiThemeProvider theme={defaultTheme}>
+              {/* makes this backwards compatible TextField vs RichText */}
+            {description[0] === '{' ?
+             ( <MUIRichTextEditor
+                name="description"
+                value={description}
+                onChange={this.handleDescriptionChange('description')}
+                variant="outlined"
+                id="description"
+                label="Assignment description"
+                className={classes.MUIRichTextEditorStyle}
+                controls={[
+                  'bold',
+                  'italic',
+                  'underline',
+                  'numberList',
+                  'bulletList',
+                  'link',
+                  'code',
+                ]}
+              /> ):( 
+              <TextField  
+                value={this.state.description}
+                className={classes.dialogContentTextFieldStyle}
+                name="description"
+                onChange={this.handleChange('description')}
+                variant="outlined"
+                margin="dense"
+                id="description"
+                label="Assignment description"
+                type="text"
+                fullWidth
+                multiline
+                rows={4}
+              />)}
+            </MuiThemeProvider>
           </DialogContent>
           <DialogContent className={classes.dialogContentStyle}>
             <DialogContentText className={classes.dialogContentTextStyle}>

app/javascript/components/ActionItemModal/styles.js

@@ -1,4 +1,7 @@
-const styles = theme => ({
+import { createMuiTheme } from '@material-ui/core/styles';
+import theme from 'utils/theme';
+
+const styles = () => ({
   overrides: {
     MuiDialogContent: {
       root: {
@@ -120,4 +123,29 @@ const styles = theme => ({
   },
 });
 
-export default styles;
+const defaultTheme = createMuiTheme();
+Object.assign(defaultTheme, {
+  overrides: {
+    MUIRichTextEditor: {
+      root: {
+        borderLeft: `solid 1px ${theme.palette.common.lightGrey}`,
+        borderRight: `solid 1px ${theme.palette.common.lightGrey}`,
+        borderBottom: `solid 1px ${theme.palette.common.lightGrey}`,
+        borderRadius: '4px',
+      },
+      hidePlaceholder: {
+        display: 'block',
+      },
+      editorContainer: {
+        padding: '20px',
+        overflow: 'auto',
+        height: '130px',
+      },
+      toolbar: {
+        backgroundColor: theme.palette.common.lightestGrey,
+      },
+    },
+  },
+});
+
+export { styles, defaultTheme };

app/javascript/components/ActionItemParticipant/index.js

@@ -44,7 +44,7 @@ function ActionItemParticipant({
         container
         direction="row"
         alignItems="center"
-        justifyContent="flex-start"
+        justifycontent="flex-start"
         zeroMinWidth
         style={{ width: '80%' }}
       >

app/javascript/components/ActionItemSearchParticipants/index.js

@@ -177,14 +177,13 @@ class ActionItemSearchParticipants extends React.Component {
         className={classes.boundaryBox}
         direction="column"
         alignItems="center"
-        justifyContent="space-evenly"
+        justifycontent="space-evenly"
+        justify="center"
       >
         {/* Filter By Category */}
         <Grid item className={classes.categoryItem}>
           <Typography variant="body1">FILTER BY CATEGORY</Typography>
-          <Grid justify="center" item>
-            {this.statusButtons()}
-          </Grid>
+          <Grid item>{this.statusButtons()}</Grid>
         </Grid>
 
         {/* Search for an individual */}
@@ -205,7 +204,7 @@ class ActionItemSearchParticipants extends React.Component {
         </Grid>
 
         {/* Select All Button */}
-        <Grid item alignItems="flex-end" className={classes.selectAll}>
+        <Grid item className={classes.selectAll}>
           <FormControlLabel
             control={
               <Checkbox