From c036f58eebc52aa154298ee3944e67aaa214a399 Mon Sep 17 00:00:00 2001 From: Jonathan Druart Date: Thu, 14 Jul 2022 10:58:58 +0200 Subject: [PATCH] Bug 32030: Use composable for DT destroy Use the Composition API to have this destroy code in a single place. Signed-off-by: Jonathan Field Signed-off-by: Martin Renvoize Signed-off-by: Kyle M Hall Signed-off-by: Tomas Cohen Arazi --- .../js/vue/components/ERM/AgreementsList.vue | 112 +++++++++--------- .../ERM/EHoldingsEBSCOPackageTitlesList.vue | 17 +-- .../ERM/EHoldingsEBSCOPackagesList.vue | 19 ++- .../ERM/EHoldingsEBSCOTitlePackagesList.vue | 19 ++- .../ERM/EHoldingsEBSCOTitlesList.vue | 20 ++-- .../ERM/EHoldingsEBSCOTitlesShow.vue | 2 +- .../ERM/EHoldingsLocalPackageTitlesList.vue | 21 ++-- .../ERM/EHoldingsLocalPackagesList.vue | 18 ++- .../ERM/EHoldingsLocalTitlePackagesList.vue | 17 ++- .../ERM/EHoldingsLocalTitlesList.vue | 18 ++- .../ERM/EHoldingsLocalTitlesShow.vue | 2 +- .../js/vue/components/ERM/LicensesList.vue | 100 ++++++++-------- .../prog/js/vue/composables/datatables.js | 11 ++ 13 files changed, 186 insertions(+), 190 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/composables/datatables.js diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue index 778d0d35bf..73a3411749 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue @@ -2,7 +2,7 @@
{{ $t("Loading") }}
-
+
{{ $t("There are no agreements defined") }}
@@ -16,6 +16,7 @@ import { useVendorStore } from "../../stores/vendors" import { useAVStore } from "../../stores/authorised_values" import { storeToRefs } from "pinia" import { fetchAgreements } from "../../fetch" +import { useDataTable } from "../../composables/datatables" export default { setup() { @@ -25,11 +26,15 @@ export default { const AVStore = useAVStore() const { av_agreement_statuses, av_agreement_closure_reasons, av_agreement_renewal_priorities } = storeToRefs(AVStore) + const table_id = "agreement_list" + useDataTable(table_id) + return { vendors, av_agreement_statuses, av_agreement_closure_reasons, av_agreement_renewal_priorities, + table_id, } }, data: function () { @@ -75,6 +80,7 @@ export default { let select_agreement = this.select_agreement let default_search = this.$route.query.q let actions = this.before_route_entered ? 'edit_delete' : 'select' + let table_id = this.table_id window['vendors'] = this.vendors.map(e => { e['_id'] = e['id'] @@ -114,92 +120,92 @@ export default { }, {}) window['av_agreement_is_perpetual'] = [{ _id: 0, _str: _('No') }, { _id: 1, _str: _("Yes") }] - const table = $('#agreement_list').kohaTable({ - "ajax": { - "url": "/api/v1/erm/agreements", + const table = $("#" + table_id).kohaTable({ + ajax: { + url: "/api/v1/erm/agreements", }, - "order": [[0, "asc"]], + order: [[0, "asc"]], autoWidth: false, - "search": { search: default_search }, - "columnDefs": [{ - "targets": [0, 2], - "render": function (data, type, row, meta) { + search: { search: default_search }, + columnDefs: [{ + targets: [0, 2], + render: function (data, type, row, meta) { if (type == 'display') { return escape_str(data) } return data } }], - "columns": [ + columns: [ { - "title": __("Name"), - "data": "me.agreement_id:me.name", - "searchable": true, - "orderable": true, - "render": function (data, type, row, meta) { + title: __("Name"), + data: "me.agreement_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) { + title: __("Vendor"), + data: "vendor_id", + searchable: true, + orderable: true, + render: function (data, type, row, meta) { return row.vendor_id != undefined ? escape_str(vendors_map[row.vendor_id].name) : "" } }, { - "title": __("Description"), - "data": "description", - "searchable": true, - "orderable": true + title: __("Description"), + data: "description", + searchable: true, + orderable: true }, { - "title": __("Status"), - "data": "status", - "searchable": true, - "orderable": true, - "render": function (data, type, row, meta) { + title: __("Status"), + data: "status", + searchable: true, + orderable: true, + render: function (data, type, row, meta) { return escape_str(av_agreement_statuses_map[row.status].lib) } }, { - "title": __("Closure reason"), - "data": "closure_reason", - "searchable": true, - "orderable": true, - "render": function (data, type, row, meta) { + title: __("Closure reason"), + data: "closure_reason", + searchable: true, + orderable: true, + render: function (data, type, row, meta) { return row.closure_reason != undefined && row.closure_reason != "" ? escape_str(av_agreement_closure_reasons_map[row.closure_reason].lib) : "" } }, { - "title": __("Is perpetual"), - "data": "is_perpetual", - "searchable": true, - "orderable": true, - "render": function (data, type, row, meta) { + title: __("Is perpetual"), + data: "is_perpetual", + searchable: true, + orderable: true, + render: function (data, type, row, meta) { return escape_str(row.is_perpetual ? _("Yes") : _("No")) } }, { - "title": __("Renewal priority"), - "data": "renewal_priority", - "searchable": true, - "orderable": true, - "render": function (data, type, row, meta) { + title: __("Renewal priority"), + data: "renewal_priority", + searchable: true, + orderable: true, + render: function (data, type, row, meta) { return row.renewal_priority != undefined && row.renewal_priority != "" ? escape_str(av_agreement_renewal_priorities_map[row.renewal_priority].lib) : "" } }, { - "title": __("Actions"), - "data": function (row, type, val, meta) { + title: __("Actions"), + data: function (row, type, val, meta) { return '
' }, - "className": "actions noExport", - "searchable": false, - "orderable": false + className: "actions noExport", + searchable: false, + orderable: false } ], drawCallback: function (settings) { @@ -256,7 +262,6 @@ export default { }) }, preDrawCallback: function (settings) { - var table_id = settings.nTable.id $("#" + table_id).find("thead th").eq(1).attr('data-filter', 'vendors') $("#" + table_id).find("thead th").eq(3).attr('data-filter', 'av_agreement_statuses') $("#" + table_id).find("thead th").eq(4).attr('data-filter', 'av_agreement_closure_reasons') @@ -273,13 +278,6 @@ export default { this.getAgreements().then(() => this.build_datatable()) } }, - beforeUnmount() { - if ($.fn.DataTable.isDataTable('#agreement_list')) { - $('#agreement_list') - .DataTable() - .destroy(true) - } - }, components: { Toolbar }, name: "AgreementsList", emits: ["select-agreement", "close"], diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOPackageTitlesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOPackageTitlesList.vue index 5fa644546a..f66a95a72d 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOPackageTitlesList.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOPackageTitlesList.vue @@ -53,7 +53,7 @@ />
-
+
@@ -62,6 +62,7 @@ import { createVNode, render } from 'vue' import { useAVStore } from "../../stores/authorised_values" import { storeToRefs } from "pinia" +import { useDataTable } from "../../composables/datatables" export default { setup() { @@ -69,9 +70,13 @@ export default { const { av_title_publication_types } = storeToRefs(AVStore) const { get_lib_from_av } = AVStore + const table_id = "title_list" + useDataTable(table_id) + return { av_title_publication_types, get_lib_from_av, + table_id, } }, data() { @@ -89,7 +94,7 @@ export default { this.$router.push("/cgi-bin/koha/erm/eholdings/ebsco/resources/" + resource_id) }, filter_table: function () { - $("#title_list").DataTable().draw() + $('#' + this.table_id).DataTable().draw() }, toggle_filters: function (e) { this.display_filters = !this.display_filters @@ -99,6 +104,7 @@ export default { let package_id = this.package_id let get_lib_from_av = this.get_lib_from_av let filters = this.filters + let table_id = this.table_id window['av_title_publication_types'] = this.av_title_publication_types.map(e => { e['_id'] = e['authorised_value'] @@ -118,7 +124,7 @@ export default { }, } - $('#title_list').kohaTable({ + $('#' + table_id).kohaTable({ ajax: { url: "/api/v1/erm/eholdings/ebsco/packages/" + package_id + "/resources", }, @@ -177,11 +183,6 @@ export default { mounted() { this.build_datatable() }, - beforeUnmount() { - $('#title_list') - .DataTable() - .destroy(true) - }, props: { package_id: String, }, diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOPackagesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOPackagesList.vue index 458d54d823..2afc8824d9 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOPackagesList.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOPackagesList.vue @@ -53,7 +53,7 @@ >
-
+
@@ -65,6 +65,7 @@ import { useVendorStore } from "../../stores/vendors" import { useAVStore } from "../../stores/authorised_values" import { storeToRefs } from "pinia" import { fetchCountLocalPackages } from './../../fetch' +import { useDataTable } from "../../composables/datatables" export default { setup() { @@ -75,12 +76,16 @@ export default { const { av_package_types, av_package_content_types } = storeToRefs(AVStore) const { get_lib_from_av } = AVStore + const table_id = "package_list" + useDataTable(table_id) + return { vendors, av_package_types, av_package_content_types, get_lib_from_av, erm_providers, + table_id, } }, data: function () { @@ -123,7 +128,7 @@ export default { this.$router.push(new_route) this.show_table = true this.local_count_packages = null - $("#package_list").DataTable().draw() + $('#'+this.table_id).DataTable().draw() if (this.erm_providers.includes('local')) { this.local_count_packages = await fetchCountLocalPackages(this.filters) } @@ -136,6 +141,7 @@ export default { } let filters = this.filters let show_table = this.show_table + let table_id = this.table_id window['vendors'] = this.vendors.map(e => { e['_id'] = e['id'] @@ -165,7 +171,7 @@ export default { }, } - $('#package_list').kohaTable({ + $('#'+table_id).kohaTable({ ajax: { url: "/api/v1/erm/eholdings/ebsco/packages", }, @@ -242,13 +248,6 @@ export default { } }, }, - beforeUnmount() { - if ($.fn.DataTable.isDataTable('#package_list')) { - $('#package_list') - .DataTable() - .destroy(true) - } - }, name: "EHoldingsEBSCOPackagesList", } diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOTitlePackagesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOTitlePackagesList.vue index 70e5d16e2d..9f65ba6825 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOTitlePackagesList.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOTitlePackagesList.vue @@ -36,17 +36,22 @@ /> -
+
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOTitlesShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOTitlesShow.vue index a4dadd6d59..89671eac46 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOTitlesShow.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOTitlesShow.vue @@ -1,6 +1,6 @@