Skip to content

Component review for csv-result-modal #610

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LovleenKala wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Component review for csv-result-modal #610

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 44 additions & 14 deletions docs/Templates/Project-Templates/Component-Review.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,65 @@
# Ontrack Component review

## Team Member Name

First select a component to review from the list below:
<https://deakin365.sharepoint.com/:x:/r/sites/ThothTech2/Shared%20Documents/OnTrack%20-%20UI%20Enhancement/T3_2022/Management%20%5BT3_2022%5D/selected_task(revised).xlsx?d=wac02013da5224c958ac60fd96fac7b20&csf=1&web=1&e=UfCmZ5>
Lovleen Kala

## Component Name

Here you should enter the component name, also list all the files in this component.
csv-result-modal.coffee
csv-result-modal.scss
csv-result-modal.tpl.html
csv-upload-modal.tpl.html (Referenced for integration)

## Component purpose

What is the primary purpose of this component and how doesit work? Screenshots are advised.
The CSV Result Modal is a critical component in the OnTrack application, primarily responsible for displaying the results of a CSV file upload. It presents feedback to the user, including the number of successful uploads, errors, and ignored rows, along with detailed messages for each entry. The modal provides a clear, organized interface for reviewing the outcomes of bulk data operations, supporting efficient error detection and data correction.

The csv-result-modal component has a nested component called file-uploader, which is responsible for managing file selection, validation, and server communication. This nested component is referenced in the csv-upload-modal.tpl.html file and plays a crucial role in handling the initial CSV file input before the results are displayed in the csv-result-modal.

![image](https://github.com/user-attachments/assets/bfbc9fcd-5904-4ea4-a3d0-3224f3e5d54e)


Key Features:

Data Categorization: Separates the responses into Success, Errors, and Ignored categories.
Pagination: Handles large result sets through paginated tables.
Responsive UI: Dynamically updates based on the selected response category.
User Feedback: Provides immediate, clear feedback to the user on the status of their data upload.

Before Migration:
![image](https://github.com/user-attachments/assets/c61e742d-5f4b-4c6e-8187-fc97069fbd29)



## Component outcomes and interactions

What are the expected outcomes of the component and what does it interact with, what kind of data
objects is it taking in and passing out?
Expected Outcomes:

## Component migration plan
Display categorized results (Success, Errors, Ignored) after a CSV file upload.
Allow users to toggle between different response categories.
Provide clear feedback on each row's status, including message details and original data.
Support pagination for efficient data navigation.
Interactions:

First add your plan for the migration, how will you do this, what steps are needed. Add some
sketches or diagrams, what will the migrated component look like compared to the current one.
Incoming Data: Receives structured data through the response object, including arrays of success, error, and ignored entries.
Outgoing Data: No explicit outgoing data, but allows for user-driven navigation and review of upload results.

## Component review checklist

Next add a checklist similar to: then create a checklist:
## Component migration plan

Code Translation: Convert the CoffeeScript logic in csv-result-modal.coffee to TypeScript, preserving the original function structure and data handling.
Template Conversion: Migrate the csv-result-modal.tpl.html to a standalone Angular HTML component with Angular Material components for modern styling.
Styling Update: Refactor csv-result-modal.scss to align with the new Angular component structure, replacing Bootstrap classes where necessary.
Pagination Logic: Update pagination to use Angular's built-in components for a more consistent experience.
Event Binding: Replace AngularJS-specific directives like ng-repeat and ng-show with Angular equivalents.

[ ] ability to collect details from the user [ ] succeeds when data is valid [ ] handles errors -
duplicate unit code in the teaching period, or invalid dates [ ] created unit is shown on success
## Component review checklist

[]Successfully displays categorized results (Success, Errors, Ignored).
[]Correctly handles empty categories with appropriate messages (e.g., "No data to show").
[]Implements functional pagination for large result sets.
[]Preserves the original data structure and response object handling.

## Discussion with Client (Andrew Cain)

Finally you will need to take the feedback from Andrew and Discuss any addtional considertions he
Expand Down