CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS
Expertiza
Expertiza is a Ruby on Rails based open source project. Instructors have the ability to add new projects, assignments, etc., as well as edit existing ones. Later on, they can view student submissions and grade them. Students can also use Expertiza to organize into teams to work on different projects and assignments and submit their work. They can also review other students' submissions.
Problem Statement
Program 3: The task involves creating a page to edit an assignment's Due Date in ReactJS. A Due Dates page will display all the assignments with their corresponding due dates. It contains a table which displays data regarding an assignment such as - Deadline type, Date & time, Submission and Review Allowed, Reminders (hrs.)
Tasks that were accomplished:
- Create a UI Page to edit an assignment's Due Date:
- Design a user-friendly page that lists all the assignments with their corresponding due dates.
- Implement the necessary React components for displaying the due dates page.
Implemented below updates which were required to be done from previous version:
- Remove the "Number of review rounds" input tab.
- Align the "Timezone" field in the same column as the checkboxes.
- Remove the "Show/Hide Date Updater" button.
- Remove the "Use Date Updater" column from the table.
- Change the "Apply late policy" field to say, ~ "Use the late policy for this assignment".
- Add a space between "Due date reminder" and "(hrs.)".
Program 4: The task involves updating front-end of the page to edit an assignment's Due Date in ReactJS. A Due Dates page will display all the assignments with their corresponding due dates. It contains a table which displays data regarding an assignment such as - Deadline type, Date & time, Submission and Review Allowed, Reminders (hrs.) - Include dummy data.
Tasks that were accomplished:
- Update the UI Page to edit an assignment's Due Date:
- Included dummy data
- Enhanced the front-end of the page
Files added / modified
- reimplementation-front-end/src/App.tsx
- reimplementation-front-end/src/pages/DueDate/dueDate.tsx
- reimplementation-front-end/src/pages/DueDate/DueDate.css
Implementation
- The current implementation can be found here
- Tasks such as aligning the "Timezone" field in the same column as the checkboxes, removing the "Number of review rounds" input tab and "Show/Hide Date Updater" button; Has been implemented in below code snippet:
<div className="due-date-container">
<div className="checkbox-section">
<div>
<label>Timezone:</label>
<span>Timezone Value</span>
</div>
<div className="checkbox-item">
<input
type="checkbox"
checked={useTeamFormationDeadline}
onChange={(e) => setUseTeamFormationDeadline(e.target.checked)}
/>
Use team formation deadline
</div>
<div className="checkbox-item">
<input
type="checkbox"
checked={useMetaReviewDeadline}
onChange={(e) => setUseMetaReviewDeadline(e.target.checked)}
/>
Use meta-review deadline
</div>
</div>
</div>
- Changes related to "Late Policy of the assignment"; We have included code segment to add as many options for the dropdown as required. This has been implemented as below:
<div className="late-policy-section">
<input type="checkbox" className="late-policy-checkbox" />
Use the late policy for this assignment
<select>
<option>Random Dropdown Option 1</option>
<option>Random Dropdown Option 2</option>
{/* Add more options as needed */}
</select>
<a href="#" className="new-late-policy-link">New Late Policy</a>
</div>
- The CSS implemented to enhance the front-end is shown below:
.due-date-container {
padding: 20px;
font-family: Arial, sans-serif;
}
.checkbox-section {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.checkbox-item {
display: flex;
align-items: center; /* Ensures vertical alignment between text and checkbox */
margin-bottom: 5px;
}
.checkbox-item input[type="checkbox"] {
margin-right: 10px;
}
.deadline-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.deadline-table th,
.deadline-table td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
.deadline-table th {
background-color: #f2f2f2;
}
.late-policy-section {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.late-policy-checkbox {
margin-right: 10px;
}
.late-policy-section select {
margin-left: 10px;
margin-right: 10px;
}
.new-late-policy-link {
margin-left: 10px;
text-decoration: none;
color: #007BFF;
cursor: pointer;
}
.new-late-policy-link:hover {
text-decoration: underline;
}
.buttons-section {
display: flex;
justify-content: flex-end;
}
.save-btn {
background-color: #007BFF;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
margin-right: 10px;
transition: background-color 0.3s;
}
.save-btn:hover {
background-color: #0056b3;
}
.back-btn {
background-color: #f2f2f2;
padding: 10px 20px;
border: 1px solid #ddd;
cursor: pointer;
transition: background-color 0.3s;
}
.back-btn:hover {
background-color: #ddd;
}
- The dummy data included for the project is represented as below:
const staticRowData = {
deadlineType: 'Round 1: Submission',
dateTime: '12/01/2023, 11:59 PM', // Replace with an appropriate date and time
submissionAllowed: 'Yes',
reviewAllowed: 'Yes',
teammateReviewAllowed: 'Yes',
metaReviewAllowed: 'Yes',
reminderHours: '1',
};
const staticRowData2 = {
deadlineType: 'Round 1: Review',
dateTime: '12/05/2023, 11:59 PM',
submissionAllowed: 'Yes',
reviewAllowed: 'Yes',
teammateReviewAllowed: 'No',
metaReviewAllowed: 'No',
reminderHours: '2',
};
Test Plan
- The frontend has been implemented according to requirements, with no mandated automated test cases. Manual testing is performed, involving human interaction to validate functionality. This approach emphasizes thorough testing through user actions and scenarios.
Results (Screenshots)
- Below is the image of the older version for comparison:
- Program 3 - Updated page to edit assignment's due dates:
- Program 4 - Enhanced page to edit assignment's due dates:
