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="table_id"></table>
  40     </div>
  41 </template>
  42
  43 <script>
  44
  45 import { createVNode, render } from 'vue'
  46 import { useDataTable } from "../../composables/datatables"
  47
  48 export default {
  49     setup() {
  50         const table_id = "package_list"
  51         useDataTable(table_id)
  52
  53         return {
  54             table_id,
  55         }
  56     },
  57     data() {
  58         return {
  59             filters: {
  60                 package_name: "",
  61                 selection_type: 0,
  62             },
  63             display_filters: false,
  64         }
  65     },
  66     methods: {
  67         show_resource: function (resource_id) {
  68             this.$router.push("/cgi-bin/koha/erm/eholdings/ebsco/resources/" + resource_id)
  69         },
  70         toggle_filters: function (e) {
  71             this.display_filters = !this.display_filters
  72         },
  73         filter_table: function () {
  74             $('#' + this.table_id).DataTable().draw()
  75         },
  76         build_datatable: function () {
  77             let show_resource = this.show_resource
  78             let resources = this.resources
  79             let filters = this.filters
  80             let table_id = this.table_id
  81
  82             $.fn.dataTable.ext.search = $.fn.dataTable.ext.search.filter((search) => search.name != 'apply_filter')
  83             $('#' + table_id).dataTable($.extend(true, {}, dataTablesDefaults, {
  84                 data: resources,
  85                 embed: ['package.name'],
  86                 ordering: false,
  87                 dom: '<"top pager"<"table_entries"ilp>>tr<"bottom pager"ip>',
  88                 aLengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
  89                 autoWidth: false,
  90                 columns: [
  91                     {
  92                         title: __("Name"),
  93                         data: "package.name",
  94                         searchable: false,
  95                         orderable: false,
  96                         render: function (data, type, row, meta) {
  97                             // Rendering done in drawCallback
  98                             return ""
  99                         },
 100                         width: '100%',
 101                     },
 102                 ],
 103                 drawCallback: function (settings) {
 104
 105                     var api = new $.fn.dataTable.Api(settings)
 106
 107                     if (!api.rows({ search: 'applied' }).count()) return
 108
 109                     $.each($(this).find("tbody tr td:first-child"), function (index, e) {
 110                         let row = api.row(index).data()
 111                         if (!row) return // Happen if the table is empty
 112                         let n = createVNode("a", {
 113                             role: "button",
 114                             href: "/cgi-bin/koha/erm/eholdings/ebsco/resources/" + row.resource_id,
 115                             onClick: (e) => {
 116                                 e.preventDefault()
 117                                 show_resource(row.resource_id)
 118                             }
 119                         },
 120                             `${row.package.name}`
 121                         )
 122                         if (row.is_selected) {
 123                             n = createVNode('span', {}, [n, " ", createVNode("i", { class: "fa fa-check-square-o", style: { color: "green" }, title: __("Is selected") })])
 124                         }
 125                         render(n, e)
 126                     })
 127                 },
 128                 initComplete: function () {
 129                     $.fn.dataTable.ext.search.push(
 130                         function apply_filter(settings, data, dataIndex, row) {
 131                             return row.package.name.match(new RegExp(filters.package_name, "i"))
 132                                 && (filters.selection_type == 0
 133                                     || filters.selection_type == 1 && row.is_selected
 134                                     || filters.selection_type == 2 && !row.is_selected)
 135                         }
 136                     )
 137                 }
 138             }))
 139         }
 140     },
 141     mounted() {
 142         this.build_datatable()
 143     },
 144     props: {
 145         resources: Array,
 146     },
 147     name: 'EHoldingsEBSCOTitlePackagesList',
 148 }
 149 </script>
 150
 151 <style scoped>
 152 #package_list_result {
 153     width: 60%;
 154     padding-left: 26rem;
 155 }
 156 #package_list {
 157     display: table;
 158 }
 159 #filters fieldset {
 160     margin: 0;
 161 }
 162 </style>