Attachment 174612 Details for Bug 37301 – Bug 37301: [PoC] DRY ToolbarButton

[patch] Bug 37301: [PoC] DRY ToolbarButton

Bug-37301-PoC-DRY-ToolbarButton.patch (text/plain), 5.22 KB, created by Pedro Amorim on 2024-11-15 16:44:46 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Pedro Amorim

Created: 2024-11-15 16:44:46 UTC

Size: 5.22 KB

patch

obsolete

>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

Actions: View | Diff | Splinter Review

Attachments on bug 37301: 168709 | 168739 | 168740 | 168741 | 168800 | 168827 | 168828 | 168829 | 168836 | 172713 | 172911 | 172912 | 172913 | 172914 | 172915 | 172916 | 172917 | 172918 | 172919 | 172920 | 172921 | 174612 | 174613 | 174614 | 174615 | 174616 | 174617 | 174618 | 174619 | 174620 | 174621 | 174622 | 174623 | 174624 | 174625 | 174626 | 174627 | 174628 | 174629 | 174630 | 174631