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.package_name || "",
  46                 content_type: this.$route.query.content_type || "",
  47             },
  48         }
  49     },
  50     beforeRouteEnter(to, from, next) {
  51         next(vm => {
  52             vm.getPackages().then(() => vm.build_datatable())
  53         })
  54     },
  55     methods: {
  56         async getPackages() {
  57             const packages = await fetchLocalPackages()
  58             this.packages = packages
  59             this.initialized = true
  60         },
  61         show_package: function (package_id) {
  62             this.$router.push("/cgi-bin/koha/erm/eholdings/local/packages/" + package_id)
  63         },
  64         edit_package: function (package_id) {
  65             this.$router.push("/cgi-bin/koha/erm/eholdings/local/packages/edit/" + package_id)
  66         },
  67         delete_package: function (package_id) {
  68             this.$router.push("/cgi-bin/koha/erm/eholdings/local/packages/delete/" + package_id)
  69         },
  70         build_datatable: function () {
  71             let show_package = this.show_package
  72             let edit_package = this.edit_package
  73             let delete_package = this.delete_package
  74             let get_lib_from_av = this.get_lib_from_av
  75             let filters = this.filters
  76
  77             window['vendors'] = this.vendors.map(e => {
  78                 e['_id'] = e['id']
  79                 e['_str'] = e['name']
  80                 return e
  81             })
  82             window['av_package_types'] = this.av_package_types.map(e => {
  83                 e['_id'] = e['authorised_value']
  84                 e['_str'] = e['lib']
  85                 return e
  86             })
  87             window['av_package_content_types'] = this.av_package_content_types.map(e => {
  88                 e['_id'] = e['authorised_value']
  89                 e['_str'] = e['lib']
  90                 return e
  91             })
  92
  93             $('#package_list').kohaTable({
  94                 ajax: {
  95                     url: "/api/v1/erm/eholdings/local/packages",
  96                 },
  97                 embed: ['resources+count', 'vendor.name'],
  98                 order: [[0, "asc"]],
  99                 autoWidth: false,
 100                 searchCols: [
 101                     { search: filters.package_name },
 102                     null,
 103                     null,
 104                     { search: filters.content_type },
 105                     null,
 106                     null,
 107                 ],
 108                 columns: [
 109                     {
 110                         title: __("Name"),
 111                         data: "me.package_id:me.name",
 112                         searchable: true,
 113                         orderable: true,
 114                         render: function (data, type, row, meta) {
 115                             // Rendering done in drawCallback
 116                             return ""
 117                         }
 118                     },
 119                     {
 120                         title: __("Vendor"),
 121                         data: "vendor_id",
 122                         searchable: true,
 123                         orderable: true,
 124                         render: function (data, type, row, meta) {
 125                             return row.vendor ? escape_str(row.vendor.name) : ""
 126                         },
 127                     },
 128                     {
 129                         title: __("Type"),
 130                         data: "package_type",
 131                         searchable: true,
 132                         orderable: true,
 133                         render: function (data, type, row, meta) {
 134                             return escape_str(get_lib_from_av("av_package_types", row.package_type))
 135                         }
 136                     }, {
 137                         title: __("Content type"),
 138                         data: "content_type",
 139                         searchable: true,
 140                         orderable: true,
 141                         render: function (data, type, row, meta) {
 142                             return escape_str(get_lib_from_av("av_package_content_types", row.content_type))
 143                         }
 144                     },
 145                     {
 146                         title: __("Created on"),
 147                         data: "created_on",
 148                         searchable: false,
 149                         orderable: true,
 150                         render: function (data, type, row, meta) {
 151                             return $date(row.created_on)
 152                         }
 153                     },
 154                     {
 155                         title: __("Actions"),
 156                         data: function (row, type, val, meta) {
 157                             return '<div class="actions"></div>'
 158                         },
 159                         className: "actions noExport",
 160                         searchable: false,
 161                         orderable: false
 162                     }
 163                 ],
 164                 drawCallback: function (settings) {
 165
 166                     var api = new $.fn.dataTable.Api(settings)
 167
 168                     $.each($(this).find("td .actions"), function (index, e) {
 169                         let package_id = api.row(index).data().package_id
 170                         let editButton = createVNode("a", {
 171                             class: "btn btn-default btn-xs", role: "button", onClick: () => {
 172                                 edit_package(package_id)
 173                             }
 174                         },
 175                             [createVNode("i", { class: "fa fa-pencil", 'aria-hidden': "true" }), __("Edit")])
 176
 177                         let deleteButton = createVNode("a", {
 178                             class: "btn btn-default btn-xs", role: "button", onClick: () => {
 179                                 delete_package(package_id)
 180                             }
 181                         },
 182                             [createVNode("i", { class: "fa fa-trash", 'aria-hidden': "true" }), __("Delete")])
 183
 184                         let n = createVNode('span', {}, [editButton, " ", deleteButton])
 185                         render(n, e)
 186                     })
 187
 188                     $.each($(this).find("tbody tr td:first-child"), function (index, e) {
 189                         let row = api.row(index).data()
 190                         if (!row) return // Happen if the table is empty
 191                         let n = createVNode("a", {
 192                             role: "button",
 193                             href: "/cgi-bin/koha/erm/eholdings/local/packages/" + row.package_id,
 194                             onClick: (e) => {
 195                                 e.preventDefault()
 196                                 show_package(row.package_id)
 197                             }
 198                         },
 199                             `${row.name} (#${row.package_id})`
 200                         )
 201                         render(n, e)
 202                     })
 203                 },
 204                 preDrawCallback: function (settings) {
 205                     var table_id = settings.nTable.id
 206                     $("#" + table_id).find("thead th").eq(1).attr('data-filter', 'vendors')
 207                     $("#" + table_id).find("thead th").eq(2).attr('data-filter', 'av_package_types')
 208                     $("#" + table_id).find("thead th").eq(3).attr('data-filter', 'av_package_content_types')
 209                 }
 210             }, eholdings_packages_table_settings, 1)
 211
 212             if (filters.package_name) {
 213                 //$("#package_list").DataTable().column(0).search(filters.package_name).draw()
 214             }
 215             //myTable.column(0).search(control_id).column(1).search(sample_id).draw();
 216         },
 217     },
 218     components: { Toolbar },
 219     name: "EHoldingsLocalPackagesList",
 220 }
 221 </script>