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

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