feat: added pdf download #94
Conversation
WalkthroughThe overall changes encompass updates to the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant InvoiceView
participant DownloadIcon
participant exportToPDF
User->>InvoiceView: Click Download Icon
InvoiceView->>DownloadIcon: Trigger onClick
DownloadIcon->>exportToPDF: Call exportToPDF function
exportToPDF->>DownloadIcon: Return PDF generation result
DownloadIcon->>User: Prompt for PDF download
sequenceDiagram
participant User
participant ViewRequests
participant Tooltip
participant DownloadIcon
participant exportToPDF
User->>ViewRequests: Hover over tooltip
ViewRequests->>Tooltip: Show tooltip text
User->>ViewRequests: Click Download Icon
ViewRequests->>DownloadIcon: Trigger onClick
DownloadIcon->>exportToPDF: Call exportToPDF function
exportToPDF->>DownloadIcon: Return PDF generation result
DownloadIcon->>User: Prompt for PDF download
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
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 as PR comments)
Additionally, you can add 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: 6
Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
Files selected for processing (7)
- packages/invoice-dashboard/package.json (1 hunks)
- packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte (4 hunks)
- packages/invoice-dashboard/src/lib/view-requests.svelte (4 hunks)
- packages/invoice-dashboard/src/utils/generateInvoice.ts (1 hunks)
- packages/invoice-dashboard/src/utils/index.ts (1 hunks)
- packages/invoice-dashboard/src/utils/loadScript.ts (1 hunks)
- shared/icons/download.svelte (1 hunks)
Additional comments not posted (7)
packages/invoice-dashboard/src/utils/index.ts (1)
3-3: LGTM!The export statement for
exportToPDFis correctly added and consistent with the rest of the file.packages/invoice-dashboard/src/utils/loadScript.ts (1)
1-9: LGTM!The
loadScriptfunction is well-implemented, correctly handling both script loading and error cases.shared/icons/download.svelte (1)
5-28: LGTM!The SVG icon is correctly implemented and the click event is properly handled.
packages/invoice-dashboard/package.json (2)
34-36: LGTM!The dependencies are correctly updated to include
html2pdf.jsand reordered as needed.
41-41: LGTM!The devDependencies are correctly updated and reordered as needed.
packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte (1)
19-19: LGTM!The import statements for the
Downloadcomponent andexportToPDFfunction are correct.Also applies to: 28-28
packages/invoice-dashboard/src/lib/view-requests.svelte (1)
19-19: LGTM!The import statements for the
Downloadcomponent andexportToPDFfunction are correct.Also applies to: 34-34
packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Files selected for processing (4)
- packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte (4 hunks)
- packages/invoice-dashboard/src/lib/view-requests.svelte (4 hunks)
- shared/components/tooltip.svelte (1 hunks)
- shared/icons/download.svelte (1 hunks)
Additional comments not posted (11)
shared/icons/download.svelte (2)
1-3: Consider adding a type for theonClickprop.To improve type safety, consider specifying the type for the
onClickprop.- export let onClick = () => {}; + export let onClick: () => void = () => {};
5-29: LGTM!The rest of the code looks good and is well-structured.
shared/components/tooltip.svelte (1)
1-49: LGTM!The tooltip component is well-implemented and follows best practices.
packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte (4)
16-20: LGTM!The new imports are well-structured and follow best practices.
29-29: LGTM!The new utility imports are well-structured and follow best practices.
229-231: Add error handling forexportToPDFfunction call.Consider adding error handling for the
exportToPDFfunction call to handle potential errors gracefully.<Download onClick={async () => { try { await exportToPDF(request, currency, config.logo); } catch (error) { console.error("Failed to export PDF:", error); } }} />
459-466: LGTM!The styling changes are well-implemented and follow best practices.
packages/invoice-dashboard/src/lib/view-requests.svelte (4)
12-12: LGTM!The new import for the tooltip component is well-structured and follows best practices.
20-20: LGTM!The new import for the download icon is well-structured and follows best practices.
35-35: LGTM!The new utility imports are well-structured and follow best practices.
491-501: Add error handling forexportToPDFfunction call.Consider adding error handling for the
exportToPDFfunction call to handle potential errors gracefully.<Download onClick={async () => { try { await exportToPDF( request, currencyManager.fromAddress(request?.currencyInfo?.value), config.logo ); } catch (error) { console.error("Failed to export PDF:", error); } }} />
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Files selected for processing (3)
- packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte (4 hunks)
- packages/invoice-dashboard/src/lib/view-requests.svelte (4 hunks)
- packages/invoice-dashboard/src/utils/generateInvoice.ts (1 hunks)
Additional comments not posted (6)
packages/invoice-dashboard/src/utils/generateInvoice.ts (2)
11-21: LGTM!The function
ensureHtml2PdfLoadedis well-implemented with proper error handling.
23-177: LGTM!The function
exportToPDFis well-implemented with proper error handling for the PDF generation process.packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte (2)
Line range hint
16-29: LGTM!The import statements for
Tooltip,Download, andexportToPDFare necessary for the new functionality.
229-239: LGTM!The onClick handler for the
Downloadcomponent is well-implemented with proper error handling.packages/invoice-dashboard/src/lib/view-requests.svelte (2)
Line range hint
12-35: LGTM!The import statements for
Tooltip,Download, andexportToPDFare necessary for the new functionality.
490-508: LGTM!The onClick handler for the
Downloadcomponent is well-implemented with proper error handling.
There was a problem hiding this comment.
Thanks, @sstefdev Looks good, generally. I requested changes related to error handling.
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
Files selected for processing (11)
- packages/invoice-dashboard/components.json (1 hunks)
- packages/invoice-dashboard/package.json (1 hunks)
- packages/invoice-dashboard/postcss.config.js (1 hunks)
- packages/invoice-dashboard/src/app.css (1 hunks)
- packages/invoice-dashboard/src/lib/components/ui/sonner/index.ts (1 hunks)
- packages/invoice-dashboard/src/lib/components/ui/sonner/sonner.svelte (1 hunks)
- packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte (4 hunks)
- packages/invoice-dashboard/src/lib/utils.ts (1 hunks)
- packages/invoice-dashboard/src/lib/view-requests.svelte (5 hunks)
- packages/invoice-dashboard/src/utils/generateInvoice.ts (1 hunks)
- packages/invoice-dashboard/tailwind.config.ts (1 hunks)
Additional context used
Biome
packages/invoice-dashboard/src/lib/utils.ts
[error] 43-43: Template literals are preferred over string concatenation.
Unsafe fix: Use a template literal.
(lint/style/useTemplate)
Additional comments not posted (37)
packages/invoice-dashboard/src/lib/components/ui/sonner/index.ts (1)
1-1: LGTM! Verify the usage of theToastercomponent.The export statement is correct.
Ensure that the
Toastercomponent is correctly implemented and used elsewhere in the codebase.Verification successful
The
Toastercomponent is correctly implemented and used in the codebase.
- The
Toastercomponent is imported and utilized in various parts of the codebase.- Instances of
<Toaster />and<Sonner />components confirm its proper usage.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of the `Toaster` component in the codebase. # Test: Search for the usage of the `Toaster` component. Expect: Proper usage and implementation. rg --type svelte -A 5 $'Toaster'Length of output: 62
Script:
#!/bin/bash # Description: Verify the usage of the `Toaster` component in the codebase. # Find all .svelte files and search for the usage of the `Toaster` component. fd --extension svelte --exec rg 'Toaster' {}Length of output: 173
Script:
#!/bin/bash # Description: Verify the usage of the `Toaster` component in the codebase with more context. # Find all .svelte files and search for the usage of the `Toaster` component, providing more context around each match. fd --extension svelte --exec rg 'Toaster' -A 10 -B 10 {}Length of output: 1940
packages/invoice-dashboard/postcss.config.js (1)
1-6: LGTM!The PostCSS configuration is standard and correct.
packages/invoice-dashboard/components.json (1)
1-14: LGTM! Verify the paths and settings.The configuration for Shadcn Svelte components is correct.
Ensure that the paths and settings are correctly implemented in the codebase.
packages/invoice-dashboard/src/lib/components/ui/sonner/sonner.svelte (2)
1-9: Ensure correct import and type usage.The imports and type usage look correct. Ensure that
svelte-sonnerandmode-watcherare properly installed and available in the project. Additionally, verify that theSonnerPropstype is correctly applied to$$Props.
11-26: Review the Svelte component's markup for correctness.The Svelte component's markup correctly integrates the
Sonnercomponent with the provided theme and class. ThetoastOptionsare well-defined, and the usage of Tailwind CSS classes is appropriate. Ensure that the$$restPropsare correctly passed and utilized.packages/invoice-dashboard/src/app.css (4)
1-3: Tailwind CSS setup looks correct.The
@tailwinddirectives are correctly used to include base, components, and utilities.
6-37: Custom properties for theming are well-defined.The custom properties for light theme are well-defined and provide a solid foundation for theming. Ensure that these variables are used consistently throughout the application.
39-67: Dark mode properties are correctly defined.The custom properties for dark mode are correctly defined using the
.darkclass. This approach allows for easy switching between light and dark themes.
71-77: Usage of@applydirective is appropriate.The
@applydirective is correctly used to apply utility classes to thebodyelement and other elements. This approach simplifies the CSS and aligns with Tailwind's methodology.packages/invoice-dashboard/src/lib/utils.ts (2)
1-8: Class name merging utility is well-implemented.The
cnfunction correctly merges class names usingclsxandtailwind-merge. This utility is essential for handling dynamic class names in a Tailwind CSS project.
10-15: Type definition forFlyAndScaleParamsis clear.The type definition for
FlyAndScaleParamsis clear and provides default values for the parameters used in theflyAndScalefunction.packages/invoice-dashboard/package.json (9)
34-34: Dependency Addition:clsxThe
clsxlibrary is a lightweight utility for constructingclassNamestrings conditionally. This addition is appropriate for managing dynamic class names in a React or Svelte project.
36-36: Dependency Addition:mode-watcherThe
mode-watcherlibrary is used for watching and reacting to changes in modes (e.g., dark mode). Ensure it is necessary for the project's requirements to avoid unnecessary dependencies.Please confirm if
mode-watcheris essential for the project's functionality.
37-37: Dependency Addition:svelte-sonnerThe
svelte-sonnerlibrary is likely used for notifications or toasts in Svelte applications. This addition is beneficial for enhancing user experience with non-intrusive notifications.
38-38: Dependency Addition:tailwind-mergeThe
tailwind-mergelibrary helps merge Tailwind CSS classes without conflicts. This is useful for maintaining clean and manageable class names.
39-39: Dependency Addition:tailwind-variantsThe
tailwind-variantslibrary is used for creating reusable Tailwind CSS variants. This addition is beneficial for maintaining consistent styling across the project.
45-45: DevDependency Addition:@tailwindcss/typographyThe
@tailwindcss/typographyplugin provides a set of prose classes for styling rich text content. This is useful for enhancing the readability and aesthetics of text-heavy content.
46-46: DevDependency Addition:autoprefixerThe
autoprefixerlibrary is used to parse CSS and add vendor prefixes to CSS rules. This ensures cross-browser compatibility of styles.
47-47: DevDependency Addition:postcssThe
postcsslibrary is a tool for transforming CSS with JavaScript plugins. It is often used in conjunction with other tools likeautoprefixerandtailwindcss.
50-50: DevDependency Addition:tailwindcssThe
tailwindcssframework is a utility-first CSS framework for rapidly building custom user interfaces. This addition aligns with the project's focus on improved styling and responsive design.packages/invoice-dashboard/tailwind.config.ts (5)
5-5: Enable Dark ModeThe dark mode is enabled using the
classstrategy. This is a flexible approach that allows toggling dark mode via a CSS class.
6-6: Content Paths ConfigurationThe
contentarray specifies the paths to all template files in the project. This ensures Tailwind CSS can purge unused styles effectively.
7-7: Safelist ConfigurationThe
safelistarray includes thedarkclass, ensuring it is not purged by Tailwind CSS. This is important for maintaining dark mode functionality.
9-15: Container ConfigurationThe
containerconfiguration centers the container and adds padding. This is useful for maintaining a consistent layout across different screen sizes.
17-51: Extend Theme ConfigurationThe
extendsection customizes the default theme with additional colors, border radius values, and font families. This allows for a more tailored design that aligns with the project's branding.packages/invoice-dashboard/src/utils/generateInvoice.ts (6)
1-1: ImportformatUnitsfromviemThe
formatUnitsfunction is used to format currency units. Ensure this function is correctly utilized in the code.
2-2: ImportloadScriptfrom local utilityThe
loadScriptfunction is used to dynamically load external scripts. Ensure this function handles errors properly.
3-3: ImportcalculateItemTotalfrom shared utilitiesThe
calculateItemTotalfunction is used to calculate the total amount for invoice items. Ensure this function is correctly utilized in the code.
5-9: Global Declaration forwindow.html2pdfThe global declaration for
window.html2pdfensures TypeScript recognizes this property. This is necessary for using thehtml2pdflibrary.
11-17: Ensurehtml2pdfis LoadedThe
ensureHtml2PdfLoadedfunction dynamically loads thehtml2pdfscript if it is not already loaded. Ensure this function is called before attempting to usehtml2pdf.
19-169: Export Function:exportToPDFThe
exportToPDFfunction generates a PDF from the provided invoice data. Ensure all dynamic data is correctly injected into the HTML template and that the PDF generation options are appropriately configured.packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte (3)
12-12: LGTM! Import changes look good.The new imports for
toast,Tooltip,Download,walletClientToSigner, andexportToPDFare appropriate for the new functionality.Also applies to: 17-17, 21-21, 30-30
230-247: LGTM! Improved user experience and error handling for the Download button.The
Tooltipcomponent enhances the user experience by providing context for theDownloadbutton. TheonClickevent handler includes comprehensive error handling with a toast notification and console logging.
475-482: LGTM! Styling changes ensure proper alignment of SVG icons.The new styles for the
.invoice-numberclass enhance visual consistency by ensuring proper alignment of SVG icons.packages/invoice-dashboard/src/lib/view-requests.svelte (3)
13-15: LGTM! Import changes look good.The new imports for
Tooltip,Toaster,toast,Download,debounce,exportToPDF, andformatAddressare appropriate for the new functionality.Also applies to: 23-23, 38-38
494-518: LGTM! Improved user experience and error handling for the Download button.The
Tooltipcomponent enhances the user experience by providing context for theDownloadbutton. TheonClickevent handler includes comprehensive error handling with a toast notification and console logging.
586-586: LGTM! Addition of the Toaster component is appropriate.The
Toastercomponent fromsvelte-sonneris appropriately added for displaying user-friendly toast notifications.
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
Files selected for processing (9)
- packages/invoice-dashboard/package.json (1 hunks)
- packages/invoice-dashboard/src/lib/view-requests.svelte (5 hunks)
- shared/components/app.css (1 hunks)
- shared/components/components.json (1 hunks)
- shared/components/package.json (1 hunks)
- shared/components/postcss.config.js (1 hunks)
- shared/components/sonner.svelte (1 hunks)
- shared/components/tailwind.config.ts (1 hunks)
- shared/components/utils.ts (1 hunks)
Additional context used
Biome
shared/components/utils.ts
[error] 43-43: Template literals are preferred over string concatenation.
Unsafe fix: Use a template literal.
(lint/style/useTemplate)
Additional comments not posted (20)
shared/components/postcss.config.js (1)
1-6: LGTM!The PostCSS configuration file correctly sets up TailwindCSS and Autoprefixer plugins. This is a standard configuration for projects using TailwindCSS.
shared/components/components.json (1)
1-14: LGTM!The ShadCN Svelte configuration file is well-structured and includes necessary settings for TailwindCSS integration, aliases, and TypeScript support. This setup is appropriate for the project.
shared/components/package.json (2)
4-10: LGTM!The new dependencies (
clsx,mode-watcher,svelte-sonner,tailwind-merge, andtailwind-variants) are appropriate for enhancing the functionality and styling of the shared components package.
12-19: LGTM!The new devDependencies (
@tailwindcss/typography,autoprefixer,postcss,svelte-check,tailwindcss,tslib, andtypescript) are suitable for improving the development environment and supporting modern CSS and TypeScript practices.shared/components/sonner.svelte (2)
1-10: LGTM! Ensure all imports are necessary.The imports and type definitions are appropriate and necessary for the component.
12-27: LGTM! Ensure styles and properties align with design.The properties and styles applied to the
Sonnercomponent are appropriate and align with the intended design and functionality.packages/invoice-dashboard/package.json (2)
34-36: LGTM! Ensure new dependencies are necessary.The new dependencies
svelte-sonnerand@tailwindcss/typographyare correctly added. Ensure they are necessary for the project.
41-41: LGTM! Ensure new devDependency is necessary.The new devDependency
@tailwindcss/typographyis correctly added. Ensure it is necessary for the project.shared/components/app.css (2)
1-3: LGTM! Ensure Tailwind CSS configurations are correct.The Tailwind CSS configurations are correctly imported.
5-68: LGTM! Ensure custom CSS variables are correct.The custom CSS variables for themes are correctly defined and used.
shared/components/utils.ts (3)
6-8: LGTM!The
cnfunction correctly merges class names usingclsxandtwMerge.
10-15: LGTM!The
FlyAndScaleParamstype is well-defined and provides useful defaults for the transition parameters.
17-61: LGTM!The
flyAndScalefunction correctly implements a custom Svelte transition with fly and scale effects.Tools
Biome
[error] 43-43: Template literals are preferred over string concatenation.
Unsafe fix: Use a template literal.
(lint/style/useTemplate)
shared/components/tailwind.config.ts (3)
1-3: LGTM!The import statements correctly bring in necessary modules and types for Tailwind CSS configuration.
4-62: LGTM!The Tailwind CSS configuration is well-defined and follows best practices.
64-64: LGTM!The export statement correctly exports the Tailwind CSS configuration.
packages/invoice-dashboard/src/lib/view-requests.svelte (4)
12-13: LGTM!The import statements for
Tooltip,Toaster,toast, andDownloadare correctly added and follow best practices.Also applies to: 22-22, 37-37
419-419: LGTM!The added empty table header cell is correctly implemented to accommodate the new download functionality.
492-517: LGTM!The addition of the Tooltip component with the Download icon and error handling for the
exportToPDFfunction is well-implemented and follows best practices.
585-585: LGTM!The addition of the Toaster component to display toast notifications is well-implemented and follows best practices.
| const styleToString = ( | ||
| style: Record<string, number | string | undefined> | ||
| ): string => { | ||
| return Object.keys(style).reduce((str, key) => { | ||
| if (style[key] === undefined) return str; | ||
| return str + `${key}:${style[key]};`; | ||
| }, ""); |
There was a problem hiding this comment.
Use template literals for string concatenation.
Using template literals can improve readability and performance.
- return Object.keys(style).reduce((str, key) => {
- if (style[key] === undefined) return str;
- return str + `${key}:${style[key]};`;
- }, "");
+ return Object.keys(style).reduce((str, key) =>
+ style[key] === undefined ? str : `${str}${key}:${style[key]};`
+ , "");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 styleToString = ( | |
| style: Record<string, number | string | undefined> | |
| ): string => { | |
| return Object.keys(style).reduce((str, key) => { | |
| if (style[key] === undefined) return str; | |
| return str + `${key}:${style[key]};`; | |
| }, ""); | |
| const styleToString = ( | |
| style: Record<string, number | string | undefined> | |
| ): string => { | |
| return Object.keys(style).reduce((str, key) => | |
| style[key] === undefined ? str : `${str}${key}:${style[key]};` | |
| , ""); |
Tools
Biome
[error] 43-43: Template literals are preferred over string concatenation.
Unsafe fix: Use a template literal.
(lint/style/useTemplate)
sstefdev
deleted the
73-export-invoice-as-pdf-from-the-invoice-dashboard-component
branch
closes #73
Feature
User can download their invoice from the dashboard and invoice-view
Downloading
From dashboard:
From invoice-view:
Solution
html2pdf.jsthrough CDN (Vite had problems with every PDF package)Downloaded Invoices (with and without more information)
invoice-1.PDF
invoice-1 (1).PDF
Tooltip
Added Shadcui and Toast
Single Toast:
Multiple Toasts:
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Enhancements
Chores