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

   1 <template>
   2     <div id="title_list_result">
   3         <div id="filters" v-if="erm_provider != 'manual'">
   4             <a href="#" @click.prevent="toggle_filters($event)"
   5                 ><i class="fa fa-search"></i>
   6                 {{ display_filters ? $t("Hide filters") : $t("Show filters") }}
   7             </a>
   8             <fieldset v-if="display_filters">
   9                 <ol>
  10                     <li>
  11                         <label>{{ $t("Title") }}:</label>
  12                         <input
  13                             type="text"
  14                             id="publication_title_filter"
  15                             v-model="filters.publication_title"
  16                             @keyup.enter="filter_table"
  17                         />
  18                     </li>
  19                     <li>
  20                         <label>{{ $t("Publication type") }}:</label>
  21                         <select
  22                             id="publication_type_filter"
  23                             v-model="filters.publication_type"
  24                         >
  25                             <option value="">{{ $t("All") }}</option>
  26                             <option
  27                                 v-for="type in av_title_publication_types"
  28                                 :key="type.authorised_values"
  29                                 :value="type.authorised_value"
  30                             >
  31                                 {{ type.lib }}
  32                             </option>
  33                         </select>
  34                     </li>
  35                     <li>
  36                         <label>{{ $t("Selection status") }}:</label>
  37                         <select
  38                             id="selection_type_filter"
  39                             v-model="filters.selection_type"
  40                         >
  41                             <option value="0">{{ $t("All") }}</option>
  42                             <option value="1">{{ $t("Selected") }}</option>
  43                             <option value="2">{{ $t("Not selected") }}</option>
  44                         </select>
  45                     </li>
  46                 </ol>
  47
  48                 <input
  49                     @click="filter_table"
  50                     id="filter_table"
  51                     type="button"
  52                     :value="$t('Filter')"
  53                 />
  54             </fieldset>
  55         </div>
  56         <table id="title_list"></table>
  57     </div>
  58 </template>
  59
  60 <script>
  61
  62 import { createVNode, render } from 'vue'
  63 import { useAVStore } from "../../stores/authorised_values"
  64 import { storeToRefs } from "pinia"
  65
  66 export default {
  67     setup() {
  68         const AVStore = useAVStore()
  69         const { av_title_publication_types } = storeToRefs(AVStore)
  70         const { get_lib_from_av } = AVStore
  71
  72         return {
  73             av_title_publication_types,
  74             get_lib_from_av,
  75         }
  76     },
  77     data() {
  78         return {
  79             filters: {
  80                 publication_title: "",
  81                 publication_type: "",
  82                 selection_type: "",
  83             },
  84             display_filters: false,
  85         }
  86     },
  87     inject: ['erm_provider'],
  88     methods: {
  89         show_resource: function (resource_id) {
  90             this.$router.push("/cgi-bin/koha/erm/eholdings/resources/" + resource_id)
  91         },
  92         filter_table: function () {
  93             $("#title_list").DataTable().draw()
  94         },
  95         toggle_filters: function (e) {
  96             this.display_filters = !this.display_filters
  97         },
  98         build_datatable: function () {
  99             let show_resource = this.show_resource
 100             let package_id = this.package_id
 101             let get_lib_from_av = this.get_lib_from_av
 102             let filters = this.filters
 103
 104             window['av_title_publication_types'] = this.av_title_publication_types.map(e => {
 105                 e['_id'] = e['authorised_value']
 106                 e['_str'] = e['lib']
 107                 return e
 108             })
 109
 110             let additional_filters = {}
 111             if (erm_provider != 'manual') {
 112                 additional_filters = {
 113                     publication_title: function () {
 114                         return filters.publication_title || ""
 115                     },
 116                     publication_type: function () {
 117                         return filters.publication_type || ""
 118                     },
 119                     selection_type: function () {
 120                         return filters.selection_type || ""
 121                     },
 122                 }
 123             }
 124
 125             $('#title_list').kohaTable({
 126                 "ajax": {
 127                     "url": "/api/v1/erm/eholdings/packages/" + package_id + "/resources",
 128                 },
 129                 ...(erm_provider != 'manual' ? { ordering: false } : {}),
 130                 ...(erm_provider != 'manual' ? { dom: '<"top pager"<"table_entries"ilp>>tr<"bottom pager"ip>' } : {}),
 131                 ...(erm_provider != 'manual' ? { aLengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]] } : {}),
 132                 "embed": ['title'],
 133                 autoWidth: false,
 134                 "columns": [
 135                     {
 136                         "title": __("Name"),
 137                         "data": "title.publication_title",
 138                         "searchable": (erm_provider == 'manual') ? 1 : 0,
 139                         "orderable": (erm_provider == 'manul') ? 1 : 0,
 140                         "render": function (data, type, row, meta) {
 141                             // Rendering done in drawCallback
 142                             return ""
 143                         }
 144                     },
 145                     {
 146                         "title": __("Publication type"),
 147                         "data": "title.publication_type",
 148                         "searchable": (erm_provider == 'manual') ? 1 : 0,
 149                         "orderable": (erm_provider == 'manul') ? 1 : 0,
 150                         "render": function (data, type, row, meta) {
 151                             return escape_str(get_lib_from_av("av_title_publication_types", row.title.publication_type))
 152                         }
 153                     },
 154                 ],
 155                 drawCallback: function (settings) {
 156
 157                     var api = new $.fn.dataTable.Api(settings)
 158
 159                     $.each($(this).find("tbody tr td:first-child"), function (index, e) {
 160                         let row = api.row(index).data()
 161                         if (!row) return // Happen if the table is empty
 162                         let n = createVNode("a", {
 163                             role: "button",
 164                             href: "/cgi-bin/koha/erm/eholdings/resources/" + row.resource_id,
 165                             onClick: (e) => {
 166                                 e.preventDefault()
 167                                 show_resource(row.resource_id)
 168                             }
 169                         },
 170                             `${row.title.publication_title}`
 171                         )
 172                         if (row.is_selected) {
 173                             n = createVNode('span', {}, [n, " ", createVNode("i", { class: "fa fa-check-square-o", style: { color: "green" }, title: __("Is selected") })])
 174                         }
 175                         render(n, e)
 176                     })
 177                 },
 178                 ...(erm_provider == 'manual' ? {
 179                     preDrawCallback: function (settings) {
 180                         var table_id = settings.nTable.id
 181                         if (erm_provider == 'manual') {
 182                             $("#" + table_id).find("thead th").eq(1).attr('data-filter', 'av_title_publication_types')
 183                         }
 184                     }
 185                 } : {}),
 186             }, null, erm_provider == 'manual' ? 1 : 0, additional_filters)
 187         },
 188     },
 189     mounted() {
 190         this.build_datatable()
 191     },
 192     beforeUnmount() {
 193         $('#title_list')
 194             .DataTable()
 195             .destroy(true)
 196     },
 197     props: {
 198         package_id: String,
 199     },
 200     name: 'EHoldingsPackageTitlesList',
 201 }
 202 </script>
 203
 204 <style scoped>
 205 #title_list_result {
 206     width: 60%;
 207     padding-left: 10rem;
 208 }
 209 #title_list {
 210     display: table;
 211 }
 212 #filters {
 213     margin: 0;
 214 }
 215 </style>