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