Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mu irte for action item form #16

Open
wants to merge 8 commits into
base: development
Choose a base branch
from
Open

Mu irte for action item form #16

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1134197
Fixed Console Errors Throughout
jebeni777 Nov 2, 2020
00f62a2
using original encrypted credentials file since i found the master key
shankj3 Nov 5, 2020
4eb7281
Merge pull request #14 from un-loop/development
shankj3 Nov 5, 2020
de74000
Merge branch 'development' of https://github.com/un-loop/participant-…
jebeni777 Nov 9, 2020
f7111ab
Added Rich Text for Assignment Descriptions
jebeni777 Nov 12, 2020
298d5fa
starting on bulk modify flow
shankj3 Nov 13, 2020
79e35dc
Merge branch '9-bulk-modify-assignments' of https://github.com/un-loo…
jebeni777 Nov 13, 2020
8772ad0
Fixed PR review edits
jebeni777 Nov 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions app/javascript/components/ActionItemCard/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 />}
Expand Down Expand Up @@ -219,7 +222,7 @@ function ActionItemCard({
>
<Grid item className={classes.descriptionStyle} zeroMinWidth>
<Typography noWrap variant="body1" style={{ fontSize: '14px' }}>
{description}
{description[0] === '{' ? renderRichText(description) : description}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i would add a code comment above, just saying that this is for backwards compatibility

</Typography>
</Grid>
<Grid item>
Expand All @@ -244,7 +247,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}
Expand All @@ -253,7 +256,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>
Expand All @@ -280,8 +283,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,
};

Expand Down
4 changes: 2 additions & 2 deletions app/javascript/components/ActionItemCard/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
4 changes: 2 additions & 2 deletions app/javascript/components/ActionItemCreationPage/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -631,7 +631,7 @@ class ActionItemCreationPage extends React.Component {
item
direction="row"
alignItems="flex-start"
justifyContent="center"
justifycontent="center"
className={classes.headerStyle}
>
<Grid item>
Expand Down
35 changes: 30 additions & 5 deletions app/javascript/components/ActionItemForm/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
Expand All @@ -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;
Expand All @@ -51,7 +58,6 @@ function ActionItemForm({
});

const allFieldsFilled = title && description && categorySelected;

return (
<ThemeProvider theme={theme}>
<Paper elevation={0} className={classes.formStyle}>
Expand Down Expand Up @@ -102,7 +108,26 @@ function ActionItemForm({
>
<Typography variant="body1">Assignment Description</Typography>
</div>
<TextField
<MuiThemeProvider theme={defaultTheme}>
<MUIRichTextEditor
name="description"
className={classes.searchBar}
value={description}
onChange={handleDescriptionChange}
variant="outlined"
label="Assignment description"
controls={[
'bold',
'italic',
'underline',
'numberList',
'bulletList',
'link',
'code',
]}
/>
</MuiThemeProvider>
{/* <TextField
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can take out the old commented code now that the new code works!

variant="outlined"
className={classes.searchBar}
onChange={e => setDescription(e)}
Expand All @@ -113,7 +138,7 @@ function ActionItemForm({
required
error={failedSubmit && !description}
rows={2}
/>
/> */}
</Grid>
<Grid item>
<Typography variant="body1">Due Date (Optional)</Typography>
Expand Down
32 changes: 30 additions & 2 deletions app/javascript/components/ActionItemForm/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -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 };
47 changes: 30 additions & 17 deletions app/javascript/components/ActionItemModal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -101,7 +109,6 @@ class ActionItemModal extends React.Component {
</Grid>
);
});

return (
<ThemeProvider theme={theme}>
<Dialog
Expand Down Expand Up @@ -161,20 +168,26 @@ 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}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we want to make this backwards compatible as well? if so, can do the ternary here too

<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',
]}
/>
</MuiThemeProvider>
</DialogContent>
<DialogContent className={classes.dialogContentStyle}>
<DialogContentText className={classes.dialogContentTextStyle}>
Expand Down
32 changes: 30 additions & 2 deletions app/javascript/components/ActionItemModal/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
const styles = theme => ({
import { createMuiTheme } from '@material-ui/core/styles';
import theme from 'utils/theme';

const styles = () => ({
overrides: {
MuiDialogContent: {
root: {
Expand Down Expand Up @@ -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 };
2 changes: 1 addition & 1 deletion app/javascript/components/ActionItemParticipant/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ function ActionItemParticipant({
container
direction="row"
alignItems="center"
justifyContent="flex-start"
justifycontent="flex-start"
zeroMinWidth
style={{ width: '80%' }}
>
Expand Down
9 changes: 4 additions & 5 deletions app/javascript/components/ActionItemSearchParticipants/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */}
Expand All @@ -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
Expand Down
5 changes: 2 additions & 3 deletions app/javascript/components/EnhancedTable/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ function EnhancedTableHead(props) {
<TableCell
key={headCell.id}
align="left"
pointer-events={headCell.sortable}
sortDirection={orderBy === headCell.id ? order : false}
>
{headCell.sortable ? (
Expand Down Expand Up @@ -124,7 +123,7 @@ function EnhancedTable(props) {
<Table
className={classes.table}
aria-labelledby="tableTitle"
size="large"
size="medium"
aria-label="enhanced table"
>
<EnhancedTableHead
Expand Down Expand Up @@ -180,7 +179,7 @@ EnhancedTable.propTypes = {
headCells: PropTypes.array.isRequired,
classes: PropTypes.object.isRequired,
pageHandler: PropTypes.func.isRequired,
page: PropTypes.object.isRequired,
page: PropTypes.number.isRequired,
type: PropTypes.string,
};

Expand Down
2 changes: 1 addition & 1 deletion app/javascript/components/LoadModal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ function LoadModal({
<Grid item>
<DialogContent>
<DialogContentText id="alert-dialog-description">
<Typography className={classes.textStyle}>{titleText}</Typography>
{titleText}
</DialogContentText>
</DialogContent>
</Grid>
Expand Down
Loading