Expertiza_Wiki - User contributions [en]

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-18T02:53:37Z

Sphurthy: /* UI Mockups */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-18T02:53:26Z

Sphurthy: /* Implementation */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-18T02:53:17Z

Sphurthy: /* UI Example */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-18T02:53:03Z

Sphurthy: /* UI Mockups */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T02:31:27Z

Sphurthy: /* 6.1 Manual UI Testing */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T02:30:12Z

Sphurthy: /* Important Links */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:53:30Z

Sphurthy: /* Improved User Search and Sorting */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:53:12Z

Sphurthy: /* Enhanced User Actions */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:52:41Z

Sphurthy: /* Advanced Filtering Options */

File:3 4 1.png

2024-11-12T00:49:38Z

Sphurthy:

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:49:24Z

Sphurthy: /* Sequence Diagram for Enhanced User Actions */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:48:09Z

Sphurthy: /* UI Enhancements */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:41:34Z

Sphurthy: /* Sequence Diagram for Enhanced User Actions */

File:3 3 1.png

2024-11-12T00:40:47Z

Sphurthy:

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:39:54Z

Sphurthy: /* Sequence Diagram for Filtering Options */

File:3 2 1.png

2024-11-12T00:39:06Z

Sphurthy:

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:38:18Z

Sphurthy: /* UI Enhancements */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:38:09Z

Sphurthy: /* UI Enhancements */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:37:57Z

Sphurthy: /* UI Enhancements */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:37:46Z

Sphurthy: /* UI Enhancements */

File:3 1 2.png

2024-11-12T00:36:17Z

Sphurthy:

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:36:04Z

Sphurthy: /* UI Enhancements */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:34:44Z

Sphurthy: /* Sequence Diagram for Layout Change */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:34:23Z

Sphurthy: /* Sequence Diagram for Layout Change */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:33:22Z

Sphurthy: /* Sequence Diagram for Layout Change */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:32:04Z

Sphurthy: /* Sequence Diagram for Layout Change */

File:3 1 1.png

2024-11-12T00:31:46Z

Sphurthy:

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:30:52Z

Sphurthy: /* Sequence Diagram for Layout Change */

File:3 1.png

2024-11-12T00:30:01Z

Sphurthy: Sphurthy uploaded a new version of File:3 1.png

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:24:41Z

Sphurthy: /* Project Goals */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:24:09Z

Sphurthy: /* Members */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:23:30Z

Sphurthy: /* Test Plan */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:23:08Z

Sphurthy: /* Design Patterns and Principles */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:22:41Z

Sphurthy: /* Files created/modified */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:21:55Z

Sphurthy: /* Components */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:19:13Z

Sphurthy: /* Database */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:17:45Z

Sphurthy: /* Proposed Solution */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:10:43Z

Sphurthy: /* Streamlined Layout and Spacing */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:09:59Z

Sphurthy: /* Sequence Diagram for Layout Change */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:09:09Z

Sphurthy: /* Streamlined Layout and Spacing */

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:08:20Z

Sphurthy: /* Design */

== Introduction ==
The Assignment Participants Management UI in Expertiza is a tool used by instructors and administrators to manage participants in assignments. Currently, this interface is cluttered, with dense information and limited filtering options, making it challenging to quickly locate, filter, or modify participant data. The current UI has issues with readability, confusing labels, and lacks efficient bulk action capabilities, which leads to repetitive tasks and hampers productivity.

==Project Goals==
This project aims to redesign and improve the Assignment Participants Management UI by creating a cleaner, more streamlined, and user-friendly interface. The key objectives include:
*Enhancing readability and usability by restructuring the layout and adding more intuitive spacing.
*Extending functionality with advanced search and filtering options to allow multi-parameter searches, enabling instructors to locate specific participants more efficiently.
*Introducing bulk actions to minimize repetitive tasks and improve productivity.
*Improving visual hierarchy with icons, badges, and role-based indicators to make information more accessible at a glance.
*Ensuring responsiveness so that the interface adapts well across different screen sizes and devices.

== Problem Statement==

===Issues with Current UI===
*Cluttered Layout: The current UI is dense, with little spacing between elements, making it hard to read and locate information.
*Limited Filtering Options: Filtering capabilities are minimal, making it challenging to find participants based on specific criteria.
*Inefficient User Actions: Actions like removing or updating participants must be done individually, resulting in repetitive tasks for instructors.
*Confusing Labels: Certain labels (like "Handle") are unclear, leading to usability issues, creating confusion around functionality.
*Lack of Responsive Design: The current design does not adapt well to different screen sizes, reducing usability on smaller devices.

This project will address these issues with a comprehensive redesign focused on improving the user experience for instructors and administrators managing assignments in Expertiza.

== Proposed Solution==
===Streamlined Layout and Spacing===

*Column Organization: Group related columns (e.g., "Review," "Submission") under common headers to reduce visual clutter.
*Improved Spacing: Add padding and spacing between rows and columns to improve readability.
*Collapsible Sections: Add collapsible sections for rarely-used columns, allowing users to focus on essential information.

====Sequence Diagram for Layout Change====

Our updated UI replicates the functionality of the original page, now leveraging TypeScript's reliability alongside React's dynamic rendering. We prioritized building a responsive, accessible interface that aligns with modern design principles. We have also included certain features to make it easy for the student to manage their assignments.<br><br>
<b> Implementation Overview </b>

[[File: New_Implementation_Assignments_Page.jpg | 1000px ]]<br>

<b>1. Fetch and Display Data:</b> The UI is designed with future live data integration in mind. Currently, we use structured placeholder data to mimic backend interactions.

<i>Implementation Steps</i>
*Defined TypeScript interfaces to model assignment data structures.
*Created mock data to simulate API responses for development.

<b>2. React Component Design:</b> We developed modular React components like Header, TaskList, and TaskItem to improve code reusability and maintainability.

<b> Legend </b>

We have included a legend on the right of the student task list, to improve clarity, allowing users to understand column meanings at a glance. This approach is more user-friendly than requiring users to hover over a small info icon, and it provides a cleaner, more streamlined interface.

<i>Implementation Steps</i>
==== StudentTasksBox component ====
*Implementation of the StudentTasksBox component - [https://github.com/aditikilledar/reimplementation-front-end/blob/student-tasks-ui-f24/src/pages/StudentTasks/StudentTasksBox.tsx]<br>

<syntaxhighlight>
const StudentTasksBox: React.FC<StudentTasksBoxProps> = ({ participantTasks, revisions, studentsTeamedWith }) => {
// Calculate total number of students teamed up with by iterating over each semester
let totalStudents = 0;
let allStudents: string[] = [];
for (const semester in studentsTeamedWith) {
// Add the number of students in each semester to the total count
totalStudents += studentsTeamedWith[semester].length;
allStudents = allStudents.concat(studentsTeamedWith[semester]);
}

// Calculate the number of revisions that are still pending (i.e., due date is in the future)
const pendingRevisions = revisions.filter(revision => getDaysLeft(revision.dueDate) > 0);

const dueTasks = participantTasks.filter(task => getDaysLeft(task.stageDeadline) > 0);

// Group tasks by course
const tasksByCourse: { [key: string]: typeof participantTasks } = {};

dueTasks.forEach(task => {
const courseName = task.course;

if (!tasksByCourse[courseName]) {
tasksByCourse[courseName] = [];
}

tasksByCourse[courseName].push(task);
});

return (
<div className={styles.container}>
<h2>Task Summary</h2>
<div className={styles.infoBox}>
<h5>Due:</h5>
{Object.entries(tasksByCourse).map(([course, tasks]) => (
<div key={course}>
<p>{course}</p>
<ul>
{tasks.map(task => (
<li key={task.id}>
{task.assignment} - Due: {task.stageDeadline}
</li>
))}
</ul>
</div>
))}
</div>

<div className={styles.infoBox}>
<h5>Revisions:</h5>
<ul>
{revisions.map((revision, index) => (
<li key={index}>{revision.name}</li>
))}
</ul>
</div>

<div className={styles.infoBox}>
<div className={styles.teamedStudents}>
<h5>Total Students Teamed With: {totalStudents}</h5>
<ul>
{allStudents.map((student, index) => (
<li key={index}>{student}</li>
))}
</ul>
</div>
</div>
</div>
);

};
</syntaxhighlight><br>

<b><i>New UI for StudentTasksBox Component</b></i> <br>

[[File: StudentTasksBox_Task Summary.jpg | 200px]]
[[File: StudentTasksBox_Revisions and Students Teamed With.jpg | 200px]]<br><br>

==== StudentTaskHome component ====
*Implementation of the StudentTaskHome component that handles the list of assignments along with filters (dropdowns). [https://github.com/aditikilledar/reimplementation-front-end/blob/student-tasks-ui-f24/src/pages/StudentTasks/StudentTaskHome.tsx]<br>
<syntaxhighlight>
const StudentTasksHome: React.FC = () => {
// init state and hooks
const currUserId = testData.current_user_id;
const dispatch = useDispatch();
const navigate = useNavigate();
const auth = useSelector((state: RootState) => state.authentication)

type StudentsTeamedWith = {
[semester: string]: string[];
};

// states to hold tasks
const taskRevisions = testData.revisions;
const participantTasks = testData.participantTasks;
console.log("participantTasks", participantTasks)

const [tasks, setTasks] = useState<Task[]>([]);
const dueTasks = testData.dueTasks;
const studentsTeamedWith: StudentsTeamedWith = testData.studentsTeamedWith;
const [filteredTasks, setFilteredTasks] = useState<Task[]>([]);

const [assignmentFilter, setAssignmentFilter] = useState('');
const [courseFilter, setCourseFilter] = useState('');
const [topicFilter, setTopicFilter] = useState('');
const [currentstageFilter, setCurrentStageFilter] = useState('');

function togglePublishingRights(id: number): void {
throw new Error('Function not implemented.');
}

let totalStudents = 0;
let allStudents: string[] = [];
for (const semester in studentsTeamedWith) {
// Add the number of students in each semester to the total count
totalStudents += studentsTeamedWith[semester].length;
allStudents = allStudents.concat(studentsTeamedWith[semester]);
}

useEffect(() => {
// Map the data from participationTasks to the tasks state
const mappedTasks = participantTasks.map(task => ({
id: task.id,
assignment: task.assignment,
course: task.course,
topic: task.topic,
currentStage: task.current_stage, // Adjust to match your data's structure
reviewGrade: task.review_grade, // Can be a string or an object
badges: task.badges, // Keep as is since it can be string or boolean
stageDeadline: task.stage_deadline, // Adjust to match your data's structure
publishingRights: task.publishing_rights, // Boolean type
}));

setTasks(mappedTasks);
setFilteredTasks(mappedTasks);
}, [participantTasks]);

console.log("after use effect:", participantTasks)

useEffect(() => {
const filtered = tasks.filter((task) =>
(assignmentFilter ? task.assignment === assignmentFilter : true) &&
(courseFilter ? task.course === courseFilter : true) &&
(topicFilter ? task.topic === topicFilter : true) &&
(currentstageFilter ? task.topic == currentstageFilter : true)
);
setFilteredTasks(filtered);
}, [assignmentFilter, courseFilter, topicFilter, currentstageFilter, tasks]);
</syntaxhighlight>

<b><i>New UI for StudentTaskHome Component</b></i> <br>
[[File: StudentTaskHome.jpg | 1000px ]]<br>

<b>3. Table Filtering:</b> The columns in the table are provided with filters enabling the user to search for what they want. The drop downs are provided for the columns: assignments, course, topic and current stage.

<i>Implementation Steps</i>
* Added the feature for filtering out tasks in the table by including the filteredtasks component in the StudentTasksHome.tsx file.
* The corresponding formatting for the same included in the StudentTasks.module.css file.

<b>4. Error and Edge Case Handling:</b> Comprehensive error handling and edge case handling strategies were implemented to provide informative feedback for failed requests or empty datasets.

<b>5. Responsive and Accessible Design:</b> The page implemented is fully responsive on all devices (desktop, tablet, mobile) and meets accessibility standards, including ARIA roles, ensuring a seamless and inclusive experience for all students, regardless of their device or abilities.

<b>6. Testing and Validation:</b> The testing phase of the project involves a manual testing process to ensure the student task view list functions reliably.

<i>Implementation Steps</i>
*Carrying out a detailed manual review of each task item to confirm they display accurate information, ensuring visual indicators match the design specifications.
*Simulating user interactions manually to verify that component links and buttons function correctly, confirming that all elements respond as expected.
*Evaluating visual feedback elements like hover and active states to ensure they align with the project's usability standards.

These steps are intended to confirm the interface's cohesive functionality and reliability by interacting with the system from an end-user perspective. This hands-on approach enables quick correction of any inconsistencies and improvements to the user experience.<br><br><br>
<b>Login page for accessing the system</b><br>
[[File: Login_Page_Student_tasks_UI.jpg | 1000px ]]<br>
<b>Navigate to the "Assignments" tab to view list of assignments</b><br>
[[File: New_Implementation_Assignments_Page.jpg | 1000px ]]<br>

<b> Major changes made: </b> <br>

1. We have included a legend to improve clarity, allowing users to understand column meanings at a glance. This approach is more user-friendly than requiring users to hover over a small info icon, and it provides a cleaner, more streamlined interface.

2. We have split the task box into different parts making it easier for the user to view the Student Tasks Page.

3. The Table containing the list of assignments have been provided with dropdowns for ease of access.

==Database==
We prepared the database by cloning and configuring the reimplementation backend, adhering to the guidelines provided in the Backend Setup Instructions. We will be creating dummy assignment data for testing purposes.

<b> Sample of the Dummy data created </b> <br>
[[File: Dummy_data_Student_Tasks_UI.jpg | 500px]]

==Components==
*<b>App.tsx :</b> The `App.tsx` file acts as the primary entry point for a React application, setting up routing, integrating various pages and components, and managing global states or contexts to enable seamless navigation and functionality across the app. We’ll be adding a protected route for "StudentTaskHome" to direct users with the STUDENT role to the `StudentTasksHome` component.

*<b>StudentTasksBox.tsx :</b> The StudentTaskbox.tsx file will display a sidebar component that emphasizes upcoming tasks, revisions, and team collaborations.

*<b>StudentTaskHome.tsx :</b> The StudentTaskHome.tsx file contains the main panel, presenting a comprehensive list of assignments with course information, topics, current stages, and other relevant details. This contains the dropdowns implemented in the main panel (table) for filtering based on the user's needs.

==Files created/modified==
* src/App.tsx (Modified) - This file was changed to point to the new implementation of the Student Tasks page.

* src/pages/StudentTasks/StudentTasksHome.tsx (New File) - This file was created to handle the content of task table in the Student Tasks page.

* src/pages/StudentTasks/StudentTaskBox.tsx (New File) - This file was created to handle the content of the yellow task box in the Student Tasks page.

* src/pages/StudentTasks/StudentTasks.module.css (New File) - This file was created to handle the styling of the tasks table.

* src/pages/StudentTasks/StudentTasksBox.module.css (New File) - This file was created to handle the styling of the yellow task box.

* src/pages/StudentTasks/testData.json (New File) - This file was created to store the dummy data for our implementation.

==Design Patterns and Principles==

Design patterns and principles are fundamental concepts that help developers create clean, scalable, and maintainable code. They guide the design of software structures and improve development efficiency, as they provide solutions to common problems and offer a vocabulary for communication within development teams.

<b>1. Open/Closed Principle (OCP):</b> Software entities should be open for extension but closed for modification, allowing new functionality without altering existing code. It ensures modularity and reusability, which aligns with the goal of designing React components for different sections of the Student Task List page. The existing code was just altered by adding additional features.

<b>2. Don't Repeat Yourself (DRY):</b>Avoid duplicating code. When functionality or logic repeats, it's better to refactor it into reusable functions, classes, or modules. The StudentTaskHome and StudentTasksBox components have all the required code and have been refactored to make it reusable.

== Test Plan ==

<b>1. Component Design and Structure:</b> Design and organize React components to effectively support the Student Task List page, ensuring clarity and modularity.

<i>Test Cases:</i>
* Review the modular design of key components (e.g., header, task list, individual task items) for scalability and reusability.
* Check each component for proper structure and verify that all necessary information is displayed as expected.
* Confirm each component renders correctly within the overall page layout.

<b>2. Task List Display:</b> Implement functionality to accurately fetch and display assignments within the task list.

<i>Test Cases:</i>
* Confirm that the task list properly renders each fetched assignment.
* Test for infinite scrolling, if needed, to handle extensive assignment lists smoothly.
* Verify that loading indicators or placeholders appear while data is loading, ensuring user feedback during fetch operations.

<b>3. Filter Assignments:</b> Ensure that the task list filters assignments to show only those relevant to the current user.

<i>Test Cases:</i>
* Confirm the task list is correctly filtered based on the User ID, displaying only applicable assignments for the user.

== Important Links ==
* GitHub repo [https://github.com/aditikilledar/reimplementation-front-end]
* Pull Request: [https://github.com/expertiza/reimplementation-front-end/pull/66]

== Team ==
=====Mentor=====

* Chaitanya Srusti <crsrusti@ncsu.edu>

=====Members=====
* Aditi Killedar <akilled@ncsu.edu>
* Kruthi Rajeshwar <krajesh@ncsu.edu>
* Sphurthy Satish <sphurthy@ncsu.edu>

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:03:25Z

Sphurthy: /* Introduction */

== Introduction ==
The Assignment Participants Management UI in Expertiza is a tool used by instructors and administrators to manage participants in assignments. Currently, this interface is cluttered, with dense information and limited filtering options, making it challenging to quickly locate, filter, or modify participant data. The current UI has issues with readability, confusing labels, and lacks efficient bulk action capabilities, which leads to repetitive tasks and hampers productivity.

==Project Goals==
This project aims to redesign and improve the Assignment Participants Management UI by creating a cleaner, more streamlined, and user-friendly interface. The key objectives include:
*Enhancing readability and usability by restructuring the layout and adding more intuitive spacing.
*Extending functionality with advanced search and filtering options to allow multi-parameter searches, enabling instructors to locate specific participants more efficiently.
*Introducing bulk actions to minimize repetitive tasks and improve productivity.
*Improving visual hierarchy with icons, badges, and role-based indicators to make information more accessible at a glance.
*Ensuring responsiveness so that the interface adapts well across different screen sizes and devices.

== Problem Statement==

===Issues with Current UI===
*Cluttered Layout: The current UI is dense, with little spacing between elements, making it hard to read and locate information.
*Limited Filtering Options: Filtering capabilities are minimal, making it challenging to find participants based on specific criteria.
*Inefficient User Actions: Actions like removing or updating participants must be done individually, resulting in repetitive tasks for instructors.
*Confusing Labels: Certain labels (like "Handle") are unclear, leading to usability issues, creating confusion around functionality.
*Lack of Responsive Design: The current design does not adapt well to different screen sizes, reducing usability on smaller devices.

This project will address these issues with a comprehensive redesign focused on improving the user experience for instructors and administrators managing assignments in Expertiza.

== Design ==
===Current Implementation (Ruby on Rails)===

The existing interface on Expertiza, developed with Ruby on Rails, displays a student's task list with assignments, due dates, and progress indicators.

<b> Current Implementation of Expertiza with Ruby on Rails </b> <br>
[[File:Expertiza_current_implementation.jpg | 1000px]]

===New Implementation (React JS & TypeScript)===

Our updated UI replicates the functionality of the original page, now leveraging TypeScript's reliability alongside React's dynamic rendering. We prioritized building a responsive, accessible interface that aligns with modern design principles. We have also included certain features to make it easy for the student to manage their assignments.<br><br>
<b> Implementation Overview </b>

[[File: New_Implementation_Assignments_Page.jpg | 1000px ]]<br>

<b>1. Fetch and Display Data:</b> The UI is designed with future live data integration in mind. Currently, we use structured placeholder data to mimic backend interactions.

<i>Implementation Steps</i>
*Defined TypeScript interfaces to model assignment data structures.
*Created mock data to simulate API responses for development.

<b>2. React Component Design:</b> We developed modular React components like Header, TaskList, and TaskItem to improve code reusability and maintainability.

<b> Legend </b>

We have included a legend on the right of the student task list, to improve clarity, allowing users to understand column meanings at a glance. This approach is more user-friendly than requiring users to hover over a small info icon, and it provides a cleaner, more streamlined interface.

<i>Implementation Steps</i>
==== StudentTasksBox component ====
*Implementation of the StudentTasksBox component - [https://github.com/aditikilledar/reimplementation-front-end/blob/student-tasks-ui-f24/src/pages/StudentTasks/StudentTasksBox.tsx]<br>

<syntaxhighlight>
const StudentTasksBox: React.FC<StudentTasksBoxProps> = ({ participantTasks, revisions, studentsTeamedWith }) => {
// Calculate total number of students teamed up with by iterating over each semester
let totalStudents = 0;
let allStudents: string[] = [];
for (const semester in studentsTeamedWith) {
// Add the number of students in each semester to the total count
totalStudents += studentsTeamedWith[semester].length;
allStudents = allStudents.concat(studentsTeamedWith[semester]);
}

// Calculate the number of revisions that are still pending (i.e., due date is in the future)
const pendingRevisions = revisions.filter(revision => getDaysLeft(revision.dueDate) > 0);

const dueTasks = participantTasks.filter(task => getDaysLeft(task.stageDeadline) > 0);

// Group tasks by course
const tasksByCourse: { [key: string]: typeof participantTasks } = {};

dueTasks.forEach(task => {
const courseName = task.course;

if (!tasksByCourse[courseName]) {
tasksByCourse[courseName] = [];
}

tasksByCourse[courseName].push(task);
});

return (
<div className={styles.container}>
<h2>Task Summary</h2>
<div className={styles.infoBox}>
<h5>Due:</h5>
{Object.entries(tasksByCourse).map(([course, tasks]) => (
<div key={course}>
<p>{course}</p>
<ul>
{tasks.map(task => (
<li key={task.id}>
{task.assignment} - Due: {task.stageDeadline}
</li>
))}
</ul>
</div>
))}
</div>

<div className={styles.infoBox}>
<h5>Revisions:</h5>
<ul>
{revisions.map((revision, index) => (
<li key={index}>{revision.name}</li>
))}
</ul>
</div>

<div className={styles.infoBox}>
<div className={styles.teamedStudents}>
<h5>Total Students Teamed With: {totalStudents}</h5>
<ul>
{allStudents.map((student, index) => (
<li key={index}>{student}</li>
))}
</ul>
</div>
</div>
</div>
);

};
</syntaxhighlight><br>

<b><i>New UI for StudentTasksBox Component</b></i> <br>

[[File: StudentTasksBox_Task Summary.jpg | 200px]]
[[File: StudentTasksBox_Revisions and Students Teamed With.jpg | 200px]]<br><br>

==== StudentTaskHome component ====
*Implementation of the StudentTaskHome component that handles the list of assignments along with filters (dropdowns). [https://github.com/aditikilledar/reimplementation-front-end/blob/student-tasks-ui-f24/src/pages/StudentTasks/StudentTaskHome.tsx]<br>
<syntaxhighlight>
const StudentTasksHome: React.FC = () => {
// init state and hooks
const currUserId = testData.current_user_id;
const dispatch = useDispatch();
const navigate = useNavigate();
const auth = useSelector((state: RootState) => state.authentication)

type StudentsTeamedWith = {
[semester: string]: string[];
};

// states to hold tasks
const taskRevisions = testData.revisions;
const participantTasks = testData.participantTasks;
console.log("participantTasks", participantTasks)

const [tasks, setTasks] = useState<Task[]>([]);
const dueTasks = testData.dueTasks;
const studentsTeamedWith: StudentsTeamedWith = testData.studentsTeamedWith;
const [filteredTasks, setFilteredTasks] = useState<Task[]>([]);

const [assignmentFilter, setAssignmentFilter] = useState('');
const [courseFilter, setCourseFilter] = useState('');
const [topicFilter, setTopicFilter] = useState('');
const [currentstageFilter, setCurrentStageFilter] = useState('');

function togglePublishingRights(id: number): void {
throw new Error('Function not implemented.');
}

let totalStudents = 0;
let allStudents: string[] = [];
for (const semester in studentsTeamedWith) {
// Add the number of students in each semester to the total count
totalStudents += studentsTeamedWith[semester].length;
allStudents = allStudents.concat(studentsTeamedWith[semester]);
}

useEffect(() => {
// Map the data from participationTasks to the tasks state
const mappedTasks = participantTasks.map(task => ({
id: task.id,
assignment: task.assignment,
course: task.course,
topic: task.topic,
currentStage: task.current_stage, // Adjust to match your data's structure
reviewGrade: task.review_grade, // Can be a string or an object
badges: task.badges, // Keep as is since it can be string or boolean
stageDeadline: task.stage_deadline, // Adjust to match your data's structure
publishingRights: task.publishing_rights, // Boolean type
}));

setTasks(mappedTasks);
setFilteredTasks(mappedTasks);
}, [participantTasks]);

console.log("after use effect:", participantTasks)

useEffect(() => {
const filtered = tasks.filter((task) =>
(assignmentFilter ? task.assignment === assignmentFilter : true) &&
(courseFilter ? task.course === courseFilter : true) &&
(topicFilter ? task.topic === topicFilter : true) &&
(currentstageFilter ? task.topic == currentstageFilter : true)
);
setFilteredTasks(filtered);
}, [assignmentFilter, courseFilter, topicFilter, currentstageFilter, tasks]);
</syntaxhighlight>

<b><i>New UI for StudentTaskHome Component</b></i> <br>
[[File: StudentTaskHome.jpg | 1000px ]]<br>

<b>3. Table Filtering:</b> The columns in the table are provided with filters enabling the user to search for what they want. The drop downs are provided for the columns: assignments, course, topic and current stage.

<i>Implementation Steps</i>
* Added the feature for filtering out tasks in the table by including the filteredtasks component in the StudentTasksHome.tsx file.
* The corresponding formatting for the same included in the StudentTasks.module.css file.

<b>4. Error and Edge Case Handling:</b> Comprehensive error handling and edge case handling strategies were implemented to provide informative feedback for failed requests or empty datasets.

<b>5. Responsive and Accessible Design:</b> The page implemented is fully responsive on all devices (desktop, tablet, mobile) and meets accessibility standards, including ARIA roles, ensuring a seamless and inclusive experience for all students, regardless of their device or abilities.

<b>6. Testing and Validation:</b> The testing phase of the project involves a manual testing process to ensure the student task view list functions reliably.

<i>Implementation Steps</i>
*Carrying out a detailed manual review of each task item to confirm they display accurate information, ensuring visual indicators match the design specifications.
*Simulating user interactions manually to verify that component links and buttons function correctly, confirming that all elements respond as expected.
*Evaluating visual feedback elements like hover and active states to ensure they align with the project's usability standards.

These steps are intended to confirm the interface's cohesive functionality and reliability by interacting with the system from an end-user perspective. This hands-on approach enables quick correction of any inconsistencies and improvements to the user experience.<br><br><br>
<b>Login page for accessing the system</b><br>
[[File: Login_Page_Student_tasks_UI.jpg | 1000px ]]<br>
<b>Navigate to the "Assignments" tab to view list of assignments</b><br>
[[File: New_Implementation_Assignments_Page.jpg | 1000px ]]<br>

<b> Major changes made: </b> <br>

1. We have included a legend to improve clarity, allowing users to understand column meanings at a glance. This approach is more user-friendly than requiring users to hover over a small info icon, and it provides a cleaner, more streamlined interface.

2. We have split the task box into different parts making it easier for the user to view the Student Tasks Page.

3. The Table containing the list of assignments have been provided with dropdowns for ease of access.

==Database==
We prepared the database by cloning and configuring the reimplementation backend, adhering to the guidelines provided in the Backend Setup Instructions. We will be creating dummy assignment data for testing purposes.

<b> Sample of the Dummy data created </b> <br>
[[File: Dummy_data_Student_Tasks_UI.jpg | 500px]]

==Components==
*<b>App.tsx :</b> The `App.tsx` file acts as the primary entry point for a React application, setting up routing, integrating various pages and components, and managing global states or contexts to enable seamless navigation and functionality across the app. We’ll be adding a protected route for "StudentTaskHome" to direct users with the STUDENT role to the `StudentTasksHome` component.

*<b>StudentTasksBox.tsx :</b> The StudentTaskbox.tsx file will display a sidebar component that emphasizes upcoming tasks, revisions, and team collaborations.

*<b>StudentTaskHome.tsx :</b> The StudentTaskHome.tsx file contains the main panel, presenting a comprehensive list of assignments with course information, topics, current stages, and other relevant details. This contains the dropdowns implemented in the main panel (table) for filtering based on the user's needs.

==Files created/modified==
* src/App.tsx (Modified) - This file was changed to point to the new implementation of the Student Tasks page.

* src/pages/StudentTasks/StudentTasksHome.tsx (New File) - This file was created to handle the content of task table in the Student Tasks page.

* src/pages/StudentTasks/StudentTaskBox.tsx (New File) - This file was created to handle the content of the yellow task box in the Student Tasks page.

* src/pages/StudentTasks/StudentTasks.module.css (New File) - This file was created to handle the styling of the tasks table.

* src/pages/StudentTasks/StudentTasksBox.module.css (New File) - This file was created to handle the styling of the yellow task box.

* src/pages/StudentTasks/testData.json (New File) - This file was created to store the dummy data for our implementation.

==Design Patterns and Principles==

Design patterns and principles are fundamental concepts that help developers create clean, scalable, and maintainable code. They guide the design of software structures and improve development efficiency, as they provide solutions to common problems and offer a vocabulary for communication within development teams.

<b>1. Open/Closed Principle (OCP):</b> Software entities should be open for extension but closed for modification, allowing new functionality without altering existing code. It ensures modularity and reusability, which aligns with the goal of designing React components for different sections of the Student Task List page. The existing code was just altered by adding additional features.

<b>2. Don't Repeat Yourself (DRY):</b>Avoid duplicating code. When functionality or logic repeats, it's better to refactor it into reusable functions, classes, or modules. The StudentTaskHome and StudentTasksBox components have all the required code and have been refactored to make it reusable.

== Test Plan ==

<b>1. Component Design and Structure:</b> Design and organize React components to effectively support the Student Task List page, ensuring clarity and modularity.

<i>Test Cases:</i>
* Review the modular design of key components (e.g., header, task list, individual task items) for scalability and reusability.
* Check each component for proper structure and verify that all necessary information is displayed as expected.
* Confirm each component renders correctly within the overall page layout.

<b>2. Task List Display:</b> Implement functionality to accurately fetch and display assignments within the task list.

<i>Test Cases:</i>
* Confirm that the task list properly renders each fetched assignment.
* Test for infinite scrolling, if needed, to handle extensive assignment lists smoothly.
* Verify that loading indicators or placeholders appear while data is loading, ensuring user feedback during fetch operations.

<b>3. Filter Assignments:</b> Ensure that the task list filters assignments to show only those relevant to the current user.

<i>Test Cases:</i>
* Confirm the task list is correctly filtered based on the User ID, displaying only applicable assignments for the user.

== Important Links ==
* GitHub repo [https://github.com/aditikilledar/reimplementation-front-end]
* Pull Request: [https://github.com/expertiza/reimplementation-front-end/pull/66]

== Team ==
=====Mentor=====

* Chaitanya Srusti <crsrusti@ncsu.edu>

=====Members=====
* Aditi Killedar <akilled@ncsu.edu>
* Kruthi Rajeshwar <krajesh@ncsu.edu>
* Sphurthy Satish <sphurthy@ncsu.edu>

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-12T00:02:13Z

Sphurthy: /* Project Description */

== Introduction ==
The Assignment Participants Management UI in Expertiza is a tool used by instructors and administrators to manage participants in assignments. Currently, this interface is cluttered, with dense information and limited filtering options, making it challenging to quickly locate, filter, or modify participant data. The current UI has issues with readability, confusing labels, and lacks efficient bulk action capabilities, which leads to repetitive tasks and hampers productivity.

== Problem Statement==

===Issues with Current UI===
*Cluttered Layout: The current UI is dense, with little spacing between elements, making it hard to read and locate information.
*Limited Filtering Options: Filtering capabilities are minimal, making it challenging to find participants based on specific criteria.
*Inefficient User Actions: Actions like removing or updating participants must be done individually, resulting in repetitive tasks for instructors.
*Confusing Labels: Certain labels (like "Handle") are unclear, leading to usability issues, creating confusion around functionality.
*Lack of Responsive Design: The current design does not adapt well to different screen sizes, reducing usability on smaller devices.

This project will address these issues with a comprehensive redesign focused on improving the user experience for instructors and administrators managing assignments in Expertiza.

== Design ==
===Current Implementation (Ruby on Rails)===

The existing interface on Expertiza, developed with Ruby on Rails, displays a student's task list with assignments, due dates, and progress indicators.

<b> Current Implementation of Expertiza with Ruby on Rails </b> <br>
[[File:Expertiza_current_implementation.jpg | 1000px]]

===New Implementation (React JS & TypeScript)===

Our updated UI replicates the functionality of the original page, now leveraging TypeScript's reliability alongside React's dynamic rendering. We prioritized building a responsive, accessible interface that aligns with modern design principles. We have also included certain features to make it easy for the student to manage their assignments.<br><br>
<b> Implementation Overview </b>

[[File: New_Implementation_Assignments_Page.jpg | 1000px ]]<br>

<b>1. Fetch and Display Data:</b> The UI is designed with future live data integration in mind. Currently, we use structured placeholder data to mimic backend interactions.

<i>Implementation Steps</i>
*Defined TypeScript interfaces to model assignment data structures.
*Created mock data to simulate API responses for development.

<b>2. React Component Design:</b> We developed modular React components like Header, TaskList, and TaskItem to improve code reusability and maintainability.

<b> Legend </b>

We have included a legend on the right of the student task list, to improve clarity, allowing users to understand column meanings at a glance. This approach is more user-friendly than requiring users to hover over a small info icon, and it provides a cleaner, more streamlined interface.

<i>Implementation Steps</i>
==== StudentTasksBox component ====
*Implementation of the StudentTasksBox component - [https://github.com/aditikilledar/reimplementation-front-end/blob/student-tasks-ui-f24/src/pages/StudentTasks/StudentTasksBox.tsx]<br>

<syntaxhighlight>
const StudentTasksBox: React.FC<StudentTasksBoxProps> = ({ participantTasks, revisions, studentsTeamedWith }) => {
// Calculate total number of students teamed up with by iterating over each semester
let totalStudents = 0;
let allStudents: string[] = [];
for (const semester in studentsTeamedWith) {
// Add the number of students in each semester to the total count
totalStudents += studentsTeamedWith[semester].length;
allStudents = allStudents.concat(studentsTeamedWith[semester]);
}

// Calculate the number of revisions that are still pending (i.e., due date is in the future)
const pendingRevisions = revisions.filter(revision => getDaysLeft(revision.dueDate) > 0);

const dueTasks = participantTasks.filter(task => getDaysLeft(task.stageDeadline) > 0);

// Group tasks by course
const tasksByCourse: { [key: string]: typeof participantTasks } = {};

dueTasks.forEach(task => {
const courseName = task.course;

if (!tasksByCourse[courseName]) {
tasksByCourse[courseName] = [];
}

tasksByCourse[courseName].push(task);
});

return (
<div className={styles.container}>
<h2>Task Summary</h2>
<div className={styles.infoBox}>
<h5>Due:</h5>
{Object.entries(tasksByCourse).map(([course, tasks]) => (
<div key={course}>
<p>{course}</p>
<ul>
{tasks.map(task => (
<li key={task.id}>
{task.assignment} - Due: {task.stageDeadline}
</li>
))}
</ul>
</div>
))}
</div>

<div className={styles.infoBox}>
<h5>Revisions:</h5>
<ul>
{revisions.map((revision, index) => (
<li key={index}>{revision.name}</li>
))}
</ul>
</div>

<div className={styles.infoBox}>
<div className={styles.teamedStudents}>
<h5>Total Students Teamed With: {totalStudents}</h5>
<ul>
{allStudents.map((student, index) => (
<li key={index}>{student}</li>
))}
</ul>
</div>
</div>
</div>
);

};
</syntaxhighlight><br>

<b><i>New UI for StudentTasksBox Component</b></i> <br>

[[File: StudentTasksBox_Task Summary.jpg | 200px]]
[[File: StudentTasksBox_Revisions and Students Teamed With.jpg | 200px]]<br><br>

==== StudentTaskHome component ====
*Implementation of the StudentTaskHome component that handles the list of assignments along with filters (dropdowns). [https://github.com/aditikilledar/reimplementation-front-end/blob/student-tasks-ui-f24/src/pages/StudentTasks/StudentTaskHome.tsx]<br>
<syntaxhighlight>
const StudentTasksHome: React.FC = () => {
// init state and hooks
const currUserId = testData.current_user_id;
const dispatch = useDispatch();
const navigate = useNavigate();
const auth = useSelector((state: RootState) => state.authentication)

type StudentsTeamedWith = {
[semester: string]: string[];
};

// states to hold tasks
const taskRevisions = testData.revisions;
const participantTasks = testData.participantTasks;
console.log("participantTasks", participantTasks)

const [tasks, setTasks] = useState<Task[]>([]);
const dueTasks = testData.dueTasks;
const studentsTeamedWith: StudentsTeamedWith = testData.studentsTeamedWith;
const [filteredTasks, setFilteredTasks] = useState<Task[]>([]);

const [assignmentFilter, setAssignmentFilter] = useState('');
const [courseFilter, setCourseFilter] = useState('');
const [topicFilter, setTopicFilter] = useState('');
const [currentstageFilter, setCurrentStageFilter] = useState('');

function togglePublishingRights(id: number): void {
throw new Error('Function not implemented.');
}

let totalStudents = 0;
let allStudents: string[] = [];
for (const semester in studentsTeamedWith) {
// Add the number of students in each semester to the total count
totalStudents += studentsTeamedWith[semester].length;
allStudents = allStudents.concat(studentsTeamedWith[semester]);
}

useEffect(() => {
// Map the data from participationTasks to the tasks state
const mappedTasks = participantTasks.map(task => ({
id: task.id,
assignment: task.assignment,
course: task.course,
topic: task.topic,
currentStage: task.current_stage, // Adjust to match your data's structure
reviewGrade: task.review_grade, // Can be a string or an object
badges: task.badges, // Keep as is since it can be string or boolean
stageDeadline: task.stage_deadline, // Adjust to match your data's structure
publishingRights: task.publishing_rights, // Boolean type
}));

setTasks(mappedTasks);
setFilteredTasks(mappedTasks);
}, [participantTasks]);

console.log("after use effect:", participantTasks)

useEffect(() => {
const filtered = tasks.filter((task) =>
(assignmentFilter ? task.assignment === assignmentFilter : true) &&
(courseFilter ? task.course === courseFilter : true) &&
(topicFilter ? task.topic === topicFilter : true) &&
(currentstageFilter ? task.topic == currentstageFilter : true)
);
setFilteredTasks(filtered);
}, [assignmentFilter, courseFilter, topicFilter, currentstageFilter, tasks]);
</syntaxhighlight>

<b><i>New UI for StudentTaskHome Component</b></i> <br>
[[File: StudentTaskHome.jpg | 1000px ]]<br>

<b>3. Table Filtering:</b> The columns in the table are provided with filters enabling the user to search for what they want. The drop downs are provided for the columns: assignments, course, topic and current stage.

<i>Implementation Steps</i>
* Added the feature for filtering out tasks in the table by including the filteredtasks component in the StudentTasksHome.tsx file.
* The corresponding formatting for the same included in the StudentTasks.module.css file.

<b>4. Error and Edge Case Handling:</b> Comprehensive error handling and edge case handling strategies were implemented to provide informative feedback for failed requests or empty datasets.

<b>5. Responsive and Accessible Design:</b> The page implemented is fully responsive on all devices (desktop, tablet, mobile) and meets accessibility standards, including ARIA roles, ensuring a seamless and inclusive experience for all students, regardless of their device or abilities.

<b>6. Testing and Validation:</b> The testing phase of the project involves a manual testing process to ensure the student task view list functions reliably.

<i>Implementation Steps</i>
*Carrying out a detailed manual review of each task item to confirm they display accurate information, ensuring visual indicators match the design specifications.
*Simulating user interactions manually to verify that component links and buttons function correctly, confirming that all elements respond as expected.
*Evaluating visual feedback elements like hover and active states to ensure they align with the project's usability standards.

These steps are intended to confirm the interface's cohesive functionality and reliability by interacting with the system from an end-user perspective. This hands-on approach enables quick correction of any inconsistencies and improvements to the user experience.<br><br><br>
<b>Login page for accessing the system</b><br>
[[File: Login_Page_Student_tasks_UI.jpg | 1000px ]]<br>
<b>Navigate to the "Assignments" tab to view list of assignments</b><br>
[[File: New_Implementation_Assignments_Page.jpg | 1000px ]]<br>

<b> Major changes made: </b> <br>

1. We have included a legend to improve clarity, allowing users to understand column meanings at a glance. This approach is more user-friendly than requiring users to hover over a small info icon, and it provides a cleaner, more streamlined interface.

2. We have split the task box into different parts making it easier for the user to view the Student Tasks Page.

3. The Table containing the list of assignments have been provided with dropdowns for ease of access.

==Database==
We prepared the database by cloning and configuring the reimplementation backend, adhering to the guidelines provided in the Backend Setup Instructions. We will be creating dummy assignment data for testing purposes.

<b> Sample of the Dummy data created </b> <br>
[[File: Dummy_data_Student_Tasks_UI.jpg | 500px]]

==Components==
*<b>App.tsx :</b> The `App.tsx` file acts as the primary entry point for a React application, setting up routing, integrating various pages and components, and managing global states or contexts to enable seamless navigation and functionality across the app. We’ll be adding a protected route for "StudentTaskHome" to direct users with the STUDENT role to the `StudentTasksHome` component.

*<b>StudentTasksBox.tsx :</b> The StudentTaskbox.tsx file will display a sidebar component that emphasizes upcoming tasks, revisions, and team collaborations.

*<b>StudentTaskHome.tsx :</b> The StudentTaskHome.tsx file contains the main panel, presenting a comprehensive list of assignments with course information, topics, current stages, and other relevant details. This contains the dropdowns implemented in the main panel (table) for filtering based on the user's needs.

==Files created/modified==
* src/App.tsx (Modified) - This file was changed to point to the new implementation of the Student Tasks page.

* src/pages/StudentTasks/StudentTasksHome.tsx (New File) - This file was created to handle the content of task table in the Student Tasks page.

* src/pages/StudentTasks/StudentTaskBox.tsx (New File) - This file was created to handle the content of the yellow task box in the Student Tasks page.

* src/pages/StudentTasks/StudentTasks.module.css (New File) - This file was created to handle the styling of the tasks table.

* src/pages/StudentTasks/StudentTasksBox.module.css (New File) - This file was created to handle the styling of the yellow task box.

* src/pages/StudentTasks/testData.json (New File) - This file was created to store the dummy data for our implementation.

==Design Patterns and Principles==

Design patterns and principles are fundamental concepts that help developers create clean, scalable, and maintainable code. They guide the design of software structures and improve development efficiency, as they provide solutions to common problems and offer a vocabulary for communication within development teams.

<b>1. Open/Closed Principle (OCP):</b> Software entities should be open for extension but closed for modification, allowing new functionality without altering existing code. It ensures modularity and reusability, which aligns with the goal of designing React components for different sections of the Student Task List page. The existing code was just altered by adding additional features.

<b>2. Don't Repeat Yourself (DRY):</b>Avoid duplicating code. When functionality or logic repeats, it's better to refactor it into reusable functions, classes, or modules. The StudentTaskHome and StudentTasksBox components have all the required code and have been refactored to make it reusable.

== Test Plan ==

<b>1. Component Design and Structure:</b> Design and organize React components to effectively support the Student Task List page, ensuring clarity and modularity.

<i>Test Cases:</i>
* Review the modular design of key components (e.g., header, task list, individual task items) for scalability and reusability.
* Check each component for proper structure and verify that all necessary information is displayed as expected.
* Confirm each component renders correctly within the overall page layout.

<b>2. Task List Display:</b> Implement functionality to accurately fetch and display assignments within the task list.

<i>Test Cases:</i>
* Confirm that the task list properly renders each fetched assignment.
* Test for infinite scrolling, if needed, to handle extensive assignment lists smoothly.
* Verify that loading indicators or placeholders appear while data is loading, ensuring user feedback during fetch operations.

<b>3. Filter Assignments:</b> Ensure that the task list filters assignments to show only those relevant to the current user.

<i>Test Cases:</i>
* Confirm the task list is correctly filtered based on the User ID, displaying only applicable assignments for the user.

== Important Links ==
* GitHub repo [https://github.com/aditikilledar/reimplementation-front-end]
* Pull Request: [https://github.com/expertiza/reimplementation-front-end/pull/66]

== Team ==
=====Mentor=====

* Chaitanya Srusti <crsrusti@ncsu.edu>

=====Members=====
* Aditi Killedar <akilled@ncsu.edu>
* Kruthi Rajeshwar <krajesh@ncsu.edu>
* Sphurthy Satish <sphurthy@ncsu.edu>

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-11T23:56:42Z

Sphurthy: /* Introduction */

== Introduction ==
The Assignment Participants Management UI in Expertiza is a tool used by instructors and administrators to manage participants in assignments. Currently, this interface is cluttered, with dense information and limited filtering options, making it challenging to quickly locate, filter, or modify participant data. The current UI has issues with readability, confusing labels, and lacks efficient bulk action capabilities, which leads to repetitive tasks and hampers productivity.

== Project Description ==

===Objective===
This project’s goal is to redesign the front end of the current non-TypeScript Student Task List page on Expertiza by building a new user interface with React.js and TypeScript, ensuring a more type-safe development experience. The page will showcase all assignments the user is involved in, requiring data fetching to obtain the assignment list, filtering based on the user’s participation, and presenting the results in a visually engaging, user-friendly format through React components.
This is the visual framework for creating the user interface:

[[File: Flow_Chart_Student_tasks.jpg | 1000px]]<br>

===Development Steps===
*<u>Review Current Interface</u>: Conduct a detailed analysis of the existing Ruby on Rails UI to understand its layout and features.
*<u>Setup Development Environment</u>: Configure the environment to work with TypeScript and React.
*<u>Design Components</u>: Break down the UI into distinct React components, defining the props and states needed for each.
*<u>Implement in Typescript</u>: Develop the component logic in TypeScript, prioritizing type safety.
*<u>Replicate Functionality</u>: Ensure all features from the Rails application are mirrored in the React components, maintaining full functionality.
*<u>Styling and Add Interactivity</u>: Style components and integrate interactive elements using CSS.
*<u>Testing</u>: Perform individual component testing and end-to-end testing for the entire application.

== Design ==
===Current Implementation (Ruby on Rails)===

The existing interface on Expertiza, developed with Ruby on Rails, displays a student's task list with assignments, due dates, and progress indicators.

<b> Current Implementation of Expertiza with Ruby on Rails </b> <br>
[[File:Expertiza_current_implementation.jpg | 1000px]]

===New Implementation (React JS & TypeScript)===

Our updated UI replicates the functionality of the original page, now leveraging TypeScript's reliability alongside React's dynamic rendering. We prioritized building a responsive, accessible interface that aligns with modern design principles. We have also included certain features to make it easy for the student to manage their assignments.<br><br>
<b> Implementation Overview </b>

[[File: New_Implementation_Assignments_Page.jpg | 1000px ]]<br>

<b>1. Fetch and Display Data:</b> The UI is designed with future live data integration in mind. Currently, we use structured placeholder data to mimic backend interactions.

<i>Implementation Steps</i>
*Defined TypeScript interfaces to model assignment data structures.
*Created mock data to simulate API responses for development.

<b>2. React Component Design:</b> We developed modular React components like Header, TaskList, and TaskItem to improve code reusability and maintainability.

<b> Legend </b>

We have included a legend on the right of the student task list, to improve clarity, allowing users to understand column meanings at a glance. This approach is more user-friendly than requiring users to hover over a small info icon, and it provides a cleaner, more streamlined interface.

<i>Implementation Steps</i>
==== StudentTasksBox component ====
*Implementation of the StudentTasksBox component - [https://github.com/aditikilledar/reimplementation-front-end/blob/student-tasks-ui-f24/src/pages/StudentTasks/StudentTasksBox.tsx]<br>

<syntaxhighlight>
const StudentTasksBox: React.FC<StudentTasksBoxProps> = ({ participantTasks, revisions, studentsTeamedWith }) => {
// Calculate total number of students teamed up with by iterating over each semester
let totalStudents = 0;
let allStudents: string[] = [];
for (const semester in studentsTeamedWith) {
// Add the number of students in each semester to the total count
totalStudents += studentsTeamedWith[semester].length;
allStudents = allStudents.concat(studentsTeamedWith[semester]);
}

// Calculate the number of revisions that are still pending (i.e., due date is in the future)
const pendingRevisions = revisions.filter(revision => getDaysLeft(revision.dueDate) > 0);

const dueTasks = participantTasks.filter(task => getDaysLeft(task.stageDeadline) > 0);

// Group tasks by course
const tasksByCourse: { [key: string]: typeof participantTasks } = {};

dueTasks.forEach(task => {
const courseName = task.course;

if (!tasksByCourse[courseName]) {
tasksByCourse[courseName] = [];
}

tasksByCourse[courseName].push(task);
});

return (
<div className={styles.container}>
<h2>Task Summary</h2>
<div className={styles.infoBox}>
<h5>Due:</h5>
{Object.entries(tasksByCourse).map(([course, tasks]) => (
<div key={course}>
<p>{course}</p>
<ul>
{tasks.map(task => (
<li key={task.id}>
{task.assignment} - Due: {task.stageDeadline}
</li>
))}
</ul>
</div>
))}
</div>

<div className={styles.infoBox}>
<h5>Revisions:</h5>
<ul>
{revisions.map((revision, index) => (
<li key={index}>{revision.name}</li>
))}
</ul>
</div>

<div className={styles.infoBox}>
<div className={styles.teamedStudents}>
<h5>Total Students Teamed With: {totalStudents}</h5>
<ul>
{allStudents.map((student, index) => (
<li key={index}>{student}</li>
))}
</ul>
</div>
</div>
</div>
);

};
</syntaxhighlight><br>

<b><i>New UI for StudentTasksBox Component</b></i> <br>

[[File: StudentTasksBox_Task Summary.jpg | 200px]]
[[File: StudentTasksBox_Revisions and Students Teamed With.jpg | 200px]]<br><br>

==== StudentTaskHome component ====
*Implementation of the StudentTaskHome component that handles the list of assignments along with filters (dropdowns). [https://github.com/aditikilledar/reimplementation-front-end/blob/student-tasks-ui-f24/src/pages/StudentTasks/StudentTaskHome.tsx]<br>
<syntaxhighlight>
const StudentTasksHome: React.FC = () => {
// init state and hooks
const currUserId = testData.current_user_id;
const dispatch = useDispatch();
const navigate = useNavigate();
const auth = useSelector((state: RootState) => state.authentication)

type StudentsTeamedWith = {
[semester: string]: string[];
};

// states to hold tasks
const taskRevisions = testData.revisions;
const participantTasks = testData.participantTasks;
console.log("participantTasks", participantTasks)

const [tasks, setTasks] = useState<Task[]>([]);
const dueTasks = testData.dueTasks;
const studentsTeamedWith: StudentsTeamedWith = testData.studentsTeamedWith;
const [filteredTasks, setFilteredTasks] = useState<Task[]>([]);

const [assignmentFilter, setAssignmentFilter] = useState('');
const [courseFilter, setCourseFilter] = useState('');
const [topicFilter, setTopicFilter] = useState('');
const [currentstageFilter, setCurrentStageFilter] = useState('');

function togglePublishingRights(id: number): void {
throw new Error('Function not implemented.');
}

let totalStudents = 0;
let allStudents: string[] = [];
for (const semester in studentsTeamedWith) {
// Add the number of students in each semester to the total count
totalStudents += studentsTeamedWith[semester].length;
allStudents = allStudents.concat(studentsTeamedWith[semester]);
}

useEffect(() => {
// Map the data from participationTasks to the tasks state
const mappedTasks = participantTasks.map(task => ({
id: task.id,
assignment: task.assignment,
course: task.course,
topic: task.topic,
currentStage: task.current_stage, // Adjust to match your data's structure
reviewGrade: task.review_grade, // Can be a string or an object
badges: task.badges, // Keep as is since it can be string or boolean
stageDeadline: task.stage_deadline, // Adjust to match your data's structure
publishingRights: task.publishing_rights, // Boolean type
}));

setTasks(mappedTasks);
setFilteredTasks(mappedTasks);
}, [participantTasks]);

console.log("after use effect:", participantTasks)

useEffect(() => {
const filtered = tasks.filter((task) =>
(assignmentFilter ? task.assignment === assignmentFilter : true) &&
(courseFilter ? task.course === courseFilter : true) &&
(topicFilter ? task.topic === topicFilter : true) &&
(currentstageFilter ? task.topic == currentstageFilter : true)
);
setFilteredTasks(filtered);
}, [assignmentFilter, courseFilter, topicFilter, currentstageFilter, tasks]);
</syntaxhighlight>

<b><i>New UI for StudentTaskHome Component</b></i> <br>
[[File: StudentTaskHome.jpg | 1000px ]]<br>

<b>3. Table Filtering:</b> The columns in the table are provided with filters enabling the user to search for what they want. The drop downs are provided for the columns: assignments, course, topic and current stage.

<i>Implementation Steps</i>
* Added the feature for filtering out tasks in the table by including the filteredtasks component in the StudentTasksHome.tsx file.
* The corresponding formatting for the same included in the StudentTasks.module.css file.

<b>4. Error and Edge Case Handling:</b> Comprehensive error handling and edge case handling strategies were implemented to provide informative feedback for failed requests or empty datasets.

<b>5. Responsive and Accessible Design:</b> The page implemented is fully responsive on all devices (desktop, tablet, mobile) and meets accessibility standards, including ARIA roles, ensuring a seamless and inclusive experience for all students, regardless of their device or abilities.

<b>6. Testing and Validation:</b> The testing phase of the project involves a manual testing process to ensure the student task view list functions reliably.

<i>Implementation Steps</i>
*Carrying out a detailed manual review of each task item to confirm they display accurate information, ensuring visual indicators match the design specifications.
*Simulating user interactions manually to verify that component links and buttons function correctly, confirming that all elements respond as expected.
*Evaluating visual feedback elements like hover and active states to ensure they align with the project's usability standards.

These steps are intended to confirm the interface's cohesive functionality and reliability by interacting with the system from an end-user perspective. This hands-on approach enables quick correction of any inconsistencies and improvements to the user experience.<br><br><br>
<b>Login page for accessing the system</b><br>
[[File: Login_Page_Student_tasks_UI.jpg | 1000px ]]<br>
<b>Navigate to the "Assignments" tab to view list of assignments</b><br>
[[File: New_Implementation_Assignments_Page.jpg | 1000px ]]<br>

<b> Major changes made: </b> <br>

1. We have included a legend to improve clarity, allowing users to understand column meanings at a glance. This approach is more user-friendly than requiring users to hover over a small info icon, and it provides a cleaner, more streamlined interface.

2. We have split the task box into different parts making it easier for the user to view the Student Tasks Page.

3. The Table containing the list of assignments have been provided with dropdowns for ease of access.

==Database==
We prepared the database by cloning and configuring the reimplementation backend, adhering to the guidelines provided in the Backend Setup Instructions. We will be creating dummy assignment data for testing purposes.

<b> Sample of the Dummy data created </b> <br>
[[File: Dummy_data_Student_Tasks_UI.jpg | 500px]]

==Components==
*<b>App.tsx :</b> The `App.tsx` file acts as the primary entry point for a React application, setting up routing, integrating various pages and components, and managing global states or contexts to enable seamless navigation and functionality across the app. We’ll be adding a protected route for "StudentTaskHome" to direct users with the STUDENT role to the `StudentTasksHome` component.

*<b>StudentTasksBox.tsx :</b> The StudentTaskbox.tsx file will display a sidebar component that emphasizes upcoming tasks, revisions, and team collaborations.

*<b>StudentTaskHome.tsx :</b> The StudentTaskHome.tsx file contains the main panel, presenting a comprehensive list of assignments with course information, topics, current stages, and other relevant details. This contains the dropdowns implemented in the main panel (table) for filtering based on the user's needs.

==Files created/modified==
* src/App.tsx (Modified) - This file was changed to point to the new implementation of the Student Tasks page.

* src/pages/StudentTasks/StudentTasksHome.tsx (New File) - This file was created to handle the content of task table in the Student Tasks page.

* src/pages/StudentTasks/StudentTaskBox.tsx (New File) - This file was created to handle the content of the yellow task box in the Student Tasks page.

* src/pages/StudentTasks/StudentTasks.module.css (New File) - This file was created to handle the styling of the tasks table.

* src/pages/StudentTasks/StudentTasksBox.module.css (New File) - This file was created to handle the styling of the yellow task box.

* src/pages/StudentTasks/testData.json (New File) - This file was created to store the dummy data for our implementation.

==Design Patterns and Principles==

Design patterns and principles are fundamental concepts that help developers create clean, scalable, and maintainable code. They guide the design of software structures and improve development efficiency, as they provide solutions to common problems and offer a vocabulary for communication within development teams.

<b>1. Open/Closed Principle (OCP):</b> Software entities should be open for extension but closed for modification, allowing new functionality without altering existing code. It ensures modularity and reusability, which aligns with the goal of designing React components for different sections of the Student Task List page. The existing code was just altered by adding additional features.

<b>2. Don't Repeat Yourself (DRY):</b>Avoid duplicating code. When functionality or logic repeats, it's better to refactor it into reusable functions, classes, or modules. The StudentTaskHome and StudentTasksBox components have all the required code and have been refactored to make it reusable.

== Test Plan ==

<b>1. Component Design and Structure:</b> Design and organize React components to effectively support the Student Task List page, ensuring clarity and modularity.

<i>Test Cases:</i>
* Review the modular design of key components (e.g., header, task list, individual task items) for scalability and reusability.
* Check each component for proper structure and verify that all necessary information is displayed as expected.
* Confirm each component renders correctly within the overall page layout.

<b>2. Task List Display:</b> Implement functionality to accurately fetch and display assignments within the task list.

<i>Test Cases:</i>
* Confirm that the task list properly renders each fetched assignment.
* Test for infinite scrolling, if needed, to handle extensive assignment lists smoothly.
* Verify that loading indicators or placeholders appear while data is loading, ensuring user feedback during fetch operations.

<b>3. Filter Assignments:</b> Ensure that the task list filters assignments to show only those relevant to the current user.

<i>Test Cases:</i>
* Confirm the task list is correctly filtered based on the User ID, displaying only applicable assignments for the user.

== Important Links ==
* GitHub repo [https://github.com/aditikilledar/reimplementation-front-end]
* Pull Request: [https://github.com/expertiza/reimplementation-front-end/pull/66]

== Team ==
=====Mentor=====

* Chaitanya Srusti <crsrusti@ncsu.edu>

=====Members=====
* Aditi Killedar <akilled@ncsu.edu>
* Kruthi Rajeshwar <krajesh@ncsu.edu>
* Sphurthy Satish <sphurthy@ncsu.edu>

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-11T23:56:22Z

Sphurthy: /* Expertiza */

== Introduction ==
The main objective of this project is to implement the front end for the Student Task list page within Expertiza.

== Project Description ==

===Objective===
This project’s goal is to redesign the front end of the current non-TypeScript Student Task List page on Expertiza by building a new user interface with React.js and TypeScript, ensuring a more type-safe development experience. The page will showcase all assignments the user is involved in, requiring data fetching to obtain the assignment list, filtering based on the user’s participation, and presenting the results in a visually engaging, user-friendly format through React components.
This is the visual framework for creating the user interface:

[[File: Flow_Chart_Student_tasks.jpg | 1000px]]<br>

===Development Steps===
*<u>Review Current Interface</u>: Conduct a detailed analysis of the existing Ruby on Rails UI to understand its layout and features.
*<u>Setup Development Environment</u>: Configure the environment to work with TypeScript and React.
*<u>Design Components</u>: Break down the UI into distinct React components, defining the props and states needed for each.
*<u>Implement in Typescript</u>: Develop the component logic in TypeScript, prioritizing type safety.
*<u>Replicate Functionality</u>: Ensure all features from the Rails application are mirrored in the React components, maintaining full functionality.
*<u>Styling and Add Interactivity</u>: Style components and integrate interactive elements using CSS.
*<u>Testing</u>: Perform individual component testing and end-to-end testing for the entire application.

== Design ==
===Current Implementation (Ruby on Rails)===

The existing interface on Expertiza, developed with Ruby on Rails, displays a student's task list with assignments, due dates, and progress indicators.

<b> Current Implementation of Expertiza with Ruby on Rails </b> <br>
[[File:Expertiza_current_implementation.jpg | 1000px]]

===New Implementation (React JS & TypeScript)===

Our updated UI replicates the functionality of the original page, now leveraging TypeScript's reliability alongside React's dynamic rendering. We prioritized building a responsive, accessible interface that aligns with modern design principles. We have also included certain features to make it easy for the student to manage their assignments.<br><br>
<b> Implementation Overview </b>

[[File: New_Implementation_Assignments_Page.jpg | 1000px ]]<br>

<b>1. Fetch and Display Data:</b> The UI is designed with future live data integration in mind. Currently, we use structured placeholder data to mimic backend interactions.

<i>Implementation Steps</i>
*Defined TypeScript interfaces to model assignment data structures.
*Created mock data to simulate API responses for development.

<b>2. React Component Design:</b> We developed modular React components like Header, TaskList, and TaskItem to improve code reusability and maintainability.

<b> Legend </b>

We have included a legend on the right of the student task list, to improve clarity, allowing users to understand column meanings at a glance. This approach is more user-friendly than requiring users to hover over a small info icon, and it provides a cleaner, more streamlined interface.

<i>Implementation Steps</i>
==== StudentTasksBox component ====
*Implementation of the StudentTasksBox component - [https://github.com/aditikilledar/reimplementation-front-end/blob/student-tasks-ui-f24/src/pages/StudentTasks/StudentTasksBox.tsx]<br>

<syntaxhighlight>
const StudentTasksBox: React.FC<StudentTasksBoxProps> = ({ participantTasks, revisions, studentsTeamedWith }) => {
// Calculate total number of students teamed up with by iterating over each semester
let totalStudents = 0;
let allStudents: string[] = [];
for (const semester in studentsTeamedWith) {
// Add the number of students in each semester to the total count
totalStudents += studentsTeamedWith[semester].length;
allStudents = allStudents.concat(studentsTeamedWith[semester]);
}

// Calculate the number of revisions that are still pending (i.e., due date is in the future)
const pendingRevisions = revisions.filter(revision => getDaysLeft(revision.dueDate) > 0);

const dueTasks = participantTasks.filter(task => getDaysLeft(task.stageDeadline) > 0);

// Group tasks by course
const tasksByCourse: { [key: string]: typeof participantTasks } = {};

dueTasks.forEach(task => {
const courseName = task.course;

if (!tasksByCourse[courseName]) {
tasksByCourse[courseName] = [];
}

tasksByCourse[courseName].push(task);
});

return (
<div className={styles.container}>
<h2>Task Summary</h2>
<div className={styles.infoBox}>
<h5>Due:</h5>
{Object.entries(tasksByCourse).map(([course, tasks]) => (
<div key={course}>
<p>{course}</p>
<ul>
{tasks.map(task => (
<li key={task.id}>
{task.assignment} - Due: {task.stageDeadline}
</li>
))}
</ul>
</div>
))}
</div>

<div className={styles.infoBox}>
<h5>Revisions:</h5>
<ul>
{revisions.map((revision, index) => (
<li key={index}>{revision.name}</li>
))}
</ul>
</div>

<div className={styles.infoBox}>
<div className={styles.teamedStudents}>
<h5>Total Students Teamed With: {totalStudents}</h5>
<ul>
{allStudents.map((student, index) => (
<li key={index}>{student}</li>
))}
</ul>
</div>
</div>
</div>
);

};
</syntaxhighlight><br>

<b><i>New UI for StudentTasksBox Component</b></i> <br>

[[File: StudentTasksBox_Task Summary.jpg | 200px]]
[[File: StudentTasksBox_Revisions and Students Teamed With.jpg | 200px]]<br><br>

==== StudentTaskHome component ====
*Implementation of the StudentTaskHome component that handles the list of assignments along with filters (dropdowns). [https://github.com/aditikilledar/reimplementation-front-end/blob/student-tasks-ui-f24/src/pages/StudentTasks/StudentTaskHome.tsx]<br>
<syntaxhighlight>
const StudentTasksHome: React.FC = () => {
// init state and hooks
const currUserId = testData.current_user_id;
const dispatch = useDispatch();
const navigate = useNavigate();
const auth = useSelector((state: RootState) => state.authentication)

type StudentsTeamedWith = {
[semester: string]: string[];
};

// states to hold tasks
const taskRevisions = testData.revisions;
const participantTasks = testData.participantTasks;
console.log("participantTasks", participantTasks)

const [tasks, setTasks] = useState<Task[]>([]);
const dueTasks = testData.dueTasks;
const studentsTeamedWith: StudentsTeamedWith = testData.studentsTeamedWith;
const [filteredTasks, setFilteredTasks] = useState<Task[]>([]);

const [assignmentFilter, setAssignmentFilter] = useState('');
const [courseFilter, setCourseFilter] = useState('');
const [topicFilter, setTopicFilter] = useState('');
const [currentstageFilter, setCurrentStageFilter] = useState('');

function togglePublishingRights(id: number): void {
throw new Error('Function not implemented.');
}

let totalStudents = 0;
let allStudents: string[] = [];
for (const semester in studentsTeamedWith) {
// Add the number of students in each semester to the total count
totalStudents += studentsTeamedWith[semester].length;
allStudents = allStudents.concat(studentsTeamedWith[semester]);
}

useEffect(() => {
// Map the data from participationTasks to the tasks state
const mappedTasks = participantTasks.map(task => ({
id: task.id,
assignment: task.assignment,
course: task.course,
topic: task.topic,
currentStage: task.current_stage, // Adjust to match your data's structure
reviewGrade: task.review_grade, // Can be a string or an object
badges: task.badges, // Keep as is since it can be string or boolean
stageDeadline: task.stage_deadline, // Adjust to match your data's structure
publishingRights: task.publishing_rights, // Boolean type
}));

setTasks(mappedTasks);
setFilteredTasks(mappedTasks);
}, [participantTasks]);

console.log("after use effect:", participantTasks)

useEffect(() => {
const filtered = tasks.filter((task) =>
(assignmentFilter ? task.assignment === assignmentFilter : true) &&
(courseFilter ? task.course === courseFilter : true) &&
(topicFilter ? task.topic === topicFilter : true) &&
(currentstageFilter ? task.topic == currentstageFilter : true)
);
setFilteredTasks(filtered);
}, [assignmentFilter, courseFilter, topicFilter, currentstageFilter, tasks]);
</syntaxhighlight>

<b><i>New UI for StudentTaskHome Component</b></i> <br>
[[File: StudentTaskHome.jpg | 1000px ]]<br>

<b>3. Table Filtering:</b> The columns in the table are provided with filters enabling the user to search for what they want. The drop downs are provided for the columns: assignments, course, topic and current stage.

<i>Implementation Steps</i>
* Added the feature for filtering out tasks in the table by including the filteredtasks component in the StudentTasksHome.tsx file.
* The corresponding formatting for the same included in the StudentTasks.module.css file.

<b>4. Error and Edge Case Handling:</b> Comprehensive error handling and edge case handling strategies were implemented to provide informative feedback for failed requests or empty datasets.

<b>5. Responsive and Accessible Design:</b> The page implemented is fully responsive on all devices (desktop, tablet, mobile) and meets accessibility standards, including ARIA roles, ensuring a seamless and inclusive experience for all students, regardless of their device or abilities.

<b>6. Testing and Validation:</b> The testing phase of the project involves a manual testing process to ensure the student task view list functions reliably.

<i>Implementation Steps</i>
*Carrying out a detailed manual review of each task item to confirm they display accurate information, ensuring visual indicators match the design specifications.
*Simulating user interactions manually to verify that component links and buttons function correctly, confirming that all elements respond as expected.
*Evaluating visual feedback elements like hover and active states to ensure they align with the project's usability standards.

These steps are intended to confirm the interface's cohesive functionality and reliability by interacting with the system from an end-user perspective. This hands-on approach enables quick correction of any inconsistencies and improvements to the user experience.<br><br><br>
<b>Login page for accessing the system</b><br>
[[File: Login_Page_Student_tasks_UI.jpg | 1000px ]]<br>
<b>Navigate to the "Assignments" tab to view list of assignments</b><br>
[[File: New_Implementation_Assignments_Page.jpg | 1000px ]]<br>

<b> Major changes made: </b> <br>

1. We have included a legend to improve clarity, allowing users to understand column meanings at a glance. This approach is more user-friendly than requiring users to hover over a small info icon, and it provides a cleaner, more streamlined interface.

2. We have split the task box into different parts making it easier for the user to view the Student Tasks Page.

3. The Table containing the list of assignments have been provided with dropdowns for ease of access.

==Database==
We prepared the database by cloning and configuring the reimplementation backend, adhering to the guidelines provided in the Backend Setup Instructions. We will be creating dummy assignment data for testing purposes.

<b> Sample of the Dummy data created </b> <br>
[[File: Dummy_data_Student_Tasks_UI.jpg | 500px]]

==Components==
*<b>App.tsx :</b> The `App.tsx` file acts as the primary entry point for a React application, setting up routing, integrating various pages and components, and managing global states or contexts to enable seamless navigation and functionality across the app. We’ll be adding a protected route for "StudentTaskHome" to direct users with the STUDENT role to the `StudentTasksHome` component.

*<b>StudentTasksBox.tsx :</b> The StudentTaskbox.tsx file will display a sidebar component that emphasizes upcoming tasks, revisions, and team collaborations.

*<b>StudentTaskHome.tsx :</b> The StudentTaskHome.tsx file contains the main panel, presenting a comprehensive list of assignments with course information, topics, current stages, and other relevant details. This contains the dropdowns implemented in the main panel (table) for filtering based on the user's needs.

==Files created/modified==
* src/App.tsx (Modified) - This file was changed to point to the new implementation of the Student Tasks page.

* src/pages/StudentTasks/StudentTasksHome.tsx (New File) - This file was created to handle the content of task table in the Student Tasks page.

* src/pages/StudentTasks/StudentTaskBox.tsx (New File) - This file was created to handle the content of the yellow task box in the Student Tasks page.

* src/pages/StudentTasks/StudentTasks.module.css (New File) - This file was created to handle the styling of the tasks table.

* src/pages/StudentTasks/StudentTasksBox.module.css (New File) - This file was created to handle the styling of the yellow task box.

* src/pages/StudentTasks/testData.json (New File) - This file was created to store the dummy data for our implementation.

==Design Patterns and Principles==

Design patterns and principles are fundamental concepts that help developers create clean, scalable, and maintainable code. They guide the design of software structures and improve development efficiency, as they provide solutions to common problems and offer a vocabulary for communication within development teams.

<b>1. Open/Closed Principle (OCP):</b> Software entities should be open for extension but closed for modification, allowing new functionality without altering existing code. It ensures modularity and reusability, which aligns with the goal of designing React components for different sections of the Student Task List page. The existing code was just altered by adding additional features.

<b>2. Don't Repeat Yourself (DRY):</b>Avoid duplicating code. When functionality or logic repeats, it's better to refactor it into reusable functions, classes, or modules. The StudentTaskHome and StudentTasksBox components have all the required code and have been refactored to make it reusable.

== Test Plan ==

<b>1. Component Design and Structure:</b> Design and organize React components to effectively support the Student Task List page, ensuring clarity and modularity.

<i>Test Cases:</i>
* Review the modular design of key components (e.g., header, task list, individual task items) for scalability and reusability.
* Check each component for proper structure and verify that all necessary information is displayed as expected.
* Confirm each component renders correctly within the overall page layout.

<b>2. Task List Display:</b> Implement functionality to accurately fetch and display assignments within the task list.

<i>Test Cases:</i>
* Confirm that the task list properly renders each fetched assignment.
* Test for infinite scrolling, if needed, to handle extensive assignment lists smoothly.
* Verify that loading indicators or placeholders appear while data is loading, ensuring user feedback during fetch operations.

<b>3. Filter Assignments:</b> Ensure that the task list filters assignments to show only those relevant to the current user.

<i>Test Cases:</i>
* Confirm the task list is correctly filtered based on the User ID, displaying only applicable assignments for the user.

== Important Links ==
* GitHub repo [https://github.com/aditikilledar/reimplementation-front-end]
* Pull Request: [https://github.com/expertiza/reimplementation-front-end/pull/66]

== Team ==
=====Mentor=====

* Chaitanya Srusti <crsrusti@ncsu.edu>

=====Members=====
* Aditi Killedar <akilled@ncsu.edu>
* Kruthi Rajeshwar <krajesh@ncsu.edu>
* Sphurthy Satish <sphurthy@ncsu.edu>

CSC/ECE517 Fall 2024-E2490 Improving Assignment Participants Management UI in Expertiza

2024-11-11T23:43:45Z

Sphurthy: Created page with "== Expertiza == Expertiza is an open-source learning management system primarily developed with Ruby on Rails. It offers features such as creating tests and assignments, managing teams and courses, and, most importantly, providing a robust framework for peer reviews and group feedback. This project focuses on developing frontend components in React, with an emphasis on the Student Task list page. The aim is to build a fully operational user interface for these components..."

== Expertiza ==
Expertiza is an open-source learning management system primarily developed with Ruby on Rails. It offers features such as creating tests and assignments, managing teams and courses, and, most importantly, providing a robust framework for peer reviews and group feedback. This project focuses on developing frontend components in React, with an emphasis on the Student Task list page. The aim is to build a fully operational user interface for these components using React.js and TypeScript.

== Introduction ==
The main objective of this project is to implement the front end for the Student Task list page within Expertiza.

== Project Description ==

===Objective===
This project’s goal is to redesign the front end of the current non-TypeScript Student Task List page on Expertiza by building a new user interface with React.js and TypeScript, ensuring a more type-safe development experience. The page will showcase all assignments the user is involved in, requiring data fetching to obtain the assignment list, filtering based on the user’s participation, and presenting the results in a visually engaging, user-friendly format through React components.
This is the visual framework for creating the user interface:

[[File: Flow_Chart_Student_tasks.jpg | 1000px]]<br>

===Development Steps===
*<u>Review Current Interface</u>: Conduct a detailed analysis of the existing Ruby on Rails UI to understand its layout and features.
*<u>Setup Development Environment</u>: Configure the environment to work with TypeScript and React.
*<u>Design Components</u>: Break down the UI into distinct React components, defining the props and states needed for each.
*<u>Implement in Typescript</u>: Develop the component logic in TypeScript, prioritizing type safety.
*<u>Replicate Functionality</u>: Ensure all features from the Rails application are mirrored in the React components, maintaining full functionality.
*<u>Styling and Add Interactivity</u>: Style components and integrate interactive elements using CSS.
*<u>Testing</u>: Perform individual component testing and end-to-end testing for the entire application.

== Design ==
===Current Implementation (Ruby on Rails)===

The existing interface on Expertiza, developed with Ruby on Rails, displays a student's task list with assignments, due dates, and progress indicators.

<b> Current Implementation of Expertiza with Ruby on Rails </b> <br>
[[File:Expertiza_current_implementation.jpg | 1000px]]

===New Implementation (React JS & TypeScript)===

Our updated UI replicates the functionality of the original page, now leveraging TypeScript's reliability alongside React's dynamic rendering. We prioritized building a responsive, accessible interface that aligns with modern design principles. We have also included certain features to make it easy for the student to manage their assignments.<br><br>
<b> Implementation Overview </b>

[[File: New_Implementation_Assignments_Page.jpg | 1000px ]]<br>

<b>1. Fetch and Display Data:</b> The UI is designed with future live data integration in mind. Currently, we use structured placeholder data to mimic backend interactions.

<i>Implementation Steps</i>
*Defined TypeScript interfaces to model assignment data structures.
*Created mock data to simulate API responses for development.

<b>2. React Component Design:</b> We developed modular React components like Header, TaskList, and TaskItem to improve code reusability and maintainability.

<b> Legend </b>

We have included a legend on the right of the student task list, to improve clarity, allowing users to understand column meanings at a glance. This approach is more user-friendly than requiring users to hover over a small info icon, and it provides a cleaner, more streamlined interface.

<i>Implementation Steps</i>
==== StudentTasksBox component ====
*Implementation of the StudentTasksBox component - [https://github.com/aditikilledar/reimplementation-front-end/blob/student-tasks-ui-f24/src/pages/StudentTasks/StudentTasksBox.tsx]<br>

<syntaxhighlight>
const StudentTasksBox: React.FC<StudentTasksBoxProps> = ({ participantTasks, revisions, studentsTeamedWith }) => {
// Calculate total number of students teamed up with by iterating over each semester
let totalStudents = 0;
let allStudents: string[] = [];
for (const semester in studentsTeamedWith) {
// Add the number of students in each semester to the total count
totalStudents += studentsTeamedWith[semester].length;
allStudents = allStudents.concat(studentsTeamedWith[semester]);
}

// Calculate the number of revisions that are still pending (i.e., due date is in the future)
const pendingRevisions = revisions.filter(revision => getDaysLeft(revision.dueDate) > 0);

const dueTasks = participantTasks.filter(task => getDaysLeft(task.stageDeadline) > 0);

// Group tasks by course
const tasksByCourse: { [key: string]: typeof participantTasks } = {};

dueTasks.forEach(task => {
const courseName = task.course;

if (!tasksByCourse[courseName]) {
tasksByCourse[courseName] = [];
}

tasksByCourse[courseName].push(task);
});

return (
<div className={styles.container}>
<h2>Task Summary</h2>
<div className={styles.infoBox}>
<h5>Due:</h5>
{Object.entries(tasksByCourse).map(([course, tasks]) => (
<div key={course}>
<p>{course}</p>
<ul>
{tasks.map(task => (
<li key={task.id}>
{task.assignment} - Due: {task.stageDeadline}
</li>
))}
</ul>
</div>
))}
</div>

<div className={styles.infoBox}>
<h5>Revisions:</h5>
<ul>
{revisions.map((revision, index) => (
<li key={index}>{revision.name}</li>
))}
</ul>
</div>

<div className={styles.infoBox}>
<div className={styles.teamedStudents}>
<h5>Total Students Teamed With: {totalStudents}</h5>
<ul>
{allStudents.map((student, index) => (
<li key={index}>{student}</li>
))}
</ul>
</div>
</div>
</div>
);

};
</syntaxhighlight><br>

<b><i>New UI for StudentTasksBox Component</b></i> <br>

[[File: StudentTasksBox_Task Summary.jpg | 200px]]
[[File: StudentTasksBox_Revisions and Students Teamed With.jpg | 200px]]<br><br>

==== StudentTaskHome component ====
*Implementation of the StudentTaskHome component that handles the list of assignments along with filters (dropdowns). [https://github.com/aditikilledar/reimplementation-front-end/blob/student-tasks-ui-f24/src/pages/StudentTasks/StudentTaskHome.tsx]<br>
<syntaxhighlight>
const StudentTasksHome: React.FC = () => {
// init state and hooks
const currUserId = testData.current_user_id;
const dispatch = useDispatch();
const navigate = useNavigate();
const auth = useSelector((state: RootState) => state.authentication)

type StudentsTeamedWith = {
[semester: string]: string[];
};

// states to hold tasks
const taskRevisions = testData.revisions;
const participantTasks = testData.participantTasks;
console.log("participantTasks", participantTasks)

const [tasks, setTasks] = useState<Task[]>([]);
const dueTasks = testData.dueTasks;
const studentsTeamedWith: StudentsTeamedWith = testData.studentsTeamedWith;
const [filteredTasks, setFilteredTasks] = useState<Task[]>([]);

const [assignmentFilter, setAssignmentFilter] = useState('');
const [courseFilter, setCourseFilter] = useState('');
const [topicFilter, setTopicFilter] = useState('');
const [currentstageFilter, setCurrentStageFilter] = useState('');

function togglePublishingRights(id: number): void {
throw new Error('Function not implemented.');
}

let totalStudents = 0;
let allStudents: string[] = [];
for (const semester in studentsTeamedWith) {
// Add the number of students in each semester to the total count
totalStudents += studentsTeamedWith[semester].length;
allStudents = allStudents.concat(studentsTeamedWith[semester]);
}

useEffect(() => {
// Map the data from participationTasks to the tasks state
const mappedTasks = participantTasks.map(task => ({
id: task.id,
assignment: task.assignment,
course: task.course,
topic: task.topic,
currentStage: task.current_stage, // Adjust to match your data's structure
reviewGrade: task.review_grade, // Can be a string or an object
badges: task.badges, // Keep as is since it can be string or boolean
stageDeadline: task.stage_deadline, // Adjust to match your data's structure
publishingRights: task.publishing_rights, // Boolean type
}));

setTasks(mappedTasks);
setFilteredTasks(mappedTasks);
}, [participantTasks]);

console.log("after use effect:", participantTasks)

useEffect(() => {
const filtered = tasks.filter((task) =>
(assignmentFilter ? task.assignment === assignmentFilter : true) &&
(courseFilter ? task.course === courseFilter : true) &&
(topicFilter ? task.topic === topicFilter : true) &&
(currentstageFilter ? task.topic == currentstageFilter : true)
);
setFilteredTasks(filtered);
}, [assignmentFilter, courseFilter, topicFilter, currentstageFilter, tasks]);
</syntaxhighlight>

<b><i>New UI for StudentTaskHome Component</b></i> <br>
[[File: StudentTaskHome.jpg | 1000px ]]<br>

<b>3. Table Filtering:</b> The columns in the table are provided with filters enabling the user to search for what they want. The drop downs are provided for the columns: assignments, course, topic and current stage.

<i>Implementation Steps</i>
* Added the feature for filtering out tasks in the table by including the filteredtasks component in the StudentTasksHome.tsx file.
* The corresponding formatting for the same included in the StudentTasks.module.css file.

<b>4. Error and Edge Case Handling:</b> Comprehensive error handling and edge case handling strategies were implemented to provide informative feedback for failed requests or empty datasets.

<b>5. Responsive and Accessible Design:</b> The page implemented is fully responsive on all devices (desktop, tablet, mobile) and meets accessibility standards, including ARIA roles, ensuring a seamless and inclusive experience for all students, regardless of their device or abilities.

<b>6. Testing and Validation:</b> The testing phase of the project involves a manual testing process to ensure the student task view list functions reliably.

<i>Implementation Steps</i>
*Carrying out a detailed manual review of each task item to confirm they display accurate information, ensuring visual indicators match the design specifications.
*Simulating user interactions manually to verify that component links and buttons function correctly, confirming that all elements respond as expected.
*Evaluating visual feedback elements like hover and active states to ensure they align with the project's usability standards.

These steps are intended to confirm the interface's cohesive functionality and reliability by interacting with the system from an end-user perspective. This hands-on approach enables quick correction of any inconsistencies and improvements to the user experience.<br><br><br>
<b>Login page for accessing the system</b><br>
[[File: Login_Page_Student_tasks_UI.jpg | 1000px ]]<br>
<b>Navigate to the "Assignments" tab to view list of assignments</b><br>
[[File: New_Implementation_Assignments_Page.jpg | 1000px ]]<br>

<b> Major changes made: </b> <br>

1. We have included a legend to improve clarity, allowing users to understand column meanings at a glance. This approach is more user-friendly than requiring users to hover over a small info icon, and it provides a cleaner, more streamlined interface.

2. We have split the task box into different parts making it easier for the user to view the Student Tasks Page.

3. The Table containing the list of assignments have been provided with dropdowns for ease of access.

==Database==
We prepared the database by cloning and configuring the reimplementation backend, adhering to the guidelines provided in the Backend Setup Instructions. We will be creating dummy assignment data for testing purposes.

<b> Sample of the Dummy data created </b> <br>
[[File: Dummy_data_Student_Tasks_UI.jpg | 500px]]

==Components==
*<b>App.tsx :</b> The `App.tsx` file acts as the primary entry point for a React application, setting up routing, integrating various pages and components, and managing global states or contexts to enable seamless navigation and functionality across the app. We’ll be adding a protected route for "StudentTaskHome" to direct users with the STUDENT role to the `StudentTasksHome` component.

*<b>StudentTasksBox.tsx :</b> The StudentTaskbox.tsx file will display a sidebar component that emphasizes upcoming tasks, revisions, and team collaborations.

*<b>StudentTaskHome.tsx :</b> The StudentTaskHome.tsx file contains the main panel, presenting a comprehensive list of assignments with course information, topics, current stages, and other relevant details. This contains the dropdowns implemented in the main panel (table) for filtering based on the user's needs.

==Files created/modified==
* src/App.tsx (Modified) - This file was changed to point to the new implementation of the Student Tasks page.

* src/pages/StudentTasks/StudentTasksHome.tsx (New File) - This file was created to handle the content of task table in the Student Tasks page.

* src/pages/StudentTasks/StudentTaskBox.tsx (New File) - This file was created to handle the content of the yellow task box in the Student Tasks page.

* src/pages/StudentTasks/StudentTasks.module.css (New File) - This file was created to handle the styling of the tasks table.

* src/pages/StudentTasks/StudentTasksBox.module.css (New File) - This file was created to handle the styling of the yellow task box.

* src/pages/StudentTasks/testData.json (New File) - This file was created to store the dummy data for our implementation.

==Design Patterns and Principles==

Design patterns and principles are fundamental concepts that help developers create clean, scalable, and maintainable code. They guide the design of software structures and improve development efficiency, as they provide solutions to common problems and offer a vocabulary for communication within development teams.

<b>1. Open/Closed Principle (OCP):</b> Software entities should be open for extension but closed for modification, allowing new functionality without altering existing code. It ensures modularity and reusability, which aligns with the goal of designing React components for different sections of the Student Task List page. The existing code was just altered by adding additional features.

<b>2. Don't Repeat Yourself (DRY):</b>Avoid duplicating code. When functionality or logic repeats, it's better to refactor it into reusable functions, classes, or modules. The StudentTaskHome and StudentTasksBox components have all the required code and have been refactored to make it reusable.

== Test Plan ==

<b>1. Component Design and Structure:</b> Design and organize React components to effectively support the Student Task List page, ensuring clarity and modularity.

<i>Test Cases:</i>
* Review the modular design of key components (e.g., header, task list, individual task items) for scalability and reusability.
* Check each component for proper structure and verify that all necessary information is displayed as expected.
* Confirm each component renders correctly within the overall page layout.

<b>2. Task List Display:</b> Implement functionality to accurately fetch and display assignments within the task list.

<i>Test Cases:</i>
* Confirm that the task list properly renders each fetched assignment.
* Test for infinite scrolling, if needed, to handle extensive assignment lists smoothly.
* Verify that loading indicators or placeholders appear while data is loading, ensuring user feedback during fetch operations.

<b>3. Filter Assignments:</b> Ensure that the task list filters assignments to show only those relevant to the current user.

<i>Test Cases:</i>
* Confirm the task list is correctly filtered based on the User ID, displaying only applicable assignments for the user.

== Important Links ==
* GitHub repo [https://github.com/aditikilledar/reimplementation-front-end]
* Pull Request: [https://github.com/expertiza/reimplementation-front-end/pull/66]

== Team ==
=====Mentor=====

* Chaitanya Srusti <crsrusti@ncsu.edu>

=====Members=====
* Aditi Killedar <akilled@ncsu.edu>
* Kruthi Rajeshwar <krajesh@ncsu.edu>
* Sphurthy Satish <sphurthy@ncsu.edu>

CSC/ECE 517 Fall 2024

2024-10-29T22:00:17Z

Sphurthy:

* [[CSC/ECE 517 Fall 2024 - E2452. Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2454. Refactor student_task.rb]]
* [[CSC/ECE 517 Fall 2024 - E2456. Refactor teams_user.rb]]
* [[CSC/ECE 517 Fall 2024 - E2455. Refactor sign_up_sheet_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2459. View for results of bidding]]
* [[CSC/ECE 517 Fall 2024 - E2460 Mentor-Meeting Management]]
* [[CSC/ECE 517 Fall 2024 - E2461. UI for Courses]]
* [https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2463_Implement_Front_End_for_Student_Task_List CSC/ECE 517 Fall 2024 - E2463. UI for Student Task List]
* [[CSC/ECE 517 Fall 2024 - E2464 UI for Project Topics (was: Sign_up_Topics)]]
* [[CSC/ECE 517 Fall 2024 - E2465. UI for Institutions and Notification]]
* [[CSC/ECE 517 Fall 2024 - E2466. UI for Impersonate User]]
* [[CSC/ECE 517 Fall 2024 - E2467. UI for View Submissions]]
* [[CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view_team]]
* [[CSC/ECE 517 Fall 2024 - E2470. Reimplement grades_controller]]
* [[CSC/ECE 517 Fall 2024 - E2471. Reimplement logger]]
* [[CSC/ECE 517 Fall 2024 - E2475. Reimplement student_task view]]
* [[CSC/ECE 517 Fall 2024 - E2478. Reimplement the Question hierarchy as Item hierarchy]]
* [[CSC/ECE 517 Fall 2024 - E2480. Implement testing for new Bookmarks Controller]]
* [[CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews]]
* [[CSC/ECE 517 Fall 2024 - E2481 Reimplement response_map.rb]]
* [[CSC/ECE 517 Fall 2024 - G2401 Refactor Graphql API endpoint for contribution metrics]]
* [[CSC/ECE 517 Fall 2024 - G2402 Refactor Graphql API endpoint for repositories]]

CSC/ECE 517 Fall 2024

2024-10-29T21:59:55Z

Sphurthy:

* [[CSC/ECE 517 Fall 2024 - E2452. Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2454. Refactor student_task.rb]]
* [[CSC/ECE 517 Fall 2024 - E2456. Refactor teams_user.rb]]
* [[CSC/ECE 517 Fall 2024 - E2455. Refactor sign_up_sheet_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2459. View for results of bidding]]
* [[CSC/ECE 517 Fall 2024 - E2460 Mentor-Meeting Management]]
* [[CSC/ECE 517 Fall 2024 - E2461. UI for Courses]]
* [[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2463_Implement_Front_End_for_Student_Task_List CSC/ECE 517 Fall 2024 - E2463. UI for Student Task List]]
* [[CSC/ECE 517 Fall 2024 - E2464 UI for Project Topics (was: Sign_up_Topics)]]
* [[CSC/ECE 517 Fall 2024 - E2465. UI for Institutions and Notification]]
* [[CSC/ECE 517 Fall 2024 - E2466. UI for Impersonate User]]
* [[CSC/ECE 517 Fall 2024 - E2467. UI for View Submissions]]
* [[CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view_team]]
* [[CSC/ECE 517 Fall 2024 - E2470. Reimplement grades_controller]]
* [[CSC/ECE 517 Fall 2024 - E2471. Reimplement logger]]
* [[CSC/ECE 517 Fall 2024 - E2475. Reimplement student_task view]]
* [[CSC/ECE 517 Fall 2024 - E2478. Reimplement the Question hierarchy as Item hierarchy]]
* [[CSC/ECE 517 Fall 2024 - E2480. Implement testing for new Bookmarks Controller]]
* [[CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews]]
* [[CSC/ECE 517 Fall 2024 - E2481 Reimplement response_map.rb]]
* [[CSC/ECE 517 Fall 2024 - G2401 Refactor Graphql API endpoint for contribution metrics]]
* [[CSC/ECE 517 Fall 2024 - G2402 Refactor Graphql API endpoint for repositories]]

CSC/ECE 517 Fall 2024

2024-10-29T21:58:27Z

Sphurthy:

* [[CSC/ECE 517 Fall 2024 - E2452. Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2454. Refactor student_task.rb]]
* [[CSC/ECE 517 Fall 2024 - E2456. Refactor teams_user.rb]]
* [[CSC/ECE 517 Fall 2024 - E2455. Refactor sign_up_sheet_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2459. View for results of bidding]]
* [[CSC/ECE 517 Fall 2024 - E2460 Mentor-Meeting Management]]
* [[CSC/ECE 517 Fall 2024 - E2461. UI for Courses]]
* [[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2463_Implement_Front_End_for_Student_Task_List#New_Implementation_%28React_JS_%26_TypeScript%29 CSC/ECE 517 Fall 2024 - E2463. UI for Student Task List]]
* [[CSC/ECE 517 Fall 2024 - E2464 UI for Project Topics (was: Sign_up_Topics)]]
* [[CSC/ECE 517 Fall 2024 - E2465. UI for Institutions and Notification]]
* [[CSC/ECE 517 Fall 2024 - E2466. UI for Impersonate User]]
* [[CSC/ECE 517 Fall 2024 - E2467. UI for View Submissions]]
* [[CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view_team]]
* [[CSC/ECE 517 Fall 2024 - E2470. Reimplement grades_controller]]
* [[CSC/ECE 517 Fall 2024 - E2471. Reimplement logger]]
* [[CSC/ECE 517 Fall 2024 - E2475. Reimplement student_task view]]
* [[CSC/ECE 517 Fall 2024 - E2478. Reimplement the Question hierarchy as Item hierarchy]]
* [[CSC/ECE 517 Fall 2024 - E2480. Implement testing for new Bookmarks Controller]]
* [[CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews]]
* [[CSC/ECE 517 Fall 2024 - E2481 Reimplement response_map.rb]]
* [[CSC/ECE 517 Fall 2024 - G2401 Refactor Graphql API endpoint for contribution metrics]]
* [[CSC/ECE 517 Fall 2024 - G2402 Refactor Graphql API endpoint for repositories]]

CSC/ECE 517 Fall 2024

2024-10-29T21:53:35Z

Sphurthy:

* [[CSC/ECE 517 Fall 2024 - E2452. Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2454. Refactor student_task.rb]]
* [[CSC/ECE 517 Fall 2024 - E2456. Refactor teams_user.rb]]
* [[CSC/ECE 517 Fall 2024 - E2455. Refactor sign_up_sheet_controller.rb]]
* [[CSC/ECE 517 Fall 2024 - E2459. View for results of bidding]]
* [[CSC/ECE 517 Fall 2024 - E2460 Mentor-Meeting Management]]
* [[CSC/ECE 517 Fall 2024 - E2461. UI for Courses]]
* [[CSC/ECE 517 Fall 2024 - E2463. UI for Student Task List]]
* [[CSC/ECE 517 Fall 2024 - E2464 UI for Project Topics (was: Sign_up_Topics)]]
* [[CSC/ECE 517 Fall 2024 - E2465. UI for Institutions and Notification]]
* [[CSC/ECE 517 Fall 2024 - E2466. UI for Impersonate User]]
* [[CSC/ECE 517 Fall 2024 - E2467. UI for View Submissions]]
* [[CSC/ECE 517 Fall 2024 - E2469. Reimplement grades/view_team]]
* [[CSC/ECE 517 Fall 2024 - E2470. Reimplement grades_controller]]
* [[CSC/ECE 517 Fall 2024 - E2471. Reimplement logger]]
* [[CSC/ECE 517 Fall 2024 - E2475. Reimplement student_task view]]
* [[CSC/ECE 517 Fall 2024 - E2478. Reimplement the Question hierarchy as Item hierarchy]]
* [[CSC/ECE 517 Fall 2024 - E2480. Implement testing for new Bookmarks Controller]]
* [[CSC/ECE 517 Fall 2024 - E2482. Reimplement heatgrid for reviews]]
* [[CSC/ECE 517 Fall 2024 - E2481 Reimplement response_map.rb]]
* [[CSC/ECE 517 Fall 2024 - G2401 Refactor Graphql API endpoint for contribution metrics]]
* [[CSC/ECE 517 Fall 2024 - G2402 Refactor Graphql API endpoint for repositories]]