From 8fa25184947492d3a93e12576b7421ffe7f3846d Mon Sep 17 00:00:00 2001 From: yingfeng Date: Mon, 2 Sep 2024 11:06:41 -0400 Subject: [PATCH] AMP-3122/3371/3377 : update packages - fix for app/store/router API changes - fix vue3 warnings - debug log for pathify --- package-lock.json | 85 +++---------------- src/components/account/Login.vue | 39 ++++----- src/components/batch/BatchIngest.vue | 2 +- src/components/dashboard/DashboardTable.vue | 4 +- src/components/entity/EntityList.vue | 16 ++-- src/components/entity/OutputFile.vue | 2 +- .../evaluation/GroundTruthModal.vue | 2 +- src/components/supplement/SupplementFile.vue | 4 +- src/components/supplement/SupplementList.vue | 2 +- src/components/workflow/SelectFiles.vue | 2 +- src/components/workflow/WorkflowList.vue | 4 +- src/main.js | 31 ++++--- src/router.js | 4 +- src/service/access-control-service.js | 2 +- src/store/amp-store.js | 23 ++--- src/store/state.js | 2 +- 16 files changed, 80 insertions(+), 144 deletions(-) diff --git a/package-lock.json b/package-lock.json index a6b912df..c4f671ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,8 +21,8 @@ "underscore": "^1.13.7", "vue": "^3.4.34", "vue-click-outside": "^1.1.0", - "vue-mediaelement": "^1.0.0", "vue-router": "^4.4.0", + "vue3-mediaelement": "^0.0.8", "vuejs3-datepicker": "^1.0.19", "vuera": "^0.2.7", "vuex": "^4.1.0", @@ -8993,11 +8993,6 @@ "integrity": "sha512-i1gCgmR9dCl6Vil6UKPI/trA69s08g/syhiDK9TG0Nf1RJjjFI+AzoWW7sPufzkgYAn861skuCwJa0pIIHYxvg==", "dev": true }, - "node_modules/es6-promise": { - "version": "4.2.8", - "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz", - "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==" - }, "node_modules/escalade": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz", @@ -10205,15 +10200,6 @@ "node": ">=0.4.0" } }, - "node_modules/flv.js": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/flv.js/-/flv.js-1.6.2.tgz", - "integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==", - "dependencies": { - "es6-promise": "^4.2.8", - "webworkify-webpack": "^2.1.5" - } - }, "node_modules/follow-redirects": { "version": "1.15.6", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", @@ -10832,20 +10818,6 @@ "node": "*" } }, - "node_modules/hls.js": { - "version": "0.12.4", - "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-0.12.4.tgz", - "integrity": "sha512-e8OPxQ60dBVsdkv4atdxR21KzC1mgwspM41qpozpj3Uv1Fz4CaeQy3FWoaV2O+QKKbNRvV5hW+/LipCWdrwnMQ==", - "dependencies": { - "eventemitter3": "3.1.0", - "url-toolkit": "^2.1.6" - } - }, - "node_modules/hls.js/node_modules/eventemitter3": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz", - "integrity": "sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==" - }, "node_modules/hosted-git-info": { "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", @@ -15090,16 +15062,7 @@ "node": ">= 0.6" } }, - "node_modules/mediaelement-plugins": { - "version": "2.6.7", - "resolved": "https://registry.npmjs.org/mediaelement-plugins/-/mediaelement-plugins-2.6.7.tgz", - "integrity": "sha512-idCgBOnaWHKqVOKciuFh/6SnauefZQ9TjBZ0uzNTaSooyyK/xhQwcNEitKJJBw90An2pbwlP0jIyUma7HR2cIA==", - "dependencies": { - "global": "^4.3.1", - "mediaelement": "^5.0.1" - } - }, - "node_modules/mediaelement-plugins/node_modules/mediaelement": { + "node_modules/mediaelement": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/mediaelement/-/mediaelement-5.1.1.tgz", "integrity": "sha512-dmS/HT4iV/YlCSSf/Tto66m3sptHnPiTld3Y64lSLnqXYOH/f3vXhA0AW01zEHS37HMAlrYQ0kEDxhpwej+6eA==", @@ -20078,11 +20041,6 @@ "node": ">= 4" } }, - "node_modules/url-toolkit": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz", - "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==" - }, "node_modules/use": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", @@ -20508,26 +20466,6 @@ "node": ">=8" } }, - "node_modules/vue-mediaelement": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/vue-mediaelement/-/vue-mediaelement-1.0.0.tgz", - "integrity": "sha512-qg7b0lp9oA5rqL1TSdyJ26uvfOOiJeLKD6DdPJ0X5O91CiS7o1IZ41aqQHPMtfpEFprPFUj8NYMSCXaspcVPsA==", - "dependencies": { - "flv.js": "^1.5.0", - "hls.js": "^0.12.4", - "mediaelement": "^4.2.9", - "mediaelement-plugins": "^2.5.0", - "wind-dom": "0.0.3" - } - }, - "node_modules/vue-mediaelement/node_modules/mediaelement": { - "version": "4.2.17", - "resolved": "https://registry.npmjs.org/mediaelement/-/mediaelement-4.2.17.tgz", - "integrity": "sha512-v+NcqaylHNPFbpfPwlyw8/LnKcuSyYlWaMcUvB+zBzP9jkVvHmVl63JebGOC3Zmimh4dRq6vzXlbda4e5jT4VQ==", - "dependencies": { - "global": "^4.3.1" - } - }, "node_modules/vue-router": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz", @@ -20576,6 +20514,15 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "node_modules/vue3-mediaelement": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/vue3-mediaelement/-/vue3-mediaelement-0.0.8.tgz", + "integrity": "sha512-tRpDvzjROrwjN4FoS0ZWY7/XRy/NEsbnts8W+NACJnSCE/7nch/IQXBhUhjPD0Ht55j7z6ylx5GlYV6+u/R22A==", + "dependencies": { + "mediaelement": "^5.1.0", + "vue": "^3.2.38" + } + }, "node_modules/vuejs3-datepicker": { "version": "1.0.19", "resolved": "https://registry.npmjs.org/vuejs3-datepicker/-/vuejs3-datepicker-1.0.19.tgz", @@ -21126,11 +21073,6 @@ "node": ">=0.8.0" } }, - "node_modules/webworkify-webpack": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz", - "integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==" - }, "node_modules/whatwg-encoding": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz", @@ -21199,11 +21141,6 @@ "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==", "dev": true }, - "node_modules/wind-dom": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/wind-dom/-/wind-dom-0.0.3.tgz", - "integrity": "sha512-TlL8trn5lguxKs2O9smpnWC8Ti8rvWP1p7A+k+0DKP9mPRwFzYuijebE1I5BbbklAoBlBS1nwT8ng2DZI51tQg==" - }, "node_modules/word-wrap": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", diff --git a/src/components/account/Login.vue b/src/components/account/Login.vue index d6859668..86070f7d 100644 --- a/src/components/account/Login.vue +++ b/src/components/account/Login.vue @@ -146,37 +146,38 @@ export default { async checkForm() { event.preventDefault(); let self = this; - this.errors.other_errors = []; - if (!this.email) { - this.errors.email_error = "(Email required)"; + self.errors.other_errors = []; + if (!self.email) { + self.errors.email_error = "(Email required)"; } - if (!this.pswd) { - this.errors.pswd_error = "(Password required)"; + if (!self.pswd) { + self.errors.pswd_error = "(Password required)"; } - if (this.errors.email_error == "" && this.errors.pswd_error == "") { - var currentUser = await accountService.login(this.email, this.pswd); - console.log("current user:" + currentUser); - console.log("AUTH:"); + if (self.errors.email_error == "" && self.errors.pswd_error == "") { + var currentUser = await accountService.login(self.email, self.pswd); + console.log("current user: " + currentUser); if (currentUser && currentUser.token) { self.isAuthenticated = true; - await self.accessControlService.initPermissions(this); + 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")); localStorage.setItem("vuex", JSON.stringify({ ...vuex, - acUnitsActions: this.acUnitsActions, - acUnitsMedia: this.acUnitsMedia, - acUnitsOutput: this.acUnitsOutput, - acActions: this.acActions, + acUnitsActions: self.acUnitsActions, + acUnitsMedia: self.acUnitsMedia, + acUnitsOutput: self.acUnitsOutput, + acActions: self.acActions, })); - if (this.$route.query.returnUrl) { - console.log("going to " + this.$route.query.returnUrl); - this.$router.push(this.$route.query.returnUrl); + if (self.$route.query.returnUrl) { + console.log("going to " + self.$route.query.returnUrl); + self.$router.push(self.$route.query.returnUrl); } else { - this.$router.push("/"); + self.$router.push("/"); } } else { - this.errors.other_errors.push("Email and password do not match"); + self.errors.other_errors.push("Email and password do not match"); } } }, diff --git a/src/components/batch/BatchIngest.vue b/src/components/batch/BatchIngest.vue index 0a777945..419e9a72 100644 --- a/src/components/batch/BatchIngest.vue +++ b/src/components/batch/BatchIngest.vue @@ -71,13 +71,13 @@
- {{ new Date(rec.testDate) | LOCAL_DATE_VALUE }} + {{ $filters.localDate(new Date(rec.testDate)) }} - {{ new Date(rec.dateCreated) | LOCAL_DATE_VALUE }} + {{ $filters.localDate(new Date(rec.dateCreated)) }} {{ rec.submitter }} {{ rec.unitName }} diff --git a/src/components/entity/EntityList.vue b/src/components/entity/EntityList.vue index 2072f060..b78f7bb0 100644 --- a/src/components/entity/EntityList.vue +++ b/src/components/entity/EntityList.vue @@ -141,7 +141,7 @@
@@ -161,7 +161,7 @@
@@ -325,7 +325,7 @@ @@ -346,7 +346,7 @@ @@ -371,7 +371,7 @@ @@ -390,7 +390,7 @@ @@ -851,7 +851,7 @@

- {{ elem.createdDate | LOCAL_DATE_VALUE }} + {{ $filters.localDate(elem.createdDate ) }}

@@ -865,7 +865,7 @@

- {{ elem.modifiedDate | LOCAL_DATE_VALUE }} + {{ $filters.localDate(elem.modifiedDate ) }}

diff --git a/src/components/entity/OutputFile.vue b/src/components/entity/OutputFile.vue index a5c0650d..26eacdab 100644 --- a/src/components/entity/OutputFile.vue +++ b/src/components/entity/OutputFile.vue @@ -34,7 +34,7 @@ -

{{ new Date(output.dateCreated) | LOCAL_DATE_VALUE }}

+

{{ $filters.localDate(new Date(output.dateCreated)) }}

{{ output.submitter }} diff --git a/src/components/evaluation/GroundTruthModal.vue b/src/components/evaluation/GroundTruthModal.vue index 716f763f..52caa81f 100644 --- a/src/components/evaluation/GroundTruthModal.vue +++ b/src/components/evaluation/GroundTruthModal.vue @@ -46,7 +46,7 @@ {{ supplement.description }} - {{ supplement.createdDate | LOCAL_DATE_VALUE }} + {{ $filters.localDate(supplement.createdDate) }} @@ -259,7 +259,7 @@ type="text" class="form-control" id="modified_date" - :value="supplement.fileDetails.modifiedDate | LOCAL_DATE_VALUE" + :value="$filters.localDate(supplement.fileDetails.modifiedDate)" disabled /> diff --git a/src/components/supplement/SupplementList.vue b/src/components/supplement/SupplementList.vue index bfa60d48..af08e3b6 100644 --- a/src/components/supplement/SupplementList.vue +++ b/src/components/supplement/SupplementList.vue @@ -84,7 +84,7 @@
Modified Date:
{{ - elem.modifiedDate | LOCAL_DATE_VALUE + $filters.localDate(elem.modifiedDate) }}
diff --git a/src/components/workflow/SelectFiles.vue b/src/components/workflow/SelectFiles.vue index 398efb09..bf4add2d 100644 --- a/src/components/workflow/SelectFiles.vue +++ b/src/components/workflow/SelectFiles.vue @@ -375,7 +375,7 @@ > {{ res.outputLabel }} - {{ new Date(res.dateCreated) | LOCAL_DATE_VALUE }} + {{ $filters.localDate(new Date(res.dateCreated)) }} {{ res.submitter }} {{ res.workflowName }} diff --git a/src/components/workflow/WorkflowList.vue b/src/components/workflow/WorkflowList.vue index 4dd48ebf..5cf4c26b 100644 --- a/src/components/workflow/WorkflowList.vue +++ b/src/components/workflow/WorkflowList.vue @@ -66,11 +66,11 @@
Date Created: -
{{ workflow.createTime | LOCAL_DATE_VALUE }} +
{{ $filters.localDate(workflow.createTime) }}
Last Updated: -
{{ workflow.updateTime | LOCAL_DATE_VALUE }} +
{{ $filters.localDate(workflow.updateTime) }}
diff --git a/src/main.js b/src/main.js index 02e9fa88..7cc16034 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,7 @@ -import Vue from "vue"; +import { createApp } from 'vue' import App from "./App.vue"; import router from "./router"; -import store from "./store/amp-store"; +import { store } from "./store/amp-store"; import { VuePlugin } from "vuera"; import VueFilterDateFormat from "@vuejs-community/vue-filter-date-format"; import BootstrapVue from "bootstrap-vue"; @@ -9,10 +9,18 @@ import moment from "moment"; import "bootstrap/dist/css/bootstrap.css"; import "bootstrap-vue/dist/bootstrap-vue.css"; -Vue.use(VuePlugin); -Vue.use(BootstrapVue); +const app = createApp(App) -Vue.use(VueFilterDateFormat, { +app.config.globalProperties.$filters = { + localDate(value) { + if (value) return moment(value).format("YYYY/MM/DD hh:mm:ss a"); + } +} + +app.use(VuePlugin); +app.use(BootstrapVue); + +app.use(VueFilterDateFormat, { dayOfWeekNames: [ "Sunday", "Monday", @@ -53,13 +61,8 @@ Vue.use(VueFilterDateFormat, { ], }); -Vue.filter("LOCAL_DATE_VALUE", (value) => { - if (value) return moment(value).format("YYYY/MM/DD hh:mm:ss a"); -}); +app.use(router); +app.use(store); +app.mount('#app'); -new Vue({ - router, - store, - render: (h) => h(App), -}).$mount("#app"); -process.title = "amppd-ui"; +// process.title = "amppd-ui"; diff --git a/src/router.js b/src/router.js index 88ad05bd..b2fc7acc 100644 --- a/src/router.js +++ b/src/router.js @@ -1,6 +1,6 @@ import Vue from "vue"; import Router from "vue-router"; -import { createRouter } from 'vue-router' +import { createRouter, createWebHistory } from 'vue-router' import Login from "./components/account/Login.vue"; import Deliverables from "./components/deliverables/Deliverables.vue"; @@ -26,9 +26,9 @@ import AccessDenied from "./components/shared/AccessDenied.vue"; import HomePage from "@/components/home"; import store from "./store/amp-store.js"; -Vue.use(Router); var router = createRouter({ + history: createWebHistory(), routes: [ { path: "/", diff --git a/src/service/access-control-service.js b/src/service/access-control-service.js index 1b1c10d1..88b0ec5b 100644 --- a/src/service/access-control-service.js +++ b/src/service/access-control-service.js @@ -298,7 +298,7 @@ export default class AccessControlService extends BaseService { const self = instance; await this.isAdmin(self); if(!self.acIsAdmin) { - await this.getPermittedActions() + this.getPermittedActions() .then((res) => { let allUnitActions = res.data; if (allUnitActions != undefined) { diff --git a/src/store/amp-store.js b/src/store/amp-store.js index b069d2a7..75a07099 100644 --- a/src/store/amp-store.js +++ b/src/store/amp-store.js @@ -1,12 +1,8 @@ -import Vue from "vue"; -import Vuex from "vuex"; -import pathify from "vuex-pathify"; -import { make } from "vuex-pathify"; +import { createStore } from "vuex"; +import Pathify, { make } from 'vuex-pathify'; import defaultState from "./state"; import createPersistedState from "vuex-persistedstate"; -Vue.use(Vuex); - /*====================================================== = Helpers =======================================================*/ @@ -34,12 +30,11 @@ const getters = {}; = Vue Store instance =======================================================*/ -const store = new Vuex.Store({ - state, - mutations, - actions, - getters, - plugins: [pathify.plugin, createPersistedState()], -}); +export const store = createStore({ + state, + mutations, + actions, + getters, + plugins: [Pathify.plugin, createPersistedState()] + }); -export default store; \ No newline at end of file diff --git a/src/store/state.js b/src/store/state.js index eb9a2387..ef8ec863 100644 --- a/src/store/state.js +++ b/src/store/state.js @@ -218,7 +218,7 @@ const state = { acUnitsActions: [], // 2-D array of all units with all permitted actions per unit for current user acUnitsMedia: [], // IDs of units in which current user can view primaryfile media acUnitsOutput: [], // IDs of units in which current user can view workflow output - acActions: [], // actionKeys of actions current user can perform in some unit + acActions: [] // actionKeys of actions current user can perform in some unit }; export default state;