Bug 33066: Reintroduce column filters

Signed-off-by: Pedro Amorim <pedro.amorim@ptfs-europe.com>

Signed-off-by: Agustín Moyano <agustinmoyano@theke.io>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

koha-tmpl/intranet-tmpl/prog/js/datatables.js

@@ -822,7 +822,7 @@ function _dt_on_visibility(add_filters, table_node, table_dt){
     }
 }
 
-function _dt_add_filters(table_node, table_dt) {
+function _dt_add_filters(table_node, table_dt, filters_options = {}) {
     $(table_node).find('thead tr').clone().appendTo( $(table_node).find('thead') );
 
     $(table_node).find('thead tr:eq(1) th').each( function (i) {
@@ -831,14 +831,19 @@ function _dt_add_filters(table_node, table_dt) {
         $(this).data('th-id', i);
         if ( is_searchable ) {
             let input_type = 'input';
-            if ( $(this).data('filter') ) {
+            if ( $(this).data('filter') || filters_options.hasOwnProperty(i)) {
                 input_type = 'select'
                 let filter_type = $(this).data('filter');
-                var existing_search = table_dt.column(i).search();
+                let existing_search = table_dt.column(i).search();
                 let select = $('<select><option value=""></option></select');
 
                 // FIXME eval here is bad and dangerous, how do we workaround that?
-                $(eval(filter_type)).each(function(){
+                if ( !filters_options.hasOwnProperty(i) ) {
+                    filters_options[i] = eval(filter_type)
+                } else if ( typeof filters_options[i] === "function" ) {
+                    filters_options[i] = filters_options[i]()
+                }
+                $(filters_options[i]).each(function(){
                     let o = $('<option value="%s">%s</option>'.format(this._id, this._str));
                     if ( existing_search === this._id ) {
                         o.prop("selected", "selected");

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

@@ -98,6 +98,25 @@ export default {
                 url: () => this.table_url(),
                 table_settings: this.agreement_table_settings,
                 add_filters: true,
+                filters_options: {
+                    1: () =>
+                        this.vendors.map(e => {
+                            e["_id"] = e["id"]
+                            e["_str"] = e["name"]
+                            return e
+                        }),
+                    3: () => this.map_av_dt_filter("av_agreement_statuses"),
+                    4: () =>
+                        this.map_av_dt_filter("av_agreement_closure_reasons"),
+                    5: [
+                        { _id: 0, _str: _("No") },
+                        { _id: 1, _str: _("Yes") },
+                    ],
+                    6: () =>
+                        this.map_av_dt_filter(
+                            "av_agreement_renewal_priorities"
+                        ),
+                },
                 actions: {
                     0: ["show"],
                     "-1": ["edit", "delete"],
@@ -110,7 +129,7 @@ export default {
             vm.before_route_entered = true // FIXME This is ugly, but we need to distinguish when it's used as main component or child component (from EHoldingsEBSCOPAckagesShow for instance)
             if (!vm.building_table) {
                 vm.building_table = true
-                vm.getAgreementCount().then(() => vm.initialized = true)
+                vm.getAgreementCount().then(() => (vm.initialized = true))
             }
         })
     },
@@ -491,29 +510,11 @@ export default {
         getTableColumns: function () {
             let get_lib_from_av = this.get_lib_from_av
             let escape_str = this.escape_str
-            window["vendors"] = this.vendors.map(e => {
-                e["_id"] = e["id"]
-                e["_str"] = e["name"]
-                return e
-            })
             let vendors_map = this.vendors.reduce((map, e) => {
                 map[e.id] = e
                 return map
             }, {})
-            let avs = [
-                "av_agreement_statuses",
-                "av_agreement_closure_reasons",
-                "av_agreement_renewal_priorities",
-            ]
-            let c = this
-            avs.forEach(function (av_cat) {
-                window[av_cat] = c.map_av_dt_filter(av_cat)
-            })
 
-            window["av_agreement_is_perpetual"] = [
-                { _id: 0, _str: _("No") },
-                { _id: 1, _str: _("Yes") },
-            ]
             return [
                 {
                     title: __("Name"),
@@ -536,7 +537,7 @@ export default {
                     orderable: true,
                     render: function (data, type, row, meta) {
                         return row.vendor_id != undefined
-                            ? escape_str(vendors_map[row.vendor_id].name)
+                            ? row.vendor_id //escape_str(vendors_map[row.vendor_id].name)
                             : ""
                     },
                 },

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

@@ -120,7 +120,7 @@ export default {
         let dt = this.$refs.table.dt()
         let table_node = dt.table().node()
         if (this.add_filters) {
-            _dt_add_filters(table_node, dt)
+            _dt_add_filters(table_node, dt, this.filters_options)
         }
 
         dt.on("column-visibility.dt", function () {
@@ -189,6 +189,10 @@ export default {
             type: Boolean,
             required: false,
         },
+        filters_options: {
+            type: Object,
+            required: false,
+        },
     },
 }
 </script>