active_element 0.0.12 → 0.0.13

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

@@ -2,12 +2,23 @@
 @import "bootstrap";
 @import "dark";
 
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 .application-menu {
   height: 5rem;
   padding-left: 2rem;
   top: 0;
   transition: height 0.5s ease-in-out, background-position 0.8s ease-in-out;
-  background-color: #456060 !important;
+  background-color: #508ea1 !important;
   z-index: 2000;
   .dropdown-toggle::after {
     color: #{$blue};
@@ -77,6 +88,12 @@ form {
   margin-top: 5rem;
 }
 
+.modal-content pre, .modal-content div.json-highlight {
+  font-size: 0.875rem;
+  line-height: 1.2rem;
+  font-family: monospace;
+}
+
 .json-field {
   ol.json-array-field {
     margin-top: 1rem;
@@ -105,6 +122,11 @@ form {
   .form-group {
     padding: 1rem;
     background-color: #58575755;
+
+    &.depth-1 {
+      padding: 0;
+      background-color: transparent;
+    }
   }
 
   .form-check {
@@ -176,6 +198,16 @@ form {
   }
 
 
+  .json-array-field {
+    li, .json-delete-button {
+      opacity: 0;
+      animation: fade-in ease-in 1;
+      animation-fill-mode: forwards;
+      animation-duration: 0.5s;
+      animation-delay: 0;
+    }
+  }
+
   .json-array-field {
     li .json-text-field,
     li .json-select-field,
@@ -185,12 +217,18 @@ form {
     li .json-date-field,
     li .json-time-field,
     li .json-datetime-field {
+
       &.deletable {
         width: calc(100% - 3.2rem);
       }
     }
   }
 
+  .append-button {
+    position: relative;
+    z-index: 300;
+  }
+
   .form-control, .form-select {
     display: inline;
     .append-button {

data/app/controllers/concerns/active_element/default_controller_actions.rb

@@ -8,31 +8,31 @@ module ActiveElement
     extend ActiveSupport::Concern
 
     def index
-      ActiveElement::DefaultController.new(controller: self).index
+      ActiveElement::DefaultController::Controller.new(controller: self).index
     end
 
     def show
-      ActiveElement::DefaultController.new(controller: self).show
+      ActiveElement::DefaultController::Controller.new(controller: self).show
     end
 
     def new
-      ActiveElement::DefaultController.new(controller: self).new
+      ActiveElement::DefaultController::Controller.new(controller: self).new
     end
 
     def create
-      ActiveElement::DefaultController.new(controller: self).create
+      ActiveElement::DefaultController::Controller.new(controller: self).create
     end
 
     def edit
-      ActiveElement::DefaultController.new(controller: self).edit
+      ActiveElement::DefaultController::Controller.new(controller: self).edit
     end
 
     def update
-      ActiveElement::DefaultController.new(controller: self).update
+      ActiveElement::DefaultController::Controller.new(controller: self).update
     end
 
     def destroy
-      ActiveElement::DefaultController.new(controller: self).destroy
+      ActiveElement::DefaultController::Controller.new(controller: self).destroy
     end
   end
 end

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

@@ -1,9 +1,10 @@
 <a data-modal-id="<%= "#json-modal-#{field_id}" %>"
+   id="<%= "json-view-modal-trigger-#{field_id}" %>"
    data-json-modal-link="true"
    data-bs-toggle="modal"
    data-bs-target="#json-modal-<%= field_id %>"
-   class="text-decoration-none"
-   href="#">Inspect JSON <i class="fa-solid fa-magnifying-glass"></i></a>
+   class="text-decoration-none text-nowrap"
+   href="#">JSON <i class="fa-solid fa-magnifying-glass"></i></a>
 <div id="json-modal-<%= field_id %>" class="modal fade"
      tabindex="-1"
      aria-hidden="true">

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

@@ -6,7 +6,8 @@
              locals: { form_id: id, form: form, field: field, options: options, component: component } %>
 <% elsif type == :json_field %>
   <%= render partial: 'active_element/components/form/json',
-             locals: { form_id: id, form: form, field: field, field_id: ActiveElement.element_id, options: options, component: component } %>
+             locals: { form_id: id, form: form, field: field, field_id: "#{id}-json-field-#{field}",
+                       options: options, component: component } %>
 <% elsif type == :text_search_field %>
   <%= render partial: 'active_element/components/form/text_search',
              locals: { form_id: id, form: form, field: field, options: options, component: component } %>

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

@@ -4,6 +4,8 @@
      data-form-id="<%= form_id %>"
      data-field-id="<%= field_id %>"
      data-schema-field-id="<%= field_id %>-schema"
+     data-json-view-modal-id="<%= "json-modal-#{form_id}-#{field}-json-view" %>"
+     data-json-view-modal-trigger-id="<%= "json-view-modal-trigger-#{form_id}-#{field}-json-view" %>"
 >
 
 </div>

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

@@ -26,3 +26,10 @@
   <%= render partial: 'active_element/components/form/option_groups_summary',
              locals: { option_groups: options[:option_groups] } %>
 <% end %>
+
+<% if type == :json_field %>
+  <div>
+  <%= render partial: 'active_element/components/fields/json',
+             locals: { value: component.value_for(field), field_id: "#{id}-#{field}-json-view" } %>
+  </div>
+<% end %>

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

@@ -1,5 +1,5 @@
 <% if destroy %>
-  <div class="container w-100 text-end">
+  <div class="container me-0 w-100 text-end">
     <%= active_element.component.destroy_button(record) %>
   </div>
 <% end %>
@@ -51,7 +51,7 @@
         <% field_group.each do |field, type, options| %>
           <div class="col-sm-3">
             <%= render partial: 'active_element/components/form/label',
-                       locals: { type: type, form: form, field: field, options: options } %>
+                       locals: { component: component, id: id, type: type, form: form, field: field, options: options } %>
           </div>
 
 

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

@@ -2,6 +2,13 @@
   <head>
     <%= render_active_element_hook 'active_element/before_head' %>
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet"
+          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <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>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+
     <style>
       <%= Rouge::Theme.find('tulip').render(scope: '.json-highlight') %>
       .json-highlight .p {
@@ -12,14 +19,28 @@
         color: #6b7399
       }
 
+      .json-highlight .kc, .json-highlight .c {
+        color: #695;
+      }
+
       .json-highlight {
         background-color: transparent;
       }
-    </style>
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <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>
+      .hljs-punctuation {
+        color: #7e4b6f;
+      }
+
+      .hljs-attr {
+        color: #9f93e6;
+        font-weight: bold;
+      }
+
+      .hljs-string {
+        color: #6b7399;
+        font-weight: bold;
+      }
+    </style>
 
     <script>
       window.ActiveElement = window.ActiveElement || {};

data/example_app/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    active_element (0.0.12)
+    active_element (0.0.13)
       bootstrap (~> 5.3.0alpha3)
       kaminari (~> 1.2)
       paintbrush (~> 0.1.2)

data/lib/active_element/components/form.rb

@@ -81,14 +81,7 @@ module ActiveElement
       end
 
       def schema_for(field, options)
-        options.key?(:schema) ? options.fetch(:schema) : schema_from_yaml(field)
-      end
-
-      def schema_from_yaml(field)
-        YAML.safe_load(
-          Rails.root.join("config/forms/#{record.class.name.underscore}/#{field}.yml").read,
-          symbolize_names: true
-        )
+        options.key?(:schema) ? options.fetch(:schema) : Util.json_schema(model: record.class, field: field)
       end
 
       def display_value_for_select(field, options)

data/lib/active_element/components/util/display_value_mapping.rb

@@ -16,8 +16,6 @@ module ActiveElement
         end
 
         def json_value
-          return ActiveElement.json_pretty_print(value_from_record) unless component.is_a?(CollectionTable)
-
           component.controller.render_to_string(
             partial: 'active_element/components/fields/json',
             locals: { value: value_from_record, field_id: ActiveElement.element_id }

data/lib/active_element/components/util/form_field_mapping.rb

@@ -136,8 +136,9 @@ module ActiveElement
         end
 
         def searchable_fields(field)
+          # FIXME: Use database column type to only include strings/numbers.
           (Util.relation_controller(model, controller, field)&.active_element&.state&.searchable_fields || [])
-            .reject { |field| field.to_s.end_with?('_at') } # FIXME: Select strings/numbers only.
+            .reject { |searchable_field| searchable_field.to_s.end_with?('_at') }
         end
 
         def relation_primary_key(field)

data/lib/active_element/components/util.rb

@@ -41,6 +41,13 @@ module ActiveElement
         "#{namespace.classify}::#{base}".safe_constantize || base.safe_constantize
       end
 
+      def self.json_schema(model:, field:)
+        YAML.safe_load(
+          Rails.root.join("config/forms/#{model.name.underscore}/#{field}.yml").read,
+          symbolize_names: true
+        )
+      end
+
       def self.json_pretty_print(json)
         formatter = Rouge::Formatters::HTML.new
         lexer = Rouge::Lexers::JSON.new

data/lib/active_element/controller_interface.rb

@@ -25,7 +25,8 @@ module ActiveElement
       @authorize
     end
 
-    def listable_fields(*args)
+    def listable_fields(*args, order: nil)
+      state.list_order = order
       state.listable_fields.concat(args.map(&:to_sym)).uniq!
     end
 

data/lib/active_element/controller_state.rb

@@ -7,7 +7,7 @@ module ActiveElement
   class ControllerState
     attr_reader :permissions, :listable_fields, :viewable_fields, :editable_fields, :searchable_fields
     attr_accessor :sign_in_path, :sign_in, :sign_in_method, :sign_out_path, :sign_out_method,
-                  :deletable, :authorizor, :authenticator
+                  :deletable, :authorizor, :authenticator, :list_order
 
     def initialize(controller:)
       @controller = controller

data/lib/active_element/default_controller/actions.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+# TODO: Move each default controller action into individual classes inside
+# ActiveElement::DefaultController::Actions

data/lib/active_element/default_controller/controller.rb

@@ -0,0 +1,145 @@
+# frozen_string_literal: true
+
+module ActiveElement
+  module DefaultController
+    # Encapsulation of all logic performed for default controller actions when no action is defined
+    # by the current controller.
+    class Controller # rubocop:disable Metrics/ClassLength
+      def initialize(controller:)
+        @controller = controller
+      end
+
+      def index
+        return render_forbidden(:listable) unless configured?(:listable)
+
+        controller.render 'active_element/default_views/index',
+                          locals: {
+                            collection: ordered(collection),
+                            search_filters: default_text_search.search_filters
+                          }
+      end
+
+      def show
+        return render_forbidden(:viewable) unless configured?(:viewable)
+
+        controller.render 'active_element/default_views/show', locals: { record: record }
+      end
+
+      def new
+        return render_forbidden(:editable) unless configured?(:editable)
+
+        controller.render 'active_element/default_views/new', locals: { record: model.new, namespace: namespace }
+      end
+
+      def create # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
+        return render_forbidden(:editable) unless configured?(:editable)
+
+        new_record = model.new(default_record_params.params)
+        # XXX: Ensure associations are applied - there must be a better way.
+        if new_record.save && new_record.reload.update(default_record_params.params)
+          controller.flash.notice = "#{new_record.model_name.to_s.titleize} created successfully."
+          controller.redirect_to record_path(new_record, :show).path
+        else
+          controller.flash.now.alert = "Failed to create #{model.name.to_s.titleize}."
+          controller.render 'active_element/default_views/new', locals: { record: new_record, namespace: namespace }
+        end
+      rescue ActiveRecord::RangeError => e
+        render_range_error(error: e, action: :new)
+      end
+
+      def edit
+        return render_forbidden(:editable) unless configured?(:editable)
+
+        controller.render 'active_element/default_views/edit', locals: { record: record, namespace: namespace }
+      end
+
+      def update # rubocop:disable Metrics/AbcSize
+        return render_forbidden(:editable) unless configured?(:editable)
+
+        if record.update(default_record_params.params)
+          controller.flash.notice = "#{record.model_name.to_s.titleize} updated successfully."
+          controller.redirect_to record_path(record, :show).path
+        else
+          controller.flash.now.alert = "Failed to update #{model.name.to_s.titleize}."
+          controller.render 'active_element/default_views/edit', locals: { record: record, namespace: namespace }
+        end
+      rescue ActiveRecord::RangeError => e
+        render_range_error(error: e, action: :edit)
+      end
+
+      def destroy
+        return render_forbidden(:deletable) unless configured?(:deletable)
+
+        record.destroy
+        controller.flash.notice = "Deleted #{record.model_name.to_s.titleize}."
+        controller.redirect_to record_path(model, :index).path
+      end
+
+      private
+
+      attr_reader :controller
+
+      def ordered(unordered_collection)
+        return unordered_collection if state.list_order.blank?
+
+        unordered_collection.order(state.list_order)
+      end
+
+      def render_forbidden(type)
+        controller.render 'active_element/default_views/forbidden', locals: { type: type }
+      end
+
+      def configured?(type)
+        return state.deletable? if type == :deletable
+
+        state.public_send("#{type}_fields").present?
+      end
+
+      def state
+        @state ||= controller.active_element.state
+      end
+
+      def default_record_params
+        @default_record_params ||= DefaultController::Params.new(controller: controller, model: model)
+      end
+
+      def default_text_search
+        @default_text_search ||= DefaultController::Search.new(controller: controller, model: model)
+      end
+
+      def record_path(record, type = nil)
+        ActiveElement::Components::Util::RecordPath.new(record: record, controller: controller, type: type)
+      end
+
+      def namespace
+        controller.controller_path.rpartition('/').first.presence&.to_sym
+      end
+
+      def model
+        controller.controller_name.classify.constantize
+      end
+
+      def record
+        @record ||= model.find(controller.params[:id])
+      end
+
+      def collection
+        return model.all unless default_text_search.text_search?
+
+        model.left_outer_joins(default_text_search.search_relations).where(*default_text_search.text_search)
+      end
+
+      def render_range_error(error:, action:)
+        controller.flash.now.alert = formatted_error(error)
+        controller.render "active_element/default_views/#{action}", locals: { record: record, namespace: namespace }
+      end
+
+      def formatted_error(error)
+        return error.cause.message.split("\n").join(', ') if error.try(:cause)&.try(:message).present?
+        return error.message if error.try(:message).present?
+
+        I18n.t('active_element.unexpected_error')
+      end
+    end
+  end
+end

data/lib/active_element/default_controller/json_params.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module ActiveElement
+  module DefaultController
+    # Provides permitted parameters for fields generated from a JSON schema file.
+    class JsonParams
+      def initialize(schema:)
+        @base_schema = schema
+      end
+
+      def params(schema = base_schema)
+        return simple_object_field(schema) if simple_object_field?(schema)
+        return simple_array_field(schema) if simple_array_field?(schema)
+        return complex_array_field(schema) if complex_array_field?(schema)
+
+        schema[:name]
+      end
+
+      private
+
+      attr_reader :fields, :base_schema
+
+      def simple_object_field(schema)
+        schema.key?(:name) ? { schema[:name] => {} } : {}
+      end
+
+      def simple_array_field(schema)
+        schema.key?(:name) ? { schema[:name] => [] } : []
+      end
+
+      def simple_object_field?(schema)
+        schema[:type] == 'object'
+      end
+
+      def simple_array_field?(schema)
+        schema[:type] == 'array' && schema.dig(:shape, :type) != 'object'
+      end
+
+      def complex_array_field?(schema)
+        schema[:type] == 'array' && schema.dig(:shape, :type) == 'object'
+      end
+
+      def complex_array_field(schema)
+        schema.dig(:shape, :shape, :fields).map { |field| params(field) }
+      end
+    end
+  end
+end

data/lib/active_element/default_controller/params.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module ActiveElement
+  module DefaultController
+    # Provides params for ActiveRecord models when using the default boilerplate controller
+    # actions. Navigates input parameters and maps them to appropriate relations as needed.
+    class Params
+      def initialize(controller:, model:)
+        @controller = controller
+        @model = model
+      end
+
+      def params
+        with_transformed_relations(
+          controller.params.require(controller.controller_name.singularize)
+                    .permit(*permitted_fields)
+        )
+      end
+
+      private
+
+      attr_reader :controller, :model
+
+      def with_transformed_relations(params)
+        params.to_h.to_h do |key, value|
+          next [key, value] unless relation?(key)
+
+          relation_param(key, value)
+        end
+      end
+
+      def permitted_fields
+        scalar, json = controller.active_element.state.editable_fields.partition do |field|
+          scalar?(field)
+        end
+        scalar + [json_params(json)]
+      end
+
+      def scalar?(field)
+        return true if relation?(field)
+        return true if %i[json jsonb].exclude?(column(field)&.type)
+
+        false
+      end
+
+      def json_params(fields)
+        # XXX: We assume all non-scalar fields are JSON fields, i.e. they must have a definition
+        # defined as `config/forms/<model>/<field>.yml`. If that file does not exist, allow
+        # Errno::ENOENT to raise to let the form submission fail and avoid losing data. This
+        # would need to be adjusted if we start allowing non-JSON nested fields in the default
+        # controller.
+        fields.index_with do |field|
+          DefaultController::JsonParams.new(schema: schema_for(field)).params
+        end
+      end
+
+      def schema_for(field)
+        ActiveElement::Components::Util.json_schema(model: model, field: field)
+      end
+
+      def relation_param(key, value)
+        case relation(key).macro
+        when :belongs_to
+          belongs_to_param(key, value)
+        when :has_one
+          has_one_param(key, value)
+        when :has_many
+          has_many_param(key, value)
+        end
+      end
+
+      def belongs_to_param(key, value)
+        [relation(key).foreign_key, value]
+      end
+
+      def has_one_param(key, value) # rubocop:disable Naming/PredicateName
+        [relation(key).name, relation(key).klass.find_by(relation(key).klass.primary_key => value)]
+      end
+
+      def has_many_param(key, _value) # rubocop:disable Naming/PredicateName
+        [relation(key).name, relation(key).klass.where(relation(key).klass.primary_key => relation(key).value)]
+      end
+
+      def relation?(attribute)
+        relation(attribute.to_sym).present?
+      end
+
+      def relation(attribute)
+        model.reflect_on_association(attribute.to_sym)
+      end
+
+      def column(attribute)
+        model.columns.find { |column| column.name.to_s == attribute.to_s }
+      end
+    end
+  end
+end