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

   1 <template>
   2     <div>
   3         <fieldset>
   4             {{ $__("Publication title") }}:
   5             <input
   6                 type="text"
   7                 id="publication_title_filter"
   8                 v-model="filters.publication_title"
   9                 @keyup.enter="filter_table"
  10             />
  11             {{ $__("Publication type") }}:
  12             <select
  13                 id="publication_type_filter"
  14                 v-model="filters.publication_type"
  15             >
  16                 <option value="">{{ $__("All") }}</option>
  17                 <option
  18                     v-for="type in av_title_publication_types"
  19                     :key="type.authorised_values"
  20                     :value="type.authorised_value"
  21                 >
  22                     {{ type.lib }}
  23                 </option>
  24             </select>
  25             {{ $__("Selection status") }}:
  26             <select id="selection_type_filter" v-model="filters.selection_type">
  27                 <option value="0">{{ $__("All") }}</option>
  28                 <option value="1">{{ $__("Selected") }}</option>
  29                 <option value="2">{{ $__("Not selected") }}</option>
  30             </select>
  31             <input
  32                 @click="filter_table"
  33                 id="filter_table"
  34                 type="button"
  35                 :value="$__('Submit')"
  36             />
  37             <span v-if="cannot_search">{{
  38                 $__("Please enter a search term")
  39             }}</span>
  40         </fieldset>
  41
  42         <!-- We need to display the table element to initiate DataTable -->
  43         <div
  44             id="title_list_result"
  45             :style="show_table ? 'display: block' : 'display: none'"
  46         >
  47             <div
  48                 v-if="
  49                     local_title_count !== undefined &&
  50                     local_title_count !== null
  51                 "
  52             >
  53                 <router-link :to="local_titles_url">
  54                     {{
  55                         $__("%s titles found locally").format(local_title_count)
  56                     }}</router-link
  57                 >
  58             </div>
  59             <div id="title_list_result" class="page-section">
  60                 <table :id="table_id"></table>
  61             </div>
  62         </div>
  63     </div>
  64 </template>
  65
  66 <script>
  67 import { inject, createVNode, render } from "vue"
  68 import { storeToRefs } from "pinia"
  69 import { fetchLocalTitleCount } from "./../../fetch"
  70 import {
  71     useDataTable,
  72     build_url_params,
  73     build_url,
  74 } from "../../composables/datatables"
  75
  76 export default {
  77     setup() {
  78         const vendorStore = inject("vendorStore")
  79         const { vendors } = storeToRefs(vendorStore)
  80
  81         const AVStore = inject("AVStore")
  82         const { av_title_publication_types } = storeToRefs(AVStore)
  83         const { get_lib_from_av } = AVStore
  84
  85         const table_id = "title_list"
  86         useDataTable(table_id)
  87
  88         return {
  89             vendors,
  90             av_title_publication_types,
  91             get_lib_from_av,
  92             erm_providers,
  93             table_id,
  94         }
  95     },
  96     data: function () {
  97         return {
  98             titles: [],
  99             initialized: true,
 100             filters: {
 101                 publication_title: this.$route.query.publication_title || "",
 102                 publication_type: this.$route.query.publication_type || "",
 103                 selection_type: this.$route.query.selection_type || "",
 104             },
 105             cannot_search: false,
 106             show_table: false,
 107             local_title_count: null,
 108         }
 109     },
 110     computed: {
 111         local_titles_url() {
 112             return build_url(
 113                 "/cgi-bin/koha/erm/eholdings/local/titles",
 114                 this.filters
 115             )
 116         },
 117     },
 118     beforeRouteEnter(to, from, next) {
 119         next(vm => {
 120             vm.build_datatable()
 121         })
 122     },
 123     methods: {
 124         show_title: function (title_id) {
 125             this.$router.push(
 126                 "/cgi-bin/koha/erm/eholdings/ebsco/titles/" + title_id
 127             )
 128         },
 129         filter_table: async function () {
 130             if (this.filters.publication_title.length) {
 131                 this.cannot_search = false
 132                 let new_route = build_url(
 133                     "/cgi-bin/koha/erm/eholdings/ebsco/titles",
 134                     this.filters
 135                 )
 136                 this.$router.push(new_route)
 137                 this.show_table = true
 138                 this.local_title_count = null
 139                 $("#" + this.table_id)
 140                     .DataTable()
 141                     .draw()
 142                 if (this.erm_providers.includes("local")) {
 143                     this.local_title_count = await fetchLocalTitleCount(
 144                         this.filters
 145                     )
 146                 }
 147             } else {
 148                 this.cannot_search = true
 149             }
 150         },
 151         build_datatable: function () {
 152             let show_title = this.show_title
 153             let get_lib_from_av = this.get_lib_from_av
 154             if (!this.show_table) {
 155                 this.show_table = build_url_params(this.filters).length
 156                     ? true
 157                     : false
 158             }
 159             let filters = this.filters
 160             let table_id = this.table_id
 161
 162             window["vendors"] = this.vendors.map(e => {
 163                 e["_id"] = e["id"]
 164                 e["_str"] = e["name"]
 165                 return e
 166             })
 167             let vendors_map = this.vendors.reduce((map, e) => {
 168                 map[e.id] = e
 169                 return map
 170             }, {})
 171             window["av_title_publication_types"] =
 172                 this.av_title_publication_types.map(e => {
 173                     e["_id"] = e["authorised_value"]
 174                     e["_str"] = e["lib"]
 175                     return e
 176                 })
 177
 178             let additional_filters = {
 179                 publication_title: function () {
 180                     return filters.publication_title || ""
 181                 },
 182                 publication_type: function () {
 183                     return filters.publication_type || ""
 184                 },
 185                 selection_type: function () {
 186                     return filters.selection_type || ""
 187                 },
 188             }
 189             $("#" + table_id).kohaTable(
 190                 {
 191                     ajax: {
 192                         url: "/api/v1/erm/eholdings/ebsco/titles",
 193                     },
 194                     ordering: false,
 195                     dom: '<"top pager"<"table_entries"ilp>>tr<"bottom pager"ip>',
 196                     aLengthMenu: [
 197                         [10, 20, 50, 100],
 198                         [10, 20, 50, 100],
 199                     ],
 200                     deferLoading: true,
 201                     autoWidth: false,
 202                     columns: [
 203                         {
 204                             title: __("Title"),
 205                             data: "me.publication_title",
 206                             searchable: false,
 207                             orderable: false,
 208                             render: function (data, type, row, meta) {
 209                                 // Rendering done in drawCallback
 210                                 return ""
 211                             },
 212                         },
 213                         {
 214                             title: __("Publisher name"),
 215                             data: "me.publisher_name",
 216                             searchable: false,
 217                             orderable: false,
 218                             render: function (data, type, row, meta) {
 219                                 return escape_str(row.publisher_name)
 220                             },
 221                         },
 222                         {
 223                             title: __("Publication type"),
 224                             data: "publication_type",
 225                             searchable: false,
 226                             orderable: false,
 227                             render: function (data, type, row, meta) {
 228                                 return escape_str(
 229                                     get_lib_from_av(
 230                                         "av_title_publication_types",
 231                                         row.publication_type
 232                                     )
 233                                 )
 234                             },
 235                         },
 236                         {
 237                             title: __("Identifier"),
 238                             data: "print_identifier:online_identifier",
 239                             searchable: false,
 240                             orderable: false,
 241                             render: function (data, type, row, meta) {
 242                                 let print_identifier = row.print_identifier
 243                                 let online_identifier = row.online_identifier
 244                                 return (
 245                                     (print_identifier
 246                                         ? escape_str(
 247                                               _("ISBN (Print): %s").format(
 248                                                   print_identifier
 249                                               )
 250                                           )
 251                                         : "") +
 252                                     (online_identifier
 253                                         ? escape_str(
 254                                               _("ISBN (Online): %s").format(
 255                                                   online_identifier
 256                                               )
 257                                           )
 258                                         : "")
 259                                 )
 260                             },
 261                         },
 262                     ],
 263                     drawCallback: function (settings) {
 264                         var api = new $.fn.dataTable.Api(settings)
 265
 266                         if (!api.rows({ search: "applied" }).count()) return
 267
 268                         $.each(
 269                             $(this).find("tbody tr td:first-child"),
 270                             function (index, e) {
 271                                 let tr = $(this).parent()
 272                                 let row = api.row(tr).data()
 273                                 if (!row) return // Happen if the table is empty
 274                                 let n = createVNode(
 275                                     "a",
 276                                     {
 277                                         role: "button",
 278                                         onClick: e => {
 279                                             e.preventDefault()
 280                                             show_title(row.title_id)
 281                                         },
 282                                     },
 283                                     `${row.publication_title} (#${row.title_id})`
 284                                 )
 285
 286                                 if (row.is_selected) {
 287                                     n = createVNode("span", {}, [
 288                                         n,
 289                                         " ",
 290                                         createVNode("i", {
 291                                             class: "fa fa-check-square-o",
 292                                             style: {
 293                                                 color: "green",
 294                                                 float: "right",
 295                                             },
 296                                             title: __("Is selected"),
 297                                         }),
 298                                     ])
 299                                 }
 300                                 render(n, e)
 301                             }
 302                         )
 303                     },
 304                 },
 305                 null,
 306                 0,
 307                 additional_filters
 308             )
 309
 310             if (filters.publication_title.length) {
 311                 this.filter_table()
 312             }
 313         },
 314     },
 315     name: "EHoldingsEBSCOTitlesList",
 316 }
 317 </script>