From b4054dbb1578349cd1b8caa8fac9cbe6e32d20ea Mon Sep 17 00:00:00 2001
From: Paul Derscheid <paul.derscheid@lmscloud.de>
Date: Thu, 19 Sep 2024 17:03:45 +0000
Subject: [PATCH] Bug 37812: (QA follow-up) Add watchers for warning and
 confirmation prop and initialise modals with bootstrap methods on changes in
 Dialog.vue

- Use more targeted selectors in cypress tests Trains.ts, WaitingList.ts.
- Await result of accept_callback, then close modal.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
---
 .../prog/js/vue/components/Dialog.vue         | 38 +++++++++++++++++--
 t/cypress/integration/Preservation/Trains.ts  |  4 +-
 .../integration/Preservation/WaitingList.ts   |  2 +-
 3 files changed, 37 insertions(+), 7 deletions(-)

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 e65d177bbc..194573d3f8 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="alert alert-info" v-if="message" v-html="message"></div>
     <div class="alert alert-warning" v-if="error" v-html="error"></div>
-    <div class="modal" role="dialog" v-if="warning">
+    <div class="modal" role="dialog" v-if="warning" id="warning">
         <div class="modal-dialog">
             <div class="modal-content modal-lg">
                 <div class="modal-header">
@@ -22,7 +22,12 @@
             </div>
         </div>
     </div>
-    <div class="confirmation modal" role="dialog" v-if="confirmation">
+    <div
+        class="confirmation modal"
+        role="dialog"
+        v-if="confirmation"
+        id="confirmation"
+    >
         <div class="modal-dialog">
             <div class="modal-content modal-lg">
                 <div class="modal-header alert-warning confirmation">
@@ -111,7 +116,7 @@
 </template>
 
 <script>
-import { inject } from "vue"
+import { inject, watch, nextTick } from "vue"
 import { storeToRefs } from "pinia"
 import flatPickr from "vue-flatpickr-component"
 export default {
@@ -132,7 +137,11 @@ export default {
             ) {
                 this.$refs.confirmationform.reportValidity()
             } else {
-                this.accept_callback()
+                this.accept_callback().then(() => {
+                    nextTick(() => {
+                        $("#confirmation.modal").modal("hide")
+                    })
+                })
             }
         },
     },
@@ -148,6 +157,27 @@ export default {
             is_loading,
         } = storeToRefs(mainStore)
         const { removeMessages, removeConfirmationMessages } = mainStore
+
+        watch(warning, newWarning => {
+            if (!newWarning) {
+                $("#warning.modal").modal("hide")
+                return
+            }
+            nextTick(() => {
+                $("#warning.modal").modal("show")
+            })
+        })
+
+        watch(confirmation, newConfirmation => {
+            if (!newConfirmation) {
+                $("#confirmation.modal").modal("hide")
+                return
+            }
+            nextTick(() => {
+                $("#confirmation.modal").modal("show")
+            })
+        })
+
         return {
             message,
             error,
diff --git a/t/cypress/integration/Preservation/Trains.ts b/t/cypress/integration/Preservation/Trains.ts
index 46d5e936d3..fdfbc0739b 100644
--- a/t/cypress/integration/Preservation/Trains.ts
+++ b/t/cypress/integration/Preservation/Trains.ts
@@ -532,7 +532,7 @@ describe("Trains", () => {
         cy.get("#barcode").type("bc_1");
         cy.intercept("GET", "/api/v1/preservation/waiting-list/items*", []);
         cy.contains("Submit").click();
-        cy.get("div[class='modal']").contains(
+        cy.get("#warning.modal").contains(
             "Cannot find item with this barcode. It must be in the waiting list."
         );
         cy.get("#close_modal").click();
@@ -642,7 +642,7 @@ describe("Trains", () => {
         cy.get("#barcode_list").type("bc_1\nbc_2\nbc_3");
         cy.contains("Save").click();
         cy.wait("@get-items");
-        cy.get("main div[class='modal']").contains(
+        cy.get("#warning.modal").contains(
             "2 new items added. 1 items not found."
         );
         cy.get("#close_modal").click();
diff --git a/t/cypress/integration/Preservation/WaitingList.ts b/t/cypress/integration/Preservation/WaitingList.ts
index 804e6fcc0f..28d90b9c76 100644
--- a/t/cypress/integration/Preservation/WaitingList.ts
+++ b/t/cypress/integration/Preservation/WaitingList.ts
@@ -97,7 +97,7 @@ describe("WaitingList", () => {
         cy.get("#barcode_list").type("bc_1\nbc_2\nbc_3");
         cy.get("#add_to_waiting_list .approve").click();
         cy.wait("@get-items");
-        cy.get("main div[class='modal']").contains(
+        cy.get("#warning.modal").contains(
             "2 new items added. 1 items not found."
         );
     });
-- 
2.39.5