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