From 5537c8131122aaf0d7a9de3191d6a19585b693bd Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Thu, 5 May 2022 14:59:49 +0200
Subject: [PATCH] Bug 32030: Store current_view and messages

Signed-off-by: Jonathan Field <jonathan.field@ptfs-europe.com>

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../vue/components/ERM/AgreementUserRoles.vue |  9 +-
 .../prog/js/vue/components/ERM/Agreements.vue | 82 ++++--------------
 .../vue/components/ERM/AgreementsFormAdd.vue  | 21 +++--
 .../ERM/AgreementsFormConfirmDelete.vue       | 23 +++--
 .../js/vue/components/ERM/AgreementsList.vue  | 20 +++--
 .../js/vue/components/ERM/AgreementsShow.vue  |  9 +-
 .../vue/components/ERM/AgreementsToolbar.vue  | 16 +++-
 .../prog/js/vue/components/ERM/Dialog.vue     | 16 ++++
 .../prog/js/vue/components/ERM/ERMMain.vue    |  7 ++
 .../prog/js/vue/components/ERM/Licenses.vue   | 83 ++++---------------
 .../js/vue/components/ERM/LicensesFormAdd.vue | 28 ++++---
 .../ERM/LicensesFormConfirmDelete.vue         | 25 ++++--
 .../js/vue/components/ERM/LicensesList.vue    | 20 +++--
 .../js/vue/components/ERM/LicensesShow.vue    | 20 ++---
 .../js/vue/components/ERM/LicensesToolbar.vue | 16 +++-
 .../intranet-tmpl/prog/js/vue/stores/main.js  | 29 +++++++
 16 files changed, 227 insertions(+), 197 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Dialog.vue
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue
index 7257eeba24..fe9cf75753 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue
@@ -58,7 +58,13 @@
 </template>
 
 <script>
+import { useMainStore } from "../../stores/main"
 export default {
+    setup() {
+        const mainStore = useMainStore()
+        const { setError } = mainStore
+        return { setError }
+    },
     name: 'AgreementUserRoles',
     props: {
         av_agreement_user_roles: Array,
@@ -103,10 +109,9 @@ export default {
                         this.user_roles[c].user_id = result.patron_id
                     }).catch(
                         (error) => {
-                            this.$emit('set-error', error)
+                            this.setError(error)
                         }
                 )
-
         }
     },
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Agreements.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Agreements.vue
index 80990361b4..fa7fcbfafd 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Agreements.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Agreements.vue
@@ -1,93 +1,47 @@
 <template>
-    <Toolbar v-if="op == 'list'" @switch-view="switchView" />
-    <div class="dialog message" v-if="message">{{ message }}</div>
-    <div class="dialog alert" v-if="error">{{ error }}</div>
+    <Toolbar v-if="current_view == 'list'" />
+    <Dialog />
     <List
-        v-if="op == 'list'"
-        @set-current-agreement-id="setCurrentAgreementID"
-        @switch-view="switchView"
-        @set-error="setError"
+        v-if="current_view == 'list'"
     />
     <Show
-        v-if="op == 'show'"
-        :agreement_id="agreement_id"
-        @switch-view="switchView"
-        @set-error="setError"
+        v-if="current_view == 'show'"
+        :agreement_id="current_object_id"
     />
     <AddForm
-        v-if="op == 'add-form'"
-        :agreement_id="agreement_id"
-        @agreement-created="agreementCreated"
-        @agreement-updated="agreementUpdated"
-        @switch-view="switchView"
-        @set-error="setError"
+        v-if="current_view == 'add-form'"
+        :agreement_id="current_object_id"
     />
     <ConfirmDeleteForm
-        v-if="op == 'confirm-delete-form'"
-        :agreement_id="agreement_id"
-        @agreement-deleted="agreementDeleted"
-        @switch-view="switchView"
-        @set-error="setError"
+        v-if="current_view == 'confirm-delete-form'"
+        :agreement_id="current_object_id"
     />
 </template>
 
 <script>
+import Dialog from "./Dialog.vue"
 import Toolbar from "./AgreementsToolbar.vue"
 import List from "./AgreementsList.vue"
 import Show from "./AgreementsShow.vue"
 import AddForm from "./AgreementsFormAdd.vue"
 import ConfirmDeleteForm from "./AgreementsFormConfirmDelete.vue"
-import { ref, reactive, computed } from "vue"
+
+import { useMainStore } from "../../stores/main"
+import { storeToRefs } from "pinia"
 
 export default {
-    data() {
-        return {
-            agreement_id: null,
-            op: "list",
-            message: null,
-            error: null,
-        }
-    },
-    methods: {
-        switchView(view) {
-            this.message = null
-            this.error = null
-            this.op = view
-            if (view == "list") this.agreement_id = null
-        },
-        agreementCreated() {
-            this.message = "Agreement created"
-            this.error = null
-            this.agreement_id = null
-            this.op = "list"
-        },
-        agreementUpdated() {
-            this.message = "Agreement updated"
-            this.error = null
-            this.agreement_id = null
-            this.op = "list"
-        },
-        agreementDeleted() {
-            this.message = "Agreement deleted"
-            this.error = null
-            this.agreement_id = null
-            this.op = "list"
-        },
-        setCurrentAgreementID(agreement_id) {
-            this.agreement_id = agreement_id
-        },
-        setError(error) {
-            this.message = null
-            this.error = "Something went wrong: " + error
-        },
+    setup() {
+        const mainStore = useMainStore()
+        const { current_object_id, current_view } = storeToRefs(mainStore)
+        return { current_object_id, current_view };
     },
     components: {
+        Dialog,
         Toolbar,
         List,
         Show,
         AddForm,
         ConfirmDeleteForm,
     },
-    emits: ["set-error"],
 };
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue
index a8f0c73ed1..7bfdc6f37e 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue
@@ -179,7 +179,7 @@
                 <a
                     role="button"
                     class="cancel"
-                    @click="$emit('switch-view', 'list')"
+                    @click="this.setCurrentView('list')"
                     >Cancel</a
                 >
             </fieldset>
@@ -193,6 +193,7 @@ import AgreementUserRoles from './AgreementUserRoles.vue'
 import AgreementLicenses from './AgreementLicenses.vue'
 import { useVendorStore } from "../../stores/vendors"
 import { useAVStore } from "../../stores/authorised_values"
+import { useMainStore } from "../../stores/main"
 import { storeToRefs } from "pinia"
 
 export default {
@@ -209,6 +210,9 @@ export default {
             av_agreement_license_location,
         } = storeToRefs(AVStore)
 
+        const mainStore = useMainStore()
+        const { setMessage, setError, resetMessages, setCurrentView } = mainStore
+
         return {
             vendors,
             av_agreement_statuses,
@@ -217,6 +221,7 @@ export default {
             av_agreement_user_roles,
             av_agreement_license_statuses,
             av_agreement_license_location,
+            setMessage, setError, resetMessages, setCurrentView,
         }
     },
     data() {
@@ -250,6 +255,9 @@ export default {
             .then(
                 (result) => {
                     this.agreement = result
+                },
+                (error) => {
+                    this.setError(error)
                 }
             )
     },
@@ -292,15 +300,17 @@ export default {
             fetch(apiUrl, options)
                 .then(response => {
                     if (response.status == 200) {
-                        this.$emit('agreement-updated')
+                        this.setCurrentView('list')
+                        this.setMessage('Agreement updated')
                     } else if (response.status == 201) {
-                        this.$emit('agreement-created')
+                        this.setCurrentView('list')
+                        this.setMessage('Agreement created')
                     } else {
-                        this.$emit('set-error', response.message || response.statusText)
+                        this.setError(response.message || response.statusText)
                     }
                 }).catch(
                     (error) => {
-                        this.$emit('set-error', error)
+                        this.setError(error)
                     }
                 )
         },
@@ -310,7 +320,6 @@ export default {
             }
         }
     },
-    emits: ['agreement-created', 'agreement-updated', 'set-error', 'switch-view'],
     props: {
         agreement_id: Number,
     },
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue
index 7baf782cb0..59806ba257 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue
@@ -17,7 +17,10 @@
             </fieldset>
             <fieldset class="action">
                 <input type="submit" variant="primary" value="Yes, delete" />
-                <a role="button" class="cancel" @click="$emit('switch-view', 'list')"
+                <a
+                    role="button"
+                    class="cancel"
+                    @click="this.setCurrentView('list')"
                     >No, do not delete</a
                 >
             </fieldset>
@@ -26,8 +29,16 @@
 </template>
 
 <script>
+import { useMainStore } from "../../stores/main"
 
 export default {
+    setup() {
+        const mainStore = useMainStore()
+        const { setMessage, setError, setCurrentView } = mainStore
+        return {
+            setMessage, setError, setCurrentView,
+        }
+    },
     data() {
         return {
             agreement: {},
@@ -44,7 +55,7 @@ export default {
                 },
             ).catch(
                 (error) => {
-                    this.$emit('set-error', error)
+                    this.setError(error)
                 }
             )
     },
@@ -65,19 +76,19 @@ export default {
                 .then(
                     (response) => {
                         if (response.status == 204) {
-                            this.$emit('agreement-deleted')
+                            this.setMessage("Agreement deleted")
+                            this.setCurrentView('list')
                         } else {
-                            this.$emit('set-error', response.message || response.statusText)
+                            this.setError(response.message || response.statusText)
                         }
                     }
                 ).catch(
                     (error) => {
-                        this.$emit('set-error', error)
+                        this.setError(error)
                     }
                 )
         }
     },
-    emits: ['agreement-deleted', 'set-error', 'switch-view'],
     props: {
         agreement_id: Number
     },
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
index 0072ddb4cf..ed3a9a5305 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
@@ -14,20 +14,26 @@ import ButtonDelete from "./ButtonDelete.vue"
 import { createVNode, defineComponent, render, resolveComponent } from 'vue'
 import { useVendorStore } from "../../stores/vendors"
 import { useAVStore } from "../../stores/authorised_values"
+import { useMainStore } from "../../stores/main"
 import { storeToRefs } from "pinia"
 
 export default {
     setup() {
         const vendorStore = useVendorStore()
         const { vendors } = storeToRefs(vendorStore)
+
         const AVStore = useAVStore()
         const { av_agreement_statuses, av_agreement_closure_reasons, av_agreement_renewal_priorities } = storeToRefs(AVStore)
 
+        const mainStore = useMainStore()
+        const { current_object_id } = storeToRefs(mainStore)
+        const { setCurrentView } = mainStore
         return {
             vendors,
             av_agreement_statuses,
             av_agreement_closure_reasons,
             av_agreement_renewal_priorities,
+            setCurrentView, current_object_id,
         }
     },
     created() {
@@ -42,7 +48,7 @@ export default {
                 },
             ).catch(
                 (error) => {
-                    this.$emit('set-error', error)
+                    this.setError(error)
                 }
             )
     },
@@ -229,16 +235,16 @@ export default {
     },
     methods: {
         show_agreement: function (agreement_id) {
-            this.$emit('set-current-agreement-id', agreement_id)
-            this.$emit('switch-view', 'show')
+            this.setCurrentView('show')
+            this.current_object_id = agreement_id
         },
         edit_agreement: function (agreement_id) {
-            this.$emit('set-current-agreement-id', agreement_id)
-            this.$emit('switch-view', 'add-form')
+            this.setCurrentView('add-form')
+            this.current_object_id = agreement_id
         },
         delete_agreement: function (agreement_id) {
-            this.$emit('set-current-agreement-id', agreement_id)
-            this.$emit('switch-view', 'confirm-delete-form')
+            this.setCurrentView('confirm-delete-form')
+            this.current_object_id = agreement_id
         },
     },
     props: {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
index 711d607888..bb0708ec20 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
@@ -159,7 +159,7 @@
             <a
                 role="button"
                 class="cancel"
-                @click="$emit('switch-view', 'list')"
+                @click="this.setCurrentView('list')"
                 >Close</a
             >
         </fieldset>
@@ -171,6 +171,7 @@ import AgreementPeriods from './AgreementPeriods.vue'
 import AgreementUserRoles from './AgreementUserRoles.vue'
 import { useVendorStore } from "../../stores/vendors"
 import { useAVStore } from "../../stores/authorised_values"
+import { useMainStore } from "../../stores/main"
 import { storeToRefs } from "pinia"
 
 export default {
@@ -196,6 +197,8 @@ export default {
             av_agreement_license_location,
         } = storeToRefs(AVStore)
 
+        const mainStore = useMainStore()
+        const { setError, setCurrentView } = mainStore
         return {
             format_date,
             patron_to_html,
@@ -207,6 +210,7 @@ export default {
             av_agreement_user_roles,
             av_agreement_license_statuses,
             av_agreement_license_location,
+            setError, setCurrentView,
         }
     },
     data() {
@@ -242,13 +246,12 @@ export default {
                     this.agreement = result
                 },
                 (error) => {
-                    this.$emit('set-error', error)
+                    this.setError(error)
                 }
             )
     },
     methods: {
     },
-    emits: ['set-error', 'switch-view'],
     props: {
         agreement_id: Number,
     },
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsToolbar.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsToolbar.vue
index 7add34b7c0..9df9bc4e73 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsToolbar.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsToolbar.vue
@@ -1,12 +1,24 @@
 <template>
-    <a class="btn btn-default" @click="$emit('switch-view', 'add-form')"
+    <a
+        class="btn btn-default"
+        @click="
+            this.current_object_id = null;
+            this.setCurrentView('add-form');
+        "
         ><font-awesome-icon icon="plus" /> New agreement</a
     >
 </template>
 
 <script>
+import { useMainStore } from "../../stores/main"
+import { storeToRefs } from "pinia"
 export default {
+    setup() {
+        const mainStore = useMainStore()
+        const { setCurrentView } = mainStore
+        const { current_object_id } = storeToRefs(mainStore)
+        return { setCurrentView, current_object_id }
+    },
     name: "AgreementsToolbar",
-    emits: ['switch-view'],
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Dialog.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Dialog.vue
new file mode 100644
index 0000000000..9e20c51eeb
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Dialog.vue
@@ -0,0 +1,16 @@
+<template>
+    <div class="dialog message" v-if="message">{{ message }}</div>
+    <div class="dialog alert" v-if="error">{{ error }}</div>
+</template>
+
+<script>
+import { storeToRefs } from "pinia"
+import { useMainStore } from '../../stores/main';
+export default {
+    setup(){
+        const mainStore = useMainStore()
+        const { message, error } = storeToRefs(mainStore)
+        return { message, error }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue
index 4a8e3cf630..41712aa449 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue
@@ -17,6 +17,7 @@
                                 <li>
                                     <router-link
                                         to="/cgi-bin/koha/erm/agreements"
+                                        @click="this.setCurrentView('list')"
                                     >
                                         <i class="fa fa-upload"></i>
                                         Agreements</router-link
@@ -25,6 +26,7 @@
                                 <li>
                                     <router-link
                                         to="/cgi-bin/koha/erm/licenses"
+                                        @click="this.setCurrentView('list')"
                                     >
                                         <i class="fa fa-file-text-o"></i>
                                         Licenses</router-link
@@ -43,6 +45,7 @@
 import Breadcrumb from "./Breadcrumb.vue"
 import { useVendorStore } from "../../stores/vendors"
 import { useAVStore } from "../../stores/authorised_values"
+import { useMainStore } from "../../stores/main"
 import { reactive, computed } from "vue"
 
 export default {
@@ -58,8 +61,12 @@ export default {
         AVStore.av_agreement_license_statuses = agreement_license_statuses
         AVStore.av_agreement_license_location = agreement_license_location
 
+        const mainStore = useMainStore()
+        const { setCurrentView } = mainStore
+
         return {
             vendorStore,
+            setCurrentView,
         }
     },
     data() {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Licenses.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Licenses.vue
index c557c44061..a700da031c 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Licenses.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Licenses.vue
@@ -1,96 +1,47 @@
 <template>
-    <Toolbar v-if="op == 'list'" @switch-view="switchView" />
-    <div class="dialog message" v-if="message">{{ message }}</div>
-    <div class="dialog alert" v-if="error">{{ error }}</div>
+    <Toolbar v-if="current_view == 'list'" />
+    <Dialog />
     <List
-        v-if="op == 'list'"
-        @set-current-license-id="setCurrentLicenseID"
-        @switch-view="switchView"
-        @set-error="setError"
+        v-if="current_view == 'list'"
     />
     <Show
-        v-if="op == 'show'"
-        :license_id="license_id"
-        @switch-view="switchView"
-        @set-error="setError"
+        v-if="current_view == 'show'"
+        :license_id="current_object_id"
     />
     <AddForm
-        v-if="op == 'add-form'"
-        :license_id="license_id"
-        @license-created="licenseCreated"
-        @license-updated="licenseUpdated"
-        @switch-view="switchView"
-        @set-error="setError"
+        v-if="current_view == 'add-form'"
+        :license_id="current_object_id"
     />
     <ConfirmDeleteForm
-        v-if="op == 'confirm-delete-form'"
-        :license_id="license_id"
-        @license-deleted="licenseDeleted"
-        @switch-view="switchView"
-        @set-error="setError"
+        v-if="current_view == 'confirm-delete-form'"
+        :license_id="current_object_id"
     />
 </template>
 
 <script>
+import Dialog from "./Dialog.vue"
 import Toolbar from "./LicensesToolbar.vue"
 import List from "./LicensesList.vue"
 import Show from "./LicensesShow.vue"
 import AddForm from "./LicensesFormAdd.vue"
 import ConfirmDeleteForm from "./LicensesFormConfirmDelete.vue"
 
-import { reactive, computed } from "vue"
+import { useMainStore } from "../../stores/main"
+import { storeToRefs } from "pinia"
 
 export default {
-    data() {
-        return {
-            license_id: null,
-            op: "list",
-            message: null,
-            error: null,
-            license_types,
-            license_statuses,
-        }
-    },
-    methods: {
-        switchView(view) {
-            this.message = null
-            this.error = null
-            this.op = view
-            if (view == "list") this.license_id = null
-        },
-        licenseCreated() {
-            this.message = "License created"
-            this.error = null
-            this.license_id = null
-            this.op = "list"
-        },
-        licenseUpdated() {
-            this.message = "License updated"
-            this.error = null
-            this.license_id = null
-            this.op = "list"
-        },
-        licenseDeleted() {
-            this.message = "License deleted"
-            this.error = null
-            this.license_id = null
-            this.op = "list"
-        },
-        setCurrentLicenseID(license_id) {
-            this.license_id = license_id
-        },
-        setError(error) {
-            this.message = null
-            this.error = "Something went wrong: " + error
-        },
+    setup() {
+        const mainStore = useMainStore()
+        const { current_object_id, current_view } = storeToRefs(mainStore)
+        return { current_object_id, current_view };
     },
     components: {
+        Dialog,
         Toolbar,
         List,
         Show,
         AddForm,
         ConfirmDeleteForm,
     },
-    emits: ["set-error"],
 };
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
index 1802f6e11e..5bd9a01c21 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
@@ -99,7 +99,7 @@
                 <a
                     role="button"
                     class="cancel"
-                    @click="$emit('switch-view', 'list')"
+                    @click="this.setCurrentView('list')"
                     >Cancel</a
                 >
             </fieldset>
@@ -110,6 +110,7 @@
 <script>
 import flatPickr from 'vue-flatpickr-component'
 import { useAVStore } from "../../stores/authorised_values"
+import { useMainStore } from "../../stores/main"
 import { storeToRefs } from "pinia"
 
 export default {
@@ -121,9 +122,13 @@ export default {
             av_license_statuses,
         } = storeToRefs(AVStore)
 
+        const mainStore = useMainStore()
+        const { setMessage, setError, resetMessages, setCurrentView } = mainStore
+
         return {
             av_license_types,
             av_license_statuses,
+            setMessage, setError, resetMessages, setCurrentView,
         }
     },
     data() {
@@ -152,18 +157,14 @@ export default {
         if (!this.license_id) return
         const apiUrl = '/api/v1/erm/licenses/' + this.license_id
 
-        fetch(apiUrl, {
-            //headers: {
-            //    'x-koha-embed': 'periods,user_roles,user_roles.patron'
-            //}
-        })
+        fetch(apiUrl)
             .then(res => res.json())
             .then(
                 (result) => {
                     this.license = result
                 },
                 (error) => {
-                    this.$emit('set-error', error)
+                    this.setError(error)
                 }
             )
     },
@@ -195,18 +196,19 @@ export default {
             fetch(apiUrl, options)
                 .then(response => {
                     if (response.status == 200) {
-                        this.$emit('license-updated')
+                        this.setCurrentView('list')
+                        this.setMessage('License updated')
                     } else if (response.status == 201) {
-                        this.$emit('license-created')
+                        this.setCurrentView('list')
+                        this.setMessage('License created')
                     } else {
-                        this.$emit('set-error', response.message || response.statusText)
+                    this.setError( response.message || response.statusText)
                     }
                 }, (error) => {
-                    this.$emit('set-error', error)
+                    this.setError(error)
                 }).catch(e => { console.log(e) })
         },
     },
-    emits: ['license-created', 'license-updated', 'set-error', 'switch-view'],
     props: {
         license_id: Number,
     },
@@ -215,4 +217,4 @@ export default {
     },
     name: "LicensesFormAdd",
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormConfirmDelete.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormConfirmDelete.vue
index e3f4a7b450..2b3c10cf4b 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormConfirmDelete.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormConfirmDelete.vue
@@ -16,7 +16,10 @@
             </fieldset>
             <fieldset class="action">
                 <input type="submit" variant="primary" value="Yes, delete" />
-                <a role="button" class="cancel" @click="$emit('switch-view', 'list')"
+                <a
+                    role="button"
+                    class="cancel"
+                    @click="this.setCurrentView('list')"
                     >No, do not delete</a
                 >
             </fieldset>
@@ -25,8 +28,16 @@
 </template>
 
 <script>
+import { useMainStore } from "../../stores/main"
 
 export default {
+    setup() {
+        const mainStore = useMainStore()
+        const { setMessage, setError, setCurrentView } = mainStore
+        return {
+            setMessage, setError, setCurrentView,
+        }
+    },
     data() {
         return {
             license: {},
@@ -39,11 +50,11 @@ export default {
             .then(res => res.json())
             .then(
                 (result) => {
-                    this.license= result
+                    this.license = result
                 },
             ).catch(
                 (error) => {
-                    this.$emit('set-error', error)
+                    this.setError(error)
                 }
             )
     },
@@ -64,19 +75,19 @@ export default {
                 .then(
                     (response) => {
                         if (response.status == 204) {
-                            this.$emit('license-deleted')
+                            this.setMessage("License deleted")
+                            this.setCurrentView('list')
                         } else {
-                            this.$emit('set-error', response.message || response.statusText)
+                            this.setError(response.message || response.statusText)
                         }
                     }
                 ).catch(
                     (error) => {
-                        this.$emit('set-error', error)
+                        this.setError(error)
                     }
                 )
         }
     },
-    emits: ['license-deleted', 'set-error', 'switch-view'],
     props: {
         license_id: Number
     },
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue
index 728cc727ce..d49c49ae7a 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue
@@ -13,6 +13,7 @@ import ButtonEdit from "./ButtonEdit.vue"
 import ButtonDelete from "./ButtonDelete.vue"
 import { createVNode, defineComponent, render, resolveComponent } from 'vue'
 import { useAVStore } from "../../stores/authorised_values"
+import { useMainStore } from "../../stores/main"
 import { storeToRefs } from "pinia"
 
 export default {
@@ -23,9 +24,14 @@ export default {
             av_license_statuses,
         } = storeToRefs(AVStore)
 
+        const mainStore = useMainStore()
+        const { current_object_id } = storeToRefs(mainStore)
+        const { setCurrentView } = mainStore
+
         return {
             av_license_types,
             av_license_statuses,
+            setCurrentView, current_object_id,
         }
     },
     created() {
@@ -39,7 +45,7 @@ export default {
                     this.initialized = true
                 },
                 (error) => {
-                    this.$emit('set-error', error)
+                    this.setError(error)
                 }
             )
     },
@@ -195,16 +201,16 @@ export default {
     },
     methods: {
         show_license: function (license_id) {
-            this.$emit('set-current-license-id', license_id)
-            this.$emit('switch-view', 'show')
+            this.setCurrentView('show')
+            this.current_object_id = license_id
         },
         edit_license: function (license_id) {
-            this.$emit('set-current-license-id', license_id)
-            this.$emit('switch-view', 'add-form')
+            this.setCurrentView('add-form')
+            this.current_object_id = license_id
         },
         delete_license: function (license_id) {
-            this.$emit('set-current-license-id', license_id)
-            this.$emit('switch-view', 'confirm-delete-form')
+            this.setCurrentView('confirm-delete-form')
+            this.current_object_id = license_id
         },
     },
     props: {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
index f9a35c4c0a..920515a1e9 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
@@ -37,14 +37,10 @@
                     <label>Ended on:</label>
                     <span>{{ format_date(license.ended_on) }}</span>
                 </li>
-
             </ol>
         </fieldset>
         <fieldset class="action">
-            <a
-                role="button"
-                class="cancel"
-                @click="$emit('switch-view', 'list')"
+            <a role="button" class="cancel" @click="this.setCurrentView('list')"
                 >Close</a
             >
         </fieldset>
@@ -53,6 +49,7 @@
 
 <script>
 import { useAVStore } from "../../stores/authorised_values"
+import { useMainStore } from "../../stores/main"
 import { storeToRefs } from "pinia"
 
 export default {
@@ -71,11 +68,15 @@ export default {
             av_license_statuses,
         } = storeToRefs(AVStore)
 
+        const mainStore = useMainStore()
+        const { setError, setCurrentView } = mainStore
+
         return {
             format_date,
             get_lib_from_av,
             av_license_types,
             av_license_statuses,
+            setError, setCurrentView,
         }
     },
     data() {
@@ -95,24 +96,19 @@ export default {
         if (!this.license_id) return
         const apiUrl = '/api/v1/erm/licenses/' + this.license_id
 
-        fetch(apiUrl, {
-            //headers: {
-            //    'x-koha-embed': 'periods,user_roles,user_roles.patron'
-            //}
-        })
+        fetch(apiUrl)
             .then(res => res.json())
             .then(
                 (result) => {
                     this.license = result
                 },
                 (error) => {
-                    this.$emit('set-error', error)
+                    this.setError(error)
                 }
             )
     },
     methods: {
     },
-    emits: ['set-error', 'switch-view'],
     props: {
         license_id: Number,
     },
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesToolbar.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesToolbar.vue
index c4b634cb6f..8f524162e1 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesToolbar.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesToolbar.vue
@@ -1,12 +1,24 @@
 <template>
-    <a class="btn btn-default" @click="$emit('switch-view', 'add-form')"
+    <a
+        class="btn btn-default"
+        @click="
+            this.current_object_id = null;
+            this.setCurrentView('add-form');
+        "
         ><font-awesome-icon icon="plus" /> New license</a
     >
 </template>
 
 <script>
+import { useMainStore } from "../../stores/main"
+import { storeToRefs } from "pinia"
 export default {
+    setup() {
+        const mainStore = useMainStore()
+        const { setCurrentView } = mainStore
+        const { current_object_id } = storeToRefs(mainStore)
+        return { setCurrentView, current_object_id }
+    },
     name: "LicensesToolbar",
-    emits: ['switch-view'],
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
new file mode 100644
index 0000000000..a48f967cf7
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia'
+
+export const useMainStore = defineStore('main', {
+  state: () => ({
+        current_view: 'list',
+        current_object_id: null,
+        message: null,
+        error: null,
+    }),
+    actions: {
+        setCurrentView(view) {
+            this.current_view = view;
+            this.error = null;
+            this.message = null;
+        },
+        setMessage(message) {
+            this.error = null;
+            this.message = message;
+        },
+        setError(error) {
+            this.error = "Something went wrong: " + error;
+            this.message = null;
+        },
+        removeMessages() {
+            this.error = null;
+            this.message = null;
+        },
+    },
+});
\ No newline at end of file
-- 
2.39.2