Vuetify Fixes for MHR and Misc Features #1615

cameron-eyds · 2023-11-06T21:25:16Z

Description of changes:

Following the patterns for PPR, continued the refactors into MHR Related flows.
Replaces v-mask with maska package for our phone number masking, as a global directive
Registration Table refactors - leverage virtual scroller so we can pull in the entirety of the registration data set and prevent having pseudo pagination. Improves performance greatly for filtering and swapping tabs.
Minor fixes to svg styling for stepper
Flows covered in this ticket:
MHR Registrations Table
MHR Registration Flows
User Access Flows
MHR Unit Notes
MHR Information Flows
Exemption Flow

Notes:

Keep in mind this was functionality first, so there will be some minor UX or stylings i'm sure i missed.
We are also still missing a Date Picker, so there is some errors where that component is referenced (Future Ticket)

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the PPR license (Apache 2.0).

doug-lovett

Looks great Cameron, a fair bit of cleanup and refactoring.

cameron-eyds · 2023-11-07T03:34:31Z

Looks great Cameron, a fair bit of cleanup and refactoring.

Thank you!

dimak1

Looks great! Good one 👏🏻

Just curious if it is required to add dashes to the props of the components? Maybe we can update the lint rule. The reason is that it's easier to search for it in files.

dimak1 · 2023-11-07T18:54:26Z

ppr-ui/src/main.ts

@@ -8,6 +8,7 @@ import { getVueRouter } from '@/router'
 import { getPiniaStore } from '@/store'
 import * as Sentry from '@sentry/vue'
 import vuetify from './plugins/vuetify'
+import { vMaska } from 'maska'


Super easy replacement. Defined globally, so we can use in any template, just need to import basically the mask config. That being said, we don't really mask anything but phone numbers but the options there :)

If we use just one mask (for phone) do we even need this package? On the other hand, it is small and has no additional dependencies so maybe we can keep it.

I suppose its a nice option for future. The package is pretty small and very easy to implement/maintain.

dimak1 · 2023-11-07T18:54:58Z

ppr-ui/src/utils/feature-flags.ts

@@ -10,10 +10,10 @@ export const defaultFlagSet: LDFlagSet = {
  'search-registration-number': true,
  'search-serial-number': true,
  'mhr-ui-enabled': true, // Mhr Search - default true: Should remove from codebase
-  'mhr-registration-enabled': false, // Enables MHR table tab
-  'mhr-transfer-enabled': false, // Enables changes to base MHR Home Owners within the MHR Information flow
+  'mhr-registration-enabled': true, // Enables MHR table tab


Are we permanently enabling these now?

Not permanently, no, just left for ease of development.

Yes, it would make it easier, so I don't have to revert these changes each time I rebase :)

ppr-ui/src/views/Dashboard.vue

ppr-ui/src/resources/maskConfigs.ts

cameron-eyds · 2023-11-07T19:14:56Z

Looks great! Good one 👏🏻

Just curious if it is required to add dashes to the props of the components? Maybe we can update the lint rule. The reason is that it's easier to search for it in files.

@dimak1 Great point for sure!
It was recommended by the linter as you've already deduced (ie it was the basic community standards) but i totally agree, this might be something we want to override.
Your reason is alone is a great reason to do so.
Will 100% do this as part of the final linting sweep, will include as part of the unit testing ticket scope.

ppr-ui/src/views/Dashboard.vue

dimak1 · 2023-11-07T19:18:36Z

@cameron-eyds great, yea that would be good if we are in agreement (about overriding the lint rule). So do we need to go back (in final lint sweep) and update the names to remove the dashes?

cameron-eyds · 2023-11-07T19:20:45Z

@cameron-eyds great, yea that would be good if we are in agreement (about overriding the lint rule). So do we need to go back (in final lint sweep) and update the names to remove the dashes?

I believe (am hopeful) the editor will take care of this, once the rule is overridden.
If not, i will adjust the rules and following the lint issues to fix alongside the other misc lint items.

ppr-ui/package.json

cameron-eyds · 2023-11-08T15:35:27Z

@dimak1 Set up some additional linting rules and also helped identify certain vue warnings as errors.
In doing so, it helps the auto linter fix some of said issues.
Reverted all props and @ events to camelCase and put in some lint rules to enforce that.

dimak1 · 2023-11-08T16:23:55Z

@dimak1 Set up some additional linting rules and also helped identify certain vue warnings as errors. In doing so, it helps the auto linter fix some of said issues. Reverted all props and @ events to camelCase and put in some lint rules to enforce that.

@cameron-eyds thank you for doing that!

dimak1 · 2023-11-08T16:28:10Z

@cameron-eyds since we are on linter topic, maybe we could also look into prettier as well, just at the high level. Because I stopped using it a long time ago, since it was causing conflicts between other devs (I know Orel wasn't using it either because of it). Maybe it would be a good opportunity for all of us start using an external prettier config, so we don't have conflicts. By no means I want to increase the scope further, just putting it out here...

cameron-eyds · 2023-11-08T17:08:01Z

@cameron-eyds since we are on linter topic, maybe we could also look into prettier as well, just at the high level. Because I stopped using it a long time ago, since it was causing conflicts between other devs (I know Orel wasn't using it either because of it). Maybe it would be a good opportunity for all of us start using an external prettier config, so we don't have conflicts. By no means I want to increase the scope further, just putting it out here...

Absolutely, another great point!
Lets make a note to have a closer look at that.

Lots to do :) Just need to find the scope to do so, i think now is a great time to do it though, i'll give it a go in the Unit Test/Clean up Ticket.

* Mhr Registrations Happy Path * Ongoing Registration Table Improvements * User access Start, some more table clean up * User Access Fixes + more table updates * Cleaned up Tables Sorting * Further Transfer and Unit Note Adjustments * Masking fixes and replacements * Date Pickers and misc styling adjustments * Lint Sweeps and camelCase enforcement * Reg Table Fix and command revert * Further DatePicker Updates

* Vue3 Build (#1594) * Vue3/Vuetify3/Vite-Build * wip: Up to Searches * wip: Search Features * Wip: PPR Search Done - Onto Mhr Search Results * Refactors generally completed on PPR/MHR Searches and history * CI Updates * update dockerfil * revert docker file udpates * docker change reverse * Docker update * docker node version update * last attempt at ci build * vue-affix removal * Lint Fixes * lint config updates * Modernized Linting for Vue and Typescript -- Applied non functional fixes * Updated vue declaration * Vuetify and component updates - PRR (#1609) * base dialog and Staff Payment instances updated * ongoing PPR Table work * Ongoin PPR Registrations/Amendment updates * Ongoing PPR Reg - Includes stepper, footers, Bus Search, Base Address * Ppr Registrations Happy Path * Chips and other misc fixes for Amendments * Vuetify Fixes for MHR and Misc Features (#1615) * Mhr Registrations Happy Path * Ongoing Registration Table Improvements * User access Start, some more table clean up * User Access Fixes + more table updates * Cleaned up Tables Sorting * Further Transfer and Unit Note Adjustments * Masking fixes and replacements * Date Pickers and misc styling adjustments * Lint Sweeps and camelCase enforcement * Reg Table Fix and command revert * Further DatePicker Updates * ViTest: Unit Testing Setup/Config/Utils and Ongoing Refactoring (#1623) * Ongoing Unit Test fixes * Ongoing PPR Test fixes - Includes base setup - solves most complexity - now test fixes * more test config updates and unit test fixes * button-footer rework * Further Testing updates - Up to Debtors * continued testing updates DischargeReg * Tests up to EditTrust and more cleanup * PR CleanUP * Few more tests - up to FeeSummary * FeeSummary test * Lint update * fee summary file clean up * Sync Clean Up * Ongoing test work * Delete .idea directory

* Vue3 Build (bcgov#1594) * Vue3/Vuetify3/Vite-Build * wip: Up to Searches * wip: Search Features * Wip: PPR Search Done - Onto Mhr Search Results * Refactors generally completed on PPR/MHR Searches and history * CI Updates * update dockerfil * revert docker file udpates * docker change reverse * Docker update * docker node version update * last attempt at ci build * vue-affix removal * Lint Fixes * lint config updates * Modernized Linting for Vue and Typescript -- Applied non functional fixes * Updated vue declaration * Vuetify and component updates - PRR (bcgov#1609) * base dialog and Staff Payment instances updated * ongoing PPR Table work * Ongoin PPR Registrations/Amendment updates * Ongoing PPR Reg - Includes stepper, footers, Bus Search, Base Address * Ppr Registrations Happy Path * Chips and other misc fixes for Amendments * Vuetify Fixes for MHR and Misc Features (bcgov#1615) * Mhr Registrations Happy Path * Ongoing Registration Table Improvements * User access Start, some more table clean up * User Access Fixes + more table updates * Cleaned up Tables Sorting * Further Transfer and Unit Note Adjustments * Masking fixes and replacements * Date Pickers and misc styling adjustments * Lint Sweeps and camelCase enforcement * Reg Table Fix and command revert * Further DatePicker Updates * ViTest: Unit Testing Setup/Config/Utils and Ongoing Refactoring (bcgov#1623) * Ongoing Unit Test fixes * Ongoing PPR Test fixes - Includes base setup - solves most complexity - now test fixes * more test config updates and unit test fixes * button-footer rework * Further Testing updates - Up to Debtors * continued testing updates DischargeReg * Tests up to EditTrust and more cleanup * PR CleanUP * Few more tests - up to FeeSummary * FeeSummary test * Lint update * fee summary file clean up * Sync Clean Up * Ongoing test work * Delete .idea directory

* Ongoing PPR Unit testing (#1626) * Vue3 Build (#1594) * Vue3/Vuetify3/Vite-Build * wip: Up to Searches * wip: Search Features * Wip: PPR Search Done - Onto Mhr Search Results * Refactors generally completed on PPR/MHR Searches and history * CI Updates * update dockerfil * revert docker file udpates * docker change reverse * Docker update * docker node version update * last attempt at ci build * vue-affix removal * Lint Fixes * lint config updates * Modernized Linting for Vue and Typescript -- Applied non functional fixes * Updated vue declaration * Vuetify and component updates - PRR (#1609) * base dialog and Staff Payment instances updated * ongoing PPR Table work * Ongoin PPR Registrations/Amendment updates * Ongoing PPR Reg - Includes stepper, footers, Bus Search, Base Address * Ppr Registrations Happy Path * Chips and other misc fixes for Amendments * Vuetify Fixes for MHR and Misc Features (#1615) * Mhr Registrations Happy Path * Ongoing Registration Table Improvements * User access Start, some more table clean up * User Access Fixes + more table updates * Cleaned up Tables Sorting * Further Transfer and Unit Note Adjustments * Masking fixes and replacements * Date Pickers and misc styling adjustments * Lint Sweeps and camelCase enforcement * Reg Table Fix and command revert * Further DatePicker Updates * ViTest: Unit Testing Setup/Config/Utils and Ongoing Refactoring (#1623) * Ongoing Unit Test fixes * Ongoing PPR Test fixes - Includes base setup - solves most complexity - now test fixes * more test config updates and unit test fixes * button-footer rework * Further Testing updates - Up to Debtors * continued testing updates DischargeReg * Tests up to EditTrust and more cleanup * PR CleanUP * Few more tests - up to FeeSummary * FeeSummary test * Lint update * fee summary file clean up * Sync Clean Up * Ongoing test work * Delete .idea directory * PPR Unit Testing Part 3 (#1631) * Ongoing tests: nearly complete * Only Table row and reg wrapper to complete * setup adjustments * Reg Wrapper and Fetching updates * ppr testing finalized * jest clean up and terminal clean up * Update MHR unit tests - Part 1 (#1630) Update unit tests * Vue Fold in Prep: Linting Fixes (#1633) * ongoing Linting * Lint Fixes * no gutters update * MakeModel Test Fix * MHR Test Fixes, Misc UI fixes (#1636) * Test Updates, Misc UI fixes * ts config clean up * Update Unit Tests - Part 2 (#1635) * Further updated to unit tests * More unit test updates * Further unit test updates * More unit test updates * Fix errors in Dashboard test by mocking api calls * Fix Signout test from error * Fix some of Typescript errors * 17701 Misc MHR Clean Up (#1638) * Misc Ui clean up * remove dev code * remove more dev code * Fixes after Rebase * Fix unit tests, small cleanup (#1640) * Delay app mount to allow for auth data (#1641) * Delay app mount to allow for auth data * spacing fix * optional chain doc for testing env * linting fixes * test fix and spelling correction * Console cleanup * Fix Lien Alert message for QS (#1643) * Fix Lien Alert message for QS * Version update * SbcCC Version Updates + Lien/Locked Updates (#1645) * Authentication Flow updates * minor syntax fix and error handling * Remove extra console * RL Collateral Selector fix * Axios version and interceptor upgrades (#1646) * sbc-cc updates (for axios V) and axios interceptor updates * Version bump * Fix Lien Alert msg (#1648) * Home Owners styling and Transfer Bugs (#1649) * Home Owners Styling and Bug fixes * Pr Updates --------- Co-authored-by: Dima K <dima1086@hotmail.com>

cameron-eyds added 7 commits November 1, 2023 15:48

Mhr Registrations Happy Path

57057cf

Ongoing Registration Table Improvements

74e5501

User access Start, some more table clean up

cafeeab

User Access Fixes + more table updates

fd43faa

Cleaned up Tables Sorting

c3ca8d5

Further Transfer and Unit Note Adjustments

451beb2

Masking fixes and replacements

2a56b63

cameron-eyds self-assigned this Nov 6, 2023

dimak1 requested review from dimak1, doug-lovett and RuoxuanPengBC November 6, 2023 22:11

doug-lovett approved these changes Nov 7, 2023

View reviewed changes

dimak1 approved these changes Nov 7, 2023

View reviewed changes

cameron-eyds commented Nov 7, 2023

View reviewed changes

ppr-ui/src/views/Dashboard.vue Show resolved Hide resolved

cameron-eyds added 2 commits November 7, 2023 16:59

Date Pickers and misc styling adjustments

ae2d135

Lint Sweeps and camelCase enforcement

6aa9ebf

cameron-eyds commented Nov 8, 2023

View reviewed changes

ppr-ui/package.json Outdated Show resolved Hide resolved

Reg Table Fix and command revert

9671762

Further DatePicker Updates

583f9cd

cameron-eyds merged commit 37365eb into bcgov:Vue3-Upgrade-Feature-Branch Nov 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vuetify Fixes for MHR and Misc Features #1615

Vuetify Fixes for MHR and Misc Features #1615

cameron-eyds commented Nov 6, 2023

doug-lovett left a comment

cameron-eyds commented Nov 7, 2023

dimak1 left a comment

dimak1 Nov 7, 2023

cameron-eyds Nov 7, 2023

dimak1 Nov 7, 2023 •

edited

Loading

cameron-eyds Nov 8, 2023

dimak1 Nov 7, 2023

cameron-eyds Nov 7, 2023

dimak1 Nov 7, 2023

cameron-eyds commented Nov 7, 2023

dimak1 commented Nov 7, 2023

cameron-eyds commented Nov 7, 2023

cameron-eyds commented Nov 8, 2023

dimak1 commented Nov 8, 2023

dimak1 commented Nov 8, 2023

cameron-eyds commented Nov 8, 2023

Vuetify Fixes for MHR and Misc Features #1615

Vuetify Fixes for MHR and Misc Features #1615

Conversation

cameron-eyds commented Nov 6, 2023

doug-lovett left a comment

Choose a reason for hiding this comment

cameron-eyds commented Nov 7, 2023

dimak1 left a comment

Choose a reason for hiding this comment

dimak1 Nov 7, 2023

Choose a reason for hiding this comment

cameron-eyds Nov 7, 2023

Choose a reason for hiding this comment

dimak1 Nov 7, 2023 • edited Loading

Choose a reason for hiding this comment

cameron-eyds Nov 8, 2023

Choose a reason for hiding this comment

dimak1 Nov 7, 2023

Choose a reason for hiding this comment

cameron-eyds Nov 7, 2023

Choose a reason for hiding this comment

dimak1 Nov 7, 2023

Choose a reason for hiding this comment

cameron-eyds commented Nov 7, 2023

dimak1 commented Nov 7, 2023

cameron-eyds commented Nov 7, 2023

cameron-eyds commented Nov 8, 2023

dimak1 commented Nov 8, 2023

dimak1 commented Nov 8, 2023

cameron-eyds commented Nov 8, 2023

dimak1 Nov 7, 2023 •

edited

Loading