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

   1 <template>
   2     <div>
   3         <div v-if="!initialized">{{ $__("Loading") }}</div>
   4         <div v-else-if="packages" id="packages_list">
   5             <Toolbar />
   6             <div v-if="packages.length" id="package_list_result">
   7                 <table :id="table_id"></table>
   8             </div>
   9             <div v-else-if="initialized" class="dialog message">
  10                 {{ $__("There are no packages defined") }}
  11             </div>
  12         </div>
  13     </div>
  14 </template>
  15
  16 <script>
  17 import Toolbar from "./EHoldingsLocalPackagesToolbar.vue"
  18 import { inject, createVNode, render } from "vue"
  19 import { storeToRefs } from "pinia"
  20 import { fetchLocalPackages } from "../../fetch"
  21 import { useDataTable } from "../../composables/datatables"
  22
  23 export default {
  24     setup() {
  25         const vendorStore = inject("vendorStore")
  26         const { vendors } = storeToRefs(vendorStore)
  27
  28         const AVStore = inject("AVStore")
  29         const { get_lib_from_av, map_av_dt_filter } = AVStore
  30
  31         const table_id = "package_list"
  32         useDataTable(table_id)
  33
  34         return {
  35             vendors,
  36             get_lib_from_av,
  37             map_av_dt_filter,
  38             table_id,
  39         }
  40     },
  41     data: function () {
  42         return {
  43             packages: [],
  44             initialized: false,
  45             filters: {
  46                 package_name: this.$route.query.package_name || "",
  47                 content_type: this.$route.query.content_type || "",
  48             },
  49         }
  50     },
  51     beforeRouteEnter(to, from, next) {
  52         next(vm => {
  53             vm.getPackages().then(() => vm.build_datatable())
  54         })
  55     },
  56     methods: {
  57         async getPackages() {
  58             const packages = await fetchLocalPackages()
  59             this.packages = packages
  60             this.initialized = true
  61         },
  62         show_package: function (package_id) {
  63             this.$router.push(
  64                 "/cgi-bin/koha/erm/eholdings/local/packages/" + package_id
  65             )
  66         },
  67         edit_package: function (package_id) {
  68             this.$router.push(
  69                 "/cgi-bin/koha/erm/eholdings/local/packages/edit/" + package_id
  70             )
  71         },
  72         delete_package: function (package_id) {
  73             this.$router.push(
  74                 "/cgi-bin/koha/erm/eholdings/local/packages/delete/" +
  75                     package_id
  76             )
  77         },
  78         build_datatable: function () {
  79             let show_package = this.show_package
  80             let edit_package = this.edit_package
  81             let delete_package = this.delete_package
  82             let get_lib_from_av = this.get_lib_from_av
  83             let map_av_dt_filter = this.map_av_dt_filter
  84             let filters = this.filters
  85             let table_id = this.table_id
  86
  87             window["vendors"] = this.vendors.map(e => {
  88                 e["_id"] = e["id"]
  89                 e["_str"] = e["name"]
  90                 return e
  91             })
  92             let avs = ["av_package_types", "av_package_content_types"]
  93             avs.forEach(function (av_cat) {
  94                 window[av_cat] = map_av_dt_filter(av_cat)
  95             })
  96
  97             $("#" + table_id).kohaTable(
  98                 {
  99                     ajax: {
 100                         url: "/api/v1/erm/eholdings/local/packages",
 101                     },
 102                     embed: ["resources+count", "vendor.name"],
 103                     order: [[0, "asc"]],
 104                     autoWidth: false,
 105                     searchCols: [
 106                         { search: filters.package_name },
 107                         null,
 108                         null,
 109                         { search: filters.content_type },
 110                         null,
 111                         null,
 112                     ],
 113                     columns: [
 114                         {
 115                             title: __("Name"),
 116                             data: "me.package_id:me.name",
 117                             searchable: true,
 118                             orderable: true,
 119                             render: function (data, type, row, meta) {
 120                                 // Rendering done in drawCallback
 121                                 return ""
 122                             },
 123                         },
 124                         {
 125                             title: __("Vendor"),
 126                             data: "vendor_id",
 127                             searchable: true,
 128                             orderable: true,
 129                             render: function (data, type, row, meta) {
 130                                 return row.vendor
 131                                     ? escape_str(row.vendor.name)
 132                                     : ""
 133                             },
 134                         },
 135                         {
 136                             title: __("Type"),
 137                             data: "package_type",
 138                             searchable: true,
 139                             orderable: true,
 140                             render: function (data, type, row, meta) {
 141                                 return escape_str(
 142                                     get_lib_from_av(
 143                                         "av_package_types",
 144                                         row.package_type
 145                                     )
 146                                 )
 147                             },
 148                         },
 149                         {
 150                             title: __("Content type"),
 151                             data: "content_type",
 152                             searchable: true,
 153                             orderable: true,
 154                             render: function (data, type, row, meta) {
 155                                 return escape_str(
 156                                     get_lib_from_av(
 157                                         "av_package_content_types",
 158                                         row.content_type
 159                                     )
 160                                 )
 161                             },
 162                         },
 163                         {
 164                             title: __("Created on"),
 165                             data: "created_on",
 166                             searchable: false,
 167                             orderable: true,
 168                             render: function (data, type, row, meta) {
 169                                 return $date(row.created_on)
 170                             },
 171                         },
 172                         {
 173                             title: __("Notes"),
 174                             data: "notes",
 175                             searchable: true,
 176                             orderable: true,
 177                             render: function (data, type, row, meta) {
 178                                 return row.notes
 179                             },
 180                         },
 181                         {
 182                             title: __("Actions"),
 183                             data: function (row, type, val, meta) {
 184                                 return '<div class="actions"></div>'
 185                             },
 186                             className: "actions noExport",
 187                             searchable: false,
 188                             orderable: false,
 189                         },
 190                     ],
 191                     drawCallback: function (settings) {
 192                         var api = new $.fn.dataTable.Api(settings)
 193
 194                         $.each(
 195                             $(this).find("td .actions"),
 196                             function (index, e) {
 197                                 let tr = $(this).parent().parent()
 198                                 let package_id = api.row(tr).data().package_id
 199                                 let editButton = createVNode(
 200                                     "a",
 201                                     {
 202                                         class: "btn btn-default btn-xs",
 203                                         role: "button",
 204                                         onClick: () => {
 205                                             edit_package(package_id)
 206                                         },
 207                                     },
 208                                     [
 209                                         createVNode("i", {
 210                                             class: "fa fa-pencil",
 211                                             "aria-hidden": "true",
 212                                         }),
 213                                         __("Edit"),
 214                                     ]
 215                                 )
 216
 217                                 let deleteButton = createVNode(
 218                                     "a",
 219                                     {
 220                                         class: "btn btn-default btn-xs",
 221                                         role: "button",
 222                                         onClick: () => {
 223                                             delete_package(package_id)
 224                                         },
 225                                     },
 226                                     [
 227                                         createVNode("i", {
 228                                             class: "fa fa-trash",
 229                                             "aria-hidden": "true",
 230                                         }),
 231                                         __("Delete"),
 232                                     ]
 233                                 )
 234
 235                                 let n = createVNode("span", {}, [
 236                                     editButton,
 237                                     " ",
 238                                     deleteButton,
 239                                 ])
 240                                 render(n, e)
 241                             }
 242                         )
 243
 244                         $.each(
 245                             $(this).find("tbody tr td:first-child"),
 246                             function (index, e) {
 247                                 let tr = $(this).parent()
 248                                 let row = api.row(tr).data()
 249                                 if (!row) return // Happen if the table is empty
 250                                 let n = createVNode(
 251                                     "a",
 252                                     {
 253                                         role: "button",
 254                                         href:
 255                                             "/cgi-bin/koha/erm/eholdings/local/packages/" +
 256                                             row.package_id,
 257                                         onClick: e => {
 258                                             e.preventDefault()
 259                                             show_package(row.package_id)
 260                                         },
 261                                     },
 262                                     `${row.name} (#${row.package_id})`
 263                                 )
 264                                 render(n, e)
 265                             }
 266                         )
 267                     },
 268                     preDrawCallback: function (settings) {
 269                         $("#" + table_id)
 270                             .find("thead th")
 271                             .eq(1)
 272                             .attr("data-filter", "vendors")
 273                         $("#" + table_id)
 274                             .find("thead th")
 275                             .eq(2)
 276                             .attr("data-filter", "av_package_types")
 277                         $("#" + table_id)
 278                             .find("thead th")
 279                             .eq(3)
 280                             .attr("data-filter", "av_package_content_types")
 281                     },
 282                 },
 283                 eholdings_packages_table_settings,
 284                 1
 285             )
 286         },
 287     },
 288     components: { Toolbar },
 289     name: "EHoldingsLocalPackagesList",
 290 }
 291 </script>