From d4209b39b2e58dd4e4154ce483b8245106c5470a Mon Sep 17 00:00:00 2001 From: Jonathan Druart <jonathan.druart@bugs.koha-community.org> Date: Tue, 7 Mar 2023 21:03:39 +0100 Subject: [PATCH] Bug 33066: Use KohaTable for EHoldingsLocalPackagesList --- .../ERM/EHoldingsLocalPackagesList.vue | 343 ++++++------------ 1 file changed, 114 insertions(+), 229 deletions(-) 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 9fd12f73236..5e164c2cb73 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 @@ -8,7 +8,13 @@ id="package_list_result" class="page-section" > - <table :id="table_id"></table> + <KohaTable + ref="table" + v-bind="tableOptions" + @show="doShow" + @edit="doEdit" + @delete="doDelete" + ></KohaTable> </div> <div v-else-if="initialized" class="dialog message"> {{ $__("There are no packages defined") }} @@ -19,10 +25,11 @@ <script> import Toolbar from "./EHoldingsLocalPackagesToolbar.vue" -import { inject, createVNode, render } from "vue" +import { inject, ref } from "vue" import { storeToRefs } from "pinia" import { APIClient } from "../../fetch/api-client.js" import { useDataTable } from "../../composables/datatables" +import KohaTable from "../KohaTable.vue" export default { setup() { @@ -34,31 +41,49 @@ export default { const { setConfirmationDialog, setMessage } = inject("mainStore") - const table_id = "package_list" - useDataTable(table_id) + const table = ref() return { vendors, get_lib_from_av, map_av_dt_filter, - table_id, + table, setConfirmationDialog, setMessage, + escape_str, + eholdings_packages_table_settings, } }, data: function () { return { package_count: [], initialized: false, - filters: { - package_name: this.$route.query.package_name || "", - content_type: this.$route.query.content_type || "", + tableOptions: { + columns: this.getTableColumns(), + url: "/api/v1/erm/eholdings/local/packages", + options: { embed: "resources+count,vendor.name" }, + table_settings: this.eholdings_packages_table_settings, + add_filters: true, + filters_options: { + 1: () => + this.vendors.map(e => { + e["_id"] = e["id"] + e["_str"] = e["name"] + return e + }), + 2: () => this.map_av_dt_filter("av_package_types"), + 3: () => this.map_av_dt_filter("av_package_content_types"), + }, + actions: { + 0: ["show"], + "-1": ["edit", "delete"], + }, }, } }, beforeRouteEnter(to, from, next) { next(vm => { - vm.getPackageCount().then(() => vm.build_datatable()) + vm.getPackageCount().then(() => (vm.initialized = true)) }) }, methods: { @@ -67,268 +92,128 @@ export default { await client.localPackages.count().then( count => { this.package_count = count - this.initialized = true }, error => {} ) }, - show_package: function (package_id) { + doShow: function (erm_package, dt, event) { + event.preventDefault() this.$router.push( - "/cgi-bin/koha/erm/eholdings/local/packages/" + package_id + "/cgi-bin/koha/erm/eholdings/local/packages/" + + erm_package.package_id ) }, - edit_package: function (package_id) { + doEdit: function (erm_package, dt, event) { this.$router.push( - "/cgi-bin/koha/erm/eholdings/local/packages/edit/" + package_id + "/cgi-bin/koha/erm/eholdings/local/packages/edit/" + + erm_package.package_id ) }, - delete_package: function (package_id, package_name) { + doDelete: function (erm_package, dt, event) { this.setConfirmationDialog( { title: this.$__( "Are you sure you want to remove this package?" ), - message: package_name, + message: erm_package.name, accept_label: this.$__("Yes, delete"), cancel_label: this.$__("No, do not delete"), }, () => { const client = APIClient.erm - client.localPackages.delete(package_id).then( + client.localPackages.delete(erm_package.package_id).then( success => { this.setMessage( this.$__("Local package %s deleted").format( - package_name + erm_package.name ), true ) - $("#" + this.table_id) - .DataTable() - .ajax.url( - "/api/v1/erm/eholdings/local/packages" - ) - .draw() + dt.draw() }, error => {} ) } ) }, - build_datatable: function () { - let show_package = this.show_package - let edit_package = this.edit_package - let delete_package = this.delete_package + getTableColumns: function () { let get_lib_from_av = this.get_lib_from_av - let map_av_dt_filter = this.map_av_dt_filter - let filters = this.filters - let table_id = this.table_id - - window["vendors"] = this.vendors.map(e => { - e["_id"] = e["id"] - e["_str"] = e["name"] - return e - }) - let avs = ["av_package_types", "av_package_content_types"] - avs.forEach(function (av_cat) { - window[av_cat] = map_av_dt_filter(av_cat) - }) - - $("#" + table_id).kohaTable( + let escape_str = this.escape_str + return [ { - ajax: { - url: "/api/v1/erm/eholdings/local/packages", + title: __("Name"), + data: "me.package_id:me.name", + searchable: true, + orderable: true, + render: function (data, type, row, meta) { + return ( + '<a href="/cgi-bin/koha/erm/eholdings/local/packages/' + + row.package_id + + '" class="show">' + + escape_str(row.name) + + "</a>" + ) }, - embed: ["resources+count", "vendor.name"], - order: [[0, "asc"]], - autoWidth: false, - searchCols: [ - { search: filters.package_name }, - null, - null, - { search: filters.content_type }, - null, - null, - ], - columns: [ - { - title: __("Name"), - data: "me.package_id:me.name", - searchable: true, - orderable: true, - render: function (data, type, row, meta) { - // Rendering done in drawCallback - return "" - }, - }, - { - title: __("Vendor"), - data: "vendor_id", - searchable: true, - orderable: true, - render: function (data, type, row, meta) { - return row.vendor - ? escape_str(row.vendor.name) - : "" - }, - }, - { - title: __("Type"), - data: "package_type", - searchable: true, - orderable: true, - render: function (data, type, row, meta) { - return escape_str( - get_lib_from_av( - "av_package_types", - row.package_type - ) - ) - }, - }, - { - title: __("Content type"), - data: "content_type", - searchable: true, - orderable: true, - render: function (data, type, row, meta) { - return escape_str( - get_lib_from_av( - "av_package_content_types", - row.content_type - ) - ) - }, - }, - { - title: __("Created on"), - data: "created_on", - searchable: false, - orderable: true, - render: function (data, type, row, meta) { - return $date(row.created_on) - }, - }, - { - title: __("Notes"), - data: "notes", - searchable: true, - orderable: true, - render: function (data, type, row, meta) { - return row.notes - }, - }, - { - title: __("Actions"), - data: function (row, type, val, meta) { - return '<div class="actions"></div>' - }, - className: "actions noExport", - searchable: false, - orderable: false, - }, - ], - drawCallback: function (settings) { - var api = new $.fn.dataTable.Api(settings) - - $.each( - $(this).find("td .actions"), - function (index, e) { - let tr = $(this).parent().parent() - let package_id = api.row(tr).data().package_id - let package_name = api.row(tr).data().name - let editButton = createVNode( - "a", - { - class: "btn btn-default btn-xs", - role: "button", - onClick: () => { - edit_package(package_id) - }, - }, - [ - createVNode("i", { - class: "fa fa-pencil", - "aria-hidden": "true", - }), - __("Edit"), - ] - ) - - let deleteButton = createVNode( - "a", - { - class: "btn btn-default btn-xs", - role: "button", - onClick: () => { - delete_package( - package_id, - package_name - ) - }, - }, - [ - createVNode("i", { - class: "fa fa-trash", - "aria-hidden": "true", - }), - __("Delete"), - ] - ) - - let n = createVNode("span", {}, [ - editButton, - " ", - deleteButton, - ]) - render(n, e) - } + }, + { + title: __("Vendor"), + data: "vendor_id", + searchable: true, + orderable: true, + render: function (data, type, row, meta) { + return row.vendor ? escape_str(row.vendor.name) : "" + }, + }, + { + title: __("Type"), + data: "package_type", + searchable: true, + orderable: true, + render: function (data, type, row, meta) { + return escape_str( + get_lib_from_av( + "av_package_types", + row.package_type + ) ) - - $.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/packages/" + - row.package_id, - onClick: e => { - e.preventDefault() - show_package(row.package_id) - }, - }, - `${row.name} (#${row.package_id})` - ) - render(n, e) - } + }, + }, + { + title: __("Content type"), + data: "content_type", + searchable: true, + orderable: true, + render: function (data, type, row, meta) { + return escape_str( + get_lib_from_av( + "av_package_content_types", + row.content_type + ) ) }, - preDrawCallback: function (settings) { - $("#" + table_id) - .find("thead th") - .eq(1) - .attr("data-filter", "vendors") - $("#" + table_id) - .find("thead th") - .eq(2) - .attr("data-filter", "av_package_types") - $("#" + table_id) - .find("thead th") - .eq(3) - .attr("data-filter", "av_package_content_types") + }, + { + title: __("Created on"), + data: "created_on", + searchable: false, + orderable: true, + render: function (data, type, row, meta) { + return $date(row.created_on) + }, + }, + { + title: __("Notes"), + data: "notes", + searchable: true, + orderable: true, + render: function (data, type, row, meta) { + return row.notes }, }, - eholdings_packages_table_settings, - 1 - ) + ] }, }, - components: { Toolbar }, + components: { Toolbar, KohaTable }, name: "EHoldingsLocalPackagesList", } </script> -- 2.25.1