diff --git a/docs/Templates/Project-Templates/Component-Review.md b/docs/Templates/Project-Templates/Component-Review.md index 2ec693adb..61e7b1c72 100644 --- a/docs/Templates/Project-Templates/Component-Review.md +++ b/docs/Templates/Project-Templates/Component-Review.md @@ -1,35 +1,65 @@ # Ontrack Component review ## Team Member Name - -First select a component to review from the list below: - +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