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

   1 <template>
   2     <div>
   3         <fieldset>
   4             {{ $__("Package name") }}:
   5             <input
   6                 type="text"
   7                 id="package_name_filter"
   8                 v-model="filters.package_name"
   9                 @keyup.enter="filter_table"
  10             />
  11             {{ $__("Content type") }}:
  12             <select id="content_type_filter" v-model="filters.content_type">
  13                 <option value="">{{ $__("All") }}</option>
  14                 <option
  15                     v-for="type in av_package_content_types"
  16                     :key="type.authorised_values"
  17                     :value="type.value"
  18                 >
  19                     {{ type.description }}
  20                 </option>
  21             </select>
  22             {{ $__("Selection status") }}:
  23             <select id="selection_type_filter" v-model="filters.selection_type">
  24                 <option value="0">{{ $__("All") }}</option>
  25                 <option value="1">{{ $__("Selected") }}</option>
  26                 <option value="2">{{ $__("Not selected") }}</option>
  27             </select>
  28             <input
  29                 @click="filter_table"
  30                 id="filter_table"
  31                 type="button"
  32                 :value="$__('Submit')"
  33             />
  34         </fieldset>
  35
  36         <!-- We need to display the table element to initiate DataTable -->
  37         <div
  38             id="package_list_result"
  39             :style="show_table ? 'display: block' : 'display: none'"
  40         >
  41             <div
  42                 v-if="
  43                     local_count_packages !== undefined &&
  44                     local_count_packages !== null
  45                 "
  46             >
  47                 <router-link :to="local_packages_url">
  48                     {{
  49                         $__("%s packages found locally").format(
  50                             local_count_packages
  51                         )
  52                     }}</router-link
  53                 >
  54             </div>
  55             <div id="package_list_result" class="page-section">
  56                 <KohaTable
  57                     v-if="show_table"
  58                     ref="table"
  59                     v-bind="tableOptions"
  60                     @show="doShow"
  61                 ></KohaTable>
  62             </div>
  63         </div>
  64     </div>
  65 </template>
  66
  67 <script>
  68 import { inject, ref, reactive } from "vue"
  69 import { storeToRefs } from "pinia"
  70 import { APIClient } from "../../fetch/api-client.js"
  71 import { build_url_params, build_url } from "../../composables/datatables"
  72 import KohaTable from "../KohaTable.vue"
  73
  74 export default {
  75     setup() {
  76         const AVStore = inject("AVStore")
  77         const { av_package_types, av_package_content_types } =
  78             storeToRefs(AVStore)
  79         const { get_lib_from_av, map_av_dt_filter } = AVStore
  80
  81         const ERMStore = inject("ERMStore")
  82         const { config } = ERMStore
  83
  84         const table = ref()
  85         const filters = reactive({
  86             package_name: "",
  87             content_type: "",
  88             selection_type: "",
  89         })
  90
  91         return {
  92             av_package_types,
  93             av_package_content_types,
  94             get_lib_from_av,
  95             escape_str,
  96             map_av_dt_filter,
  97             config,
  98             table,
  99         }
 100     },
 101     data: function () {
 102         this.filters = {
 103             package_name: this.$route.query.package_name || "",
 104             content_type: this.$route.query.content_type || "",
 105             selection_type: this.$route.query.selection_type || "",
 106         }
 107         let filters = this.filters
 108
 109         return {
 110             packages: [],
 111             initialized: true,
 112             tableOptions: {
 113                 columns: this.getTableColumns(),
 114                 url: "/api/v1/erm/eholdings/ebsco/packages",
 115                 options: {
 116                     embed: "resources+count,vendor.name",
 117                     ordering: false,
 118                     dom: '<"top pager"<"table_entries"ilp>>tr<"bottom pager"ip>',
 119                     aLengthMenu: [
 120                         [10, 20, 50, 100],
 121                         [10, 20, 50, 100],
 122                     ],
 123                 },
 124                 table_settings: this.eholdings_titles_table_settings,
 125                 actions: { 0: ["show"] },
 126                 default_filters: {
 127                     name: function () {
 128                         return filters.package_name || ""
 129                     },
 130                     content_type: function () {
 131                         return filters.content_type || ""
 132                     },
 133                     selection_type: function () {
 134                         return filters.selection_type || ""
 135                     },
 136                 },
 137             },
 138             show_table: build_url_params(filters).length ? true : false,
 139             local_count_packages: null,
 140         }
 141     },
 142     computed: {
 143         local_packages_url() {
 144             let { href } = this.$router.resolve({
 145                 name: "EHoldingsLocalPackagesList",
 146             })
 147             return build_url(href, this.filters)
 148         },
 149     },
 150     methods: {
 151         doShow: function ({ package_id }, dt, event) {
 152             event.preventDefault()
 153             this.$router.push({
 154                 name: "EHoldingsEBSCOPackagesShow",
 155                 params: { package_id },
 156             })
 157         },
 158         filter_table: async function () {
 159             let { href } = this.$router.resolve({
 160                 name: "EHoldingsEBSCOPackagesList",
 161             })
 162             let new_route = build_url(href, this.filters)
 163             this.$router.push(new_route)
 164             this.show_table = true
 165             this.local_count_packages = null
 166
 167             if (this.config.settings.ERMProviders.includes("local")) {
 168                 const client = APIClient.erm
 169                 const query = this.filters
 170                     ? {
 171                           "me.name": {
 172                               like: "%" + this.filters.package_name + "%",
 173                           },
 174                           ...(this.filters.content_type
 175                               ? { "me.content_type": this.filters.content_type }
 176                               : {}),
 177                       }
 178                     : {}
 179                 client.localPackages.count(query).then(
 180                     count => (this.local_count_packages = count),
 181                     error => {}
 182                 )
 183             }
 184
 185             if (this.$refs.table) {
 186                 this.$refs.table.redraw("/api/v1/erm/eholdings/ebsco/packages")
 187             }
 188         },
 189         getTableColumns: function () {
 190             let get_lib_from_av = this.get_lib_from_av
 191             let escape_str = this.escape_str
 192
 193             return [
 194                 {
 195                     title: __("Name"),
 196                     data: "me.package_id:me.name",
 197                     searchable: false,
 198                     orderable: false,
 199                     render: function (data, type, row, meta) {
 200                         let node =
 201                             '<a href="/cgi-bin/koha/erm/eholdings/ebsco/packages/' +
 202                             row.package_id +
 203                             '" class="show">' +
 204                             escape_str(`${row.name} (#${row.package_id})`) +
 205                             "</a>"
 206                         if (row.is_selected) {
 207                             node +=
 208                                 " " +
 209                                 '<i class="fa fa-check-square" style="color: green; float: right;" title="' +
 210                                 __("Is selected") +
 211                                 '" />'
 212                         }
 213                         return node
 214                     },
 215                 },
 216                 {
 217                     title: __("Vendor"),
 218                     data: "vendor_id",
 219                     searchable: false,
 220                     orderable: false,
 221                     render: function (data, type, row, meta) {
 222                         return row.vendor ? escape_str(row.vendor.name) : ""
 223                     },
 224                 },
 225                 {
 226                     title: __("Type"),
 227                     data: "package_type",
 228                     searchable: false,
 229                     orderable: false,
 230                     render: function (data, type, row, meta) {
 231                         return escape_str(
 232                             get_lib_from_av(
 233                                 "av_package_types",
 234                                 row.package_type
 235                             )
 236                         )
 237                     },
 238                 },
 239                 {
 240                     title: __("Content type"),
 241                     searchable: false,
 242                     orderable: false,
 243                     render: function (data, type, row, meta) {
 244                         return escape_str(
 245                             get_lib_from_av(
 246                                 "av_package_content_types",
 247                                 row.content_type
 248                             )
 249                         )
 250                     },
 251                 },
 252             ]
 253         },
 254     },
 255     components: { KohaTable },
 256     name: "EHoldingsEBSCOPackagesList",
 257 }
 258 </script>