koha-dev.rot13.org Git - srvgit/blob - koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsList.vue

   1 <template>
   2     <div v-if="!this.initialized">{{ $t("Loading") }}</div>
   3     <div v-else-if="this.eholdings" id="eholdings_list">
   4         <Toolbar />
   5         <table v-if="this.eholdings.length" id="eholding_list"></table>
   6         <div v-else-if="this.initialized" class="dialog message">
   7             {{ $t("There are no eHoldings defined") }}
   8         </div>
   9     </div>
  10 </template>
  11
  12 <script>
  13 import Toolbar from "./EHoldingsToolbar.vue"
  14 import { createVNode, render } from 'vue'
  15 import { useVendorStore } from "../../stores/vendors"
  16 import { storeToRefs } from "pinia"
  17 import { fetchEHoldings } from "../../fetch"
  18
  19 export default {
  20     setup() {
  21         const vendorStore = useVendorStore()
  22         const { vendors } = storeToRefs(vendorStore)
  23
  24         return {
  25             vendors,
  26         }
  27     },
  28     data: function () {
  29         return {
  30             eholdings: [],
  31             initialized: false,
  32         }
  33     },
  34     beforeRouteEnter(to, from, next) {
  35         next(vm => {
  36             vm.getEHoldings()
  37         })
  38     },
  39     methods: {
  40         async getEHoldings() {
  41             const eholdings = await fetchEHoldings()
  42             this.eholdings = eholdings
  43             console.log(this.eholdings)
  44             this.initialized = true
  45         },
  46         show_eholding: function (eholding_id) {
  47             this.$router.push("/cgi-bin/koha/erm/eholdings/" + eholding_id)
  48         },
  49         edit_eholding: function (eholding_id) {
  50             this.$router.push("/cgi-bin/koha/erm/eholdings/edit/" + eholding_id)
  51         },
  52         delete_eholding: function (eholding_id) {
  53             this.$router.push("/cgi-bin/koha/erm/eholdings/delete/" + eholding_id)
  54         },
  55     },
  56     updated() {
  57         let show_eholding = this.show_eholding
  58         let edit_eholding = this.edit_eholding
  59         let delete_eholding = this.delete_eholding
  60
  61         window['vendors'] = this.vendors.map(e => {
  62             e['_id'] = e['id']
  63             e['_str'] = e['name']
  64             return e
  65         })
  66         let vendors_map = this.vendors.reduce((map, e) => {
  67             map[e.id] = e
  68             return map
  69         }, {})
  70
  71         $('#eholding_list').kohaTable({
  72             "ajax": {
  73                 "url": eholdings_table_url,
  74             },
  75             "order": [[0, "asc"]],
  76             "columnDefs": [{
  77                 "targets": [1],
  78                 "render": function (data, type, row, meta) {
  79                     if (type == 'display') {
  80                         return escape_str(data)
  81                     }
  82                     return data
  83                 }
  84             }],
  85             "columns": [
  86                 {
  87                     "title": __("Title"),
  88                     "data": ["me.eholding_id", "me.publication_title"],
  89                     "searchable": true,
  90                     "orderable": true,
  91                     // Rendering done in drawCallback
  92                 },
  93                 {
  94                     "title": __("Vendor"),
  95                     "data": "vendor_id",
  96                     "searchable": true,
  97                     "orderable": true,
  98                     "render": function (data, type, row, meta) {
  99                         return row.vendor_id != undefined ? escape_str(vendors_map[row.vendor_id].name) : ""
 100                     }
 101                 },
 102                 {
 103                     "title": __("Publication type"),
 104                     "data": "publication_type",
 105                     "searchable": true,
 106                     "orderable": true,
 107                 },
 108                 {
 109                     "title": __("Identifier"),
 110                     "data": ["print_identifier", "online_identifier"],
 111                     "searchable": true,
 112                     "orderable": true,
 113                     "render": function (data, type, row, meta) {
 114                         let print_identifier = row.print_identifier
 115                         let online_identifier = row.online_identifier
 116                         return (print_identifier ? escape_str(_("ISBN (Print): %s").format(print_identifier)) : "") +
 117                             (online_identifier ? escape_str(_("ISBN (Online): %s").format(online_identifier)) : "")
 118                     }
 119                 },
 120                 {
 121                     "title": __("Actions"),
 122                     "data": function (row, type, val, meta) {
 123                         return '<div class="actions"></div>'
 124                     },
 125                     "className": "actions noExport",
 126                     "searchable": false,
 127                     "orderable": false
 128                 }
 129             ],
 130             drawCallback: function (settings) {
 131
 132                 var api = new $.fn.dataTable.Api(settings)
 133
 134                 $.each($(this).find("td .actions"), function (index, e) {
 135                     let eholding_id = api.row(index).data().eholding_id
 136                     let editButton = createVNode("a", {
 137                         class: "btn btn-default btn-xs", role: "button", onClick: () => {
 138                             edit_eholding(eholding_id)
 139                         }
 140                     },
 141                         [createVNode("i", { class: "fa fa-pencil", 'aria-hidden': "true" }), __("Edit")])
 142
 143                     let deleteButton = createVNode("a", {
 144                         class: "btn btn-default btn-xs", role: "button", onClick: () => {
 145                             delete_eholding(eholding_id)
 146                         }
 147                     },
 148                         [createVNode("i", { class: "fa fa-trash", 'aria-hidden': "true" }), __("Delete")])
 149
 150                     let n = createVNode('span', {}, [editButton, " ", deleteButton])
 151                     render(n, e)
 152                 })
 153
 154                 $.each($(this).find("tbody tr td:first-child"), function (index, e) {
 155                     let row = api.row(index).data()
 156                     if (!row) return // Happen if the table is empty
 157                     let n = createVNode("a", {
 158                         role: "button",
 159                         onClick: () => {
 160                             show_eholding(row.eholding_id)
 161                         }
 162                     },
 163                         `${row.publication_title} (#${row.eholding_id})`
 164                     )
 165                     render(n, e)
 166                 })
 167             },
 168             preDrawCallback: function (settings) {
 169                 var table_id = settings.nTable.id
 170                 $("#" + table_id).find("thead th").eq(1).attr('data-filter', 'vendors')
 171             }
 172         }, eholding_table_settings, 1)
 173     },
 174     beforeUnmount() {
 175         $('#eholding_list')
 176             .DataTable()
 177             .destroy(true)
 178     },
 179     components: { Toolbar },
 180     name: "EHoldingsList",
 181 }
 182 </script>