From 116bc6d38630c6fb37d9b9fb9cc8a2206cb16fed Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Wed, 8 Mar 2023 14:20:50 +0100
Subject: [PATCH] Bug 33066: Use KohaTable for EHoldingsLocalPackageTitlesList
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Pedro Amorim <pedro.amorim@ptfs-europe.com>

Signed-off-by: Agustín Moyano <agustinmoyano@theke.io>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../ERM/EHoldingsLocalPackageTitlesList.vue   | 146 +++++++-----------
 1 file changed, 57 insertions(+), 89 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageTitlesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageTitlesList.vue
index f325f41d00..5abc1a5816 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageTitlesList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageTitlesList.vue
@@ -1,128 +1,96 @@
 <template>
     <div id="title_list_result">
-        <table :id="table_id"></table>
+        <KohaTable ref="table" v-bind="tableOptions" @show="doShow"></KohaTable>
     </div>
 </template>
 
 <script>
-import { inject, createVNode, render } from "vue"
+import { inject, ref } from "vue"
 import { useDataTable } from "../../composables/datatables"
+import KohaTable from "../KohaTable.vue"
 
 export default {
     setup() {
         const AVStore = inject("AVStore")
         const { get_lib_from_av, map_av_dt_filter } = AVStore
 
-        const table_id = "title_list"
-        useDataTable(table_id)
-
+        const table = ref()
         return {
             get_lib_from_av,
             map_av_dt_filter,
-            table_id,
+            escape_str,
+            table,
         }
     },
     data() {
-        return {}
+        return {
+            tableOptions: {
+                columns: this.getTableColumns(),
+                url:
+                    "/api/v1/erm/eholdings/local/packages/" +
+                    this.package_id +
+                    "/resources",
+                options: { embed: "title" },
+                add_filters: true,
+                filters_options: {
+                    1: () =>
+                        this.map_av_dt_filter("av_title_publication_types"),
+                },
+                actions: {
+                    0: ["show"],
+                },
+            },
+        }
     },
     methods: {
-        show_resource: function (resource_id) {
+        doShow: function (resource, dt, event) {
+            event.preventDefault()
             this.$router.push(
-                "/cgi-bin/koha/erm/eholdings/local/resources/" + resource_id
+                "/cgi-bin/koha/erm/eholdings/local/resources/" +
+                    resource.resource_id
             )
         },
-        build_datatable: function () {
-            let show_resource = this.show_resource
-            let package_id = this.package_id
+        getTableColumns: function () {
             let get_lib_from_av = this.get_lib_from_av
-            let map_av_dt_filter = this.map_av_dt_filter
-            let table_id = this.table_id
+            let escape_str = this.escape_str
 
-            window["av_title_publication_types"] = map_av_dt_filter(
-                "av_title_publication_types"
-            )
-
-            $("#" + table_id).kohaTable(
+            return [
                 {
-                    ajax: {
-                        url:
-                            "/api/v1/erm/eholdings/local/packages/" +
-                            package_id +
-                            "/resources",
-                    },
-                    embed: ["title"],
-                    autoWidth: false,
-                    columns: [
-                        {
-                            title: __("Name"),
-                            data: "title.publication_title",
-                            searchable: true,
-                            orderable: true,
-                            render: function (data, type, row, meta) {
-                                // Rendering done in drawCallback
-                                return ""
-                            },
-                        },
-                        {
-                            title: __("Publication type"),
-                            data: "title.publication_type",
-                            searchable: true,
-                            orderable: true,
-                            render: function (data, type, row, meta) {
-                                return escape_str(
-                                    get_lib_from_av(
-                                        "av_title_publication_types",
-                                        row.title.publication_type
-                                    )
-                                )
-                            },
-                        },
-                    ],
-                    drawCallback: function (settings) {
-                        var api = new $.fn.dataTable.Api(settings)
-
-                        $.each(
-                            $(this).find("tbody tr td:first-child"),
-                            function (index, e) {
-                                let tr = $(this).parent()
-                                let row = api.row(tr).data()
-                                if (!row) return // Happen if the table is empty
-                                let n = createVNode(
-                                    "a",
-                                    {
-                                        role: "button",
-                                        href:
-                                            "/cgi-bin/koha/erm/eholdings/local/resources/" +
-                                            row.resource_id,
-                                        onClick: e => {
-                                            e.preventDefault()
-                                            show_resource(row.resource_id)
-                                        },
-                                    },
-                                    `${row.title.publication_title}`
-                                )
-                                render(n, e)
-                            }
+                    title: __("Name"),
+                    data: "title.publication_title",
+                    searchable: true,
+                    orderable: true,
+                    render: function (data, type, row, meta) {
+                        return (
+                            '<a href="/cgi-bin/koha/erm/eholdings/local/resources/' +
+                            row.resource_id +
+                            '" class="show">' +
+                            escape_str(row.title.publication_title) +
+                            "</a>"
                         )
                     },
-                    preDrawCallback: function (settings) {
-                        $("#" + table_id)
-                            .find("thead th")
-                            .eq(1)
-                            .attr("data-filter", "av_title_publication_types")
+                },
+                {
+                    title: __("Publication type"),
+                    data: "title.publication_type",
+                    searchable: true,
+                    orderable: true,
+                    render: function (data, type, row, meta) {
+                        return escape_str(
+                            get_lib_from_av(
+                                "av_title_publication_types",
+                                row.title.publication_type
+                            )
+                        )
                     },
                 },
-                null,
-                1
-            )
+            ]
         },
     },
-    mounted() {
-        this.build_datatable()
-    },
     props: {
         package_id: String,
     },
+    components: { KohaTable },
     name: "EHoldingsLocalPackageTitlesList",
 }
 </script>