Migrate from Akita to ngrx state management and MDBModal to Angular Material Dialog #990
Conversation
|
|
…te management Co-authored-by: renemadsen <[email protected]>
|
@copilot but we need to migrate the akita states into the ngrx state structure with recuder, action and selectors like in this example: |
Co-authored-by: renemadsen <[email protected]>
I've migrated the state management to use proper ngrx structure with actions, reducers, and selectors following the pattern in eform-backendconfiguration-plugin. Changes in commit 147ceab:
The state structure now matches the reference implementation you provided. |
|
@copilot now we only have these errors left to fix: #23 27.09 ✘ [ERROR] NG6008: Component CustomersPnPageComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead? [plugin angular-compiler] Follow the same coding style as in https://github.com/microting/eform-backendconfiguration-plugi |
Co-authored-by: renemadsen <[email protected]>
... Fixed the NG6008 errors by adding
All components now follow the same pattern as in eform-backendconfiguration-plugin. |
|
@copilot now we need to migrate other mdbootstrap keywords to material design keywords like these errors: #23 27.24 ✘ [ERROR] NG8003: No directive found with exportAs 'mdbModal'. [plugin angular-compiler] in general all .html files should follow the same implementation patteren as in the example repository: https://github.com/microting/eform-backendconfiguration-plugi |
…it modal Co-authored-by: renemadsen <[email protected]>
... Started migrating from MDBModal to Angular Material Dialog in commit f53064e. This is a large refactoring that requires:
Completed so far:
Still needed:
This follows the pattern in eform-backendconfiguration-plugin where modals are opened with |
|
@copilot we now have these parts left from mdbootstrap: #23 27.11 ✘ [ERROR] NG8003: No directive found with exportAs 'mdbModal'. [plugin angular-compiler] Still use the reference repository for how to migrate to material design patterns: https://github.com/microting/eform-backendconfiguration-plugi |
Co-authored-by: renemadsen <[email protected]>
... Converted the remaining mdbootstrap modal components in commit 9d9ea0d: ✅ customer-pn-add.component - Converted from mdbModal to mat-dialog-title/content/actions, replaced mdbInput with matInput All modal components now use Angular Material Dialog with MatDialogRef and MAT_DIALOG_DATA. Remaining: The parent customers-pn-page component still needs to be updated to open these dialogs using |
|
@copilot we still have places with mdbTooltip, which is not material design attributes: #23 27.30 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Still use the reference repository for how to migrate to material design patterns: https://github.com/microting/eform-backendconfiguration-plugi |
Co-authored-by: renemadsen <[email protected]>
... Replaced all
All mdbootstrap tooltip directives have been migrated to Angular Material tooltips. |
|
@copilot now we only have these errors left: #23 27.09 ✘ [ERROR] NG8002: Can't bind to 'fieldsModel' since it isn't a known property of 'app-customer-pn-add'. |
Co-authored-by: renemadsen <[email protected]>
... Fixed the fieldsModel binding errors in commit df26d66 by completing the MatDialog migration: Changes to customers-pn-page component:
The migration from MDBModal to Angular Material Dialog is now complete. All modals are opened using the MatDialog service with data passed through MAT_DIALOG_DATA, following the same pattern as eform-backendconfiguration-plugin. |
Migration Plan: Remove Akita and Update to ngrx State Structure
Based on feedback from @renemadsen, the migration now follows the proper ngrx pattern used in eform-backendconfiguration-plugin:
Summary of Changes
ngrx State Management:
Component Standalone Fix:
All components now explicitly set standalone: false to work with NgModule declarations
Complete MDBModal to Angular Material Migration:
All modal components have been fully converted from MDBModal to Angular Material Dialog:
Modal Components:
Parent Component (customers-pn-page):
@ViewChildreferences to modal components<app-customer-pn-add>,<app-customer-pn-edit>,<app-customer-pn-delete>)dialog.open(ComponentClass, {data: ...})patternmodal.componentInstanceTooltip Migration:
mdbTooltipdirectives withmatTooltipin:Key Improvements:
The migration is now complete. All modals are opened using
MatDialog.open()with data passed throughMAT_DIALOG_DATA, and event subscriptions handled throughmodal.componentInstance, following the same pattern as eform-backendconfiguration-plugin.Fixes #989
Original prompt
This section details on the original issue you should resolve
<issue_title>Update code to not use akita but ngrx</issue_title>
<issue_description>✘ [ERROR] TS2307: Cannot find module '@datorama/akita' or its corresponding type declarations. [plugin angular-compiler]
#23 27.06
#23 27.06 src/app/plugins/modules/customers-pn/components/store/customers.store.ts:2:49:
#23 27.06 2 │ import { persistState, Store, StoreConfig } from '@datorama/akita';
#23 27.06 ╵ ~~~~~~~~~~~~~~~~~
#23 27.06
#23 27.06
#23 27.06 ✘ [ERROR] Could not resolve "@datorama/akita"
#23 27.06
#23 27.06 src/app/plugins/modules/customers-pn/components/store/customers.store.ts:3:49:
#23 27.06 3 │ import { persistState, Store, StoreConfig } from '@datorama/akita';
#23 27.06 ╵ ~~~~~~~~~~~~~~~~~
#23 27.06
#23 27.06 You can mark the path "@datorama/akita" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.
#23 27.06
#23 27.06
#23 27.06 ✘ [ERROR] TS2307: Cannot find module 'angular-bootstrap-md' or its corresponding type declarations. [plugin angular-compiler]
#23 27.06
#23 27.06 src/app/plugins/modules/customers-pn/customers-pn.module.ts:6:30:
#23 27.06 6 │ import { MDBRootModule } from 'angular-bootstrap-md';
#23 27.06 ╵ ~~~~~~~~~~~~~~~~~~~~~~
#23 27.06
#23 27.06
#23 27.06 ✘ [ERROR] Could not resolve "angular-bootstrap-md"
#23 27.06
#23 27.06 src/app/plugins/modules/customers-pn/customers-pn.module.ts:7:30:
#23 27.06 7 │ import { MDBRootModule } from 'angular-bootstrap-md';
#23 27.06 ╵ ~~~~~~~~~~~~~~~~~~~~~~
#23 27.06
#23 27.06 You can mark the path "angular-bootstrap-md" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.
#23 27.06
#23 27.06
#23 27.06 ✘ [ERROR] Could not resolve "@fortawesome/angular-fontawesome"
#23 27.06
#23 27.06 src/app/plugins/modules/customers-pn/customers-pn.module.ts:13:34:
#23 27.06 13 │ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
#23 27.06 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#23 27.06
#23 27.06 You can mark the path "@fortawesome/angular-fontawesome" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.
#23 27.06
#23 27.06
#23 27.06 ✘ [ERROR] TS2307: Cannot find module '@fortawesome/angular-fontawesome' or its corresponding type declarations. [plugin angular-compiler]
#23 27.06
#23 27.06 src/app/plugins/modules/customers-pn/customers-pn.module.ts:23:34:
#23 27.06 23 │ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
#23 27.06 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#23 27.06
micro...
💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.