koha-tmpl/intranet-tmpl/prog/js/vue/components/KohaTable.vue

   1 <template>
   2     <DataTable
   3         :columns="tableColumns"
   4         :options="{ ...dataTablesDefaults, ...allOptions }"
   5         :data="data"
   6         ref="table"
   7     >
   8         <slot></slot>
   9     </DataTable>
  10 </template>
  11
  12 <script>
  13 import DataTable from "datatables.net-vue3"
  14 import DataTablesLib from "datatables.net"
  15 import "datatables.net-buttons"
  16 import "datatables.net-buttons/js/buttons.html5"
  17 import "datatables.net-buttons/js/buttons.print"
  18 import "datatables.net-buttons/js/buttons.colVis"
  19 DataTable.use(DataTablesLib)
  20
  21 export default {
  22     name: "KohaTable",
  23     data() {
  24         let hidden_ids, included_ids
  25         ;[hidden_ids, included_ids] = _dt_visibility(
  26             this.table_settings,
  27             this.options
  28         )
  29         let buttons = _dt_buttons({
  30             included_ids,
  31             table_settings: this.table_settings,
  32         })
  33         return {
  34             data: [],
  35             tableColumns: this.columns,
  36             allOptions: {
  37                 deferRender: true,
  38                 paging: true,
  39                 serverSide: true,
  40                 searching: true,
  41                 pagingType: "full_numbers",
  42                 processing: true,
  43                 ajax: {
  44                     url: typeof this.url === "function" ? this.url() : this.url,
  45                     ..._dt_default_ajax({
  46                         options: this.options,
  47                         default_filters: this.default_filters,
  48                     }),
  49                 },
  50                 buttons,
  51                 search: { search: this.$route.query.q },
  52                 ...this.options,
  53             },
  54             hidden_ids,
  55             included_ids,
  56         }
  57     },
  58     setup() {
  59         return { dataTablesDefaults }
  60     },
  61     methods: {
  62         redraw: function (url) {
  63             this.$refs.table.dt().ajax.url(url).draw()
  64         },
  65     },
  66     beforeMount() {
  67         if (this.actions.hasOwnProperty("-1")) {
  68             this.tableColumns = [
  69                 ...this.tableColumns,
  70                 {
  71                     name: "actions",
  72                     title: this.$__("Actions"),
  73                     searchable: false,
  74                     render: (data, type, row) => {
  75                         let content = []
  76                         this.actions["-1"].forEach(a => {
  77                             if (a == "edit") {
  78                                 content.push(
  79                                     '<a class="edit btn btn-default btn-xs" role="button"><i class="fa fa-pencil"></i>' +
  80                                         this.$__("Edit") +
  81                                         "</a>"
  82                                 )
  83                             } else if (a == "delete") {
  84                                 content.push(
  85                                     '<a class="delete btn btn-default btn-xs" role="button"><i class="fa fa-trash"></i>' +
  86                                         this.$__("Delete") +
  87                                         "</a>"
  88                                 )
  89                             }
  90                         })
  91                         return content.join(" ")
  92                     },
  93                 },
  94             ]
  95         }
  96
  97         $(
  98             ".dt_button_clear_filter, .columns_controls, .export_controls, .dt_button_configure_table"
  99         ).tooltip()
 100
 101         if (this.add_filters) {
 102             this.options.orderCellsTop = true
 103         }
 104
 105         if (this.table_settings) {
 106             if (
 107                 this.table_settings.hasOwnProperty("default_display_length") &&
 108                 this.table_settings.default_display_length != null
 109             ) {
 110                 this.options.pageLength =
 111                     this.table_settings.default_display_length
 112             }
 113             if (
 114                 this.table_settings.hasOwnProperty("default_sort_order") &&
 115                 this.table_settings.default_sort_order != null
 116             ) {
 117                 this.options.order = [
 118                     [this.table_settings.default_sort_order, "asc"],
 119                 ]
 120             }
 121         }
 122     },
 123     mounted() {
 124         let dt = this.$refs.table.dt()
 125         let table_node = dt.table().node()
 126         if (this.add_filters) {
 127             _dt_add_filters(table_node, dt, this.filters_options)
 128         }
 129
 130         dt.on("column-visibility.dt", function () {
 131             _dt_on_visibility(this.add_filters, table_node, dt)
 132         })
 133             .columns(this.hidden_ids)
 134             .visible(false)
 135
 136         if (Object.keys(this.actions).length) {
 137             const self = this
 138             dt.on("draw", () => {
 139                 const dataSet = dt.rows().data()
 140                 Object.entries(this.actions).forEach(([col_id, actions]) => {
 141                     dt.column(col_id)
 142                         .nodes()
 143                         .to$()
 144                         .each(function (idx) {
 145                             const data = dataSet[idx]
 146                             actions.forEach(action => {
 147                                 $("." + action, this).on("click", e => {
 148                                     self.$emit(action, data, dt, e)
 149                                 })
 150                             })
 151                         })
 152                 })
 153             })
 154         }
 155     },
 156     beforeUnmount() {
 157         const dt = this.$refs.table.dt()
 158         dt.destroy()
 159     },
 160     components: {
 161         DataTable,
 162     },
 163     props: {
 164         url: {
 165             type: [String, Function],
 166             default: "",
 167         },
 168         columns: {
 169             type: Array,
 170             default: [],
 171         },
 172         actions: {
 173             type: Object,
 174             default: {},
 175         },
 176         options: {
 177             type: Object,
 178             default: {},
 179         },
 180         default_filters: {
 181             type: Object,
 182             required: false,
 183         },
 184         table_settings: {
 185             type: Object,
 186             required: false,
 187         },
 188         add_filters: {
 189             type: Boolean,
 190             required: false,
 191         },
 192         filters_options: {
 193             type: Object,
 194             required: false,
 195         },
 196     },
 197 }
 198 </script>