feat(persons): add CSV import functionality #4326
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update introduces new React components and utility modules for managing persons, assignments, privileges, enrollments, and spiritual status. It adds CSV import functionality, enhances type safety with runtime type guards, and provides various value setters and togglers for person-related data. Several new utility functions and hooks are exported for broader use. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PersonsAllPage
participant PersonsImport
participant usePersonsImport
participant FileInput
participant DexieDB
User->>PersonsAllPage: Clicks "Import Persons"
PersonsAllPage->>PersonsImport: Renders import UI
User->>PersonsImport: Clicks "Choose File"
PersonsImport->>FileInput: Triggers file input
FileInput-->>PersonsImport: File selected
PersonsImport->>usePersonsImport: handleCsvImport(file)
usePersonsImport->>DexieDB: Parse, validate, and save persons
usePersonsImport-->>PersonsImport: Import result (success/error)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Suggested labels
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
nobodyzero1
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 16
🧹 Nitpick comments (7)
src/features/persons/import_persons/index.tsx (1)
60-60: Consider adding download icon for consistency.The commented-out download icon could enhance the user experience by providing visual context for the template download action.
- // startIcon={<Download />} + startIcon={<IconDownload />}Don't forget to import the IconDownload component if you decide to add it.
src/components/icons/IconUpload.tsx (2)
3-9: Consider reusing the existing IconProps type for consistency.There's already an
IconPropstype defined insrc/views/components/icons/index.types.ts. Consider importing and extending it if needed, rather than creating a duplicate definition.-type IconProps = { - color?: string; - width?: number; - height?: number; - sx?: SxProps<Theme>; - className?: string; -}; +import { IconProps as BaseIconProps } from '@views/components/icons/index.types'; + +type IconProps = BaseIconProps & { + width?: number; + height?: number; + sx?: SxProps<Theme>; + className?: string; +};
20-20: Handle undefined className to avoid "undefined" in class string.When
classNameis undefined, the template literal will produce "organized-icon-upload undefined".- className={`organized-icon-upload ${className}`} + className={`organized-icon-upload${className ? ` ${className}` : ''}`}src/utils/person.ts (1)
11-74: Document that these functions mutate the input PersonType object.All functions in this file mutate the passed
PersonTypeobject. Consider adding JSDoc comments to make this behavior explicit.Example for one function:
+/** + * Updates the first name of a person and recalculates the display name. + * @param newPerson - The person object to update (will be mutated) + * @param value - The new first name + */ export const changeFirstname = (newPerson: PersonType, value: string) => {src/features/persons/import_persons/useImportPersons.ts (2)
226-226: Remove empty line.return dataLines .map((line) => { - try {
369-374: Remove commented out code.errorReason = String(error); console.error('Fehler beim Speichern:', error); - /* displaySnackNotification({ - header: t('tr_personAdded'), - message: 'Fehler beim Speichern:' + error, - severity: 'error', - }); */ }src/utils/spiritual_status.ts (1)
175-279: Consider extracting common history management logicThis function shares significant logic with
toggleUnbaptizedPublisher. Consider extracting the common pattern of closing/deleting history records based on date comparisons into a reusable helper function.Would you like me to help create a reusable helper function to reduce the code duplication between these toggle functions?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
src/locales/de-DE/general.jsonis excluded by!**/*.jsonsrc/locales/en/general.jsonis excluded by!**/*.json
📒 Files selected for processing (12)
src/components/icons/IconUpload.tsx(1 hunks)src/components/icons/index.ts(1 hunks)src/definition/person.ts(1 hunks)src/features/persons/assignments/useAssignments.tsx(2 hunks)src/features/persons/import_persons/index.tsx(1 hunks)src/features/persons/import_persons/useImportPersons.ts(1 hunks)src/pages/persons/all_persons/index.tsx(2 hunks)src/utils/assignments.ts(1 hunks)src/utils/enrollments.ts(1 hunks)src/utils/person.ts(1 hunks)src/utils/privileges.ts(1 hunks)src/utils/spiritual_status.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (6)
src/components/icons/IconUpload.tsx (1)
src/views/components/icons/index.types.ts (1)
IconProps(1-5)
src/utils/assignments.ts (1)
src/definition/person.ts (1)
PersonType(66-104)
src/utils/person.ts (1)
src/definition/person.ts (1)
PersonType(66-104)
src/utils/privileges.ts (2)
src/definition/person.ts (2)
PersonType(66-104)PrivilegeType(4-4)src/utils/date.ts (1)
formatDate(15-17)
src/utils/enrollments.ts (2)
src/definition/person.ts (2)
PersonType(66-104)EnrollmentType(11-11)src/utils/date.ts (1)
formatDate(15-17)
src/utils/spiritual_status.ts (2)
src/definition/person.ts (1)
PersonType(66-104)src/utils/date.ts (2)
formatDate(15-17)dateFirstDayMonth(26-31)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Socket Security: Pull Request Alerts
- GitHub Check: Summary
🔇 Additional comments (19)
src/definition/person.ts (4)
3-4: LGTM! Excellent type safety improvement.The pattern of using
constarrays to derive types enables both compile-time type checking and runtime validation, which is essential for the CSV import functionality.
6-8: LGTM! Robust type guard implementation.The type guard correctly uses the
includesmethod with proper type assertion. This will be valuable for validating CSV data at runtime.
10-11: LGTM! Consistent pattern for enrollment types.Following the same pattern as privilege types ensures consistency across the codebase.
13-15: LGTM! Consistent type guard implementation.The enrollment type guard follows the same robust pattern as the privilege type guard.
src/components/icons/index.ts (1)
302-302: LGTM! Standard icon export.The export follows the established pattern and properly integrates the new IconUpload component.
src/pages/persons/all_persons/index.tsx (2)
18-18: LGTM! Proper import placement.The import is correctly placed with other feature imports and follows the established pattern.
44-44: LGTM! Appropriate UI integration.The PersonsImport component is properly placed within the person editor conditional, alongside other person management actions. This provides a logical user experience.
src/features/persons/assignments/useAssignments.tsx (3)
141-160: LGTM! Well-structured assignment lookup.The memoized lookup object efficiently maps assignment codes to human-readable names. The logic correctly handles both string and enum codes, and the dot notation provides a clear hierarchical structure.
162-164: LGTM! Robust assignment name resolver.The function provides a clean interface for resolving assignment codes to names, with appropriate fallback behavior when no match is found.
335-335: LGTM! Proper hook integration.The getAssignmentName function is correctly added to the hook's return value, making it accessible to consumers.
src/features/persons/import_persons/index.tsx (5)
1-9: LGTM! Clean imports and dependencies.The imports are well-organized and include all necessary dependencies for the component functionality.
10-28: LGTM! Proper state management and event handlers.The component correctly uses React hooks for state management and provides clean event handlers for user interactions.
32-38: LGTM! Clean import button implementation.The button properly uses the IconUpload component and follows the established button pattern in the application.
40-69: LGTM! Well-structured dialog with clear user flow.The dialog provides a clear user experience with descriptive text and appropriate action buttons. The three-step flow (cancel, download template, choose file) is intuitive.
71-77: LGTM! Proper hidden file input implementation.The hidden file input correctly restricts file types to CSV and uses the ref pattern for programmatic access. This is a standard and accessible approach.
src/features/persons/import_persons/useImportPersons.ts (3)
399-411: Verify file encoding handling for international characters.The FileReader uses default encoding. For CSV files with international characters, explicit UTF-8 encoding might be needed.
Consider specifying the encoding:
- reader.readAsText(file); + reader.readAsText(file, 'UTF-8');
288-291: Fix type error: convertValue returns Date, not string.The
convertValuefunction with 'date' type returns a Date object, buttoLowerCase()is being called on it.privilegeStartDateChange( csvperson, csvperson.person_data.privileges[0].id, - convertValue(cols[index].toLowerCase(), 'date') + convertValue(cols[index], 'date') );Likely an incorrect or invalid review comment.
317-321: Fix type error: convertValue returns Date, not string.Same issue as before - calling
toLowerCase()on a Date result.enrollmentStartDateChange( csvperson, csvperson.person_data.enrollments[0].id, - convertValue(cols[index].toLowerCase(), 'date') + convertValue(cols[index], 'date') );Likely an incorrect or invalid review comment.
src/utils/spiritual_status.ts (1)
105-173: Well-structured mutual exclusivity logicThe function correctly handles the complex state transitions between midweek meeting student and unbaptized publisher statuses, with proper consideration for the
isAddPersonflag and date boundaries.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (5)
src/features/persons/import_persons/useImportPersons.ts (5)
258-263: Add null check before accessing enrollment array.The code assumes the enrollment array has at least one element without verification.
+ if (csvperson.person_data.enrollments.length > 0) { enrollmentChange( csvperson, csvperson.person_data.enrollments[0].id, enrollmentType ); + }
367-367: Use translation for error message.The error message is hardcoded in German instead of using the translation system.
- console.error('Fehler beim Parsen der Zeile:', line, error); + console.error('Error parsing line:', line, error);
386-387: Use translation for error messages.Error messages are hardcoded in German.
- console.error('UUID-Kollision:', person.person_uid); + console.error('UUID collision:', person.person_uid);
396-396: Use translation for error message.The error message is hardcoded in German instead of using the translation system.
- console.error('Fehler beim Speichern:', error); + console.error('Error saving person:', error);
265-274: Add null check before accessing enrollment array.Similar to the previous issue, this code accesses
enrollments[0]without checking if the array has elements.if ( + Array.isArray(csvperson.person_data.enrollments) && + csvperson.person_data.enrollments.length > 0 && csvperson.person_data.enrollments[0].id !== undefined && enrollmentType === 'start_date' ) {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/features/persons/assignments/useAssignments.tsx(2 hunks)src/features/persons/import_persons/useImportPersons.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/features/persons/assignments/useAssignments.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/features/persons/import_persons/useImportPersons.ts (11)
src/states/settings.ts (1)
userDataViewState(485-494)src/states/field_service_groups.ts (1)
languageGroupsState(91-95)src/services/dexie/schema.ts (1)
personSchema(192-237)src/states/persons.ts (1)
personsState(17-17)src/definition/person.ts (5)
PersonType(66-104)ALL_PRIVILEGE_TYPES(3-3)ALL_ENROLLMENT_TYPES(10-10)isPrivilegeType(6-8)isEnrollmentType(13-15)src/utils/person.ts (7)
changeFirstname(11-22)changeLastname(24-35)toggleGender(37-53)changeBirthDate(55-59)changeEmailAddress(61-64)changeAddress(71-74)changePhone(66-69)src/utils/spiritual_status.ts (6)
toggleMidweekMeetingStudent(5-55)midweekMeetingStudentStartDateChange(57-68)toggleBaptizedPublisher(175-279)changeBaptismDate(281-307)toggleUnbaptizedPublisher(105-173)toggleActive(309-361)src/utils/assignments.ts (1)
toggleAssignment(6-92)src/utils/privileges.ts (3)
privilegesAddHistory(4-15)privilegeChange(32-45)privilegeStartDateChange(17-30)src/utils/enrollments.ts (3)
enrollmentsAddHistory(4-13)enrollmentChange(30-43)enrollmentStartDateChange(15-28)src/services/dexie/persons.ts (1)
dbPersonsSave(19-106)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Socket Security: Pull Request Alerts
- GitHub Check: Summary
🔇 Additional comments (6)
src/features/persons/import_persons/useImportPersons.ts (6)
63-89: LGTM: Well-structured handler mapping.The handlers mapping provides a clean approach to connect CSV column paths to person property updates. The comment about translation variables is helpful for maintainability.
145-180: LGTM: Sophisticated CSV delimiter detection.The delimiter detection algorithm is well-implemented, using multiple sample lines and consistency scoring to determine the most appropriate delimiter. The bonus scoring for consistent column counts is a nice touch.
114-143: LGTM: Comprehensive value conversion function.The value conversion function handles multiple data types appropriately with proper error handling for JSON parsing and date conversion.
437-444: LGTM: Smart CSV delimiter selection based on locale.Using the locale's decimal separator to determine the appropriate CSV delimiter is a thoughtful approach that will improve user experience across different regions.
489-503: LGTM: Proper CSV template generation with Excel compatibility.The BOM addition for Excel compatibility and proper blob handling for file download are well-implemented. The cleanup of the object URL is also handled correctly.
235-241: Add null check before accessing privileges array.The code accesses
privileges[0]without verifying the array has elements, which could cause a runtime error.if ( Array.isArray(csvperson.person_data.privileges) && csvperson.person_data.privileges.length !== 0 && privilegeName === 'start_date' ) { + if (csvperson.person_data.privileges.length > 0) { privilegeStartDateChange( csvperson, csvperson.person_data.privileges[0].id, convertValue(privilegeValue.toLowerCase(), 'date') ); + } }Likely an incorrect or invalid review comment.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (4)
src/features/persons/import_persons/useImportPersons.ts (4)
367-367: Use translation for error messages.The error message is hardcoded in German instead of using the translation system.
- console.error('Fehler beim Parsen der Zeile:', line, error); + console.error('Error parsing line:', line, error);
386-387: Use translation for error messages.Error messages are hardcoded in German.
- console.error('UUID-Kollision:', person.person_uid); + console.error('UUID collision:', person.person_uid);
396-396: Use translation for error messages.Error message is hardcoded in German.
- console.error('Fehler beim Speichern:', error); + console.error('Error saving person:', error);
409-409: Fix inverted logic condition.The condition
!(importedPersons.length !== 0)is equivalent toimportedPersons.length === 0, which means the success notification will only show when no persons were imported. This seems incorrect.- if (Array.isArray(importedPersons) && importedPersons.length !== 0) { + if (Array.isArray(importedPersons) && importedPersons.length > 0) {
🧹 Nitpick comments (1)
src/features/persons/import_persons/useImportPersons.ts (1)
63-89: Consider adding JSDoc documentation for the handlers object.The handlers object is well-structured with clear mapping between CSV paths and person property handlers. The comment on line 64 is helpful but could be enhanced with JSDoc for better maintainability.
+ /** + * Maps CSV column paths to their corresponding person property handlers. + * The path after 'person_data.' should correspond to the translation variable. + * @example 'person_data.date' → tr_date + */ const handlers: Record<string, (p: PersonType, value: string) => void> = { - // for the correct translation in the csv template it is important that the part after 'person_data.' is correspending to the translation variable like date -> tr_date 'person_data.firstname': (p, v) => changeFirstname(p, v),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/features/persons/import_persons/useImportPersons.ts(1 hunks)src/utils/assignments.ts(1 hunks)src/utils/person.ts(1 hunks)src/utils/spiritual_status.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/utils/person.ts
- src/utils/assignments.ts
- src/utils/spiritual_status.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Socket Security: Pull Request Alerts
🔇 Additional comments (7)
src/features/persons/import_persons/useImportPersons.ts (7)
1-48: LGTM: Comprehensive imports and setup.The imports are well-organized and cover all necessary dependencies for the CSV import functionality. The integration with utility functions and type definitions shows good modular design.
114-143: LGTM: Robust value conversion with proper type handling.The
convertValuefunction handles various data types appropriately with null checks and error handling for JSON parsing and date conversion.
145-180: LGTM: Sophisticated delimiter detection algorithm.The delimiter detection logic is well-implemented with scoring based on column count and consistency. The bonus for consistent column counts across sample lines is a good approach.
437-444: LGTM: Clever locale-based delimiter selection.The logic to determine CSV delimiter based on the locale's decimal separator is a thoughtful approach for better compatibility with regional Excel settings.
481-504: LGTM: Proper CSV template download implementation.The template download function correctly handles BOM for Excel compatibility and properly cleans up the object URL after download.
506-513: LGTM: Clean hook interface.The hook returns a focused API with the three main functions needed for CSV import functionality.
205-242: Add array bounds checking for privileges access.The privilege handling logic correctly checks for empty arrays before adding history, but there's a potential issue when accessing
privileges[0]without verifying the array has elements after the history is added.if ( isPrivilegeType(privilegeName) && ['1', 'true'].includes(privilegeValue.toLowerCase()) ) { privilegesAddHistory(csvperson); - if ( - Array.isArray(csvperson.person_data.privileges) && - csvperson.person_data.privileges.length !== 0 - ) { + if ( + Array.isArray(csvperson.person_data.privileges) && + csvperson.person_data.privileges.length > 0 + ) { privilegeChange( csvperson, csvperson.person_data.privileges[0].id, privilegeName ); } }Likely an incorrect or invalid review comment.
| const handleEnrollment = ( | ||
| enrollmentType: string, | ||
| enrollmentValue: string, | ||
| csvperson: PersonType | ||
| ) => { | ||
| if ( | ||
| Array.isArray(csvperson.person_data.enrollments) && | ||
| csvperson.person_data.enrollments.length === 0 | ||
| ) { | ||
| if ( | ||
| isEnrollmentType(enrollmentType) && | ||
| ['1', 'true'].includes(enrollmentValue.toLowerCase()) | ||
| ) { | ||
| enrollmentsAddHistory(csvperson); | ||
| enrollmentChange( | ||
| csvperson, | ||
| csvperson.person_data.enrollments[0].id, | ||
| enrollmentType | ||
| ); | ||
| } | ||
| } | ||
| if ( | ||
| csvperson.person_data.enrollments[0].id !== undefined && | ||
| enrollmentType === 'start_date' | ||
| ) { | ||
| enrollmentStartDateChange( | ||
| csvperson, | ||
| csvperson.person_data.enrollments[0].id, | ||
| convertValue(enrollmentValue.toLowerCase(), 'date') | ||
| ); | ||
| } | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix array bounds checking for enrollments access.
Similar to the privilege handler, there's a potential issue with accessing enrollments[0] without proper bounds checking.
if (
+ Array.isArray(csvperson.person_data.enrollments) &&
+ csvperson.person_data.enrollments.length > 0 &&
csvperson.person_data.enrollments[0].id !== undefined &&
enrollmentType === 'start_date'
) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleEnrollment = ( | |
| enrollmentType: string, | |
| enrollmentValue: string, | |
| csvperson: PersonType | |
| ) => { | |
| if ( | |
| Array.isArray(csvperson.person_data.enrollments) && | |
| csvperson.person_data.enrollments.length === 0 | |
| ) { | |
| if ( | |
| isEnrollmentType(enrollmentType) && | |
| ['1', 'true'].includes(enrollmentValue.toLowerCase()) | |
| ) { | |
| enrollmentsAddHistory(csvperson); | |
| enrollmentChange( | |
| csvperson, | |
| csvperson.person_data.enrollments[0].id, | |
| enrollmentType | |
| ); | |
| } | |
| } | |
| if ( | |
| csvperson.person_data.enrollments[0].id !== undefined && | |
| enrollmentType === 'start_date' | |
| ) { | |
| enrollmentStartDateChange( | |
| csvperson, | |
| csvperson.person_data.enrollments[0].id, | |
| convertValue(enrollmentValue.toLowerCase(), 'date') | |
| ); | |
| } | |
| }; | |
| const handleEnrollment = ( | |
| enrollmentType: string, | |
| enrollmentValue: string, | |
| csvperson: PersonType | |
| ) => { | |
| if ( | |
| Array.isArray(csvperson.person_data.enrollments) && | |
| csvperson.person_data.enrollments.length === 0 | |
| ) { | |
| if ( | |
| isEnrollmentType(enrollmentType) && | |
| ['1', 'true'].includes(enrollmentValue.toLowerCase()) | |
| ) { | |
| enrollmentsAddHistory(csvperson); | |
| enrollmentChange( | |
| csvperson, | |
| csvperson.person_data.enrollments[0].id, | |
| enrollmentType | |
| ); | |
| } | |
| } | |
| if ( | |
| Array.isArray(csvperson.person_data.enrollments) && | |
| csvperson.person_data.enrollments.length > 0 && | |
| csvperson.person_data.enrollments[0].id !== undefined && | |
| enrollmentType === 'start_date' | |
| ) { | |
| enrollmentStartDateChange( | |
| csvperson, | |
| csvperson.person_data.enrollments[0].id, | |
| convertValue(enrollmentValue.toLowerCase(), 'date') | |
| ); | |
| } | |
| }; |
🤖 Prompt for AI Agents
In src/features/persons/import_persons/useImportPersons.ts around lines 244 to
275, the code accesses enrollments[0] without verifying that the enrollments
array is non-empty, which can cause runtime errors. Fix this by adding proper
checks to ensure csvperson.person_data.enrollments is an array and has at least
one element before accessing enrollments[0].id in all relevant conditions and
function calls within handleEnrollment.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
CHANGELOG.md (1)
1-1: Fix header spelling + markdown-lint violationThe heading is missing the mandatory space after the hashes and “Unrealesed” is misspelled.
Please align with the Keep-a-Changelog convention:-##[Unrealesed] +## [Unreleased]
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
CHANGELOG.md(1 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
CHANGELOG.md
1-1: No space after hash on atx style heading
(MD018, no-missing-space-atx)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Socket Security: Pull Request Alerts
- GitHub Check: Summary
Signed-off-by: nobodyzero1 <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
CHANGELOG.md (1)
1-5: Fix heading typo & follow Markdown/Keep-a-Changelog conventions‒ “Unrealesed” is misspelled
‒ Missing space after the hashes triggers MD018 (##[Unrealesed])
‒ Bullet sentence should start with a capital and end with a period for consistency.-##[Unrealesed] - -### Features - -- **persons:** add button to import persons from CSV file on "All Persons" page, including template download and dynamic header translation for easier onboarding +## [Unreleased] + +### Features + +- **persons:** Add button to import persons from CSV file on "All Persons" page, including template download and dynamic header translation for easier onboarding.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/locales/de-DE/general.jsonis excluded by!**/*.json
📒 Files selected for processing (1)
CHANGELOG.md(2 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
CHANGELOG.md
1-1: No space after hash on atx style heading
(MD018, no-missing-space-atx)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Summary
🔇 Additional comments (1)
CHANGELOG.md (1)
41-50: No additional feedback on these unchanged historical entries.
|
Hello! |
|
Hey @nobodyzero1! Thank you so much for your contribution, we do appreciate it! I already took a look at the deployment and it seems like a great feature. We will review the UX/UI side of the user flow and I'll send you a few comments here in the coming days. It's mostly regarding the button placement, color, and the modal window layout. Small improvements to be clear and easy for users. And afterwards @rhahao will do the review of the code part. Thanks again! |
|
@nobodyzero1 sorry for the delay 🙂 Here's my feedback regarding the user experience flow:
Let me know your thoughts 🙂 @rhahao feel free to share your comments as well if you have any at this point |
|
@ux-git Thank you very much for your feedback and the effort you put into this. I’ll do my best to implement the suggested changes as soon as possible. 👍 |
|
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
src/locales/de-DE/general.jsonis excluded by!**/*.jsonsrc/locales/en/general.jsonis excluded by!**/*.json
📒 Files selected for processing (3)
CHANGELOG.md(1 hunks)src/components/icons/index.ts(1 hunks)src/definition/person.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/icons/index.ts
- src/definition/person.ts
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
CHANGELOG.md
1-1: No space after hash on atx style heading
(MD018, no-missing-space-atx)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Summary
| ##[Unrealesed] | ||
|
|
||
| ### Features | ||
|
|
||
| - **persons:** add button to import persons from CSV file on "All Persons" page, including template download and dynamic header translation for easier onboarding |
There was a problem hiding this comment.
Fix typo and missing space in the “Unreleased” heading
The heading should follow the same pattern as the rest of the changelog (## [x.y.z]).
Current tooling that parses the changelog (e.g., release‐notes generators) will not recognise ##[Unrealesed] because:
- The word is misspelled (“Unrealesed”).
- There is no space after the hash symbols (markdown-lint MD018 violation).
Apply:
-##[Unrealesed]
+## [Unreleased]📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ##[Unrealesed] | |
| ### Features | |
| - **persons:** add button to import persons from CSV file on "All Persons" page, including template download and dynamic header translation for easier onboarding | |
| ## [Unreleased] | |
| ### Features | |
| - **persons:** add button to import persons from CSV file on "All Persons" page, including template download and dynamic header translation for easier onboarding |
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
1-1: No space after hash on atx style heading
(MD018, no-missing-space-atx)
🤖 Prompt for AI Agents
In CHANGELOG.md lines 1 to 5, fix the typo in the heading by changing
"Unrealesed" to "Unreleased" and add a space after the double hash marks so it
reads "## [Unreleased]" to comply with markdown syntax and ensure compatibility
with changelog parsing tools.
Thanks so much! But please make sure to contact us via email to get access to Figma designs to use existing styles, icons and design language 🙂 |
Description
This pull request adds a button for importing person records via CSV on the "All Persons" page, next to the "Add Person" button. The import makes it easier for users to add multiple people at once, which is especially helpful for onboarding and initial setup.
Importing persons data could significantly speed up the onboarding process, as adding each person manually can be tedious.
To implement the import, I extracted reusable logic from the existing "handle" functions into separate utility functions. The CSV import uses these, and the original handlers could also call these functions to avoid code duplication, but to make the testing of the new code easer I did not do this now.
When the import button is clicked, a dialog opens with instructions and an option to download a CSV template. The template headers are based on the PersonType properties, enrollments, privileges, and assignments. The second row contains translations for each header in the user's language. Assignment columns are generated dynamically, so future changes to assignments require no code changes.
The error handling and messaging are still quite basic at this stage, but in my opinion, the feature is already sufficiently robust for practical use and users would benefit from having it available.
Since I am new to contributing to open source projects like this, I am grateful for any suggestions or corrections. Please let me know if there is anything I can improve or if I should follow a different approach.
Dependencies:
No new dependencies were added.
Fixes # (issue)
No related issue
Type of change
Please delete options that are not relevant.
Checklist: