From 8452dcc92967f24f29c0ed63c53b1d95af279faa Mon Sep 17 00:00:00 2001 From: Jonathan Druart Date: Thu, 7 Jul 2022 09:49:42 +0200 Subject: [PATCH] Bug 32030: Restore destroy of datatables on beforeUnmount Otherwise the DT's headers where duplicated. We must destroy DT when we unmount the component. Edit: Hum maybe not! Looks like the bug still exists if `yarn build_js` is used instead of `yarn watch_js`! Signed-off-by: Jonathan Field Signed-off-by: Martin Renvoize Signed-off-by: Kyle M Hall Signed-off-by: Tomas Cohen Arazi --- .../ERM/EHoldingsEBSCOPackagesList.vue | 11 +- .../ERM/EHoldingsEBSCOTitlesList.vue | 7 + .../ERM/EHoldingsLocalPackagesList.vue | 14 +- .../ERM/EHoldingsLocalTitlesList.vue | 7 + .../js/vue/components/ERM/LicensesList.vue | 313 +++++++++--------- 5 files changed, 188 insertions(+), 164 deletions(-) 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 25e2a957d3..2f437697a8 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 @@ -44,9 +44,7 @@ local_count_packages !== null " > - + {{ $t("{count} packages found locally", { count: local_count_packages, @@ -244,6 +242,13 @@ 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/EHoldingsEBSCOTitlesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOTitlesList.vue index cae6d63599..cc13a59719 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOTitlesList.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsEBSCOTitlesList.vue @@ -258,6 +258,13 @@ export default { } }, }, + beforeUnmount() { + if ( ! $.fn.DataTable.isDataTable( '#title_list' ) ) { + $('#title_list') + .DataTable() + .destroy(true) + } + }, name: "EHoldingsEBSCOTitlesList", } 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 94a9c9f742..b56613504a 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 @@ -3,7 +3,7 @@
{{ $t("Loading") }}
-
+
@@ -208,13 +208,15 @@ export default { $("#" + table_id).find("thead th").eq(3).attr('data-filter', 'av_package_content_types') } }, eholdings_packages_table_settings, 1) - - if (filters.package_name) { - //$("#package_list").DataTable().column(0).search(filters.package_name).draw() - } - //myTable.column(0).search(control_id).column(1).search(sample_id).draw(); }, }, + beforeUnmount() { + if (!$.fn.DataTable.isDataTable('#package_list')) { + $('#package_list') + .DataTable() + .destroy(true) + } + }, components: { Toolbar }, name: "EHoldingsLocalPackagesList", } diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesList.vue index e2c68416e8..045b2c051f 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesList.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesList.vue @@ -200,6 +200,13 @@ export default { }, eholdings_titles_table_settings, 1) }, }, + beforeUnmount() { + if (!$.fn.DataTable.isDataTable('#title_list')) { + $('#title_list') + .DataTable() + .destroy(true) + } + }, components: { Toolbar }, name: "EHoldingsLocalTitlesList", } diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue index 7bc77da64d..79b5a570d6 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue @@ -29,160 +29,6 @@ export default { av_license_statuses, } }, - updated() { - let show_license = this.show_license - let edit_license = this.edit_license - let delete_license = this.delete_license - let default_search = this.$route.query.q - - window['av_license_types'] = this.av_license_types.map(e => { - e['_id'] = e['authorised_value'] - e['_str'] = e['lib'] - return e - }) - let av_license_types_map = this.av_license_types.reduce((map, e) => { - map[e.authorised_value] = e - return map - }, {}) - window['av_license_statuses'] = this.av_license_statuses.map(e => { - e['_id'] = e['authorised_value'] - e['_str'] = e['lib'] - return e - }) - let av_license_statuses_map = this.av_license_statuses.reduce((map, e) => { - map[e.authorised_value] = e - return map - }, {}) - - $('#license_list').kohaTable({ - "ajax": { - "url": "/api/v1/erm/licenses", - }, - "order": [[0, "asc"]], - "search": { search: default_search }, - "columnDefs": [{ - "targets": [0, 1], - "render": function (data, type, row, meta) { - if (type == 'display') { - return escape_str(data) - } - return data - } - }], - "columns": [ - { - "title": __("Name"), - "data": "me.license_id:me.name", - "searchable": true, - "orderable": true, - "render": function (data, type, row, meta) { - // Rendering done in drawCallback - return ""; - } - }, - { - "title": __("Description"), - "data": "description", - "searchable": true, - "orderable": true - }, - { - "title": __("Type"), - "data": "type", - "searchable": true, - "orderable": true, - "render": function (data, type, row, meta) { - return escape_str(av_license_types_map[row.type].lib) - } - }, - { - "title": __("Status"), - "data": "status", - "searchable": true, - "orderable": true, - "render": function (data, type, row, meta) { - return escape_str(av_license_statuses_map[row.status].lib) - } - }, - { - "title": __("Started on"), - "data": "started_on", - "searchable": true, - "orderable": true, - "render": function (data, type, row, meta) { - return $date(row.started_on) - } - }, - { - "title": __("Ended on"), - "data": "ended_on", - "searchable": true, - "orderable": true, - "render": function (data, type, row, meta) { - return $date(row.ended_on) - } - }, - { - "title": __("Actions"), - "data": function (row, type, val, meta) { - return '
' - }, - "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 license_id = api.row(index).data().license_id - let editButton = createVNode("a", { - class: "btn btn-default btn-xs", role: "button", onClick: () => { - edit_license(license_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_license(license_id) - } - }, - [createVNode("i", { class: "fa fa-trash", 'aria-hidden': "true" }), __("Delete")]) - - let n = createVNode('span', {}, [editButton, " ", deleteButton]) - render(n, e) - }) - - $.each($(this).find("tbody tr td:first-child"), function (index, e) { - let row = api.row(index).data() - if (!row) return // Happen if the table is empty - let n = createVNode("a", { - role: "button", - onClick: () => { - show_license(row.license_id) - } - }, - `${row.name} (#${row.license_id})` - ) - render(n, e) - }) - }, - preDrawCallback: function (settings) { - var table_id = settings.nTable.id - $("#" + table_id).find("thead th").eq(2).attr('data-filter', 'av_license_types') - $("#" + table_id).find("thead th").eq(3).attr('data-filter', 'av_license_statuses') - } - - }, license_table_settings, 1) - }, - beforeUnmount() { - $('#license_list') - .DataTable() - .destroy(true) - }, data: function () { return { licenses: [], @@ -191,7 +37,7 @@ export default { }, beforeRouteEnter(to, from, next) { next(vm => { - vm.getLicenses() + vm.getLicenses().then(() => vm.build_datatable()) }) }, methods: { @@ -209,6 +55,163 @@ export default { delete_license: function (license_id) { this.$router.push("/cgi-bin/koha/erm/licenses/delete/" + license_id) }, + build_datatable: function () { + + let show_license = this.show_license + let edit_license = this.edit_license + let delete_license = this.delete_license + let default_search = this.$route.query.q + + window['av_license_types'] = this.av_license_types.map(e => { + e['_id'] = e['authorised_value'] + e['_str'] = e['lib'] + return e + }) + let av_license_types_map = this.av_license_types.reduce((map, e) => { + map[e.authorised_value] = e + return map + }, {}) + window['av_license_statuses'] = this.av_license_statuses.map(e => { + e['_id'] = e['authorised_value'] + e['_str'] = e['lib'] + return e + }) + let av_license_statuses_map = this.av_license_statuses.reduce((map, e) => { + map[e.authorised_value] = e + return map + }, {}) + + $('#license_list').kohaTable({ + "ajax": { + "url": "/api/v1/erm/licenses", + }, + "order": [[0, "asc"]], + "search": { search: default_search }, + "columnDefs": [{ + "targets": [0, 1], + "render": function (data, type, row, meta) { + if (type == 'display') { + return escape_str(data) + } + return data + } + }], + "columns": [ + { + "title": __("Name"), + "data": "me.license_id:me.name", + "searchable": true, + "orderable": true, + "render": function (data, type, row, meta) { + // Rendering done in drawCallback + return "" + } + }, + { + "title": __("Description"), + "data": "description", + "searchable": true, + "orderable": true + }, + { + "title": __("Type"), + "data": "type", + "searchable": true, + "orderable": true, + "render": function (data, type, row, meta) { + return escape_str(av_license_types_map[row.type].lib) + } + }, + { + "title": __("Status"), + "data": "status", + "searchable": true, + "orderable": true, + "render": function (data, type, row, meta) { + return escape_str(av_license_statuses_map[row.status].lib) + } + }, + { + "title": __("Started on"), + "data": "started_on", + "searchable": true, + "orderable": true, + "render": function (data, type, row, meta) { + return $date(row.started_on) + } + }, + { + "title": __("Ended on"), + "data": "ended_on", + "searchable": true, + "orderable": true, + "render": function (data, type, row, meta) { + return $date(row.ended_on) + } + }, + { + "title": __("Actions"), + "data": function (row, type, val, meta) { + return '
' + }, + "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 license_id = api.row(index).data().license_id + let editButton = createVNode("a", { + class: "btn btn-default btn-xs", role: "button", onClick: () => { + edit_license(license_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_license(license_id) + } + }, + [createVNode("i", { class: "fa fa-trash", 'aria-hidden': "true" }), __("Delete")]) + + let n = createVNode('span', {}, [editButton, " ", deleteButton]) + render(n, e) + }) + + $.each($(this).find("tbody tr td:first-child"), function (index, e) { + let row = api.row(index).data() + if (!row) return // Happen if the table is empty + let n = createVNode("a", { + role: "button", + onClick: () => { + show_license(row.license_id) + } + }, + `${row.name} (#${row.license_id})` + ) + render(n, e) + }) + }, + preDrawCallback: function (settings) { + var table_id = settings.nTable.id + $("#" + table_id).find("thead th").eq(2).attr('data-filter', 'av_license_types') + $("#" + table_id).find("thead th").eq(3).attr('data-filter', 'av_license_statuses') + } + + }, license_table_settings, 1) + }, + }, + beforeUnmount() { + if (!$.fn.DataTable.isDataTable('#license_list')) { + $('#license_list') + .DataTable() + .destroy(true) + } }, props: { av_license_types: Array,