activeadmin-tom_select 4.1.0

data/lib/activeadmin/tom_select/select_input_extension.rb

@@ -0,0 +1,168 @@
+module ActiveAdmin
+  module SearchableSelect
+    # Mixin for searchable select inputs.
+    #
+    # Supports the same options as inputs of type `:select`.
+    #
+    # Adds support for an `ajax` option to fetch options data from a
+    # JSON endpoint. Pass either `true` to use defaults or a hash
+    # containing some of the following options:
+    #
+    # - `resource`: ActiveRecord model class of ActiveAdmin resource
+    #    which provides the collection action to fetch options
+    #    from. By default the resource is auto detected via the name
+    #    of the input attribute.
+    #
+    # - `collection_name`: Name passed to the
+    #   `searchable_select_options` method that defines the collection
+    #   action to fetch options from.
+    #
+    # - `params`: Hash of query parameters that shall be passed to the
+    #   options endpoint.
+    #
+    # - `path_params`: Hash of parameters, which would be passed to the
+    #   dynamic collection path generation for the resource.
+    #   e.g `admin_articles_path(path_params)`
+    #
+    # If the `ajax` option is present, the `collection` option is
+    # ignored.
+    module SelectInputExtension
+      # @api private
+      def to_html
+        super
+      rescue RuntimeError => e
+        # In development/test, display the error message
+        raise e unless Rails.env.development? || Rails.env.test?
+
+        template.content_tag(:div, e.message, class: 'searchable-select-error')
+      end
+
+      # @api private
+      def input_html_options
+        super.tap do |options|
+          options[:class] = [options[:class], 'searchable-select-input'].compact.join(' ')
+          options['data-ajax-url'] = ajax_url if ajax? && !SearchableSelect.inline_ajax_options
+          options['data-clearable'] = true if clearable?
+        end
+      end
+
+      # @api private
+      def collection_from_options
+        return super unless options[:ajax]
+
+        collection = if SearchableSelect.inline_ajax_options
+                       all_options_collection
+                     else
+                       selected_value_collection
+                     end
+
+        # Remove any empty/blank options since we use clear button instead
+        collection.reject { |item| item.first.to_s.strip.empty? && item.last.to_s.strip.empty? }
+      end
+
+      private
+
+      def ajax?
+        options[:ajax].present?
+      end
+
+      def clearable?
+        # Default to true unless explicitly set to false
+        options.fetch(:clearable, true)
+      end
+
+      def ajax_url
+        return unless options[:ajax]
+
+        [ajax_resource.route_collection_path(path_params),
+         '/',
+         option_collection.collection_action_name,
+         '?',
+         ajax_params.to_query].join
+      end
+
+      def all_options_collection
+        option_collection_scope.all.map do |record|
+          option_for_record(record)
+        end
+      end
+
+      def selected_value_collection
+        selected_records.collect { |s| option_for_record(s) }
+      end
+
+      def option_for_record(record)
+        [option_collection.display_text(record), record.id]
+      end
+
+      def selected_records
+        @selected_records ||=
+          if selected_values
+            option_collection_scope.where(id: selected_values)
+          else
+            []
+          end
+      end
+
+      def selected_values
+        @object&.send(input_name)
+      end
+
+      def option_collection_scope
+        option_collection.scope(template, path_params.merge(ajax_params))
+      end
+
+      def option_collection
+        ajax_resource
+          .searchable_select_option_collections
+          .fetch(ajax_option_collection_name) do
+          raise("No option collection named '#{ajax_option_collection_name}' " \
+                "defined in '#{ajax_resource_class.name}' admin.")
+        end
+      end
+
+      def ajax_resource
+        @ajax_resource ||=
+          template.active_admin_namespace.resource_for(ajax_resource_class) ||
+          raise("No admin found for '#{ajax_resource_class.name}' to fetch " \
+                'options for searchable select input from.')
+      end
+
+      def ajax_resource_class
+        ajax_options.fetch(:resource) do
+          raise_cannot_auto_detect_resource unless reflection
+          reflection.klass
+        end
+      end
+
+      def raise_cannot_auto_detect_resource
+        raise('Cannot auto detect resource to fetch options for searchable select input from. ' \
+              "Explicitly pass class of an ActiveAdmin resource:\n\n  " \
+              "f.input(:custom_category,\n          " \
+              "type: :searchable_select,\n          " \
+              "ajax: {\n            " \
+              "resource: Category\n          " \
+              "})\n")
+      end
+
+      def ajax_option_collection_name
+        ajax_options.fetch(:collection_name, :all)
+      end
+
+      def ajax_params
+        ajax_options.fetch(:params, {})
+      end
+
+      def path_params
+        ajax_options.fetch(:path_params, {})
+      end
+
+      def ajax_options
+        # ActiveAdmin 4 may transform ajax hash to boolean
+        return {} if options[:ajax] == true || options[:ajax].nil?
+
+        options[:ajax]
+      end
+    end
+  end
+end

data/lib/activeadmin/tom_select/version.rb

@@ -0,0 +1,5 @@
+module ActiveAdmin
+  module SearchableSelect
+    VERSION = '4.1.0'.freeze
+  end
+end

data/lib/activeadmin/tom_select.rb

@@ -0,0 +1,20 @@
+require 'activeadmin/tom_select/engine'
+require 'activeadmin/tom_select/option_collection'
+require 'activeadmin/tom_select/resource_extension'
+require 'activeadmin/tom_select/resource_dsl_extension'
+require 'activeadmin/tom_select/select_input_extension'
+require 'activeadmin/tom_select/version'
+
+ActiveAdmin::Resource.include ActiveAdmin::SearchableSelect::ResourceExtension
+ActiveAdmin::ResourceDSL.include ActiveAdmin::SearchableSelect::ResourceDSLExtension
+
+module ActiveAdmin
+  # Global settings for searchable selects
+  module SearchableSelect
+    # Statically render all options into searchable selects with
+    # `ajax` option set to true. This can be used to ease ui driven
+    # integration testing.
+    mattr_accessor :inline_ajax_options
+    self.inline_ajax_options = false
+  end
+end

data/lib/activeadmin-tom_select.rb

@@ -0,0 +1,5 @@
+# Main entry point for activeadmin-tom_select gem
+require 'activeadmin/tom_select'
+
+require 'activeadmin/inputs/filters/searchable_select_input'
+require 'activeadmin/inputs/searchable_select_input'

data/lib/generators/active_admin/tom_select/install/install_generator.rb

@@ -0,0 +1,180 @@
+require 'rails/generators'
+
+module ActiveAdmin
+  module TomSelect
+    module Generators
+      class InstallGenerator < Rails::Generators::Base
+        source_root File.expand_path('templates', __dir__)
+
+        desc 'Installs ActiveAdmin Tom Select for ActiveAdmin 4.x'
+
+        class_option :bundler,
+                     type: :string,
+                     default: 'esbuild',
+                     desc: 'JavaScript bundler to use (esbuild, importmap, webpack)',
+                     enum: %w[esbuild importmap webpack]
+
+        def install_npm_package
+          return unless options[:bundler] != 'importmap'
+
+          say 'Installing @rocket-sensei/activeadmin-tom_select npm package...', :green
+          run 'npm install @rocket-sensei/activeadmin-tom_select'
+        end
+
+        def setup_javascript
+          case options[:bundler]
+          when 'esbuild'
+            setup_esbuild
+          when 'importmap'
+            setup_importmap
+          when 'webpack'
+            setup_webpack
+          end
+        end
+
+        def setup_stylesheets
+          say 'Tom Select styles are now included in the package', :green
+        end
+
+        def show_post_install_message
+          say "\n✅ ActiveAdmin Tom Select has been installed!", :green
+
+          case options[:bundler]
+          when 'esbuild'
+            say "\nMake sure to rebuild your JavaScript:", :yellow
+            say '  npm run build', :cyan
+            say "\nFor development with watch mode:", :yellow
+            say '  npm run build -- --watch', :cyan
+          when 'importmap'
+            say "\nRestart your Rails server to load the new pins.", :yellow
+          when 'webpack'
+            say "\nRecompile your webpack bundles:", :yellow
+            say '  bin/webpack', :cyan
+          end
+
+          say "\n📚 Usage example:", :green
+          say <<~RUBY
+
+            # In your ActiveAdmin resource:
+            ActiveAdmin.register User do
+              searchable_select_options(
+                scope: User.all,
+                text_attribute: :name
+              )
+            end
+
+            ActiveAdmin.register Post do
+              form do |f|
+                f.inputs do
+                  f.input :user, as: :searchable_select, ajax: true
+                end
+                f.actions
+              end
+            end
+          RUBY
+        end
+
+        PACKAGE_JSON_FILE = 'package.json'.freeze
+
+        private
+
+        def setup_esbuild
+          say 'Setting up for esbuild...', :green
+
+          # Check if app/javascript/active_admin.js exists
+          js_file = 'app/javascript/active_admin.js'
+
+          if File.exist?(js_file)
+            say "Adding tom_select to #{js_file}...", :green
+            append_to_file js_file do
+              <<~JS
+
+                // ActiveAdmin Tom Select
+                import '@rocket-sensei/activeadmin-tom_select';
+              JS
+            end
+          else
+            say "Creating #{js_file}...", :green
+            create_file js_file do
+              <<~JS
+                import "@activeadmin/activeadmin";
+
+                // ActiveAdmin Tom Select
+                import '@rocket-sensei/activeadmin-tom_select';
+              JS
+            end
+          end
+
+          # Update package.json scripts if needed
+          return unless File.exist?(PACKAGE_JSON_FILE)
+
+          package_json = JSON.parse(File.read(PACKAGE_JSON_FILE))
+
+          return if package_json['scripts'] && package_json['scripts']['build']
+
+          say 'Adding build script to package.json...', :green
+          package_json['scripts'] ||= {}
+          package_json['scripts']['build'] =
+            'esbuild app/javascript/*.* --bundle --sourcemap --format=esm ' \
+            '--outdir=app/assets/builds --public-path=/assets'
+
+          File.write(PACKAGE_JSON_FILE, JSON.pretty_generate(package_json))
+        end
+
+        def setup_importmap
+          say 'Setting up for importmap...', :green
+
+          # Add pins to importmap.rb
+          if File.exist?('config/importmap.rb')
+            say 'Adding pins to config/importmap.rb...', :green
+            append_to_file 'config/importmap.rb' do
+              <<~RUBY
+
+                # ActiveAdmin Tom Select
+                pin "activeadmin-tom_select", to: "activeadmin-tom_select.js"
+              RUBY
+            end
+          end
+
+          # Copy the vendor JavaScript file
+          say 'Copying vendor JavaScript file...', :green
+          copy_file '../../../../vendor/assets/javascripts/activeadmin-tom_select.js',
+                    'app/assets/javascripts/activeadmin-tom_select.js'
+
+          # Update application.js
+          js_file = 'app/javascript/application.js'
+          return unless File.exist?(js_file)
+
+          say "Adding imports to #{js_file}...", :green
+          append_to_file js_file do
+            <<~JS
+
+              // ActiveAdmin Tom Select
+              import "activeadmin-tom_select"
+            JS
+          end
+        end
+
+        def setup_webpack
+          say 'Setting up for webpack...', :green
+
+          js_file = 'app/javascript/packs/active_admin.js'
+
+          if File.exist?(js_file)
+            say "Adding tom_select to #{js_file}...", :green
+            append_to_file js_file do
+              <<~JS
+
+                // ActiveAdmin Tom Select
+                import '@rocket-sensei/activeadmin-tom_select';
+              JS
+            end
+          else
+            say 'Please manually add the tom_select import ' \
+                'to your ActiveAdmin JavaScript pack', :yellow
+          end
+        end
+      end
+    end
+  end
+end

data/npm-package/package-lock.json

@@ -0,0 +1,51 @@
+{
+  "name": "@rocket-sensei/activeadmin-tom_select",
+  "version": "4.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@rocket-sensei/activeadmin-tom_select",
+      "version": "4.1.0",
+      "license": "MIT",
+      "peerDependencies": {
+        "tom-select": "^2.4.3"
+      }
+    },
+    "node_modules/@orchidjs/sifter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@orchidjs/sifter/-/sifter-1.1.0.tgz",
+      "integrity": "sha512-mYwHCfr736cIWWdhhSZvDbf90AKt2xyrJspKFC3qyIJG1LtrJeJunYEqCGG4Aq2ijENbc4WkOjszcvNaIAS/pQ==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@orchidjs/unicode-variants": "^1.1.2"
+      }
+    },
+    "node_modules/@orchidjs/unicode-variants": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@orchidjs/unicode-variants/-/unicode-variants-1.1.2.tgz",
+      "integrity": "sha512-5DobW1CHgnBROOEpFlEXytED5OosEWESFvg/VYmH0143oXcijYTprRYJTs+55HzGM4IqxiLFSuqEzu9mPNwVsA==",
+      "license": "Apache-2.0",
+      "peer": true
+    },
+    "node_modules/tom-select": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/tom-select/-/tom-select-2.4.3.tgz",
+      "integrity": "sha512-MFFrMxP1bpnAMPbdvPCZk0KwYxLqhYZso39torcdoefeV/NThNyDu8dV96/INJ5XQVTL3O55+GqQ78Pkj5oCfw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@orchidjs/sifter": "^1.1.0",
+        "@orchidjs/unicode-variants": "^1.1.2"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/tom-select"
+      }
+    }
+  }
+}

data/npm-package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@rocket-sensei/activeadmin-tom_select",
+  "version": "4.1.0",
+  "description": "Use Tom Select for searchable selects in Active Admin forms and filters.",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "style": "src/tom-select-tailwind.css",
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "require": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./css": "./src/tom-select-tailwind.css",
+    "./style": "./src/tom-select-tailwind.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rs-pro/activeadmin-tom_select.git"
+  },
+  "author": "Rocket Sensei <info@rs.pro>",
+  "license": "MIT",
+  "private": false,
+  "bugs": {
+    "url": "https://github.com/rs-pro/activeadmin-tom_select/issues"
+  },
+  "homepage": "https://github.com/rs-pro/activeadmin-tom_select#readme",
+  "keywords": [
+    "tom-select",
+    "active",
+    "admin",
+    "searchable",
+    "select",
+    "activeadmin",
+    "rails"
+  ],
+  "peerDependencies": {
+    "tom-select": "^2.4.3"
+  },
+  "files": [
+    "src/**/*"
+  ]
+}

data/npm-package/src/index.js

@@ -0,0 +1,153 @@
+// ES Module version for ActiveAdmin 4+ with esbuild/webpack
+// Tom Select version - no jQuery dependency required
+import TomSelect from 'tom-select';
+
+const MODULE_NAME = 'ActiveAdmin Searchable Select';
+const SELECTOR = '.searchable-select-input';
+const INITIALIZED_CLASS = 'tom-select-initialized';
+
+// Core initialization function
+export function initSearchableSelects(inputs, extra) {
+  if (!inputs || inputs.length === 0) return;
+  
+  // Handle both NodeList and array of elements
+  const elements = inputs instanceof NodeList ? Array.from(inputs) : 
+                   inputs.length !== undefined ? inputs : [inputs];
+  
+  elements.forEach(element => {
+    // Skip if already initialized
+    if (element.classList.contains(INITIALIZED_CLASS)) return;
+    
+    // Mark as initialized
+    element.classList.add(INITIALIZED_CLASS);
+    
+    // Get options from data attributes
+    const dataOptions = element.dataset.searchableSelect ? 
+                       JSON.parse(element.dataset.searchableSelect) : {};
+    
+    // Merge with extra options
+    const options = Object.assign({}, extra || {}, dataOptions);
+    
+    // Configure AJAX if URL is provided
+    const ajaxUrl = element.dataset.ajaxUrl;
+    if (ajaxUrl) {
+      // Configure virtual scroll for pagination
+      options.plugins = options.plugins || [];
+      if (!options.plugins.includes('virtual_scroll')) {
+        options.plugins.push('virtual_scroll');
+      }
+      
+      // Set max options for virtual scroll
+      options.maxOptions = options.maxOptions || 200;
+      
+      // Configure the first URL for pagination
+      options.firstUrl = function(query) {
+        const url = new URL(ajaxUrl, window.location.href);
+        url.searchParams.set('term', query);
+        url.searchParams.set('page', 1);
+        return url.toString();
+      };
+      
+      // Main load function with pagination support
+      options.load = function(query, callback) {
+        // Get the appropriate URL (either first or next)
+        const url = this.getUrl(query);
+        
+        fetch(url)
+          .then(response => response.json())
+          .then(json => {
+            // Handle pagination info if present
+            if (json.pagination && json.pagination.more) {
+              // Set up the next URL for virtual scroll (1-based pagination)
+              const nextUrl = new URL(ajaxUrl, window.location.href);
+              nextUrl.searchParams.set('term', query);
+              // Backend now uses 1-based pagination and returns current page
+              const nextPage = (json.pagination.current || 1) + 1;
+              nextUrl.searchParams.set('page', nextPage);
+              this.setNextUrl(query, nextUrl.toString());
+            }
+            
+            callback(json.results || json);
+          })
+          .catch(() => callback());
+      };
+      
+      // Map Select2-style options to Tom Select
+      options.valueField = options.valueField || 'id';
+      options.labelField = options.labelField || 'text';
+      options.searchField = options.searchField || ['text'];
+      
+      // Enable remote loading features
+      options.preload = options.preload !== false ? 'focus' : false;
+      options.loadThrottle = options.loadThrottle || 300;
+    }
+    
+    // Handle placeholder
+    if (element.placeholder) {
+      options.placeholder = element.placeholder;
+    }
+    
+    // Check if element should be clearable (default to true for searchable selects)
+    const isClearable = element.dataset.clearable !== 'false';
+    
+    // Map common Select2 options to Tom Select equivalents
+    if (options.allowClear || isClearable) {
+      // Don't add empty option - we use clear_button plugin instead
+      // options.allowEmptyOption = true;
+      
+      // Add clear_button plugin (make sure plugins array exists)
+      options.plugins = options.plugins || [];
+      if (!options.plugins.includes('clear_button')) {
+        options.plugins.push('clear_button');
+      }
+    }
+    
+    if (options.minimumInputLength) {
+      options.shouldLoad = function(query) {
+        return query.length >= options.minimumInputLength;
+      };
+    }
+    
+    // Initialize Tom Select
+    new TomSelect(element, options);
+  });
+}
+
+// Auto-initialize on common events  
+export function setupAutoInit() {
+  // Initialize on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+      initSearchableSelects(document.querySelectorAll(SELECTOR));
+    });
+  } else {
+    initSearchableSelects(document.querySelectorAll(SELECTOR));
+  }
+
+  // Support Turbo (Rails 7+)
+  document.addEventListener('turbo:load', function() {
+    initSearchableSelects(document.querySelectorAll(`${SELECTOR}:not(.${INITIALIZED_CLASS})`));
+  });
+
+  // ActiveAdmin 4 uses .has-many-add button click for dynamic content
+  document.addEventListener('click', function(event) {
+    if (event.target.closest('.has-many-add')) {
+      setTimeout(function() {
+        initSearchableSelects(
+          document.querySelectorAll(`${SELECTOR}:not(.${INITIALIZED_CLASS})`)
+        );
+      }, 10);
+    }
+  });
+  
+  // Support has_many_add:after event (ActiveAdmin specific)
+  document.addEventListener('has_many_add:after', function(event) {
+    const fieldset = event.detail || event.target;
+    if (fieldset) {
+      const selects = fieldset.querySelectorAll(`${SELECTOR}:not(.${INITIALIZED_CLASS})`);
+      initSearchableSelects(selects);
+    }
+  });
+
+  console.log(`${MODULE_NAME} (Tom Select) initialized`);
+}