active_element 0.0.10 → 0.0.11

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

@@ -1,13 +1,11 @@
 (() => {
   const generateId = () => {
-    ActiveElement._id += 1;
-
-    return `active-element-element-${ActiveElement._id}`;
+    return `ae-${crypto.randomUUID()}`;
   };
 
   const getAntiCsrfToken = () => {
-    const param = document.querySelector('meta[name="csrf-param"]').content;
-    const value = document.querySelector('meta[name="csrf-token"]').content;
+    const param = document.querySelector('meta[name="csrf-param"]')?.content;
+    const value = document.querySelector('meta[name="csrf-token"]')?.content;
 
     return { param, value };
   };
@@ -23,6 +21,8 @@
   const navbar = document.querySelector('.navbar.application-menu');
 
   window.addEventListener('scroll', () => {
+    if (!navbar) return;
+
     if (window.scrollY > 50) {
       navbar.classList.add('shrink');
     } else {
@@ -32,12 +32,17 @@
 
 
   const ActiveElement = {
-    log: (message) => { console.log(`[ActiveElement] ${message}`); },
-    _id: 0,
+    debug: false,
+    log: {
+      debug: (message) => { ActiveElement.debug && console.log(`[ActiveElement:debug]`, message); },
+      info: (message) => { console.log(`[ActiveElement:info] ${message}`); },
+      error: (message) => { console.log(`[ActiveElement:error] ${message}`); },
+    },
     generateId,
     getAntiCsrfToken,
     cloneElement,
     components: {},
+    getRequestId: () => ActiveElement.generateId(),
     jsonData: window.ActiveElement?.jsonData || {},
     controller_path: document.querySelector('meta[name="active_element_controller_path"]').content
   };
@@ -45,4 +50,4 @@
   window.ActiveElement = ActiveElement;
 })();
 
-ActiveElement.log('Initialized');
+ActiveElement.log.info('Initialized');

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

@@ -7,17 +7,23 @@
     try {
       return JSON.parse(json);
     } catch (error) {
-      ActiveElement.log(error);
+      ActiveElement.log.error(error);
       return defaultValue;
     }
   };
 
+  const getDisplayValue = ({ value, attributes, simplify = false }) => {
+    if (attributes.length === 0) return value;
+    if (attributes.length === 1 && attributes[0] === value) return value;
+    if (simplify) return attributes[0];
+
+    return attributes.join(', ');
+  };
+
   const processResponse = ({
-    element, response, hiddenInput, spinner, clearButton, searchResultsContainer, responseErrorContainer
+    element, response, hiddenInput, spinner, searchResultsContainer, responseErrorContainer
   }) => {
     spinner.classList.add('invisible');
-    clearButton.classList.remove('invisible');
-
     if (response.ok) {
       response.json().then((json) => {
         if (json.request_id !== lastRequestId) {
@@ -34,10 +40,10 @@
         json.results.forEach(({ value, attributes }) => {
           const resultsItem = cloneElement('results-item');
 
-          resultsItem.innerText = attributes.length === 0 ? value : `${attributes.join(', ')} (${value})`;
+          resultsItem.innerText = getDisplayValue({ value, attributes });
           resultsItem.addEventListener('click', () => {
             hiddenInput.value = value;
-            element.value = value;
+            element.value = getDisplayValue({ value, attributes, simplify: true });
             searchResultsContainer.replaceChildren();
             searchResultsContainer.classList.add('d-none');
           });
@@ -48,7 +54,7 @@
       });
     } else {
       response.json().then((json) => responseErrorContainer.innerText = json.message)
-                     .catch(() => responseErrorContainer.innerText = 'An unepxected error occurred');
+                     .catch(() => responseErrorContainer.innerText = 'An unexpected error occurred');
     }
   };
 
@@ -58,35 +64,29 @@
       const hiddenId = `${id}-hidden-value`;
       const formId = element.dataset.formId;
       const form = document.querySelector(`#${formId}`);
+      const hiddenInput = document.querySelector(`#${hiddenId}`);
       const model = element.dataset.searchModel;
       const attributes = tryParseJSON(element.dataset.searchAttributes, []);
       const value = element.dataset.searchValue;
       const token = ActiveElement.getAntiCsrfToken();
-      const hiddenInput = cloneElement('hidden-input');
       const responseErrorContainer = cloneElement('response-error');
       const searchResultsContainer = cloneElement('results');
       const spinner = cloneElement('spinner');
-      const clearButton = cloneElement('clear-button');
+
       document.addEventListener('click', () => {
         searchResultsContainer.classList.add('d-none');
       });
 
-      clearButton.addEventListener('click', () => {
-        element.value = '';
-        hiddenInput.value = '';
-        responseErrorContainer.innerText = '';
-        spinner.classList.add('invisible');
-        clearButton.classList.add('invisible');
+      element.addEventListener('change', () => {
+        hiddenInput.value = element.value;
       });
 
       element.addEventListener('keyup', () => {
         const query = element.value;
-        const requestId = crypto.randomUUID();
+        const requestId = ActiveElement.getRequestId();
         lastRequestId = requestId;
 
-        clearButton.classList.add('invisible');
         spinner.classList.remove('invisible');
-        hiddenInput.value = query;
         searchResultsContainer.classList.add('d-none');
 
         if (!query || query.length < 3) {
@@ -102,24 +102,23 @@
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({
-              request_id: requestId,
-              model,
-              value,
-              attributes,
-              query,
-              [token.param]: token.value,
+              ...{
+                request_id: requestId,
+                model,
+                value,
+                attributes,
+                query,
+              },
+              ...(token.param && token.value ? { [token.param]: token.value } : {})
             }),
           }
         ).then((response) => processResponse(
-          { element, response, spinner, clearButton, hiddenInput, searchResultsContainer, responseErrorContainer }
+          { element, response, spinner, hiddenInput, searchResultsContainer, responseErrorContainer }
         ));
       });
 
-      hiddenInput.name = element.name;
-      if (element.value) hiddenInput.value = element.value;
       form.append(hiddenInput);
       element.parentElement.append(searchResultsContainer);
-      element.parentElement.append(clearButton);
       element.parentElement.append(spinner);
       element.parentElement.append(responseErrorContainer);
     });

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

@@ -28,7 +28,7 @@
         themeSelect.append(element);
 
         element.addEventListener('click', (ev) => {
-          event.stopPropagation();
+          ev.preventDefault();
           setTheme(element.dataset.themeSwitchTo);
           return false;
         });

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

@@ -0,0 +1,6 @@
+(() => {
+  window.addEventListener('DOMContentLoaded', () => {
+    const timezoneOffset = new Date().getTimezoneOffset();
+    document.cookie = `timezone_offset=${timezoneOffset};`;
+  });
+})();

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

@@ -0,0 +1,86 @@
+[data-bs-theme="dark"] {
+  .navbar.application-menu {
+    background-color: #15303a !important;
+  }
+
+  .dropdown-item:hover {
+    --bs-dropdown-link-hover-bg: #{$blue-700};
+  }
+
+  .flash.toast {
+    &.notice {
+      .toast-body {
+        color: #{$white};
+        background: #{$blue-700};
+      }
+    }
+
+    &.alert {
+      .toast-body {
+        color: #{$white};
+        background: #{$red-700};
+      }
+    }
+  }
+
+  .json-field {
+    .form-group {
+      background-color: #58575755;
+    }
+  }
+
+  .popover {
+    .popover-header {
+      background-color: #{$dark};
+    }
+  }
+
+  .search-field-results {
+    background-color: $dark;
+    .search-field-result {
+      color: #{$light};
+    }
+    .search-field-result {
+      cursor: pointer;
+      &:hover {
+        background-color: #{darken($blue, 8%)};
+        color: #{$light};
+      }
+    }
+  }
+
+  table {
+    tbody {
+      tr {
+        &.odd {
+          td, th { background-color: #{rgba($dark, 0.3)}; }
+        }
+
+        &.even {
+          td, th { background-color: #{lighten(rgba($dark, 0.3), 8%)}; }
+        }
+
+        &:hover {
+          td, th { background-color: #{rgba($primary, 0.2)}; }
+        }
+      }
+    }
+  }
+
+  .pagination {
+      .page-link {
+        --bs-pagination-active-bg: #505050;
+        --bs-pagination-active-color: #{darken($light, 10%)};
+      }
+      --bs-pagination-hover-color: #8e8c84;
+      --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(50, 93, 136, 0.25);
+      --bs-pagination-active-color: #333433;
+      --bs-pagination-active-bg: #626262;
+      --bs-pagination-bg: #{$dark};
+      --bs-pagination-disabled-bg: #464646;
+      --bs-pagination-border-color: #{$dark};
+      --bs-pagination-active-border-color: #{$dark};
+      --bs-pagination-disabled-color: #dfd7ca;
+      --bs-pagination-disabled-border-color: #000;
+  }
+}

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

@@ -79,6 +79,7 @@ $nav-pills-link-active-bg:          $gray-200 !default;
 // Navbar
 
 $navbar-dark-hover-color:           $white !default;
+$navbar-light-hover-color:          $green !default;
 $navbar-light-hover-color:          $black !default;
 $navbar-light-active-color:         $black !default;
 
@@ -137,6 +138,6 @@ $breadcrumb-border-radius:          .25rem !default;
 
 // Close
 
-$btn-close-color:            $white !default;
+$btn-close-color:            $dark !default;
 $btn-close-opacity:          .8 !default;
 $btn-close-hover-opacity:    1 !default;

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

@@ -1,28 +1,27 @@
 @import "variables";
 @import "bootstrap";
+@import "dark";
 
-.navbar.application-menu {
+.application-menu {
   height: 5rem;
+  padding-left: 2rem;
+  top: 0;
   transition: height 0.5s ease-in-out, background-position 0.8s ease-in-out;
-  background-position: right 1.2rem center;
-  background-repeat: no-repeat;
+  background-color: #456060 !important;
   z-index: 2000;
-
-  &.shrink {
-    height: 3rem;
-    background-position: right -50rem center;
+  .dropdown-toggle::after {
+    color: #{$blue};
   }
 
-  &:hover {
-    height: 5rem;
-    background-position: right 1.2rem center;
-    background-repeat: no-repeat;
+  &.shrink {
+    height: 2.5rem;
   }
 }
 
 .main.content {
-  top: 10rem;
+  top: 7rem;
   position: relative;
+  padding-bottom: 3rem;
 }
 
 td.action-column {
@@ -48,6 +47,22 @@ table {
       display: none;
     }
   }
+
+  tbody {
+    tr {
+      &.odd {
+        td, th { background-color: #{rgba($light, 0.3)}; }
+      }
+
+      &.even {
+        td, th { background-color: #{darken(rgba($light, 0.3), 10%)}; }
+      }
+
+      &:hover {
+        td, th { background-color: #{rgba($primary, 0.2)}; }
+      }
+    }
+  }
 }
 
 form {
@@ -56,10 +71,137 @@ form {
   }
 }
 
+.modal-dialog.modal-dialog-scrollable.json-field-modal .modal-content {
+  max-height: 80%;
+  min-height: 80%;
+  margin-top: 5rem;
+}
+
 .json-field {
+  ol.json-array-field {
+    margin-top: 1rem;
+  }
+
+  ol {
+    line-height: 2rem;
+
+    &.array-of-objects {
+      margin-top: 2.8rem;
+    }
+
+    ol {
+      margin-top: 1rem;
+    }
+  }
+
+  ol.focus {
+    margin-top: 0;
+  }
+
+  li {
+    scroll-margin-top: 6rem;
+  }
+
+  .form-group {
+    padding: 1rem;
+    background-color: #58575755;
+  }
+
+  .form-check {
+    display: flex;
+    align-items: center;
+    margin-left: 1.25rem !important;
+
+    .form-check-input {
+      margin-top: 0;
+    }
+
+    .form-check-label {
+      margin-left: 0.4rem;
+    }
+  }
+  .json-delete-object-button {
+    // margin-top: 1rem;
+    // margin-right: 1.8rem;
+    // margin-bottom: 1rem;
+  }
+
+  .form-floating {
+    .json-date-field-label, .json-time-field-label, .json-datetime-local-field-label, .json-datetime-field-label {
+      position: relative;
+      display: inline;
+    }
+  }
+
+  &.modal-body {
+    ol {
+      margin-top: 0;
+    }
+
+    .json-delete-object-button {
+      margin-top: 0;
+      margin-right: 0;
+    }
+
+    .form-group {
+      padding: 1rem;
+      margin-top: 0.8rem;
+    }
+  }
+
+  .focus {
+    .focus-field-name {
+    }
+
+    .focus-field-syntax {
+    }
+
+    .focus-field-value {
+      text-decoration: none;
+      font-weight: bold;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    .expand-button {
+      margin-right: 0.4rem;
+    }
+  }
+
+
+  .delete-object-button-wrapper {
+    padding-bottom: 2rem;
+  }
+
+
+  .json-array-field {
+    li .json-text-field,
+    li .json-select-field,
+    li .json-integer-field,
+    li .json-float-field,
+    li .json-decimal-field,
+    li .json-date-field,
+    li .json-time-field,
+    li .json-datetime-field {
+      &.deletable {
+        width: calc(100% - 3.2rem);
+      }
+    }
+  }
+
   .form-control, .form-select {
-    width: calc(100% - 2.5rem);
     display: inline;
+    .append-button {
+      display: inline;
+    }
+  }
+
+  .form-group {
+    border-radius: 10px;
+    background-color: #dddada55;
+    border-radius: 10px;
   }
 
   .action-button {
@@ -73,8 +215,15 @@ form {
 }
 
 .search-field-results {
-  min-width: 20rem;
+  min-width: 25rem;
+  background-color: $white;
+  max-height: 15rem;
+  z-index: 3000;
   position: absolute;
+  overflow-y: auto;
+  .search-field-result {
+    color: #{$dark};
+  }
   .search-field-result {
     cursor: pointer;
     &:hover {
@@ -89,6 +238,7 @@ form {
   margin-top: 2rem;
   margin-right: 1rem;
   padding: 0;
+  z-index: 3000;
 
   &.notice {
     .toast-body {
@@ -103,29 +253,12 @@ form {
   }
 }
 
-[data-bs-theme="dark"] {
-  .flash.toast {
-    &.notice {
-      .toast-body {
-        color: #{$white};
-        background: #{$blue-700};
-      }
-    }
-
-    &.alert {
-      .toast-body {
-        color: #{$white};
-        background: #{$red-700};
-      }
-    }
-  }
+.user-menu-icon {
+  font-size: 1.5rem;
 }
 
 #theme-select {
   font-size: 1.5rem;
-  padding: 0.2rem 0.8rem;
-  position: absolute;
-  right: 0;
 
   a {
     &.dark-theme {

data/app/controllers/active_element/application_controller.rb

@@ -5,6 +5,7 @@ module ActiveElement
   # authentication as Superuser, and standardised HTML widgets.
   class ApplicationController < ActionController::Base
     include ActionView::Helpers::TagHelper
+    include ActiveElement::DefaultControllerActions
 
     layout 'active_element'
 
@@ -12,6 +13,10 @@ module ActiveElement
       @active_element ||= ActiveElement::ControllerInterface.new(self)
     end
 
+    def self.active_element_editable_fields(*args)
+      @active_element_assigned_editable_fields = args
+    end
+
     def active_element
       @active_element ||= ActiveElement::ControllerInterface.new(self.class, self)
     end

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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module ActiveElement
+  # Default Rails actions to be performed if not defined by a controller, allows developers to
+  # define a controller and have basic boilerplate for typical functionality which can be
+  # overridden and customized as needed.
+  module DefaultControllerActions
+    extend ActiveSupport::Concern
+
+    def index
+      ActiveElement::DefaultController.new(controller: self).index
+    end
+
+    def show
+      ActiveElement::DefaultController.new(controller: self).show
+    end
+
+    def new
+      ActiveElement::DefaultController.new(controller: self).new
+    end
+
+    def create
+      ActiveElement::DefaultController.new(controller: self).create
+    end
+
+    def edit
+      ActiveElement::DefaultController.new(controller: self).edit
+    end
+
+    def update
+      ActiveElement::DefaultController.new(controller: self).update
+    end
+
+    def destroy
+      ActiveElement::DefaultController.new(controller: self).destroy
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<li class="nav-item dropdown" style="list-style: none">
+  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <i class="fa-solid fa-user text-primary user-menu-icon"></i>
+  </a>
+  <ul class="dropdown-menu dropdown-menu-end">
+    <% if active_element.current_user.present? %>
+      <li class="dropdown-header">Signed in as <span class="text-primary"><%= active_element.current_user.email %></span></li>
+      <li><hr class="dropdown-divider"/></li>
+      <% if active_element.sign_in_path.present? %>
+        <li><%= link_to 'Sign Out', active_element.sign_out_path,
+                                    method: active_element.sign_out_method,
+                                    class: 'dropdown-item' %></li>
+      <% end %>
+    <% elsif active_element.sign_out_path.present? %>
+      <li><%= link_to 'Sign In', active_element.sign_in_path,
+                                 method: active_element.sign_in_method,
+                                 class: 'dropdown-item' %></li>
+    <% end %>
+  </ul>
+</li>

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

@@ -0,0 +1,24 @@
+<a data-modal-id="<%= "#json-modal-#{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>
+<div id="json-modal-<%= field_id %>" class="modal fade"
+     tabindex="-1"
+     aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" data-field-type="modal-title">JSON Inspector</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+          <i class="fa-solid fa-xmark"></i>
+        </button>
+      </div>
+      <div class="modal-body p-3" data-field-type="modal-body">
+        <%= ActiveElement.json_pretty_print(value) %>
+      </div>
+      <div class="modal-footer" data-field-type="modal-footer"></div>
+    </div>
+  </div>
+</div>

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

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

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

@@ -21,7 +21,7 @@
         <div class="row w-100">
           <% slice.each do |label, name, checked| %>
             <div class="col">
-              <%= subform.check_box(name, checked: checked, class: 'me-2') %>
+              <%= subform.check_box(name, checked: checked, class: 'me-2', tabindex: component.tabindex) %>
               <%= subform.label name, label %>
             </div>
             <br/>

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

@@ -0,0 +1,14 @@
+<div class="d-flex">
+  <%= form.label(nil, class: 'me-2 mt-1') { 'Between' } %>
+  <%= form.datetime_field("#{field}[from]", name: "#{field}[from]",
+                                 value: component.value_for(field, :from),
+                                 class: "form-control #{component.valid?(field) ? nil : 'is-invalid'}",
+                                 tabindex: component.tabindex,
+                                 **options) %>
+  <%= form.label(nil, class: 'ms-2 mt-1 me-2') { 'and' } %>
+  <%= form.datetime_field("#{field}[to]", name: "#{field}[to]",
+                                 value: component.value_for(field, :to),
+                                 class: "form-control #{component.valid?(field) ? nil : 'is-invalid'}",
+                                 tabindex: component.tabindex,
+                                 **options) %>
+</div>