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

   1 <template>
   2     <div>
   3         <table v-if="agreements.length" id="agreement_list"></table>
   4         <div v-else-if="this.initialized" class="dialog message">
   5             There are no agreements defined.
   6         </div>
   7         <div v-else>Loading...</div>
   8     </div>
   9 </template>
  10
  11 <script>
  12 import ButtonEdit from "./ButtonEdit.vue"
  13 import ButtonDelete from "./ButtonDelete.vue"
  14 import { createVNode, defineComponent, render, resolveComponent } from 'vue'
  15 export default {
  16     created() {
  17         const apiUrl = '/api/v1/erm/agreements'
  18
  19         fetch(apiUrl)
  20             .then(res => res.json())
  21             .then(
  22                 (result) => {
  23                     this.agreements = result
  24                     this.initialized = true
  25                 },
  26             ).catch(
  27                 (error) => {
  28                     this.$emit('set-error', error)
  29                 }
  30             )
  31     },
  32     updated() {
  33         let show_agreement = this.show_agreement
  34         let edit_agreement = this.edit_agreement
  35         let delete_agreement = this.delete_agreement
  36         window['vendors'] = this.vendors.map(e => {
  37             e['_id'] = e['id']
  38             e['_str'] = e['name']
  39             return e
  40         })
  41         let vendors_map = this.vendors.reduce((map, e) => {
  42             map[e.id] = e
  43             return map
  44         }, {})
  45         window['av_agreement_statuses'] = this.av_agreement_statuses.map(e => {
  46             e['_id'] = e['authorised_value']
  47             e['_str'] = e['lib']
  48             return e
  49         })
  50         let av_agreement_statuses_map = this.av_agreement_statuses.reduce((map, e) => {
  51             map[e.authorised_value] = e
  52             return map
  53         }, {})
  54         window['av_agreement_closure_reasons'] = this.av_agreement_closure_reasons.map(e => {
  55             e['_id'] = e['authorised_value']
  56             e['_str'] = e['lib']
  57             return e
  58         })
  59         let av_agreement_closure_reasons_map = this.av_agreement_closure_reasons.reduce((map, e) => {
  60             map[e.authorised_value] = e
  61             return map
  62         }, {})
  63         window['av_agreement_renewal_priorities'] = this.av_agreement_renewal_priorities.map(e => {
  64             e['_id'] = e['authorised_value']
  65             e['_str'] = e['lib']
  66             return e
  67         })
  68         let av_agreement_renewal_priorities_map = this.av_agreement_renewal_priorities.reduce((map, e) => {
  69             map[e.authorised_value] = e
  70             return map
  71         }, {})
  72         window['av_agreement_is_perpetual'] = [{ _id: 0, _str: _('No') }, { _id: 1, _str: _("Yes") }]
  73
  74         $('#agreement_list').kohaTable({
  75             "ajax": {
  76                 "url": agreements_table_url,
  77             },
  78             "order": [[1, "asc"]],
  79             "columnDefs": [{
  80                 "targets": [0, 2],
  81                 "render": function (data, type, row, meta) {
  82                     if (type == 'display') {
  83                         return escape_str(data)
  84                     }
  85                     return data
  86                 }
  87             }],
  88             "columns": [
  89                 {
  90                     "title": __("Name"),
  91                     "data": ["me.agreement_id", "me.name"],
  92                     "searchable": true,
  93                     "orderable": true,
  94                     // Rendering done in drawCallback
  95                 },
  96                 {
  97                     "title": __("Vendor"),
  98                     "data": "vendor_id",
  99                     "searchable": true,
 100                     "orderable": true,
 101                     "render": function (data, type, row, meta) {
 102                         return row.vendor_id != undefined ? escape_str(vendors_map[row.vendor_id].name) : ""
 103                     }
 104                 },
 105                 {
 106                     "title": __("Description"),
 107                     "data": "description",
 108                     "searchable": true,
 109                     "orderable": true
 110                 },
 111                 {
 112                     "title": __("Status"),
 113                     "data": "status",
 114                     "searchable": true,
 115                     "orderable": true,
 116                     "render": function (data, type, row, meta) {
 117                         return escape_str(av_agreement_statuses_map[row.status].lib)
 118                     }
 119                 },
 120                 {
 121                     "title": __("Closure reason"),
 122                     "data": "closure_reason",
 123                     "searchable": true,
 124                     "orderable": true,
 125                     "render": function (data, type, row, meta) {
 126                         return row.closure_reason != undefined && row.closure_reason != "" ? escape_str(av_agreement_closure_reasons_map[row.closure_reason].lib) : ""
 127                     }
 128                 },
 129                 {
 130                     "title": __("Is perpetual"),
 131                     "data": "is_perpetual",
 132                     "searchable": true,
 133                     "orderable": true,
 134                     "render": function (data, type, row, meta) {
 135                         return escape_str(row.is_perpetual ? _("Yes") : _("No"))
 136                     }
 137                 },
 138                 {
 139                     "title": __("Renewal priority"),
 140                     "data": "renewal_priority",
 141                     "searchable": true,
 142                     "orderable": true,
 143                     "render": function (data, type, row, meta) {
 144                         return row.renewal_priority != undefined && row.renewal_priority != "" ? escape_str(av_agreement_renewal_priorities_map[row.renewal_priority].lib) : ""
 145                     }
 146                 },
 147                 {
 148                     "title": __("Actions"),
 149                     "data": function (row, type, val, meta) {
 150                         return '<div class="actions"></div>'
 151                     },
 152                     "className": "actions noExport",
 153                     "searchable": false,
 154                     "orderable": false
 155                 }
 156             ],
 157             drawCallback: function (settings) {
 158
 159                 var api = new $.fn.dataTable.Api(settings)
 160
 161                 $.each($(this).find("td .actions"), function (index, e) {
 162                     let agreement_id = api.row(index).data().agreement_id
 163                     let editButton = createVNode(ButtonEdit, {
 164                         onClick: () => {
 165                             edit_agreement(agreement_id)
 166                         }
 167                     })
 168                     let deleteButton = createVNode(ButtonDelete, {
 169                         onClick: () => {
 170                             delete_agreement(agreement_id)
 171                         }
 172                     })
 173                     let n = createVNode('span', {}, [editButton, " ", deleteButton])
 174                     render(n, e)
 175                 })
 176
 177                 $.each($(this).find("tbody tr td:first-child"), function (index, e) {
 178                     let row = api.row(index).data()
 179                     if (!row) return // Happen if the table is empty
 180                     let n = createVNode("a", {
 181                         role: "button",
 182                         onClick: () => {
 183                             show_agreement(row.agreement_id)
 184                         }
 185                     },
 186                         escape_str(`${row.name} (#${row.agreement_id})`)
 187                     )
 188                     render(n, e)
 189                 })
 190             },
 191             preDrawCallback: function (settings) {
 192                 var table_id = settings.nTable.id
 193                 $("#" + table_id).find("thead th").eq(1).attr('data-filter', 'vendors')
 194                 $("#" + table_id).find("thead th").eq(3).attr('data-filter', 'av_agreement_statuses')
 195                 $("#" + table_id).find("thead th").eq(4).attr('data-filter', 'av_agreement_closure_reasons')
 196                 $("#" + table_id).find("thead th").eq(5).attr('data-filter', 'av_agreement_is_perpetual')
 197                 $("#" + table_id).find("thead th").eq(6).attr('data-filter', 'av_agreement_renewal_priorities')
 198             }
 199
 200         }, table_settings, 1)
 201     },
 202     beforeUnmount() {
 203         $('#agreement_list')
 204             .DataTable()
 205             .destroy(true)
 206     },
 207     data: function () {
 208         return {
 209             agreements: [],
 210             initialized: false,
 211         }
 212     },
 213     methods: {
 214         show_agreement: function (agreement_id) {
 215             this.$emit('set-current-agreement-id', agreement_id)
 216             this.$emit('switch-view', 'show')
 217         },
 218         edit_agreement: function (agreement_id) {
 219             this.$emit('set-current-agreement-id', agreement_id)
 220             this.$emit('switch-view', 'add-form')
 221         },
 222         delete_agreement: function (agreement_id) {
 223             this.$emit('set-current-agreement-id', agreement_id)
 224             this.$emit('switch-view', 'confirm-delete-form')
 225         },
 226     },
 227     props: {
 228         vendors: Array,
 229         av_agreement_statuses: Array,
 230         av_agreement_closure_reasons: Array,
 231         av_agreement_renewal_priorities: Array,
 232     },
 233     name: "AgreementsList",
 234 }
 235 </script>