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

   1 <template>
   2     <div>
   3         <fieldset>
   4             {{ $__("Package name") }}:
   5             <input
   6                 type="text"
   7                 id="package_name_filter"
   8                 v-model="filters.package_name"
   9                 @keyup.enter="filter_table"
  10             />
  11             {{ $__("Content type") }}:
  12             <select id="content_type_filter" v-model="filters.content_type">
  13                 <option value="">{{ $__("All") }}</option>
  14                 <option
  15                     v-for="type in av_package_content_types"
  16                     :key="type.authorised_values"
  17                     :value="type.authorised_value"
  18                 >
  19                     {{ type.lib }}
  20                 </option>
  21             </select>
  22             {{ $__("Selection status") }}:
  23             <select id="selection_type_filter" v-model="filters.selection_type">
  24                 <option value="0">{{ $__("All") }}</option>
  25                 <option value="1">{{ $__("Selected") }}</option>
  26                 <option value="2">{{ $__("Not selected") }}</option>
  27             </select>
  28             <input
  29                 @click="filter_table"
  30                 id="filter_table"
  31                 type="button"
  32                 :value="$__('Submit')"
  33             />
  34         </fieldset>
  35
  36         <!-- We need to display the table element to initiate DataTable -->
  37         <div
  38             id="package_list_result"
  39             :style="show_table ? 'display: block' : 'display: none'"
  40         >
  41             <div
  42                 v-if="
  43                     local_count_packages !== undefined &&
  44                     local_count_packages !== null
  45                 "
  46             >
  47                 <router-link :to="local_packages_url">
  48                     {{
  49                         $__("%s packages found locally").format(
  50                             local_count_packages
  51                         )
  52                     }}</router-link
  53                 >
  54             </div>
  55             <div id="package_list_result">
  56                 <table :id="table_id"></table>
  57             </div>
  58         </div>
  59     </div>
  60 </template>
  61
  62 <script>
  63 import { inject, createVNode, render } from 'vue'
  64 import { storeToRefs } from "pinia"
  65 import { fetchCountLocalPackages } from './../../fetch'
  66 import { useDataTable, build_url_params, build_url } from "../../composables/datatables"
  67
  68 export default {
  69     setup() {
  70         const vendorStore = inject('vendorStore')
  71         const { vendors } = storeToRefs(vendorStore)
  72
  73         const AVStore = inject('AVStore')
  74         const { av_package_types, av_package_content_types } = storeToRefs(AVStore)
  75         const { get_lib_from_av, map_av_dt_filter } = AVStore
  76
  77         const table_id = "package_list"
  78         useDataTable(table_id)
  79
  80         return {
  81             vendors,
  82             av_package_types,
  83             av_package_content_types,
  84             get_lib_from_av,
  85             map_av_dt_filter,
  86             erm_providers,
  87             table_id,
  88         }
  89     },
  90     data: function () {
  91         return {
  92             packages: [],
  93             initialized: true,
  94             filters: {
  95                 package_name: this.$route.query.package_name || "",
  96                 content_type: this.$route.query.content_type || "",
  97                 selection_type: this.$route.query.selection_type || "",
  98             },
  99             show_table: false,
 100             local_count_packages: null,
 101         }
 102     },
 103     computed: {
 104         local_packages_url() { return build_url("/cgi-bin/koha/erm/eholdings/local/packages", this.filters) },
 105     },
 106     beforeRouteEnter(to, from, next) {
 107         next(vm => {
 108             vm.build_datatable()
 109         })
 110     },
 111     methods: {
 112         show_package: function (package_id) {
 113             this.$router.push("/cgi-bin/koha/erm/eholdings/ebsco/packages/" + package_id)
 114         },
 115         filter_table: async function () {
 116             let new_route = build_url("/cgi-bin/koha/erm/eholdings/ebsco/packages", this.filters)
 117             this.$router.push(new_route)
 118             this.show_table = true
 119             this.local_count_packages = null
 120             $('#' + this.table_id).DataTable().draw()
 121             if (this.erm_providers.includes('local')) {
 122                 this.local_count_packages = await fetchCountLocalPackages(this.filters)
 123             }
 124         },
 125         build_datatable: function () {
 126             let show_package = this.show_package
 127             let get_lib_from_av = this.get_lib_from_av
 128             let map_av_dt_filter = this.map_av_dt_filter
 129
 130             if (!this.show_table) {
 131                 this.show_table = build_url_params(this.filters).length ? true : false
 132             }
 133             let filters = this.filters
 134             let show_table = this.show_table
 135             let table_id = this.table_id
 136
 137             window['vendors'] = this.vendors.map(e => {
 138                 e['_id'] = e['id']
 139                 e['_str'] = e['name']
 140                 return e
 141             })
 142             let avs = ['av_package_types', 'av_package_content_types']
 143             avs.forEach(function (av_cat) {
 144                 window[av_cat] = map_av_dt_filter(av_cat)
 145             })
 146
 147             let additional_filters = {
 148                 name: function () {
 149                     return filters.package_name || ""
 150                 },
 151                 content_type: function () {
 152                     return filters.content_type || ""
 153                 },
 154                 selection_type: function () {
 155                     return filters.selection_type || ""
 156                 },
 157             }
 158
 159             $('#' + table_id).kohaTable({
 160                 ajax: {
 161                     url: "/api/v1/erm/eholdings/ebsco/packages",
 162                 },
 163                 embed: ['resources+count', 'vendor.name'],
 164                 ordering: false,
 165                 dom: '<"top pager"<"table_entries"ilp>>tr<"bottom pager"ip>',
 166                 aLengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
 167                 deferLoading: show_table ? false : true,
 168                 autoWidth: false,
 169                 columns: [
 170                     {
 171                         title: __("Name"),
 172                         data: "me.package_id:me.name",
 173                         searchable: false,
 174                         orderable: false,
 175                         render: function (data, type, row, meta) {
 176                             // Rendering done in drawCallback
 177                             return ""
 178                         }
 179                     },
 180                     {
 181                         title: __("Vendor"),
 182                         data: "vendor_id",
 183                         searchable: false,
 184                         orderable: false,
 185                         render: function (data, type, row, meta) {
 186                             return row.vendor ? escape_str(row.vendor.name) : ""
 187                         },
 188                     },
 189                     {
 190                         title: __("Type"),
 191                         data: "package_type",
 192                         searchable: false,
 193                         orderable: false,
 194                         render: function (data, type, row, meta) {
 195                             return escape_str(get_lib_from_av("av_package_types", row.package_type))
 196                         }
 197                     }, {
 198                         title: __("Content type"),
 199                         searchable: false,
 200                         orderable: false,
 201                         render: function (data, type, row, meta) {
 202                             return escape_str(get_lib_from_av("av_package_content_types", row.content_type))
 203                         }
 204                     },
 205                 ],
 206                 drawCallback: function (settings) {
 207
 208                     var api = new $.fn.dataTable.Api(settings)
 209
 210                     $.each($(this).find("tbody tr td:first-child"), function (index, e) {
 211                         let tr = $(this).parent()
 212                         let row = api.row(tr).data()
 213                         if (!row) return // Happen if the table is empty
 214                         let n = createVNode("a", {
 215                             role: "button",
 216                             href: "/cgi-bin/koha/erm/eholdings/ebsco/packages/" + row.package_id,
 217                             onClick: (e) => {
 218                                 e.preventDefault()
 219                                 show_package(row.package_id)
 220                             }
 221                         },
 222                             `${row.name} (#${row.package_id})`
 223                         )
 224                         if (row.is_selected) {
 225                             n = createVNode('span', {}, [n, " ", createVNode("i", { class: "fa fa-check-square-o", style: { color: "green", float: "right" }, title: __("Is selected") })])
 226                         }
 227                         render(n, e)
 228                     })
 229                 },
 230             }, null, 0, additional_filters)
 231
 232             if (filters.package_name.length) {
 233                 this.filter_table()
 234             }
 235         },
 236     },
 237     name: "EHoldingsEBSCOPackagesList",
 238 }
 239 </script>