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                     "render": function (data, type, row, meta) {
  76                         // Rendering done in drawCallback
  77                         return "";
  78                     }
  79                 },
  80                 {
  81                     "title": __("Description"),
  82                     "data": "description",
  83                     "searchable": true,
  84                     "orderable": true
  85                 },
  86                 {
  87                     "title": __("Type"),
  88                     "data": "type",
  89                     "searchable": true,
  90                     "orderable": true,
  91                     "render": function (data, type, row, meta) {
  92                         return escape_str(av_license_types_map[row.type].lib)
  93                     }
  94                 },
  95                 {
  96                     "title": __("Status"),
  97                     "data": "status",
  98                     "searchable": true,
  99                     "orderable": true,
 100                     "render": function (data, type, row, meta) {
 101                         return escape_str(av_license_statuses_map[row.status].lib)
 102                     }
 103                 },
 104                 {
 105                     "title": __("Started on"),
 106                     "data": "started_on",
 107                     "searchable": true,
 108                     "orderable": true,
 109                     "render": function (data, type, row, meta) {
 110                         return $date(row.started_on)
 111                     }
 112                 },
 113                 {
 114                     "title": __("Ended on"),
 115                     "data": "ended_on",
 116                     "searchable": true,
 117                     "orderable": true,
 118                     "render": function (data, type, row, meta) {
 119                         return $date(row.ended_on)
 120                     }
 121                 },
 122                 {
 123                     "title": __("Actions"),
 124                     "data": function (row, type, val, meta) {
 125                         return '<div class="actions"></div>'
 126                     },
 127                     "className": "actions noExport",
 128                     "searchable": false,
 129                     "orderable": false
 130                 }
 131             ],
 132             drawCallback: function (settings) {
 133
 134                 var api = new $.fn.dataTable.Api(settings)
 135
 136                 $.each($(this).find("td .actions"), function (index, e) {
 137                     let license_id = api.row(index).data().license_id
 138                     let editButton = createVNode("a", {
 139                         class: "btn btn-default btn-xs", role: "button", onClick: () => {
 140                             edit_license(license_id)
 141                         }
 142                     },
 143                         [createVNode("i", { class: "fa fa-pencil", 'aria-hidden': "true" }), __("Edit")])
 144
 145                     let deleteButton = createVNode("a", {
 146                         class: "btn btn-default btn-xs", role: "button", onClick: () => {
 147                             delete_license(license_id)
 148                         }
 149                     },
 150                         [createVNode("i", { class: "fa fa-trash", 'aria-hidden': "true" }), __("Delete")])
 151
 152                     let n = createVNode('span', {}, [editButton, " ", deleteButton])
 153                     render(n, e)
 154                 })
 155
 156                 $.each($(this).find("tbody tr td:first-child"), function (index, e) {
 157                     let row = api.row(index).data()
 158                     if (!row) return // Happen if the table is empty
 159                     let n = createVNode("a", {
 160                         role: "button",
 161                         onClick: () => {
 162                             show_license(row.license_id)
 163                         }
 164                     },
 165                         `${row.name} (#${row.license_id})`
 166                     )
 167                     render(n, e)
 168                 })
 169             },
 170             preDrawCallback: function (settings) {
 171                 var table_id = settings.nTable.id
 172                 $("#" + table_id).find("thead th").eq(2).attr('data-filter', 'av_license_types')
 173                 $("#" + table_id).find("thead th").eq(3).attr('data-filter', 'av_license_statuses')
 174             }
 175
 176         }, license_table_settings, 1)
 177     },
 178     beforeUnmount() {
 179         $('#license_list')
 180             .DataTable()
 181             .destroy(true)
 182     },
 183     data: function () {
 184         return {
 185             licenses: [],
 186             initialized: false,
 187         }
 188     },
 189     beforeRouteEnter(to, from, next) {
 190         next(vm => {
 191             vm.getLicenses()
 192         })
 193     },
 194     methods: {
 195         async getLicenses() {
 196             const licenses = await fetchLicenses()
 197             this.licenses = licenses
 198             this.initialized = true
 199         },
 200         show_license: function (license_id) {
 201             this.$router.push("/cgi-bin/koha/erm/licenses/" + license_id)
 202         },
 203         edit_license: function (license_id) {
 204             this.$router.push("/cgi-bin/koha/erm/licenses/edit/" + license_id)
 205         },
 206         delete_license: function (license_id) {
 207             this.$router.push("/cgi-bin/koha/erm/licenses/delete/" + license_id)
 208         },
 209     },
 210     props: {
 211         av_license_types: Array,
 212         av_license_statuses: Array,
 213     },
 214     components: { Toolbar },
 215     name: "LicensesList",
 216 }
 217 </script>