From 4f930461c3ff5dd27c0836ec50219d3dfbbb007c Mon Sep 17 00:00:00 2001
From: Pedro Amorim <pedro.amorim@ptfs-europe.com>
Date: Tue, 9 Jul 2024 14:30:40 +0000
Subject: [PATCH] Bug 37301: [PoC] DRY ToolbarButton

This is only a PoC applied to Agreements for discussion.
This is a continuation of bug 37274.
Bug 37274 applied the ToolbarButton to missing components but it was mostly replacing WET for WET.

This is DRYer:
- All mark-up related to toolbar buttons is now written once (css class, icons, elements)
- All labels are now written once (except 'Add' for translatability)
---
 .../js/vue/components/ERM/AgreementsList.vue  |  9 ++++--
 .../js/vue/components/ERM/AgreementsShow.vue  | 29 ++++++++-----------
 .../prog/js/vue/components/ToolbarButton.vue  | 26 +++++++++++++++--
 3 files changed, 43 insertions(+), 21 deletions(-)

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 e57b7a00b9..ea50ea92f9 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
@@ -3,8 +3,8 @@
     <div v-else id="agreements_list">
         <Toolbar v-if="!embedded">
             <ToolbarButton
-                :to="{ name: 'AgreementsFormAdd' }"
-                icon="plus"
+                type="add"
+                @add-clicked="add_agreement"
                 :title="$__('New agreement')"
             />
         </Toolbar>
@@ -223,6 +223,11 @@ export default {
                     })
                 })
         },
+        add_agreement: function () {
+            this.$router.push({
+                name: "AgreementsFormAdd",
+            })
+        },
         doShow: function ({ agreement_id }, dt, event) {
             event.preventDefault()
             this.$router.push({
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 7b49fe88d6..f0745ca7db 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,22 +2,8 @@
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="agreements_show">
         <Toolbar>
-            <ToolbarButton
-                :to="{
-                    name: 'AgreementsFormAddEdit',
-                    params: { agreement_id: agreement.agreement_id },
-                }"
-                class="btn btn-default"
-                icon="pencil"
-                :title="$__('Edit')"
-            />
-            <a
-                @click="
-                    delete_agreement(agreement.agreement_id, agreement.name)
-                "
-                class="btn btn-default"
-                ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a
-            >
+            <ToolbarButton type="edit" @edit-clicked="edit_agreement" />
+            <ToolbarButton type="delete" @delete-clicked="delete_agreement" />
         </Toolbar>
 
         <h2>
@@ -406,7 +392,16 @@ export default {
                 error => {}
             )
         },
-        delete_agreement: function (agreement_id, agreement_name) {
+        edit_agreement: function () {
+            this.$router.push({
+                name: "AgreementsFormAddEdit",
+                params: { agreement_id: this.agreement.agreement_id },
+            })
+        },
+        delete_agreement: function () {
+            let agreement_id = this.agreement.agreement_id
+            let agreement_name = this.agreement.name
+
             this.setConfirmationDialog(
                 {
                     title: this.$__(
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolbarButton.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolbarButton.vue
index 4cfada715c..84cec0d11f 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolbarButton.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ToolbarButton.vue
@@ -1,12 +1,22 @@
 <template>
-    <router-link :to="to" :class="class"
-        ><font-awesome-icon v-if="icon" :icon="icon" /> {{ title }}</router-link
+    <a v-if="type === 'add'" @click="click_add" :class="class"
+        ><font-awesome-icon icon="plus" /> {{ title }}</a
+    >
+    <a v-if="type === 'delete'" @click="click_delete" :class="class"
+        ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a
+    >
+    <a v-if="type === 'edit'" @click="click_edit" :class="class"
+        ><font-awesome-icon icon="pencil" /> {{ $__("Edit") }}</a
     >
 </template>
 
 <script>
 export default {
     props: {
+        type: {
+            type: String,
+            required: true,
+        },
         to: {
             type: [String, Object],
         },
@@ -22,6 +32,18 @@ export default {
             type: String,
         },
     },
+    methods: {
+        click_add() {
+            this.$emit("add-clicked")
+        },
+        click_delete() {
+            this.$emit("delete-clicked")
+        },
+        click_edit() {
+            this.$emit("edit-clicked")
+        },
+    },
+    emits: ["add-clicked", "delete-clicked", "edit-clicked"],
     name: "Toolbar",
 }
 </script>
-- 
2.39.5