From 6225966b8d4eb06f2a4316b7475da2a4fd5a0616 Mon Sep 17 00:00:00 2001
From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
Date: Thu, 3 Aug 2023 15:08:48 +0000
Subject: [PATCH] Bug 34587: Create tabs for new data types in ProvidersShow

Signed-off-by: Jessica Zairo <jzairo@bywatersolutions.com>
Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../ERM/UsageStatisticsDataProvidersShow.vue  |  49 +++---
 .../ERM/UsageStatisticsProviderDataList.vue   | 163 ++++++++++++++++++
 .../ERM/UsageStatisticsTitlesList.vue         | 123 -------------
 3 files changed, 185 insertions(+), 150 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsProviderDataList.vue
 delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsTitlesList.vue

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 603cef528b..b096d0b650 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
@@ -45,15 +45,19 @@
                     >
                 </li>
                 <li
+                    v-for="(item, i) in available_data_types"
                     role="presentation"
-                    v-bind:class="tab_content === 'titles' ? 'active' : ''"
+                    v-bind:class="
+                        tab_content === item.data_type ? 'active' : ''
+                    "
+                    :key="i"
                 >
                     <a
                         href="#"
                         role="tab"
-                        data-content="titles"
+                        :data-content="item.data_type"
                         @click="change_tab_content"
-                        >Titles</a
+                        >{{ $__(item.tab_name) }}</a
                     >
                 </li>
                 <li
@@ -91,9 +95,13 @@
                     :usage_data_provider="usage_data_provider"
                 />
             </div>
-            <div v-if="tab_content === 'titles'">
-                <UsageStatisticsTitlesList />
-            </div>
+            <template v-for="(item, i) in available_data_types">
+                <div v-if="tab_content === item.data_type" :key="i">
+                    <UsageStatisticsProviderDataList
+                        :data_type="item.data_type"
+                    />
+                </div>
+            </template>
             <div v-if="tab_content === 'upload'">
                 <UsageStatisticsDataProvidersFileImport />
             </div>
@@ -115,10 +123,10 @@
 <script>
 import { inject } from "vue"
 import { APIClient } from "../../fetch/api-client.js"
-import UsageStatisticsTitlesList from "./UsageStatisticsTitlesList.vue"
 import UsageStatisticsDataProvidersFileImport from "./UsageStatisticsDataProvidersFileImport.vue"
 import UsageStatisticsDataProvidersCounterLogs from "./UsageStatisticsDataProvidersCounterLogs.vue"
 import UsageStatisticsDataProviderDetails from "./UsageStatisticsDataProviderDetails.vue"
+import UsageStatisticsProviderDataList from "./UsageStatisticsProviderDataList.vue"
 
 export default {
     setup() {
@@ -135,27 +143,14 @@ export default {
     },
     data() {
         return {
-            usage_data_provider: {
-                erm_usage_data_provider_id: null,
-                name: "",
-                description: "",
-                active: 1,
-                method: "",
-                aggregator: "",
-                service_type: "",
-                service_url: "",
-                report_release: "",
-                begin_date: null,
-                end_date: null,
-                customer_id: "",
-                requestor_id: "",
-                api_key: "",
-                requestor_name: "",
-                requestor_email: "",
-                report_types: [],
-            },
             initialized: false,
             tab_content: "detail",
+            available_data_types: [
+                { test: "TR", data_type: "title", tab_name: "Titles" },
+                { test: "PR", data_type: "platform", tab_name: "Platforms" },
+                { test: "IR", data_type: "item", tab_name: "Items" },
+                { test: "DR", data_type: "database", tab_name: "Databases" },
+            ],
         }
     },
     beforeRouteEnter(to, from, next) {
@@ -214,10 +209,10 @@ export default {
     },
     name: "UsageStatisticsDataProvidersShow",
     components: {
-        UsageStatisticsTitlesList,
         UsageStatisticsDataProvidersFileImport,
         UsageStatisticsDataProvidersCounterLogs,
         UsageStatisticsDataProviderDetails,
+        UsageStatisticsProviderDataList,
     },
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsProviderDataList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsProviderDataList.vue
new file mode 100644
index 0000000000..2f4d8ee1c3
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsProviderDataList.vue
@@ -0,0 +1,163 @@
+<template>
+    <div v-if="!initialized">{{ $__("Loading") }}</div>
+    <div v-else id="data_list">
+        <div v-if="data_count > 0" class="page-section">
+            <KohaTable ref="table" v-bind="tableOptions"></KohaTable>
+        </div>
+        <div v-else-if="initialized" class="dialog message">
+            {{
+                $__(`No ${data_type} data has been harvested for this provider`)
+            }}
+        </div>
+    </div>
+</template>
+
+<script>
+import { APIClient } from "../../fetch/api-client.js"
+import { ref } from "vue"
+import KohaTable from "../KohaTable.vue"
+
+export default {
+    setup() {
+        const table = ref()
+
+        return {
+            table,
+        }
+    },
+    data() {
+        return {
+            data_count: 0,
+            initialized: false,
+            before_route_entered: false,
+            building_table: false,
+            tableOptions: {
+                columns: this.getTableColumns(),
+                options: {},
+                url: () => this.table_url(),
+                table_settings: this.title_table_settings,
+                add_filters: true,
+            },
+        }
+    },
+    methods: {
+        async getData() {
+            const client = APIClient.erm
+            await client[`usage_${this.data_type}s`]
+                .count({
+                    usage_data_provider_id:
+                        this.$route.params.usage_data_provider_id,
+                })
+                .then(
+                    count => {
+                        this.data_count = count
+                        this.initialized = true
+                    },
+                    error => {}
+                )
+        },
+        table_url() {
+            let url = `/api/v1/erm/usage_${this.data_type}s?usage_data_provider_id=${this.$route.params.usage_data_provider_id}`
+            return url
+        },
+        getTableColumns() {
+            const column_options = [
+                {
+                    used_by: ["title", "platform", "item", "database"],
+                    column: {
+                        title: __(
+                            this.data_type.charAt(0).toUpperCase() +
+                                this.data_type.slice(1)
+                        ),
+                        data: this.data_type,
+                        searchable: true,
+                        orderable: true,
+                    },
+                },
+                {
+                    used_by: ["item", "database", "platforms"],
+                    column: {
+                        title: "Platform",
+                        data: "platform",
+                        searchable: true,
+                        orderable: true,
+                    },
+                },
+                {
+                    used_by: ["title", "item", "database"],
+                    column: {
+                        title: "Publisher",
+                        data: "publisher",
+                        searchable: true,
+                        orderable: true,
+                    },
+                },
+                {
+                    used_by: ["title", "database"],
+                    column: {
+                        title: "Publisher ID",
+                        data: "publisher_id",
+                        searchable: true,
+                        orderable: true,
+                    },
+                },
+                {
+                    used_by: ["title"],
+                    column: {
+                        title: "DOI",
+                        data: "title_doi",
+                        searchable: true,
+                        orderable: true,
+                    },
+                },
+                {
+                    used_by: ["title"],
+                    column: {
+                        title: "Print ISSN",
+                        data: "print_issn",
+                        searchable: true,
+                        orderable: true,
+                    },
+                },
+                {
+                    used_by: ["title"],
+                    column: {
+                        title: "Online ISSN",
+                        data: "online_issn",
+                        searchable: true,
+                        orderable: true,
+                    },
+                },
+                {
+                    used_by: ["title"],
+                    column: {
+                        title: "URI",
+                        data: "title_uri",
+                        searchable: true,
+                        orderable: true,
+                    },
+                },
+            ]
+            const columns = column_options
+                .filter(column => column.used_by.includes(this.data_type))
+                .map(result => result.column)
+            return columns
+        },
+    },
+    mounted() {
+        if (!this.building_table) {
+            this.building_table = true
+            this.getData()
+        }
+    },
+    props: ["data_type"],
+    components: { KohaTable },
+    name: "UsageStatisticsProviderDataList",
+}
+</script>
+
+<style scoped>
+#title_list {
+    display: table;
+}
+</style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsTitlesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsTitlesList.vue
deleted file mode 100644
index 0f2a8b3a1c..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UsageStatisticsTitlesList.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-    <div v-if="!initialized">{{ $__("Loading") }}</div>
-    <div v-else id="titles_list">
-        <div v-if="titles_count > 0" class="page-section">
-            <KohaTable ref="table" v-bind="tableOptions"></KohaTable>
-        </div>
-        <div v-else-if="initialized" class="dialog message">
-            {{ $__("No title data has been harvested for this provider") }}
-        </div>
-    </div>
-</template>
-
-<script>
-import { APIClient } from "../../fetch/api-client.js"
-import { ref } from "vue"
-import KohaTable from "../KohaTable.vue"
-
-export default {
-    setup() {
-        const table = ref()
-
-        return {
-            table,
-        }
-    },
-    data: function () {
-        return {
-            titles_count: 0,
-            initialized: false,
-            before_route_entered: false,
-            building_table: false,
-            tableOptions: {
-                columns: this.getTableColumns(),
-                options: {},
-                url: () => this.table_url(),
-                table_settings: this.title_table_settings,
-                add_filters: true,
-            },
-        }
-    },
-    methods: {
-        async getTitles() {
-            const client = APIClient.erm
-            await client.usage_titles
-                .count({
-                    usage_data_provider_id:
-                        this.$route.params.usage_data_provider_id,
-                })
-                .then(
-                    count => {
-                        this.titles_count = count
-                        this.initialized = true
-                    },
-                    error => {}
-                )
-        },
-        table_url() {
-            let url = `/api/v1/erm/usage_titles?usage_data_provider_id=${this.$route.params.usage_data_provider_id}`
-            return url
-        },
-        getTableColumns() {
-            return [
-                {
-                    title: __("Title"),
-                    data: "title",
-                    searchable: true,
-                    orderable: true,
-                },
-                {
-                    title: __("Publisher"),
-                    data: "publisher",
-                    searchable: true,
-                    orderable: true,
-                },
-                {
-                    title: __("Publisher ID"),
-                    data: "publisher_id",
-                    searchable: true,
-                    orderable: true,
-                },
-                {
-                    title: __("DOI"),
-                    data: "title_doi",
-                    searchable: true,
-                    orderable: true,
-                },
-                {
-                    title: __("Print ISSN"),
-                    data: "print_issn",
-                    searchable: true,
-                    orderable: true,
-                },
-                {
-                    title: __("Online ISSN"),
-                    data: "online_issn",
-                    searchable: true,
-                    orderable: true,
-                },
-                {
-                    title: __("URI"),
-                    data: "title_uri",
-                    searchable: true,
-                    orderable: true,
-                },
-            ]
-        },
-    },
-    mounted() {
-        if (!this.building_table) {
-            this.building_table = true
-            this.getTitles()
-        }
-    },
-    components: { KohaTable },
-    name: "UsageStatisticsTitlesList",
-}
-</script>
-
-<style scoped>
-#title_list {
-    display: table;
-}
-</style>
-- 
2.39.5