active_element 0.0.1 → 0.0.2

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

@@ -0,0 +1,142 @@
+// Sandstone 5.2.2
+// Bootswatch
+
+$theme: "sandstone" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #f8f5f0 !default;
+$gray-300: #dfd7ca !default;
+$gray-400: #ced4da !default;
+$gray-500: #98978b !default;
+$gray-600: #8e8c84 !default;
+$gray-700: #495057 !default;
+$gray-800: #3e3f3a !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #325d88 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #d9534f !default;
+$orange:  #f47c3c !default;
+$yellow:  #ffc107 !default;
+$green:   #93c54b !default;
+$teal:    #20c997 !default;
+$cyan:    #29abe0 !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $orange !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-800 !default;
+
+$theme-select-icon-dark: $blue;
+$theme-select-icon-light: $orange;
+
+$min-contrast-ratio:   2 !default;
+
+// Body
+
+$body-color:                $gray-800 !default;
+
+// Links
+
+$link-color:                $success !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$headings-font-weight:        400 !default;
+
+// Dropdowns
+
+$dropdown-link-color:               $gray-600 !default;
+$dropdown-link-hover-color:         $dropdown-link-color !default;
+$dropdown-link-hover-bg:            $gray-200 !default;
+$dropdown-link-active-color:        $dropdown-link-color !default;
+$dropdown-link-active-bg:           $dropdown-link-hover-bg !default;
+
+// Navs
+
+$nav-link-padding-x:                .9rem !default;
+$nav-link-disabled-color:           $gray-300 !default;
+$nav-tabs-border-color:             $gray-300 !default;
+$nav-tabs-link-hover-border-color:  $gray-300 !default;
+$nav-tabs-link-active-bg:           $white !default;
+$nav-pills-link-active-color:       $gray-600 !default;
+$nav-pills-link-active-bg:          $gray-200 !default;
+
+// Navbar
+
+$navbar-dark-hover-color:           $white !default;
+$navbar-light-hover-color:          $black !default;
+$navbar-light-active-color:         $black !default;
+
+// Pagination
+
+$pagination-color:                  $gray-600 !default;
+$pagination-bg:                     $gray-200 !default;
+$pagination-border-color:           $gray-300 !default;
+$pagination-hover-color:            $pagination-color !default;
+$pagination-active-color:           $pagination-color !default;
+$pagination-active-bg:              $gray-300 !default;
+$pagination-active-border-color:    $gray-300 !default;
+$pagination-disabled-color:         $gray-300 !default;
+$pagination-disabled-bg:            $gray-200 !default;
+$pagination-disabled-border-color:  $pagination-border-color !default;
+
+// Cards
+
+$card-border-color:                 rgba($gray-300, .75) !default;
+$card-cap-bg:                       rgba($gray-200, .25) !default;
+
+// Popovers
+
+$popover-header-bg:                 $gray-200 !default;
+
+// Modals
+
+$modal-content-border-color:        $gray-300 !default;
+$modal-header-border-color:         $modal-content-border-color !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-300 !default;
+$progress-border-radius:            10px !default;
+$progress-bar-color:                $primary !default;
+
+// List group
+
+$list-group-border-color:           $gray-300 !default;
+$list-group-hover-bg:               $gray-200 !default;
+$list-group-active-color:           $body-color !default;
+$list-group-active-bg:              $gray-200 !default;
+$list-group-active-border-color:    $gray-300 !default;
+$list-group-disabled-color:         $gray-500 !default;
+$list-group-disabled-bg:            $white !default;
+$list-group-action-color:           $list-group-active-color !default;
+$list-group-action-active-color:    $list-group-active-color !default;
+$list-group-action-active-bg:       $gray-300 !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-bg:                     $pagination-bg !default;
+$breadcrumb-border-radius:          .25rem !default;
+
+// Close
+
+$btn-close-color:            $white !default;
+$btn-close-opacity:          .8 !default;
+$btn-close-hover-opacity:    1 !default;

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

@@ -0,0 +1,77 @@
+@import "variables";
+@import "bootstrap";
+
+.navbar-brand {
+}
+
+td.action-column {
+  width: 2rem;
+}
+
+.action-button {
+  margin-right: 0.5rem;
+  min-width: 5rem;
+}
+
+table {
+  td.action-column {
+    padding-right: 0.2rem;
+    padding-left: 0.2rem;
+  }
+
+  .action-button {
+    margin-right: 0.2rem;
+    min-width: 2rem;
+
+    .button-title {
+      display: none;
+    }
+  }
+}
+
+form {
+  label {
+    display: inline;
+  }
+}
+
+.json-field {
+  .form-control, .form-select {
+    width: calc(100% - 2.5rem);
+    display: inline;
+  }
+
+  .action-button {
+    min-width: 2rem;
+    margin-left: 0.2rem;
+
+    .button-title {
+      display: none;
+    }
+  }
+}
+
+#theme-select {
+  font-size: 1.5rem;
+  padding: 0.2rem 0.8rem;
+  position: absolute;
+  right: 0;
+
+  a {
+    &.dark-theme {
+      color: #{$theme-select-icon-dark};
+
+      &:hover, &:active {
+        color: #{lighten($theme-select-icon-dark, 10%)};
+      }
+    }
+
+    &.light-theme {
+      color: #{$theme-select-icon-light};
+
+      &:hover, &:active {
+        color: #{lighten($theme-select-icon-light, 10%)};
+      }
+    }
+  }
+}

data/app/controllers/active_element/application_controller.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module ActiveElement
+  # Base controller for all ActiveElement API admin front ends, provides standard layout, menu,
+  # authentication as Superuser, and standardised HTML widgets.
+  class ApplicationController < ActionController::Base
+    include ActionView::Helpers::TagHelper
+
+    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
+    end
+
+    def active_element_component
+      @active_element_component ||= ActiveElement::Component.new(self)
+    end
+
+    def render_active_element_hook(hook)
+      render_to_string partial: "/active_element/#{hook}"
+    rescue ActionView::MissingTemplate
+      nil
+    end
+
+    def missing_template_store
+      @missing_template_store ||= {}
+    end
+
+    def self.active_element_permissions
+      @active_element_permissions ||= []
+    end
+  end
+end

data/app/controllers/active_element/text_searches_controller.rb

@@ -0,0 +1,189 @@
+# frozen_string_literal: true
+
+module ActiveElement
+  # Used by auto-complete search field for executing a text search on the provided model and
+  # attributes.
+  #
+  # The user must have the permission `can_create_<application_name>_active_element_text_searches`.
+  #
+  # A model must call `authorize_active_element_text_search_for` to enable text search. e.g.:
+  #
+  # class MyModel < ApplicationRecord
+  #   authorize_active_element_text_search_for :name, exposes: [:email]
+  # end
+  #
+  # This will allow searching on the `name` column and permits returning each matching record's
+  # `:email` column's value.
+  #
+  # TODO: Refactor logic into separate classes.
+  # rubocop:disable Metrics/ClassLength
+  class TextSearchesController < ApplicationController
+    DEFAULT_LIMIT = 50
+
+    before_action :verify_parameters
+    before_action :verify_model
+
+    def create
+      render json: { results: results, request_id: params[:request_id] }
+    end
+
+    private
+
+    def verify_parameters
+      return if %i[model attributes value query].all? { |parameter| params[parameter].present? }
+
+      render json: { message: 'Must provide parameters: [model, attributes, value, query] for text search.' },
+             status: :unprocessable_entity
+    end
+
+    def verify_model
+      return if [model, search_columns, value_column].all?(&:present?) && authorized?
+
+      render json: { message: verify_fail_message }, status: :unprocessable_entity
+    end
+
+    def verify_fail_message
+      requested = %i[model attributes value].index_with { |key| params[key] }
+                                            .compact_blank
+                                            .map { |key, value| "#{key}: #{value}" }
+      "Unpermitted or unavailable search for: { #{requested.join(', ')} }"
+    end
+
+    def results
+      @results ||= model.where(*whereclause)
+                        .limit(limit)
+                        .pluck(value_column.name, *search_columns.map(&:name))
+                        .map { |value, *attributes| result(value, attributes) }
+    end
+
+    def result(value, attributes)
+      { value: value, attributes: attributes.reject { |attribute| attribute == value } }
+    end
+
+    def model
+      @model ||= params[:model].camelize(:upper).safe_constantize
+    end
+
+    def query
+      params[:query]
+    end
+
+    def value_column
+      return nil if params[:value].blank?
+
+      @value_column ||= model&.columns&.find { |column| column.name == params[:value] }
+    end
+
+    def search_columns
+      return nil if params[:attributes].blank?
+
+      @search_columns ||= params[:attributes].map { |attribute| column_for(attribute) }.compact
+    end
+
+    def column_for(attribute)
+      matched_column = model&.columns&.find { |column| column.name == attribute }
+      return nil if matched_column.blank?
+
+      compatible_column?(matched_column) ? matched_column : nil
+    end
+
+    def authorized?
+      model.authorized_active_element_text_search_fields&.any? do |field, exposed|
+        exposed = [exposed] unless exposed.is_a?(Array)
+        authorized_field?(field, exposed)
+      end
+    end
+
+    def authorized_field?(field, exposed)
+      return false unless search_columns.map { |column| column.name.to_sym }.include?(field.to_sym)
+      return false unless exposed&.map(&:to_sym)&.include?(value_column.name.to_sym)
+
+      true
+    end
+
+    def whereclause
+      clauses = search_columns.map { |column| "#{column.name} #{operator(column)} ?" }
+      [clauses.join(' OR '), search_columns.map { |column| search_param(column) }].flatten
+    end
+
+    def operator(column)
+      case column.type
+      when :string
+        model.connection.adapter_name == 'SQLite' ? 'LIKE' : 'ILIKE'
+      else
+        '='
+      end
+    end
+
+    def compatible_column?(column) # rubocop:disable Metrics/MethodLength
+      case column.type
+      when :string
+        true
+      when :integer
+        integer?
+      when :float
+        float?
+      when :decimal
+        decimal?
+      else
+        Rails.logger.info("Skipping query `#{query}` for incompatible column: #{column.name}")
+        false
+      end
+    end
+
+    def integer?
+      Integer(query)
+      true
+    rescue ArgumentError
+      false
+    end
+
+    def float?
+      Float(query)
+      true
+    rescue ArgumentError
+      false
+    end
+
+    def decimal?
+      BigDecimal(query)
+      true
+    rescue ArgumentError
+      false
+    end
+
+    def search_param(column)
+      case column.type
+      when :string
+        "#{query}%"
+      else
+        query
+      end
+    end
+
+    def limit
+      DEFAULT_LIMIT
+    end
+
+    def permissions_check
+      @permissions_check ||= PermissionsCheck.new(
+        required: [],
+        actual: current_user.permissions,
+        controller_path: controller_path,
+        action_name: action_name,
+        rails_component: rails_component
+      )
+    end
+
+    def required_permissions
+      application_name = rails_component.application_name
+      permission = "can_text_search_#{application_name}_#{params[:model]&.pluralize}"
+      [[permission, { only: :create }]]
+    end
+
+    def rails_component
+      @rails_component ||= RailsComponent.new(Rails)
+    end
+  end
+  # rubocop:enable Metrics/ClassLength
+end

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

@@ -0,0 +1,32 @@
+<nav class="<%= class_name %>">
+  <div class="nav nav-tabs" id="nav-tab" role="tablist">
+    <% tabs.each do |tab| %>
+      <%=
+        link_to tab.title,
+                tab.path,
+                class: "nav-link #{tab.selected? ? 'active' : nil}",
+                id: "nav-#{tab.identifier}-tab",
+                type: 'button',
+                role: 'tab',
+                :'aria-controls' => "nav-#{tab.identifier}",
+                :'aria-selected' => tab.selected? ? 'true' : 'false'
+      %>
+    <% end %>
+  </div>
+</nav>
+
+<% tabs.each do |tab| %>
+  <div class="tab-content" id="nav-tabContent">
+    <div
+      class="p-3 tab-pane fade <%= tab.selected? ? 'show active' : nil %> <%= tab.identifier %>"
+      id="nav-credentials"
+      role="tabpanel"
+      aria-labelledby="nav-<%= tab.identifier %>-tab"
+      tabindex="0"
+    >
+      <div class="<%= tab.identifier %>">
+        <%= tab.content %>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,38 @@
+<div class="row">
+  <div class="col-3">
+      <nav class="<%= class_name %>">
+      <div class="nav nav-pills flex-column" id="nav-tab" role="tablist">
+        <% tabs.sort_by { |tab| tab.selected? ? 0 : 1 }.each do |tab| %>
+          <%=
+            link_to tab.title,
+                    tab.path,
+                    class: "nav-link #{tab.selected? ? 'active' : nil}",
+                    id: "nav-#{tab.identifier}-tab",
+                    type: 'button',
+                    role: 'tab',
+                    :'aria-controls' => "nav-#{tab.identifier}",
+                    :'aria-selected' => tab.selected? ? 'true' : 'false'
+          %>
+        <% end %>
+      </div>
+    </nav>
+  </div>
+
+  <div class="col-9">
+    <% tabs.each do |tab| %>
+      <div class="tab-content" id="nav-tabContent">
+        <div
+          class="ps-3 tab-pane fade <%= tab.selected? ? 'show active' : nil %> <%= tab.identifier %>"
+          id="nav-credentials"
+          role="tabpanel"
+          aria-labelledby="nav-<%= tab.identifier %>-tab"
+          tabindex="0"
+        >
+          <div class="<%= tab.identifier %>">
+            <%= tab.content %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,27 @@
+
+<%=
+  link_to(
+    path.presence || '#',
+    method: path.present? && method != :get ? method : nil,
+    data: { confirm_action: confirm },
+    class: "btn #{button_class} #{float_class} #{kwargs_class}",
+    title: title,
+    **kwargs
+  ) do %>
+  <% if block_given %>
+    <%= raw content %>
+  <% else %>
+    <span class="text-nowrap">
+      <% if icon.present? %>
+        <i class="fa-solid fa-<%= icon %>"></i>
+      <% elsif type == :show %>
+        <i class="fa-solid fa-eye"></i>
+      <% elsif type == :edit %>
+        <i class="fa-solid fa-pen"></i>
+      <% elsif type == :destroy %>
+        <i class="fa-solid fa-square-xmark"></i>
+      <% end %>
+      <span class="button-title"><%= title %></span>
+    </span>
+  <% end %>
+<% end %>

data/app/views/active_element/components/fields/_boolean.html.erb

@@ -0,0 +1,11 @@
+<% if value %>
+  <span class="text-success">
+    <i class="fa-solid fa-fw fa-check"></i>
+    Yes
+  </span>
+<% else %>
+  <span class="text-danger">
+    <i class="fa-solid fa-fw fa-xmark"></i>
+    No
+  </span>
+<% end %>

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

@@ -0,0 +1,3 @@
+<%= form.check_box field, checked: ['1', true].include?(component.value_for(field)),
+                          class: "form-check-input #{component.valid?(field) ? nil : 'is-invalid'}",
+                          **options  %>

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

@@ -0,0 +1,33 @@
+<% if options.key?(:option_groups) %>
+  <% options[:option_groups].each do |group_title, group, group_options| %>
+    <div class="p-3">
+      <a name="<%= ActiveElement::Components::Util::I18n.class_name(group_title) %>"></a>
+      <%= component.page_section_title group_title %>
+      <%= form.fields_for field do |subform| %>
+        <% group.each do |label, name, checked| %>
+          <%= subform.check_box(name, checked: checked, class: 'me-2') %>
+          <%= subform.label name, label %>
+          <br/>
+        <% end %>
+      <% end %>
+
+    </div>
+    <hr/>
+  <% end %>
+<% else %>
+  <div class="container w-100">
+    <%= form.fields_for field do |subform| %>
+      <% options.fetch(:options).each_slice(options.fetch(:columns, 1)) do |slice| %>
+        <div class="row w-100">
+          <% slice.each do |label, name, checked| %>
+            <div class="col">
+              <%= subform.check_box(name, checked: checked, class: 'me-2') %>
+              <%= subform.label name, label %>
+            </div>
+            <br/>
+          <% end %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,28 @@
+<% if type == :select %>
+  <%= render partial: 'active_element/components/form/select',
+             locals: { form: form, field: field, options: options, component: component } %>
+<% elsif type == :check_boxes %>
+  <%= render partial: 'active_element/components/form/check_boxes',
+             locals: { field: field, form: form, options: options, component: component } %>
+<% elsif type == :json_field %>
+  <%= render partial: 'active_element/components/form/json',
+             locals: { field: field, form: form, options: options, component: component } %>
+<% elsif type == :text_search_field %>
+  <%= render partial: 'active_element/components/form/text_search',
+             locals: { form_id: id, field: field, form: form, options: options, component: component } %>
+<% elsif type == :check_box %>
+  <%= render partial: 'active_element/components/form/check_box',
+             locals: { form: form, type: type, field: field, options: options, component: component } %>
+<% elsif type == :text_area %>
+  <%= render partial: 'active_element/components/form/text_area',
+             locals: { form: form, type: type, field: field, options: options, component: component } %>
+<% else %>
+  <%= render partial: 'active_element/components/form/generic_field',
+             locals: { form: form, type: type, field: field, options: options, component: component } %>
+<% end %>
+
+<% unless component.valid?(field) %>
+  <p class="text-danger pt-1 m-0 validation-error-message">
+    <%= record.errors.full_messages_for(field).join(', ') %>
+  </p>
+<% end %>

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

@@ -0,0 +1,3 @@
+<%= form.public_send(type, field, value: component.value_for(field),
+                                  class: "form-control #{component.valid?(field) ? nil : 'is-invalid'}",
+                                  **options) %>

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

@@ -0,0 +1,12 @@
+<div class="col-sm-10 json-field form-group"
+     data-data-key="<%= ActiveElement::Components::Util.json_name("#{form.object_name}.#{field}") %>"
+>
+
+</div>
+
+<%=
+  component.json(
+    ActiveElement::Components::Util.json_name("#{form.object_name}.#{field}"),
+    { data: component.value_for(field, options), schema: component.schema_for(field, options) }
+  )
+%>

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

@@ -0,0 +1,17 @@
+<%= form.label field, options[:label] do %>
+  <% 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"
+            title="<%= options.fetch(:label) %>"
+            data-bs-content="<%= options[:description] %>">
+            <i class="text-secondary fa-solid fa-circle-info"></i>
+    </button>
+  <% end %>
+<% end %>
+
+<% if type == :check_boxes && options[:option_groups].present? %>
+  <%= render partial: 'active_element/components/form/option_groups_summary',
+             locals: { option_groups: options[:option_groups] } %>
+<% end %>

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

@@ -0,0 +1,17 @@
+<ol class="list-group pt-2">
+  <% option_groups.each do |group_title, group, group_options| %>
+    <li class="list-group-item d-flex justify-content-between align-items-start">
+      <div class="ms-2 me-auto">
+        <a style="font-size: 0.8rem;" href="#<%= ActiveElement::Components::Util::I18n.class_name(group_title) %>">
+          <%= group_title %>
+        </a>
+      </div>
+      <% if group_options.key?(:count) %>
+        <span
+          class="badge bg-<%= group_options[:count].positive? ? 'primary' : 'secondary' %> rounded-pill">
+            <%= group_options[:count] %>
+          </span>
+      <% end %>
+    </li>
+  <% end %>
+</ol>