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

   1 <template>
   2     <div id="title_list_result">
   3         <div id="filters">
   4             <a href="#" @click.prevent="toggle_filters($event)"
   5                 ><i class="fa fa-search"></i>
   6                 {{
   7                     display_filters ? $__("Hide filters") : $__("Show filters")
   8                 }}
   9             </a>
  10             <fieldset v-if="display_filters">
  11                 <ol>
  12                     <li>
  13                         <label>{{ $__("Title") }}:</label>
  14                         <input
  15                             type="text"
  16                             id="publication_title_filter"
  17                             v-model="filters.publication_title"
  18                             @keyup.enter="filter_table"
  19                         />
  20                     </li>
  21                     <li>
  22                         <label>{{ $__("Publication type") }}:</label>
  23                         <select
  24                             id="publication_type_filter"
  25                             v-model="filters.publication_type"
  26                         >
  27                             <option value="">{{ $__("All") }}</option>
  28                             <option
  29                                 v-for="type in av_title_publication_types"
  30                                 :key="type.value"
  31                                 :value="type.value"
  32                             >
  33                                 {{ type.description }}
  34                             </option>
  35                         </select>
  36                     </li>
  37                     <li>
  38                         <label>{{ $__("Selection status") }}:</label>
  39                         <select
  40                             id="selection_type_filter"
  41                             v-model="filters.selection_type"
  42                         >
  43                             <option value="0">{{ $__("All") }}</option>
  44                             <option value="1">{{ $__("Selected") }}</option>
  45                             <option value="2">{{ $__("Not selected") }}</option>
  46                         </select>
  47                     </li>
  48                 </ol>
  49
  50                 <input
  51                     @click="filter_table"
  52                     id="filter_table"
  53                     type="button"
  54                     :value="$__('Filter')"
  55                 />
  56             </fieldset>
  57         </div>
  58         <KohaTable ref="table" v-bind="tableOptions" @show="doShow"></KohaTable>
  59     </div>
  60 </template>
  61
  62 <script>
  63 import { inject, ref, reactive } from "vue"
  64 import { storeToRefs } from "pinia"
  65 import KohaTable from "../KohaTable.vue"
  66
  67 export default {
  68     setup() {
  69         const AVStore = inject("AVStore")
  70         const { av_title_publication_types } = storeToRefs(AVStore)
  71         const { get_lib_from_av, map_av_dt_filter } = AVStore
  72
  73         const table = ref()
  74         const filters = reactive({
  75             publication_title: "",
  76             publication_type: "",
  77             selection_type: "",
  78         })
  79
  80         return {
  81             av_title_publication_types,
  82             get_lib_from_av,
  83             escape_str,
  84             map_av_dt_filter,
  85             table,
  86         }
  87     },
  88     data() {
  89         this.filters = {
  90             publication_title: this.$route.query.publication_title || "",
  91             publication_type: this.$route.query.publication_type || "",
  92             selection_type: this.$route.query.selection_type || "",
  93         }
  94         let filters = this.filters
  95         return {
  96             tableOptions: {
  97                 columns: this.getTableColumns(),
  98                 url:
  99                     "/api/v1/erm/eholdings/ebsco/packages/" +
 100                     this.package_id +
 101                     "/resources",
 102                 options: {
 103                     embed: "title",
 104                     ordering: false,
 105                     dom: '<"top pager"<"table_entries"ilp>>tr<"bottom pager"ip>',
 106                     aLengthMenu: [
 107                         [10, 20, 50, 100],
 108                         [10, 20, 50, 100],
 109                     ],
 110                 },
 111                 filters_options: {
 112                     1: () =>
 113                         this.map_av_dt_filter("av_title_publication_types"),
 114                 },
 115                 actions: { 0: ["show"] },
 116                 default_filters: {
 117                     publication_title: function () {
 118                         return filters.publication_title || ""
 119                     },
 120                     publication_type: function () {
 121                         return filters.publication_type || ""
 122                     },
 123                     selection_type: function () {
 124                         return filters.selection_type || ""
 125                     },
 126                 },
 127             },
 128             display_filters: false,
 129         }
 130     },
 131     methods: {
 132         doShow: function ({ resource_id }, dt, event) {
 133             event.preventDefault()
 134             this.$router.push({
 135                 name: "EHoldingsEBSCOResourcesShow",
 136                 params: { resource_id },
 137             })
 138         },
 139         filter_table: function () {
 140             this.$refs.table.redraw(
 141                 "/api/v1/erm/eholdings/ebsco/packages/" +
 142                     this.package_id +
 143                     "/resources"
 144             )
 145         },
 146         toggle_filters: function (e) {
 147             this.display_filters = !this.display_filters
 148         },
 149         getTableColumns: function () {
 150             let get_lib_from_av = this.get_lib_from_av
 151             let map_av_dt_filter = this.map_av_dt_filter
 152
 153             return [
 154                 {
 155                     title: __("Name"),
 156                     data: "title.publication_title",
 157                     searchable: false,
 158                     orderable: false,
 159                     render: function (data, type, row, meta) {
 160                         let node =
 161                             '<a href="/cgi-bin/koha/erm/eholdings/ebsco/resources/' +
 162                             row.resource_id +
 163                             '" class="show">' +
 164                             escape_str(`${row.title.publication_title}`) +
 165                             "</a>"
 166                         if (row.is_selected) {
 167                             node +=
 168                                 " " +
 169                                 '<i class="fa fa-check-square" style="color: green; float: right;" title="' +
 170                                 __("Is selected") +
 171                                 '" />'
 172                         }
 173                         return node
 174                     },
 175                 },
 176                 {
 177                     title: __("Publication type"),
 178                     data: "title.publication_type",
 179                     searchable: false,
 180                     orderable: false,
 181                     render: function (data, type, row, meta) {
 182                         return escape_str(
 183                             get_lib_from_av(
 184                                 "av_title_publication_types",
 185                                 row.title.publication_type
 186                             )
 187                         )
 188                     },
 189                 },
 190             ]
 191         },
 192     },
 193     props: {
 194         package_id: String,
 195     },
 196     components: { KohaTable },
 197     name: "EHoldingsEBSCOPackageTitlesList",
 198 }
 199 </script>
 200
 201 <style scoped>
 202 #filters {
 203     margin: 0;
 204 }
 205 </style>