rails-settings-cached-rails-admin 0.1.0

data/app/views/rails_admin_settings_ui/settings/index.html.erb

@@ -0,0 +1,435 @@
+<%# Set page title with fallback %>
+<% content_for :title do %>
+  <%= t('admin.actions.settings_ui.title', default: 'Settings') %>
+<% end %>
+
+<%# Set breadcrumb with fallback %>
+<% content_for :breadcrumbs do %>
+  <li class="breadcrumb-item">
+    <%= link_to t('admin.home.name', default: 'Home'), rails_admin.dashboard_path %>
+  </li>
+<% end %>
+
+<!-- Search Bar -->
+<div class="row mb-3">
+  <div class="col-12">
+    <div class="card">
+      <div class="card-body py-2">
+        <div class="row">
+          <div class="col-md-6">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <span class="input-group-text"><i class="fa fa-search"></i></span>
+              </div>
+              <input type="text" class="form-control" id="settings-search" placeholder="Search settings..." autocomplete="off">
+              <div class="input-group-append">
+                <button class="btn btn-outline-secondary" type="button" id="clear-search">
+                  <i class="fa fa-times"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="float-right">
+              <span class="badge badge-info" id="settings-count">
+                <i class="fa fa-cog"></i> <span id="visible-count"><%= @settings_data.values.flatten.size %></span> settings
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Settings Table -->
+<div class="row">
+  <div class="col-md-12">
+    <% if @settings_data.any? %>
+      <% @settings_data.each_with_index do |(category, settings), category_index| %>
+        <div class="card settings-category" data-category="<%= category.parameterize %>">
+          <div class="card-header">
+            <h3 class="card-title">
+              <i class="fa fa-folder-o"></i>
+              <%= category %>
+              <span class="badge badge-primary ml-2"><%= settings.size %></span>
+            </h3>
+            <div class="card-tools">
+              <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                <i class="fa fa-minus"></i>
+              </button>
+            </div>
+          </div>
+          
+          <div class="card-body table-responsive p-0">
+            <table class="table table-striped table-hover">
+              <thead>
+                <tr>
+                  <th style="width: 250px;">Setting</th>
+                  <th>Current Value</th>
+                  <th style="width: 120px;">Type</th>
+                  <th style="width: 100px;">Status</th>
+                  <th style="width: 120px;">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <% settings.each do |setting| %>
+                  <tr class="setting-row" data-key="<%= setting[:key] %>" data-searchable="<%= [setting[:label], setting[:key]].compact.join(' ').downcase %>">
+                    <td>
+                      <div class="setting-info">
+                        <strong><%= setting[:label] %></strong>
+                        <br>
+                        <small class="text-muted"><code><%= setting[:key] %></code></small>
+                      </div>
+                    </td>
+                    
+                    <td>
+                      <div class="setting-value-container">
+                        <%= form_tag request.path, method: :post, class: 'setting-form d-inline', local: false, data: { key: setting[:key] } do %>
+                          <% field_name = "setting_value" %>
+                          <% field_id = "setting_#{setting[:key]}" %>
+                          <% current_value = setting[:current_value] %>
+                          <%= hidden_field_tag "setting_key", setting[:key] %>
+                          
+                          <div class="setting-input-group">
+                            <% case setting[:field_type] %>
+                            <% when :boolean %>
+                              <div class="custom-control custom-switch">
+                                <%= check_box_tag(field_name, '1', current_value, id: field_id, class: 'custom-control-input') %>
+                                <%= hidden_field_tag(field_name, '0') %>
+                                <%= label_tag(field_id, current_value ? 'Enabled' : 'Disabled', class: 'custom-control-label') %>
+                              </div>
+                            <% when :integer %>
+                              <%= number_field_tag(field_name, current_value, id: field_id, class: 'form-control form-control-sm', step: 1, style: 'max-width: 200px;') %>
+                            <% when :float %>
+                              <%= number_field_tag(field_name, current_value, id: field_id, class: 'form-control form-control-sm', step: 0.01, style: 'max-width: 200px;') %>
+                            <% when :text %>
+                              <%= text_area_tag(field_name, current_value, id: field_id, class: 'form-control form-control-sm', rows: 2, style: 'min-width: 300px;') %>
+                            <% when :email %>
+                              <%= email_field_tag(field_name, current_value, id: field_id, class: 'form-control form-control-sm', style: 'min-width: 250px;') %>
+                            <% when :url %>
+                              <%= url_field_tag(field_name, current_value, id: field_id, class: 'form-control form-control-sm', style: 'min-width: 300px;') %>
+                            <% when :array %>
+                              <% array_value = current_value.is_a?(Array) ? current_value.join(', ') : current_value.to_s %>
+                              <%= text_field_tag(field_name, array_value, id: field_id, class: 'form-control form-control-sm', placeholder: 'comma, separated, values', style: 'min-width: 300px;') %>
+                            <% when :json %>
+                              <% json_value = current_value.is_a?(String) ? current_value : current_value.to_json %>
+                              <%= text_area_tag(field_name, json_value, id: field_id, class: 'form-control form-control-sm font-monospace', rows: 3, placeholder: '{"key": "value"}', style: 'min-width: 350px;') %>
+                            <% else # :string %>
+                              <%= text_field_tag(field_name, current_value, id: field_id, class: 'form-control form-control-sm', style: 'min-width: 250px;') %>
+                            <% end %>
+                            
+                            <% if [:array, :json].include?(setting[:field_type]) %>
+                              <small class="form-text text-muted">
+                                <% if setting[:field_type] == :array %>
+                                  Separate values with commas
+                                <% else %>
+                                  Valid JSON format required
+                                <% end %>
+                              </small>
+                            <% end %>
+                          </div>
+                        <% end %>
+                        
+                        <% if setting[:default_value] != setting[:current_value] %>
+                          <small class="text-muted mt-1 d-block">
+                            <i class="fa fa-info-circle"></i>
+                            Default: <code><%= setting[:default_value].inspect %></code>
+                          </small>
+                        <% end %>
+                      </div>
+                    </td>
+                    
+                    <td>
+                      <span>
+                        <%= setting[:field_type].to_s.humanize %>
+                      </span>
+                    </td>
+                    
+                    <td>
+                      <div class="setting-status">
+                        <% if setting[:current_value] != setting[:default_value] %>
+                          <span>
+                            <i class="fa fa-edit"></i> Modified
+                          </span>
+                        <% else %>
+                          <span>
+                            <i class="fa fa-check"></i> Default
+                          </span>
+                        <% end %>
+                      </div>
+                      <div class="setting-feedback mt-1">
+                        <!-- AJAX feedback messages -->
+                      </div>
+                    </td>
+                    
+                    <td>
+                      <button type="button" class="btn btn-primary btn-sm btn-save" data-key="<%= setting[:key] %>" title="Save changes">
+                        <i class="fa fa-save"></i>
+                      </button>
+                    </td>
+                  </tr>
+                <% end %>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      <% end %>
+      
+      <!-- Empty state when no settings match search -->  
+      <div class="card no-results" style="display: none;">
+        <div class="card-body text-center py-5">
+          <i class="fa fa-search fa-3x text-muted mb-3"></i>
+          <h4 class="text-muted">No settings found</h4>
+          <p class="text-muted">Try adjusting your search criteria.</p>
+          <button type="button" class="btn btn-primary" id="clear-search-results">
+            <i class="fa fa-refresh"></i> Clear Search
+          </button>
+        </div>
+      </div>
+      
+    <% else %>
+      <div class="card">
+        <div class="card-body text-center py-5">
+          <i class="fa fa-cog fa-3x text-muted mb-3"></i>
+          <h4>No settings configured</h4>
+          <p class="text-muted">Make sure your Setting class has default values defined.</p>
+          <a href="<%= rails_admin.dashboard_path %>" class="btn btn-primary">
+            <i class="fa fa-arrow-left"></i> Back to Dashboard
+          </a>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<!-- Back to Dashboard Footer -->
+<div class="row mt-4">
+  <div class="col-12">
+    <div class="text-center">
+      <a href="<%= rails_admin.dashboard_path %>" class="btn btn-secondary">
+        <i class="fa fa-arrow-left"></i> Back to Dashboard
+      </a>
+    </div>
+  </div>
+</div>
+
+<% content_for :before_body_end do %>
+  <style>
+    .settings-category .card-header {
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+    }
+    
+    .setting-input-group {
+      display: inline-block;
+      vertical-align: top;
+    }
+    
+    .setting-value-container {
+      min-height: 60px;
+    }
+    
+    .setting-info strong {
+      font-size: 0.95em;
+    }
+    
+    .badge {
+      font-size: 0.75em;
+      font-weight: 500;
+    }
+    
+    /* Ensure good contrast for all badges */
+    .badge-dark {
+      background-color: #343a40 !important;
+      color: #fff !important;
+    }
+    
+    .badge-success {
+      background-color: #28a745 !important;
+      color: #fff !important;
+    }
+    
+    .badge-primary {
+      background-color: #007bff !important;
+      color: #fff !important;
+    }
+    
+    /* Fix table header text visibility */
+    .table thead th {
+      color: #495057 !important;
+      background-color: #f8f9fa !important;
+      border-bottom: 2px solid #dee2e6 !important;
+      font-weight: 600 !important;
+    }
+    
+    /* Fix table cell text visibility */
+    .table td, .table tbody th {
+      color: #495057 !important;
+    }
+    
+    .setting-feedback {
+      min-height: 20px;
+    }
+    
+    .table td {
+      vertical-align: middle;
+    }
+    
+    .custom-switch {
+      padding-left: 2.25rem;
+    }
+    
+    .content-header h1 {
+      font-size: 1.8rem;
+      font-weight: 500;
+    }
+    
+    @media (max-width: 768px) {
+      .table-responsive table {
+        font-size: 0.85em;
+      }
+      
+      .setting-input-group input, 
+      .setting-input-group textarea {
+        min-width: 200px !important;
+      }
+    }
+  </style>
+<% end %>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Search functionality
+  const searchInput = document.getElementById('settings-search');
+  const clearSearchButton = document.getElementById('clear-search');
+  const settingRows = document.querySelectorAll('.setting-row');
+  const visibleCountSpan = document.getElementById('visible-count');
+  const noResultsCard = document.querySelector('.no-results');
+  const settingsCategories = document.querySelectorAll('.settings-category');
+  
+  // Search functionality
+  if (searchInput) {
+    searchInput.addEventListener('input', function() {
+      const searchTerm = this.value.toLowerCase();
+      let visibleCount = 0;
+      let hasVisibleCategories = false;
+      
+      settingsCategories.forEach(function(category) {
+        let categoryHasVisible = false;
+        const rows = category.querySelectorAll('.setting-row');
+        
+        rows.forEach(function(row) {
+          const searchable = row.dataset.searchable || '';
+          const isVisible = searchTerm === '' || searchable.includes(searchTerm);
+          
+          row.style.display = isVisible ? '' : 'none';
+          if (isVisible) {
+            visibleCount++;
+            categoryHasVisible = true;
+          }
+        });
+        
+        category.style.display = categoryHasVisible ? '' : 'none';
+        if (categoryHasVisible) hasVisibleCategories = true;
+      });
+      
+      visibleCountSpan.textContent = visibleCount;
+      noResultsCard.style.display = hasVisibleCategories ? 'none' : 'block';
+      
+      // Update clear button
+      clearSearchButton.style.display = searchTerm ? 'block' : 'none';
+    });
+  }
+  
+  // Clear search
+  if (clearSearchButton) {
+    clearSearchButton.addEventListener('click', function() {
+      searchInput.value = '';
+      searchInput.dispatchEvent(new Event('input'));
+    });
+  }
+  
+  // Clear search from no results page
+  document.getElementById('clear-search-results')?.addEventListener('click', function() {
+    searchInput.value = '';
+    searchInput.dispatchEvent(new Event('input'));
+  });
+  
+  // Handle save buttons
+  document.querySelectorAll('.btn-save').forEach(function(button) {
+    button.addEventListener('click', function() {
+      const key = this.dataset.key;
+      const settingRow = document.querySelector(`.setting-row[data-key="${key}"]`);
+      const form = settingRow.querySelector('.setting-form');
+      
+      if (form) {
+        // Create and dispatch form submit event
+        const submitEvent = new Event('submit', { bubbles: true, cancelable: true });
+        form.dispatchEvent(submitEvent);
+      }
+    });
+  });
+  
+  // Handle individual setting form submissions
+  document.querySelectorAll('.setting-form').forEach(function(form) {
+    form.addEventListener('submit', function(e) {
+      e.preventDefault();
+      
+      var formData = new FormData(form);
+      var key = form.dataset.key;
+      var settingRow = form.closest('.setting-row');
+      var saveButton = settingRow.querySelector('.btn-save');
+      var feedbackDiv = settingRow.querySelector('.setting-feedback');
+      
+      // Show loading state
+      saveButton.disabled = true;
+      saveButton.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
+      feedbackDiv.innerHTML = '';
+      
+      fetch(form.action, {
+        method: 'POST',
+        body: formData,
+        headers: {
+          'X-Requested-With': 'XMLHttpRequest',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+        }
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          // Show success message
+          feedbackDiv.innerHTML = '<small class="text-success"><i class="fa fa-check"></i> Saved successfully!</small>';
+          
+          // Clear success message after 3 seconds
+          setTimeout(function() {
+            feedbackDiv.innerHTML = '';
+          }, 3000);
+        } else {
+          // Show error message
+          feedbackDiv.innerHTML = '<small class="text-danger"><i class="fa fa-exclamation-triangle"></i> ' + (data.error || 'Failed to save') + '</small>';
+        }
+      })
+      .catch(error => {
+        console.error('Error:', error);
+        feedbackDiv.innerHTML = '<small class="text-danger"><i class="fa fa-exclamation-triangle"></i> Network error</small>';
+      })
+      .finally(function() {
+        // Restore button state
+        saveButton.disabled = false;
+        saveButton.innerHTML = '<i class="fa fa-save"></i>';
+      });
+    });
+  });
+  
+  // Handle switch changes for boolean fields
+  document.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
+    checkbox.addEventListener('change', function() {
+      const label = document.querySelector(`label[for="${this.id}"]`);
+      if (label && label.classList.contains('custom-control-label')) {
+        label.textContent = this.checked ? 'Enabled' : 'Disabled';
+      }
+    });
+  });
+});
+</script>

data/example_app_setup.md

@@ -0,0 +1,156 @@
+# Testing the gem locally
+
+## 1. Create a test Rails app
+
+```bash
+rails new test_app
+cd test_app
+```
+
+## 2. Add gems to Gemfile
+
+Add these gems to your `Gemfile`:
+
+```ruby
+# Add these to your Gemfile
+gem 'rails_admin'
+gem 'rails-settings-cached'
+gem 'rails_admin_settings_ui', path: '/Users/r3cha/rails_admin_settings_ui'
+
+# For authentication (required by rails_admin)
+gem 'devise'
+```
+
+## 3. Bundle install
+
+```bash
+bundle install
+```
+
+## 4. Set up Devise (required for Rails Admin)
+
+```bash
+rails generate devise:install
+rails generate devise User
+```
+
+## 5. Set up Rails Admin
+
+```bash
+rails generate rails_admin:install
+```
+
+## 6. Create Setting model
+
+Create `app/models/setting.rb`:
+
+```ruby
+class Setting < RailsSettings::Base
+  cache_prefix { "v1" }
+
+  # General settings
+  field :app_name, default: "My Test Application"
+  field :maintenance_mode, default: false
+  field :max_users, default: 1000
+  field :welcome_message, default: "Welcome to our application!"
+
+  # Email settings  
+  field :mail_from, default: "noreply@example.com"
+  field :mail_host, default: "smtp.example.com"
+  field :mail_port, default: 587
+  field :mail_ssl, default: true
+
+  # API settings
+  field :api_key, default: ""
+  field :api_timeout, default: 30.0
+  field :api_endpoints, default: ["https://api.example.com", "https://backup-api.example.com"]
+
+  # Advanced settings
+  field :feature_flags, default: { "new_ui" => false, "beta_features" => false, "analytics" => true }
+  field :cache_ttl, default: 3600
+  field :debug_mode, default: false
+end
+```
+
+## 7. Configure Rails Admin
+
+Edit `config/initializers/rails_admin.rb`:
+
+```ruby
+RailsAdmin.config do |config|
+  config.authenticate_with do
+    # Add your authentication logic here
+    # For testing, you can comment this out or use a simple check
+  end
+
+  config.current_user_method(&:current_user)
+
+  config.actions do
+    dashboard                     # mandatory
+    index                         # mandatory
+    new
+    export
+    bulk_delete
+    show
+    edit
+    delete
+    show_in_app
+    
+    # Add the settings UI action
+    settings_ui
+  end
+
+  # Hide the default Setting model from navigation
+  config.model 'Setting' do
+    visible false
+  end
+end
+```
+
+## 8. Run migrations
+
+```bash
+rails db:create
+rails db:migrate
+```
+
+## 9. Create a user (if using Devise)
+
+```bash
+rails console
+```
+
+In the console:
+```ruby
+User.create!(email: 'admin@example.com', password: 'password', password_confirmation: 'password')
+```
+
+## 10. Start the server
+
+```bash
+rails server
+```
+
+## 11. Test the Settings UI
+
+1. Go to `http://localhost:3000/admin`
+2. Sign in with your test user
+3. Click on "Settings" in the navigation
+4. You should see your settings organized in tabs with a user-friendly interface!
+
+## Testing different setting types
+
+Try changing various settings to see the different field types in action:
+
+- **Boolean**: `maintenance_mode`, `mail_ssl`, `debug_mode`
+- **Integer**: `max_users`, `mail_port`, `cache_ttl`
+- **Float**: `api_timeout`
+- **String**: `app_name`, `api_key`, `mail_from`, `mail_host`
+- **Text**: `welcome_message` (if you make it longer)
+- **Array**: `api_endpoints`
+- **JSON**: `feature_flags`
+
+The interface will automatically categorize them into:
+- **General**: `app_name`, `maintenance_mode`, `max_users`, etc.
+- **Mail**: `mail_from`, `mail_host`, `mail_port`, `mail_ssl`
+- **Api**: `api_key`, `api_timeout`, `api_endpoints`

data/lib/locales/en.yml

@@ -0,0 +1,8 @@
+en:
+  admin:
+    actions:
+      settings_ui:
+        title: "Application Settings"
+        menu: "Settings"
+        breadcrumb: "Settings"
+        description: "Manage application settings with an intuitive interface"

data/lib/rails_admin_settings_ui/engine.rb

@@ -0,0 +1,27 @@
+require "rails"
+require_relative "settings_ui"
+require_relative "helper"
+
+module RailsAdminSettingsUi
+  class Engine < ::Rails::Engine
+    isolate_namespace RailsAdminSettingsUi
+
+    # Action registration is handled by the Railtie
+
+    # Load locale files
+    config.before_configuration do
+      I18n.load_path += Dir[File.join(File.dirname(__FILE__), '..', 'locales', '*.yml')]
+    end
+
+    # Include helpers in Rails Admin
+    initializer "rails_admin_settings_ui.helpers" do
+      ActiveSupport.on_load(:action_view) do
+        ActionView::Base.include RailsAdminSettingsUi::Helper
+      end
+    end
+
+    config.generators do |g|
+      g.test_framework :rspec
+    end
+  end
+end

data/lib/rails_admin_settings_ui/helper.rb

@@ -0,0 +1,20 @@
+module RailsAdminSettingsUi
+  module Helper
+    def badge_color_for_type(field_type)
+      case field_type
+      when :boolean
+        'success'
+      when :integer, :float
+        'info'
+      when :text, :json
+        'warning'
+      when :email, :url
+        'primary'
+      when :array
+        'dark'
+      else # :string
+        'dark'
+      end
+    end
+  end
+end

data/lib/rails_admin_settings_ui/railtie.rb

@@ -0,0 +1,14 @@
+module RailsAdminSettingsUi
+  class Railtie < Rails::Railtie
+    railtie_name :rails_admin_settings_ui
+
+    initializer "rails_admin_settings_ui.register_action", before: :load_config_initializers do
+      # This will run before the Rails Admin config initializer
+      Rails.application.config.to_prepare do
+        if defined?(RailsAdmin) && defined?(RailsAdmin::Config::Actions)
+          RailsAdmin::Config::Actions.register(:settings_ui, RailsAdminSettingsUi::SettingsUi)
+        end
+      end
+    end
+  end
+end