tomselect fixes (#1938)

* tomselect fixes
* bump nokogiri

Author: dmitry-sinina

Gemfile.lock

@@ -488,7 +488,7 @@ GEM
       net-protocol
     netstring (0.0.3)
     nio4r (2.5.9)
-    nokogiri (1.18.9)
+    nokogiri (1.19.1)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     oj (3.11.2)

app/admin/cdr/cdr_exports.rb

@@ -306,7 +306,7 @@ def build_new_resource
                input_html: {
                  class: 'tom-select-ajax',
                  data: {
-                   path: '/customers_auths/search_with_return_external_id?q[ordered_by]=name&q[external_id_null]=false'
+                   path: '/customers_auths/search_with_return_external_id?q[external_id_null]=false'
                  }
                },
                collection: if ff.object.customer_auth_external_id_in.present?

app/admin/cdr/cdrs.rb

@@ -112,7 +112,7 @@ def try_cdr_replica(&)
          },
          input_html: {
            class: 'tom-select-ajax',
-           'data-path': '/gateways/search?q[allow_origination_eq]=true&q[ordered_by]=name'
+           'data-path': '/gateways/search?q[allow_origination_eq]=true'
          }
 
   filter :term_gw_id_eq,
@@ -124,7 +124,7 @@ def try_cdr_replica(&)
          },
          input_html: {
            class: 'tom-select-ajax',
-           'data-path': '/gateways/search?q[allow_termination_eq]=true&q[ordered_by]=name'
+           'data-path': '/gateways/search?q[allow_termination_eq]=true'
          }
 
   filter :routing_plan, collection: proc { Routing::RoutingPlan.select(%i[id name]) }, input_html: { class: 'tom-select' }

app/admin/reports/interval_data.rb

@@ -40,11 +40,11 @@
 
   contractor_filter :customer_id,
                     label: 'Customer',
-                    path_params: { q: { customer_eq: true, ordered_by: :name } },
+                    path_params: { q: { customer_eq: true } },
                     if: proc { parent.group_by.include?('customer_id') }
   contractor_filter :vendor_id,
                     label: 'Vendor',
-                    path_params: { q: { vendor_eq: true, ordered_by: :name } },
+                    path_params: { q: { vendor_eq: true } },
                     if: proc { parent.group_by.include?('vendor_id') }
 
   with_options as: :select, input_html: { class: 'tom-select' } do |f|

app/admin/reports/realtime/origination_performances.rb

@@ -14,7 +14,7 @@
                             collection: Report::Realtime::Base::INTERVALS,
                             input_html: { class: 'tom-select' }, include_blank: false
 
-  contractor_filter :customer_id_eq, label: 'Customer', path_params: { q: { customer_eq: true, ordered_by: :name } }
+  contractor_filter :customer_id_eq, label: 'Customer', path_params: { q: { customer_eq: true } }
 
   with_default_realtime_interval
 

app/admin/reports/realtime/termination_distributions.rb

@@ -14,7 +14,7 @@
                             collection: Report::Realtime::Base::INTERVALS,
                             input_html: { class: 'tom-select' }, include_blank: false
 
-  contractor_filter :customer_id_eq, label: 'Customer', path_params: { q: { customer_eq: true, ordered_by: :name } }
+  contractor_filter :customer_id_eq, label: 'Customer', path_params: { q: { customer_eq: true } }
 
   with_default_realtime_interval
 

app/admin/system/api_accesses.rb

@@ -21,7 +21,7 @@
   includes :customer, :provision_gateway, :customer_portal_access_profile
 
   filter :id
-  contractor_filter :customer_id_eq, label: 'Customer', path_params: { q: { customer_eq: true, ordered_by: :name } }
+  contractor_filter :customer_id_eq, label: 'Customer', path_params: { q: { customer_eq: true } }
   filter :login
   filter :provision_gateway,
          input_html: { class: 'tom-select-ajax', 'data-path': '/gateways/search' },

app/assets/javascripts/tom-select-ajax-fillable.js

@@ -4,8 +4,7 @@
     window.initTomSelectAjaxFillable = function(el) {
         var $el = $(el)
         var path = $el.attr('data-path')
-        if (path.includes('?') && path.indexOf('?') === -1) path += '&'
-        if (!path.includes('?') && path.indexOf('?') === -1) path += '?'
+        path += path.includes('?') ? '&' : '?'
         var pathParams = $el.data('pathParams')
         var requiredParam = $el.attr('data-required-param')
         var fillOnInit = $el.attr('data-fill-on-init')
@@ -18,7 +17,7 @@
             searchField: 'text',
             allowEmptyOption: true,
             maxOptions: null,
-            controlInput: null, // add search box only for tom-select-ajax
+            controlInput: null,
             render: {
                 no_results: tomSelectRenderNoResultsFunc,
                 item: tomSelectRenderItemFunc

app/assets/javascripts/tom-select-ajax.js

@@ -4,8 +4,7 @@
     window.initTomSelectAjax = function (el) {
         var $el = $(el)
         var path = $el.attr('data-path')
-        if (path.includes('?') && path.indexOf('?') === -1) path += '&'
-        if (!path.includes('?') && path.indexOf('?') === -1) path += '?'
+        path += path.includes('?') ? '&' : '?'
         var pathParams = $el.data('pathParams')
         var requiredParam = $el.attr('data-required-param')
         var key = 'k-' + Math.random().toString(36).substr(2, 9)

app/assets/javascripts/tom-select.js

@@ -34,7 +34,9 @@ function initTomSelect(parent) {
 
         var plugins = []
         var $el = $(this)
-        if ($el.attr('multiple')) plugins.push('remove_button')
+        var isMultiple = !!$el.attr('multiple')
+        if (!isMultiple) plugins.push('dropdown_input')
+        if (isMultiple) plugins.push('remove_button')
         if (hasBlankOption(this)) plugins.push('clear_button')
         if (hasBlankOption(this) && !$el.data('allow-empty-option')) {
             // delete empty option from original select to avoid duplication
@@ -43,10 +45,10 @@ function initTomSelect(parent) {
         new TomSelect(this, {
             plugins: plugins,
             allowEmptyOption: hasBlankOption(this),
-            // add search box only for tom-select-ajax
-            controlInput: null,
-            // we need to display all if we remove search input
+            controlInput: isMultiple ? undefined : null,
             maxOptions: null,
+            loadThrottle: 0,
+            refreshThrottle: 0,
             onInitialize: function () {
                 // avoid selecting first option by default
                 if (!hasSelectedOption(this.input)) this.clear()
@@ -57,7 +59,7 @@ function initTomSelect(parent) {
         })
     })
 
-    // Sortable: .tom-select-sortable
+    // Sortable: .tom-select-sortable (always multiple)
     parent.find('select.tom-select-sortable').each(function () {
         if (this.tomselect) return
 
@@ -67,13 +69,11 @@ function initTomSelect(parent) {
             // delete empty option from original select to avoid duplication
             $el.find('option[value=""]').remove()
         }
-        if ($el.data('with-search')) plugins.push('dropdown_input')
         new TomSelect(this, {
             plugins: plugins,
-            // add search box only for tom-select-ajax
-            controlInput: null,
-            // we need to display all if we remove search input
             maxOptions: null,
+            loadThrottle: 0,
+            refreshThrottle: 0,
             onInitialize: function () {
                 // avoid selecting first option by default
                 if (!hasSelectedOption(this.input)) this.clear()
@@ -98,11 +98,15 @@ function initTomSelect(parent) {
         initTomSelectAjaxFillable(this)
     })
 
-    // Filter form selects (disable search)
+    // Filter form selects
     parent.find('form.filter_form div.select_and_search > select').each(function () {
         if (this.tomselect) return
         new TomSelect(this, {
+            plugins: ['dropdown_input'],
             controlInput: null,
+            maxOptions: null,
+            loadThrottle: 0,
+            refreshThrottle: 0,
             render: {
                 item: tomSelectRenderItemFunc
             }