Attachment 168706 Details for Bug 37274 – Bug 37274: Use the Toolbar component in all Vue components

[patch] Bug 37274: Use the Toolbar component in all Vue components

Bug-37274-Use-the-Toolbar-component-in-all-Vue-com.patch (text/plain), 20.44 KB, created by Pedro Amorim on 2024-07-10 10:09:12 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Pedro Amorim

Created: 2024-07-10 10:09:12 UTC

Size: 20.44 KB

patch

obsolete

>From 2f3a908901e08badcae21c5513e207b346110d11 Mon Sep 17 00:00:00 2001
>From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
>Date: Tue, 9 Jul 2024 14:34:29 +0200
>Subject: [PATCH] Bug 37274: Use the Toolbar component in all Vue components
>
>We have a Toolbar component that must be used everywhere for
>consistency.
>This patch adds it when missing:
>* ERM/AgreementsShow
>Show an agreement
>
>* ERM/EHoldingsLocalPackagesShow
>Show a local package
>* ERM/EHoldingsLocalTitlesShow
>Show a local title
>
>* ERM/LicensesShow
>Show a license
>
>* ERM/UsageStatisticsDataProvidersShow
>Show a data provider
>
>* Preservation/SettingsProcessingsShow
>Show the the settings of a processing (Preservation module)
>
>Confirm that the "Edit" and "Delete" icons are now replaced with buttons
>(in a toolbar) on those views.
>
>Signed-off-by: Pedro Amorim <pedro.amorim@ptfs-europe.com>
>---
> .../js/vue/components/ERM/AgreementsShow.vue  | 43 +++++++-------
> .../ERM/EHoldingsLocalPackagesShow.vue        | 45 +++++++--------
> .../ERM/EHoldingsLocalTitlesShow.vue          | 43 +++++++-------
> .../js/vue/components/ERM/LicensesShow.vue    | 39 ++++++-------
> .../ERM/UsageStatisticsDataProvidersShow.vue  | 56 ++++++++++---------
> .../Preservation/SettingsProcessingsShow.vue  | 37 ++++++------
> t/cypress/integration/ERM/Agreements_spec.ts  |  4 +-
> .../integration/ERM/DataProviders_spec.ts     |  4 +-
> t/cypress/integration/ERM/Licenses_spec.ts    |  2 +-
> t/cypress/integration/ERM/Packages_spec.ts    |  2 +-
> t/cypress/integration/ERM/Titles_spec.ts      |  2 +-
> 11 files changed, 142 insertions(+), 135 deletions(-)
>
>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 34e77e98b8..27eee68c05 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
>@@ -1,24 +1,27 @@
> <template>
>     <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
>+            >
>+        </Toolbar>
>+
>         <h2>
>             {{ $__("Agreement #%s").format(agreement.agreement_id) }}
>-            <span class="action_links">
>-                <router-link
>-                    :to="{
>-                        name: 'AgreementsFormAddEdit',
>-                        params: { agreement_id: agreement.agreement_id },
>-                    }"
>-                    :title="$__('Edit')"
>-                    ><i class="fa fa-pencil"></i
>-                ></router-link>
>-                <a
>-                    @click="
>-                        delete_agreement(agreement.agreement_id, agreement.name)
>-                    "
>-                    ><i class="fa fa-trash"></i
>-                ></a>
>-            </span>
>         </h2>
>         <div>
>             <fieldset class="rows">
>@@ -334,6 +337,8 @@
> <script>
> import { inject } from "vue"
> import { APIClient } from "../../fetch/api-client.js"
>+import Toolbar from "../Toolbar.vue"
>+import ToolbarButton from "../ToolbarButton.vue"
> 
> export default {
>     setup() {
>@@ -420,15 +425,11 @@ export default {
>             )
>         },
>     },
>+    components: { Toolbar, ToolbarButton },
>     name: "AgreementsShow",
> }
> </script>
> <style scoped>
>-.action_links a {
>-    padding-left: 0.2em;
>-    font-size: 11px;
>-    cursor: pointer;
>-}
> #agreement_documents ul {
>     padding-left: 0px;
> }
>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 e2e2c9bbe6..b864affc4e 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
>@@ -1,25 +1,27 @@
> <template>
>     <div v-if="!initialized">{{ $__("Loading") }}</div>
>     <div v-else-if="erm_package" id="packages_show">
>+        <Toolbar>
>+            <ToolbarButton
>+                :to="{
>+                    name: 'EHoldingsLocalPackagesFormAddEdit',
>+                    params: { package_id: erm_package.package_id },
>+                }"
>+                class="btn btn-default"
>+                icon="pencil"
>+                :title="$__('Edit')"
>+            />
>+            <a
>+                @click="
>+                    delete_package(erm_package.package_id, erm_package.name)
>+                "
>+                class="btn btn-default"
>+                ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a
>+            >
>+        </Toolbar>
>+
>         <h2>
>             {{ $__("Package #%s").format(erm_package.package_id) }}
>-            <span class="action_links">
>-                <router-link
>-                    :to="{
>-                        name: 'EHoldingsLocalPackagesFormAddEdit',
>-                        params: { package_id: erm_package.package_id },
>-                    }"
>-                    :title="$__('Edit')"
>-                    ><i class="fa fa-pencil"></i
>-                ></router-link>
>-
>-                <a
>-                    @click="
>-                        delete_package(erm_package.package_id, erm_package.name)
>-                    "
>-                    ><i class="fa fa-trash"></i
>-                ></a>
>-            </span>
>         </h2>
>         <div>
>             <fieldset class="rows">
>@@ -116,6 +118,8 @@
> 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"
> 
> export default {
>     setup() {
>@@ -200,16 +204,13 @@ export default {
>     },
>     components: {
>         EHoldingsPackageTitlesList,
>+        Toolbar,
>+        ToolbarButton,
>     },
>     name: "EHoldingsLocalPackagesShow",
> }
> </script>
> <style scoped>
>-.action_links a {
>-    padding-left: 0.2em;
>-    font-size: 11px;
>-    cursor: pointer;
>-}
> fieldset.rows label {
>     width: 25rem;
> }
>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 ef943ad0ed..fbe7ac2752 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
>@@ -1,25 +1,25 @@
> <template>
>     <div v-if="!initialized">{{ $__("Loading") }}</div>
>     <div v-else-if="title" id="eholdings_title_show">
>+        <Toolbar>
>+            <ToolbarButton
>+                :to="{
>+                    name: 'EHoldingsLocalTitlesFormAddEdit',
>+                    params: { title_id: title.title_id },
>+                }"
>+                class="btn btn-default"
>+                icon="pencil"
>+                :title="$__('Edit')"
>+            />
>+            <a
>+                @click="delete_title(title.title_id, title.publication_title)"
>+                class="btn btn-default"
>+                ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a
>+            >
>+        </Toolbar>
>+
>         <h2>
>             {{ $__("Title #%s").format(title.title_id) }}
>-            <span class="action_links">
>-                <router-link
>-                    :to="{
>-                        name: 'EHoldingsLocalTitlesFormAddEdit',
>-                        params: { title_id: title.title_id },
>-                    }"
>-                    :title="$__('Edit')"
>-                    ><i class="fa fa-pencil"></i
>-                ></router-link>
>-
>-                <a
>-                    @click="
>-                        delete_title(title.title_id, title.publication_title)
>-                    "
>-                    ><i class="fa fa-trash"></i
>-                ></a>
>-            </span>
>         </h2>
>         <div>
>             <fieldset class="rows">
>@@ -265,6 +265,8 @@
> 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"
> 
> export default {
>     setup() {
>@@ -363,16 +365,13 @@ export default {
>     },
>     components: {
>         EHoldingsTitlePackagesList,
>+        Toolbar,
>+        ToolbarButton,
>     },
>     name: "EHoldingsLocalTitlesShow",
> }
> </script>
> <style scoped>
>-.action_links a {
>-    padding-left: 0.2em;
>-    font-size: 11px;
>-    cursor: pointer;
>-}
> fieldset.rows label {
>     width: 25rem;
> }
>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 19c853f4aa..400267c08f 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
>@@ -1,21 +1,25 @@
> <template>
>     <div v-if="!initialized">{{ $__("Loading") }}</div>
>     <div v-else id="licenses_show">
>+        <Toolbar>
>+            <ToolbarButton
>+                :to="{
>+                    name: 'LicensesFormAddEdit',
>+                    params: { license_id: license.license_id },
>+                }"
>+                class="btn btn-default"
>+                icon="pencil"
>+                :title="$__('Edit')"
>+            />
>+            <a
>+                @click="delete_license(license.license_id, license.name)"
>+                class="btn btn-default"
>+                ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a
>+            >
>+        </Toolbar>
>+
>         <h2>
>             {{ $__("License #%s").format(license.license_id) }}
>-            <span class="action_links">
>-                <router-link
>-                    :to="{
>-                        name: 'LicensesFormAddEdit',
>-                        params: { license_id: license.license_id },
>-                    }"
>-                    :title="$__('Edit')"
>-                    ><i class="fa fa-pencil"></i
>-                ></router-link>
>-                <a @click="delete_license(license.license_id, license.name)"
>-                    ><i class="fa fa-trash"></i
>-                ></a>
>-            </span>
>         </h2>
>         <div>
>             <fieldset class="rows">
>@@ -147,6 +151,8 @@
> <script>
> import { inject } from "vue"
> import { APIClient } from "../../fetch/api-client.js"
>+import Toolbar from "../Toolbar.vue"
>+import ToolbarButton from "../ToolbarButton.vue"
> 
> export default {
>     setup() {
>@@ -227,16 +233,11 @@ export default {
>             )
>         },
>     },
>-    components: {},
>+    components: { Toolbar, ToolbarButton },
>     name: "LicensesShow",
> }
> </script>
> <style scoped>
>-.action_links a {
>-    padding-left: 0.2em;
>-    font-size: 11px;
>-    cursor: pointer;
>-}
> #license_documents ul {
>     padding-left: 0px;
> }
>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 eb4813aad4..d9d6137ae8 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
>@@ -1,34 +1,37 @@
> <template>
>     <div v-if="!initialized">{{ $__("Loading") }}</div>
>     <div v-else id="usage_data_providers_show">
>+        <Toolbar>
>+            <ToolbarButton
>+                :to="{
>+                    name: 'UsageStatisticsDataProvidersFormAddEdit',
>+                    params: {
>+                        usage_data_provider_id:
>+                            usage_data_provider.erm_usage_data_provider_id,
>+                    },
>+                }"
>+                class="btn btn-default"
>+                icon="pencil"
>+                :title="$__('Edit')"
>+            />
>+            <a
>+                @click="
>+                    delete_usage_data_provider(
>+                        usage_data_provider.erm_usage_data_provider_id,
>+                        usage_data_provider.name
>+                    )
>+                "
>+                class="btn btn-default"
>+                ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a
>+            >
>+        </Toolbar>
>+
>         <h2>
>             {{
>                 $__("Data provider #%s").format(
>                     usage_data_provider.erm_usage_data_provider_id
>                 )
>             }}
>-            <span class="action_links">
>-                <router-link
>-                    :to="{
>-                        name: 'UsageStatisticsDataProvidersFormAddEdit',
>-                        params: {
>-                            usage_data_provider_id:
>-                                usage_data_provider.erm_usage_data_provider_id,
>-                        },
>-                    }"
>-                    :title="$__('Edit')"
>-                    ><i class="fa fa-pencil"></i
>-                ></router-link>
>-                <a
>-                    @click="
>-                        delete_usage_data_provider(
>-                            usage_data_provider.erm_usage_data_provider_id,
>-                            usage_data_provider.name
>-                        )
>-                    "
>-                    ><i class="fa fa-trash"></i
>-                ></a>
>-            </span>
>         </h2>
>         <div id="usage_data_providerstabs" class="toptabs numbered">
>             <ul class="nav nav-tabs" role="tablist">
>@@ -123,6 +126,8 @@
> <script>
> import { inject } from "vue"
> import { APIClient } from "../../fetch/api-client.js"
>+import Toolbar from "../Toolbar.vue"
>+import ToolbarButton from "../ToolbarButton.vue"
> import UsageStatisticsDataProvidersFileImport from "./UsageStatisticsDataProvidersFileImport.vue"
> import UsageStatisticsDataProvidersCounterLogs from "./UsageStatisticsDataProvidersCounterLogs.vue"
> import UsageStatisticsDataProviderDetails from "./UsageStatisticsDataProviderDetails.vue"
>@@ -230,15 +235,12 @@ export default {
>         UsageStatisticsDataProvidersCounterLogs,
>         UsageStatisticsDataProviderDetails,
>         UsageStatisticsProviderDataList,
>+        Toolbar,
>+        ToolbarButton,
>     },
> }
> </script>
> <style scoped>
>-.action_links a {
>-    padding-left: 0.2em;
>-    font-size: 11px;
>-    cursor: pointer;
>-}
> .active {
>     cursor: pointer;
> }
>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 96cec7ce2f..82c35eeaf2 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
>@@ -1,19 +1,23 @@
> <template>
>     <div v-if="!initialized">{{ $__("Loading") }}</div>
>     <div v-else id="processing_show">
>+        <Toolbar>
>+            <ToolbarButton
>+                :to="{
>+                    name: 'SettingsProcessingsFormEdit',
>+                    params: { processing_id: processing.processing_id },
>+                }"
>+                class="btn btn-default"
>+                icon="pencil"
>+                :title="$__('Edit')"
>+            />
>+            <a @click="doDelete()" class="btn btn-default"
>+                ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a
>+            >
>+        </Toolbar>
>+
>         <h2>
>             {{ $__("Processing #%s").format(processing.processing_id) }}
>-            <span class="action_links">
>-                <router-link
>-                    :to="{
>-                        name: 'SettingsProcessingsFormEdit',
>-                        params: { processing_id: processing.processing_id },
>-                    }"
>-                    :title="$__('Edit')"
>-                    ><i class="fa fa-pencil"></i
>-                ></router-link>
>-                <a @click="doDelete()"><i class="fa fa-trash"></i></a>
>-            </span>
>         </h2>
>         <div>
>             <fieldset class="rows">
>@@ -86,6 +90,8 @@
> <script>
> import { inject } from "vue"
> import { APIClient } from "../../fetch/api-client.js"
>+import Toolbar from "../Toolbar.vue"
>+import ToolbarButton from "../ToolbarButton.vue"
> 
> export default {
>     setup() {
>@@ -164,13 +170,8 @@ export default {
>             )
>         },
>     },
>+    components: { Toolbar, ToolbarButton },
>     name: "ProcessingsShow",
> }
> </script>
>-<style scoped>
>-.action_links a {
>-    padding-left: 0.2em;
>-    font-size: 11px;
>-    cursor: pointer;
>-}
>-</style>
>+<style scoped></style>
>diff --git a/t/cypress/integration/ERM/Agreements_spec.ts b/t/cypress/integration/ERM/Agreements_spec.ts
>index e8b18014f6..f642034385 100644
>--- a/t/cypress/integration/ERM/Agreements_spec.ts
>+++ b/t/cypress/integration/ERM/Agreements_spec.ts
>@@ -555,7 +555,7 @@ describe("Agreement CRUD operations", () => {
>         // AV's libs displayed
>         // Tables for periods and users
>     });
>-    it("Delete agreement", () => {
>+    it.only("Delete agreement", () => {
>         let agreement = cy.get_agreement();
>         let agreements = [agreement];
> 
>@@ -633,7 +633,7 @@ describe("Agreement CRUD operations", () => {
>             "Agreement #" + agreement.agreement_id
>         );
> 
>-        cy.get("#agreements_show .action_links .fa-trash").click();
>+        cy.get("#agreements_show #toolbar").contains("Delete").click();
>         cy.get(".dialog.alert.confirmation h1").contains(
>             "remove this agreement"
>         );
>diff --git a/t/cypress/integration/ERM/DataProviders_spec.ts b/t/cypress/integration/ERM/DataProviders_spec.ts
>index 1f80f6ca78..ccce9e9fdc 100644
>--- a/t/cypress/integration/ERM/DataProviders_spec.ts
>+++ b/t/cypress/integration/ERM/DataProviders_spec.ts
>@@ -383,7 +383,9 @@ describe("Data provider CRUD operations", () => {
>             "Data provider #" + dataProvider.erm_usage_data_provider_id
>         );
> 
>-        cy.get("#usage_data_providers_show .action_links .fa-trash").click();
>+        cy.get("#usage_data_providers_show #toolbar")
>+            .contains("Delete")
>+            .click();
>         cy.get(".dialog.alert.confirmation h1").contains(
>             "remove this data provider"
>         );
>diff --git a/t/cypress/integration/ERM/Licenses_spec.ts b/t/cypress/integration/ERM/Licenses_spec.ts
>index 5718ca4c6c..b223e626ef 100644
>--- a/t/cypress/integration/ERM/Licenses_spec.ts
>+++ b/t/cypress/integration/ERM/Licenses_spec.ts
>@@ -352,7 +352,7 @@ describe("License CRUD operations", () => {
>         cy.wait(500); // Cypress is too fast! Vue hasn't populated the form yet!
>         cy.get("#licenses_show h2").contains("License #" + license.license_id);
> 
>-        cy.get("#licenses_show .action_links .fa-trash").click();
>+        cy.get("#licenses_show #toolbar").contains("Delete").click();
>         cy.get(".dialog.alert.confirmation h1").contains("remove this license");
>         cy.contains("Yes, delete").click();
> 
>diff --git a/t/cypress/integration/ERM/Packages_spec.ts b/t/cypress/integration/ERM/Packages_spec.ts
>index 2ba71e529a..7f3655b15a 100644
>--- a/t/cypress/integration/ERM/Packages_spec.ts
>+++ b/t/cypress/integration/ERM/Packages_spec.ts
>@@ -351,7 +351,7 @@ describe("Package CRUD operations", () => {
>             "Package #" + erm_package.package_id
>         );
> 
>-        cy.get("#packages_show .action_links .fa-trash").click();
>+        cy.get("#packages_show #toolbar").contains("Delete").click();
>         cy.get(".dialog.alert.confirmation h1").contains("remove this package");
>         cy.contains("Yes, delete").click();
> 
>diff --git a/t/cypress/integration/ERM/Titles_spec.ts b/t/cypress/integration/ERM/Titles_spec.ts
>index 22229b339c..8a05c232b2 100644
>--- a/t/cypress/integration/ERM/Titles_spec.ts
>+++ b/t/cypress/integration/ERM/Titles_spec.ts
>@@ -514,7 +514,7 @@ describe("Title CRUD operations", () => {
>             "Title #" + erm_title.title_id
>         );
> 
>-        cy.get("#eholdings_title_show .action_links .fa-trash").click();
>+        cy.get("#eholdings_title_show #toolbar").contains("Delete").click();
>         cy.get(".dialog.alert.confirmation h1").contains("remove this title");
>         cy.contains("Yes, delete").click();
> 
>-- 
>2.34.1

Actions: View | Diff | Splinter Review

Attachments on bug 37274: 168609 | 168646 | 168706 | 169041