Attachment 153086 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.94 KB, created by Jonathan Druart on 2023-07-06 08:23:38 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Jonathan Druart

Created: 2023-07-06 08:23:38 UTC

Size: 9.94 KB

patch

obsolete

>From 1582e7090c6b2614d91c77fc8db91f84bec552bd 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/
>---
> .../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 7025ad5b4f8..c7534dc0f6a 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 08105b11374..cf6abbc104c 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 c692c217ca2..4775854536c 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 af7068e8b14..47f6a6c7ebf 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 47f740607c8..5cdbd5807d9 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 00000000000..4cfada715cc
>--- /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.25.1

Actions: View | Diff | Splinter Review

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