Attachment 153179 Details for Bug 34215 – Bug 34215: Introduce a ToolbarButton Vue component

[patch] Bug 34215: Introduce a ToolbarButton Vue component

Bug-34215-Introduce-a-ToolbarButton-Vue-component.patch (text/plain), 9.99 KB, created by Pedro Amorim on 2023-07-07 13:12:32 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Pedro Amorim

Created: 2023-07-07 13:12:32 UTC

Size: 9.99 KB

patch

obsolete

>From 93c27467e8b83f36462f904a89ce5b7a56beac85 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>
>---
> .../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 20b9b9a82d..a7e595fee0 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) {
>@@ -351,7 +351,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 75211d3569..85c87b4d49 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.30.2

Actions: View | Diff | Splinter Review

Attachments on bug 34215: 153085 | 153086 | 153087 | 153179 | 156087