From ba2ec307e5099bb1613cf7fdc1b4decb854e4aab Mon Sep 17 00:00:00 2001
From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
Date: Wed, 11 Sep 2024 14:15:59 +0000
Subject: [PATCH] Bug 38010: Add a nav link button component

---
 .../components/Admin/RecordSources/List.vue   |  6 +-
 .../prog/js/vue/components/ButtonLink.vue     | 65 +++++++++++++++++++
 .../js/vue/components/ERM/AgreementsList.vue  |  6 +-
 .../js/vue/components/ERM/AgreementsShow.vue  |  6 +-
 .../ERM/EHoldingsLocalPackagesList.vue        |  6 +-
 .../ERM/EHoldingsLocalPackagesShow.vue        |  6 +-
 .../ERM/EHoldingsLocalTitlesList.vue          | 10 +--
 .../ERM/EHoldingsLocalTitlesShow.vue          |  6 +-
 .../js/vue/components/ERM/LicensesList.vue    |  6 +-
 .../js/vue/components/ERM/LicensesShow.vue    |  6 +-
 .../ERM/UsageStatisticsDataProvidersShow.vue  |  6 +-
 .../Preservation/SettingsProcessingsShow.vue  |  6 +-
 .../components/Preservation/TrainsList.vue    |  6 +-
 .../components/Preservation/TrainsShow.vue    |  8 +--
 .../prog/js/vue/components/ToolbarButton.vue  | 27 --------
 15 files changed, 107 insertions(+), 69 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ButtonLink.vue
 delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolbarButton.vue

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/RecordSources/List.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/RecordSources/List.vue
index 60a7b3234da..7e04250e3b9 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/RecordSources/List.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/RecordSources/List.vue
@@ -2,7 +2,7 @@
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="record_sources_list">
         <Toolbar>
-            <ToolbarButton
+            <ButtonLink
                 :to="{ name: 'RecordSourcesFormAdd' }"
                 icon="plus"
                 :title="$__('New record source')"
@@ -25,7 +25,7 @@
 
 <script>
 import Toolbar from "../../Toolbar.vue"
-import ToolbarButton from "../../ToolbarButton.vue"
+import ButtonLink from "../../ButtonLink.vue"
 import { inject } from "vue"
 import { APIClient } from "../../../fetch/api-client.js"
 import KohaTable from "../../KohaTable.vue"
@@ -144,7 +144,7 @@ export default {
     components: {
         KohaTable,
         Toolbar,
-        ToolbarButton,
+        ButtonLink,
     },
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ButtonLink.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ButtonLink.vue
new file mode 100644
index 00000000000..c3992153887
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ButtonLink.vue
@@ -0,0 +1,65 @@
+<template>
+    <a
+        v-if="callback"
+        @click="typeof callback === 'string' ? redirect() : callback"
+        :class="class"
+        style="cursor: pointer"
+    >
+        <font-awesome-icon v-if="icon" :icon="icon" /> {{ title }}
+    </a>
+    <router-link v-else :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,
+        },
+        callback: {
+            type: [String, Function],
+            required: false,
+        },
+    },
+    methods: {
+        redirect() {
+            if (typeof this.to === "string")
+                window.location.href = this.formatUrl(this.to)
+            if (typeof this.to === "object") {
+                let url = this.to.path
+                if (this.to.hasOwnProperty("query")) {
+                    url +=
+                        "?" +
+                        Object.keys(this.to.query)
+                            .map(
+                                queryParam =>
+                                    `${queryParam}=${this.to.query[queryParam]}`
+                            )
+                            .join("&")
+                }
+                window.location.href = this.formatUrl(url, this.to.internal)
+            }
+        },
+        formatUrl(url) {
+            if (url.includes("http://") || url.includes("https://")) return url
+            if (url.includes("cgi-bin/koha"))
+                return `//${window.location.host}/${url}`
+            return `//${url}`
+        },
+    },
+    name: "ButtonLink",
+}
+</script>
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 0b3fc2aa822..6f59e11856b 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
@@ -2,7 +2,7 @@
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="agreements_list">
         <Toolbar v-if="!embedded">
-            <ToolbarButton
+            <ButtonLink
                 :to="{ name: 'AgreementsFormAdd' }"
                 icon="plus"
                 :title="$__('New agreement')"
@@ -58,7 +58,7 @@
 <script>
 import flatPickr from "vue-flatpickr-component"
 import Toolbar from "../Toolbar.vue"
-import ToolbarButton from "../ToolbarButton.vue"
+import ButtonLink from "../ButtonLink.vue"
 import { inject, ref, reactive } from "vue"
 import { APIClient } from "../../fetch/api-client.js"
 import { storeToRefs } from "pinia"
@@ -353,7 +353,7 @@ export default {
             }
         },
     },
-    components: { flatPickr, Toolbar, ToolbarButton, KohaTable },
+    components: { flatPickr, Toolbar, ButtonLink, KohaTable },
     props: {
         embedded: {
             type: Boolean,
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
index 27eee68c05d..d5e564a81c6 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
@@ -2,7 +2,7 @@
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="agreements_show">
         <Toolbar>
-            <ToolbarButton
+            <ButtonLink
                 :to="{
                     name: 'AgreementsFormAddEdit',
                     params: { agreement_id: agreement.agreement_id },
@@ -338,7 +338,7 @@
 import { inject } from "vue"
 import { APIClient } from "../../fetch/api-client.js"
 import Toolbar from "../Toolbar.vue"
-import ToolbarButton from "../ToolbarButton.vue"
+import ButtonLink from "../ButtonLink.vue"
 
 export default {
     setup() {
@@ -425,7 +425,7 @@ export default {
             )
         },
     },
-    components: { Toolbar, ToolbarButton },
+    components: { Toolbar, ButtonLink },
     name: "AgreementsShow",
 }
 </script>
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 29f446bb49c..38804bad1fb 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
@@ -3,7 +3,7 @@
         <div v-if="!initialized">{{ $__("Loading") }}</div>
         <div v-else id="packages_list">
             <Toolbar>
-                <ToolbarButton
+                <ButtonLink
                     :to="{ name: 'EHoldingsLocalPackagesFormAdd' }"
                     icon="plus"
                     :title="$__('New package')"
@@ -31,7 +31,7 @@
 
 <script>
 import Toolbar from "../Toolbar.vue"
-import ToolbarButton from "../ToolbarButton.vue"
+import ButtonLink from "../ButtonLink.vue"
 import { inject, ref, reactive } from "vue"
 import { storeToRefs } from "pinia"
 import { APIClient } from "../../fetch/api-client.js"
@@ -245,7 +245,7 @@ export default {
             ]
         },
     },
-    components: { Toolbar, ToolbarButton, KohaTable },
+    components: { Toolbar, ButtonLink, KohaTable },
     name: "EHoldingsLocalPackagesList",
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesShow.vue
index b864affc4ec..251fb23426d 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesShow.vue
@@ -2,7 +2,7 @@
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else-if="erm_package" id="packages_show">
         <Toolbar>
-            <ToolbarButton
+            <ButtonLink
                 :to="{
                     name: 'EHoldingsLocalPackagesFormAddEdit',
                     params: { package_id: erm_package.package_id },
@@ -119,7 +119,7 @@ import { inject } from "vue"
 import EHoldingsPackageTitlesList from "./EHoldingsLocalPackageTitlesList.vue"
 import { APIClient } from "../../fetch/api-client.js"
 import Toolbar from "../Toolbar.vue"
-import ToolbarButton from "../ToolbarButton.vue"
+import ButtonLink from "../ButtonLink.vue"
 
 export default {
     setup() {
@@ -205,7 +205,7 @@ export default {
     components: {
         EHoldingsPackageTitlesList,
         Toolbar,
-        ToolbarButton,
+        ButtonLink,
     },
     name: "EHoldingsLocalPackagesShow",
 }
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 cc4125624e4..bde8efb75ef 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
@@ -3,17 +3,17 @@
         <div v-if="!initialized">{{ $__("Loading") }}</div>
         <div v-else id="titles_list">
             <Toolbar>
-                <ToolbarButton
+                <ButtonLink
                     :to="{ name: 'EHoldingsLocalTitlesFormAdd' }"
                     icon="plus"
                     :title="$__('New title')"
                 />
-                <ToolbarButton
+                <ButtonLink
                     :to="{ name: 'EHoldingsLocalTitlesFormImport' }"
                     icon="plus"
                     :title="$__('Import from list')"
                 />
-                <ToolbarButton
+                <ButtonLink
                     :to="{ name: 'EHoldingsLocalTitlesKBARTImport' }"
                     icon="plus"
                     :title="$__('Import from KBART file')"
@@ -41,7 +41,7 @@
 
 <script>
 import Toolbar from "../Toolbar.vue"
-import ToolbarButton from "../ToolbarButton.vue"
+import ButtonLink from "../ButtonLink.vue"
 import { inject, ref, reactive } from "vue"
 import { storeToRefs } from "pinia"
 import { APIClient } from "../../fetch/api-client.js"
@@ -244,7 +244,7 @@ export default {
             ]
         },
     },
-    components: { Toolbar, ToolbarButton, KohaTable },
+    components: { Toolbar, ButtonLink, KohaTable },
     name: "EHoldingsLocalTitlesList",
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesShow.vue
index fbe7ac27524..029350f980a 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesShow.vue
@@ -2,7 +2,7 @@
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else-if="title" id="eholdings_title_show">
         <Toolbar>
-            <ToolbarButton
+            <ButtonLink
                 :to="{
                     name: 'EHoldingsLocalTitlesFormAddEdit',
                     params: { title_id: title.title_id },
@@ -266,7 +266,7 @@ import { inject } from "vue"
 import EHoldingsTitlePackagesList from "./EHoldingsLocalTitlePackagesList.vue"
 import { APIClient } from "../../fetch/api-client.js"
 import Toolbar from "../Toolbar.vue"
-import ToolbarButton from "../ToolbarButton.vue"
+import ButtonLink from "../ButtonLink.vue"
 
 export default {
     setup() {
@@ -366,7 +366,7 @@ export default {
     components: {
         EHoldingsTitlePackagesList,
         Toolbar,
-        ToolbarButton,
+        ButtonLink,
     },
     name: "EHoldingsLocalTitlesShow",
 }
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 e52511ef1a3..4d4e4f6c576 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
@@ -2,7 +2,7 @@
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="licenses_list">
         <Toolbar>
-            <ToolbarButton
+            <ButtonLink
                 :to="{ name: 'LicensesFormAdd' }"
                 icon="plus"
                 :title="$__('New license')"
@@ -25,7 +25,7 @@
 
 <script>
 import Toolbar from "../Toolbar.vue"
-import ToolbarButton from "../ToolbarButton.vue"
+import ButtonLink from "../ButtonLink.vue"
 import { inject, ref } from "vue"
 import { storeToRefs } from "pinia"
 import { APIClient } from "../../fetch/api-client.js"
@@ -227,7 +227,7 @@ export default {
         av_license_types: Array,
         av_license_statuses: Array,
     },
-    components: { Toolbar, ToolbarButton, KohaTable },
+    components: { Toolbar, ButtonLink, KohaTable },
     name: "LicensesList",
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
index 400267c08f7..a542d1e4fde 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
@@ -2,7 +2,7 @@
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="licenses_show">
         <Toolbar>
-            <ToolbarButton
+            <ButtonLink
                 :to="{
                     name: 'LicensesFormAddEdit',
                     params: { license_id: license.license_id },
@@ -152,7 +152,7 @@
 import { inject } from "vue"
 import { APIClient } from "../../fetch/api-client.js"
 import Toolbar from "../Toolbar.vue"
-import ToolbarButton from "../ToolbarButton.vue"
+import ButtonLink from "../ButtonLink.vue"
 
 export default {
     setup() {
@@ -233,7 +233,7 @@ export default {
             )
         },
     },
-    components: { Toolbar, ToolbarButton },
+    components: { Toolbar, ButtonLink },
     name: "LicensesShow",
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersShow.vue
index 1643dbc91ad..49003c1a578 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersShow.vue
@@ -2,7 +2,7 @@
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="usage_data_providers_show">
         <Toolbar>
-            <ToolbarButton
+            <ButtonLink
                 :to="{
                     name: 'UsageStatisticsDataProvidersFormAddEdit',
                     params: {
@@ -121,7 +121,7 @@
 import { inject } from "vue"
 import { APIClient } from "../../fetch/api-client.js"
 import Toolbar from "../Toolbar.vue"
-import ToolbarButton from "../ToolbarButton.vue"
+import ButtonLink from "../ButtonLink.vue"
 import UsageStatisticsDataProvidersFileImport from "./UsageStatisticsDataProvidersFileImport.vue"
 import UsageStatisticsDataProvidersCounterLogs from "./UsageStatisticsDataProvidersCounterLogs.vue"
 import UsageStatisticsDataProviderDetails from "./UsageStatisticsDataProviderDetails.vue"
@@ -230,7 +230,7 @@ export default {
         UsageStatisticsDataProviderDetails,
         UsageStatisticsProviderDataList,
         Toolbar,
-        ToolbarButton,
+        ButtonLink,
     },
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/SettingsProcessingsShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/SettingsProcessingsShow.vue
index 82c35eeaf2b..95eeac8155f 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/SettingsProcessingsShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/SettingsProcessingsShow.vue
@@ -2,7 +2,7 @@
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="processing_show">
         <Toolbar>
-            <ToolbarButton
+            <ButtonLink
                 :to="{
                     name: 'SettingsProcessingsFormEdit',
                     params: { processing_id: processing.processing_id },
@@ -91,7 +91,7 @@
 import { inject } from "vue"
 import { APIClient } from "../../fetch/api-client.js"
 import Toolbar from "../Toolbar.vue"
-import ToolbarButton from "../ToolbarButton.vue"
+import ButtonLink from "../ButtonLink.vue"
 
 export default {
     setup() {
@@ -170,7 +170,7 @@ export default {
             )
         },
     },
-    components: { Toolbar, ToolbarButton },
+    components: { Toolbar, ButtonLink },
     name: "ProcessingsShow",
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsList.vue
index 29f5b52e560..bfb50f96990 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsList.vue
@@ -2,7 +2,7 @@
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="trains_list">
         <Toolbar>
-            <ToolbarButton
+            <ButtonLink
                 :to="{ name: 'TrainsFormAdd' }"
                 icon="plus"
                 :title="$__('New train')"
@@ -61,7 +61,7 @@
 <script>
 import flatPickr from "vue-flatpickr-component"
 import Toolbar from "../Toolbar.vue"
-import ToolbarButton from "../ToolbarButton.vue"
+import ButtonLink from "../ButtonLink.vue"
 import { inject, ref, reactive } from "vue"
 import { APIClient } from "../../fetch/api-client"
 import { build_url } from "../../composables/datatables"
@@ -273,7 +273,7 @@ export default {
             ]
         },
     },
-    components: { flatPickr, Toolbar, ToolbarButton, KohaTable },
+    components: { flatPickr, Toolbar, ButtonLink, KohaTable },
     name: "trainsList",
     emits: ["select-train", "close"],
 }
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 9b3496b09d5..11245a81b54 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
@@ -73,7 +73,7 @@
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="trains_show">
         <Toolbar>
-            <ToolbarButton
+            <ButtonLink
                 v-if="train.closed_on == null"
                 :to="{
                     name: 'TrainsFormAddItem',
@@ -91,7 +91,7 @@
             >
                 <font-awesome-icon icon="plus" /> {{ $__("Add items") }}
             </span>
-            <ToolbarButton
+            <ButtonLink
                 :to="{
                     name: 'TrainsFormEdit',
                     params: { train_id: train.train_id },
@@ -287,7 +287,7 @@ 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"
+import ButtonLink from "../ButtonLink.vue"
 
 export default {
     setup() {
@@ -729,7 +729,7 @@ export default {
             })
         },
     },
-    components: { Toolbar, ToolbarButton },
+    components: { Toolbar, ButtonLink },
     name: "TrainsShow",
 }
 </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
deleted file mode 100644
index 4cfada715cc..00000000000
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolbarButton.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<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.3 (Apple Git-146)