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

   1 <template>
   2     <div v-if="!this.initialized">{{ $t("Loading") }}</div>
   3     <div v-else-if="this.licenses" id="licenses_list">
   4         <Toolbar />
   5         <table v-if="licenses.length" id="license_list"></table>
   6         <div v-else-if="this.initialized" class="dialog message">
   7             {{ $t("There are no licenses defined") }}
   8         </div>
   9     </div>
  10 </template>
  11
  12 <script>
  13 import Toolbar from "./LicensesToolbar.vue"
  14 import { createVNode, render } from 'vue'
  15 import { useAVStore } from "../../stores/authorised_values"
  16 import { storeToRefs } from "pinia"
  17 import { fetchLicenses } from "../../fetch"
  18
  19 export default {
  20     setup() {
  21         const AVStore = useAVStore()
  22         const {
  23             av_license_types,
  24             av_license_statuses,
  25         } = storeToRefs(AVStore)
  26
  27         return {
  28             av_license_types,
  29             av_license_statuses,
  30         }
  31     },
  32     updated() {
  33         let show_license = this.show_license
  34         let edit_license = this.edit_license
  35         let delete_license = this.delete_license
  36         window['av_license_types'] = this.av_license_types.map(e => {
  37             e['_id'] = e['authorised_value']
  38             e['_str'] = e['lib']
  39             return e
  40         })
  41         let av_license_types_map = this.av_license_types.reduce((map, e) => {
  42             map[e.authorised_value] = e
  43             return map
  44         }, {})
  45         window['av_license_statuses'] = this.av_license_statuses.map(e => {
  46             e['_id'] = e['authorised_value']
  47             e['_str'] = e['lib']
  48             return e
  49         })
  50         let av_license_statuses_map = this.av_license_statuses.reduce((map, e) => {
  51             map[e.authorised_value] = e
  52             return map
  53         }, {})
  54
  55         $('#license_list').kohaTable({
  56             "ajax": {
  57                 "url": licenses_table_url,
  58             },
  59             "order": [[0, "asc"]],
  60             "columnDefs": [{
  61                 "targets": [0, 1],
  62                 "render": function (data, type, row, meta) {
  63                     if (type == 'display') {
  64                         return escape_str(data)
  65                     }
  66                     return data
  67                 }
  68             }],
  69             "columns": [
  70                 {
  71                     "title": __("Name"),
  72                     "data": ["me.license_id", "me.name"],
  73                     "searchable": true,
  74                     "orderable": true,
  75                     // Rendering done in drawCallback
  76                 },
  77                 {
  78                     "title": __("Description"),
  79                     "data": "description",
  80                     "searchable": true,
  81                     "orderable": true
  82                 },
  83                 {
  84                     "title": __("Type"),
  85                     "data": "type",
  86                     "searchable": true,
  87                     "orderable": true,
  88                     "render": function (data, type, row, meta) {
  89                         return escape_str(av_license_types_map[row.type].lib)
  90                     }
  91                 },
  92                 {
  93                     "title": __("Status"),
  94                     "data": "status",
  95                     "searchable": true,
  96                     "orderable": true,
  97                     "render": function (data, type, row, meta) {
  98                         return escape_str(av_license_statuses_map[row.status].lib)
  99                     }
 100                 },
 101                 {
 102                     "title": __("Started on"),
 103                     "data": "started_on",
 104                     "searchable": true,
 105                     "orderable": true,
 106                     "render": function (data, type, row, meta) {
 107                         return $date(row.started_on)
 108                     }
 109                 },
 110                 {
 111                     "title": __("Ended on"),
 112                     "data": "ended_on",
 113                     "searchable": true,
 114                     "orderable": true,
 115                     "render": function (data, type, row, meta) {
 116                         return $date(row.ended_on)
 117                     }
 118                 },
 119                 {
 120                     "title": __("Actions"),
 121                     "data": function (row, type, val, meta) {
 122                         return '<div class="actions"></div>'
 123                     },
 124                     "className": "actions noExport",
 125                     "searchable": false,
 126                     "orderable": false
 127                 }
 128             ],
 129             drawCallback: function (settings) {
 130
 131                 var api = new $.fn.dataTable.Api(settings)
 132
 133                 $.each($(this).find("td .actions"), function (index, e) {
 134                     let license_id = api.row(index).data().license_id
 135                     let editButton = createVNode("a", {
 136                         class: "btn btn-default btn-xs", role: "button", onClick: () => {
 137                             edit_license(license_id)
 138                         }
 139                     },
 140                         [createVNode("i", { class: "fa fa-pencil", 'aria-hidden': "true" }), __("Edit")])
 141
 142                     let deleteButton = createVNode("a", {
 143                         class: "btn btn-default btn-xs", role: "button", onClick: () => {
 144                             delete_license(license_id)
 145                         }
 146                     },
 147                         [createVNode("i", { class: "fa fa-trash", 'aria-hidden': "true" }), __("Delete")])
 148
 149                     let n = createVNode('span', {}, [editButton, " ", deleteButton])
 150                     render(n, e)
 151                 })
 152
 153                 $.each($(this).find("tbody tr td:first-child"), function (index, e) {
 154                     let row = api.row(index).data()
 155                     if (!row) return // Happen if the table is empty
 156                     let n = createVNode("a", {
 157                         role: "button",
 158                         onClick: () => {
 159                             show_license(row.license_id)
 160                         }
 161                     },
 162                         `${row.name} (#${row.license_id})`
 163                     )
 164                     render(n, e)
 165                 })
 166             },
 167             preDrawCallback: function (settings) {
 168                 var table_id = settings.nTable.id
 169                 $("#" + table_id).find("thead th").eq(2).attr('data-filter', 'av_license_types')
 170                 $("#" + table_id).find("thead th").eq(3).attr('data-filter', 'av_license_statuses')
 171             }
 172
 173         }, license_table_settings, 1)
 174     },
 175     beforeUnmount() {
 176         $('#license_list')
 177             .DataTable()
 178             .destroy(true)
 179     },
 180     data: function () {
 181         return {
 182             licenses: [],
 183             initialized: false,
 184         }
 185     },
 186     beforeRouteEnter(to, from, next) {
 187         next(vm => {
 188             vm.getLicenses()
 189         })
 190     },
 191     methods: {
 192         async getLicenses() {
 193             const licenses = await fetchLicenses()
 194             this.licenses = licenses
 195             this.initialized = true
 196         },
 197         show_license: function (license_id) {
 198             this.$router.push("/cgi-bin/koha/erm/licenses/" + license_id)
 199         },
 200         edit_license: function (license_id) {
 201             this.$router.push("/cgi-bin/koha/erm/licenses/edit/" + license_id)
 202         },
 203         delete_license: function (license_id) {
 204             this.$router.push("/cgi-bin/koha/erm/licenses/delete/" + license_id)
 205         },
 206     },
 207     props: {
 208         av_license_types: Array,
 209         av_license_statuses: Array,
 210     },
 211     components: { Toolbar },
 212     name: "LicensesList",
 213 }
 214 </script>