Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS

2023-12-05T02:13:39Z

Sswattam: /* Important Links */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ 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==

<strong>Program 3:</strong>
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:

#<strong>Create a UI Page to edit an assignment's Due Date:</strong>
#*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:
#<strong>Remove the "Number of review rounds" input tab.</strong>
#<strong>Align the "Timezone" field in the same column as the checkboxes.</strong>
#<strong>Remove the "Show/Hide Date Updater" button.</strong>
#<strong>Remove the "Use Date Updater" column from the table.</strong>
#<strong>Change the "Apply late policy" field to say, ~ "Use the late policy for this assignment".</strong>
#<strong>Add a space between "Due date reminder" and "(hrs.)".</strong>

<strong>Program 4:</strong>
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:

#<strong>Update the UI Page to edit an assignment's Due Date:</strong>
#*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 [https://github.com/sourabh1204/reimplementation-front-end/tree/main/src/pages/DueDate 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:
<pre>
<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>
</pre>
*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:
<pre>
<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>
</pre>
*The CSS implemented to enhance the front-end is shown below:
<pre>
.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;
}
</pre>
*The dummy data included for the project is represented as below:
<pre>
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',
};
</pre>
== 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:
[[File:DuedateOlderPage.png|990px]]
*Program 3 - Updated page to edit assignment's due dates:
[[File:Duedate_page.png|990px]]
*Program 4 - Enhanced page to edit assignment's due dates:
[[File:UpdatedDueDatePage.png|990px]]

==Team==
=====Mentor=====
* [mailto:kbhanda3@ncsu.edu Kartiki Bhandakkar]

=====Members=====
* [mailto:sswattam@ncsu.edu Sourabh Wattamwar]
* [mailto:nshah28@ncsu.edu Nirav Shah]
* [mailto:msoni@ncsu.edu Mohit Soni]

==Important Links==
*[https://github.com/sourabh1204/reimplementation-front-end GitHub Repository]
*[https://github.com/expertiza/reimplementation-front-end/pull/16 Pull Request]
*[https://www.youtube.com/watch?v=O7JdNt1WqFc Demo Video]
*[https://docs.google.com/document/d/1dXwTNHR26eou6EJZkME8k8FhlpxCf_roMmWzclca8bA/edit?usp=sharing Project Instructions]

CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS

2023-12-03T23:15:41Z

Sswattam:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ 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==

<strong>Program 3:</strong>
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:

#<strong>Create a UI Page to edit an assignment's Due Date:</strong>
#*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:
#<strong>Remove the "Number of review rounds" input tab.</strong>
#<strong>Align the "Timezone" field in the same column as the checkboxes.</strong>
#<strong>Remove the "Show/Hide Date Updater" button.</strong>
#<strong>Remove the "Use Date Updater" column from the table.</strong>
#<strong>Change the "Apply late policy" field to say, ~ "Use the late policy for this assignment".</strong>
#<strong>Add a space between "Due date reminder" and "(hrs.)".</strong>

<strong>Program 4:</strong>
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:

#<strong>Update the UI Page to edit an assignment's Due Date:</strong>
#*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 [https://github.com/sourabh1204/reimplementation-front-end/tree/main/src/pages/DueDate 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:
<pre>
<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>
</pre>
*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:
<pre>
<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>
</pre>
*The CSS implemented to enhance the front-end is shown below:
<pre>
.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;
}
</pre>
*The dummy data included for the project is represented as below:
<pre>
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',
};
</pre>
== 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:
[[File:DuedateOlderPage.png|990px]]
*Program 3 - Updated page to edit assignment's due dates:
[[File:Duedate_page.png|990px]]
*Program 4 - Enhanced page to edit assignment's due dates:
[[File:UpdatedDueDatePage.png|990px]]

==Team==
=====Mentor=====
* [mailto:kbhanda3@ncsu.edu Kartiki Bhandakkar]

=====Members=====
* [mailto:sswattam@ncsu.edu Sourabh Wattamwar]
* [mailto:nshah28@ncsu.edu Nirav Shah]
* [mailto:msoni@ncsu.edu Mohit Soni]

==Important Links==
*[https://github.com/sourabh1204/reimplementation-front-end GitHub Repository]
*[https://github.com/expertiza/reimplementation-front-end/pull/16 Pull Request]
*[Demo Video]
*[https://docs.google.com/document/d/1dXwTNHR26eou6EJZkME8k8FhlpxCf_roMmWzclca8bA/edit?usp=sharing Project Instructions]

CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS

2023-12-03T22:48:59Z

Sswattam: /* Implementation */

CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS

2023-12-03T22:45:04Z

Sswattam:

CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS

2023-12-03T22:34:53Z

Sswattam: /* Results (Screenshots) */

CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS

2023-12-03T22:33:22Z

Sswattam: /* Test Plan */

CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS

2023-12-03T22:28:57Z

Sswattam: /* Files added / modified */

CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS

2023-11-16T02:46:27Z

Sswattam: /* Results (Screenshots) */

File:UpdatedDueDatePage.png

2023-11-16T02:45:31Z

Sswattam:

CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS

2023-11-16T02:42:23Z

Sswattam: /* Results (Screenshots) */

File:UpdatedDueDatePage.jpeg

2023-11-16T02:41:13Z

Sswattam:

File:Updated Due Date Page.jpeg

2023-11-16T02:35:57Z

Sswattam:

CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS

2023-11-16T02:35:21Z

Sswattam:

CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS

2023-10-30T23:35:42Z

Sswattam:

File:Duedate page.png

2023-10-30T23:33:45Z

Sswattam:

File:Duedate.png

2023-10-30T23:33:11Z

Sswattam: Sswattam uploaded a new version of File:Duedate.png

File:Duedate.png

2023-10-30T23:32:40Z

Sswattam: Sswattam uploaded a new version of File:Duedate.png

CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS

2023-10-30T23:31:14Z

Sswattam: Created page with "==Expertiza== [http://expertiza.ncsu.edu/ Expertiza] is a [http://rubyonrails.org/ Ruby on Rails] based open source project. Instructors have the ability to add new projects,..."