koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlePackagesList.vue

   1 <template>
   2     <div id="package_list_result">
   3         <table id="package_list"></table>
   4     </div>
   5 </template>
   6
   7 <script>
   8
   9 import { createVNode, render } from 'vue'
  10
  11 export default {
  12     setup() {
  13         return {
  14         }
  15     },
  16     data() {
  17         return {
  18         }
  19     },
  20     methods: {
  21         show_resource: function (resource_id) {
  22             this.$router.push("/cgi-bin/koha/erm/eholdings/local/resources/" + resource_id)
  23         },
  24         build_datatable: function () {
  25             let show_resource = this.show_resource
  26             let resources = this.resources
  27
  28             $('#package_list').dataTable($.extend(true, {}, dataTablesDefaults, {
  29                 data: resources,
  30                 embed: ['package.name'],
  31                 order: [[0, "asc"]],
  32                 autoWidth: false,
  33                 columns: [
  34                     {
  35                         title: __("Name"),
  36                         data: "package.name",
  37                         searchable: true,
  38                         orderable: true,
  39                         render: function (data, type, row, meta) {
  40                             // Rendering done in drawCallback
  41                             return ""
  42                         },
  43                         width: '100%',
  44                     },
  45                 ],
  46                 drawCallback: function (settings) {
  47
  48                     var api = new $.fn.dataTable.Api(settings)
  49
  50                     $.each($(this).find("tbody tr td:first-child"), function (index, e) {
  51                         let row = api.row(index).data()
  52                         if (!row) return // Happen if the table is empty
  53                         let n = createVNode("a", {
  54                             role: "button",
  55                             href: "/cgi-bin/koha/erm/eholdings/local/resources/" + row.resource_id,
  56                             onClick: (e) => {
  57                                 e.preventDefault()
  58                                 show_resource(row.resource_id)
  59                             }
  60                         },
  61                             `${row.package.name}`
  62                         )
  63                         render(n, e)
  64                     })
  65                 },
  66             }))
  67         },
  68     },
  69     mounted() {
  70         this.build_datatable()
  71     },
  72     beforeUnmount() {
  73         if ($.fn.DataTable.isDataTable('#package_list')) {
  74             $('#package_list')
  75                 .DataTable()
  76                 .destroy(true)
  77         }
  78     },
  79     props: {
  80         resources: Array,
  81     },
  82     name: 'EHoldingsLocalTitlePackagesList',
  83 }
  84 </script>
  85
  86 <style scoped>
  87 #package_list_result {
  88     width: 60%;
  89     padding-left: 26rem;
  90 }
  91 #package_list {
  92     display: table;
  93 }
  94 </style>