Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-10T03:52:50Z

Snukara: /* Code Snippets */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

To improve the usability and visual appeal of the "Etc" tab, we integrated icons into each functional tile. These icons, primarily sourced from React Material UI, were selected to align with their respective actions:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

React Material UI provides a rich library of customizable icons that seamlessly integrate with React-based projects. We used the following command to install the required packages:

<pre>
npm install @mui/material @emotion/styled @emotion/react @mui/icons-material.
</pre>

These visually distinct icons make the tiles more descriptive and user-friendly, acting as intuitive visual cues for administrators. This enhancement not only improves navigation but also adheres to modern design standards, giving the "Etc" tab a polished and professional appearance.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};
</pre>
This code snippet shows the back button click handler
<pre>

const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>
</pre>

* '''TabContent.tsx :'''
This React component, likely part of a larger tab-based interface, dynamically displays content based on the currently selected tab (activeTab).

If the activeTab is set to "Badges", the component renders a simple message ("Badges Content").
If the activeTab is set to "Etc", the component displays a grid of interactive items, each representing a different administrative action. These items are associated with icons and labels, including options like "Add Participant", "Create Teams", "Assign Reviewer", "View Submissions", "View Scores", "View Reports", and "View Delayed Jobs". These items are structured using the etc-grid and etc-item CSS classes for layout.
<pre>
<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>
</pre>
This code snippet shows the code for the footer action button.
<pre>

<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

=== Manual Testing ===

Since this is primarily a frontend-focused project, the scope of testing was limited to validating user interactions, navigation flows, and visual consistency. Most of the testing efforts were concentrated on ensuring that the interface behaved as expected and provided a seamless experience for the user.

* '''Save Button :'''
The "Save" button was tested to ensure it successfully saved changes to assignments and displayed a confirmation banner. After making modifications to assignment details and clicking "Save," a green success banner appeared at the top of the screen, lasting for 3 seconds before disappearing. To confirm the functionality, the page was reloaded, and the changes were verified as correctly saved. This ensured that the save operation performed as intended without any issues.

* '''Back Button :'''
The "Back" button was tested to confirm that it redirected users to the "Manage Assignments" page as expected. After clicking the "Back" button from the "Etc" tab, the system navigated seamlessly to the appropriate page. All data remained intact, and the redirection was smooth, ensuring the user could return to the assignment management page without complications.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Demo Video ==

For a detailed walkthrough of the UI we implemented, you can watch this [https://youtu.be/A_FB3_QycVs demo video]

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/pankhuri03/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-10T03:50:18Z

Snukara: /* Code Snippets */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

To improve the usability and visual appeal of the "Etc" tab, we integrated icons into each functional tile. These icons, primarily sourced from React Material UI, were selected to align with their respective actions:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

React Material UI provides a rich library of customizable icons that seamlessly integrate with React-based projects. We used the following command to install the required packages:

<pre>
npm install @mui/material @emotion/styled @emotion/react @mui/icons-material.
</pre>

These visually distinct icons make the tiles more descriptive and user-friendly, acting as intuitive visual cues for administrators. This enhancement not only improves navigation but also adheres to modern design standards, giving the "Etc" tab a polished and professional appearance.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};
</pre>
<pre>
// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>
</pre>

* '''TabContent.tsx :'''
This React component, likely part of a larger tab-based interface, dynamically displays content based on the currently selected tab (activeTab).

If the activeTab is set to "Badges", the component renders a simple message ("Badges Content").
If the activeTab is set to "Etc", the component displays a grid of interactive items, each representing a different administrative action. These items are associated with icons and labels, including options like "Add Participant", "Create Teams", "Assign Reviewer", "View Submissions", "View Scores", "View Reports", and "View Delayed Jobs". These items are structured using the etc-grid and etc-item CSS classes for layout.
<pre>
<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>
</pre>
<pre>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

=== Manual Testing ===

Since this is primarily a frontend-focused project, the scope of testing was limited to validating user interactions, navigation flows, and visual consistency. Most of the testing efforts were concentrated on ensuring that the interface behaved as expected and provided a seamless experience for the user.

* '''Save Button :'''
The "Save" button was tested to ensure it successfully saved changes to assignments and displayed a confirmation banner. After making modifications to assignment details and clicking "Save," a green success banner appeared at the top of the screen, lasting for 3 seconds before disappearing. To confirm the functionality, the page was reloaded, and the changes were verified as correctly saved. This ensured that the save operation performed as intended without any issues.

* '''Back Button :'''
The "Back" button was tested to confirm that it redirected users to the "Manage Assignments" page as expected. After clicking the "Back" button from the "Etc" tab, the system navigated seamlessly to the appropriate page. All data remained intact, and the redirection was smooth, ensuring the user could return to the assignment management page without complications.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Demo Video ==

For a detailed walkthrough of the UI we implemented, you can watch this [https://youtu.be/A_FB3_QycVs demo video]

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/pankhuri03/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-10T03:49:41Z

Snukara: /* Code Snippets */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

To improve the usability and visual appeal of the "Etc" tab, we integrated icons into each functional tile. These icons, primarily sourced from React Material UI, were selected to align with their respective actions:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

React Material UI provides a rich library of customizable icons that seamlessly integrate with React-based projects. We used the following command to install the required packages:

<pre>
npm install @mui/material @emotion/styled @emotion/react @mui/icons-material.
</pre>

These visually distinct icons make the tiles more descriptive and user-friendly, acting as intuitive visual cues for administrators. This enhancement not only improves navigation but also adheres to modern design standards, giving the "Etc" tab a polished and professional appearance.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};

// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>
</pre>

* '''TabContent.tsx :'''
This React component, likely part of a larger tab-based interface, dynamically displays content based on the currently selected tab (activeTab).

If the activeTab is set to "Badges", the component renders a simple message ("Badges Content").
If the activeTab is set to "Etc", the component displays a grid of interactive items, each representing a different administrative action. These items are associated with icons and labels, including options like "Add Participant", "Create Teams", "Assign Reviewer", "View Submissions", "View Scores", "View Reports", and "View Delayed Jobs". These items are structured using the etc-grid and etc-item CSS classes for layout.
<pre>
<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>
</pre>
<pre>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

=== Manual Testing ===

Since this is primarily a frontend-focused project, the scope of testing was limited to validating user interactions, navigation flows, and visual consistency. Most of the testing efforts were concentrated on ensuring that the interface behaved as expected and provided a seamless experience for the user.

* '''Save Button :'''
The "Save" button was tested to ensure it successfully saved changes to assignments and displayed a confirmation banner. After making modifications to assignment details and clicking "Save," a green success banner appeared at the top of the screen, lasting for 3 seconds before disappearing. To confirm the functionality, the page was reloaded, and the changes were verified as correctly saved. This ensured that the save operation performed as intended without any issues.

* '''Back Button :'''
The "Back" button was tested to confirm that it redirected users to the "Manage Assignments" page as expected. After clicking the "Back" button from the "Etc" tab, the system navigated seamlessly to the appropriate page. All data remained intact, and the redirection was smooth, ensuring the user could return to the assignment management page without complications.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Demo Video ==

For a detailed walkthrough of the UI we implemented, you can watch this [https://youtu.be/A_FB3_QycVs demo video]

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/pankhuri03/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-10T03:48:42Z

Snukara: /* Code Snippets */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

To improve the usability and visual appeal of the "Etc" tab, we integrated icons into each functional tile. These icons, primarily sourced from React Material UI, were selected to align with their respective actions:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

React Material UI provides a rich library of customizable icons that seamlessly integrate with React-based projects. We used the following command to install the required packages:

<pre>
npm install @mui/material @emotion/styled @emotion/react @mui/icons-material.
</pre>

These visually distinct icons make the tiles more descriptive and user-friendly, acting as intuitive visual cues for administrators. This enhancement not only improves navigation but also adheres to modern design standards, giving the "Etc" tab a polished and professional appearance.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};

// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>
</pre>

* '''TabContent.tsx :'''
This React component, likely part of a larger tab-based interface, dynamically displays content based on the currently selected tab (activeTab).

If the activeTab is set to "Badges", the component renders a simple message ("Badges Content").
If the activeTab is set to "Etc", the component displays a grid of interactive items, each representing a different administrative action. These items are associated with icons and labels, including options like "Add Participant", "Create Teams", "Assign Reviewer", "View Submissions", "View Scores", "View Reports", and "View Delayed Jobs". These items are structured using the etc-grid and etc-item CSS classes for layout.
<pre>
<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

=== Manual Testing ===

Since this is primarily a frontend-focused project, the scope of testing was limited to validating user interactions, navigation flows, and visual consistency. Most of the testing efforts were concentrated on ensuring that the interface behaved as expected and provided a seamless experience for the user.

* '''Save Button :'''
The "Save" button was tested to ensure it successfully saved changes to assignments and displayed a confirmation banner. After making modifications to assignment details and clicking "Save," a green success banner appeared at the top of the screen, lasting for 3 seconds before disappearing. To confirm the functionality, the page was reloaded, and the changes were verified as correctly saved. This ensured that the save operation performed as intended without any issues.

* '''Back Button :'''
The "Back" button was tested to confirm that it redirected users to the "Manage Assignments" page as expected. After clicking the "Back" button from the "Etc" tab, the system navigated seamlessly to the appropriate page. All data remained intact, and the redirection was smooth, ensuring the user could return to the assignment management page without complications.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Demo Video ==

For a detailed walkthrough of the UI we implemented, you can watch this [https://youtu.be/A_FB3_QycVs demo video]

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/pankhuri03/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-10T03:47:46Z

Snukara: /* Code Snippets */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

To improve the usability and visual appeal of the "Etc" tab, we integrated icons into each functional tile. These icons, primarily sourced from React Material UI, were selected to align with their respective actions:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

React Material UI provides a rich library of customizable icons that seamlessly integrate with React-based projects. We used the following command to install the required packages:

<pre>
npm install @mui/material @emotion/styled @emotion/react @mui/icons-material.
</pre>

These visually distinct icons make the tiles more descriptive and user-friendly, acting as intuitive visual cues for administrators. This enhancement not only improves navigation but also adheres to modern design standards, giving the "Etc" tab a polished and professional appearance.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};
<\pre>
<pre>
// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>
</pre>

* '''TabContent.tsx :'''
This React component, likely part of a larger tab-based interface, dynamically displays content based on the currently selected tab (activeTab).

If the activeTab is set to "Badges", the component renders a simple message ("Badges Content").
If the activeTab is set to "Etc", the component displays a grid of interactive items, each representing a different administrative action. These items are associated with icons and labels, including options like "Add Participant", "Create Teams", "Assign Reviewer", "View Submissions", "View Scores", "View Reports", and "View Delayed Jobs". These items are structured using the etc-grid and etc-item CSS classes for layout.
<pre>
<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

=== Manual Testing ===

Since this is primarily a frontend-focused project, the scope of testing was limited to validating user interactions, navigation flows, and visual consistency. Most of the testing efforts were concentrated on ensuring that the interface behaved as expected and provided a seamless experience for the user.

* '''Save Button :'''
The "Save" button was tested to ensure it successfully saved changes to assignments and displayed a confirmation banner. After making modifications to assignment details and clicking "Save," a green success banner appeared at the top of the screen, lasting for 3 seconds before disappearing. To confirm the functionality, the page was reloaded, and the changes were verified as correctly saved. This ensured that the save operation performed as intended without any issues.

* '''Back Button :'''
The "Back" button was tested to confirm that it redirected users to the "Manage Assignments" page as expected. After clicking the "Back" button from the "Etc" tab, the system navigated seamlessly to the appropriate page. All data remained intact, and the redirection was smooth, ensuring the user could return to the assignment management page without complications.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Demo Video ==

For a detailed walkthrough of the UI we implemented, you can watch this [https://youtu.be/A_FB3_QycVs demo video]

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/pankhuri03/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-10T03:45:49Z

Snukara:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

To improve the usability and visual appeal of the "Etc" tab, we integrated icons into each functional tile. These icons, primarily sourced from React Material UI, were selected to align with their respective actions:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

React Material UI provides a rich library of customizable icons that seamlessly integrate with React-based projects. We used the following command to install the required packages:

<pre>
npm install @mui/material @emotion/styled @emotion/react @mui/icons-material.
</pre>

These visually distinct icons make the tiles more descriptive and user-friendly, acting as intuitive visual cues for administrators. This enhancement not only improves navigation but also adheres to modern design standards, giving the "Etc" tab a polished and professional appearance.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};

// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>
</pre>

* '''TabContent.tsx :'''
This React component, likely part of a larger tab-based interface, dynamically displays content based on the currently selected tab (activeTab).

If the activeTab is set to "Badges", the component renders a simple message ("Badges Content").
If the activeTab is set to "Etc", the component displays a grid of interactive items, each representing a different administrative action. These items are associated with icons and labels, including options like "Add Participant", "Create Teams", "Assign Reviewer", "View Submissions", "View Scores", "View Reports", and "View Delayed Jobs". These items are structured using the etc-grid and etc-item CSS classes for layout.
<pre>
<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

=== Manual Testing ===

Since this is primarily a frontend-focused project, the scope of testing was limited to validating user interactions, navigation flows, and visual consistency. Most of the testing efforts were concentrated on ensuring that the interface behaved as expected and provided a seamless experience for the user.

* '''Save Button :'''
The "Save" button was tested to ensure it successfully saved changes to assignments and displayed a confirmation banner. After making modifications to assignment details and clicking "Save," a green success banner appeared at the top of the screen, lasting for 3 seconds before disappearing. To confirm the functionality, the page was reloaded, and the changes were verified as correctly saved. This ensured that the save operation performed as intended without any issues.

* '''Back Button :'''
The "Back" button was tested to confirm that it redirected users to the "Manage Assignments" page as expected. After clicking the "Back" button from the "Etc" tab, the system navigated seamlessly to the appropriate page. All data remained intact, and the redirection was smooth, ensuring the user could return to the assignment management page without complications.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Demo Video ==

For a detailed walkthrough of the UI we implemented, you can watch this [https://youtu.be/A_FB3_QycVs demo video]

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/pankhuri03/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-07T19:39:24Z

Snukara: /* Testing */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

To improve the usability and visual appeal of the "Etc" tab, we integrated icons into each functional tile. These icons, primarily sourced from React Material UI, were selected to align with their respective actions:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

React Material UI provides a rich library of customizable icons that seamlessly integrate with React-based projects. We used the following command to install the required packages:

<pre>
npm install @mui/material @emotion/styled @emotion/react @mui/icons-material.
</pre>

These visually distinct icons make the tiles more descriptive and user-friendly, acting as intuitive visual cues for administrators. This enhancement not only improves navigation but also adheres to modern design standards, giving the "Etc" tab a polished and professional appearance.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};

// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>

<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

=== Manual Testing ===

Since this is primarily a frontend-focused project, the scope of testing was limited to validating user interactions, navigation flows, and visual consistency. Most of the testing efforts were concentrated on ensuring that the interface behaved as expected and provided a seamless experience for the user.

* '''Save Button :'''
The "Save" button was tested to ensure it successfully saved changes to assignments and displayed a confirmation banner. After making modifications to assignment details and clicking "Save," a green success banner appeared at the top of the screen, lasting for 3 seconds before disappearing. To confirm the functionality, the page was reloaded, and the changes were verified as correctly saved. This ensured that the save operation performed as intended without any issues.

* '''Back Button :'''
The "Back" button was tested to confirm that it redirected users to the "Manage Assignments" page as expected. After clicking the "Back" button from the "Etc" tab, the system navigated seamlessly to the appropriate page. All data remained intact, and the redirection was smooth, ensuring the user could return to the assignment management page without complications.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Demo Video ==

For a detailed walkthrough of the UI we implemented, you can watch this [https://youtu.be/A_FB3_QycVs demo video]

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/pankhuri03/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-04T04:55:02Z

Snukara: /* Reimplementation */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

To improve the usability and visual appeal of the "Etc" tab, we integrated icons into each functional tile. These icons, primarily sourced from React Material UI, were selected to align with their respective actions:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

React Material UI provides a rich library of customizable icons that seamlessly integrate with React-based projects. We used the following command to install the required packages:

<pre>
npm install @mui/material @emotion/styled @emotion/react @mui/icons-material.
</pre>

These visually distinct icons make the tiles more descriptive and user-friendly, acting as intuitive visual cues for administrators. This enhancement not only improves navigation but also adheres to modern design standards, giving the "Etc" tab a polished and professional appearance.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};

// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>

<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

=== Manual Testing ===

Since this is primarily a frontend-focused project, the scope of testing was limited to validating user interactions, navigation flows, and visual consistency. Most of the testing efforts were concentrated on ensuring that the interface behaved as expected and provided a seamless experience for the user.

* '''Save Button :'''
The "Save" button was tested to ensure it successfully saved changes to assignments and displayed a confirmation banner. After making modifications to assignment details and clicking "Save," a green success banner appeared at the top of the screen, lasting for 3 seconds before disappearing. To confirm the functionality, the page was reloaded, and the changes were verified as correctly saved. This ensured that the save operation performed as intended without any issues.

* '''Back Button :'''
The "Back" button was tested to confirm that it redirected users to the "Manage Assignments" page as expected. After clicking the "Back" button from the "Etc" tab, the system navigated seamlessly to the appropriate page. All data remained intact, and the redirection was smooth, ensuring the user could return to the assignment management page without complications.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Demo Video ==

For a detailed walkthrough of the UI we implemented, you can watch this [https://youtu.be/A_FB3_QycVs demo video]

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/pankhuri03/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-04T04:51:33Z

Snukara:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

To improve the usability and visual appeal of the "Etc" tab, we integrated icons into each functional tile. These icons, primarily sourced from React Material UI, were selected to align with their respective actions:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

React Material UI offers a dynamic set of customizable icons that fit naturally into React-based projects. By incorporating these visually appealing icons, the updated tiles became more descriptive and user-friendly. The icons provide clear, intuitive visual markers, helping users navigate more efficiently. This improvement aligns with modern design standards, ensuring that even tabs like "Etc" maintain a sleek and contemporary look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};

// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>

<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

=== Manual Testing ===

Since this is primarily a frontend-focused project, the scope of testing was limited to validating user interactions, navigation flows, and visual consistency. Most of the testing efforts were concentrated on ensuring that the interface behaved as expected and provided a seamless experience for the user.

* '''Save Button :'''
The "Save" button was tested to ensure it successfully saved changes to assignments and displayed a confirmation banner. After making modifications to assignment details and clicking "Save," a green success banner appeared at the top of the screen, lasting for 3 seconds before disappearing. To confirm the functionality, the page was reloaded, and the changes were verified as correctly saved. This ensured that the save operation performed as intended without any issues.

* '''Back Button :'''
The "Back" button was tested to confirm that it redirected users to the "Manage Assignments" page as expected. After clicking the "Back" button from the "Etc" tab, the system navigated seamlessly to the appropriate page. All data remained intact, and the redirection was smooth, ensuring the user could return to the assignment management page without complications.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Demo Video ==

For a detailed walkthrough of the UI we implemented, you can watch this [https://youtu.be/A_FB3_QycVs demo video]

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/pankhuri03/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-04T03:00:16Z

Snukara: /* Manual Testing */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

To improve the usability and visual appeal of the "Etc" tab, we integrated icons into each functional tile. These icons, primarily sourced from React Material UI, were selected to align with their respective actions:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

React Material UI offers a dynamic set of customizable icons that fit naturally into React-based projects. By incorporating these visually appealing icons, the updated tiles became more descriptive and user-friendly. The icons provide clear, intuitive visual markers, helping users navigate more efficiently. This improvement aligns with modern design standards, ensuring that even tabs like "Etc" maintain a sleek and contemporary look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};

// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>

<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

=== Manual Testing ===

Since this is primarily a frontend-focused project, the scope of testing was limited to validating user interactions, navigation flows, and visual consistency. Most of the testing efforts were concentrated on ensuring that the interface behaved as expected and provided a seamless experience for the user.

* '''Save Button :'''
The "Save" button was tested to ensure it successfully saved changes to assignments and displayed a confirmation banner. After making modifications to assignment details and clicking "Save," a green success banner appeared at the top of the screen, lasting for 3 seconds before disappearing. To confirm the functionality, the page was reloaded, and the changes were verified as correctly saved. This ensured that the save operation performed as intended without any issues.

* '''Back Button :'''
The "Back" button was tested to confirm that it redirected users to the "Manage Assignments" page as expected. After clicking the "Back" button from the "Etc" tab, the system navigated seamlessly to the appropriate page. All data remained intact, and the redirection was smooth, ensuring the user could return to the assignment management page without complications.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/pankhuri03/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-04T02:59:51Z

Snukara: /* Testing */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

To improve the usability and visual appeal of the "Etc" tab, we integrated icons into each functional tile. These icons, primarily sourced from React Material UI, were selected to align with their respective actions:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

React Material UI offers a dynamic set of customizable icons that fit naturally into React-based projects. By incorporating these visually appealing icons, the updated tiles became more descriptive and user-friendly. The icons provide clear, intuitive visual markers, helping users navigate more efficiently. This improvement aligns with modern design standards, ensuring that even tabs like "Etc" maintain a sleek and contemporary look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};

// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>

<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

=== Manual Testing ===

Since this is primarily a frontend-focused project, the scope of testing was limited to validating user interactions, navigation flows, and visual consistency. Most of the testing efforts were concentrated on ensuring that the interface behaved as expected and provided a seamless experience for the user.

# '''Save Button :'''
The "Save" button was tested to ensure it successfully saved changes to assignments and displayed a confirmation banner. After making modifications to assignment details and clicking "Save," a green success banner appeared at the top of the screen, lasting for 3 seconds before disappearing. To confirm the functionality, the page was reloaded, and the changes were verified as correctly saved. This ensured that the save operation performed as intended without any issues.

# '''Back Button :'''
The "Back" button was tested to confirm that it redirected users to the "Manage Assignments" page as expected. After clicking the "Back" button from the "Etc" tab, the system navigated seamlessly to the appropriate page. All data remained intact, and the redirection was smooth, ensuring the user could return to the assignment management page without complications.

# '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/pankhuri03/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-04T02:01:03Z

Snukara: /* Code Snippets */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

To improve the usability and visual appeal of the "Etc" tab, we integrated icons into each functional tile. These icons, primarily sourced from React Material UI, were selected to align with their respective actions:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

React Material UI offers a dynamic set of customizable icons that fit naturally into React-based projects. By incorporating these visually appealing icons, the updated tiles became more descriptive and user-friendly. The icons provide clear, intuitive visual markers, helping users navigate more efficiently. This improvement aligns with modern design standards, ensuring that even tabs like "Etc" maintain a sleek and contemporary look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};

// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>

<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-04T01:59:57Z

Snukara: /* Reimplementation */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

To improve the usability and visual appeal of the "Etc" tab, we integrated icons into each functional tile. These icons, primarily sourced from React Material UI, were selected to align with their respective actions:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

React Material UI offers a dynamic set of customizable icons that fit naturally into React-based projects. By incorporating these visually appealing icons, the updated tiles became more descriptive and user-friendly. The icons provide clear, intuitive visual markers, helping users navigate more efficiently. This improvement aligns with modern design standards, ensuring that even tabs like "Etc" maintain a sleek and contemporary look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
import React, { useState } from 'react';
import './Etc.css';
import scoreIcon from '../../assets/scores.png';
import ParticipantIcon from '@mui/icons-material/Person';
import CreateTeamIcon from '@mui/icons-material/Groups3';
import ReviewerIcon from '@mui/icons-material/AssignmentInd';
import SubmissionIcon from '@mui/icons-material/Assignment';
import ReportIcon from '@mui/icons-material/Summarize';
import DelayedIcon from '@mui/icons-material/AccessTime';

const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};

// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>

<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-04T01:53:55Z

Snukara: /* Reimplementation */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

We enhanced the tiles in the "Etc" tab by incorporating icons that visually represent each action. Here’s how we aligned the icons with their respective functionalities:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

By adding these icons, we improved both the visual appeal and usability of the interface. The icons provide quick visual cues, making it easier for administrators to recognize and access the tools they need. This update not only makes the "Etc" tab more intuitive but also ensures a polished and professional look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i71.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
import React, { useState } from 'react';
import './Etc.css';
import scoreIcon from '../../assets/scores.png';
import ParticipantIcon from '@mui/icons-material/Person';
import CreateTeamIcon from '@mui/icons-material/Groups3';
import ReviewerIcon from '@mui/icons-material/AssignmentInd';
import SubmissionIcon from '@mui/icons-material/Assignment';
import ReportIcon from '@mui/icons-material/Summarize';
import DelayedIcon from '@mui/icons-material/AccessTime';

const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};

// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>

<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-04T01:47:27Z

Snukara: /* Code Snippets */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

We enhanced the tiles in the "Etc" tab by incorporating icons that visually represent each action. Here’s how we aligned the icons with their respective functionalities:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

By adding these icons, we improved both the visual appeal and usability of the interface. The icons provide quick visual cues, making it easier for administrators to recognize and access the tools they need. This update not only makes the "Etc" tab more intuitive but also ensures a polished and professional look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i7.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
import React, { useState } from 'react';
import './Etc.css';
import scoreIcon from '../../assets/scores.png';
import ParticipantIcon from '@mui/icons-material/Person';
import CreateTeamIcon from '@mui/icons-material/Groups3';
import ReviewerIcon from '@mui/icons-material/AssignmentInd';
import SubmissionIcon from '@mui/icons-material/Assignment';
import ReportIcon from '@mui/icons-material/Summarize';
import DelayedIcon from '@mui/icons-material/AccessTime';

const EtcView: React.FC = () => {
const [activeTab, setActiveTab] = useState('Etc');
const [showBanner, setShowBanner] = useState(false);

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

// Save Button click handler
const handleSave = () => {
setShowBanner(true);
// Hide banner after 3 seconds
setTimeout(() => {
setShowBanner(false);
}, 3000);
};

// Back button click handler
const handleBack = () => {
window.location.href = '/assignments';
};

return (
<div className="etc-container">
{/* Save banner which pops up once save is clicked */}
{showBanner && (
<div className="success-banner">
The assignment was successfully saved!
</div>
)}
<h2>Editing Assignment: Meta Review Fix_1</h2>
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
// onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
// onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
// onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
// onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>
</div>

<div className="tab-content">
{/* {activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>} */}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>
</div>
</div>
)}
</div>

{/* Footer Action buttons */}
<div className="etc-actions">
<button onClick={handleSave} className="save-button">Save</button>
<button onClick={handleBack} className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-04T01:44:57Z

Snukara: /* Github repository */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

We enhanced the tiles in the "Etc" tab by incorporating icons that visually represent each action. Here’s how we aligned the icons with their respective functionalities:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

By adding these icons, we improved both the visual appeal and usability of the interface. The icons provide quick visual cues, making it easier for administrators to recognize and access the tools they need. This update not only makes the "Etc" tab more intuitive but also ensures a polished and professional look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i7.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

'''These changes can be viewed in this pull request''' [https://github.com/expertiza/reimplementation-front-end/pull/78].

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-04T01:39:09Z

Snukara: /* Testing */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

We enhanced the tiles in the "Etc" tab by incorporating icons that visually represent each action. Here’s how we aligned the icons with their respective functionalities:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

By adding these icons, we improved both the visual appeal and usability of the interface. The icons provide quick visual cues, making it easier for administrators to recognize and access the tools they need. This update not only makes the "Etc" tab more intuitive but also ensures a polished and professional look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i7.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

File:Oodd i71.jpg

2024-12-04T01:37:54Z

Snukara:

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-03T19:06:02Z

Snukara: /* Use Case Diagram */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

We enhanced the tiles in the "Etc" tab by incorporating icons that visually represent each action. Here’s how we aligned the icons with their respective functionalities:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

By adding these icons, we improved both the visual appeal and usability of the interface. The icons provide quick visual cues, making it easier for administrators to recognize and access the tools they need. This update not only makes the "Etc" tab more intuitive but also ensures a polished and professional look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i7.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Integration Testing :'''

Next, we focused on how components worked together. Features such as adding participants, creating teams, and assigning reviewers were tested in combination to ensure seamless interaction. These tests confirmed that the features in the "Etc" tab work harmoniously and that data updates flow properly throughout the system.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-03T18:46:50Z

Snukara:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

We enhanced the tiles in the "Etc" tab by incorporating icons that visually represent each action. Here’s how we aligned the icons with their respective functionalities:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

By adding these icons, we improved both the visual appeal and usability of the interface. The icons provide quick visual cues, making it easier for administrators to recognize and access the tools they need. This update not only makes the "Etc" tab more intuitive but also ensures a polished and professional look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i7.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Integration Testing :'''

Next, we focused on how components worked together. Features such as adding participants, creating teams, and assigning reviewers were tested in combination to ensure seamless interaction. These tests confirmed that the features in the "Etc" tab work harmoniously and that data updates flow properly throughout the system.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-03T18:40:41Z

Snukara: /* Reimplementation */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

We enhanced the tiles in the "Etc" tab by incorporating icons that visually represent each action. Here’s how we aligned the icons with their respective functionalities:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

By adding these icons, we improved both the visual appeal and usability of the interface. The icons provide quick visual cues, making it easier for administrators to recognize and access the tools they need. This update not only makes the "Etc" tab more intuitive but also ensures a polished and professional look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

[[File:oodd i6.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

[[File:oodd i7.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

[[File:oodd i8.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Integration Testing :'''

Next, we focused on how components worked together. Features such as adding participants, creating teams, and assigning reviewers were tested in combination to ensure seamless interaction. These tests confirmed that the features in the "Etc" tab work harmoniously and that data updates flow properly throughout the system.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

File:Oodd i8.jpg

2024-12-03T18:39:04Z

Snukara:

File:Oodd i7.jpg

2024-12-03T18:38:55Z

Snukara:

File:Oodd i6.jpg

2024-12-03T18:38:46Z

Snukara:

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-03T18:38:33Z

Snukara: /* Reimplementation */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

We enhanced the tiles in the "Etc" tab by incorporating icons that visually represent each action. Here’s how we aligned the icons with their respective functionalities:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

By adding these icons, we improved both the visual appeal and usability of the interface. The icons provide quick visual cues, making it easier for administrators to recognize and access the tools they need. This update not only makes the "Etc" tab more intuitive but also ensures a polished and professional look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 6: Adding a Title to the "Etc" Tab'''

In this step, we added a descriptive title, "Editing Assignment: Meta Review Fix_1", at the top of the "Etc" tab. This title dynamically reflects the assignment being edited, providing administrators with clear context for the task they are performing.

* '''Step 7: Implementing Save Confirmation Banner'''

We added a confirmation banner that notifies users of successful changes after clicking the "Save" button. The banner displays the message "The assignment was successfully saved!" in a green box, positioned at the top of the page to provide clear feedback.

The banner is designed to appear immediately and automatically disappear after 3 seconds, offering a non-intrusive way to confirm user actions while maintaining a clean and seamless interface. This feature enhances usability by ensuring users are informed without disrupting their workflow.

* '''Step 8: Navigating to Manage Assignments Page'''

We implemented a seamless navigation flow where clicking the Back button on the "Edit Assignment" page redirects users to the Manage Assignments page. This page features an organized layout with search fields for assignment name, course name, creation date, and updated date, along with pagination controls for browsing through assignments.

The design ensures administrators can efficiently manage assignments while maintaining an intuitive user experience. This functionality aligns with the overall navigation framework, keeping the interface consistent and user-friendly.

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Integration Testing :'''

Next, we focused on how components worked together. Features such as adding participants, creating teams, and assigning reviewers were tested in combination to ensure seamless interaction. These tests confirmed that the features in the "Etc" tab work harmoniously and that data updates flow properly throughout the system.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-02T20:46:28Z

Snukara: /* Plan for Reimplementation */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

We enhanced the tiles in the "Etc" tab by incorporating icons that visually represent each action. Here’s how we aligned the icons with their respective functionalities:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

By adding these icons, we improved both the visual appeal and usability of the interface. The icons provide quick visual cues, making it easier for administrators to recognize and access the tools they need. This update not only makes the "Etc" tab more intuitive but also ensures a polished and professional look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Integration Testing :'''

Next, we focused on how components worked together. Features such as adding participants, creating teams, and assigning reviewers were tested in combination to ensure seamless interaction. These tests confirmed that the features in the "Etc" tab work harmoniously and that data updates flow properly throughout the system.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-02T18:43:29Z

Snukara: /* Reimplementation */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

[[File:oodd i1.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

[[File:oodd i2.jpg|1000px|center]]
<p style="text-align: center;"></p>

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

[[File:oodd i3.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

[[File:oodd i4.jpg |1000px|center]]
<p style="text-align: center;"></p>

* '''Step 5: Adding Iconography to Functional Tiles'''

We enhanced the tiles in the "Etc" tab by incorporating icons that visually represent each action. Here’s how we aligned the icons with their respective functionalities:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

By adding these icons, we improved both the visual appeal and usability of the interface. The icons provide quick visual cues, making it easier for administrators to recognize and access the tools they need. This update not only makes the "Etc" tab more intuitive but also ensures a polished and professional look.

[[File:oodd i5.jpg |1000px|center]]
<p style="text-align: center;"></p>

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Integration Testing :'''

Next, we focused on how components worked together. Features such as adding participants, creating teams, and assigning reviewers were tested in combination to ensure seamless interaction. These tests confirmed that the features in the "Etc" tab work harmoniously and that data updates flow properly throughout the system.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

File:Oodd i5.jpg

2024-12-02T18:40:04Z

Snukara:

File:Oodd i4.jpg

2024-12-02T18:39:55Z

Snukara:

File:Oodd i3.jpg

2024-12-02T18:39:47Z

Snukara:

File:Oodd i2.jpg

2024-12-02T18:39:36Z

Snukara:

File:Oodd i1.jpg

2024-12-02T18:39:19Z

Snukara:

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-02T18:38:13Z

Snukara: /* Reimplementation */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

* '''Step 1: Initial Setup and Navigation Layout'''

The initial phase of our project focused on creating the foundational navigation layout for the admin interface. We introduced a tab-based structure, as illustrated in the provided screenshot, with tabs labeled General, Rubrics, Review Strategy, Due Dates, Badges, and Etc. This design prioritizes clarity, giving administrators straightforward access to different sections of the Assignment Edit page. The active state of the "Etc" tab visually highlights which section the admin is currently working on.

This layout acts as the primary entry point for managing assignments, offering a user-friendly way to navigate the various tools and functionalities available. It ensures that administrators can quickly locate and manage specific features with ease, streamlining the overall workflow.

* '''Step 2: Adding Base Content to the "Etc" Tab'''

The next phase of the project involved establishing the core content structure for the "Etc" tab, as shown in the accompanying screenshot. At this point, placeholder text labeled "Etc Page Content" was used to mark the starting framework for future enhancements.

This foundational step ensured that the tab was fully functional and ready to accommodate additional components and features. It also confirmed that the "Etc" tab integrated seamlessly within the broader navigation system, providing a stable base for iterative improvements.

* '''Step 3: Adding Action Buttons'''

In this phase, action buttons were added to the "Etc" tab to support user interactions. A green "Save" button and a red "Back" button were placed at the bottom of the page. The "Save" button allows users to apply and preserve any changes made, while the "Back" button provides an easy way to return to the previous page.

These additions significantly improve usability by enabling users to take direct and purposeful actions without leaving the "Etc" tab, streamlining their workflow.

* '''Step 4: Integrating Functional Buttons in the "Etc" Tab'''

We’ve enhanced the "Etc" tab by introducing interactive tiles for key administrative actions. These tiles offer direct access to essential tools, including Add Participant, Create Teams, Assign Reviewer, View Submissions, View Scores, View Reports, and View Delayed Jobs. Each tile acts as a gateway to a specific function, streamlining assignment management for administrators.

This update boosts usability by allowing quick navigation to important features. The tiles feature a clean and intuitive design that prioritizes user-friendliness, making it easier for administrators to manage tasks efficiently. The layout integrates seamlessly with the rest of the interface, maintaining consistency across the platform’s tabs and ensuring a cohesive experience.

* '''Step 5: Adding Iconography to Functional Tiles'''

We enhanced the tiles in the "Etc" tab by incorporating icons that visually represent each action. Here’s how we aligned the icons with their respective functionalities:

#Add Participant: User icon.
#Create Teams: Group icon.
#Assign Reviewer: Clipboard icon.
#View Submissions: Document icon.
#View Scores: Report icon.
#View Reports: File icon.
#View Delayed Jobs: Clock icon.

By adding these icons, we improved both the visual appeal and usability of the interface. The icons provide quick visual cues, making it easier for administrators to recognize and access the tools they need. This update not only makes the "Etc" tab more intuitive but also ensures a polished and professional look.

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Integration Testing :'''

Next, we focused on how components worked together. Features such as adding participants, creating teams, and assigning reviewers were tested in combination to ensure seamless interaction. These tests confirmed that the features in the "Etc" tab work harmoniously and that data updates flow properly throughout the system.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-02T18:18:42Z

Snukara:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Reimplementation ==

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Integration Testing :'''

Next, we focused on how components worked together. Features such as adding participants, creating teams, and assigning reviewers were tested in combination to ensure seamless interaction. These tests confirmed that the features in the "Etc" tab work harmoniously and that data updates flow properly throughout the system.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T23:24:12Z

Snukara:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Integration Testing :'''

Next, we focused on how components worked together. Features such as adding participants, creating teams, and assigning reviewers were tested in combination to ensure seamless interaction. These tests confirmed that the features in the "Etc" tab work harmoniously and that data updates flow properly throughout the system.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T23:21:19Z

Snukara: /* Usage of Design Principles */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Design Principles ==

=== Single Responsibility Principle (SRP) ===

Each React component will have a single responsibility, focusing on one specific part of the UI or functionality. For instance:

* The AddParticipantButton component handles only the participant addition functionality.
* The CreateTeamsButton component manages the team creation process independently. This separation of concerns makes the code easier to understand, test, and maintain.

=== Open/Closed Principle ===

Components and functions in this project will be designed to be open for extension but closed for modification. For example:

* The EtcTab container component will be built to accommodate additional task buttons (e.g., new features) without modifying its core logic.
* New task buttons can be added as separate components, extending the UI without altering existing components.

=== DRY Principle ===

The DRY (Don’t Repeat Yourself) principle will be applied throughout this project to reduce code duplication and enhance maintainability. Reusable components like `TaskButton`, centralized API service functions, shared state via React’s Context API, and utility modules will ensure that common logic is abstracted and reused across the application. This approach will streamline the code, making it consistent, easier to update, and more scalable, while also improving readability and reducing the risk of errors. By following the DRY principle, we aim to create a clean and efficient codebase for the "Etc" tab interface.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Usage of Design Principles ==

The development of the admin interface for the "Etc" tab relied on several established design principles, ensuring the code remains maintainable, efficient, and scalable. Here’s an overview of the key principles applied:

* '''SOLID Principles :'''

'''Single Responsibility Principle (SRP) :''' Each system component was crafted with a focused purpose. For example, the EtcView component handles only the rendering of the "Etc" tab, simplifying maintenance and extension while avoiding unnecessary complications.

'''Open/Closed Principle (OCP) :''' The design accommodates enhancements without modifying existing code. This adaptability allows new features, such as additional admin actions or tabs, to integrate seamlessly without destabilizing the system.

'''Liskov Substitution Principle (LSP) :''' Components adhering to shared interfaces can be swapped easily, ensuring smooth functionality. For instance, any component that follows the tab rendering interface can replace another without disrupting operations, promoting code flexibility and reuse.

'''Interface Segregation Principle (ISP) :''' Interfaces were streamlined to include only relevant methods, keeping them clear and easy to use. For example, state management for each tab is handled independently, allowing developers to work efficiently with focused methods.

'''Dependency Inversion Principle (DIP) :''' Abstraction is prioritized, meaning components depend on generalized abstractions rather than specific implementations. This modular approach ensures changes to underlying systems, such as adopting a new state management tool, are straightforward and minimally disruptive.

* '''DRY (Don’t Repeat Yourself) :'''

Redundancy was avoided by creating reusable elements like buttons, icons, and tab structures. This approach allows updates to be implemented universally with minimal effort, saving time and reducing the likelihood of errors during future changes.

* '''Separation of Concerns (SoC) :'''

Functions for handling interactions, like tab switching, are distinct from the visual elements of the UI. This separation ensures UI components focus purely on presentation while state management and event handling remain in dedicated functions, simplifying debugging and future modifications.

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Integration Testing :'''

Next, we focused on how components worked together. Features such as adding participants, creating teams, and assigning reviewers were tested in combination to ensure seamless interaction. These tests confirmed that the features in the "Etc" tab work harmoniously and that data updates flow properly throughout the system.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T23:12:01Z

Snukara: /* Future Scope */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Design Principles ==

=== Single Responsibility Principle (SRP) ===

Each React component will have a single responsibility, focusing on one specific part of the UI or functionality. For instance:

* The AddParticipantButton component handles only the participant addition functionality.
* The CreateTeamsButton component manages the team creation process independently. This separation of concerns makes the code easier to understand, test, and maintain.

=== Open/Closed Principle ===

Components and functions in this project will be designed to be open for extension but closed for modification. For example:

* The EtcTab container component will be built to accommodate additional task buttons (e.g., new features) without modifying its core logic.
* New task buttons can be added as separate components, extending the UI without altering existing components.

=== DRY Principle ===

The DRY (Don’t Repeat Yourself) principle will be applied throughout this project to reduce code duplication and enhance maintainability. Reusable components like `TaskButton`, centralized API service functions, shared state via React’s Context API, and utility modules will ensure that common logic is abstracted and reused across the application. This approach will streamline the code, making it consistent, easier to update, and more scalable, while also improving readability and reducing the risk of errors. By following the DRY principle, we aim to create a clean and efficient codebase for the "Etc" tab interface.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Usage of Design Principles ==

== Future Scope ==

* '''Enhanced Admin Controls and Customization :'''

Admins can benefit significantly from enhanced customization and functionality. A promising upgrade would allow administrators to modify how tools and features are organized or displayed. For instance, giving admins the ability to set default layouts, prioritize sections based on importance, or fine-tune specific button functionalities would make the interface more adaptable to varying needs.

* '''Advanced Data Management and Filtering :'''

As data volumes grow, robust filtering and search tools become crucial. Enhancing these capabilities to include options like role-based filters, activity tracking, or status categorization could simplify the process of finding participants, teams, or submissions. Such advanced search tools would save time and improve efficiency, especially when managing large datasets.

* '''Automated Tasks for Efficiency :'''

Streamlining repetitive tasks through automation can also optimize administrative workflows. Automating processes such as assigning reviewers, sending timely reminders, or notifying admins of new submissions would minimize manual input while ensuring tasks are handled promptly.

* '''Better Reporting and Insights :'''

Lastly, expanding reporting tools with detailed analytics could provide invaluable insights. For example, reports on participant progress or submission timelines could aid in decision-making and system refinement, offering a clearer picture of overall performance and trends.

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Integration Testing :'''

Next, we focused on how components worked together. Features such as adding participants, creating teams, and assigning reviewers were tested in combination to ensure seamless interaction. These tests confirmed that the features in the "Etc" tab work harmoniously and that data updates flow properly throughout the system.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T23:05:17Z

Snukara: /* Testing */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Design Principles ==

=== Single Responsibility Principle (SRP) ===

Each React component will have a single responsibility, focusing on one specific part of the UI or functionality. For instance:

* The AddParticipantButton component handles only the participant addition functionality.
* The CreateTeamsButton component manages the team creation process independently. This separation of concerns makes the code easier to understand, test, and maintain.

=== Open/Closed Principle ===

Components and functions in this project will be designed to be open for extension but closed for modification. For example:

* The EtcTab container component will be built to accommodate additional task buttons (e.g., new features) without modifying its core logic.
* New task buttons can be added as separate components, extending the UI without altering existing components.

=== DRY Principle ===

The DRY (Don’t Repeat Yourself) principle will be applied throughout this project to reduce code duplication and enhance maintainability. Reusable components like `TaskButton`, centralized API service functions, shared state via React’s Context API, and utility modules will ensure that common logic is abstracted and reused across the application. This approach will streamline the code, making it consistent, easier to update, and more scalable, while also improving readability and reducing the risk of errors. By following the DRY principle, we aim to create a clean and efficient codebase for the "Etc" tab interface.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Usage of Design Principles ==

== Future Scope ==

== Testing ==

* '''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

* '''Integration Testing :'''

Next, we focused on how components worked together. Features such as adding participants, creating teams, and assigning reviewers were tested in combination to ensure seamless interaction. These tests confirmed that the features in the "Etc" tab work harmoniously and that data updates flow properly throughout the system.

* '''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T23:03:15Z

Snukara:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Design Principles ==

=== Single Responsibility Principle (SRP) ===

Each React component will have a single responsibility, focusing on one specific part of the UI or functionality. For instance:

* The AddParticipantButton component handles only the participant addition functionality.
* The CreateTeamsButton component manages the team creation process independently. This separation of concerns makes the code easier to understand, test, and maintain.

=== Open/Closed Principle ===

Components and functions in this project will be designed to be open for extension but closed for modification. For example:

* The EtcTab container component will be built to accommodate additional task buttons (e.g., new features) without modifying its core logic.
* New task buttons can be added as separate components, extending the UI without altering existing components.

=== DRY Principle ===

The DRY (Don’t Repeat Yourself) principle will be applied throughout this project to reduce code duplication and enhance maintainability. Reusable components like `TaskButton`, centralized API service functions, shared state via React’s Context API, and utility modules will ensure that common logic is abstracted and reused across the application. This approach will streamline the code, making it consistent, easier to update, and more scalable, while also improving readability and reducing the risk of errors. By following the DRY principle, we aim to create a clean and efficient codebase for the "Etc" tab interface.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Usage of Design Principles ==

== Future Scope ==

== Testing ==

'''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

'''Integration Testing :'''

Next, we focused on how components worked together. Features such as adding participants, creating teams, and assigning reviewers were tested in combination to ensure seamless interaction. These tests confirmed that the features in the "Etc" tab work harmoniously and that data updates flow properly throughout the system.

'''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T23:00:27Z

Snukara: /* Testing */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Design Principles ==

=== Single Responsibility Principle (SRP) ===

Each React component will have a single responsibility, focusing on one specific part of the UI or functionality. For instance:

* The AddParticipantButton component handles only the participant addition functionality.
* The CreateTeamsButton component manages the team creation process independently. This separation of concerns makes the code easier to understand, test, and maintain.

=== Open/Closed Principle ===

Components and functions in this project will be designed to be open for extension but closed for modification. For example:

* The EtcTab container component will be built to accommodate additional task buttons (e.g., new features) without modifying its core logic.
* New task buttons can be added as separate components, extending the UI without altering existing components.

=== DRY Principle ===

The DRY (Don’t Repeat Yourself) principle will be applied throughout this project to reduce code duplication and enhance maintainability. Reusable components like `TaskButton`, centralized API service functions, shared state via React’s Context API, and utility modules will ensure that common logic is abstracted and reused across the application. This approach will streamline the code, making it consistent, easier to update, and more scalable, while also improving readability and reducing the risk of errors. By following the DRY principle, we aim to create a clean and efficient codebase for the "Etc" tab interface.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Testing ==

'''Unit Testing :'''

To ensure the "Etc" tab functions as intended, we conducted thorough testing at multiple levels. First, individual elements like buttons, icons, and text fields were tested to verify that they behaved correctly. For instance, we checked if buttons responded to clicks or if icons displayed without issues. This approach helped us confirm the reliability of each component before assembling the full interface.

'''Integration Testing :'''

Next, we focused on how components worked together. Features such as adding participants, creating teams, and assigning reviewers were tested in combination to ensure seamless interaction. These tests confirmed that the features in the "Etc" tab work harmoniously and that data updates flow properly throughout the system.

'''Responsive Design Testing :'''

Responsive design was also a priority. We tested the interface across various devices, including smartphones, tablets, and desktops, to ensure the layout adjusted smoothly to different screen sizes. These tests guaranteed that the application remained user-friendly and visually intact, regardless of the device used.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T22:54:27Z

Snukara:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Design Principles ==

=== Single Responsibility Principle (SRP) ===

Each React component will have a single responsibility, focusing on one specific part of the UI or functionality. For instance:

* The AddParticipantButton component handles only the participant addition functionality.
* The CreateTeamsButton component manages the team creation process independently. This separation of concerns makes the code easier to understand, test, and maintain.

=== Open/Closed Principle ===

Components and functions in this project will be designed to be open for extension but closed for modification. For example:

* The EtcTab container component will be built to accommodate additional task buttons (e.g., new features) without modifying its core logic.
* New task buttons can be added as separate components, extending the UI without altering existing components.

=== DRY Principle ===

The DRY (Don’t Repeat Yourself) principle will be applied throughout this project to reduce code duplication and enhance maintainability. Reusable components like `TaskButton`, centralized API service functions, shared state via React’s Context API, and utility modules will ensure that common logic is abstracted and reused across the application. This approach will streamline the code, making it consistent, easier to update, and more scalable, while also improving readability and reducing the risk of errors. By following the DRY principle, we aim to create a clean and efficient codebase for the "Etc" tab interface.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Testing ==

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T22:50:28Z

Snukara:

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Design Principles ==

=== Single Responsibility Principle (SRP) ===

Each React component will have a single responsibility, focusing on one specific part of the UI or functionality. For instance:

* The AddParticipantButton component handles only the participant addition functionality.
* The CreateTeamsButton component manages the team creation process independently. This separation of concerns makes the code easier to understand, test, and maintain.

=== Open/Closed Principle ===

Components and functions in this project will be designed to be open for extension but closed for modification. For example:

* The EtcTab container component will be built to accommodate additional task buttons (e.g., new features) without modifying its core logic.
* New task buttons can be added as separate components, extending the UI without altering existing components.

=== DRY Principle ===

The DRY (Don’t Repeat Yourself) principle will be applied throughout this project to reduce code duplication and enhance maintainability. Reusable components like `TaskButton`, centralized API service functions, shared state via React’s Context API, and utility modules will ensure that common logic is abstracted and reused across the application. This approach will streamline the code, making it consistent, easier to update, and more scalable, while also improving readability and reducing the risk of errors. By following the DRY principle, we aim to create a clean and efficient codebase for the "Etc" tab interface.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Github repository ==

Here is the link to the front-end reimplementation:</br>

'''Front end:''' </br> '''github''' [https://github.com/ntummal3/reimplementation-front-end]

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T22:48:07Z

Snukara: /* Conclusion */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Design Principles ==

=== Single Responsibility Principle (SRP) ===

Each React component will have a single responsibility, focusing on one specific part of the UI or functionality. For instance:

* The AddParticipantButton component handles only the participant addition functionality.
* The CreateTeamsButton component manages the team creation process independently. This separation of concerns makes the code easier to understand, test, and maintain.

=== Open/Closed Principle ===

Components and functions in this project will be designed to be open for extension but closed for modification. For example:

* The EtcTab container component will be built to accommodate additional task buttons (e.g., new features) without modifying its core logic.
* New task buttons can be added as separate components, extending the UI without altering existing components.

=== DRY Principle ===

The DRY (Don’t Repeat Yourself) principle will be applied throughout this project to reduce code duplication and enhance maintainability. Reusable components like `TaskButton`, centralized API service functions, shared state via React’s Context API, and utility modules will ensure that common logic is abstracted and reused across the application. This approach will streamline the code, making it consistent, easier to update, and more scalable, while also improving readability and reducing the risk of errors. By following the DRY principle, we aim to create a clean and efficient codebase for the "Etc" tab interface.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Conclusion ==

In conclusion, the redesign of the "Etc" tab introduces meaningful improvements to the user experience on Expertiza's Assignment Edit page. By adopting React and TypeScript, the updated design simplifies key administrative processes like managing participants, creating teams, and assigning reviewers. Its modular, component-driven structure makes the system easier to maintain and scale, ensuring that future updates can be implemented with minimal disruption.

The emphasis on responsive design and performance optimizations ensures the platform works smoothly across various devices, offering users a consistent and efficient way to manage assignments. Looking ahead, this flexible framework paves the way for adding new features and enhancements based on user feedback. Potential upgrades might include advanced reporting tools, more customization options, or even interactive features that make managing assignments even more intuitive. With ongoing iteration, this redesign helps keep Expertiza's interface both modern and responsive to the needs of its users.

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T22:32:29Z

Snukara: /* Code Snippets */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Code Snippets ==

* '''App.tsx :'''

The code snippet we described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Design Principles ==

=== Single Responsibility Principle (SRP) ===

Each React component will have a single responsibility, focusing on one specific part of the UI or functionality. For instance:

* The AddParticipantButton component handles only the participant addition functionality.
* The CreateTeamsButton component manages the team creation process independently. This separation of concerns makes the code easier to understand, test, and maintain.

=== Open/Closed Principle ===

Components and functions in this project will be designed to be open for extension but closed for modification. For example:

* The EtcTab container component will be built to accommodate additional task buttons (e.g., new features) without modifying its core logic.
* New task buttons can be added as separate components, extending the UI without altering existing components.

=== DRY Principle ===

The DRY (Don’t Repeat Yourself) principle will be applied throughout this project to reduce code duplication and enhance maintainability. Reusable components like `TaskButton`, centralized API service functions, shared state via React’s Context API, and utility modules will ensure that common logic is abstracted and reused across the application. This approach will streamline the code, making it consistent, easier to update, and more scalable, while also improving readability and reducing the risk of errors. By following the DRY principle, we aim to create a clean and efficient codebase for the "Etc" tab interface.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Conclusion ==

This design document introduces a step-by-step plan for revamping the "Etc" tab on Expertiza's Assignment Edit page, aiming for a user interface that's smooth and straightforward. Using React and TypeScript, the goal is to simplify administrative tasks—like managing participants, setting up teams, and assigning reviewers—so they’re easier and faster to handle. A clean and modular component design lies at the heart of this solution, making it not only simple to maintain but also flexible enough for future upgrades. Prioritizing responsive design and performance boosts ensures that users enjoy a consistent and efficient experience across different devices.

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T22:31:20Z

Snukara: /* Code Snippets */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Code Snippets ==

* '''App.tsx :'''

The code snippet you described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};
export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Design Principles ==

=== Single Responsibility Principle (SRP) ===

Each React component will have a single responsibility, focusing on one specific part of the UI or functionality. For instance:

* The AddParticipantButton component handles only the participant addition functionality.
* The CreateTeamsButton component manages the team creation process independently. This separation of concerns makes the code easier to understand, test, and maintain.

=== Open/Closed Principle ===

Components and functions in this project will be designed to be open for extension but closed for modification. For example:

* The EtcTab container component will be built to accommodate additional task buttons (e.g., new features) without modifying its core logic.
* New task buttons can be added as separate components, extending the UI without altering existing components.

=== DRY Principle ===

The DRY (Don’t Repeat Yourself) principle will be applied throughout this project to reduce code duplication and enhance maintainability. Reusable components like `TaskButton`, centralized API service functions, shared state via React’s Context API, and utility modules will ensure that common logic is abstracted and reused across the application. This approach will streamline the code, making it consistent, easier to update, and more scalable, while also improving readability and reducing the risk of errors. By following the DRY principle, we aim to create a clean and efficient codebase for the "Etc" tab interface.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Conclusion ==

This design document introduces a step-by-step plan for revamping the "Etc" tab on Expertiza's Assignment Edit page, aiming for a user interface that's smooth and straightforward. Using React and TypeScript, the goal is to simplify administrative tasks—like managing participants, setting up teams, and assigning reviewers—so they’re easier and faster to handle. A clean and modular component design lies at the heart of this solution, making it not only simple to maintain but also flexible enough for future upgrades. Prioritizing responsive design and performance boosts ensures that users enjoy a consistent and efficient experience across different devices.

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T22:29:28Z

Snukara: /* Code Snippets */

==Expertiza==

[http://expertiza.ncsu.edu/ Expertiza] is an open-source, web-based application built on Ruby on Rails. Its main purpose is to provide flexible, interactive assignment management tools, tailored to educational settings. With Expertiza, instructors can create and customize assignments, specifying topics and tasks that students choose based on their interests. This system not only supports varied, self-guided learning experiences but also encourages active student engagement through choice.

The platform is designed to support teamwork, enabling students to collaborate on projects, which aligns well with team-based learning approaches. One of Expertiza’s most notable features is its peer review system. This system lets students evaluate each other’s work, fostering skills in critical thinking, feedback, and self-reflection that are beneficial in both academic and professional contexts.

The review feature on Expertiza is versatile, accepting multiple file formats, URLs, and even content from external sources like wiki pages. This adaptability makes Expertiza suitable for handling a wide variety of assignments and multimedia projects, fitting well with different teaching styles and course needs. Overall, Expertiza is a solid, comprehensive platform that enhances assignment management, collaborative learning, and peer-to-peer interactions within educational settings.

==Problem Statement==

The "Etc" tab on the Assignment Edit page of the Expertiza application is due for a redesign using ReactJS. Currently, this section, which houses various miscellaneous settings, is cluttered and outdated. It lacks intuitive features that would make it easier for users to configure assignment options efficiently. Enhancing this tab aims to improve navigation, layout, and overall aesthetics while retaining its existing functionalities.

A revamped UI should organize settings into clear sections using collapsible panels or tabs, which can help users find specific options quickly without having to scroll through a long list. Introducing tooltips or information icons next to less common settings can also offer helpful context, especially for new users.

Visually, the redesign should use a modern color scheme and flat design elements consistent with the rest of the Expertiza application, giving the tab a cohesive and polished appearance. Replacing text-heavy fields with toggles, dropdowns, or sliders can also streamline the interface, making it more user-friendly. Following ReactJS best practices, the improved "Etc" tab would offer a responsive, engaging, and intuitive interface that simplifies the management of additional assignment configurations and aligns well with the overall platform design.

==Introduction==

This project aims to upgrade the user interface of select parts of the Expertiza application by utilizing modern front-end tools like ReactJS and Typescript. The focus is on redesigning key pages to make them more intuitive, responsive, and easier for users to navigate. By revamping these elements, we aim to solve current usability challenges, simplify the user journey, and create a unified visual style throughout the platform. The enhanced interface will help users handle assignments and tasks more effectively, aligning with contemporary design principles and elevating the overall experience.

== Design ==

=== Frontend (React & TypeScript) ===
The new "Etc" tab interface for the Assignment Edit page in Expertiza will be developed using **React** and **TypeScript**. By incorporating TypeScript, this project aims to create a user interface that is not only visually modern but also highly maintainable and type-safe. TypeScript’s built-in type-checking feature will catch errors during the coding process, significantly reducing issues that might otherwise arise at runtime. This will help streamline debugging and ensure a cleaner, more efficient codebase, ultimately improving both the functionality and longevity of the application.

=== Component Structure ===

==== Main Container Component (`EtcTab`) ====
* The `EtcTab` component will act as the main container for the "Etc" tab, organizing and rendering individual task components in a grid or card layout.
* It will house all task-specific components (`AddParticipantButton`, `CreateTeamsButton`, `AssignReviewerButton`, etc.) and ensure layout responsiveness.

==== Task Button Components ====
* AddParticipantButton
A button component that, when clicked, triggers a modal or redirects to the participant addition form.

* CreateTeamsButton
A button component to initiate the team creation process, either by redirecting to a dedicated page or displaying a modal with relevant options.

* AssignReviewerButton
A button component that opens the reviewer assignment view or triggers actions related to reviewer management.

* ViewSubmissionsButton
A button allowing users to view all assignment submissions, either by navigating to a submissions page or displaying them in a modal.

* ViewScoresButton
A button component for viewing assignment scores, either showing a summary in a modal or linking to a detailed scores page.

* ViewReportsButton
A button component for accessing assignment reports, providing users with an overview of feedback and performance metrics.

* ViewDelayedJobs
A button component for viewing delayed background jobs associated with the assignment

=== Styling ===
The UI will be styled using CSS or CSS-in-JS (e.g., `styled-components`) for a cohesive and visually appealing layout.

==== Grid or Card Layout ====
* Task buttons will be displayed in a grid or card format, providing a clear and organized view.
* Each button will use color coding and icons for better readability and easy navigation.

==== Responsive Design ====
* The UI will adapt to various screen sizes, optimizing for both desktop and mobile devices to ensure a consistent user experience.
* Components will have distinct styles with hover effects and smooth transitions to enhance interactivity.

== List of files added/updated ==

# src/App.tsx
# src/assets/scores.png
# src/pages/Assignments/Etc.css
# src/pages/Assignments/EtcView.tsx

== Code Snippets ==

* '''App.tsx :'''

The code snippet you described integrates a new route, /assignments/etc, using React Router's createBrowserRouter function. This route supports the "Etc" view for editing assignments, tying it to the EtcView component from the ./pages/Assignments/EtcView module. Additionally, a loader property leverages the loadAssignment function to prefetch data, ensuring assignment details are available before the component renders.

This enhancement improves the app's structure by isolating the handling of miscellaneous assignment tasks within a dedicated component. This modular approach not only supports easier future updates or extensions but also maintains clarity and clean separation of concerns. The asynchronous data loading through the loader further boosts user experience by making the interface feel more seamless and responsive.

<pre>
import EtcView from "./pages/Assignments/EtcView";
{
path: "assignments/etc",
element: <EtcView />,
loader: loadAssignment,
},
</pre>

* '''EtcView.tsx :'''

The EtcView.tsx file is a React functional component designed to handle a tabbed interface for the "Etc" section of an assignment edit page. It uses useState to manage the current tab's state, allowing users to switch between options such as "General," "Rubrics," "Review Strategy," "Due Dates," "Badges," and "Etc." Each tab represents a distinct feature within the assignment-editing process.

Within the "Etc" tab, the layout incorporates a grid that displays a variety of interactive elements. These include tools for adding participants, forming teams, assigning reviewers, checking submissions, managing scores and reports, and handling delayed jobs. The interface is visually enhanced with Material UI icons and custom images, creating a polished and intuitive user experience.

Navigation buttons allow users to move between tabs seamlessly, while "Save" and "Back" buttons at the bottom enable straightforward interaction for saving changes or exiting the section. The component's layout relies on CSS classes like etc-container, tab-navigation, and etc-item to ensure a responsive, clean design that adapts to different screen sizes, making it user-friendly and visually cohesive.

<pre>
import React from 'react';
import { useState } from "react";
import './Etc.css';
import { Tab, Tabs} from "react-bootstrap";
// import addParticipantIcon from '../../assets/participant1.png';
import scoreIcon from '../../assets/scores.png';
import ParticipantIcon from '@mui/icons-material/Person';
import PersonPinIcon from '@mui/icons-material/PersonPin';
import CreateTeamIcon from '@mui/icons-material/Groups3';
import ReviewerIcon from '@mui/icons-material/AssignmentInd';
import SubmissionIcon from '@mui/icons-material/Assignment';
// import ScoreIcon from '@mui/icons-material/Grade';
import ReportIcon from '@mui/icons-material/Summarize';
import DelayedIcon from '@mui/icons-material/AccessTime';

const EtcView: React.FC = () => {
// const [currentView, setCurrentView] = useState("general");
// State to track the active tab
const [activeTab, setActiveTab] = useState('Etc');

// Tab click handler
const handleTabClick = (tabName: string) => {
setActiveTab(tabName);
};

return (

<div className="etc-container">
{/* Tab Navigation */}
<div className="tab-navigation">
<button
className={`tab ${activeTab === 'General' ? 'active' : ''}`}
onClick={() => handleTabClick('General')}
>
General
</button>
<button
className={`tab ${activeTab === 'Rubrics' ? 'active' : ''}`}
onClick={() => handleTabClick('Rubrics')}
>
Rubrics
</button>
<button
className={`tab ${activeTab === 'Review Strategy' ? 'active' : ''}`}
onClick={() => handleTabClick('Review Strategy')}
>
Review Strategy
</button>
<button
className={`tab ${activeTab === 'Due Dates' ? 'active' : ''}`}
onClick={() => handleTabClick('Due Dates')}
>
Due Dates
</button>
<button
className={`tab ${activeTab === 'Badges' ? 'active' : ''}`}
onClick={() => handleTabClick('Badges')}
>
Badges
</button>
<button
className={`tab ${activeTab === 'Etc' ? 'active' : ''}`}
onClick={() => handleTabClick('Etc')}
>
Etc
</button>

</div>

{/* <Tabs
id="assignment-tab"
activeKey={currentView}
// onSelect={(k) => setCurrentView(k)}
className="mb-3"
>
<Tab title="General">
</Tab>
<Tab title="Rubrics">
</Tab>
<Tab title="Review Strategy">
</Tab>
<Tab title="Due Dates">
</Tab>
<Tab title="Badges">
</Tab>
<Tab title="Etc">
<EtcView />
</Tab>
</Tabs> */}
<div className="tab-content">
{activeTab === 'General' && <p>General Content</p>}
{activeTab === 'Rubrics' && <p>Rubrics Content</p>}
{activeTab === 'Badges' && <p>Badges Content</p>}
{activeTab === 'Etc' && (
<div>
<div className="etc-grid">
<div className="etc-item">
<ParticipantIcon />
<span>Add Participant</span>
</div>
<div className="etc-item">
<CreateTeamIcon />
<span>Create Teams</span>
</div>
<div className="etc-item">
<ReviewerIcon/>
<span>Assign Reviewer</span>
</div>
<div className="etc-item">
<SubmissionIcon/>
<span>View Submissions</span>
</div>
<div className="etc-item">
{/* <ScoreIcon/> */}
<img src={scoreIcon} alt="View Scores" className="etc-icon" />
<span>View Scores</span>
</div>
<div className="etc-item">
<ReportIcon/>
<span>View Reports</span>
</div>
<div className="etc-item">
<DelayedIcon/>
<span>View Delayed Jobs</span>
</div>

</div>

</div>
)}

</div>

<div className="etc-actions">
<button className="save-button">Save</button>
<button className="back-button">Back</button>
</div>
</div>
);
};

export default EtcView;
</pre>

== Use Case Diagram ==

For this project, creating a use case diagram for the "Etc" tab on the Assignment Edit page in Expertiza could highlight various interactions with the UI. Here's a general outline of possible actors and use cases:

=== Actors: ===

* Instructor/Admin - Primarily interacts with the UI to manage assignment-related tasks.

=== Use Cases: ===

* Add Participants - Instructor can add students or groups to the assignment.
* Create Teams - Instructor creates teams within the assignment.
* Assign Reviewers - Instructor assigns reviewers to specific submissions.
* View Submissions - Instructor views all submissions related to the assignment.
* View Scores - Instructor views scores assigned to each submission.
* View Reports - Instructor can view detailed reports, such as peer reviews and grade distribution.
* View Delayed Jobs - Instructor checks for delayed background jobs associated with the assignment, providing visibility into any tasks still pending or scheduled in the system.

[[File: ou.jpg |750px|center]]

== Plan for Reimplementation ==

The reimplementation of the "Etc" tab will follow a systematic approach using ReactJS and TypeScript, emphasizing maintainability, scalability, and user experience. Each action in the "Etc" tab will be handled as distinct tasks, ensuring modularity and a clear separation of concerns. The following plan outlines the key actions and methods for the new interface:

=== Add Participant Action ===
The `AddParticipantAction` component will be responsible for handling the addition of new participants. It will collect participant information through a form, perform front-end validations, and send a POST request to the backend API. TypeScript will ensure type safety, while error handling will manage invalid or missing input data. Upon successful addition, the new participant's details will be displayed in the UI, updated in real-time.

=== Create Teams Action ===
The `CreateTeamsAction` will enable users to group participants into teams. This action will include a user-friendly interface for selecting participants and defining team sizes or names. The component will handle API requests to create and save team data. The state will be managed using React’s Context API, ensuring all updates reflect instantly across the interface. Type checking with TypeScript will prevent errors during team creation, and users will receive feedback on the success or failure of the action.

=== Assign Reviewer Action ===
The `AssignReviewerAction` will facilitate the reviewer assignment process. It will provide a list of available reviewers and allow users to select and assign them to participants or teams. The action will validate reviewer availability and participant eligibility before sending the assignment request to the backend. Error handling will address conflicts, and the UI will display the updated reviewer assignments in a structured list or table.

=== View Submissions Action ===
The `ViewSubmissionsAction` component will retrieve and display all submissions related to the assignment. It will fetch submission data from the backend using API calls and present it in a sortable and filterable table. Users can view individual submission details, and TypeScript interfaces will ensure consistent data structures. This action will improve user access to assignment submissions, providing a streamlined review experience.

=== View Scores Action ===
The `ViewScoresAction` will offer a summary of assignment scores. It will make GET requests to the backend API to fetch scores data, displaying it in an organized format. The component will include options for filtering scores by participant, team, or date. Type safety will be enforced using TypeScript, reducing the likelihood of data-related errors. The action will focus on delivering clear and concise score information to users.

=== View Reports Action ===
The `ViewReportsAction` will handle the retrieval and display of assignment reports. It will connect with the backend to pull comprehensive reports data, which will be shown in a user-friendly format with options for sorting and exporting. This action will provide users with valuable insights into assignment performance, feedback, and trends, leveraging the structured data from the backend API.

=== View Delayed Jobs Action ===

The `ViewDelayedJobsAction` allows instructors to check for delayed background jobs related to the assignment, providing visibility into tasks that are pending or scheduled in the system. This feature helps track jobs like notifications and score calculations, ensuring transparency and easy monitoring.

This structured approach will ensure a cohesive and efficient reimplementation of the "Etc" tab, enhancing both the usability and functionality of the Expertiza application. Each action and method is designed with a focus on modularity, data integrity, and user feedback, leveraging modern development practices with React and TypeScript.

== Design Principles ==

=== Single Responsibility Principle (SRP) ===

Each React component will have a single responsibility, focusing on one specific part of the UI or functionality. For instance:

* The AddParticipantButton component handles only the participant addition functionality.
* The CreateTeamsButton component manages the team creation process independently. This separation of concerns makes the code easier to understand, test, and maintain.

=== Open/Closed Principle ===

Components and functions in this project will be designed to be open for extension but closed for modification. For example:

* The EtcTab container component will be built to accommodate additional task buttons (e.g., new features) without modifying its core logic.
* New task buttons can be added as separate components, extending the UI without altering existing components.

=== DRY Principle ===

The DRY (Don’t Repeat Yourself) principle will be applied throughout this project to reduce code duplication and enhance maintainability. Reusable components like `TaskButton`, centralized API service functions, shared state via React’s Context API, and utility modules will ensure that common logic is abstracted and reused across the application. This approach will streamline the code, making it consistent, easier to update, and more scalable, while also improving readability and reducing the risk of errors. By following the DRY principle, we aim to create a clean and efficient codebase for the "Etc" tab interface.

== Technologies Used ==

In this project, we chose React.js and TypeScript to create a strong, scalable user interface.

* '''React.js''' a widely used JavaScript library, is ideal for building interactive, single-page applications. Its component-based structure lets us develop reusable UI elements, which streamlines both the creation and upkeep of the platform. React's state management features also ensure a smooth user experience as people move through different areas of the application.

* '''TypeScript''', an extension of JavaScript, introduces static typing to the code, which boosts development efficiency and reduces potential errors. By catching issues during compile time instead of runtime, TypeScript helps us build a more reliable and robust application. Its type-checking system enhances code clarity and readability, simplifying teamwork and future maintenance.

Using React.js and TypeScript together has allowed us to create an application that is user-friendly, efficient, and well-suited to our users' needs.

== Conclusion ==

This design document introduces a step-by-step plan for revamping the "Etc" tab on Expertiza's Assignment Edit page, aiming for a user interface that's smooth and straightforward. Using React and TypeScript, the goal is to simplify administrative tasks—like managing participants, setting up teams, and assigning reviewers—so they’re easier and faster to handle. A clean and modular component design lies at the heart of this solution, making it not only simple to maintain but also flexible enough for future upgrades. Prioritizing responsive design and performance boosts ensures that users enjoy a consistent and efficient experience across different devices.

== Team ==

=== Mentor: ===

Kashika Malick (kmalick@ncsu.edu)

=== Students: ===

Pankhuri Priya (ppriya2@ncsu.edu)

Sreeja Nukarapu (snukara@ncsu.edu)

Navyatej Tummala (ntummal3@ncsu.edu)

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T22:25:34Z

Snukara:

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T22:13:41Z

Snukara:

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-12-01T21:54:39Z

Snukara:

CSC/ECE 517 Fall 2024 - E2489. Create a UI for Assignment Edit page "Etc" tab in ReactJS

2024-11-13T04:07:02Z

Snukara: /* Task Button Components */