From 60f0aee9b6d3c9e1312521d6e40b76b38006d2e0 Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Thu, 6 Jul 2023 10:17:20 +0200
Subject: [PATCH] Bug 34215: Introduce a ToolbarButton Vue component

Our toolbar component is not flexible enough, we cannot:
* have something else than a router-link
* have a link outside of the app (it needs to be a Vue route)

This patch adds a ToolbarButton component that is used for existing
button. But other buttons can be added without being a router-link.

Test plan:
No change in behaviour here! Test the buttons in the 4 existing toolbar
(in the ERM module)

Sponsored-by: BULAC - http://www.bulac.fr/
Signed-off-by: Pedro Amorim <pedro.amorim@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../js/vue/components/ERM/AgreementsList.vue  | 18 ++++++------
 .../ERM/EHoldingsLocalPackagesList.vue        | 18 ++++++------
 .../ERM/EHoldingsLocalTitlesList.vue          | 28 +++++++++----------
 .../js/vue/components/ERM/LicensesList.vue    | 11 ++++++--
 .../prog/js/vue/components/Toolbar.vue        | 12 +-------
 .../prog/js/vue/components/ToolbarButton.vue  | 27 ++++++++++++++++++
 6 files changed, 69 insertions(+), 45 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolbarButton.vue

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
index 2d3dabd508..50305dc21a 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
@@ -1,7 +1,13 @@
 <template>
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="agreements_list">
-        <Toolbar v-if="!embedded" :options="this.toolbar_options" />
+        <Toolbar v-if="!embedded">
+            <ToolbarButton
+                :to="{ name: 'AgreementsFormAdd' }"
+                icon="plus"
+                :title="$__('New agreement')"
+            />
+        </Toolbar>
         <fieldset v-if="agreement_count > 0" class="filters">
             <label for="expired_filter">{{ $__("Filter by expired") }}:</label>
             <input
@@ -52,6 +58,7 @@
 <script>
 import flatPickr from "vue-flatpickr-component"
 import Toolbar from "../Toolbar.vue"
+import ToolbarButton from "../ToolbarButton.vue"
 import { inject, ref, reactive } from "vue"
 import { APIClient } from "../../fetch/api-client.js"
 import { storeToRefs } from "pinia"
@@ -150,13 +157,6 @@ export default {
             },
             before_route_entered: false,
             building_table: false,
-            toolbar_options: [
-                {
-                    to: "AgreementsFormAdd",
-                    icon: "plus",
-                    button_title: this.$__("New agreement"),
-                },
-            ],
         }
     },
     beforeRouteEnter(to, from, next) {
@@ -353,7 +353,7 @@ export default {
             }
         },
     },
-    components: { flatPickr, Toolbar, KohaTable },
+    components: { flatPickr, Toolbar, ToolbarButton, KohaTable },
     props: {
         embedded: {
             type: Boolean,
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesList.vue
index 36d9f8dc94..4afd0f2432 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesList.vue
@@ -2,7 +2,13 @@
     <div>
         <div v-if="!initialized">{{ $__("Loading") }}</div>
         <div v-else id="packages_list">
-            <Toolbar :options="this.toolbar_options" />
+            <Toolbar>
+                <ToolbarButton
+                    :to="{ name: 'EHoldingsLocalPackagesFormAdd' }"
+                    icon="plus"
+                    :title="$__('New package')"
+                />
+            </Toolbar>
             <div
                 v-if="package_count > 0"
                 id="package_list_result"
@@ -25,6 +31,7 @@
 
 <script>
 import Toolbar from "../Toolbar.vue"
+import ToolbarButton from "../ToolbarButton.vue"
 import { inject, ref, reactive } from "vue"
 import { storeToRefs } from "pinia"
 import { APIClient } from "../../fetch/api-client.js"
@@ -98,13 +105,6 @@ export default {
                     "-1": ["edit", "delete"],
                 },
             },
-            toolbar_options: [
-                {
-                    to: "EHoldingsLocalPackagesFormAdd",
-                    icon: "plus",
-                    button_title: this.$__("New package"),
-                },
-            ],
         }
     },
     beforeRouteEnter(to, from, next) {
@@ -245,7 +245,7 @@ export default {
             ]
         },
     },
-    components: { Toolbar, KohaTable },
+    components: { Toolbar, ToolbarButton, KohaTable },
     name: "EHoldingsLocalPackagesList",
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesList.vue
index c5b5f14d17..7a0dc98edc 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesList.vue
@@ -2,7 +2,18 @@
     <div>
         <div v-if="!initialized">{{ $__("Loading") }}</div>
         <div v-else id="titles_list">
-            <Toolbar :options="this.toolbar_options" />
+            <Toolbar>
+                <ToolbarButton
+                    :to="{ name: 'EHoldingsLocalTitlesFormAdd' }"
+                    icon="plus"
+                    :title="$__('New title')"
+                />
+                <ToolbarButton
+                    :to="{ name: 'EHoldingsLocalTitlesFormImport' }"
+                    icon="plus"
+                    :title="$__('Import from list')"
+                />
+            </Toolbar>
             <div
                 v-if="title_count > 0"
                 id="title_list_result"
@@ -25,6 +36,7 @@
 
 <script>
 import Toolbar from "../Toolbar.vue"
+import ToolbarButton from "../ToolbarButton.vue"
 import { inject, ref, reactive } from "vue"
 import { storeToRefs } from "pinia"
 import { APIClient } from "../../fetch/api-client.js"
@@ -90,18 +102,6 @@ export default {
                 },
             },
             cannot_search: false,
-            toolbar_options: [
-                {
-                    to: "EHoldingsLocalTitlesFormAdd",
-                    icon: "plus",
-                    button_title: this.$__("New title"),
-                },
-                {
-                    to: "EHoldingsLocalTitlesFormImport",
-                    icon: "plus",
-                    button_title: this.$__("Import from list"),
-                },
-            ],
         }
     },
     beforeRouteEnter(to, from, next) {
@@ -239,7 +239,7 @@ export default {
             ]
         },
     },
-    components: { Toolbar, KohaTable },
+    components: { Toolbar, ToolbarButton, KohaTable },
     name: "EHoldingsLocalTitlesList",
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue
index 78a2f202bc..93cd1dba6e 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue
@@ -1,7 +1,13 @@
 <template>
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="licenses_list">
-        <Toolbar :options="this.toolbar_options" />
+        <Toolbar>
+            <ToolbarButton
+                :to="{ name: 'LicensesFormAdd' }"
+                icon="plus"
+                :title="$__('New license')"
+            />
+        </Toolbar>
         <div v-if="license_count > 0" class="page-section">
             <KohaTable
                 ref="table"
@@ -19,6 +25,7 @@
 
 <script>
 import Toolbar from "../Toolbar.vue"
+import ToolbarButton from "../ToolbarButton.vue"
 import { inject, ref } from "vue"
 import { storeToRefs } from "pinia"
 import { APIClient } from "../../fetch/api-client.js"
@@ -220,7 +227,7 @@ export default {
         av_license_types: Array,
         av_license_statuses: Array,
     },
-    components: { Toolbar, KohaTable },
+    components: { Toolbar, ToolbarButton, KohaTable },
     name: "LicensesList",
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue
index 47f740607c..5cdbd5807d 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue
@@ -1,21 +1,11 @@
 <template>
     <div id="toolbar" class="btn-toolbar">
-        <router-link
-            v-for="(option, index) in options"
-            :key="index"
-            :to="{ name: option.to }"
-            class="btn btn-default"
-            ><font-awesome-icon :icon="option.icon" />
-            {{ option.button_title }}</router-link
-        >
+        <slot />
     </div>
 </template>
 
 <script>
 export default {
-    props: {
-        options: Array,
-    },
     name: "Toolbar",
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolbarButton.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolbarButton.vue
new file mode 100644
index 0000000000..4cfada715c
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolbarButton.vue
@@ -0,0 +1,27 @@
+<template>
+    <router-link :to="to" :class="class"
+        ><font-awesome-icon v-if="icon" :icon="icon" /> {{ title }}</router-link
+    >
+</template>
+
+<script>
+export default {
+    props: {
+        to: {
+            type: [String, Object],
+        },
+        class: {
+            type: String,
+            default: "btn btn-default",
+        },
+        icon: {
+            type: String,
+            required: false,
+        },
+        title: {
+            type: String,
+        },
+    },
+    name: "Toolbar",
+}
+</script>
-- 
2.39.5