[Web][SIMS #1098] Vuetify Beta Upgrade (#1135)

Vuetify beta upgrade
bcgov · Apr 4, 2022 · c85f6d0 · c85f6d0
1 parent 5bcb7ee
commit c85f6d0
Show file tree

Hide file tree

Showing 59 changed files with 20,854 additions and 33,463 deletions.
diff --git a/sources/packages/web/.eslintrc.js b/sources/packages/web/.eslintrc.js
@@ -18,6 +18,13 @@ module.exports = {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
     "@typescript-eslint/no-explicit-any": "off",
+    "vue/multi-word-component-names": "off",
+    "prettier/prettier": [
+      "off",
+      {
+        endOfLine: "auto",
+      },
+    ],
   },
   overrides: [
     {

diff --git a/sources/packages/web/jest.config.js b/sources/packages/web/jest.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
   transform: {
-    "^.+\\.vue$": "vue-jest",
+    "^.+\\.vue$": "vue3-jest",
   },
   transformIgnorePatterns: ["/node_modules/(?!primevue)"],
   globals: {

diff --git a/sources/packages/web/package-lock.json b/sources/packages/web/package-lock.json
diff --git a/sources/packages/web/package.json b/sources/packages/web/package.json
@@ -26,42 +26,44 @@
     "keycloak-js": "^12.0.2",
     "mitt": "^2.1.0",
     "primeflex": "^2.0.0",
-    "primeicons": "^4.1.0",
+    "primeicons": "^5.0.0",
     "primevue": "^3.8.2",
     "roboto-fontface": "*",
-    "vee-validate": "^4.1.12",
-    "vue": "^3.0.0",
+    "s-vuex-class": "^0.4.1",
+    "ts-jest": "^27.1.4",
+    "vee-validate": "^4.5.10",
+    "vue": "^3.2.31",
     "vue-class-component": "^8.0.0-0",
-    "vue-router": "^4.0.0-0",
-    "vuetify": "^3.0.0-alpha.6",
-    "vuex": "^4.0.1",
-    "vuex-class": "^0.3.2",
-    "yup": "^0.32.9"
+    "vue-router": "^4.0.14",
+    "vuetify": "^3.0.0-beta.0",
+    "vuex": "^4.0.2",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@types/jest": "^26.0.20",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
-    "@vue/cli-plugin-babel": "^4.5.11",
-    "@vue/cli-plugin-eslint": "^4.5.11",
-    "@vue/cli-plugin-router": "^4.5.11",
-    "@vue/cli-plugin-typescript": "^4.5.11",
-    "@vue/cli-plugin-unit-jest": "^4.5.11",
-    "@vue/cli-plugin-vuex": "^4.5.11",
-    "@vue/cli-service": "^4.5.11",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@types/jest": "^27.0.20",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-babel": "^5.0.0",
+    "@vue/cli-plugin-eslint": "^5.0.0",
+    "@vue/cli-plugin-router": "^5.0.0",
+    "@vue/cli-plugin-typescript": "^5.0.0",
+    "@vue/cli-plugin-unit-jest": "^5.0.0",
+    "@vue/cli-plugin-vuex": "^5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/compiler-sfc": "^3.2.20",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^5.0.2",
+    "@vue/eslint-config-typescript": "^9.1.0",
     "@vue/test-utils": "^2.0.0-0",
-    "babel-jest": "^26.6.3",
-    "eslint": "^6.7.2",
+    "@vue/vue3-jest": "^27.0.0-alpha.4",
+    "babel-jest": "^27.5.1",
+    "eslint": "^8.12.0",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^7.5.0",
-    "prettier": "^1.19.1",
-    "sass": "^1.32.5",
+    "eslint-plugin-vue": "^8.0.3",
+    "prettier": "^2.5.0",
+    "sass": "^1.38.0",
     "sass-loader": "^10.0.0",
-    "typescript": "~3.9.3",
-    "vue-cli-plugin-vuetify": "~2.4.0",
-    "vue-jest": "^5.0.0-0"
+    "typescript": "~4.5.5",
+    "vue-cli-plugin-vuetify": "~2.4.8",
+    "vue3-jest": "^27.0.0-alpha.1"
   }
 }
diff --git a/sources/packages/web/src/assets/css/base.scss b/sources/packages/web/src/assets/css/base.scss
@@ -206,3 +206,10 @@ ul.no-bullets {
   height: $line-height-header-sm;
   background-color: #8692a4;
 }
+
+//TODO: This style has been temporarily used to fix the alignment and responsiveness issue
+//TODO: as an outcome of Vuetify beta upgrade.
+.v-dialog .v-overlay__content {
+  max-height: none !important;
+  max-width: none !important;
+}
diff --git a/sources/packages/web/src/components/aest/StudentApplications.vue b/sources/packages/web/src/components/aest/StudentApplications.vue
@@ -1,8 +1,6 @@
 <template>
   <!-- This component is shared between ministry and student users -->
-  <p class="category-header-large color-blue">
-    Applications
-  </p>
+  <p class="category-header-large color-blue">Applications</p>
   <DataTable
     :value="applicationAndCount.applications"
     :lazy="true"
@@ -27,7 +25,7 @@
       <template #body="slotProps">
         <v-btn
           v-if="clientType === ClientIdType.Student"
-          plain
+          variant="plain"
           @click="$emit('goToApplication', slotProps.data.id)"
           color="primary"
           v-tooltip="'Click To View this Application'"
@@ -74,7 +72,7 @@
               :disabled="
                 hasRestriction || sinValidStatus !== SINStatusEnum.VALID
               "
-              plain
+              variant="plain"
             >
               <font-awesome-icon
                 :icon="['fas', 'pen']"
@@ -93,7 +91,7 @@
               :disabled="
                 hasRestriction || sinValidStatus !== SINStatusEnum.VALID
               "
-              plain
+              variant="plain"
             >
               <font-awesome-icon
                 :icon="['fas', 'trash']"
@@ -104,7 +102,9 @@
           </span>
         </span>
         <span v-if="clientType === ClientIdType.AEST">
-          <v-btn outlined @click="$emit('goToApplication', slotProps.data.id)"
+          <v-btn
+            variant="outlined"
+            @click="$emit('goToApplication', slotProps.data.id)"
             >View</v-btn
           >
         </span>
@@ -183,21 +183,23 @@ export default {
     ) => {
       switch (clientType.value) {
         case ClientIdType.Student:
-          applicationAndCount.value = await StudentService.shared.getAllStudentApplications(
-            page,
-            pageCount,
-            sortField,
-            sortOrder,
-          );
+          applicationAndCount.value =
+            await StudentService.shared.getAllStudentApplications(
+              page,
+              pageCount,
+              sortField,
+              sortOrder,
+            );
           break;
         case ClientIdType.AEST:
-          applicationAndCount.value = await ApplicationService.shared.getAllApplicationAndCount(
-            props.studentId,
-            page,
-            pageCount,
-            sortField,
-            sortOrder,
-          );
+          applicationAndCount.value =
+            await ApplicationService.shared.getAllApplicationAndCount(
+              props.studentId,
+              page,
+              pageCount,
+              sortField,
+              sortOrder,
+            );
           break;
       }
     };

diff --git a/sources/packages/web/src/components/aest/institution/modals/ApproveProgramModal.vue b/sources/packages/web/src/components/aest/institution/modals/ApproveProgramModal.vue
@@ -12,7 +12,7 @@
       ></formio>
     </template>
     <template v-slot:footer>
-      <v-btn outlined :color="COLOR_BLUE" @click="dialogClosed">
+      <v-btn variant="outlined" :color="COLOR_BLUE" @click="dialogClosed">
         Cancel
       </v-btn>
       <v-btn class="primary-btn-background" @click="approveProgram">

diff --git a/sources/packages/web/src/components/aest/institution/modals/DeclineProgramModal.vue b/sources/packages/web/src/components/aest/institution/modals/DeclineProgramModal.vue
@@ -12,7 +12,7 @@
       ></formio>
     </template>
     <template v-slot:footer>
-      <v-btn outlined :color="COLOR_BLUE" @click="dialogClosed">
+      <v-btn variant="outlined" :color="COLOR_BLUE" @click="dialogClosed">
         Cancel
       </v-btn>
       <v-btn class="primary-btn-background" @click="declineProgram">

diff --git a/sources/packages/web/src/components/common/InstitutionUserSummary.vue b/sources/packages/web/src/components/common/InstitutionUserSummary.vue
@@ -109,7 +109,10 @@
         v-if="clientType === ClientIdType.Institution"
         ><template #body="slotProps">
           <span v-if="slotProps.data.userName !== parsedToken?.userName">
-            <v-btn @click="editInstitutionUser(slotProps.data.userName)" plain>
+            <v-btn
+              @click="editInstitutionUser(slotProps.data.userName)"
+              variant="plain"
+            >
               <font-awesome-icon
                 :icon="['fas', 'pen']"
                 v-if="slotProps.data.isActive"
@@ -212,23 +215,25 @@ export default {
       loading.value = true;
       switch (clientType.value) {
         case ClientIdType.Institution:
-          usersListAndCount.value = await InstitutionService.shared.institutionSummary(
-            page,
-            pageCount,
-            searchBox.value,
-            sortField,
-            sortOrder,
-          );
+          usersListAndCount.value =
+            await InstitutionService.shared.institutionSummary(
+              page,
+              pageCount,
+              searchBox.value,
+              sortField,
+              sortOrder,
+            );
           break;
         case ClientIdType.AEST:
-          usersListAndCount.value = await InstitutionService.shared.institutionSummaryForAEST(
-            props.institutionId,
-            page,
-            pageCount,
-            searchBox.value,
-            sortField,
-            sortOrder,
-          );
+          usersListAndCount.value =
+            await InstitutionService.shared.institutionSummaryForAEST(
+              props.institutionId,
+              page,
+              pageCount,
+              searchBox.value,
+              sortField,
+              sortOrder,
+            );
           break;
       }
       loading.value = false;
@@ -298,14 +303,16 @@ export default {
 
       if (clientType.value === ClientIdType.Institution) {
         // Get User type and Role
-        userRoleType.value = await InstitutionService.shared.getUserTypeAndRoles();
+        userRoleType.value =
+          await InstitutionService.shared.getUserTypeAndRoles();
         userType.value = userRoleType.value?.userTypes
           ? userRoleType.value.userTypes.map((el: string) =>
               el !== "admin" ? { name: el, code: el } : null,
             )
           : [];
 
-        adminRoles.value = await InstitutionService.shared.getGetAdminRoleOptions();
+        adminRoles.value =
+          await InstitutionService.shared.getGetAdminRoleOptions();
       }
     });
     return {

diff --git a/sources/packages/web/src/components/common/LocationSummary.vue b/sources/packages/web/src/components/common/LocationSummary.vue
@@ -32,7 +32,7 @@
         </span>
       </v-col>
       <v-col cols="2" v-if="clientType === ClientIdType.Institution">
-        <v-btn plain @click="getLocation(item.id)">
+        <v-btn variant="plain" @click="getLocation(item.id)">
           <font-awesome-icon :icon="['fas', 'cog']" class="mr-2" />
           Edit
         </v-btn>
@@ -121,12 +121,14 @@ export default {
     const getInstitutionLocationList = async () => {
       switch (clientType.value) {
         case ClientIdType.Institution:
-          institutionLocationList.value = await InstitutionService.shared.getAllInstitutionLocations();
+          institutionLocationList.value =
+            await InstitutionService.shared.getAllInstitutionLocations();
           break;
         case ClientIdType.AEST:
-          institutionLocationList.value = await InstitutionService.shared.getAllInstitutionLocationSummary(
-            props.institutionId,
-          );
+          institutionLocationList.value =
+            await InstitutionService.shared.getAllInstitutionLocationSummary(
+              props.institutionId,
+            );
           break;
       }
     };
@@ -137,15 +139,15 @@ export default {
         item.data.address.addressLine2,
         `${item.data.address.city} ${item.data.address.province}, ${item.data.address.postalCode}`,
         item.data.address.country,
-      ].filter(address => address);
+      ].filter((address) => address);
     };
 
     const primaryContactList = (item: InstitutionLocationsDetails) => {
       return [
         `${item.primaryContact.primaryContactFirstName} ${item.primaryContact.primaryContactLastName}`,
         item.primaryContact.primaryContactPhone,
         item.primaryContact.primaryContactEmail,
-      ].filter(contact => contact);
+      ].filter((contact) => contact);
     };
 
     onMounted(async () => {

diff --git a/sources/packages/web/src/components/common/OfferingSummary.vue b/sources/packages/web/src/components/common/OfferingSummary.vue
@@ -15,12 +15,10 @@
         v-if="isInstitutionUser"
         class="ml-2"
         @click="goToAddNewOffering()"
-        outlined
+        variant="outlined"
         color="#2965C5"
       >
-        <v-icon size="25" left>
-          mdi-open-in-new
-        </v-icon>
+        <v-icon size="25" left> mdi-open-in-new </v-icon>
         Add Study Period
       </v-btn>
     </div>
@@ -62,7 +60,7 @@
     <Column>
       <template #body="slotProps">
         <v-btn
-          outlined
+          variant="outlined"
           @click="offeringButtonAction(slotProps.data.id)"
           color="#2965C5"
         >
@@ -179,25 +177,27 @@ export default {
     ) => {
       loading.value = true;
       if (isInstitutionUser.value) {
-        offeringsAndCount.value = await EducationProgramOfferingService.shared.getAllEducationProgramOffering(
-          props.locationId,
-          props.programId,
-          page,
-          pageCount,
-          searchBox.value,
-          sortField,
-          sortOrder,
-        );
+        offeringsAndCount.value =
+          await EducationProgramOfferingService.shared.getAllEducationProgramOffering(
+            props.locationId,
+            props.programId,
+            page,
+            pageCount,
+            searchBox.value,
+            sortField,
+            sortOrder,
+          );
       } else if (isAESTUser.value) {
-        offeringsAndCount.value = await EducationProgramOfferingService.shared.getOfferingSummaryForAEST(
-          props.locationId,
-          props.programId,
-          page,
-          pageCount,
-          searchBox.value,
-          sortField,
-          sortOrder,
-        );
+        offeringsAndCount.value =
+          await EducationProgramOfferingService.shared.getOfferingSummaryForAEST(
+            props.locationId,
+            props.programId,
+            page,
+            pageCount,
+            searchBox.value,
+            sortField,
+            sortOrder,
+          );
       }
       loading.value = false;
     };