From 4f722d9c4f0a4fa8ae4ec0d5827b2f65e2fcbdd4 Mon Sep 17 00:00:00 2001
From: Pedro Amorim <pedro.amorim@ptfs-europe.com>
Date: Thu, 17 Oct 2024 15:16:50 +0000
Subject: [PATCH] Bug 37301: Apply changes to usage statistics data providers

This is also removing UsageStatissticsDataProvidersToolbar as that is
not required, and updating the UsageStatisticsDataProvidersSummary
button to a ToolbarButton instead of a router-link
---
 .../UsageStatisticsDataProviderResource.vue   |  30 +++++
 .../ERM/UsageStatisticsDataProvidersList.vue  | 106 ++++--------------
 .../ERM/UsageStatisticsDataProvidersShow.vue  |  63 ++---------
 .../UsageStatisticsDataProvidersSummary.vue   |   3 +-
 .../UsageStatisticsDataProvidersToolbar.vue   |  16 ---
 5 files changed, 64 insertions(+), 154 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProviderResource.vue
 delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersToolbar.vue

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProviderResource.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProviderResource.vue
new file mode 100644
index 0000000000..bf87841b63
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProviderResource.vue
@@ -0,0 +1,30 @@
+<script>
+import BaseResource from "../BaseResource.vue"
+import { APIClient } from "../../fetch/api-client.js"
+
+export default {
+    extends: BaseResource,
+    setup(props) {
+        return {
+            ...BaseResource.setup({
+                resource_name: "usage_data_provider",
+                name_attr: "name",
+                id_attr: "erm_usage_data_provider_id",
+                show_component: "UsageStatisticsDataProvidersShow",
+                list_component: "UsageStatisticsDataProvidersList",
+                add_component: "UsageStatisticsDataProvidersFormAdd",
+                edit_component: "UsageStatisticsDataProvidersFormAddEdit",
+                api_client: APIClient.erm.usage_data_providers,
+                resource_table_url:
+                    APIClient.erm._baseURL + "usage_data_providers",
+                i18n: {
+                    display_name: __("Data provider"),
+                },
+            }),
+            //UsageStatisticsDataProviderResource specific setup here
+        }
+    },
+    methods: {},
+    name: "UsageStatisticsDataProviderResource",
+}
+</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersList.vue
index b0421f8cf7..7d383400d5 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersList.vue
@@ -2,28 +2,27 @@
     <div v-if="!initialized">{{ $__("Loading") }}</div>
     <div v-else id="usage_data_providers_list">
         <template class="toolbar_options">
-            <Toolbar />
-            <div
-                v-if="usage_data_provider_count > 0"
-                id="toolbar"
-                class="btn-toolbar"
-            >
-                <router-link
+            <Toolbar>
+                <ToolbarButton
+                    action="add"
+                    @go-to-add-resource="goToResourceAdd"
+                    :title="$__('New data provider')"
+                />
+                <ToolbarButton
+                    v-if="usage_data_provider_count > 0"
                     :to="{ name: 'UsageStatisticsDataProvidersSummary' }"
-                    class="btn btn-default"
-                >
-                    <i class="fa fa-list"></i>
-                    {{ $__("Data providers summary") }}</router-link
-                >
-            </div>
+                    icon="list"
+                    :title="$__('Data providers summary')"
+                />
+            </Toolbar>
         </template>
         <div v-if="usage_data_provider_count > 0" class="page-section">
             <KohaTable
                 ref="table"
                 v-bind="tableOptions"
-                @show="show_usage_data_provider"
-                @edit="edit_usage_data_provider"
-                @delete="delete_usage_data_provider"
+                @show="goToResourceShow"
+                @edit="goToResourceEdit"
+                @delete="doResourceDelete"
                 @run_now="run_harvester_now"
                 @test_connection="test_harvester_connection"
             ></KohaTable>
@@ -35,27 +34,25 @@
 </template>
 
 <script>
-import Toolbar from "./UsageStatisticsDataProvidersToolbar.vue"
+import Toolbar from "../Toolbar.vue"
+import ToolbarButton from "../ToolbarButton.vue"
 import { inject, ref } from "vue"
 import { APIClient } from "../../fetch/api-client.js"
 import KohaTable from "../KohaTable.vue"
+import UsageStatisticsDataProviderResource from "./UsageStatisticsDataProviderResource.vue"
 
 export default {
+    extends: UsageStatisticsDataProviderResource,
     setup() {
         const AVStore = inject("AVStore") // Left in for future permissions fixes
         const { get_lib_from_av, map_av_dt_filter } = AVStore
 
-        const { setConfirmationDialog, setMessage, setWarning } =
-            inject("mainStore")
-
         const table = ref()
 
         return {
+            ...UsageStatisticsDataProviderResource.setup(),
             get_lib_from_av,
             map_av_dt_filter,
-            setConfirmationDialog,
-            setMessage,
-            setWarning,
             table,
         }
     },
@@ -67,7 +64,7 @@ export default {
             tableOptions: {
                 columns: this.getTableColumns(),
                 options: {},
-                url: () => this.table_url(),
+                url: () => this.getResourceTableUrl(),
                 table_settings: this.usage_data_provider_table_settings,
                 add_filters: true,
                 actions: {
@@ -103,59 +100,6 @@ export default {
                 error => {}
             )
         },
-        table_url() {
-            let url = "/api/v1/erm/usage_data_providers"
-            return url
-        },
-        show_usage_data_provider(usage_data_provider, dt, event) {
-            event.preventDefault()
-
-            this.$router.push({
-                name: "UsageStatisticsDataProvidersShow",
-                params: {
-                    usage_data_provider_id:
-                        usage_data_provider.erm_usage_data_provider_id,
-                },
-            })
-        },
-        edit_usage_data_provider(usage_data_provider, dt, event) {
-            this.$router.push({
-                name: "UsageStatisticsDataProvidersFormAddEdit",
-                params: {
-                    usage_data_provider_id:
-                        usage_data_provider.erm_usage_data_provider_id,
-                },
-            })
-        },
-        delete_usage_data_provider(usage_data_provider, dt, event) {
-            this.setConfirmationDialog(
-                {
-                    title: this.$__(
-                        "Are you sure you want to remove this data provider?"
-                    ),
-                    message: usage_data_provider.name,
-                    accept_label: this.$__("Yes, delete"),
-                    cancel_label: this.$__("No, do not delete"),
-                },
-                () => {
-                    const client = APIClient.erm
-                    client.usage_data_providers
-                        .delete(usage_data_provider.erm_usage_data_provider_id)
-                        .then(
-                            success => {
-                                this.setMessage(
-                                    this.$__("Data provider %s deleted").format(
-                                        usage_data_provider.name
-                                    ),
-                                    true
-                                )
-                                dt.draw()
-                            },
-                            error => {}
-                        )
-                }
-            )
-        },
         run_harvester_now(usage_data_provider, dt, event) {
             const { erm_usage_data_provider_id: id, name } = usage_data_provider
 
@@ -307,9 +251,7 @@ export default {
                     orderable: true,
                     render: function (data, type, row, meta) {
                         return (
-                            '<a href="/cgi-bin/koha/erm/eusage/usage_data_providers/' +
-                            row.erm_usage_data_provider_id +
-                            '" class="show">' +
+                            '<a role="button" class="show">' +
                             escape_str(
                                 `${row.name} (#${row.erm_usage_data_provider_id})`
                             ) +
@@ -347,8 +289,8 @@ export default {
             this.getUsageDataProviderCount()
         }
     },
-    components: { Toolbar, KohaTable },
-    name: "DataProvidersList",
+    components: { Toolbar, ToolbarButton, KohaTable },
+    name: "UsageStatisticsDataProvidersList",
 }
 </script>
 
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 47884e46bb..73d7215843 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
@@ -3,27 +3,13 @@
     <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')"
+                action="edit"
+                @go-to-edit-resource="goToResourceEdit"
+            />
+            <ToolbarButton
+                action="delete"
+                @delete-resource="doResourceDelete"
             />
-            <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>
@@ -126,8 +112,10 @@ import UsageStatisticsDataProvidersFileImport from "./UsageStatisticsDataProvide
 import UsageStatisticsDataProvidersCounterLogs from "./UsageStatisticsDataProvidersCounterLogs.vue"
 import UsageStatisticsDataProviderDetails from "./UsageStatisticsDataProviderDetails.vue"
 import UsageStatisticsProviderDataList from "./UsageStatisticsProviderDataList.vue"
+import UsageStatisticsDataProviderResource from "./UsageStatisticsDataProviderResource.vue"
 
 export default {
+    extends: UsageStatisticsDataProviderResource,
     setup() {
         const AVStore = inject("AVStore")
         const { get_lib_from_av } = AVStore
@@ -135,6 +123,7 @@ export default {
         const { setConfirmationDialog, setMessage } = inject("mainStore")
 
         return {
+            ...UsageStatisticsDataProviderResource.setup(),
             get_lib_from_av,
             setConfirmationDialog,
             setMessage,
@@ -188,40 +177,6 @@ export default {
         change_tab_content(e) {
             this.tab_content = e.target.getAttribute("data-content")
         },
-        delete_usage_data_provider: function (
-            usage_data_provider_id,
-            usage_data_provider_name
-        ) {
-            this.setConfirmationDialog(
-                {
-                    title: this.$__(
-                        "Are you sure you want to remove this data provider?"
-                    ),
-                    message: usage_data_provider_name,
-                    accept_label: this.$__("Yes, delete"),
-                    cancel_label: this.$__("No, do not delete"),
-                },
-                () => {
-                    const client = APIClient.erm
-                    client.usage_data_providers
-                        .delete(usage_data_provider_id)
-                        .then(
-                            success => {
-                                this.setMessage(
-                                    this.$__(
-                                        "Usage data provider %s deleted"
-                                    ).format(usage_data_provider_name),
-                                    true
-                                )
-                                this.$router.push({
-                                    name: "UsageStatisticsDataProvidersList",
-                                })
-                            },
-                            error => {}
-                        )
-                }
-            )
-        },
     },
     name: "UsageStatisticsDataProvidersShow",
     components: {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersSummary.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersSummary.vue
index 6db374a523..c79c148824 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersSummary.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersSummary.vue
@@ -24,7 +24,6 @@
 </template>
 
 <script>
-import Toolbar from "./UsageStatisticsDataProvidersToolbar.vue"
 import { inject, ref } from "vue"
 import { APIClient } from "../../fetch/api-client.js"
 import KohaTable from "../KohaTable.vue"
@@ -156,7 +155,7 @@ export default {
             this.getUsageDataProviders()
         }
     },
-    components: { Toolbar, KohaTable },
+    components: { KohaTable },
     name: "UsageStatisticsDataProvidersSummary",
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersToolbar.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersToolbar.vue
deleted file mode 100644
index 2ff264578e..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsDataProvidersToolbar.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <div id="toolbar" class="btn-toolbar">
-        <router-link
-            :to="{ name: 'UsageStatisticsDataProvidersFormAdd' }"
-            class="btn btn-default"
-            ><font-awesome-icon icon="plus" />
-            {{ $__("New data provider") }}</router-link
-        >
-    </div>
-</template>
-
-<script>
-export default {
-    name: "UsageStatisticsDataProvidersToolbar",
-}
-</script>
-- 
2.39.5