build(refs T19759): update vuex to v4 [vue 3 upgrade]

client/js/InitVue.js

@@ -35,7 +35,6 @@ function initialize (components = {}, storeModules = {}, apiStoreModules = [], p
 
   return initStore(storeModules, apiStoreModules, presetStoreModules).then(store => {
     const app = createApp({
-      store,
       mounted () {
         window.dplan.notify = new NotificationStoreAdapter(this.$store)
         loadLibs()
@@ -76,6 +75,8 @@ function initialize (components = {}, storeModules = {}, apiStoreModules = [], p
     app.directive('dp-validate-multiselect', dpValidateMultiselectDirective)
     app.directive('tooltip', Tooltip)
 
+    app.use(store)
+
     // Add plugins to Vue instance
     app.use(DPVueCorePlugin)
 

client/js/components/user/DpCreateItem.vue

@@ -46,6 +46,7 @@
 
 <script>
 import { DpAccordion, DpButtonRow, dpValidateMixin } from '@demos-europe/demosplan-ui'
+import { defineAsyncComponent } from 'vue'
 import { mapActions, mapState } from 'vuex'
 
 export default {
@@ -67,8 +68,8 @@ export default {
   components: {
     DpAccordion,
     DpButtonRow,
-    DpOrganisationFormFields: () => import(/* webpackChunkName: "organisation-form-fields" */ './DpOrganisationList/DpOrganisationFormFields'),
-    DpUserFormFields: () => import(/* webpackChunkName: "user-form-fields" */ './DpUserList/DpUserFormFields')
+    DpOrganisationFormFields: defineAsyncComponent(() => import('./DpOrganisationList/DpOrganisationFormFields')),
+    DpUserFormFields: defineAsyncComponent(() => import('./DpUserList/DpUserFormFields'))
   },
 
   mixins: [dpValidateMixin],

client/js/components/user/DpOrganisationList/DpOrganisationFormFields.vue

@@ -737,6 +737,10 @@ export default {
     cleanhtml: CleanHtml
   },
 
+  emits: [
+    'organisation-update'
+  ],
+
   props: {
     availableOrgaTypes: {
       type: Array,

client/js/components/user/DpOrganisationList/DpOrganisationList.vue

@@ -7,13 +7,6 @@
   All rights reserved
 </license>
 
-<documentation>
-  <!--
-    Component that is used to display list of editable items
-  -->
-
-</documentation>
-
 <template>
   <div class="u-mt-0_5">
     <!-- List of pending organisations (if orga-self-registration is active) -->

client/js/components/user/DpOrganisationList/DpOrganisationListItem.vue

@@ -7,10 +7,6 @@
   All rights reserved
 </license>
 
-<documentation>
-<!--  This component is used as a wrapper for DpItem to display organisation data that can be editable -->
-</documentation>
-
 <template>
   <dp-table-card
     :id="organisation.id"
@@ -27,13 +23,13 @@
           data-cy="organisationItemSelect"
           @change="$emit('item:selected', organisation.id)">
         <div
-          @click="isOpen = false === isOpen"
+          @click="isOpen = !isOpen"
           class="weight--bold cursor-pointer o-hellip--nowrap u-pv-0_75 u-ph-0_25 grow"
           data-cy="organisationListTitle">
           {{ initialOrganisation.attributes.name }}
         </div>
         <button
-          @click="isOpen = false === isOpen"
+          @click="isOpen = !isOpen"
           type="button"
           data-cy="accordionToggleBtn"
           class="btn--blank o-link--default">
@@ -72,6 +68,7 @@
 <script>
 import { DpButtonRow, DpIcon, dpValidateMixin } from '@demos-europe/demosplan-ui'
 import DpTableCard from '@DpJs/components/user/DpTableCardList/DpTableCard'
+import { defineAsyncComponent } from 'vue'
 import { mapState } from 'vuex'
 
 export default {
@@ -80,7 +77,7 @@ export default {
   components: {
     DpButtonRow,
     DpIcon,
-    DpOrganisationFormFields: () => import(/* webpackChunkName: "organisation-form-fields" */ './DpOrganisationFormFields'),
+    DpOrganisationFormFields: defineAsyncComponent(() => import('./DpOrganisationFormFields')),
     DpTableCard
   },
 

client/js/components/user/DpUserList/DpUserFormFields.vue

@@ -176,6 +176,7 @@ import qs from 'qs'
 
 export default {
   name: 'DpUserFormFields',
+
   components: {
     DpMultiselect
   },
@@ -185,6 +186,10 @@ export default {
     'projectName'
   ],
 
+  emits: [
+    'user-update'
+  ],
+
   props: {
     user: {
       type: Object,

client/js/components/user/DpUserList/DpUserList.vue

@@ -106,6 +106,7 @@
 
 <script>
 import { debounce, DpButton, DpLoading, dpSelectAllMixin, hasOwnProp } from '@demos-europe/demosplan-ui'
+import { defineAsyncComponent } from 'vue'
 import { mapActions, mapState } from 'vuex'
 
 export default {
@@ -114,11 +115,11 @@ export default {
   components: {
     DpButton,
     DpLoading,
-    DpSlidingPagination: async () => {
+    DpSlidingPagination: defineAsyncComponent(async () => {
       const { DpSlidingPagination } = await import('@demos-europe/demosplan-ui')
       return DpSlidingPagination
-    },
-    DpUserListItem: () => import(/* webpackChunkName: "user-list-item" */ './DpUserListItem')
+    }),
+    DpUserListItem: defineAsyncComponent(() => import('./DpUserListItem'))
   },
 
   mixins: [dpSelectAllMixin],

client/js/components/user/DpUserList/DpUserListItem.vue

@@ -131,6 +131,10 @@ export default {
     DpUserFormFields
   },
 
+  emits: [
+    'item:selected'
+  ],
+
   mixins: [dpValidateMixin],
 
   props: {

client/js/store/core/initStore.js

@@ -10,7 +10,7 @@
 import { checkResponse, handleResponseMessages, hasOwnProp } from '@demos-europe/demosplan-ui'
 import { initJsonApiPlugin, prepareModuleHashMap, StaticRouter } from '@efrane/vuex-json-api'
 import notify from './Notify'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import { VuexApiRoutes } from './VuexApiRoutes'
 
 function registerPresetModules (store, presetStoreModules) {
@@ -54,9 +54,9 @@ function initStore (storeModules, apiStoreModules, presetStoreModules) {
   return router
     .updateRoutes()
     .then(router => {
-      const store = new Vuex.Store({
+      const store = createStore({
         strict: process.env.NODE_ENV !== 'production',
-
+        devtools: true,
         modules: prepareModuleHashMap(staticModules),
         plugins: [
           initJsonApiPlugin({

package.json

@@ -47,18 +47,18 @@
     "lint:scss": "stylelint {demosplan/DemosPlanCoreBundle/Resources/client/scss,projects}/**/*.scss"
   },
   "dependencies": {
-    "@demos-europe/demosplan-ui": "github:demos-europe/demosplan-ui#i_vue3_migration",
+    "@demos-europe/demosplan-ui": "github:demos-europe/demosplan-ui#f_T19759_update_vue_deps",
     "@demos-europe/dp-consent": "^1.1.2",
-    "@efrane/vuex-json-api": "0.0.38",
+    "@efrane/vuex-json-api": "github:efrane/vuex-json-api#f_update_vue",
     "@masterportal/masterportalapi": "^2.19.2",
     "@sentry/browser": "^7.66.0",
     "@sentry/integrations": "^7.74.1",
     "@sentry/tracing": "^7.76.0",
     "@uppy/core": "^3.5.0",
     "@uppy/drag-drop": "^3.0.3",
     "@uppy/progress-bar": "^3.0.3",
-    "@vue/compat": "3.1.5",
-    "@vue/compiler-sfc": "3.1.5",
+    "@vue/compat": "3.2.0",
+    "@vue/compiler-sfc": "3.2.0",
     "a11y-datepicker": " ^0.9.0",
     "core-js": "^3.33.1",
     "d3": "^7.8.5",
@@ -90,15 +90,14 @@
     "timers-browserify": "^2.0.12",
     "tippy.js": "^6.3.7",
     "uuid": "^9.0.1",
-    "vue": "3.1.5",
+    "vue": "3.2.0",
     "vue-scrollto": "^2.20.0",
     "vue-sliding-pagination": "^1.3.2",
-    "vue-template-compiler": "^2.7.15",
     "vue2-leaflet": "^2.7.1",
     "vue2-leaflet-markercluster": "^3.1.0",
     "vuedraggable": "^2.24.3",
     "vuejs-datepicker": "^1.5.4",
-    "vuex": "^3.6.2"
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",