Frontend/proof print page #799
Conversation
|
""" WalkthroughThis update introduces a new "privilege proof" feature, adding a printer-friendly verification page accessible via a new button on the Licensee Dashboard. It includes a new route, Vue component, styles, localization strings, and associated tests. Several UI and style adjustments support the print layout and conditional navigation rendering. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LicenseeDashboard
participant Router
participant LicenseeProof
User->>LicenseeDashboard: Clicks "Generate Verification"
LicenseeDashboard->>Router: Navigate to LicenseeVerification route
Router->>LicenseeProof: Mount LicenseeProof component
LicenseeProof->>User: Displays privilege proof page
User->>LicenseeProof: Clicks "Print"
LicenseeProof->>User: Triggers browser print dialog
Assessment against linked issues
Suggested reviewers
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
🪧 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
webroot/src/components/Icons/User/User.less (2)
1-6: Future creation date in file headerThe file header indicates a creation date of 5/6/2025, which appears to be in the future. Please update the date to reflect the actual creation date.
-// Created by InspiringApps on 5/6/2025. +// Created by InspiringApps on 5/6/2024.
1-7: Empty stylesheet fileThis file is currently empty apart from the header comments. While this isn't necessarily an issue if styles will be added later or if the component doesn't require specific styles, consider adding a comment explaining why the file exists if it's intentionally empty.
// // User.less // CompactConnect // // Created by InspiringApps on 5/6/2025. // +// This file intentionally left empty as all styles are defined in User.vue's <style> sectionwebroot/src/components/Icons/User/User.ts (1)
10-19: Component structure is clean, but contains commented-out code.The User icon component is correctly implemented using the vue-facing-decorator pattern. However, there's an unnecessary commented-out export statement at line 18 that should be removed.
export default toNative(User); -// export default User;webroot/src/pages/LicenseeProof/LicenseeProof.ts (2)
67-69: Consider filtering licenses more specifically for the proof document.The component uses
activeHomeJurisdictionLicenses()which is appropriate, but consider whether additional filtering criteria should be applied for this specific document view.
47-49: Consider adding date format localization.The current date format is hardcoded to "MMM D, YYYY", which may not be appropriate for all locales. Consider using the user's locale settings to determine the date format.
- return moment().format('MMM D, YYYY'); + return moment().locale(this.$i18n.locale).format('L');
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (23)
webroot/.stylelintrc.json(1 hunks)webroot/src/components/Icons/User/User.less(1 hunks)webroot/src/components/Icons/User/User.spec.ts(1 hunks)webroot/src/components/Icons/User/User.ts(1 hunks)webroot/src/components/Icons/User/User.vue(1 hunks)webroot/src/components/Page/PageContainer/PageContainer.less(2 hunks)webroot/src/components/Page/PageContainer/PageContainer.ts(1 hunks)webroot/src/components/Page/PageContainer/PageContainer.vue(1 hunks)webroot/src/components/Page/PageHeader/PageHeader.less(1 hunks)webroot/src/locales/en.json(3 hunks)webroot/src/locales/es.json(3 hunks)webroot/src/models/License/License.model.spec.ts(1 hunks)webroot/src/models/License/License.model.ts(1 hunks)webroot/src/pages/LicenseeDashboard/LicenseeDashboard.less(2 hunks)webroot/src/pages/LicenseeDashboard/LicenseeDashboard.ts(3 hunks)webroot/src/pages/LicenseeDashboard/LicenseeDashboard.vue(2 hunks)webroot/src/pages/LicenseeProof/LicenseeProof.less(1 hunks)webroot/src/pages/LicenseeProof/LicenseeProof.spec.ts(1 hunks)webroot/src/pages/LicenseeProof/LicenseeProof.ts(1 hunks)webroot/src/pages/LicenseeProof/LicenseeProof.vue(1 hunks)webroot/src/router/routes.ts(1 hunks)webroot/src/styles.common/_reset.less(1 hunks)webroot/src/styles.common/mixins/buttons.less(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
webroot/src/components/Icons/User/User.spec.ts (2)
webroot/tests/helpers/setup.ts (1)
mountShallow(221-221)webroot/src/models/User/User.model.ts (1)
User(28-80)
webroot/src/components/Icons/User/User.ts (1)
webroot/src/models/User/User.model.ts (1)
User(28-80)
webroot/src/pages/LicenseeProof/LicenseeProof.spec.ts (1)
webroot/tests/helpers/setup.ts (1)
mountShallow(221-221)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: CheckWebroot
🔇 Additional comments (47)
webroot/src/styles.common/_reset.less (1)
44-47: LGTM! Print media query for body's min-heightThe addition of the print media query to set
min-height: autofor the body element is appropriate for the printer-friendly document feature. This will help prevent unnecessary page breaks and improve the print layout.webroot/src/models/License/License.model.ts (1)
144-145: LGTM! Enhanced displayName method with customizable delimiterGood enhancement to allow customization of the delimiter in the
displayNamemethod. This change maintains backward compatibility by keeping the same default value while allowing flexibility for different display contexts, which aligns well with the printer-friendly document feature.webroot/src/models/License/License.model.spec.ts (1)
148-160: LGTM! Comprehensive test for custom delimiterGood test implementation for verifying the new custom delimiter parameter in the
displayNamemethod. The test correctly checks the expected output with the custom delimiter.webroot/src/components/Page/PageHeader/PageHeader.less (1)
21-23: Well-implemented print media query for hiding the headerThis is a good implementation for hiding the page header during printing, which is appropriate for the printer-friendly verification document feature. The change is clean and follows best practices for print stylesheets.
webroot/src/components/Page/PageContainer/PageContainer.vue (1)
15-16: Good implementation of conditional navigation renderingThe conditional rendering of PageNav and dynamic class application is well-implemented. This change aligns with the PR objective of supporting a printer-friendly layout by allowing the navigation to be hidden for specific routes.
webroot/.stylelintrc.json (1)
21-26: Appropriate Stylelint configuration for print stylesGood addition of the
print-color-adjustproperty to the Stylelint ignored properties list. This properly supports the print-specific styles being added throughout the PR without triggering false linting errors.webroot/src/components/Page/PageContainer/PageContainer.less (2)
16-26: Well-structured print media query for consistent document outputExcellent implementation of print-specific styles. The @page rule with specific dimensions and margins ensures consistent printed output, while the container styling adjustments (width, min-height, background color) create an appropriate layout for printed documents.
50-52: Good conditional padding implementationThis change correctly applies left padding only when navigation is present (via the
include-navclass). This works well with the conditional navigation rendering in PageContainer.vue and prevents unnecessary space when navigation is hidden.webroot/src/components/Icons/User/User.spec.ts (1)
12-19: Test coverage looks solid for a simple icon component.The test ensures the basic functionality of mounting the User component works correctly. For an icon component, this level of testing is often sufficient since the component likely has minimal complex behavior.
webroot/src/pages/LicenseeProof/LicenseeProof.spec.ts (1)
12-19: Test coverage is appropriate for the initial component integration.The test verifies that the LicenseeProof page component can be mounted successfully. While minimal, this ensures the component is properly defined and can be rendered without errors.
webroot/src/router/routes.ts (1)
125-130: New route is correctly implemented and follows the established pattern.The route for the licensee verification page is properly configured with:
- Correct path pattern using the compact parameter
- Authentication and access restrictions
- Appropriate lazy loading and chunk naming
- Consistent style with other routes
This implementation will enable users to access the printer-friendly verification document as specified in the PR objectives.
webroot/src/styles.common/mixins/buttons.less (1)
98-104: Good addition - consistency for disabled transparent buttons.Adding proper disabled styling for transparent buttons ensures UI consistency across the application, matching the disabled state styling pattern already used for main and warning buttons.
webroot/src/components/Icons/User/User.vue (2)
8-28: SVG icon implementation looks good.The implementation follows the project pattern for icon components with proper viewBox and evenodd rules.
31-32:✅ Verification successful
Confirm User.ts and User.less exist.
Please confirm the referenced files exist and are properly implemented. If these are empty stub files, consider adding a basic implementation, like exporting the component in the TS file.
🏁 Script executed:
#!/bin/bash # Check if the component's TS and LESS files exist echo "Checking User component related files:" ls -la webroot/src/components/Icons/User/User.ts || echo "User.ts does not exist" ls -la webroot/src/components/Icons/User/User.less || echo "User.less does not exist" # Check if User.ts has proper implementation [ -f webroot/src/components/Icons/User/User.ts ] && \ echo "User.ts content:" && \ cat webroot/src/components/Icons/User/User.ts || \ echo "Cannot display User.ts content"Length of output: 784
Files Verified: User.ts and User.less Are Present and Correct
Both files exist under
webroot/src/components/Icons/User/.
- User.ts defines and decorates a Vue component (
@Component({ name: 'User' })) and exports it viatoNative(User).- User.less is present (84 bytes) for scoped styling.
No further stubs or implementations are needed here.
webroot/src/components/Page/PageContainer/PageContainer.ts (2)
55-63: Route configuration update looks good.Adding 'LicenseeVerification' to the nonPadTopRouteNames array is appropriate for a printer-friendly view.
65-71: Well-implemented navigation control.The new computed property cleanly handles excluding main navigation for the verification page, which is appropriate for a print-focused view.
Verify this property is used in the PageContainer.vue template to conditionally render the navigation:
#!/bin/bash # Check how includeMainNav is used in PageContainer.vue grep -n "includeMainNav" webroot/src/components/Page/PageContainer/PageContainer.vuewebroot/src/pages/LicenseeDashboard/LicenseeDashboard.vue (4)
11-11: Good localization practice.Switching from a dynamic variable to a localization key is a better practice for i18n support.
13-23: New verification document button looks good.The implementation includes proper labeling, aria support, and conditional enabling based on the computed property.
Verify that the
isGenerateProofEnabledandviewLicenseeProofare properly implemented in the TS file:#!/bin/bash # Check for implementation of the generate proof functionality grep -n "isGenerateProofEnabled\|viewLicenseeProof" webroot/src/pages/LicenseeDashboard/LicenseeDashboard.ts
24-42: Button restructuring for better mobile layout.Wrapping each button in its own container with consistent class naming improves layout control, especially on mobile devices as mentioned in the PR objectives.
Verify that the container styling exists in the LESS file:
#!/bin/bash # Check for btn-container styling grep -n "btn-container" webroot/src/pages/LicenseeDashboard/LicenseeDashboard.less
72-72: Good localization for section titles.Using localization keys instead of dynamic variables improves i18n support.
Verify the localization keys exist:
#!/bin/bash # Check if the localization keys are defined echo "Checking localization keys:" grep -n "\"licensing.generateVerification\"" webroot/src/locales/en.json grep -n "\"licensing.generateVerificationSubtext\"" webroot/src/locales/en.json grep -n "\"licensing.privileges\"" webroot/src/locales/en.jsonwebroot/src/locales/es.json (3)
14-14: LGTM: Added Spanish translation for the "print" action.The translation "Imprimir" is correctly added for the common print action, which will be used in the new printer-friendly verification document feature.
549-550: LGTM: Proper translations for the verification document button.These translations properly support the new "Generate verification doc" button on the Licensee Dashboard, with appropriate Spanish text for both the button label and its subtext.
645-649: LGTM: Comprehensive translations for the verification document elements.The Spanish translations for key elements of the licensee verification page are complete and consistent with the English versions. The translations cover all required UI components including section headings and the document footer text.
webroot/src/locales/en.json (3)
12-12: LGTM: Added English translation for the "print" action.Added the common action label for the print functionality that will be used in the printer-friendly verification document.
518-519: LGTM: Clear and concise button labels for document generation.The English labels for the verification document button are user-friendly and clearly communicate the purpose of the button and its functionality.
646-650: LGTM: Well-structured verification document section labels.These translations provide clear headings and instructions for the verification document sections, with a professional-sounding footer text that establishes the document's official nature.
webroot/src/pages/LicenseeDashboard/LicenseeDashboard.ts (3)
52-80: LGTM: Reorganized computed properties for better code structure.The computed properties have been logically reorganized without changing their functionality, maintaining existing behavior while improving code organization.
82-85: LGTM: Added computed property to check for active privileges.This well-implemented computed property correctly determines if the Generate Verification button should be enabled based on the presence of at least one active privilege.
108-113: LGTM: Clean implementation of navigation to verification page.The
viewLicenseeProofmethod properly handles navigation to the new LicenseeVerification route with the appropriate compact type parameter.webroot/src/pages/LicenseeProof/LicenseeProof.ts (4)
8-17: LGTM: Appropriate imports for the new component.All necessary components and models are imported, including icon components, data models, and the moment library for date formatting.
19-26: LGTM: Well-structured component definition.The component is properly registered with a clear name and includes all required icon components as dependencies.
31-74: LGTM: Comprehensive computed properties for document data.The component includes well-implemented computed properties that:
- Access user data from the store
- Retrieve licensee information
- Format dates for display
- Filter active licenses and privileges for the verification document
These properties provide all the necessary data for a complete verification document.
79-81: LGTM: Simple and effective print implementation.The
printHandlermethod correctly useswindow.print()to trigger the browser's native print dialog, which is the standard approach for implementing print functionality in web applications.webroot/src/pages/LicenseeProof/LicenseeProof.vue (7)
1-6: File header includes correct project information.The file header correctly includes the project name (CompactConnect) and creation date (5/2/2025).
8-33: Header section is well-structured with accessibility considerations.The header section includes the app logo with appropriate alt text, navigation links, and date display. The print button includes both click and keyboard event handlers for improved accessibility.
34-49: User information section is well-structured.The practitioner information section uses appropriate iconography and layout, with proper localization for all text elements.
50-72: License section handles dynamic data appropriately.The license section iterates through licenses with proper key usage and displays formatted dates. Using a custom delimiter for
displayName()is a good approach for formatted output.
73-95: Privileges section matches the pattern used for licenses.The privileges section follows the same pattern as the licenses section, maintaining consistency in the UI. The v-for loop uses a unique key with proper string interpolation.
96-97: Footer with localized text enhances document authenticity.The footer includes localized text that likely provides legal or verification information about the document, enhancing its official appearance.
100-101: External script and style files are properly imported.The component correctly imports its TypeScript logic and Less stylesheet, keeping concerns separated for better maintainability.
webroot/src/pages/LicenseeProof/LicenseeProof.less (3)
8-23: Well-structured container with print-friendly setup.The container uses flexbox for layout and includes appropriate spacing. The print color adjustment mixin is well implemented with cross-browser support properties.
24-69: Header layout handles print mode appropriately.The header section has responsive handling with special Safari detection using
@supports (font: -apple-system-body). The navigation links are properly hidden during printing.
77-142: Section containers have consistent styling with print considerations.The section containers use consistent spacing, typography, and layout. The use of
page-break-inside: avoidandbreak-inside: avoidensures clean page breaks during printing.webroot/src/pages/LicenseeDashboard/LicenseeDashboard.less (4)
22-37: Improved responsive layout for top block.The top block now has consistent width and padding with improved breakpoint handling. The alignment and direction changes at different breakpoints improve the responsive layout.
45-60: Button block layout is more mobile-friendly.The button block now uses a column layout on smaller screens and transitions to a row layout at desktop widths, making it more mobile-friendly while maintaining desktop aesthetics.
62-98: Button container provides consistent spacing and layout.The new button container structure provides consistent spacing and alignment for buttons with appropriate responsive behavior. The subtext styling adds a nice touch for additional information.
93-97: Subtext styling enhances UX with clear hierarchy.The new button subtext style with darkened color and smaller font creates a clear visual hierarchy that helps users understand the relationship between buttons and their descriptions.
|
The mobile layout has some slight issues, not sure how important that is however |
|
@jlkravitz This is ready for your review. |
Requirements List
Description List
displayName()helper to support a customizable string delimiterprint-color-adjustTesting List
yarn test:unit:allshould run without errors or warningsyarn serveshould run without errors or warningsyarn buildshould run without errors or warningsCloses #695
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Tests
Chores