Skip to content

Commit

Permalink
Merge pull request #798 from Lunatic-Labs/SKIL-529
Browse files Browse the repository at this point in the history
SKIL-529
  • Loading branch information
aparriaran authored Dec 3, 2024
2 parents 2e88cc9 + 4229664 commit 6953ccb
Show file tree
Hide file tree
Showing 3 changed files with 254 additions and 16 deletions.
125 changes: 125 additions & 0 deletions FrontEndReact/src/View/Admin/View/ViewDashboard/Notifications.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";
import "../../../../SBStyles.css";
import { Box, Typography } from "@mui/material";
import CustomButton from "../../../Student/View/Components/CustomButton.js";
import SendMessageModal from '../../../Components/SendMessageModal.js';
import CustomDataTable from "../../../Components/CustomDataTable.js";

class ViewNotification extends Component {
constructor(props) {
super(props);

this.state = {
errorMessage: null,
isLoaded: null,
showDialog: false,
emailSubject: '',
emailMessage: '',
notificationSent: false,

errors: {
emailSubject: '',
emailMessage: '',
}
};
}

handleChange = (e) => {
const { id, value } = e.target;

this.setState({
[id]: value,
errors: {
...this.state.errors,
[id]: value.trim() === '' ? `${id.charAt(0).toUpperCase() + id.slice(1)} cannot be empty` : '',
},
});
};

handleDialog = () => {
this.setState({
showDialog: this.state.showDialog === false ? true : false,
})
}

handleSendNotification = () => {
var emailSubject = this.state.emailSubject;

var emailMessage = this.state.emailMessage;

if (emailSubject.trim() === '' && emailMessage.trim() === '') {
this.setState({
errors: {
emailSubject: 'Subject cannot be empty',
emailMessage: 'Message cannot be empty',
},
});

return;
}

if (emailMessage.trim() === '') {
this.setState({
errors: {
emailMessage: 'Message cannot be empty',
},
});

return;
}


if (emailSubject.trim() === '') {
this.setState({
errors: {
emailSubject: 'Subject cannot be empty',
},
});

return;
}

};

render() {
var navbar = this.props.navbar;

var state = navbar.state;

var notificationSent = state.notificationSent;

return (
<Box sx={{display:"flex", flexDirection:"column", gap: "20px", marginTop:"20px"}}>
<Box className="subcontent-spacing">
<Typography sx={{fontWeight:'700'}} variant="h5" aria-label="viewNotificationsTitle"> View Notifications</Typography>
<Box>
<SendMessageModal
show={this.state.showDialog}
handleDialog={this.handleDialog}
sendNotification={this.handleSendNotification}
handleChange={this.handleChange}
emailSubject={this.state.emailSubject}
emailMessage={this.state.emailMessage}
error={this.state.errors}
/>

<CustomButton
label="Send Message"
onClick={this.handleDialog}
isOutlined={false}
disabled={notificationSent}
aria-label="SendMessageButton"
/>
</Box>
</Box>
<Box className="table-spacing">
<CustomDataTable
/>
</Box>
</Box>
);
}
}

export default ViewNotification;
86 changes: 86 additions & 0 deletions FrontEndReact/src/View/Components/SendMessageModal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import React from "react";
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import { TextField } from "@mui/material";
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';

export default function SendMessageModal ( props ) {
return (
<React.Fragment>
<Dialog
fullScreen={false}
open={props.show}
aria-labelledby="responsive-dialog-title"
>
<DialogTitle id="responsive-dialog-title">
{"Send Message to Admins"}
</DialogTitle>

<DialogContent>
<DialogContentText>
Use this form to send a message to all admin users. This notification will be delivered to their registered email addresses.
</DialogContentText>
</DialogContent>

<DialogContent>
<TextField
id="emailSubject"
name="emailSubject"
variant='outlined'
label="Add Subject"
value={props.emailSubject}
error={!!props.error.emailSubject}
helperText={props.error.emailSubject}
onChange={props.handleChange}
required
fullWidth
sx={{ mb: 2 }}
aria-label="sendNotificationSubjectInput"
/>
</DialogContent>

<DialogContent>
<TextField
id="emailMessage"
name="emailMessage"
variant='outlined'
label="Add Message"
value={props.emailMessage}
error={!!props.error.emailMessage}
helperText={props.error.emailMessage}
onChange={props.handleChange}
required
multiline
fullWidth
minRows={3}
maxRows={8}
sx={{ mb: 2 }}
aria-label="sendNotificationMessageInput"
/>
</DialogContent>

<DialogActions>
<Button autoFocus onClick={props.handleDialog} aria-label="addMessagePromptCancelButton">
Cancel
</Button>
{/* <Button variant="contained" autoFocus onClick={props.sendNotification} aria-label="addMessagePromptSendNotificationButton">
Send Message
</Button> */}
<Button
variant="contained"
onClick={() => {
props.sendNotification();
props.handleDialog();
}}
aria-label="addMessagePromptSendNotificationButton"
>
Send Message
</Button>
</DialogActions>
</Dialog>
</React.Fragment>
);
}
59 changes: 43 additions & 16 deletions FrontEndReact/src/View/Navbar/AppState.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ import StudentNavigation from '../Components/StudentNavigation.js';
import ReportingDashboard from '../Admin/View/Reporting/ReportingDashboard.js';
import AdminAddCustomRubric from '../Admin/Add/AddCustomRubric/AdminAddCustomRubric.js';
import AdminViewCustomRubrics from '../Admin/View/ViewCustomRubrics/AdminViewCustomRubrics.js';
import UserAccount from './UserAccount.js'
import UserAccount from './UserAccount.js';
import ViewNotification from '../Admin/View/ViewDashboard/Notifications.js';


class AppState extends Component {
Expand Down Expand Up @@ -468,22 +469,37 @@ class AppState extends Component {
<Typography aria-label="superAdminTitle" sx={{fontWeight:'700'}} variant="h5">
Users
</Typography>

<Button
className="primary-color"
variant='contained'
onClick={() => {
this.setState({
activeTab: "AddUser",
user: null,
addUser: true
});
}}
>
Add User
</Button>
<Box>
<div style={{display:"flex", gap:"20px"}}>
<Button
className="primary-color"
variant='contained'
onClick={() => {
this.setState({
activeTab: "AddUser",
user: null,
addUser: true
});
}}
>
Add User
</Button>
<Button
className="primary-color"
variant='contained'
onClick={() => {
this.setState({
activeTab: "ViewNotification",
user: null,
addUser: true
});
}}
>
View Notifications
</Button>
</div>
</Box>
</div>

<AdminViewUsers
navbar={this}
/>
Expand Down Expand Up @@ -834,6 +850,17 @@ class AppState extends Component {
/>
</Box>
}
{this.state.activeTab==="ViewNotification" &&
<Box className="page-spacing">
<BackButtonResource
navbar={this}
tabSelected={"User"}
/>
<ViewNotification
navbar={this}
/>
</Box>
}
</Box>
)
}
Expand Down

0 comments on commit 6953ccb

Please sign in to comment.