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