koha-dev.rot13.org Git - srvgit/blob - 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 { createVNode, render } from 'vue'
  70 import { useVendorStore } from "../../stores/vendors"
  71 import { useAVStore } from "../../stores/authorised_values"
  72 import { storeToRefs } from "pinia"
  73 import { fetchCountLocalTitles } from "./../../fetch"
  74 import { useDataTable, build_url_params, build_url } from "../../composables/datatables"
  75
  76 export default {
  77     setup() {
  78         const vendorStore = useVendorStore()
  79         const { vendors } = storeToRefs(vendorStore)
  80
  81         const AVStore = useAVStore()
  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_count_titles: null,
 108         }
 109     },
 110     computed: {
 111         local_titles_url() { return build_url("/cgi-bin/koha/erm/eholdings/local/titles", this.filters) },
 112     },
 113     beforeRouteEnter(to, from, next) {
 114         next(vm => {
 115             vm.build_datatable()
 116         })
 117     },
 118     methods: {
 119         show_title: function (title_id) {
 120             this.$router.push("/cgi-bin/koha/erm/eholdings/ebsco/titles/" + title_id)
 121         },
 122         filter_table: async function () {
 123             if (this.filters.publication_title.length) {
 124                 this.cannot_search = false
 125                 let new_route = build_url("/cgi-bin/koha/erm/eholdings/ebsco/titles", this.filters)
 126                 this.$router.push(new_route)
 127                 this.show_table = true
 128                 this.local_count_titles = null
 129                 $('#' + this.table_id).DataTable().draw()
 130                 if (this.erm_providers.includes('local')) {
 131                     this.local_count_titles = await fetchCountLocalTitles(this.filters)
 132                 }
 133             } else {
 134                 this.cannot_search = true
 135             }
 136         },
 137         build_datatable: function () {
 138             let show_title = this.show_title
 139             let get_lib_from_av = this.get_lib_from_av
 140             if (!this.show_table) {
 141                 this.show_table = build_url_params(this.filters).length ? true : false
 142             }
 143             let filters = this.filters
 144             let table_id = this.table_id
 145
 146             window['vendors'] = this.vendors.map(e => {
 147                 e['_id'] = e['id']
 148                 e['_str'] = e['name']
 149                 return e
 150             })
 151             let vendors_map = this.vendors.reduce((map, e) => {
 152                 map[e.id] = e
 153                 return map
 154             }, {})
 155             window['av_title_publication_types'] = this.av_title_publication_types.map(e => {
 156                 e['_id'] = e['authorised_value']
 157                 e['_str'] = e['lib']
 158                 return e
 159             })
 160
 161             let additional_filters = {
 162                 publication_title: function () {
 163                     return filters.publication_title || ""
 164                 },
 165                 publication_type: function () {
 166                     return filters.publication_type || ""
 167                 },
 168                 selection_type: function () {
 169                     return filters.selection_type || ""
 170                 },
 171             }
 172             $('#' + table_id).kohaTable({
 173                 ajax: {
 174                     url: "/api/v1/erm/eholdings/ebsco/titles",
 175                 },
 176                 ordering: false,
 177                 dom: '<"top pager"<"table_entries"ilp>>tr<"bottom pager"ip>',
 178                 aLengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
 179                 deferLoading: true,
 180                 autoWidth: false,
 181                 columns: [
 182                     {
 183                         title: __("Title"),
 184                         data: "me.publication_title",
 185                         searchable: false,
 186                         orderable: false,
 187                         render: function (data, type, row, meta) {
 188                             // Rendering done in drawCallback
 189                             return ""
 190                         }
 191                     },
 192                     {
 193                         title: __("Publisher name"),
 194                         data: "me.publisher_name",
 195                         searchable: false,
 196                         orderable: false,
 197                         render: function (data, type, row, meta) {
 198                             return escape_str(row.publisher_name)
 199                         }
 200                     },
 201                     {
 202                         title: __("Publication type"),
 203                         data: "publication_type",
 204                         searchable: false,
 205                         orderable: false,
 206                         render: function (data, type, row, meta) {
 207                             return escape_str(get_lib_from_av("av_title_publication_types", row.publication_type))
 208                         }
 209                     },
 210                     {
 211                         title: __("Identifier"),
 212                         data: "print_identifier:online_identifier",
 213                         searchable: false,
 214                         orderable: false,
 215                         render: function (data, type, row, meta) {
 216                             let print_identifier = row.print_identifier
 217                             let online_identifier = row.online_identifier
 218                             return (print_identifier ? escape_str(_("ISBN (Print): %s").format(print_identifier)) : "") +
 219                                 (online_identifier ? escape_str(_("ISBN (Online): %s").format(online_identifier)) : "")
 220                         }
 221                     },
 222                 ],
 223                 drawCallback: function (settings) {
 224
 225                     var api = new $.fn.dataTable.Api(settings)
 226
 227                     if (!api.rows({ search: 'applied' }).count()) return
 228
 229                     $.each($(this).find("tbody tr td:first-child"), function (index, e) {
 230                         let tr = $(this).parent()
 231                         let row = api.row(tr).data()
 232                         if (!row) return // Happen if the table is empty
 233                         let n = createVNode("a", {
 234                             role: "button",
 235                             onClick: (e) => {
 236                                 e.preventDefault()
 237                                 show_title(row.title_id)
 238                             }
 239                         },
 240                             `${row.publication_title} (#${row.title_id})`
 241                         )
 242
 243                         if (row.is_selected) {
 244                             n = createVNode('span', {}, [n, " ", createVNode("i", { class: "fa fa-check-square-o", style: { color: "green" }, title: __("Is selected") })])
 245                         }
 246                         render(n, e)
 247                     })
 248                 },
 249             }, eholdings_titles_table_settings, 0, additional_filters)
 250
 251             if (filters.publication_title.length) {
 252                 this.filter_table()
 253             }
 254         },
 255     },
 256     name: "EHoldingsEBSCOTitlesList",
 257 }
 258 </script>