Merge pull request #211 from bcgov/vue-three

Vue 3 upgrade fixes
bcgov · Apr 29, 2024 · dfbbbbc · dfbbbbc
2 parents efb8a2e + ad32feb
commit dfbbbbc
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 14 deletions.
diff --git a/frontend/src/components/CommentList.vue b/frontend/src/components/CommentList.vue
@@ -18,13 +18,15 @@
         </v-row>
         <v-row v-if="item.documents.length > 0">
           <v-col cols="12">
-            <DocumentChip
-              v-for="document in item.documents"
-              :key="document.documentID"
-              :document="document"
-              :undeletable="true"
-              :disabled="document.fileSize === 0"
-            />
+            <v-chip-group>
+              <DocumentChip
+                v-for="document in item.documents"
+                :key="document.documentID"
+                :document="document"
+                :undeletable="true"
+                :disabled="document.fileSize === 0"
+              />
+            </v-chip-group>
           </v-col>
         </v-row>
       </template>

diff --git a/frontend/src/components/HomePage.vue b/frontend/src/components/HomePage.vue
@@ -72,7 +72,7 @@
         <v-card
           v-else
           height="100%"
-          prepend-avatar="../assets/images/icon-find-pen.svg"
+          :prepend-avatar="searchIcon"
           title="Get your Personal Education Number (PEN)"
           text="Former students can send a request via an online form to receive their PEN"
           to="gmp"
@@ -85,7 +85,7 @@
         class="px-8"
       >
         <v-card
-          prepend-avatar="../assets/images/updatemypen.svg"
+          :prepend-avatar="updateIcon"
           title="Update My Pen"
           height="100%"
           to="ump"
@@ -115,12 +115,21 @@ import LoginRedirect from './LoginRedirect.vue';
 import ModalJourney from './ModalJourney.vue';
 import UserStudentCard from './UserStudentCard.vue';
 
+import searchIcon from '../assets/images/icon-find-pen.svg';
+import updateIcon from '../assets/images/updatemypen.svg';
+
 export default {
   components: {
     LoginRedirect,
     ModalJourney,
     UserStudentCard,
   },
+  data() {
+    return {
+      searchIcon,
+      updateIcon
+    };
+  },
   computed: {
     ...mapState(useAuthStore, ['isAuthenticated', 'isLoading', 'userInfo']),
     ...mapState(useRootStore, ['student']),

diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
@@ -12,24 +12,32 @@ import {
   VCardTitle,
   VCheckbox,
   VChip,
+  VChipGroup,
   VCol,
   VContainer,
   VDatePicker,
+  VDialog,
   VDivider,
   VFooter,
   VForm,
+  VIcon,
   VLayout,
   VList,
   VListItem,
   VListItemTitle,
   VMenu,
   VProgressCircular,
+  VProgressLinear,
   VRow,
+  VSelect,
+  VFileInput,
+  VCardItem,
   VSkeletonLoader,
   VSpacer,
   VStepper,
   VStepperHeader,
   VStepperItem,
+  VStepperWindow,
   VStepperWindowItem,
   VTable,
   VTextField,
@@ -58,24 +66,32 @@ export default new createVuetify({
     VCardTitle,
     VCheckbox,
     VChip,
+    VChipGroup,
     VCol,
     VContainer,
     VDatePicker,
+    VDialog,
     VDivider,
     VFooter,
     VForm,
+    VIcon,
     VLayout,
     VList,
     VListItem,
     VListItemTitle,
     VMenu,
     VProgressCircular,
+    VProgressLinear,
     VRow,
+    VSelect,
+    VFileInput,
+    VCardItem,
     VSkeletonLoader,
     VSpacer,
     VStepper,
     VStepperHeader,
     VStepperItem,
+    VStepperWindow,
     VStepperWindowItem,
     VTable,
     VTextField,

diff --git a/frontend/vite.config.mjs b/frontend/vite.config.mjs
@@ -1,13 +1,9 @@
 import vue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vite';
-import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
 
 export default defineConfig({
   plugins: [
-    vue({
-      template: { transformAssetUrls }
-    }),
-    vuetify()
+    vue()
   ],
   server: {
     port: 8081,