From f417b4ca0cf3072efbf482d63fe0b1b3198c2b00 Mon Sep 17 00:00:00 2001
From: Pedro Amorim <pedro.amorim@openfifth.co.uk>
Date: Tue, 7 Oct 2025 08:57:01 +0000
Subject: [PATCH] Bug 39320: VueJS framework: Add option to have a component in
 dialog

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
---
 .../prog/js/vue/components/Dialog.vue         | 56 +++++++++++++++++++
 .../intranet-tmpl/prog/js/vue/stores/main.js  |  6 ++
 2 files changed, 62 insertions(+)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
index 162c93a7da..9af38374d1 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
@@ -95,6 +95,40 @@
             </div>
         </div>
     </div>
+    <div
+        class="component modal"
+        role="dialog"
+        v-if="componentDialog"
+        id="component"
+    >
+        <div class="modal-dialog">
+            <div class="modal-content modal-lg">
+                <div class="modal-header alert-warning component">
+                    <h1 v-html="componentDialog.title"></h1>
+                </div>
+                <div class="modal-body">
+                    <component
+                        v-if="requiredComponent"
+                        :is="requiredComponent"
+                        v-bind="componentDialog.componentProps"
+                        v-on="componentDialog.componentListeners"
+                    />
+                </div>
+                <div class="modal-footer">
+                    <button
+                        id="close_modal"
+                        class="btn btn-default deny cancel"
+                        type="button"
+                        data-bs-dismiss="modal"
+                        @click="removeConfirmationMessages"
+                    >
+                        <i class="fa fa-fw fa-remove"></i>
+                        <span v-html="componentDialog.cancel_label"></span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 
     <div class="modal_centered" v-if="is_submitting">
         <div class="spinner alert alert-warning">
@@ -115,9 +149,11 @@ import {
     reactive,
     computed,
     useTemplateRef,
+    defineAsyncComponent,
 } from "vue";
 import { storeToRefs } from "pinia";
 import FormElement from "./FormElement.vue";
+import { loadComponent } from "@koha-vue/loaders/componentResolver";
 
 export default {
     setup() {
@@ -127,6 +163,7 @@ export default {
             error,
             warning,
             confirmation,
+            componentDialog,
             accept_callback,
             is_submitting,
             is_loading,
@@ -192,11 +229,29 @@ export default {
             });
         });
 
+        watch(componentDialog, newComponentDialog => {
+            if (!newComponentDialog) {
+                $("#component.modal").modal("hide");
+                return;
+            }
+            nextTick(() => {
+                $("#component.modal").modal("show");
+            });
+        });
+
+        const requiredComponent = computed(() => {
+            if (!componentDialog.value?.componentPath) return null;
+            return defineAsyncComponent(
+                loadComponent(componentDialog.value.componentPath)
+            );
+        });
+
         return {
             message,
             error,
             warning,
             confirmation,
+            componentDialog,
             accept_callback,
             is_submitting,
             is_loading,
@@ -205,6 +260,7 @@ export default {
             fp_config,
             submit,
             inputFields,
+            requiredComponent,
         };
     },
     components: {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
index b60a95bd97..fd45f0617e 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
@@ -10,6 +10,7 @@ export const useMainStore = defineStore("main", () => {
         accept_callback: null,
         previousMessage: null,
         previousError: null,
+        componentDialog: null,
         displayed_already: false,
         is_submitting: false,
         is_loading: false,
@@ -66,6 +67,11 @@ export const useMainStore = defineStore("main", () => {
             this.displayed_already =
                 displayed; /* Is displayed on the current view */
         },
+        setComponentDialog(componentDialog, displayed = true) {
+            this.componentDialog = componentDialog;
+            this.displayed_already =
+                displayed; /* Is displayed on the current view */
+        },
         removeMessages() {
             if (this.displayed_already) {
                 this.error = null;