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>

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,

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();

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."
         );
     });