Entity UI's: Investigate components that need updates/rewriting (continued)

[severinbeauvais]

In #16052, a lot of investigation and fixes were done (and merged) to determine what else needs to be done. But that ticket became blocked on its dependency on sbc-common-components and bcrs-shared-components. I decided to "complete" 16052 and carry over that work into THIS ticket, once those dependencies are resolved.

---

The upgrade to Vue3 will require work, including:

• updated package dependencies
• upgrade to Vuetify (with some components incompatible or missing)
• missing some packages (like vue-property-decorator)

This ticket is to research / try / identify / report what changes are needed for 1 or all 3 Entity UIs.

Refs:

https://vuetifyjs.com/en/getting-started/upgrade-guide/
https://chat.developer.gov.bc.ca/group/8ALvrm32WQWfW5C4x?msg=oiouJFPmfe5CYdq2R
https://chat.developer.gov.bc.ca/channel/registries-developers?msg=NCfeXBkF3FNFBWf58
https://chat.developer.gov.bc.ca/channel/registries-developers?msg=nd7Gi78Eh98uFEZ9q

Cameron's Vue/Vuetify Upgrade Document:

https://docs.google.com/document/d/1Hxh4D1yw15qTTZCgFeDnvFk_gtbLEGtQmUW65MmNBeY/edit

Auth Web Vue3 conversion:

#14879

To do (list still in progress):

• update lint packages + presets
• update lint rules
• fix lint issues
• update dependencies:
  • update bcrs-shared-components - see bcrs-shared-components: upgrade to Vue3 / Vuetify3 #16093 ** LARGE EFFORT ***
  • update sbc-common-components - see sbc-common-components: convert to composition-api #14881 and sbc-common-components: upgrade to vue 3 #14883 ** LARGE EFFORT ***
  • install "@vue/runtime-dom": "^3.2.47"
  • upgrade "launchdarkly-js-client-sdk": "^2.22.1" to "launchdarkly-js-client-sdk": "^3.1.3"
  • uninstall "pinia-class": "^0.0.3"
  • upgrade "vue": "^2.7.10" "vue": "^3.2.47"
  • upgrade vue-router from v3 to v4
  • upgrade "vuetify": "^2.6.10" to "vuetify": "^3.1.15"
  • uninstall "vuex": "^3.6.2" - needed by sbc-common-components
• update dev dependencies:
  • uninstall "@volar-plugins/vetur": "latest"
  • install "@vue/compiler-sfc": "^3.2.47"
  • upgrade "@vue/test-utils": "^1.3.3" to "@vue/test-utils": "^2.3.2"
  • upgrade "@vue/vue2-jest": "^27.0.0" to "@vue/vue3-jest": "^27.0.0"
  • upgrade "eslint": "~7.32.0" to "eslint": "^8.0.0"
  • upgrade eslint-config-standard from v4 to v8
  • upgrade eslint-config-typescript from v9 to v11
  • upgrade eslint-plugin-vue from v8 to v9
  • upgrade "eslint-plugin-vuetify": "^1.1.0" to "eslint-plugin-vuetify": "^2.0.0-beta.4"
  • uninstall "vue-property-decorator": "^9.1.2"
  • install "vue-facing-decorator": "^2.1.20"
  • uninstall "vue-template-compiler": "2.7.10"
• add local file, "src/store/PiniaClass.ts" (copy from pinia-class package but use new component library) - see link in comment below
• update vue.config.js
• update tsconfig.json
• add "shim-vuetify.d.ts"
• update "shim-vue.d.ts"
• update code:
  • replace 'vue-property-decorator'
    • option 1: vue-facing-decorator
    • option 2: vue-decorator
  • replace 'pinia-class' with '@/utils/PiniaClass'
  • fix all $refs
  • update components to use vue-facing-decorator
  • replace Vue.nextTick() with this.$nextTick() (except unit tests)
  • fix mixin references
  • fix mixin usage
  • fix redundant boolean declarations (eg, const b: boolean = true)
  • fix duplicate component props
  • fix Vue setup, Vuetify setup and Vue Router (ref)
  • migrate LaunchDarkly SDK (ref)
• fix errors:
  • componentsCompanyInfo.ts
  • countries-provinces-mixin.ts
  • vuetify.ts
  • misc shared components (copied locally)
• fix all Vuetify styling issues ** LARGE EFFORT ***
• migrate unit tests (ref) ** LARGE EFFORT ***

Future (list still in progress):

• remove eslint rule overrides and fix deprecated items:
  • vue/no-deprecated-filter
  • vue/no-deprecated-slot-attribute
  • vue/no-deprecated-slot-scope-attribute
  • vue/no-deprecated-v-bind-sync
  • vue/no-deprecated-v-on-native-modifier
  • vue/no-v-for-template-key-on-child
  • vuetify/no-deprecated-classes
  • vuetify/no-deprecated-colors
  • vuetify/no-deprecated-components
  • vuetify/no-deprecated-events
  • vuetify/no-deprecated-props
• use new Date Picker component

Possible alternative:

Instead of upgrading/converting the existing code to Vue3, we could start from a template project (aka boilerplate/scaffold) and move our code over. This is very likely more work, but may result in a cleaner configuration.

1. Boilerplace Vue 3 + TS + Vite + Pinia
2. Getting started with Vue 3 + Pinia Store + Typescript...