Feature/vue3 upgrade

frontend/.eslintrc.js

@@ -35,6 +35,7 @@ module.exports = {
     "unicorn/prevent-abbreviations": "off",
     "@typescript-eslint/ban-ts-comment": "warn",
     "@typescript-eslint/no-explicit-any": "off",
+    "vue/no-v-for-template-key": "off", //TODO remove line when upgraded to vue3
   },
   overrides: [
     {

frontend/backend-types.ts

@@ -1094,6 +1094,7 @@ export interface components {
       issuerDid?: string[] | null;
     };
     RuntimeConfig: {
+      ledger?: string;
       agentName?: string;
       uptime?: string;
       messageTrigger?: components["schemas"]["MessageTrigger"][];

frontend/package.json

@@ -20,67 +20,72 @@
     "prettify": "prettier --write \"**/*.{css,html,js,json,mjs,scss,ts,tsx,yml,md,vue}\""
   },
   "dependencies": {
+    "@fontsource/roboto": "4.5.7",
+    "@vue/compat": "3.2.37",
     "axios": "0.24.0",
     "core-js": "3.19.3",
     "csv-string": "4.0.1",
     "deepmerge": "4.2.2",
     "font-awesome": "4.7.0",
     "jsonld-context-parser": "2.1.5",
     "material-design-icons-iconfont": "6.1.1",
+    "mitt": "3.0.0",
     "moment": "2.29.4",
     "qrcode.vue": "1.7.0",
-    "vue": "2.6.14",
+    "vue": "3.2.37",
     "vue-advanced-chat": "1.5.5",
-    "vue-i18n": "8.26.8",
-    "vue-json-pretty": "1.8.3",
+    "vue-axios": "3.4.1",
+    "vue-i18n": "9.1.10",
+    "vue-json-pretty": "2.1.1",
     "vue-markdown-render": "1.1.3",
-    "vue-moment": "4.1.0",
-    "vue-native-websocket": "2.0.15",
-    "vue-router": "3.5.4",
+    "vue-native-websocket-vue3": "3.1.6",
+    "vue-router": "4.1.2",
     "vuetify": "2.6.6",
-    "vuex": "3.6.2",
-    "@fontsource/roboto": "4.5.7"
+    "vuex": "4.0.2"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "5.15.4",
     "@mdi/font": "6.5.95",
     "@mdi/js": "6.5.95",
-    "@types/jest": "24.0.25",
+    "@types/jest": "28.1.6",
     "@types/markdown-it": "12.2.3",
-    "@types/vue-moment": "4.0.3",
     "@typescript-eslint/eslint-plugin": "5.6.0",
     "@typescript-eslint/parser": "5.6.0",
-    "@vue/cli-plugin-babel": "4.5.15",
-    "@vue/cli-plugin-e2e-cypress": "4.5.15",
-    "@vue/cli-plugin-eslint": "4.5.15",
-    "@vue/cli-plugin-router": "4.5.15",
-    "@vue/cli-plugin-typescript": "4.5.15",
-    "@vue/cli-plugin-unit-jest": "4.5.15",
-    "@vue/cli-service": "4.5.15",
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-plugin-e2e-cypress": "5.0.8",
+    "@vue/cli-plugin-eslint": "5.0.8",
+    "@vue/cli-plugin-router": "5.0.8",
+    "@vue/cli-plugin-typescript": "5.0.8",
+    "@vue/cli-plugin-unit-jest": "5.0.8",
+    "@vue/cli-service": "5.0.8",
+    "@vue/compiler-sfc": "3.2.37",
     "@vue/eslint-config-prettier": "6.0.0",
     "@vue/eslint-config-typescript": "9.1.0",
     "@vue/test-utils": "1.3.0",
     "babel-plugin-transform-require-context": "0.1.1",
+    "cypress": "^9.7.0",
     "eslint": "7.32.0",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-unicorn": "39.0.0",
     "eslint-plugin-vue": "8.2.0",
     "husky": "7.0.4",
+    "jest": "^27.1.0",
     "jest-environment-jsdom-sixteen": "2.0.0",
     "license-check-and-add": "4.0.5",
     "license-checker": "25.0.1",
     "lint-staged": "12.1.7",
+    "node-polyfill-webpack-plugin": "2.0.0",
     "openapi-typescript": "6.0.0-pre.0",
     "oss-attribution-generator": "1.7.1",
     "prettier": "2.5.1",
     "sass": "1.32.13",
     "sass-loader": "8.0.2",
-    "typescript": "4.5.5",
+    "ts-jest": "^27.0.4",
+    "typescript": "~4.5.5",
     "vue-cli-plugin-i18n": "2.3.1",
-    "vue-cli-plugin-vuetify": "2.4.8",
+    "vue-cli-plugin-vuetify": "2.5.1",
     "vue-jest": "3.0.7",
-    "vue-template-compiler": "2.6.14",
-    "vuetify-loader": "1.7.3"
+    "vue-loader": "17.0.0"
   },
   "engineStrict": true,
   "engines": {

frontend/src/App.vue

@@ -230,7 +230,7 @@
       <v-spacer></v-spacer>
       <v-tooltip bottom>
         <template v-slot:activator="{ on, attrs }">
-          <v-btn icon v-bind="attrs" v-on="on" @click="copyDid">
+          <v-btn v-bind="attrs" icon v-on="on" @click="copyDid">
             <v-icon>$vuetify.icons.identity</v-icon>
           </v-btn>
         </template>
@@ -335,7 +335,6 @@
 </template>
 
 <script lang="ts">
-import { EventBus } from "./main";
 import Taa from "./components/taa/TransactionAuthorAgreement.vue";
 import BasicMessages from "@/components/messages/BasicMessages.vue";
 import merge from "deepmerge";
@@ -492,8 +491,8 @@ export default {
         navigator.language.split("-")[0] ||
         process.env.VUE_APP_I18N_LOCALE ||
         "en";
-      i18n.locale = locale;
-      this.$vuetify.lang.current = locale;
+      i18n.global.locale.value = locale;
+      // this.$vuetify.lang.current = locale; TODO
 
       // Load up an alternate favicon
       if (this.ux.favicon) {
@@ -507,18 +506,17 @@ export default {
 
     // Global Error handling
     // Todo: Put in extra component
-
-    EventBus.$on("title", (title: string) => {
+    this.emitter.on("title", (title: string) => {
       this.title = title;
     });
 
-    EventBus.$on("success", (message: string) => {
+    this.emitter.on("success", (message: string) => {
       (this.snackbarMsg = message),
         (this.color = "green"),
         (this.snackbar = true);
     });
 
-    EventBus.$on("error", (message: AxiosError) => {
+    this.emitter.on("error", (message: AxiosError) => {
       console.log(message.response);
 
       if (

frontend/src/components/ActivityList.vue

@@ -74,13 +74,12 @@
       </template>
 
       <template v-slot:[`item.updatedAt`]="{ item }">
-        {{ item.updatedAt | formatDateLong }}
+        {{ $filters.formatDateLong(item.updatedAt) }}
       </template>
     </v-data-table>
   </v-container>
 </template>
 <script lang="ts">
-import { EventBus } from "@/main";
 import { ActivityRoles, ActivityStates, ActivityTypes } from "@/constants";
 import VBpaButton from "@/components/BpaButton";
 import activitiesService from "@/services/activities-service";
@@ -200,7 +199,7 @@ export default {
           if (error.response.status === 404) {
             this.items = [];
           } else {
-            EventBus.$emit("error", this.$axiosErrorMessage(error));
+            this.emitter.emit("error", this.$axiosErrorMessage(error));
           }
         });
     },

frontend/src/components/CreateSchema.vue

@@ -75,8 +75,8 @@
                 </v-col>
               </v-row>
               <v-row
-                v-for="(attr, index) in schemaAttributes"
                 v-bind:key="attr.type"
+                v-for="(attr, index) in schemaAttributes"
               >
                 <v-col cols="8" class="py-0">
                   <v-text-field
@@ -141,7 +141,6 @@
 </template>
 
 <script lang="ts">
-import { EventBus } from "@/main";
 import {
   SchemaAPI,
   CreateSchemaRequest,
@@ -254,15 +253,15 @@ export default {
           return resp.data;
         }
       } catch (error) {
-        EventBus.$emit("error", this.$axiosErrorMessage(error));
+        this.emitter.emit("error", this.$axiosErrorMessage(error));
       }
     },
     async submit() {
       this.isBusy = true;
       try {
         const _schema = await this.saveSchema();
         if (_schema) {
-          EventBus.$emit(
+          this.emitter.emit(
             "success",
             this.$t("component.createSchema.eventSuccess")
           );
@@ -271,7 +270,7 @@ export default {
         }
       } catch (error) {
         this.isBusy = false;
-        EventBus.$emit("error", this.$axiosErrorMessage(error));
+        this.emitter.emit("error", this.$axiosErrorMessage(error));
       }
     },
     cancel() {

frontend/src/components/CredExList.vue

@@ -17,7 +17,7 @@
       :hide-default-footer="hideFooter"
       :headers="headers"
       :items="exchanges"
-      :options.sync="options"
+      :options="options"
       :server-items-length="totalNumberOfElements"
       sort-by="updatedAt"
       sort-desc
@@ -29,7 +29,9 @@
       </template>
       <template v-slot:[`item.state`]="{ item }">
         <span>
-          {{ (item.state ? item.state.replace("_", " ") : "") | capitalize }}
+          {{
+            $filters.capitalize(item.state ? item.state.replace("_", " ") : "")
+          }}
           <v-icon
             v-if="isItemActive(item) && !item.revoked"
             class="iconHeight"
@@ -42,10 +44,10 @@
           <v-tooltip v-if="item.errorMsg && stateIsProblemOrDeclined(item)" top>
             <template v-slot:activator="{ on, attrs }">
               <v-icon
+                v-bind="attrs"
                 color="error"
                 class="iconHeight"
                 small
-                v-bind="attrs"
                 v-on="on"
               >
                 $vuetify.icons.connectionAlert
@@ -56,13 +58,13 @@
         </span>
       </template>
       <template v-slot:[`item.updatedAt`]="{ item }">
-        {{ item.updatedAt | formatDateLong }}
+        {{ $filters.formatDateLong(item.updatedAt) }}
       </template>
       <template v-slot:[`item.createdAt`]="{ item }">
-        {{ item.createdAt | formatDateLong }}
+        {{ $filters.formatDateLong(item.createdAt) }}
       </template>
       <template v-slot:[`item.role`]="{ item }">
-        {{ item.role | capitalize }}
+        {{ $filters.capitalize(item.role) }}
       </template>
       <template v-slot:[`item.revocable`]="{ item }">
         <span v-if="item.revocable && item.revoked"
@@ -282,7 +284,6 @@ import Cred from "@/components/Credential.vue";
 import VBpaButton from "@/components/BpaButton";
 import NewMessageIcon from "@/components/NewMessageIcon.vue";
 import Timeline from "@/components/Timeline.vue";
-import { EventBus } from "@/main";
 import {
   CredentialExchangeRoles,
   CredentialExchangeStates,
@@ -471,7 +472,7 @@ export default {
           this.hideFooter = this.totalNumberOfElements <= itemsPerPage;
         }
       } catch (error) {
-        EventBus.$emit("error", this.$axiosErrorMessage(error));
+        this.emitter.emit("error", this.$axiosErrorMessage(error));
       }
       this.isLoadingCredentials = false;
     },
@@ -587,11 +588,11 @@ export default {
       issuerService
         .sendCredentialOffer(this.document.credentialExchangeId, counterOffer)
         .then(() => {
-          EventBus.$emit("success");
+          this.emitter.emit("success");
           this.closeDialog();
         })
         .catch((error) => {
-          EventBus.$emit("error", this.$axiosErrorMessage(error));
+          this.emitter.emit("error", this.$axiosErrorMessage(error));
         })
         .finally(() => {
           this.isLoadingSendCounterOffer = false;

frontend/src/components/Credential.vue

@@ -46,7 +46,7 @@
         <v-text-field
           v-if="intDoc.issuedAt"
           :label="$t('component.credential.issuedAt')"
-          :value="$options.filters.moment(intDoc.issuedAt, 'YYYY-MM-DD HH:mm')"
+          :value="dateTime(intDoc.issuedAt, 'YYYY-MM-DD HH:mm')"
           disabled
           outlined
           dense
@@ -79,6 +79,7 @@
 <script lang="ts">
 import * as textUtils from "@/utils/textUtils";
 import { MyDocumentAPI, SchemaAPI } from "@/services";
+import moment from "moment";
 
 export default {
   props: {
@@ -230,6 +231,9 @@ export default {
         }
       });
     },
+    dateTime(date: number) {
+      return moment(date).format("YYYY-MM-DD");
+    },
   },
 };
 </script>

frontend/src/components/CredentialCard.vue

@@ -39,10 +39,10 @@
           <v-expansion-panel-content>
             <v-list dense>
               <v-list-item
+                v-bind:key="key"
                 v-for="[key, value] in Object.entries(
                   this.document.proofData.identifier
                 )"
-                v-bind:key="key"
               >
                 <v-list-item-content>
                   <v-list-item-title class="font-weight-medium">

frontend/src/components/CredentialDefinitions.vue

@@ -8,7 +8,7 @@
 
 <template>
   <v-container>
-    <v-row v-for="(entry, index) in items" v-bind:key="index">
+    <v-row v-bind:key="index" v-for="(entry, index) in items">
       <v-col cols="4" class="py-0">
         <v-text-field
           :label="$t('component.credentialDefinitions.label')"
@@ -61,7 +61,6 @@
 </template>
 
 <script lang="ts">
-import { EventBus } from "@/main";
 import issuerService from "@/services/issuer-service";
 import VBpaButton from "@/components/BpaButton";
 import { CreateCredDefRequest, CredDef } from "@/services";
@@ -139,7 +138,7 @@ export default {
             this.$emit("changed");
           })
           .catch((error) => {
-            EventBus.$emit("error", this.$axiosErrorMessage(error));
+            this.emitter.emit("error", this.$axiosErrorMessage(error));
           });
       } else {
         this.items.splice(index, 1);
@@ -163,7 +162,7 @@ export default {
           if (result.status === 200) {
             this.isEdit = false;
             item.isEdit = false;
-            EventBus.$emit(
+            this.emitter.emit(
               "success",
               this.$t("component.credentialDefinitions.eventSuccess")
             );
@@ -173,7 +172,7 @@ export default {
         })
         .catch((error) => {
           this.isBusy = false;
-          EventBus.$emit("error", this.$axiosErrorMessage(error));
+          this.emitter.emit("error", this.$axiosErrorMessage(error));
         });
     },