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

   1 <template>
   2     <div id="package_list_result">
   3         <div id="filters">
   4             <a href="#" @click.prevent="toggle_filters($event)"
   5                 ><i class="fa fa-search"></i>
   6                 {{ display_filters ? $t("Hide filters") : $t("Show filters") }}
   7             </a>
   8             <fieldset v-if="display_filters" id="filters">
   9                 <ol>
  10                     <li>
  11                         <label>{{ $t("Package name") }}:</label>
  12                         <input
  13                             type="text"
  14                             id="package_name_filter"
  15                             v-model="this.filters.package_name"
  16                             @keyup.enter="filter_table"
  17                         />
  18                     </li>
  19                     <li>
  20                         <label>{{ $t("Selection status") }}:</label>
  21                         <select
  22                             id="selection_type_filter"
  23                             v-model="this.filters.selection_type"
  24                         >
  25                             <option value="0">{{ $t("All") }}</option>
  26                             <option value="1">{{ $t("Selected") }}</option>
  27                             <option value="2">{{ $t("Not selected") }}</option>
  28                         </select>
  29                     </li>
  30                 </ol>
  31                 <input
  32                     @click="filter_table"
  33                     id="filter_table"
  34                     type="button"
  35                     :value="$t('Filter')"
  36                 />
  37             </fieldset>
  38         </div>
  39         <table id="package_list"></table>
  40     </div>
  41 </template>
  42
  43 <script>
  44
  45 import { createVNode, render } from 'vue'
  46
  47 export default {
  48     setup() {
  49         return {
  50         }
  51     },
  52     data() {
  53         return {
  54             filters: {
  55                 package_name: "",
  56                 selection_type: 0,
  57             },
  58             display_filters: false,
  59         }
  60     },
  61     methods: {
  62         show_resource: function (resource_id) {
  63             this.$router.push("/cgi-bin/koha/erm/eholdings/ebsco/resources/" + resource_id)
  64         },
  65         toggle_filters: function (e) {
  66             this.display_filters = !this.display_filters
  67         },
  68         filter_table: function () {
  69             $("#package_list").DataTable().draw()
  70         },
  71         build_datatable: function () {
  72             let show_resource = this.show_resource
  73             let resources = this.resources
  74             let filters = this.filters
  75
  76             $.fn.dataTable.ext.search = $.fn.dataTable.ext.search.filter((search) => search.name != 'apply_filter')
  77             $('#package_list').dataTable($.extend(true, {}, dataTablesDefaults, {
  78                 data: resources,
  79                 embed: ['package.name'],
  80                 ordering: false,
  81                 dom: '<"top pager"<"table_entries"ilp>>tr<"bottom pager"ip>',
  82                 aLengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
  83                 autoWidth: false,
  84                 columns: [
  85                     {
  86                         title: __("Name"),
  87                         data: "package.name",
  88                         searchable: false,
  89                         orderable: false,
  90                         render: function (data, type, row, meta) {
  91                             // Rendering done in drawCallback
  92                             return ""
  93                         },
  94                         width: '100%',
  95                     },
  96                 ],
  97                 drawCallback: function (settings) {
  98
  99                     var api = new $.fn.dataTable.Api(settings)
 100
 101                     if (!api.rows({ search: 'applied' }).count()) return
 102
 103                     $.each($(this).find("tbody tr td:first-child"), function (index, e) {
 104                         let row = api.row(index).data()
 105                         if (!row) return // Happen if the table is empty
 106                         let n = createVNode("a", {
 107                             role: "button",
 108                             href: "/cgi-bin/koha/erm/eholdings/ebsco/resources/" + row.resource_id,
 109                             onClick: (e) => {
 110                                 e.preventDefault()
 111                                 show_resource(row.resource_id)
 112                             }
 113                         },
 114                             `${row.package.name}`
 115                         )
 116                         if (row.is_selected) {
 117                             n = createVNode('span', {}, [n, " ", createVNode("i", { class: "fa fa-check-square-o", style: { color: "green" }, title: __("Is selected") })])
 118                         }
 119                         render(n, e)
 120                     })
 121                 },
 122                 initComplete: function () {
 123                     $.fn.dataTable.ext.search.push(
 124                         function apply_filter(settings, data, dataIndex, row) {
 125                             return row.package.name.match(new RegExp(filters.package_name, "i"))
 126                                 && (filters.selection_type == 0
 127                                     || filters.selection_type == 1 && row.is_selected
 128                                     || filters.selection_type == 2 && !row.is_selected)
 129                         }
 130                     )
 131                 }
 132             }))
 133         }
 134     },
 135     mounted() {
 136         this.build_datatable()
 137     },
 138     beforeUnmount() {
 139         $('#package_list')
 140             .DataTable()
 141             .destroy(true)
 142     },
 143     props: {
 144         resources: Array,
 145     },
 146     name: 'EHoldingsEBSCOTitlePackagesList',
 147 }
 148 </script>
 149
 150 <style scoped>
 151 #package_list_result {
 152     width: 60%;
 153     padding-left: 26rem;
 154 }
 155 #package_list {
 156     display: table;
 157 }
 158 #filters fieldset {
 159     margin: 0;
 160 }
 161 </style>