SKIL-529

FrontEndReact/src/View/Admin/View/ViewDashboard/Notifications.js

@@ -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;

FrontEndReact/src/View/Components/SendMessageModal.js

@@ -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>
+    );
+}

FrontEndReact/src/View/Navbar/AppState.js

@@ -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 {
@@ -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}
                         />
@@ -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>
         )
     }