Bug 30708: Rebase - Rewrite toolbar

Bug 33417 has changed how we handle the toolbars in Vue apps, this patch
is adjusting the 'Preservation' module code on top of it, but also adds
to make it more flexible (see bug 34215).

Signed-off-by: Laurence Rault <laurence.rault@biblibre.com>

Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsList.vue

@@ -1,7 +1,13 @@
 <template>
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="trains_list">
-        <Toolbar />
+        <Toolbar>
+            <ToolbarButton
+                to="/cgi-bin/koha/preservation/trains/add"
+                icon="plus"
+                :title="$__('New train')"
+            />
+        </Toolbar>
         <fieldset v-if="count_trains > 0" class="filters">
             <label>{{ $__("Filter by") }}:</label>
             <input
@@ -54,7 +60,8 @@
 
 <script>
 import flatPickr from "vue-flatpickr-component"
-import Toolbar from "./TrainsToolbar.vue"
+import Toolbar from "../Toolbar.vue"
+import ToolbarButton from "../ToolbarButton.vue"
 import { inject, ref, reactive } from "vue"
 import { APIClient } from "../../fetch/api-client"
 import { build_url } from "../../composables/datatables"
@@ -265,7 +272,7 @@ export default {
             ]
         },
     },
-    components: { flatPickr, Toolbar, KohaTable },
+    components: { flatPickr, Toolbar, ToolbarButton, KohaTable },
     name: "trainsList",
     emits: ["select-train", "close"],
 }

koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsShow.vue

@@ -47,14 +47,14 @@
     </transition>
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="trains_show">
-        <div id="toolbar" class="btn-toolbar">
-            <router-link
+        <Toolbar>
+            <ToolbarButton
                 v-if="train.closed_on == null"
                 :to="`/cgi-bin/koha/preservation/trains/${train.train_id}/items/add`"
                 class="btn btn-default"
-                ><font-awesome-icon icon="plus" />
-                {{ $__("Add items") }}</router-link
-            >
+                icon="plus"
+                :title="$__('Add items')"
+            />
             <span
                 v-else
                 class="btn btn-default"
@@ -63,12 +63,12 @@
             >
                 <font-awesome-icon icon="plus" /> {{ $__("Add items") }}
             </span>
-            <router-link
+            <ToolbarButton
                 :to="`/cgi-bin/koha/preservation/trains/edit/${train.train_id}`"
                 class="btn btn-default"
-                ><font-awesome-icon icon="pencil" />
-                {{ $__("Edit") }}</router-link
-            >
+                icon="pencil"
+                :title="$__('Edit')"
+            />
             <a @click="deleteTrain(train)" class="btn btn-default"
                 ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a
             >
@@ -90,7 +90,7 @@
                 @click="receiveTrain"
                 ><font-awesome-icon icon="inbox" /> {{ $__("Receive") }}</a
             >
-        </div>
+        </Toolbar>
         <h2>
             {{ $__("Train #%s").format(train.train_id) }}
         </h2>
@@ -213,6 +213,8 @@
 import { inject, createVNode, render } from "vue"
 import { APIClient } from "../../fetch/api-client"
 import { useDataTable } from "../../composables/datatables"
+import Toolbar from "../Toolbar.vue"
+import ToolbarButton from "../ToolbarButton.vue"
 
 export default {
     setup() {
@@ -547,6 +549,7 @@ export default {
             })
         },
     },
+    components: { Toolbar, ToolbarButton },
     name: "TrainsShow",
 }
 </script>

koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsToolbar.vue

@@ -1,16 +0,0 @@
-<template>
-    <div id="toolbar" class="btn-toolbar">
-        <router-link
-            to="/cgi-bin/koha/preservation/trains/add"
-            class="btn btn-default"
-            ><font-awesome-icon icon="plus" />
-            {{ $__("New train") }}</router-link
-        >
-    </div>
-</template>
-
-<script>
-export default {
-    name: "TrainsToolbar",
-}
-</script>

koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/WaitingList.vue

@@ -85,7 +85,7 @@
         {{ $__("You need to configure this module first.") }}
     </div>
     <div v-else id="waiting-list">
-        <div id="toolbar" class="btn-toolbar">
+        <Toolbar>
             <a
                 class="btn btn-default"
                 @click="show_modal_add_to_waiting_list = true"
@@ -103,7 +103,7 @@
                     )
                 }}</a
             >
-        </div>
+        </Toolbar>
         <div v-if="count_waiting_list_items > 0" class="page-section">
             <KohaTable
                 ref="table"
@@ -119,6 +119,7 @@
 
 <script>
 import flatPickr from "vue-flatpickr-component"
+import Toolbar from "../Toolbar.vue"
 import { inject, ref } from "vue"
 import { storeToRefs } from "pinia"
 import { APIClient } from "../../fetch/api-client"
@@ -294,7 +295,7 @@ export default {
             ]
         },
     },
-    components: { flatPickr, KohaTable },
+    components: { flatPickr, KohaTable, Toolbar },
     name: "WaitingList",
 }
 </script>