fix: primeng 18 backup #1398
fix: primeng 18 backup #1398
Conversation
WalkthroughThis update migrates the application from PrimeNG's legacy Dropdown and InputSwitch components to the new Select and ToggleSwitch components across all templates, modules, and styles. It also updates PrimeNG dependencies to version 18, adjusts configuration and provider setup for the new theming API, and refactors all related CSS selectors and component references accordingly. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AngularApp
participant PrimeNG
participant ThemeProvider
User->>AngularApp: Interacts with Select/ToggleSwitch UI
AngularApp->>PrimeNG: Uses Select/ToggleSwitch components
AngularApp->>ThemeProvider: Applies new theme via providePrimeNG
PrimeNG-->>AngularApp: Emits events (onChange, onBlur, etc.)
AngularApp-->>User: Updates UI and forms accordingly
sequenceDiagram
participant User
participant AngularApp
participant AutoComplete
participant FormControl
User->>AutoComplete: Types value or presses Enter/Comma
AutoComplete->>AngularApp: Triggers onKeyDown/onBlur event
AngularApp->>FormControl: Adds chip value to array
AngularApp-->>AutoComplete: Clears input field
AutoComplete-->>User: Displays updated chip list
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
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 (
|
|
PR description must contain a link to a ClickUp (case-insensitive) |
🔁 Code Duplication Report - Angular
|
|
PR description must contain a link to a ClickUp (case-insensitive) |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🔭 Outside diff range comments (1)
src/app/shared/components/menu/main-menu/main-menu.component.ts (1)
1-1: Incorrect import – useViewChild, notviewChildAngular exports the decorator as
ViewChild(capital V). Importing the lower-case variant compiles but yieldsundefined, breaking DI.Apply:
-import { Component, EventEmitter, Input, OnInit, Output, viewChild } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
🧹 Nitpick comments (2)
src/app/shared/components/input/dropdown/dropdown.component.ts (1)
5-5: Component naming drift ‑ consider renaming for clarityThe selector has moved from
app-dropdowntoapp-select, but
• the file path is still.../dropdown/
• the class remainsDropdownComponent
This mismatch will confuse future readers and make usages hard to grep.Suggestion:
- export class DropdownComponent { + export class SelectComponent {and move the file to
select/select.component.{ts,html,scss}(Angular schematic rename keeps NgModule metadata in sync).
No runtime impact, purely maintainability.src/app/shared/components/export-log/export-log-filter/export-log-filter.component.scss (1)
13-15: Double-space in selector may break rule resolutionThere are two consecutive spaces between
.selectedItemand.p-select-trigger(.selectedItem .p-select-trigger). Most browsers treat it the same as a single space, but it is easy to miss in maintenance and may hint at a copy-paste error. Tighten it to a single space for consistency.-:host ::ng-deep .selectedItem .p-select-trigger { +:host ::ng-deep .selectedItem .p-select-trigger {
| provideAnimationsAsync(), | ||
| providePrimeNG({ | ||
| theme: { | ||
| preset: Lara, | ||
| options: { | ||
| darkModeSelector: false, | ||
| cssLayer: false, | ||
| }, | ||
| }, | ||
| }), |
There was a problem hiding this comment.
Fix trailing comma formatting issues.
The PrimeNG configuration is correct, but there are ESLint comma-dangle violations that need to be fixed.
Apply this diff to fix the trailing comma issues:
providePrimeNG({
theme: {
preset: Lara,
options: {
- darkModeSelector: false,
- cssLayer: false,
+ darkModeSelector: false,
+ cssLayer: false
},
- },
+ }
}),Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 GitHub Check: lint
[failure] 53-53:
Unexpected trailing comma
[failure] 52-52:
Unexpected trailing comma
[failure] 51-51:
Unexpected trailing comma
🪛 GitHub Actions: TypeScript Lint Check
[error] 51-51: ESLint: Unexpected trailing comma (comma-dangle)
🤖 Prompt for AI Agents
In src/app/app.module.ts between lines 45 and 54, the PrimeNG configuration
object has trailing comma formatting issues causing ESLint comma-dangle
violations. Remove the trailing commas after the last properties in the nested
objects, specifically after the options object and the theme object, to comply
with ESLint rules.
| import { ToastModule } from 'primeng/toast'; | ||
| import { InputTextModule } from 'primeng/inputtext'; | ||
| import { DropdownModule } from 'primeng/dropdown'; | ||
| import { ToggleSwitchModule } from 'primeng/toggleswitch'; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify module import consolidation.
The import shows only ToggleSwitchModule being added, but the AI summary mentions that multiple modules (InputSwitchModule, RadioButtonModule, ToastModule, InputTextModule, and DropdownModule) were replaced. Please confirm that all necessary UI components are still available to the Intacct shared components.
🏁 Script executed:
#!/bin/bash
# Description: Check which PrimeNG components are used in Intacct shared components
# Expected: Verify that all required UI components have appropriate modules imported
echo "Checking PrimeNG component usage in Intacct shared components..."
# Find all component files in the intacct-shared directory
fd -e html -e ts . src/app/integrations/intacct/intacct-shared/
echo -e "\n=== Checking for PrimeNG component usage ==="
# Check for various PrimeNG components in templates
echo "RadioButton usage:"
rg "p-radioButton|RadioButton" src/app/integrations/intacct/intacct-shared/ -A 2
echo -e "\nToast usage:"
rg "p-toast|MessageService" src/app/integrations/intacct/intacct-shared/ -A 2
echo -e "\nInputText usage:"
rg "p-inputText|pInputText" src/app/integrations/intacct/intacct-shared/ -A 2
echo -e "\nToggleSwitch/InputSwitch usage:"
rg "p-toggleSwitch|p-inputSwitch" src/app/integrations/intacct/intacct-shared/ -A 2
echo -e "\nSelect/Dropdown usage:"
rg "p-select|p-dropdown" src/app/integrations/intacct/intacct-shared/ -A 2Length of output: 24453
🏁 Script executed:
#!/bin/bash
# Display the imports and NgModule metadata of intacct-shared.module.ts for review
sed -n '1,200p' src/app/integrations/intacct/intacct-shared/intacct-shared.module.tsLength of output: 1535
Import required PrimeNG modules in IntacctSharedModule
The Intacct shared components use pInputText, p-inputSwitch and p-select but the module only imports MultiSelectModule, TooltipModule, DialogModule and ToggleSwitchModule. Add the following to src/app/integrations/intacct/intacct-shared/intacct-shared.module.ts:
• Imports at top of file:
+ import { InputTextModule } from 'primeng/inputtext';
+ import { InputSwitchModule } from 'primeng/inputswitch';
+ import { DropdownModule } from 'primeng/dropdown';• NgModule imports array:
imports: [
CommonModule,
SharedModule,
FormsModule,
ReactiveFormsModule,
MultiSelectModule,
TooltipModule,
DialogModule,
- ToggleSwitchModule
+ InputTextModule,
+ InputSwitchModule,
+ DropdownModule,
+ ToggleSwitchModule
],No RadioButtonModule or ToastModule is needed (no p-radioButton or p-toast usage).
📝 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.
| import { ToggleSwitchModule } from 'primeng/toggleswitch'; | |
| // src/app/integrations/intacct/intacct-shared/intacct-shared.module.ts | |
| // … other imports … | |
| import { ToggleSwitchModule } from 'primeng/toggleswitch'; | |
| + import { InputTextModule } from 'primeng/inputtext'; | |
| + import { InputSwitchModule } from 'primeng/inputswitch'; | |
| + import { DropdownModule } from 'primeng/dropdown'; | |
| @NgModule({ | |
| imports: [ | |
| CommonModule, | |
| SharedModule, | |
| FormsModule, | |
| ReactiveFormsModule, | |
| MultiSelectModule, | |
| TooltipModule, | |
| DialogModule, | |
| + InputTextModule, | |
| + InputSwitchModule, | |
| + DropdownModule, | |
| ToggleSwitchModule | |
| ], | |
| // … declarations, exports, etc. … | |
| }) | |
| export class IntacctSharedModule {} |
🤖 Prompt for AI Agents
In src/app/integrations/intacct/intacct-shared/intacct-shared.module.ts at line
11, the module imports are missing PrimeNG modules required for pInputText,
p-inputSwitch, and p-select components. Add the imports for InputTextModule,
InputSwitchModule, and DropdownModule at the top of the file and include these
modules in the NgModule imports array to ensure the components function
correctly.
| imports: [SharedModule, CardModule, CommonModule, ProgressSpinnerModule, TranslocoModule], | ||
| imports: [SharedModule, CardModule, CommonModule, ProgressSpinnerModule, TranslocoModule, ButtonModule], | ||
| templateUrl: './qbd-direct-download-file.component.html', | ||
| styleUrl: './qbd-direct-download-file.component.scss' |
There was a problem hiding this comment.
Wrong decorator property – use styleUrls, not styleUrl
Angular’s @Component decorator expects styleUrls: string[]; using styleUrl will cause a compile-time error.
- styleUrl: './qbd-direct-download-file.component.scss'
+ styleUrls: ['./qbd-direct-download-file.component.scss']Please update to prevent the template compiler from failing.
📝 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.
| styleUrl: './qbd-direct-download-file.component.scss' | |
| @Component({ | |
| selector: 'app-qbd-direct-download-file', | |
| templateUrl: './qbd-direct-download-file.component.html', | |
| - styleUrl: './qbd-direct-download-file.component.scss' | |
| + styleUrls: ['./qbd-direct-download-file.component.scss'] | |
| }) |
🤖 Prompt for AI Agents
In
src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-download-file/qbd-direct-download-file.component.ts
at line 16, the Angular component decorator uses the incorrect property name
'styleUrl'. Change this to 'styleUrls' and ensure the value is an array of
strings, even if it contains only one stylesheet path, to comply with Angular's
expected syntax and avoid compile-time errors.
| private pDropdown = viewChild(Select); | ||
|
|
||
| isMenuDisabled: boolean = false; | ||
|
|
There was a problem hiding this comment.
@ViewChild usage is invalid – will throw at runtime
viewChild(Select) is not a decorator; the correct pattern is:
- private pDropdown = viewChild(Select);
+ @ViewChild(Select) pDropdown!: Select;Without this fix this.pDropdown()?.clear() will always be undefined, so the dropdown never resets.
📝 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.
| private pDropdown = viewChild(Select); | |
| isMenuDisabled: boolean = false; | |
| @ViewChild(Select) pDropdown!: Select; | |
| isMenuDisabled: boolean = false; |
🤖 Prompt for AI Agents
In src/app/shared/components/menu/main-menu/main-menu.component.ts around lines
45 to 48, the usage of viewChild(Select) is incorrect because viewChild is not a
decorator. Replace it with the proper Angular @ViewChild decorator syntax by
importing and using @ViewChild(Select) with the correct property declaration.
This will ensure that this.pDropdown is properly initialized and
this.pDropdown()?.clear() works as expected to reset the dropdown.
1 participant
Description
Please add PR description here, add screenshots if needed
Clickup
Please add link here
Summary by CodeRabbit
New Features
Bug Fixes
Chores