Merge pull request #538 from AudiovisualMetadataPlatform/vue3

Changes so far for moving off Migration Build to Vue 3

babel.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   presets: ["@vue/cli-plugin-babel/preset"],
-  plugins: ["vuera/babel"]
+  // plugins: ["vuera/babel"]
 };

package.json

@@ -3,7 +3,6 @@
   "version": "1.0.2",
   "private": true,
   "scripts": {
-    "postinstall": "cd node_modules/@bbc/react-transcript-editor && npm install && npm run build:component",
     "serve": "vue-cli-service serve --port 8500",
     "build": "vue-cli-service build",
     "test": "vue-cli-service test:unit",
@@ -12,22 +11,19 @@
     "stop": "pkill --signal SIGINT amppd-ui"
   },
   "dependencies": {
-    "@bbc/react-transcript-editor": "https://github.com/AudiovisualMetadataPlatform/react-transcript-editor.git",
     "@vue/cli": "^5.0.8",
-    "@vue/compat": "^3.4.34",
-    "@vuejs-community/vue-filter-date-format": "^1.6.3",
+    "@vuejs-community/vue-filter-date-format": "^1.7.1",
     "axios": "^1.7.2",
     "bootstrap": "^5.3.3",
-    "bootstrap-vue": "^2.23.1",
+    "bootstrap-vue-next": "^0.24.21",
     "chart.js": "^4.4.3",
     "moment": "^2.30.1",
     "underscore": "^1.13.7",
     "vue": "^3.4.34",
     "vue-click-outside": "^1.1.0",
-    "vue3-mediaelement": "^0.0.8",
     "vue-router": "^4.4.0",
+    "vue3-mediaelement": "^0.0.8",
     "vuejs3-datepicker": "^1.0.19",
-    "vuera": "^0.2.7",
     "vuex": "^4.1.0",
     "vuex-pathify": "^3.0.0-beta",
     "vuex-persistedstate": "^4.1.0"

public/index.html

@@ -9,6 +9,7 @@
     <!-- TODO need to switch to BT 5 -->
     <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/> -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="/css/jquery.dataTables.min.css">

src/components/account/Login.vue

@@ -155,11 +155,9 @@ export default {
       }
       if (self.errors.email_error == "" && self.errors.pswd_error == "") {
         var currentUser = await accountService.login(self.email, self.pswd);
-        console.log("current user: " + currentUser);
+        console.log("Current user: ", currentUser);
         if (currentUser && currentUser.token) {
           self.isAuthenticated = true;
-          console.log("self.accessControl = ", self.accessControl)
-          console.log("store.accessControl: ", self.$store.state.accessControl);
           await self.accessControlService.initPermissions(self);
           // Force setting localStorage vuex object for state in vuex-persistedstate
           let vuex = JSON.parse(localStorage.getItem("vuex"));

src/components/dashboard/Dashboard.vue

@@ -1188,7 +1188,7 @@ export default {
           break;
       }
 
-      this.$bvModal.show("modal-lg");
+      this.$bvModal?.show("modal-lg");
     },
     getDateString() {
       const date = new Date();

src/components/dashboard/DashboardTable.vue

@@ -292,12 +292,12 @@
 
     <!-- Modal for delete confirmation -->
     <b-modal v-model="showModal" id="modal-center" centered>
-      <template #modal-header="{}">
+      <template #modal-header>
         <h5 class="text-capitalize">
           Confirm
         </h5>
       </template>
-      <template #default="{}">
+      <template #default>
         <div class="row pad-all-2">
           Are you sure you want to delete this result from the Dashboard? This
           action cannot be rolled back.

src/components/entity/EntityList.vue

@@ -1445,7 +1445,7 @@ export default {
     },
     onSearch(type) {
       this.searchType = type;
-      this.$bvModal.show("modal-lg");
+      this.$bvModal?.show("modal-lg");
     },
     onSearchDone(records) {
       this.records = records && records.length ? records : this.masterRecords;

src/components/entity/ItemSearch.vue

@@ -71,7 +71,7 @@ export default {
     
     // pop up child component (the Search pop-up ialog)
     onSearch() {
-      this.$bvModal.show("modal-lg");
+      this.$bvModal?.show("modal-lg");
     },
 
     // call item search API 

src/components/evaluation/GroundTruthModal.vue

@@ -9,7 +9,7 @@
       no-close-on-backdrop
       size="xl"
     >
-      <template #modal-header="{}">
+      <template #modal-header>
         <h5 class="modal-title" id="exampleModalLongTitle">
           Upload/Select Ground Truth
         </h5>
@@ -22,7 +22,7 @@
           <span @click="onCancel()">×</span>
         </button>
       </template>
-      <template #default="{}">
+      <template #default>
         <div class="form-row body-m">
           <div class="col-12">
             <h3>Select a Ground Truth</h3>

src/components/shared/Search.vue

@@ -7,7 +7,7 @@
       @show="processModalData()"
       :no-close-on-backdrop="type === 'item-search'"
     >
-      <template #modal-header="{}">
+      <template #modal-header>
         <!-- Emulate built in modal header close button action -->
 
         <h5 class="text-capitalize" v-if="!isEntityList">
@@ -24,7 +24,7 @@
         <h5 class="text-capitalize" v-if="isEntityList">Search</h5>
       </template>
 
-      <template #default="{}">
+      <template #default>
         <div v-if="type === 'item-search'" class="form-group">
           <div class="container-fluid">
             <div class="row">

src/components/supplement/SupplementList.vue

@@ -164,7 +164,7 @@ export default {
     },
     onSearch(type) {
       this.searchType = type;
-      this.$bvModal.show("modal-lg");
+      this.$bvModal?.show("modal-lg");
     },
     onSearchDone(records) {
       this.records = records && records.length ? records : this.masterRecords;

src/components/unused/StatusFilter.vue

@@ -46,7 +46,7 @@
 <script>
 import sync from "@/helpers/sync";
 import _ from "underscore";
-import { BFormCheckboxGroup } from "bootstrap-vue";
+import { BFormCheckboxGroup } from "bootstrap-vue-next";
 import ClickOutside from "vue-click-outside";
 // import Multiselect from 'vue-multiselect';
 

src/components/workflow/SelectWorkflow.vue

@@ -281,13 +281,13 @@
         class="spl-fr-btn"
       ></b-button>
       <b-modal v-model="showFRModal" id="modal-center" centered>
-        <template #modal-header="{}">
+        <template #modal-header>
           <h5 class="text-capitalize">
             Choose the Facial Recognition input file for
             {{ supplementList[0].primaryFileName }}:
           </h5>
         </template>
-        <template #default="{}">
+        <template #default>
           <b-form-group v-slot="{ ariaDescribedby }">
             <b-form-radio
               v-for="(supplement, index) in supplementList"

src/components/workflow/WorkflowEditor.vue

@@ -26,12 +26,12 @@
         </div>
       </div>
       <b-modal v-model="showModal" id="modal-center" centered>
-        <template #modal-header="{}">
+        <template #modal-header>
           <h5 class="text-capitalize">
             Confirm
           </h5>
         </template>
-        <template #default="{}">
+        <template #default>
           <div class="row pad-all-2">
             Any unsaved changes will be lost. Do you want to continue?
           </div>

src/components/workflow/WorkflowList.vue

@@ -245,7 +245,6 @@ export default {
   methods: {
     canCreate() {
       let actionKey = env.getEnv("VUE_APP_AC_ACTIONTYPE_CREATE") + "-" + env.getEnv("VUE_APP_AC_TARGETTYPE_WORKFLOW")
-      console.log("actionKey" + actionKey);
       return this.acIsAdmin || this.acActions.includes(actionKey);
     },
     canUpdate() {
@@ -317,8 +316,8 @@ export default {
         self.listOfWorkflows[workflowIndex]
       );
     },
-    async handleWorkflowSearch() {
-      this.$bvModal.show("modal-lg");
+    handleWorkflowSearch() {
+      this.$bvModal?.show("modal-lg");
     },
     async handleWorkflowCreation() {
       const self = this;

src/main.js

@@ -2,12 +2,12 @@ import { createApp } from 'vue'
 import App from "./App.vue";
 import router from "./router";
 import { store } from "./store/amp-store";
-import { VuePlugin } from "vuera";
+// import { VuePlugin } from "vuera";
 import VueFilterDateFormat from "@vuejs-community/vue-filter-date-format";
-import BootstrapVue from "bootstrap-vue";
+import {createBootstrap} from "bootstrap-vue-next";
 import moment from "moment";
 import "bootstrap/dist/css/bootstrap.css";
-import "bootstrap-vue/dist/bootstrap-vue.css";
+import "bootstrap-vue-next/dist/bootstrap-vue-next.css";
 
 const app = createApp(App)
 
@@ -17,49 +17,49 @@ app.config.globalProperties.$filters = {
   }
 }
 
-app.use(VuePlugin);
-app.use(BootstrapVue);
+// app.use(VuePlugin);
+app.use(createBootstrap());
 
-app.use(VueFilterDateFormat, {
-  dayOfWeekNames: [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ],
-  dayOfWeekNamesShort: ["Su", "Mo", "Tu", "We", "Tr", "Fr", "Sa"],
-  monthNames: [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ],
-  monthNamesShort: [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ],
-});
+// app.use(VueFilterDateFormat, {
+//   dayOfWeekNames: [
+//     "Sunday",
+//     "Monday",
+//     "Tuesday",
+//     "Wednesday",
+//     "Thursday",
+//     "Friday",
+//     "Saturday",
+//   ],
+//   dayOfWeekNamesShort: ["Su", "Mo", "Tu", "We", "Tr", "Fr", "Sa"],
+//   monthNames: [
+//     "January",
+//     "February",
+//     "March",
+//     "April",
+//     "May",
+//     "June",
+//     "July",
+//     "August",
+//     "September",
+//     "October",
+//     "November",
+//     "December",
+//   ],
+//   monthNamesShort: [
+//     "Jan",
+//     "Feb",
+//     "Mar",
+//     "Apr",
+//     "May",
+//     "Jun",
+//     "Jul",
+//     "Aug",
+//     "Sep",
+//     "Oct",
+//     "Nov",
+//     "Dec",
+//   ],
+// });
 
 app.use(router);
 app.use(store);

tests/unit/components/dashboard/Dashboard.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
+import {createBootstrap} from 'bootstrap-vue-next'
 import Dashboard from '../../../../src/components/dashboard/Dashboard.vue'
 jest.mock('../../../../src/service/base-service',
     function () {
@@ -28,7 +28,7 @@ describe('Dashboard.vue', () => {
     let wrapper;
     let refreshDataSpy;
     const localVue = createLocalVue();
-    localVue.use(BootstrapVue);
+    localVue.use(createBootstrap());
     const $store = {
         state: {
             workflowDashboard: {

tests/unit/components/dashboard/DashboardTable.spec.js

@@ -1,7 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
 
 import DashboardTable from '../../../../src/components/dashboard/DashboardTable.vue'
-import BootstrapVue from 'bootstrap-vue'
+import {createBootstrap} from 'bootstrap-vue-next'
 import moment from 'moment'
 
 jest.mock('../../../../src/service/base-service', 
@@ -79,7 +79,7 @@ describe('DashboardTable.vue', () => {
   let wrapper;
   let refreshDataSpy;
   const localVue = createLocalVue();
-  localVue.use(BootstrapVue);
+  localVue.use(createBootstrap());
   const $store = {
     state: {
       workflowDashboard: {

tests/unit/components/entity/EntityList.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
+import {createBootstrap} from 'bootstrap-vue-next'
 import EntityList from '../../../../src/components/entity/EntityList.vue'
 import Vuex from 'vuex'
 
@@ -82,7 +82,7 @@ describe('EntityList.vue', () => {
     let wrapper;
     let refreshDataSpy;
     const localVue = createLocalVue();
-    localVue.use(BootstrapVue);
+    localVue.use(createBootstrap());
     localVue.use(Vuex);
     const $store = {
         state: {

tests/unit/components/entity/ItemFiles.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount, createLocalVue } from "@vue/test-utils";
-import BootstrapVue from "bootstrap-vue";
+import {createBootstrap} from "bootstrap-vue-next";
 import ItemFiles from "../../../../src/components/entity/ItemFiles.vue";
 
 jest.mock("../../../../src/service/base-service", function () {
@@ -134,7 +134,7 @@ describe("ItemFiles.vue", () => {
     let wrapper;
     let refreshDataSpy;
     const localVue = createLocalVue();
-    localVue.use(BootstrapVue);
+    localVue.use(createBootstrap());
     const $store = {
         state: {
             primaryFiles: {

tests/unit/components/workflows/workflowList.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
+import {createBootstrap} from 'bootstrap-vue-next'
 import { wrap } from 'underscore';
 import WorkflowList from '../../../../src/components/workflow/WorkflowList.vue'
 jest.mock('../../../../src/service/base-service',
@@ -44,7 +44,7 @@ jest.mock('../../../../src/service/workflow-service',
 describe('WorkflowList.vue', () => {
     let wrapper;
     const localVue = createLocalVue();
-    localVue.use(BootstrapVue);
+    localVue.use(createBootstrap());
     const $store = {
         state: {
             listOfWorkflows: [],