active_element 0.0.12 → 0.0.14

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

@@ -4,11 +4,26 @@ ActiveElement.JsonField = (() => {
   const humanize = ({ string, singular = false }) => {
     if (!string) return '';
 
-    const humanized = string.split('_').map(item => item.charAt(0).toUpperCase() + item.substring(1)).join(' ');
+    const humanized = string.split('_')
+                            .map(item => item.charAt(0).toUpperCase() + item.substring(1)).join(' ')
+                            .replace(/([a-z])([A-Z])/g, '$1 $2');
 
     if (!singular) return humanized;
 
-    return humanized.replace(/s$/, ''); // FIXME: Expose translations from back-end to make this more useful.
+    // FIXME: Expose translations from back-end to make this more useful.
+    return humanized.replace(/[^u]s$/, '');
+  };
+
+  // Adapted from: https://stackoverflow.com/a/7557433
+  const isVisible = (element) => {
+    const boundingClientRect = element.getBoundingClientRect();
+
+    return (
+      boundingClientRect.top >= 0 &&
+      boundingClientRect.left >= 0 &&
+      boundingClientRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      boundingClientRect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
   };
 
   const isObject = (object) => object && typeof object === 'object';
@@ -44,7 +59,6 @@ ActiveElement.JsonField = (() => {
     };
 
     store.state = defaultState({ schema, path: [], defaultValue: data });
-    console.log(store.state)
 
     const stateChangedCallbacks = [];
     const stateChanged = (callback, state) => stateChangedCallbacks.push([callback, state]);
@@ -211,10 +225,12 @@ ActiveElement.JsonField = (() => {
   };
 
   const Component = ({ store, stateChanged, connectState, schema, element, fieldName }) => {
-    const ObjectField = ({ schema, state, path, omitLabel = false }) => {
+    const ObjectField = ({ schema, state, path, omitLabel = false, depth = 0 }) => {
       const getPath = () => schema.name ? path.concat(schema.name) : path;
       const currentPath = getPath();
 
+      depth = depth + 1;
+
       let element;
 
       switch (schema.type) {
@@ -235,7 +251,9 @@ ActiveElement.JsonField = (() => {
         case 'decimal':
           return DecimalField({ state, omitLabel, schema, path: currentPath });
         case 'object':
-          element = cloneElement('form-group-floating');
+          element = cloneElement('form-group');
+          element.classList.add(`depth-${depth}`);
+          if (schema.name) element.append(Label({ schema }));
           (schema.shape.fields).forEach((field) => {
             element.append(
               ObjectField({
@@ -243,6 +261,7 @@ ActiveElement.JsonField = (() => {
                 schema: field,
                 state: state ? state[field.name] : null,
                 path: currentPath,
+                depth,
               })
             );
           });
@@ -250,10 +269,10 @@ ActiveElement.JsonField = (() => {
           return element;
         case 'array':
           element = cloneElement('form-group');
-          const list = ArrayField({ schema, state, path: currentPath });
+          const list = ArrayField({ schema, state, path: currentPath, depth });
           if (schema.shape?.type === 'object') list.classList.add('array-of-objects');
           element.append(AppendButton({ list, schema, state, path: currentPath }));
-          element.append(Label({ title: schema.name }));
+          element.append(Label({ schema }));
           element.append(list);
           return element;
       }
@@ -270,12 +289,12 @@ ActiveElement.JsonField = (() => {
       const element = cloneElement('form-check');
 
       element.append(checkbox);
-      element.append(Label({ title: schema.name, template: 'form-check-label' }));
+      element.append(Label({ schema, template: 'form-check-label', labelFor: checkbox }));
 
       return element;
     };
 
-    const ArrayField = ({ schema, state, path: objectPath }) => {
+    const ArrayField = ({ schema, state, depth, path: objectPath }) => {
       const element = cloneElement('list-group');
 
       if (schema.focus) element.classList.add('focus');
@@ -284,21 +303,22 @@ ActiveElement.JsonField = (() => {
       if (state) {
         state.forEach((eachState, index) => {
           const path = objectPath.concat([index]);
-          element.append(ArrayItem({ state: eachState, path, schema }));
+          element.append(ArrayItem({ state: eachState, path, schema, depth }));
         });
       }
 
       return element;
     };
 
-    const ArrayItem = ({ state, path, schema, newItem = false }) => {
+    const ArrayItem = ({ state, path, schema, depth, newItem = false }) => {
       const element = cloneElement('list-item');
       const wrapper = document.createElement('div');
       const objectField = ObjectField({
         path,
         omitLabel: true,
         schema: { ...schema.shape },
-        state: state
+        state: state,
+        depth,
       });
 
       // TODO: Use same template etc. for all delete buttons, use presentation layer to
@@ -366,6 +386,7 @@ ActiveElement.JsonField = (() => {
       valueElement.href = '#';
       modalBody.append(group);
       modalBody.classList.add('json-field');
+      group.classList.add('depth-1');
       titleElement.append(deleteObjectButton);
       modalHeader.append(deleteObjectButton);
       deleteObjectButton.addEventListener('click', () => bootstrapModal.hide());
@@ -382,10 +403,10 @@ ActiveElement.JsonField = (() => {
       return element;
     };
 
-    const Label = ({ title, template, labelFor }) => {
+    const Label = ({ schema, template, labelFor }) => {
       const element = cloneElement(template || 'label');
 
-      element.append(humanize({ string: title }));
+      element.append(schema.label || humanize({ string: schema.name }));
 
       if (labelFor) {
         element.htmlFor = labelFor.id;
@@ -443,7 +464,7 @@ ActiveElement.JsonField = (() => {
       const group = cloneElement('form-group-floating');
 
       group.append(element);
-      group.append(Label({ title: schema.name, labelFor: element }));
+      group.append(Label({ schema, labelFor: element }));
 
       return group;
     };
@@ -464,9 +485,9 @@ ActiveElement.JsonField = (() => {
 
       if (floating) {
         group.append(element);
-        group.append(Label({ title: schema.name, labelFor: element }));
+        group.append(Label({ schema, labelFor: element }));
       } else {
-        group.append(Label({ title: schema.name, labelFor: element }));
+        group.append(Label({ schema, labelFor: element }));
         group.append(element);
       }
 
@@ -513,9 +534,8 @@ ActiveElement.JsonField = (() => {
 
     const AppendButton = ({ list, schema, state, path: objectPath }) => {
       const element = cloneElement('append-button');
-      const humanName = humanize({ string: schema.name || fieldName, singular: true });
 
-      element.append(`Add ${humanName}`);
+      element.append(`Add Item`);
       element.classList.add('append-button', 'float-end');
       element.onclick = (ev) => {
         ev.preventDefault();
@@ -524,7 +544,8 @@ ActiveElement.JsonField = (() => {
         const item = ArrayItem({ path, state: appendState, schema, newItem: true })
 
         list.append(item);
-        item.scrollIntoView();
+
+        if (!isVisible(item)) item.scrollIntoView({ block: 'center' });
 
         return false;
       };
@@ -540,19 +561,29 @@ ActiveElement.JsonField = (() => {
     const formId = element.dataset.formId;
     const formFieldElement = document.querySelector(`#${element.dataset.fieldId}`);
     const schemaFieldElement = document.querySelector(`#${element.dataset.schemaFieldId}`);
+    const jsonViewModal = document.querySelector(`#${element.dataset.jsonViewModalId}`);
+    const jsonViewModalTrigger = document.querySelector(`#${element.dataset.jsonViewModalTriggerId}`);
     const fieldName = element.dataset.fieldName;
     const schema = getSchema(element);
     const { store, stateChanged, connectState } = createStore({ data, schema });
+    let currentState = null;
 
     schemaFieldElement.value = JSON.stringify(schema);
 
     stateChanged(({ getState }) => {
       const state = getState();
 
+      currentState = state;
       formFieldElement.value = JSON.stringify(state);
       ActiveElement.log.debug(state);
     });
 
+    jsonViewModalTrigger.addEventListener('click', () => {
+      const highlighted = hljs.highlight(JSON.stringify(currentState, null, 2), { language: 'json' }).value;
+      jsonViewModal.querySelector('[data-field-type="modal-body"]').innerHTML = `<pre>${highlighted}</pre>`;
+      return true;
+    });
+
     connectState({ element });
 
     const component = Component({ store, stateChanged, connectState, schema, element, fieldName });

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

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

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

@@ -25,7 +25,7 @@
 
   .json-field {
     .form-group {
-      background-color: #58575755;
+      background-color: #5857571f;
     }
   }
 

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/_title.html.erb

@@ -0,0 +1 @@
+<title><%= active_element.application_name.humanize %> - <%= controller_name.humanize %></title>

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

@@ -1,6 +1,15 @@
 <html>
   <head>
     <%= render_active_element_hook 'active_element/before_head' %>
+    <%= render_active_element_hook 'active_element/favicon' %>
+    <%= render_active_element_hook 'active_element/title' %>
+
+    <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') %>
@@ -12,14 +21,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 || {};
@@ -27,7 +50,7 @@
 
     <%= stylesheet_link_tag 'active_element/application', 'data-turbolinks-track': 'reload' %>
 
-    <% if Rails.application.assets.find_asset('application.css').present? %>
+    <% if Rails.application.assets&.find_asset('application.css').present? %>
       <%= stylesheet_link_tag 'application', 'data-turbolinks-track': 'reload' %>
     <% end %>
 
@@ -75,7 +98,7 @@
     <%= render_active_element_hook 'active_element/after_content' %>
 
     <%= javascript_include_tag 'active_element/application', 'data-turbolinks-track': 'reload' %>
-    <% if Rails.application.assets.find_asset('application.js').present? %>
+    <% if Rails.application.assets&.find_asset('application.js').present? %>
       <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
     <% end %>
   </body>

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