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

   1 <template>
   2     <div>
   3         <div v-if="!this.initialized">{{ $t("Loading") }}</div>
   4         <div v-else-if="this.packages" id="packages_list">
   5             <Toolbar />
   6             <div v-if="this.packages.length" id="package_list_result">
   7                 <table id="package_list"></table>
   8             </div>
   9             <div v-else-if="this.initialized" class="dialog message">
  10                 {{ $t("There are no packages defined") }}
  11             </div>
  12         </div>
  13     </div>
  14 </template>
  15
  16 <script>
  17 import Toolbar from "./EHoldingsLocalPackagesToolbar.vue"
  18 import { createVNode, render } from 'vue'
  19 import { useVendorStore } from "../../stores/vendors"
  20 import { useAVStore } from "../../stores/authorised_values"
  21 import { storeToRefs } from "pinia"
  22 import { fetchLocalPackages } from "../../fetch"
  23
  24 export default {
  25     setup() {
  26         const vendorStore = useVendorStore() // FIXME We only need that for 'manual'
  27         const { vendors } = storeToRefs(vendorStore)
  28
  29         const AVStore = useAVStore()
  30         const { av_package_types, av_package_content_types } = storeToRefs(AVStore)
  31         const { get_lib_from_av } = AVStore
  32
  33         return {
  34             vendors,
  35             av_package_types,
  36             av_package_content_types,
  37             get_lib_from_av,
  38         }
  39     },
  40     data: function () {
  41         return {
  42             packages: [],
  43             initialized: false,
  44             filters: {
  45                 package_name: this.$route.query.q || "",
  46             },
  47         }
  48     },
  49     beforeRouteEnter(to, from, next) {
  50         next(vm => {
  51             vm.getPackages().then(() => vm.build_datatable())
  52         })
  53     },
  54     methods: {
  55         async getPackages() {
  56             const packages = await fetchLocalPackages()
  57             this.packages = packages
  58             this.initialized = true
  59         },
  60         show_package: function (package_id) {
  61             this.$router.push("/cgi-bin/koha/erm/eholdings/local/packages/" + package_id)
  62         },
  63         edit_package: function (package_id) {
  64             this.$router.push("/cgi-bin/koha/erm/eholdings/local/packages/edit/" + package_id)
  65         },
  66         delete_package: function (package_id) {
  67             this.$router.push("/cgi-bin/koha/erm/eholdings/local/packages/delete/" + package_id)
  68         },
  69         build_datatable: function () {
  70             let show_package = this.show_package
  71             let edit_package = this.edit_package
  72             let delete_package = this.delete_package
  73             let get_lib_from_av = this.get_lib_from_av
  74             let filters = this.filters
  75
  76             window['vendors'] = this.vendors.map(e => {
  77                 e['_id'] = e['id']
  78                 e['_str'] = e['name']
  79                 return e
  80             })
  81             window['av_package_types'] = this.av_package_types.map(e => {
  82                 e['_id'] = e['authorised_value']
  83                 e['_str'] = e['lib']
  84                 return e
  85             })
  86             window['av_package_content_types'] = this.av_package_content_types.map(e => {
  87                 e['_id'] = e['authorised_value']
  88                 e['_str'] = e['lib']
  89                 return e
  90             })
  91
  92             $('#package_list').kohaTable({
  93                 ajax: {
  94                     url: "/api/v1/erm/eholdings/local/packages",
  95                 },
  96                 embed: ['resources+count', 'vendor.name'],
  97                 order: [[0, "asc"]],
  98                 search: { search: filters.package_name },
  99                 autoWidth: false,
 100                 columns: [
 101                     {
 102                         title: __("Name"),
 103                         data: "me.package_id:me.name",
 104                         searchable: true,
 105                         orderable: true,
 106                         render: function (data, type, row, meta) {
 107                             // Rendering done in drawCallback
 108                             return ""
 109                         }
 110                     },
 111                     {
 112                         title: __("Vendor"),
 113                         data: "vendor_id",
 114                         searchable: true,
 115                         orderable: true,
 116                         render: function (data, type, row, meta) {
 117                             return row.vendor ? escape_str(row.vendor.name) : ""
 118                         },
 119                     },
 120                     {
 121                         title: __("Type"),
 122                         data: "package_type",
 123                         searchable: true,
 124                         orderable: true,
 125                         render: function (data, type, row, meta) {
 126                             return escape_str(get_lib_from_av("av_package_types", row.package_type))
 127                         }
 128                     }, {
 129                         title: __("Content type"),
 130                         data: "content_type",
 131                         searchable: true,
 132                         orderable: true,
 133                         render: function (data, type, row, meta) {
 134                             return escape_str(get_lib_from_av("av_package_content_types", row.content_type))
 135                         }
 136                     },
 137                     {
 138                         title: __("Created on"),
 139                         data: "created_on",
 140                         searchable: false,
 141                         orderable: true,
 142                         render: function (data, type, row, meta) {
 143                             return $date(row.created_on)
 144                         }
 145                     },
 146                     {
 147                         title: __("Actions"),
 148                         data: function (row, type, val, meta) {
 149                             return '<div class="actions"></div>'
 150                         },
 151                         className: "actions noExport",
 152                         searchable: false,
 153                         orderable: false
 154                     }
 155                 ],
 156                 drawCallback: function (settings) {
 157
 158                     var api = new $.fn.dataTable.Api(settings)
 159
 160                     $.each($(this).find("td .actions"), function (index, e) {
 161                         let package_id = api.row(index).data().package_id
 162                         let editButton = createVNode("a", {
 163                             class: "btn btn-default btn-xs", role: "button", onClick: () => {
 164                                 edit_package(package_id)
 165                             }
 166                         },
 167                             [createVNode("i", { class: "fa fa-pencil", 'aria-hidden': "true" }), __("Edit")])
 168
 169                         let deleteButton = createVNode("a", {
 170                             class: "btn btn-default btn-xs", role: "button", onClick: () => {
 171                                 delete_package(package_id)
 172                             }
 173                         },
 174                             [createVNode("i", { class: "fa fa-trash", 'aria-hidden': "true" }), __("Delete")])
 175
 176                         let n = createVNode('span', {}, [editButton, " ", deleteButton])
 177                         render(n, e)
 178                     })
 179
 180                     $.each($(this).find("tbody tr td:first-child"), function (index, e) {
 181                         let row = api.row(index).data()
 182                         if (!row) return // Happen if the table is empty
 183                         let n = createVNode("a", {
 184                             role: "button",
 185                             href: "/cgi-bin/koha/erm/eholdings/local/packages/" + row.package_id,
 186                             onClick: (e) => {
 187                                 e.preventDefault()
 188                                 show_package(row.package_id)
 189                             }
 190                         },
 191                             `${row.name} (#${row.package_id})`
 192                         )
 193                         render(n, e)
 194                     })
 195                 },
 196                 preDrawCallback: function (settings) {
 197                     var table_id = settings.nTable.id
 198                     $("#" + table_id).find("thead th").eq(1).attr('data-filter', 'vendors')
 199                     $("#" + table_id).find("thead th").eq(2).attr('data-filter', 'av_package_types')
 200                     $("#" + table_id).find("thead th").eq(3).attr('data-filter', 'av_package_content_types')
 201                 }
 202             }, eholdings_packages_table_settings, 1)
 203         },
 204     },
 205     components: { Toolbar },
 206     name: "EHoldingsLocalPackagesList",
 207 }
 208 </script>