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 <jonathan.field@ptfs-europe.com> Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com> Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
parent
c9fcfcd598
commit
8452dcc929
GPG key ID:
0A272EA1B2F3C15F
5 changed files with 188 additions and 164 deletions
|
|
@ -44,9 +44,7 @@
|
|||
local_count_packages !== null
|
||||
"
|
||||
>
|
||||
<router-link
|
||||
:to="local_packages_url"
|
||||
>
|
||||
<router-link :to="local_packages_url">
|
||||
{{
|
||||
$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",
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -258,6 +258,13 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
if ( ! $.fn.DataTable.isDataTable( '#title_list' ) ) {
|
||||
$('#title_list')
|
||||
.DataTable()
|
||||
.destroy(true)
|
||||
}
|
||||
},
|
||||
name: "EHoldingsEBSCOTitlesList",
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div v-if="!this.initialized">{{ $t("Loading") }}</div>
|
||||
<div v-else-if="this.packages" id="packages_list">
|
||||
<Toolbar />
|
||||
<div v-if="this.packages.length" id="package_list_result">
|
||||
<div v-if="packages.length" id="package_list_result">
|
||||
<table id="package_list"></table>
|
||||
</div>
|
||||
<div v-else-if="this.initialized" class="dialog message">
|
||||
|
|
@ -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",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 '<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 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 '<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 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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue