From a2782f9146d0fc871cf48ea846380116e0e4d0a1 Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Tue, 10 Sep 2024 16:06:35 +0200
Subject: [PATCH] Bug 37812: Adjust modals from the Preservation module -
 bootstrap5

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
---
 .../components/Preservation/TrainsShow.vue    |  96 +++----
 .../components/Preservation/WaitingList.vue   | 243 ++++++++++--------
 2 files changed, 187 insertions(+), 152 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsShow.vue
index 5c7bc5c9dd..8f73b54c16 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsShow.vue
@@ -1,15 +1,35 @@
 <template>
-    <transition name="modal">
-        <div v-if="show_modal" class="modal">
-            <h2>{{ $__("Copy item to the following train") }}</h2>
-            <form @submit="copyItem($event)">
-                <div class="page-section">
-                    <fieldset class="rows">
-                        <ol>
-                            <li>
-                                <label class="required" for="train_list"
-                                    >{{ $__("Select a train") }}:</label
-                                >
+    <div
+        id="copy_item_to_train"
+        class="modal"
+        role="dialog"
+        aria-labelledby="copy_item_to_train_label"
+        aria-hidden="true"
+    >
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content modal-lg">
+                <form @submit="copyItem($event)">
+                    <div class="modal-header">
+                        <h1 class="modal-title" id="copy_item_to_train_label">
+                            {{ $__("Copy item to the following train") }}
+                        </h1>
+                        <button
+                            type="button"
+                            class="btn-close"
+                            data-bs-dismiss="modal"
+                            aria-label="Close"
+                        ></button>
+                    </div>
+                    <div class="modal-body">
+                        <fieldset>
+                            <ol>
+                                <li class="form-group form-row">
+                                    <label
+                                        class="required col-form-label"
+                                        for="train_list"
+                                        >{{ $__("Select a train") }}:</label
+                                    >
+                                </li>
                                 <v-select
                                     v-model="train_id_selected_for_copy"
                                     label="name"
@@ -30,21 +50,26 @@
                                 <span class="required">{{
                                     $__("Required")
                                 }}</span>
-                            </li>
-                        </ol>
-                    </fieldset>
-                    <fieldset class="action">
-                        <input type="submit" value="Copy" />
-                        <input
+                            </ol>
+                        </fieldset>
+                    </div>
+                    <div class="modal-footer">
+                        <button class="btn btn-default approve" type="submit">
+                            <i class="fa fa-check"></i> Save
+                        </button>
+                        <button
+                            class="btn btn-default deny cancel"
                             type="button"
-                            @click="show_modal = false"
-                            :value="$__('Close')"
-                        />
-                    </fieldset>
-                </div>
-            </form>
+                            data-bs-dismiss="modal"
+                        >
+                            <i class="fa fa-times"></i> Cancel
+                        </button>
+                    </div>
+                </form>
+            </div>
         </div>
-    </transition>
+    </div>
+
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="trains_show">
         <Toolbar>
@@ -294,7 +319,6 @@ export default {
                 description: "",
             },
             initialized: false,
-            show_modal: false,
             item_table: {
                 display: false,
                 data: [],
@@ -498,7 +522,7 @@ export default {
             )
         },
         selectTrainForCopy(train_item_id) {
-            this.show_modal = true
+            $("#copy_item_to_train").show()
             this.train_item_id_to_copy = train_item_id
         },
         copyItem(event) {
@@ -513,7 +537,7 @@ export default {
                 .then(
                     success => {
                         this.setMessage(this.$__("Item copied successfully."))
-                        this.show_modal = false
+                        $("#copy_item_to_train").hide()
                     },
                     error => {
                         this.setWarning(
@@ -721,24 +745,6 @@ export default {
 .attribute_value {
     display: block;
 }
-.modal {
-    position: fixed;
-    z-index: 9998;
-    overflow-y: inherit !important;
-    top: 0;
-    left: 0;
-    width: 35%;
-    height: 30%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: table;
-    transition: opacity 0.3s ease;
-    margin: auto;
-    padding: 20px 30px;
-    background-color: #fff;
-    border-radius: 2px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
-    transition: all 0.3s ease;
-}
 input[type="checkbox"] {
     float: left;
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/WaitingList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/WaitingList.vue
index 2798bbc386..94563a7b62 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/WaitingList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/WaitingList.vue
@@ -1,93 +1,136 @@
 <template>
-    <transition name="modal_add_to_waiting_list">
-        <div v-if="show_modal_add_to_waiting_list" class="modal">
-            <h2>{{ $__("Add items to waiting list") }}</h2>
-            <form @submit="addItemsToWaitingList($event)">
-                <div class="page-section">
-                    <fieldset class="rows">
-                        <ol>
-                            <li>
-                                <label class="required" for="barcode_list"
-                                    >{{ $__("Barcode list") }}:</label
-                                >
-                                <textarea
-                                    id="barcode_list"
-                                    v-model="barcode_list"
-                                    :placeholder="$__('Barcodes')"
-                                    rows="10"
-                                    cols="50"
-                                    required
-                                />
-                            </li>
-                        </ol>
-                    </fieldset>
-                    <fieldset class="action">
-                        <input
-                            type="submit"
-                            class="btn btn-primary"
-                            :value="$__('Submit')"
-                        />
-                        <input
+    <div
+        id="add_to_waiting_list"
+        class="modal"
+        role="dialog"
+        aria-labelledby="add_to_waiting_list_label"
+        aria-hidden="true"
+    >
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content modal-lg">
+                <form @submit="addItemsToWaitingList($event)">
+                    <div class="modal-header">
+                        <h1 class="modal-title" id="add_to_waiting_list_label">
+                            {{ $__("Add items to waiting list") }}
+                        </h1>
+                        <button
+                            type="button"
+                            class="btn-close"
+                            data-bs-dismiss="modal"
+                            aria-label="Close"
+                        ></button>
+                    </div>
+                    <div class="modal-body">
+                        <fieldset>
+                            <ol>
+                                <li class="form-group form-row">
+                                    <label
+                                        class="required col-form-label"
+                                        for="barcode_list"
+                                        >{{ $__("Barcode list") }}:</label
+                                    >
+                                    <textarea
+                                        id="barcode_list"
+                                        v-model="barcode_list"
+                                        :placeholder="$__('Barcodes')"
+                                        rows="10"
+                                        cols="50"
+                                        required
+                                    />
+                                </li>
+                            </ol>
+                        </fieldset>
+                    </div>
+                    <div class="modal-footer">
+                        <button class="btn btn-default approve" type="submit">
+                            <i class="fa fa-check"></i> Save
+                        </button>
+                        <button
+                            class="btn btn-default deny cancel"
                             type="button"
-                            @click="show_modal_add_to_waiting_list = false"
-                            :value="$__('Close')"
-                        />
-                    </fieldset>
-                </div>
-            </form>
+                            data-bs-dismiss="modal"
+                        >
+                            <i class="fa fa-times"></i> Cancel
+                        </button>
+                    </div>
+                </form>
+            </div>
         </div>
-    </transition>
-    <transition name="modal_add_to_train">
-        <div v-if="show_modal_add_to_train" class="modal">
-            <h2>{{ $__("Add items to a train") }}</h2>
-            <form @submit="addItemsToTrain($event)">
-                <div class="page-section">
-                    <fieldset class="rows">
-                        <ol>
-                            <li>
-                                <label class="required" for="train_list"
-                                    >{{ $__("Select a train") }}:</label
-                                >
-                                <v-select
-                                    id="train_id"
-                                    v-model="train_id_selected_for_add"
-                                    label="name"
-                                    :options="train_list"
-                                    :reduce="t => t.train_id"
-                                >
-                                    <template #search="{ attributes, events }">
-                                        <input
-                                            :required="
-                                                !train_id_selected_for_add
-                                            "
-                                            class="vs__search"
-                                            v-bind="attributes"
-                                            v-on="events"
-                                        />
-                                    </template>
-                                </v-select>
-                                <span class="required">{{
-                                    $__("Required")
-                                }}</span>
-                            </li>
-                        </ol>
-                    </fieldset>
-                    <fieldset class="action">
-                        <input
-                            type="submit"
-                            class="btn btn-primary"
-                            :value="$__('Submit')"
-                        />
-                        <input
+    </div>
+    <div
+        id="add_to_train"
+        class="modal"
+        role="dialog"
+        aria-labelledby="add_to_train_label"
+        aria-hidden="true"
+    >
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content modal-lg">
+                <form @submit="addItemsToTrain($event)">
+                    <div class="modal-header">
+                        <h1 class="modal-title" id="add_to_train_label">
+                            {{ $__("Add items to a train") }}
+                        </h1>
+                        <button
                             type="button"
-                            @click="show_modal_add_to_train = false"
-                            :value="$__('Close')"
-                        />
-                    </fieldset>
-                </div>
-            </form>
+                            class="btn-close"
+                            data-bs-dismiss="modal"
+                            aria-label="Close"
+                        ></button>
+                    </div>
+                    <div class="modal-body">
+                        <fieldset>
+                            <ol>
+                                <li class="form-group form-row">
+                                    <label
+                                        class="required col-form-label"
+                                        for="train_id"
+                                        >{{ $__("Select a train") }}:</label
+                                    >
+                                    <v-select
+                                        id="train_id"
+                                        v-model="train_id_selected_for_add"
+                                        label="name"
+                                        :options="train_list"
+                                        :reduce="t => t.train_id"
+                                    >
+                                        <template
+                                            #search="{ attributes, events }"
+                                        >
+                                            <input
+                                                :required="
+                                                    !train_id_selected_for_add
+                                                "
+                                                class="vs__search"
+                                                v-bind="attributes"
+                                                v-on="events"
+                                            />
+                                        </template>
+                                    </v-select>
+                                    <span class="required">{{
+                                        $__("Required")
+                                    }}</span>
+                                </li>
+                            </ol>
+                        </fieldset>
+                    </div>
+                    <div class="modal-footer">
+                        <button class="btn btn-default approve" type="submit">
+                            <i class="fa fa-check"></i> Save
+                        </button>
+                        <button
+                            class="btn btn-default deny cancel"
+                            type="button"
+                            data-bs-dismiss="modal"
+                        >
+                            <i class="fa fa-times"></i> Cancel
+                        </button>
+                    </div>
+                </form>
+            </div>
         </div>
-    </transition>
+    </div>
+
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div
         v-else-if="!config.settings.not_for_loan_waiting_list_in"
@@ -98,15 +141,19 @@
     <div v-else id="waiting-list">
         <Toolbar>
             <a
+                href="#add_to_waiting_list"
                 class="btn btn-default"
-                @click="show_modal_add_to_waiting_list = true"
+                role="button"
+                data-bs-toggle="modal"
                 ><font-awesome-icon icon="plus" />
                 {{ $__("Add to waiting list") }}</a
             >
             <a
                 v-if="last_items.length > 0"
+                href="#add_to_train"
                 class="btn btn-default"
-                @click="show_modal_add_to_train = true"
+                role="button"
+                data-bs-toggle="modal"
                 ><font-awesome-icon icon="plus" />
                 {{
                     $__("Add last %s items to a train").format(
@@ -167,8 +214,6 @@ export default {
             count_waiting_list_items: 0,
             barcode_list: "",
             initialized: false,
-            show_modal_add_to_waiting_list: false,
-            show_modal_add_to_train: false,
             tableOptions: {
                 columns: this.getTableColumns(),
                 url: "/api/v1/preservation/waiting-list/items",
@@ -207,6 +252,7 @@ export default {
         },
         addItemsToTrain: function (e) {
             e.preventDefault()
+            $("#add_to_train").modal("hide")
             let item_ids = this.last_items.map(i => i.item_id)
             this.$router.push({
                 name: "TrainsFormAddItems",
@@ -218,7 +264,7 @@ export default {
         },
         addItemsToWaitingList: function (e) {
             e.preventDefault()
-            this.show_modal_add_to_waiting_list = false
+            $("#add_to_waiting_list").modal("hide")
             let items = []
             this.barcode_list
                 .split("\n")
@@ -334,21 +380,4 @@ export default {
 #waiting_list {
     display: table;
 }
-.modal {
-    position: fixed;
-    z-index: 9990;
-    top: 0;
-    left: 0;
-    width: 35%;
-    height: 30%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: table;
-    transition: opacity 0.3s ease;
-    margin: auto;
-    padding: 20px 30px;
-    background-color: #fff;
-    border-radius: 2px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
-    transition: all 0.3s ease;
-}
 </style>
-- 
2.39.5