active_element 0.0.2 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 26b1ee53510a64cb3215d2fc26b93bea88eb02e6dc9da9ceed48c64af7bdd4eb
-  data.tar.gz: e942cc5ce6c22b456c40aa999304681970bb760a437bafd9a7f65a6365f8a487
+  metadata.gz: f044724b30fa122fb6700ecd4afa352e26d4b920aec89ee4ff3548cb2ef66c20
+  data.tar.gz: 5b0fab5e11fea56667782189c3ebdcdfe95fcc0935fa93ddfeb9ad9d7f8015af
 SHA512:
-  metadata.gz: e3d5d2b2882d1e3ddcbe4c3d3c3aadd39bac2762148812d463d6e6df81972f54108f3ac43b195525550ea8cf6e19b30cb8e59431033b161b771e2a863f5269f9
-  data.tar.gz: d6d4a623ff93445d973ab43ac94c74eb617f6ab73f3ab49bffee3f9a018bda34acc2e9a020c38f537ca8e49c5d3bb4386ef62102cf7b2e4ce2ba0bb1220cc7b6
+  metadata.gz: c9dc8ec715c992280a32943a7a2e6190d3af8d87260145aed268b94bdee2f3d4b574ddf5f10fdfd9de68f5d651da1958c120b4e08945099c65700a52bcd7e752
+  data.tar.gz: a400b8fbe592d4af7bd347aeb7f4e0ae2fe3597f0edba862c01ffc4cd15eeb6ba5fe1ead8dcbb8e5f43f23cbdc9242ef197d5b4861add208f8656e9c900728ea

data/.rubocop.yml

@@ -2,6 +2,7 @@ require:
 - rubocop-rake
 - rubocop-rspec
 - rubocop-rails
+- rubocop-factory_bot
 
 AllCops:
   NewCops: enable

data/Gemfile

@@ -8,9 +8,9 @@ gemspec
 gem 'devise', '~> 4.9'
 gem 'devpack', '~> 0.4.1'
 gem 'factory_bot_rails', '~> 5.2'
+gem 'paintbrush', path: '../paintbrush'
 gem 'rake', '~> 13.0'
 gem 'rspec', '~> 3.12'
-gem 'rspec-documentation'
 gem 'rspec-file_fixtures', '~> 0.1.6'
 gem 'rspec-html', '~> 0.3.2'
 gem 'rspec-its', '~> 1.3'

data/Gemfile.lock

@@ -1,10 +1,15 @@
+PATH
+  remote: ../paintbrush
+  specs:
+    paintbrush (0.1.1)
+
 PATH
   remote: .
   specs:
-    active_element (0.0.1)
+    active_element (0.0.4)
       bootstrap (~> 5.3.0alpha3)
-      faraday (~> 2.7)
       kaminari (~> 1.2)
+      paintbrush (~> 0.1.1)
       rails (~> 6.1)
       rouge (~> 4.1)
       sassc (~> 2.4)
@@ -102,10 +107,6 @@ GEM
     factory_bot_rails (5.2.0)
       factory_bot (~> 5.2.0)
       railties (>= 4.2.0)
-    faraday (2.7.4)
-      faraday-net_http (>= 2.0, < 3.1)
-      ruby2_keywords (>= 0.0.4)
-    faraday-net_http (3.0.2)
     ffi (1.15.5)
     globalid (1.1.0)
       activesupport (>= 5.0)
@@ -202,7 +203,6 @@ GEM
       rspec-mocks (~> 3.12.0)
     rspec-core (3.12.2)
       rspec-support (~> 3.12.0)
-    rspec-documentation (0.0.1)
     rspec-expectations (3.12.3)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.12.0)
@@ -253,7 +253,6 @@ GEM
       rubocop-capybara (~> 2.17)
       rubocop-factory_bot (~> 2.22)
     ruby-progressbar (1.13.0)
-    ruby2_keywords (0.0.5)
     sassc (2.4.0)
       ffi (~> 1.9)
     sassc-rails (2.1.2)
@@ -299,9 +298,9 @@ DEPENDENCIES
   devise (~> 4.9)
   devpack (~> 0.4.1)
   factory_bot_rails (~> 5.2)
+  paintbrush!
   rake (~> 13.0)
   rspec (~> 3.12)
-  rspec-documentation
   rspec-file_fixtures (~> 0.1.6)
   rspec-html (~> 0.3.2)
   rspec-its (~> 1.3)

data/active_element.gemspec

@@ -31,8 +31,8 @@ Gem::Specification.new do |spec|
   spec.metadata['rubygems_mfa_required'] = 'true'
 
   spec.add_runtime_dependency 'bootstrap', '~> 5.3.0alpha3'
-  spec.add_runtime_dependency 'faraday', '~> 2.7'
   spec.add_runtime_dependency 'kaminari', '~> 1.2'
+  spec.add_runtime_dependency 'paintbrush', '~> 0.1.1'
   spec.add_runtime_dependency 'rails', '~> 6.1'
   spec.add_runtime_dependency 'rouge', '~> 4.1'
   spec.add_runtime_dependency 'sassc', '~> 2.4'

data/app/assets/javascripts/active_element/application.js

@@ -4,7 +4,9 @@
 //= require active_element/theme
 //= require active_element/secret
 //= require active_element/json_field
-//= require active_element/search_field
+//= require active_element/text_search_field
 //= require active_element/form
 //= require active_element/confirm
 //= require active_element/pagination
+//= require active_element/toast
+//= require active_element/popover

data/app/assets/javascripts/active_element/popover.js

@@ -0,0 +1,6 @@
+(() => {
+  const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+  const popoverList = popoverTriggerList.map(function (element) {
+    return new bootstrap.Popover(element)
+  })
+})();

data/app/assets/javascripts/active_element/setup.js

@@ -20,6 +20,17 @@
     return element;
   };
 
+  const navbar = document.querySelector('.navbar.application-menu');
+
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 50) {
+      navbar.classList.add('shrink');
+    } else {
+      navbar.classList.remove('shrink');
+    }
+  });
+
+
   const ActiveElement = {
     log: (message) => { console.log(`[ActiveElement] ${message}`); },
     _id: 0,
@@ -28,6 +39,7 @@
     cloneElement,
     components: {},
     jsonData: {},
+    controller_path: document.querySelector('meta[name="active_element_controller_path"]').content
   };
 
   window.ActiveElement = ActiveElement;

data/app/assets/javascripts/active_element/{search_field.js → text_search_field.js}

@@ -37,7 +37,7 @@
           resultsItem.innerText = attributes.length === 0 ? value : `${attributes.join(', ')} (${value})`;
           resultsItem.addEventListener('click', () => {
             hiddenInput.value = value;
-            element.value = attributes.length == 0 ? value : `${attributes.join(', ')} (${value})`;
+            element.value = value;
             searchResultsContainer.replaceChildren();
             searchResultsContainer.classList.add('d-none');
           });
@@ -97,7 +97,7 @@
         searchResultsContainer.replaceChildren();
 
         fetch(
-          '/_text_search/',
+          `/${ActiveElement.controller_path}/_active_element_text_search/`,
           {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },

data/app/assets/javascripts/active_element/toast.js

@@ -0,0 +1,8 @@
+(() => {
+  const elements = [].slice.call(document.querySelectorAll('.toast'));
+  const toasts = elements.map(function (element) {
+    return new bootstrap.Toast(element, { animation: true, autohide: true, delay: 10000 })
+  });
+
+  toasts.forEach((toast) => toast.show());
+})();

data/app/assets/stylesheets/active_element/application.scss

@@ -1,7 +1,22 @@
 @import "variables";
 @import "bootstrap";
 
-.navbar-brand {
+.navbar.application-menu {
+  height: 5rem;
+  transition: height 0.5s ease-in-out, background-position 0.8s ease-in-out;
+  background-position: right 1.2rem center;
+  background-repeat: no-repeat;
+
+  &.shrink {
+    height: 3rem;
+    background-position: right -50rem center;
+  }
+
+  &:hover {
+    height: 5rem;
+    background-position: right 1.2rem center;
+    background-repeat: no-repeat;
+  }
 }
 
 td.action-column {
@@ -51,6 +66,55 @@ form {
   }
 }
 
+.search-field-results {
+  min-width: 20rem;
+  position: absolute;
+  .search-field-result {
+    cursor: pointer;
+    &:hover {
+      background-color: #{$blue};
+      color: #{$white};
+    }
+  }
+}
+
+.flash.toast {
+  position: absolute;
+  margin-top: 2rem;
+  margin-right: 1rem;
+  padding: 0;
+
+  &.notice {
+    .toast-body {
+      background: #{$blue-100};
+    }
+  }
+
+  &.alert {
+    .toast-body {
+      background: #{$red-100};
+    }
+  }
+}
+
+[data-bs-theme="dark"] {
+  .flash.toast {
+    &.notice {
+      .toast-body {
+        color: #{$white};
+        background: #{$blue-700};
+      }
+    }
+
+    &.alert {
+      .toast-body {
+        color: #{$white};
+        background: #{$red-700};
+      }
+    }
+  }
+}
+
 #theme-select {
   font-size: 1.5rem;
   padding: 0.2rem 0.8rem;

data/app/controllers/active_element/application_controller.rb

@@ -8,34 +8,28 @@ module ActiveElement
 
     layout 'active_element'
 
-    before_action -> { authenticate_user! }
-    before_action -> { ActiveElement::ControllerAction.new(self).process_action }
-
-    helper_method :active_element_component
-    helper_method :render_active_element_hook
-
-    def self.permit_user(permissions, **kwargs)
-      active_element_permissions << [permissions, kwargs]
-
-      nil
+    def self.active_element
+      @active_element ||= ActiveElement::ControllerInterface.new(self)
     end
 
-    def active_element_component
-      @active_element_component ||= ActiveElement::Component.new(self)
+    def active_element
+      @active_element ||= ActiveElement::ControllerInterface.new(self.class, self)
     end
 
+    before_action -> { active_element.authenticator&.call }
+    before_action -> { ActiveElement::ControllerAction.new(self).process_action }
+
+    helper_method :active_element
+    helper_method :render_active_element_hook
+
     def render_active_element_hook(hook)
-      render_to_string partial: "/active_element/#{hook}"
+      render_to_string partial: hook
     rescue ActionView::MissingTemplate
       nil
     end
 
-    def missing_template_store
-      @missing_template_store ||= {}
-    end
-
-    def self.active_element_permissions
-      @active_element_permissions ||= []
+    def _active_element_text_search
+      render(**ActiveElement::Components::TextSearch::Component.new(controller: self).response)
     end
   end
 end

data/app/views/active_element/components/form/_label.html.erb

@@ -1,6 +1,6 @@
-<%= form.label field, options[:label] do %>
+<%= form.label field do %>
+  <%= options[:label] %>
   <% if options[:description].present? %>
-    <%= options[:label] %>
     <button type="button"
             style="background: none; border: none; outline: 0; position: absolute; margin-top: 0.3rem"
             data-bs-toggle="popover"

data/app/views/active_element/components/form/_templates.html.erb

@@ -17,25 +17,25 @@
 
     <select id="json-select-template" class="form-select m-1 json-select-field"></select>
 
-    <%= active_element_component.destroy_button id: 'json-delete-button-template',
+    <%= active_element.component.destroy_button id: 'json-delete-button-template',
                                           class: 'button-sm json-delete-button' %>
 
-    <%= active_element_component.button 'Delete Item', type: 'danger', id: 'json-delete-object-button-template',
+    <%= active_element.component.button 'Delete Item', type: 'danger', id: 'json-delete-object-button-template',
                                           class: 'json-delete-button w-25 float-end json-delete-object-button' %>
 
-    <%= active_element_component.button id: 'json-append-button-template',
+    <%= active_element.component.button id: 'json-append-button-template',
                                   class: 'btn-sm mt-3 mb-3 json-add-field-button' %>
 
-    <%= active_element_component.button 'Hide', id: 'json-expand-collapse-button-template',
+    <%= active_element.component.button 'Hide', id: 'json-expand-collapse-button-template',
                                   class: 'float-end expand-collapse-button' %>
 
   </div>
 
-  <%= active_element_component.button 'Expand Form', id: 'form-expand-button-template', class: 'mb-1 btn-sm' do %>
+  <%= active_element.component.button 'Expand Form', id: 'form-expand-button-template', class: 'mb-1 btn-sm' do %>
     <i class="fa-solid fa-fw fa-up-right-and-down-left-from-center"></i>
   <% end %>
 
-  <%= active_element_component.button 'Collapse Form', id: 'form-collapse-button-template', class: 'mb-1 btn-sm' do %>
+  <%= active_element.component.button 'Collapse Form', id: 'form-collapse-button-template', class: 'mb-1 btn-sm' do %>
     <i class="fa-solid fa-fw fa-down-left-and-up-right-to-center"></i>
   <% end %>
 
@@ -76,10 +76,10 @@
   </div>
 
   <div id="form-confirm-button-template">
-    <%= active_element_component.button 'Confirm' %>
+    <%= active_element.component.button 'Confirm' %>
   </div>
 
   <div id="form-cancel-button-template">
-    <%= active_element_component.button 'Cancel' %>
+    <%= active_element.component.button 'Cancel' %>
   </div>
 </div>

data/app/views/active_element/components/form.html.erb

@@ -1,5 +1,5 @@
 <% if destroy %>
-  <%= active_element_component.destroy_button(record, float: 'end') %>
+  <%= active_element.component.destroy_button(record, float: 'end') %>
 <% end %>
 
 <% if modal %>
@@ -7,7 +7,7 @@
   <div class="mt-4 mb-5 ms-3">
 
     <div class="p-3 pb-4 border-bottom d-inline">
-      <%= active_element_component.button(
+      <%= active_element.component.button(
             title: title.presence || 'Show Form',
             icon: 'arrow-up-right-dots',
             data: { field_type: 'form-modal', form_id: id, form_title: title }) %>
@@ -40,7 +40,7 @@
   <%= form_with local: true, **kwargs, method: method, id: id, class: "#{class_name} m-3 #{modal == false && expanded == false ? 'd-none' : nil}" do |form| %>
     <% if %i[top both].include?(submit_position) %>
       <div class="form-group sticky-top" style="top: 0.5rem;">
-        <%= form.submit submit_label, class: 'btn btn-success float-end' %>
+        <%= form.submit submit_label, class: "btn btn-#{method == :post ? 'success' : 'primary'} float-end" %>
       </div>
     <% end %>
 

data/app/views/active_element/components/table/_collection_row.html.erb

@@ -12,19 +12,19 @@
 
   <% if show %>
     <td class="<%= "#{class_name}-show" %> action-column text-end">
-      <%= active_element_component.show_button(item, show, class: 'btn-sm') %>
+      <%= active_element.component.show_button(item, show, class: 'btn-sm') %>
     </td>
   <% end %>
 
   <% if edit %>
     <td class="<%= "#{class_name}-edit" %> action-column text-end">
-      <%= active_element_component.edit_button(item, show, class: 'btn-sm') %>
+      <%= active_element.component.edit_button(item, show, class: 'btn-sm') %>
     </td>
   <% end %>
 
   <% if destroy %>
     <td class="<%= "#{class_name}-destroy" %> action-column text-end">
-      <%= active_element_component.destroy_button(item, destroy, class: 'btn-sm') %>
+      <%= active_element.component.destroy_button(item, destroy, class: 'btn-sm') %>
     </td>
   <% end %>
 </tr>

data/app/views/active_element/components/table/collection.html.erb

@@ -1,5 +1,5 @@
 <% if new %>
-  <%= active_element_component.new_button(collection, float: 'end', class: 'mb-3') %>
+  <%= active_element.component.new_button(collection, float: 'end', class: 'mb-3') %>
 <% end %>
 
 <% if display_pagination %>

data/app/views/active_element/components/table/item.html.erb

@@ -1,13 +1,13 @@
 <% if destroy && item.present? %>
-  <%= active_element_component.destroy_button(item, destroy, float: 'end') %>
+  <%= active_element.component.destroy_button(item, destroy, float: 'end') %>
 <% end %>
 
 <% if edit && item.present? %>
-  <%= active_element_component.edit_button(item, edit, float: 'end') %>
+  <%= active_element.component.edit_button(item, edit, float: 'end') %>
 <% end %>
 
 <% if new %>
-  <%= active_element_component.new_button(item, float: 'end', class: 'mb-3') %>
+  <%= active_element.component.new_button(item, float: 'end', class: 'mb-3') %>
 <% end %>
 
 <table class="<%= class_name %> table" style="<%= style %>">

data/app/views/active_element/navbar/_menu.html.erb

@@ -7,14 +7,14 @@
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-        <% ActiveElement.navbar_items(current_user).each do |navbar_item| %>
+        <% ActiveElement.navbar_items(active_element.current_user).each do |navbar_item| %>
           <li class="nav-item">
             <%=
               link_to navbar_item.fetch(:title) { navbar_item.fetch(:label) },
                       navbar_item.fetch(:path),
                       class: "nav-link #{
                         ActiveElement.active_path_class(
-                          user: current_user,
+                          user: active_element.current_user,
                           current_navbar_item: navbar_item,
                           current_path: request.path,
                           controller_path: controller_path,

data/app/views/layouts/active_element.html.erb

@@ -7,18 +7,15 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
     <%= stylesheet_link_tag 'active_element/application', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_include_tag 'active_element/application', 'data-turbolinks-track': 'reload' %>
 
     <% if Rails.application.assets.find_asset('application.css').present? %>
       <%= stylesheet_link_tag 'application', 'data-turbolinks-track': 'reload' %>
     <% end %>
 
-    <% if Rails.application.assets.find_asset('application.js').present? %>
-      <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
-    <% end %>
-
     <%= csrf_meta_tag %>
 
+    <meta name="active_element_controller_path" content="<%= controller_path %>">
+
     <%= render_active_element_hook 'active_element/after_head' %>
   </head>
 
@@ -28,11 +25,21 @@
     <%= render_active_element_hook 'active_element/after_navbar' %>
 
     <% flash.each do |type, message| %>
-      <div class="flash card text-bg-<%= { notice: 'info', alert: 'danger' }.fetch(type.to_sym, 'info') %> flash <%= type %> float-end">
-          <div class="card-body">
-            <%= message %>
-            <button type="button" class="btn-close" aria-label="Close"></button>
-          </div>
+      <div class="flash toast <%= type %> position-absolute top-0 end-0 mt-5" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+          <% if type == 'notice' %>
+            <i class="fa-solid me-2 text-info fa-circle-info"></i>
+          <% elsif type == 'alert' %>
+            <i class="fa-solid me-2 text-danger fa-circle-exclamation"></i>
+          <% else %>
+            <i class="fa-solid me-2 text-info fa-circle-info"></i>
+          <% end %>
+          <strong class="me-auto"><%= type.titleize %></strong>
+          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+        <div class="toast-body fw-bold align-middle">
+          <%= message %>
+        </div>
       </div>
     <% end %>
 
@@ -48,18 +55,9 @@
 
     <%= render_active_element_hook 'active_element/after_content' %>
 
-    <script>
-      var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
-      var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
-        return new bootstrap.Popover(popoverTriggerEl)
-      })
-
-      document.querySelectorAll('.flash .btn-close').forEach(element => {
-        element.onclick = ev => {
-          ev.stopPropagation();
-          ev.target.parentElement.parentElement.classList.add('d-none');
-        };
-      });
-    </script>
+    <%= javascript_include_tag 'active_element/application', 'data-turbolinks-track': 'reload' %>
+    <% if Rails.application.assets.find_asset('application.js').present? %>
+      <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <% end %>
   </body>
 </html>

data/app/views/layouts/active_element_error.html.erb

@@ -26,7 +26,7 @@
     }
   </style>
 
-  <%= render_active_element_hook 'before_error_content' %>
+  <%= render_active_element_hook 'active_element/before_error_content' %>
 
   <body>
     <div class="wrapper">

data/config/routes.rb

@@ -1,5 +1,14 @@
 # frozen_string_literal: true
 
 ActiveElement::Engine.routes.draw do
-  post '/_text_search', controller: 'active_element/text_searches', action: 'create'
+  ActiveElement.eager_load_controllers
+
+  ActiveElement::ApplicationController.descendants.map do |descendant|
+    post "#{descendant.controller_path}/_active_element_text_search",
+         controller: descendant.controller_path,
+         action: '_active_element_text_search'
+
+    # Permissions for text search are managed by ActiveElement::Components::TextSearch::Authorization
+    descendant.active_element.permit_action :_active_element_text_search, always: true
+  end
 end

data/lib/active_element/components/button.rb

@@ -3,7 +3,6 @@
 module ActiveElement
   module Components
     # A clickable button.
-    # rubocop:disable Metrics/ClassLength
     class Button
       # rubocop:disable Metrics/MethodLength
       def initialize(controller, record, flag_or_options, confirm: false, type: :primary, method: nil,
@@ -75,45 +74,6 @@ module ActiveElement
         { 'end' => 'float-end', 'start' => 'float-start', nil => nil }.fetch(float)
       end
 
-      def namespace_prefix
-        # XXX: We guess the namespace from the current controller's module name. This will work
-        # most of the time but will break the current record's controller exists in a different
-        # namespace to the current controller, e.g. `BackEndAdmin::UsersController` and
-        # `FrontEndAdmin::ThemesController` - if `FrontEndAdmin::ThemesController` renders a
-        # collection of `User` objects, the "show" path will be wrong:
-        # `front_end_admin_user_path`. Maybe descend through the full controller class tree to
-        # find a best match ?
-        namespace = controller.class.name.deconstantize.underscore
-        return nil if namespace.blank?
-
-        "#{namespace}_"
-      end
-
-      def record_path
-        return nil if record.nil?
-
-        controller.helpers.public_send(default_record_path, record)
-      rescue NoMethodError
-        controller.helpers.public_send(sti_record_path, record)
-      end
-
-      def default_record_path
-        "#{record_path_prefix}#{namespace_prefix}#{record_name}_path"
-      end
-
-      def sti_record_path
-        "#{record_path_prefix}#{namespace_prefix}#{sti_record_name}_path"
-      end
-
-      def record_path_prefix
-        case type
-        when :edit
-          'edit_'
-        when :new
-          'new_'
-        end
-      end
-
       def title
         return flag_or_options[:title] if flag_or_options.is_a?(Hash) && flag_or_options[:title].present?
         return default_action_title if %i[show destroy edit new].include?(type)
@@ -150,7 +110,12 @@ module ActiveElement
       def sti_record_name
         Util.sti_record_name(record)
       end
+
+      def record_path
+        return nil unless record.class.is_a?(ActiveModel::Naming)
+
+        Util::RecordPath.new(record: record, controller: controller, type: type).path
+      end
     end
   end
-  # rubocop:enable Metrics/ClassLength
 end