--wip-- [skip ci]

CrisisCleanup · Aug 5, 2022 · 9cedbcf · 9cedbcf
1 parent 094eb7a
commit 9cedbcf
Show file tree

Hide file tree

Showing 35 changed files with 1,353 additions and 6,338 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -70,9 +70,12 @@ module.exports = {
 
   settings: {
     'import/resolver': {
-      webpack: {
-        config: './node_modules/@vue/cli-service/webpack.config.js',
+      node: {
+        paths: ['src'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        moduleDirectory: ['node_modules', 'src/'],
       },
+      typescript: {},
     },
   },
 };
diff --git a/.tool-versions b/.tool-versions
@@ -1,3 +1,3 @@
-nodejs 14.17.0
+nodejs 14.20.0
 direnv 2.21.2
 java adoptopenjdk-8.0.272+10
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -10,7 +10,7 @@
       ;NREUM.info={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",licenseKey:"NRJS-15c5a88c5d87c10da34",applicationID:"1046769301",sa:1}
     </script>
     <meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="favicon.ico">
     <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:100, 300,400,500,600,700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700&display=swap" rel="stylesheet">
     <script src="https://maps.googleapis.com/maps/api/js?key=<%= VUE_APP_GOOGLE_MAPS_API_KEY %>&libraries=places"></script>
@@ -34,6 +34,7 @@
       <strong>We're sorry but crisiscleanup doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
+
diff --git a/package.json b/package.json
@@ -22,7 +22,8 @@
     "lint-staged": "lint-staged",
     "postinstall": "yarn cache clean",
     "prettify": "prettier --write {.,**}/*.js **/*.vue **/**/*.{vue,js}",
-    "serve-dev": "cross-env NODE_ENV=development NODE_IS_WATCH=1 vue-cli-service serve --mode development",
+    "dev": "vite --port 8080",
+    "serve-dev": "cross-env NODE_ENV=development NODE_IS_WATCH=1 vite",
     "serve-prod": "cross-env NODE_ENV=production NODE_IS_WATCH=1 vue-cli-service serve --mode production",
     "serve-staging": "cross-env NODE_ENV=staging NODE_IS_WATCH=1 vue-cli-service serve --mode staging",
     "storybook": "cross-env NODE_ENV=storybook start-storybook -p 6006",
@@ -55,12 +56,9 @@
     "@ringcentral/sdk": "^4.3.3",
     "@tailwindcss/line-clamp": "^0.3.1",
     "@turf/turf": "^5.1.6",
-    "@u3u/vue-hooks": "^2.0.1",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
     "@vue/babel-preset-jsx": "^1.2.4",
-    "@vue/cli": "4.5.17",
     "@vue/compat": "^3.1.0",
-    "@vue/composition-api": "^1.2.1",
     "@vuex-orm/core": "^0.36.3",
     "@vuex-orm/plugin-axios": "^0.9.4",
     "@vuex-orm/plugin-change-flags": "^1.2.3",
@@ -128,7 +126,7 @@
     "vue-composable": "^1.0.0-beta.18",
     "vue-cookies": "^1.7.4",
     "vue-cron-editor-buefy": "^0.2.17",
-    "vue-easy-lightbox": "^0.16.2",
+    "vue-easy-lightbox": "1.7.1",
     "vue-gtag": "^1.9.0",
     "vue-highlight-words": "^1.2.0",
     "vue-histogram-slider": "^0.3.8",
@@ -191,13 +189,9 @@
     "@types/lodash": "^4.14.182",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
+    "@vitejs/plugin-vue": "^3.0.1",
+    "@vitejs/plugin-vue-jsx": "^2.0.0",
     "@vue/babel-preset-app": "^4.5.4",
-    "@vue/cli-plugin-babel": "^4.5.11",
-    "@vue/cli-plugin-e2e-cypress": "^4.5.6",
-    "@vue/cli-plugin-eslint": "^4.5.6",
-    "@vue/cli-plugin-typescript": "~4.5.17",
-    "@vue/cli-plugin-unit-jest": "^5.0.4",
-    "@vue/cli-service": "^4.5.4",
     "@vue/compiler-sfc": "^3.1.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^1.1.0",
@@ -223,12 +217,13 @@
     "eslint": "7.32.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-config-prettier": "^6.12.0",
+    "eslint-import-resolver-typescript": "^3.4.0",
     "eslint-import-resolver-webpack": "^0.12.2",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^9.3.0",
     "eslint-plugin-vue-types": "^2.0.0",
     "husky": "^8.0.1",
     "is-ci": "^3.0.1",
@@ -270,6 +265,7 @@
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "thread-loader": "^3.0.4",
     "typescript": "~4.1.5",
+    "vite": "^3.0.4",
     "vue-cli-plugin-cypress-experimental": "~1.1.0",
     "vue-docgen-api": "^4.32.4",
     "vue-docgen-loader": "^1.5.0",
@@ -287,10 +283,9 @@
     }
   },
   "lint-staged": {
-    "*.{js,vue}": [
-      "vue-cli-service lint",
-      "prettier --write",
-      "git add --force"
+    "*.{js,ts,vue}": [
+      "eslint --fix",
+      "prettier --write"
     ],
     "*.json": [
       "prettier --write",

diff --git a/src/App.vue b/src/App.vue
@@ -13,134 +13,133 @@
   </div>
 </template>
 
-<script lang="ts">
-// @ts-nocheck TODO(tabiodun): Fix this file
+<script lang="ts" setup>
+import { computed, watch, onBeforeUnmount, ref, onMounted } from 'vue';
 import { mapActions, mapGetters, mapMutations } from 'vuex';
-import { defineComponent } from '@vue/composition-api';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 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';
+import useHttp from '@/use/useHttp';
 
+const { t: $t } = useI18n();
+const route = useRoute();
 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`;
-    },
-  },
-  watch: {
-    $route: {
-      immediate: true,
-      handler(to) {
-        const newTitle = `${this.$t(to.name)}: Crisis Cleanup`;
-        if (document.title !== newTitle) {
-          document.title = newTitle;
-        }
-      },
-    },
-  },
-  created(): void {
-    if (process.env.NODE_ENV === 'development') {
-      this.eventsInterval = setInterval(this.pushCurrentEvents, 2000);
-    }
-    this.$http.interceptors.request.use(function (config) {
-      config.headers.CCU_WEB_URL = window.location.href;
-      config.headers.CCU_PORTAL_KEY = process.env.VUE_APP_PORTAL_KEY;
-      return config;
-    });
-  },
-  beforeDestroy(): void {
-    if (this.eventsInterval) {
-      clearInterval(this.eventsInterval);
-      this.eventsInterval = undefined;
+// const $t = (s: any) => s;
+const { $http } = useHttp();
+
+const eventsInterval = ref<any>(null);
+const layout = computed(() => `${route.meta?.layout || defaultLayout}-layout`);
+const currentBanner = computed(() => {
+  const { currentBanner: _currentBanner } = mapGetters('ui', ['currentBanner']);
+  return _currentBanner;
+});
+
+const { login, logout } = mapActions('auth', ['login', 'logout']);
+const { pushEvents } = mapActions('events', ['pushEvents']);
+const { validateBrowser } = mapActions('ui', ['validateBrowser']);
+const { isLoggedIn } = mapGetters('auth', ['isLoggedIn']);
+const { setStatuses, setWorkTypes, setLocationTypes, setPhases, setPortal } =
+  mapMutations('enums', [
+    'setStatuses',
+    'setWorkTypes',
+    'setLocationTypes',
+    'setPhases',
+    'setPortal',
+  ]);
+
+watch(
+  () => route,
+  (to) => {
+    const newTitle = `${$t(to.name)}: Crisis Cleanup`;
+    if (document.title !== newTitle) {
+      document.title = newTitle;
     }
   },
-  methods: {
-    ...mapActions('auth', ['login', 'logout']),
-    ...mapActions('events', ['pushEvents']),
-    ...mapActions('ui', ['validateBrowser']),
-    ...mapGetters('auth', ['isLoggedIn']),
-    ...mapMutations('enums', [
-      'setStatuses',
-      'setWorkTypes',
-      'setLocationTypes',
-      'setPhases',
-      'setPortal',
-    ]),
-    async getEnums(): Promise<void> {
-      const enums = await hash({
-        statuses: cachedGet(
-          `${process.env.VUE_APP_API_BASE_URL}/statuses`,
-          {
-            headers: {
-              Authorization: null,
-            },
-          },
-          'statuses',
-        ),
-        workTypes: cachedGet(
-          `${process.env.VUE_APP_API_BASE_URL}/work_types`,
-          {
-            headers: {
-              Authorization: null,
-            },
-          },
-          'work_types',
-        ),
-        phases: cachedGet(
-          `${process.env.VUE_APP_API_BASE_URL}/incidents_phases`,
-          {
-            headers: {
-              Authorization: null,
-            },
-          },
-          'incidents_phases',
-        ),
-        locationTypes: cachedGet(
-          `${process.env.VUE_APP_API_BASE_URL}/location_types`,
-          {
-            headers: {
-              Authorization: null,
-            },
-          },
-          'location_types',
-        ),
-        portal: cachedGet(
-          `${process.env.VUE_APP_API_BASE_URL}/portals/current`,
-          {
-            headers: {
-              Authorization: null,
-            },
-          },
-          'portal',
-        ),
-      });
-      this.setStatuses(enums.statuses.data.results);
-      this.setWorkTypes(enums.workTypes.data.results);
-      this.setLocationTypes(enums.locationTypes.data.results);
-      this.setPhases(enums.phases.data.results);
-      this.setPortal(enums.portal.data);
-    },
-    async pushCurrentEvents(): Promise<void> {
-      if (this.isLoggedIn()) {
-        await this.pushEvents();
-      }
-    },
-  },
-  async mounted(): Promise<void> {
-    await this.validateBrowser();
-    await this.getEnums();
-  },
-  data(): any {
-    return {
-      eventsInterval: null as any,
-    };
-  },
+  { immediate: true },
+);
+
+async function getEnums(): Promise<void> {
+  const enums = await hash({
+    statuses: cachedGet(
+      `${process.env.VUE_APP_API_BASE_URL}/statuses`,
+      {
+        headers: {
+          Authorization: null,
+        },
+      },
+      'statuses',
+    ),
+    workTypes: cachedGet(
+      `${process.env.VUE_APP_API_BASE_URL}/work_types`,
+      {
+        headers: {
+          Authorization: null,
+        },
+      },
+      'work_types',
+    ),
+    phases: cachedGet(
+      `${process.env.VUE_APP_API_BASE_URL}/incidents_phases`,
+      {
+        headers: {
+          Authorization: null,
+        },
+      },
+      'incidents_phases',
+    ),
+    locationTypes: cachedGet(
+      `${process.env.VUE_APP_API_BASE_URL}/location_types`,
+      {
+        headers: {
+          Authorization: null,
+        },
+      },
+      'location_types',
+    ),
+    portal: cachedGet(
+      `${process.env.VUE_APP_API_BASE_URL}/portals/current`,
+      {
+        headers: {
+          Authorization: null,
+        },
+      },
+      'portal',
+    ),
+  });
+  setStatuses(enums.statuses.data.results);
+  setWorkTypes(enums.workTypes.data.results);
+  setLocationTypes(enums.locationTypes.data.results);
+  setPhases(enums.phases.data.results);
+  setPortal(enums.portal.data);
+}
+
+async function pushCurrentEvents(): Promise<void> {
+  if (isLoggedIn()) {
+    await pushEvents();
+  }
+}
+
+if (process.env.NODE_ENV === 'development') {
+  eventsInterval.value = setInterval(pushCurrentEvents, 2000);
+}
+$http.interceptors.request.use(function (config) {
+  config.headers.CCU_WEB_URL = window.location.href;
+  config.headers.CCU_PORTAL_KEY = process.env.VUE_APP_PORTAL_KEY;
+  return config;
+});
+
+onMounted(async () => {
+  await validateBrowser();
+  await getEnums();
+});
+
+onBeforeUnmount(() => {
+  if (eventsInterval.value) {
+    clearInterval(eventsInterval.value);
+    eventsInterval.value = undefined;
+  }
 });
 </script>
 <style>

diff --git a/src/components/CaseHeader.vue b/src/components/CaseHeader.vue
@@ -114,15 +114,18 @@
 </template>
 
 <script lang="ts">
-import { useState } from '@u3u/vue-hooks';
+import { useStore } from 'vuex';
 import { defineComponent, computed } from 'vue';
 import { templates } from '@/icons/icons_templates';
 import Worksite from '@/models/Worksite';
 
 export default defineComponent({
   name: 'CaseHeader',
   setup(props) {
-    const { currentIncidentId } = useState('incident', ['currentIncidentId']);
+    const store = useStore();
+    const currentIncidentId = computed(
+      () => store.state.incident.currentIncidentId,
+    );
     const highPrioritySvgInactive = computed(() => {
       const template = templates.important;
       return template