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({ options: this.options }),
  46                 },
  47                 buttons,
  48                 default_search: this.$route.query.q,
  49             },
  50             hidden_ids,
  51             included_ids,
  52         }
  53     },
  54     setup() {
  55         return { dataTablesDefaults }
  56     },
  57     methods: {
  58         redraw: function (url) {
  59             this.$refs.table.dt().ajax.url(url).draw()
  60         },
  61     },
  62     beforeMount() {
  63         if (this.actions.hasOwnProperty("-1")) {
  64             this.tableColumns = [
  65                 ...this.tableColumns,
  66                 {
  67                     name: "actions",
  68                     title: this.$__("Actions"),
  69                     searchable: false,
  70                     render: (data, type, row) => {
  71                         let content = []
  72                         this.actions["-1"].forEach(a => {
  73                             if (a == "edit") {
  74                                 content.push(
  75                                     '<a class="edit btn btn-default btn-xs" role="button"><i class="fa fa-pencil"></i>' +
  76                                         this.$__("Edit") +
  77                                         "</a>"
  78                                 )
  79                             } else if (a == "delete") {
  80                                 content.push(
  81                                     '<a class="delete btn btn-default btn-xs" role="button"><i class="fa fa-trash"></i>' +
  82                                         this.$__("Delete") +
  83                                         "</a>"
  84                                 )
  85                             }
  86                         })
  87                         return content.join(" ")
  88                     },
  89                 },
  90             ]
  91         }
  92
  93         $(
  94             ".dt_button_clear_filter, .columns_controls, .export_controls, .dt_button_configure_table"
  95         ).tooltip()
  96
  97         if (this.add_filters) {
  98             this.options.orderCellsTop = true
  99         }
 100
 101         if (this.table_settings) {
 102             if (
 103                 this.table_settings.hasOwnProperty("default_display_length") &&
 104                 this.table_settings.default_display_length != null
 105             ) {
 106                 this.options.pageLength =
 107                     this.table_settings.default_display_length
 108             }
 109             if (
 110                 this.table_settings.hasOwnProperty("default_sort_order") &&
 111                 this.table_settings.default_sort_order != null
 112             ) {
 113                 this.options.order = [
 114                     [this.table_settings.default_sort_order, "asc"],
 115                 ]
 116             }
 117         }
 118     },
 119     mounted() {
 120         let dt = this.$refs.table.dt()
 121         let table_node = dt.table().node()
 122         if (this.add_filters) {
 123             _dt_add_filters(table_node, dt, this.filters_options)
 124         }
 125
 126         dt.on("column-visibility.dt", function () {
 127             _dt_on_visibility(this.add_filters, table_node, dt)
 128         })
 129             .columns(this.hidden_ids)
 130             .visible(false)
 131
 132         if (Object.keys(this.actions).length) {
 133             const self = this
 134             dt.on("draw", () => {
 135                 const dataSet = dt.rows().data()
 136                 Object.entries(this.actions).forEach(([col_id, actions]) => {
 137                     dt.column(col_id)
 138                         .nodes()
 139                         .to$()
 140                         .each(function (idx) {
 141                             const data = dataSet[idx]
 142                             actions.forEach(action => {
 143                                 $("." + action, this).on("click", e => {
 144                                     self.$emit(action, data, dt, e)
 145                                 })
 146                             })
 147                         })
 148                 })
 149             })
 150         }
 151     },
 152     beforeUnmount() {
 153         const dt = this.$refs.table.dt()
 154         dt.destroy()
 155     },
 156     components: {
 157         DataTable,
 158     },
 159     props: {
 160         url: {
 161             type: [String, Function],
 162             default: "",
 163         },
 164         columns: {
 165             type: Array,
 166             default: [],
 167         },
 168         actions: {
 169             type: Object,
 170             default: {},
 171         },
 172         options: {
 173             type: Object,
 174             default: {},
 175         },
 176         default_filters: {
 177             type: Object,
 178             required: false,
 179         },
 180         table_settings: {
 181             type: Object,
 182             required: false,
 183         },
 184         default_search: {
 185             type: String,
 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>