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

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