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" class="page-section">
  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 { fetchLocalPackageCount } from "./../../fetch/erm.js"
  66 import {
  67     useDataTable,
  68     build_url_params,
  69     build_url,
  70 } from "../../composables/datatables"
  71
  72 export default {
  73     setup() {
  74         const vendorStore = inject("vendorStore")
  75         const { vendors } = storeToRefs(vendorStore)
  76
  77         const AVStore = inject("AVStore")
  78         const { av_package_types, av_package_content_types } =
  79             storeToRefs(AVStore)
  80         const { get_lib_from_av, map_av_dt_filter } = AVStore
  81
  82         const table_id = "package_list"
  83         useDataTable(table_id)
  84
  85         return {
  86             vendors,
  87             av_package_types,
  88             av_package_content_types,
  89             get_lib_from_av,
  90             map_av_dt_filter,
  91             erm_providers,
  92             table_id,
  93         }
  94     },
  95     data: function () {
  96         return {
  97             packages: [],
  98             initialized: true,
  99             filters: {
 100                 package_name: this.$route.query.package_name || "",
 101                 content_type: this.$route.query.content_type || "",
 102                 selection_type: this.$route.query.selection_type || "",
 103             },
 104             show_table: false,
 105             local_count_packages: null,
 106         }
 107     },
 108     computed: {
 109         local_packages_url() {
 110             return build_url(
 111                 "/cgi-bin/koha/erm/eholdings/local/packages",
 112                 this.filters
 113             )
 114         },
 115     },
 116     beforeRouteEnter(to, from, next) {
 117         next(vm => {
 118             vm.build_datatable()
 119         })
 120     },
 121     methods: {
 122         show_package: function (package_id) {
 123             this.$router.push(
 124                 "/cgi-bin/koha/erm/eholdings/ebsco/packages/" + package_id
 125             )
 126         },
 127         filter_table: async function () {
 128             let new_route = build_url(
 129                 "/cgi-bin/koha/erm/eholdings/ebsco/packages",
 130                 this.filters
 131             )
 132             this.$router.push(new_route)
 133             this.show_table = true
 134             this.local_count_packages = null
 135             $("#" + this.table_id)
 136                 .DataTable()
 137                 .draw()
 138             if (this.erm_providers.includes("local")) {
 139                 this.local_count_packages = await fetchLocalPackageCount(
 140                     this.filters
 141                 )
 142             }
 143         },
 144         build_datatable: function () {
 145             let show_package = this.show_package
 146             let get_lib_from_av = this.get_lib_from_av
 147             let map_av_dt_filter = this.map_av_dt_filter
 148
 149             if (!this.show_table) {
 150                 this.show_table = build_url_params(this.filters).length
 151                     ? true
 152                     : false
 153             }
 154             let filters = this.filters
 155             let show_table = this.show_table
 156             let table_id = this.table_id
 157
 158             window["vendors"] = this.vendors.map(e => {
 159                 e["_id"] = e["id"]
 160                 e["_str"] = e["name"]
 161                 return e
 162             })
 163             let avs = ["av_package_types", "av_package_content_types"]
 164             avs.forEach(function (av_cat) {
 165                 window[av_cat] = map_av_dt_filter(av_cat)
 166             })
 167
 168             let additional_filters = {
 169                 name: function () {
 170                     return filters.package_name || ""
 171                 },
 172                 content_type: function () {
 173                     return filters.content_type || ""
 174                 },
 175                 selection_type: function () {
 176                     return filters.selection_type || ""
 177                 },
 178             }
 179
 180             $("#" + table_id).kohaTable(
 181                 {
 182                     ajax: {
 183                         url: "/api/v1/erm/eholdings/ebsco/packages",
 184                     },
 185                     embed: ["resources+count", "vendor.name"],
 186                     ordering: false,
 187                     dom: '<"top pager"<"table_entries"ilp>>tr<"bottom pager"ip>',
 188                     aLengthMenu: [
 189                         [10, 20, 50, 100],
 190                         [10, 20, 50, 100],
 191                     ],
 192                     deferLoading: show_table ? false : true,
 193                     autoWidth: false,
 194                     columns: [
 195                         {
 196                             title: __("Name"),
 197                             data: "me.package_id:me.name",
 198                             searchable: false,
 199                             orderable: false,
 200                             render: function (data, type, row, meta) {
 201                                 // Rendering done in drawCallback
 202                                 return ""
 203                             },
 204                         },
 205                         {
 206                             title: __("Vendor"),
 207                             data: "vendor_id",
 208                             searchable: false,
 209                             orderable: false,
 210                             render: function (data, type, row, meta) {
 211                                 return row.vendor
 212                                     ? escape_str(row.vendor.name)
 213                                     : ""
 214                             },
 215                         },
 216                         {
 217                             title: __("Type"),
 218                             data: "package_type",
 219                             searchable: false,
 220                             orderable: false,
 221                             render: function (data, type, row, meta) {
 222                                 return escape_str(
 223                                     get_lib_from_av(
 224                                         "av_package_types",
 225                                         row.package_type
 226                                     )
 227                                 )
 228                             },
 229                         },
 230                         {
 231                             title: __("Content type"),
 232                             searchable: false,
 233                             orderable: false,
 234                             render: function (data, type, row, meta) {
 235                                 return escape_str(
 236                                     get_lib_from_av(
 237                                         "av_package_content_types",
 238                                         row.content_type
 239                                     )
 240                                 )
 241                             },
 242                         },
 243                     ],
 244                     drawCallback: function (settings) {
 245                         var api = new $.fn.dataTable.Api(settings)
 246
 247                         $.each(
 248                             $(this).find("tbody tr td:first-child"),
 249                             function (index, e) {
 250                                 let tr = $(this).parent()
 251                                 let row = api.row(tr).data()
 252                                 if (!row) return // Happen if the table is empty
 253                                 let n = createVNode(
 254                                     "a",
 255                                     {
 256                                         role: "button",
 257                                         href:
 258                                             "/cgi-bin/koha/erm/eholdings/ebsco/packages/" +
 259                                             row.package_id,
 260                                         onClick: e => {
 261                                             e.preventDefault()
 262                                             show_package(row.package_id)
 263                                         },
 264                                     },
 265                                     `${row.name} (#${row.package_id})`
 266                                 )
 267                                 if (row.is_selected) {
 268                                     n = createVNode("span", {}, [
 269                                         n,
 270                                         " ",
 271                                         createVNode("i", {
 272                                             class: "fa fa-check-square-o",
 273                                             style: {
 274                                                 color: "green",
 275                                                 float: "right",
 276                                             },
 277                                             title: __("Is selected"),
 278                                         }),
 279                                     ])
 280                                 }
 281                                 render(n, e)
 282                             }
 283                         )
 284                     },
 285                 },
 286                 null,
 287                 0,
 288                 additional_filters
 289             )
 290
 291             if (filters.package_name.length) {
 292                 this.filter_table()
 293             }
 294         },
 295     },
 296     name: "EHoldingsEBSCOPackagesList",
 297 }
 298 </script>