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

   1 <template>
   2     <div>
   3         <fieldset>
   4             {{ $t("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             {{ $t("Publication type") }}:
  12             <select
  13                 id="publication_type_filter"
  14                 v-model="filters.publication_type"
  15             >
  16                 <option value="">{{ $t("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             {{ $t("Selection status") }}:
  26             <select id="selection_type_filter" v-model="filters.selection_type">
  27                 <option value="0">{{ $t("All") }}</option>
  28                 <option value="1">{{ $t("Selected") }}</option>
  29                 <option value="2">{{ $t("Not selected") }}</option>
  30             </select>
  31             <input
  32                 @click="filter_table"
  33                 id="filter_table"
  34                 type="button"
  35                 :value="$t('Submit')"
  36             />
  37             <span v-if="cannot_search">{{
  38                 $t("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                         $t("{count} titles found locally", {
  56                             count: local_count_titles,
  57                         })
  58                     }}</router-link
  59                 >
  60             </div>
  61             <div id="title_list_result">
  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 { useDataTable, build_url_params, build_url } from "../../composables/datatables"
  73
  74 export default {
  75     setup() {
  76         const vendorStore = inject('vendorStore')
  77         const { vendors } = storeToRefs(vendorStore)
  78
  79         const AVStore = inject('AVStore')
  80         const { av_title_publication_types } = storeToRefs(AVStore)
  81         const { get_lib_from_av } = AVStore
  82
  83         const table_id = "title_list"
  84         useDataTable(table_id)
  85
  86         return {
  87             vendors,
  88             av_title_publication_types,
  89             get_lib_from_av,
  90             erm_providers,
  91             table_id,
  92         }
  93     },
  94     data: function () {
  95         return {
  96             titles: [],
  97             initialized: true,
  98             filters: {
  99                 publication_title: this.$route.query.publication_title || "",
 100                 publication_type: this.$route.query.publication_type || "",
 101                 selection_type: this.$route.query.selection_type || "",
 102             },
 103             cannot_search: false,
 104             show_table: false,
 105             local_count_titles: null,
 106         }
 107     },
 108     computed: {
 109         local_titles_url() { return build_url("/cgi-bin/koha/erm/eholdings/local/titles", this.filters) },
 110     },
 111     beforeRouteEnter(to, from, next) {
 112         next(vm => {
 113             vm.build_datatable()
 114         })
 115     },
 116     methods: {
 117         show_title: function (title_id) {
 118             this.$router.push("/cgi-bin/koha/erm/eholdings/ebsco/titles/" + title_id)
 119         },
 120         filter_table: async function () {
 121             if (this.filters.publication_title.length) {
 122                 this.cannot_search = false
 123                 let new_route = build_url("/cgi-bin/koha/erm/eholdings/ebsco/titles", this.filters)
 124                 this.$router.push(new_route)
 125                 this.show_table = true
 126                 this.local_count_titles = null
 127                 $('#' + this.table_id).DataTable().draw()
 128                 if (this.erm_providers.includes('local')) {
 129                     this.local_count_titles = await fetchCountLocalTitles(this.filters)
 130                 }
 131             } else {
 132                 this.cannot_search = true
 133             }
 134         },
 135         build_datatable: function () {
 136             let show_title = this.show_title
 137             let get_lib_from_av = this.get_lib_from_av
 138             if (!this.show_table) {
 139                 this.show_table = build_url_params(this.filters).length ? true : false
 140             }
 141             let filters = this.filters
 142             let table_id = this.table_id
 143
 144             window['vendors'] = this.vendors.map(e => {
 145                 e['_id'] = e['id']
 146                 e['_str'] = e['name']
 147                 return e
 148             })
 149             let vendors_map = this.vendors.reduce((map, e) => {
 150                 map[e.id] = e
 151                 return map
 152             }, {})
 153             window['av_title_publication_types'] = this.av_title_publication_types.map(e => {
 154                 e['_id'] = e['authorised_value']
 155                 e['_str'] = e['lib']
 156                 return e
 157             })
 158
 159             let additional_filters = {
 160                 publication_title: function () {
 161                     return filters.publication_title || ""
 162                 },
 163                 publication_type: function () {
 164                     return filters.publication_type || ""
 165                 },
 166                 selection_type: function () {
 167                     return filters.selection_type || ""
 168                 },
 169             }
 170             $('#' + table_id).kohaTable({
 171                 ajax: {
 172                     url: "/api/v1/erm/eholdings/ebsco/titles",
 173                 },
 174                 ordering: false,
 175                 dom: '<"top pager"<"table_entries"ilp>>tr<"bottom pager"ip>',
 176                 aLengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
 177                 deferLoading: true,
 178                 autoWidth: false,
 179                 columns: [
 180                     {
 181                         title: __("Title"),
 182                         data: "me.publication_title",
 183                         searchable: false,
 184                         orderable: false,
 185                         render: function (data, type, row, meta) {
 186                             // Rendering done in drawCallback
 187                             return ""
 188                         }
 189                     },
 190                     {
 191                         title: __("Publisher name"),
 192                         data: "me.publisher_name",
 193                         searchable: false,
 194                         orderable: false,
 195                         render: function (data, type, row, meta) {
 196                             return escape_str(row.publisher_name)
 197                         }
 198                     },
 199                     {
 200                         title: __("Publication type"),
 201                         data: "publication_type",
 202                         searchable: false,
 203                         orderable: false,
 204                         render: function (data, type, row, meta) {
 205                             return escape_str(get_lib_from_av("av_title_publication_types", row.publication_type))
 206                         }
 207                     },
 208                     {
 209                         title: __("Identifier"),
 210                         data: "print_identifier:online_identifier",
 211                         searchable: false,
 212                         orderable: false,
 213                         render: function (data, type, row, meta) {
 214                             let print_identifier = row.print_identifier
 215                             let online_identifier = row.online_identifier
 216                             return (print_identifier ? escape_str(_("ISBN (Print): %s").format(print_identifier)) : "") +
 217                                 (online_identifier ? escape_str(_("ISBN (Online): %s").format(online_identifier)) : "")
 218                         }
 219                     },
 220                 ],
 221                 drawCallback: function (settings) {
 222
 223                     var api = new $.fn.dataTable.Api(settings)
 224
 225                     if (!api.rows({ search: 'applied' }).count()) return
 226
 227                     $.each($(this).find("tbody tr td:first-child"), function (index, e) {
 228                         let tr = $(this).parent()
 229                         let row = api.row(tr).data()
 230                         if (!row) return // Happen if the table is empty
 231                         let n = createVNode("a", {
 232                             role: "button",
 233                             onClick: (e) => {
 234                                 e.preventDefault()
 235                                 show_title(row.title_id)
 236                             }
 237                         },
 238                             `${row.publication_title} (#${row.title_id})`
 239                         )
 240
 241                         if (row.is_selected) {
 242                             n = createVNode('span', {}, [n, " ", createVNode("i", { class: "fa fa-check-square-o", style: { color: "green" }, title: __("Is selected") })])
 243                         }
 244                         render(n, e)
 245                     })
 246                 },
 247             }, null, 0, additional_filters)
 248
 249             if (filters.publication_title.length) {
 250                 this.filter_table()
 251             }
 252         },
 253     },
 254     name: "EHoldingsEBSCOTitlesList",
 255 }
 256 </script>