--wip-- [skip ci]

package.json

@@ -147,7 +147,7 @@
     "vue-picture-swipe": "^2.1.0",
     "vue-range-slider": "^0.6.0",
     "vue-responsive": "^1.1.0",
-    "vue-router": "^3.2.0",
+    "vue-router": "^4.1.3",
     "vue-router-multi-view": "^0.1.0",
     "vue-select": "^3.18.3",
     "vue-socket.io": "^3.0.10",
@@ -158,7 +158,7 @@
     "vue2-google-maps": "^0.10.7",
     "vuedraggable": "^2.24.3",
     "vuejs-datepicker": "^1.6.2",
-    "vuex": "^3.6.2",
+    "vuex": "^4.0.2",
     "vuex-module-decorators": "^0.17.0",
     "vuex-persist": "^3.1.3"
   },

src/App.vue

@@ -13,26 +13,38 @@
   </div>
 </template>
 
-<script lang="ts">
-// @ts-nocheck TODO(tabiodun): Fix this file
+<script lang="ts" setup>
 import { mapActions, mapGetters, mapMutations } from 'vuex';
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, computed, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import CCP from '@/components/phone/CCP.vue';
 import Version from '@/components/Version.vue';
 import BannerOverlay from '@/components/notifications/BannerOverlay.vue';
 import { cachedGet, hash } from '@/utils/promise';
 import PhoneLegacy from './pages/phone_legacy/Index.vue';
 
+const route = useRoute();
+const router = useRouter();
 const defaultLayout = 'authenticated';
-export default defineComponent({
-  name: 'App',
-  components: { PhoneLegacy, CCP, Version, BannerOverlay },
-  computed: {
-    ...mapGetters('ui', ['currentBanner']),
-    layout() {
-      return `${this.$route.meta?.layout || defaultLayout}-layout`;
-    },
+
+const layout = computed(() => `${route.meta?.layout || defaultLayout}-layout`);
+const currentBanner = computed(() => {
+  const { currentBanner: _currentBanner } = mapGetters('ui', ['currentBanner']);
+  return _currentBanner;
+});
+
+watch(
+  () => route,
+  (to) => {
+    const newTitle = `${this.$t(to.name)}: Crisis Cleanup`;
+    if (document.title !== newTitle) {
+      document.title = newTitle;
+    }
   },
+  { immediate: true },
+);
+
+export default defineComponent({
   watch: {
     $route: {
       immediate: true,

src/components/AjaxTable.vue

@@ -167,13 +167,6 @@ export default defineComponent({
       getData,
     };
   },
-  watch: {
-    query: {
-      handler() {
-        throttle(this.getData, 1000)();
-      },
-    },
-  },
 });
 </script>
 

src/components/ItemEditor.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="p-4 h-108 overflow-auto">
-    <template v-for="prop in Object.keys(currentObject)">
-      <div :key="prop">
+    <template v-for="prop in Object.keys(currentObject)" :key="prop">
+      <div>
         <div>{{ prop }}</div>
         <pre
           contenteditable="true"

src/main.ts

@@ -6,13 +6,14 @@ import 'vue-resize/dist/vue-resize.css';
 import 'amazon-connect-streams';
 import VueHooks from '@u3u/vue-hooks';
 import VueCompositionApi from '@vue/composition-api';
-import Vue from 'vue';
+import { createApp } from 'vue';
 import JsonViewer from 'vue-json-viewer';
 import VueTimers from 'vue-timers';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import VueLog from '@dreipol/vue-log';
 import VueTagsInput from '@johmun/vue-tags-input';
 import * as Sentry from '@sentry/browser';
 import * as SentryIntegrations from '@sentry/integrations';
@@ -39,6 +40,7 @@ import vSelect from 'vue-select';
 import Toasted from 'vue-toasted';
 import Datepicker from 'vuejs-datepicker';
 import VueRouterMultiView from 'vue-router-multi-view';
+import VueCookies from 'vue-cookies';
 import MarqueeText from 'vue-marquee-text-component';
 import VueNumberInput from '@chenfengyuan/vue-number-input';
 import VueEasyLightbox from 'vue-easy-lightbox';
@@ -93,106 +95,115 @@ import AssessmentTree from '@/components/AssessmentTree.vue';
 import App from './App.vue';
 import router from './router';
 import store from './store/index';
+
+const app = createApp(App);
+
+// TODO: cleanup this file with module system
+// see: https://github.com/antfu/vitesse/tree/main/src/modules
+
 // Vue 3.x backports
-Vue.use(VueHooks);
-Vue.use(VueCompositionApi);
+app.use(VueHooks).use(VueCompositionApi);
 
 // Base Components
-Vue.component('base-link', BaseLink);
-Vue.component('font-awesome-icon', FontAwesomeIcon);
-Vue.component('ccu-icon', BaseIcon);
-Vue.component('base-checkbox', BaseCheckbox);
-Vue.component('base-radio', BaseRadio);
-Vue.component('base-button', BaseButton);
-Vue.component('base-input', BaseInput);
-Vue.component('base-text', BaseText);
-Vue.component('form-select', FormSelect);
-Vue.component('form-tree', FormTree);
-Vue.component('tree-menu', TreeMenu);
-Vue.component('assessment-tree', AssessmentTree);
-Vue.component('modal', Modal);
-Vue.component('autocomplete', Autocomplete);
-Vue.component('tag', Tag);
-Vue.component('tabs', Tabs);
-Vue.component('tab', Tab);
-Vue.component('spinner', Spinner);
-Vue.component('badge', Badge);
-Vue.component('tag-input', VueTagsInput);
-Vue.component('datepicker', Datepicker);
-Vue.component('vue-phone-number-input', VuePhoneNumberInput);
-Vue.component('marquee-text', MarqueeText);
+app
+  .component('base-link', BaseLink)
+  .component('font-awesome-icon', FontAwesomeIcon)
+  .component('ccu-icon', BaseIcon)
+  .component('base-checkbox', BaseCheckbox)
+  .component('base-radio', BaseRadio)
+  .component('base-button', BaseButton)
+  .component('base-input', BaseInput)
+  .component('base-text', BaseText)
+  .component('form-select', FormSelect)
+  .component('form-tree', FormTree)
+  .component('tree-menu', TreeMenu)
+  .component('assessment-tree', AssessmentTree)
+  .component('modal', Modal)
+  .component('autocomplete', Autocomplete)
+  .component('tag', Tag)
+  .component('tabs', Tabs)
+  .component('tab', Tab)
+  .component('spinner', Spinner)
+  .component('badge', Badge)
+  .component('tag-input', VueTagsInput)
+  .component('datepicker', Datepicker)
+  .component('vue-phone-number-input', VuePhoneNumberInput)
+  .component('marquee-text', MarqueeText)
+  .component('base-dropdown', Dropdown)
+  .component('v-select', vSelect);
 
 // Layouts
-Vue.component('authenticated-layout', Authenticated);
-Vue.component('unauthenticated-layout', Unauthenticated);
-
-Vue.config.productionTip = false;
+app
+  .component('authenticated-layout', Authenticated)
+  .component('unauthenticated-layout', Unauthenticated);
 
-// 3rd Party Libraries
-Vue.component('number-input', VueNumberInput);
-Vue.use(ToggleButton);
-Vue.use(VueResize);
-Vue.use(VueTimers);
-Vue.use(VueAutosuggest);
-Vue.use(VTooltip);
-Vue.use(ModalDialogs);
-Vue.use(VueClipboard);
-Vue.use(VueEasyLightbox);
-Vue.use(VueAxios, axios);
 momentWithDurations(moment);
-Vue.use(require('vue-moment'), { moment });
-Vue.use(VueMq, {
-  breakpoints: {
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-  },
-  defaultBreakpoint: 'sm',
-});
 
-Vue.use(VCalendar, {
-  componentPrefix: 'vc',
-});
+// 3rd Party Libraries
+app
+  .component('number-input', VueNumberInput)
+  .use(ToggleButton)
+  .use(VueResize)
+  .use(VueTimers)
+  .use(VueAutosuggest)
+  .use(VTooltip)
+  .use(ModalDialogs)
+  .use(VueClipboard)
+  .use(VueEasyLightbox)
+  .use(VueAxios, axios)
+  .use(VueCookies)
+  .use(require('vue-moment'), { moment })
+  .use(VueMq, {
+    breakpoints: {
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+    },
+    defaultBreakpoint: 'sm',
+  })
+  .use(VueLog)
+  .use(VCalendar, {
+    componentPrefix: 'vc',
+  })
+  // TODO: Migrate to Vue3
+  .use(VueRouterMultiView)
+  .use(Toasted, {
+    position: 'top-center',
+    duration: 7000,
+    theme: 'outline',
+  })
+  // TODO: Migrate to Vue3
+  .use(VueI18n)
+  .use(Popover)
+  .use(JsonViewer);
 
 library.add(fas);
 library.add(far);
-Vue.use(VueRouterMultiView);
-
-Vue.use(Toasted, {
-  position: 'top-center',
-  duration: 7000,
-  theme: 'outline',
-});
-
-Vue.use(VueI18n);
-Vue.use(Popover);
-Vue.use(JsonViewer);
-Vue.component('base-dropdown', Dropdown);
-Vue.component('v-select', vSelect);
 
 // Mixins
-Vue.mixin(LangOverrideMixin);
+app.mixin(LangOverrideMixin);
 
 // Filters
-Vue.use(vueNumeralFilterInstaller, { locale: 'en-gb' });
-Vue.filter('getWorkTypeName', getWorkTypeName);
-Vue.filter('getStatusName', getStatusName);
-Vue.filter('getOrganizationName', getOrganizationName);
-Vue.filter('snakeToTitleCase', snakeToTitleCase);
-Vue.filter('getColorForWorkType', getColorForWorkType);
-Vue.filter('getWorkTypeImage', getWorkTypeImage);
-Vue.filter('secondsToHm', secondsToHm);
-Vue.filter('formatSeconds', formatSeconds);
-Vue.filter('getColorForStatus', getColorForStatus);
-Vue.filter('getRecurrenceString', getRecurrenceString);
-Vue.filter('upper', toUpper);
-Vue.filter('capitalize', capitalize);
-Vue.filter('truncate', truncateFilter);
-Vue.filter('startCase', startCase);
-Vue.filter('snakeCase', snakeCase);
-Vue.filter('padStart', padStart);
-Vue.filter('formatNationalNumber', formatNationalNumber);
+app
+  .use(vueNumeralFilterInstaller, { locale: 'en-gb' })
+  .filter('getWorkTypeName', getWorkTypeName)
+  .filter('getStatusName', getStatusName)
+  .filter('getOrganizationName', getOrganizationName)
+  .filter('snakeToTitleCase', snakeToTitleCase)
+  .filter('getColorForWorkType', getColorForWorkType)
+  .filter('getWorkTypeImage', getWorkTypeImage)
+  .filter('secondsToHm', secondsToHm)
+  .filter('formatSeconds', formatSeconds)
+  .filter('getColorForStatus', getColorForStatus)
+  .filter('getRecurrenceString', getRecurrenceString)
+  .filter('upper', toUpper)
+  .filter('capitalize', capitalize)
+  .filter('truncate', truncateFilter)
+  .filter('startCase', startCase)
+  .filter('snakeCase', snakeCase)
+  .filter('padStart', padStart)
+  .filter('formatNationalNumber', formatNationalNumber);
 
 // API & Auth
 if (AuthService.getUser()) {
@@ -208,7 +219,7 @@ if (!process.env.VUE_APP_IS_LOCAL) {
     environment: process.env.VUE_APP_STAGE,
     integrations: [
       new SentryIntegrations.Vue({
-        Vue,
+        app,
         attachProps: true,
         // sets whether to log errors in sentry
         // AND with the standard web log,
@@ -218,14 +229,13 @@ if (!process.env.VUE_APP_IS_LOCAL) {
     ],
   });
   // Google GTag
-  Vue.use(VueGtag, {
+  app.use(VueGtag, {
     config: {
       id: 'UA-42924421-1',
     },
   });
-
   // Hotjar Analytics
-  Vue.use(Hotjar, {
+  app.use(Hotjar, {
     id: '1722600',
     isProduction: process.env.NODE_ENV === 'production',
   });
@@ -251,7 +261,8 @@ axios.interceptors.response.use(
   },
 );
 
-Vue.prototype.$phoneService = new PhoneService();
+// TODO: Migrate to Vue3
+// Vue.prototype.$phoneService = new PhoneService();
 
 // Setup i18n
 const getLanguages = async (tags: any) => {
@@ -285,11 +296,5 @@ const getLanguages = async (tags: any) => {
 };
 
 getLanguages(['en-US', detectBrowserLanguage()]).then((i18n) => {
-  window.vue = new Vue({
-    i18n,
-    components: { App },
-    render: (h) => h(App),
-    router,
-    store,
-  }).$mount('#app');
+  window.vue = app.use(i18n).use(router).use(store).mount('#app');
 });

src/router.js

@@ -1,6 +1,5 @@
 import Vue from 'vue';
-import VueCookies from 'vue-cookies';
-import VueRouter from 'vue-router';
+import { createRouter } from 'vue-router';
 import * as moment from 'moment';
 import CaseFlag from '@/pages/CaseFlag';
 import CaseForm from '@/pages/CaseForm';
@@ -31,9 +30,6 @@ import Teams from '@/pages/organization/Teams';
 import TeamDetail from '@/pages/organization/TeamDetail';
 import * as UITypes from '@/store/modules/ui/types';
 
-Vue.use(VueRouter);
-Vue.use(VueCookies);
-
 const routes = [
   {
     path: '/',
@@ -201,7 +197,7 @@ const routes = [
   },
 ];
 
-const router = new VueRouter({
+const router = createRouter({
   mode: 'history',
   routes,
 });