active_element 0.0.1 → 0.0.2

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

@@ -0,0 +1,4 @@
+<%= form.select field,
+                component.options_for_select(field, options),
+                { selected: component.value_for(field) },
+                { class: "form-select #{component.valid?(field) ? nil : 'is-invalid'}" } %>

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

@@ -0,0 +1,40 @@
+<% values = [] %>
+<% fields.each do |field_name, type, options| %>
+  <% value = component.value_for(field_name) %>
+
+  <% if type == :check_box %>
+
+    <% if ['1', true].include?(value) %>
+      <% values << value %>
+      <div class="d-inline me-3">
+        <i class="text-success fa-regular fa-fw fa-circle-check"></i>
+        <span><%= options.fetch(:label) %></span>
+      </div>
+    <% end %>
+
+  <% elsif type == :select %>
+      <% value = component.display_value_for_select(field_name, options) %>
+      <% if value.present? %>
+        <% values << value %>
+        <div class="d-inline me-3">
+          <span class="text-secondary"><%= options.fetch(:label) %>:</span>
+          <span class="ms-1"><%= value %></span>
+        </div>
+      <% end %>
+  <% elsif value.present? %>
+    <%# TODO: Handle other field types %>
+
+    <% values << value %>
+    <div class="d-inline me-3">
+      <span class="text-secondary"><%= options.fetch(:label) %>:</span>
+      <span class="ms-1"><%= value %></span>
+    </div>
+
+  <% end %>
+<% end %>
+
+<% if values.empty? %>
+  <div class="d-inline ms-3 me-3">
+    <span class="fst-italic text-secondary">(No filters applied)</span>
+  </div>
+<% end %>

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

@@ -0,0 +1,85 @@
+<div class="d-none" id="form-templates">
+  <div id="json-templates">
+    <ol id="json-list-group-template"></ol>
+
+    <li id="json-list-item-template" class="text-nowrap"></li>
+
+    <label id="json-form-check-label-template" class="form-check-label"></label>
+    <label id="json-label-template" class="mb-4 fw-bold"></label>
+
+    <div id="json-form-group-template" class="form-group p-3 text-wrap m-3"></div>
+    <div id="json-form-group-floating-template" class="form-floating m-3 text-wrap"></div>
+    <div id="json-form-check-template" class="form-check m-3"></div>
+
+    <input id="json-checkbox-field-template" type="checkbox" class="form-check-input json-checkbox-field" />
+
+    <input id="json-text-field-template" type="text" class="form-control m-1 json-text-field" />
+
+    <select id="json-select-template" class="form-select m-1 json-select-field"></select>
+
+    <%= 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',
+                                          class: 'json-delete-button w-25 float-end json-delete-object-button' %>
+
+    <%= 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',
+                                  class: 'float-end expand-collapse-button' %>
+
+  </div>
+
+  <%= 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 %>
+    <i class="fa-solid fa-fw fa-down-left-and-up-right-to-center"></i>
+  <% end %>
+
+
+  <div id="form-search-field-templates">
+    <input id="form-search-field-hidden-input-template" type="hidden" autocomplete="off" />
+    <p id="form-search-field-response-error-template" class="text-danger position-absolute validation-error-message pt-1 m-0"></p>
+    <div id="form-search-field-results-template" class="search-field-results d-none border border-top-0"></div>
+    <div id="form-search-field-results-item-template" class="search-field-result p-2"></div>
+    <div id="form-search-field-spinner-template" class="invisible text-end">
+      <div style="position: relative; float: right; width: auto; right: 0.5rem; top: -1.7rem;">
+        <i class="fa-solid fa-spinner fa-spin"></i>
+      </div>
+    </div>
+    <div id="form-search-field-clear-button-template" class="invisible text-end">
+      <div style="position: relative; float: right; width: auto; right: 0.5rem; top: -1.7rem;">
+        <i class="fa-solid fa-delete-left" style="cursor: pointer;"></i>
+      </div>
+    </div>
+  </div>
+
+  <div id="form-modal-template"
+       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"></h5>
+          <button type="button" class="btn-close fs-3" data-bs-dismiss="modal" aria-label="Close">
+            <i class="fa-regular fa-rectangle-xmark"></i>
+          </button>
+        </div>
+        <div class="modal-body" data-field-type="modal-body"></div>
+        <div class="modal-footer" data-field-type="modal-footer"></div>
+      </div>
+    </div>
+  </div>
+
+  <div id="form-confirm-button-template">
+    <%= active_element_component.button 'Confirm' %>
+  </div>
+
+  <div id="form-cancel-button-template">
+    <%= active_element_component.button 'Cancel' %>
+  </div>
+</div>

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

@@ -0,0 +1,4 @@
+<%= form.text_area field,
+                   value: component.value_for(field),
+                   rows: 5,
+                   class: "form-control #{component.valid?(field) ? nil : 'is-invalid'}" %>

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

@@ -0,0 +1,16 @@
+<%=
+  form.text_field field, value: component.value_for(field),
+                         id: "#{form_id}-#{field}-text-search",
+                         class: "form-control #{component.valid?(field) ? nil : 'is-invalid'}",
+                         autocomplete: 'off',
+                         placeholder: options[:placeholder].presence || 'Search...',
+                         data: {
+                           field_type: 'text-search',
+                           form_id: form_id,
+                           search_attributes: (
+                             options.dig(:search, :attributes) || [options.dig(:search, :attribute)]
+                           )&.to_json,
+                           search_value: options.dig(:search, :value),
+                           search_model: options.dig(:search, :model)
+                         }
+%>

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

@@ -0,0 +1,78 @@
+<% if destroy %>
+  <%= active_element_component.destroy_button(record, float: 'end') %>
+<% end %>
+
+<% if modal %>
+
+  <div class="mt-4 mb-5 ms-3">
+
+    <div class="p-3 pb-4 border-bottom d-inline">
+      <%= 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 }) %>
+    </div>
+
+    <div class="form-summary d-inline border-bottom border-start mt-1 p-3 pb-4">
+      <%= render partial: 'active_element/components/form/summary',
+                 locals: { fields: fields, component: component } %>
+    </div>
+
+  </div>
+
+<% elsif title.present? && expanded == false %>
+
+  <div data-field-type="form-expand" data-form-id="<%= id %>" class="mb-3">
+    <span class="fs-4 align-bottom"><%= title %></span>
+  </div>
+
+<% elsif title.blank? && expanded == false %>
+
+  <div data-field-type="form-expand" data-form-id="<%= id %>" class="mb-3"></div>
+
+<% elsif title.present? %>
+
+  <span class="fs-4 align-bottom"><%= title %></span>
+
+<% end %>
+
+<div class="expand-collapse-form <%= modal ? 'd-none' : nil %>" id="form-wrapper-<%= id %>">
+  <%= 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' %>
+      </div>
+    <% end %>
+
+    <% fields.each_slice(columns) do |field_group| %>
+      <div class="row mb-3">
+        <% 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 } %>
+          </div>
+
+
+          <div class="col">
+            <%= render partial: 'active_element/components/form/field',
+                       locals: {
+                         id: id,
+                         type: type,
+                         form: form,
+                         field: field,
+                         options: options,
+                         component: component,
+                         record: record }
+            %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+
+    <% if %i[bottom both].include?(submit_position) %>
+      <div class="form-group">
+        <%= form.submit submit_label, class: "btn btn-#{method == :post ? 'success' : 'primary'}" %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,8 @@
+<script type="text/javascript">
+  ActiveElement.jsonData = ActiveElement.jsonData || {};
+
+  ActiveElement.jsonData = {
+    ...ActiveElement.jsonData,
+    ...<%= raw({ key.camelize(:lower) => object }.to_json) %>
+  };
+</script>

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

@@ -0,0 +1,3 @@
+<div class="page-description p-2 fst-italic">
+  <%= content %>
+</div>

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

@@ -0,0 +1 @@
+<span data-field-type="secret" data-secret="<%= secret %>"></span>

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

@@ -0,0 +1,11 @@
+<div class="d-none" id="secret-templates">
+  <span id="secret-show-button-template">
+    <a href="#"><i class="fa-solid fa-fw fa-eye"></i></a>
+  </span>
+
+  <span id="secret-hide-button-template">
+    <a href="#"><i class="fa-solid fa-fw fa-eye-slash"></i></a>
+  </span>
+
+  <span id="secret-content-template"></span>
+</div>

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

@@ -0,0 +1,30 @@
+<tr class="<%= (index % 2).zero? ? 'even' : 'odd' %> <%= row_class_mapper.call(item) %>">
+  <% fields.each do |field, class_mapper, label, value_mapper| %>
+    <td class="align-middle <%= class_mapper.call(item) %>">
+      <% if component.secret_field?(field) %>
+        <%= controller.helpers.render partial: 'active_element/components/secret/field',
+                                      locals: { secret: value_mapper.call(item), label: label } %>
+      <% else %>
+        <%= value_mapper.call(item) %>
+      <% end %>
+    </td>
+  <% end %>
+
+  <% if show %>
+    <td class="<%= "#{class_name}-show" %> action-column text-end">
+      <%= 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') %>
+    </td>
+  <% end %>
+
+  <% if destroy %>
+    <td class="<%= "#{class_name}-destroy" %> action-column text-end">
+      <%= active_element_component.destroy_button(item, destroy, class: 'btn-sm') %>
+    </td>
+  <% end %>
+</tr>

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

@@ -0,0 +1,88 @@
+<div class="container grouped-table">
+  <div class="row">
+    <div class="col-sm-2">
+      <% if group_title == true %>
+        <h4><%= i18n.label(grouping_field).pluralize %></h4>
+      <% elsif group_title.present? %>
+        <h4><%= group_title %></h4>
+      <% end %>
+
+      <ol class="list-group pt-2 <%= group_title.present? ? 'mt-3' : nil %> sticky-top">
+        <% grouped_collection.each do |group_identifier, group| %>
+          <li class="list-group-item d-flex justify-content-between align-items-start">
+
+            <div class="ms-2 me-auto pe-3">
+              <a style="font-size: 0.8rem;"
+                 href="#<%= "#{class_name}-collection-group-#{group_identifier}" %>">
+                <%= i18n.label(group_identifier) %>
+              </a>
+            </div>
+
+            <a href="#<%= "#{class_name}-collection-group-#{group_identifier}" %>">
+              <span class="badge bg-primary rounded-pill">
+                <%= group.size %>
+              </span>
+            </a>
+
+          </li>
+        <% end %>
+      </ol>
+    </div>
+
+    <div class="col ms-3 ps-4 border-start">
+      <table class="table <%= class_name %>">
+        <thead class="sticky-top">
+          <tr>
+            <% fields.each do |field, _class_mapper, label, _value_mapper| %>
+              <th>
+                <%= label %>
+              </th>
+            <% end %>
+
+            <% if show %>
+              <th></th>
+            <% end %>
+
+            <% if edit %>
+              <th></th>
+            <% end %>
+
+            <% if destroy %>
+              <th></th>
+            <% end %>
+          </tr>
+        </thead>
+
+        <tbody>
+          <% grouped_collection.each do |group_identifier, group| %>
+
+            <tr>
+              <th class="collection-group-separator" colspan="<%= fields.size + (show ? 1 : 0) + (edit ? 1 : 0) + (destroy ? 1 : 0) %>">
+                <%= i18n.label(group_identifier) %>
+                <a name="<%= "#{class_name}-collection-group-#{group_identifier}" %>"></a>
+              </th>
+              <% fields.each do %>
+
+              <% end %>
+            </tr>
+
+            <% group.sort.each_with_index do |item, index| %>
+              <%= render partial: 'active_element/components/table/collection_row',
+                         locals: {
+                           component: component,
+                           item: item,
+                           fields: fields,
+                           index: index,
+                           class_name: class_name,
+                           show: show,
+                           edit: edit,
+                           destroy: destroy,
+                           row_class_mapper: row_class_mapper
+                         } %>
+            <% end %>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+<div class="row ms-3 pt-3 pb-3 row-cols-lg-auto">
+  <div class="col-auto">
+    <%= paginate collection %>
+  </div>
+
+  <div class="col-auto mt-2 pe-0">
+    Displaying
+  </div>
+  <div class="col-auto">
+    <%= select_tag 'collection-table-page-size-selector',
+                   options_for_select(page_sizes, page_size),
+                   class: 'form-select form-inline' %>
+  </div>
+  <div class="col-auto mt-2 ps-0">
+    of <%= number_to_human(collection.total_count) %> <%= 'record'.pluralize(collection.total_count) %>.
+  </div>
+</div>

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

@@ -0,0 +1,49 @@
+<table class="<%= class_name %> table" style="<%= style %>">
+  <thead>
+    <tr>
+      <% fields.each do |field, class_name, label, _mapper, options| %>
+        <th class="text-nowrap">
+          <%= label %>
+          <% if options[:description].present? %>
+            <button type="button"
+                    style="background: none; border: none; outline: 0; position: absolute; margin-top: 0.3rem"
+                    data-bs-toggle="popover"
+                    data-bs-content="<%= options[:description] %>">
+                    <i class="text-secondary fa-solid fa-circle-info"></i>
+            </button>
+          <% end %>
+        </th>
+      <% end %>
+
+      <% if show %>
+        <th></th>
+      <% end %>
+
+      <% if edit %>
+        <th></th>
+      <% end %>
+
+      <% if destroy %>
+        <th></th>
+      <% end %>
+    </tr>
+  </thead>
+
+  <tbody>
+    <% collection.each_with_index do |item, index| %>
+      <%= render partial: 'active_element/components/table/collection_row',
+                 locals: {
+                   component: component,
+                   item: item,
+                   index: index,
+                   fields: fields,
+                   class_name: class_name,
+                   show: show,
+                   edit: edit,
+                   destroy: destroy,
+                   row_class_mapper: row_class_mapper
+                 } %>
+    <% end %>
+  </tbody>
+</table>
+

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

@@ -0,0 +1,39 @@
+<% if new %>
+  <%= active_element_component.new_button(collection, float: 'end', class: 'mb-3') %>
+<% end %>
+
+<% if display_pagination %>
+  <%=
+    render partial: 'active_element/components/table/pagination',
+           locals: { collection: collection, params: params, page_size: page_size, page_sizes: page_sizes }
+  %>
+<% end %>
+
+<% if group %>
+  <%= render partial: 'active_element/components/table/grouped_collection',
+             locals: { component: component,
+                       collection: collection,
+                       fields: fields,
+                       grouped_collection: component.grouped_collection,
+                       grouping_field: group,
+                       group_title: group_title,
+                       show: show,
+                       edit: edit,
+                       destroy: destroy,
+                       class_name: class_name,
+                       style: style,
+                       i18n: i18n,
+                       row_class_mapper: row_class_mapper } %>
+<% else %>
+  <%= render partial: 'active_element/components/table/ungrouped_collection',
+             locals: { component: component,
+                       collection: collection,
+                       fields: fields,
+                       show: show,
+                       edit: edit,
+                       destroy: destroy,
+                       class_name: class_name,
+                       style: style,
+                       i18n: i18n,
+                       row_class_mapper: row_class_mapper } %>
+<% end %>

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

@@ -0,0 +1,39 @@
+<% if destroy && item.present? %>
+  <%= active_element_component.destroy_button(item, destroy, float: 'end') %>
+<% end %>
+
+<% if edit && item.present? %>
+  <%= active_element_component.edit_button(item, edit, float: 'end') %>
+<% end %>
+
+<% if new %>
+  <%= active_element_component.new_button(item, float: 'end', class: 'mb-3') %>
+<% end %>
+
+<table class="<%= class_name %> table" style="<%= style %>">
+  <tbody>
+    <% fields.each do |field, class_mapper, label, value_mapper, options| %>
+      <tr>
+        <th>
+          <%= label %>
+          <% if options[:description].present? %>
+            <button type="button"
+                    style="background: none; border: none; outline: 0; position: absolute; margin-top: 0.3rem"
+                    data-bs-toggle="popover"
+                    data-bs-content="<%= options[:description] %>">
+                    <i class="text-secondary fa-solid fa-circle-info"></i>
+            </button>
+          <% end %>
+        </th>
+        <td class="<%= class_mapper.call(item) %>">
+          <% if component.secret_field?(field) %>
+            <%= controller.helpers.render partial: 'active_element/components/secret/field',
+                                          locals: { secret: value_mapper.call(item), label: label } %>
+          <% else %>
+            <%= value_mapper.call(item) %>
+          <% end %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

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

@@ -0,0 +1,7 @@
+<div class="p-3">
+  <% if tabs.size > 10 %>
+    <%= controller.helpers.render partial: 'active_element/components/vertical_tabs', locals: { tabs: tabs, class_name: class_name } %>
+  <% else %>
+    <%= controller.helpers.render partial: 'active_element/components/horizontal_tabs', locals: { tabs: tabs, class_name: class_name } %>
+  <% end %>
+</div>

data/app/views/active_element/decorators/_boolean.html.erb

@@ -0,0 +1,5 @@
+<% if value %>
+  <i class="text-success fa-regular fa-fw fa-circle-check align-center align-middle"></i>
+<% else %>
+  <i class="text-danger fa-regular fa-fw fa-circle-xmark align-center align-middle"></i>
+<% end %>

data/app/views/active_element/decorators/_date.html.erb

@@ -0,0 +1,3 @@
+<% if value.present? %>
+  <%= value.strftime('%F') %>
+<% end %>

data/app/views/active_element/decorators/_datetime.html.erb

@@ -0,0 +1,3 @@
+<% if value.present? %>
+  <%= value.strftime('%c') %>
+<% end %>

data/app/views/active_element/decorators/_time.html.erb

@@ -0,0 +1,3 @@
+<% if value.present? %>
+  <%= value.strftime('%T') %>
+<% end %>

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

@@ -0,0 +1,33 @@
+<h1>Forbidden</h1>
+
+<h2>You do not have access to this page</h2>
+
+<hr/>
+
+<% if missing_permissions.present? %>
+<p>Your user account requires the following permission(s) to view this content:</p>
+
+<div>
+  <ul style="list-style-type: none;">
+    <% missing_permissions.each do |missing_permission| %>
+      <li class="font-monospace"><%= missing_permission %></li>
+    <% end %>
+  </ul>
+</div>
+
+<hr/>
+<% end %>
+
+<p>Please contact your administrator if you need access to this page, or <%= link_to 'go back', request.referrer %> to the previous page and try a different option.</p>
+
+<% if alternatives.present? %>
+  <div class="alternative-links">
+    <h5>Alternatively, try one of the following suggestions:</h5>
+
+    <ul class="pt-1" style="list-style-type: none">
+      <% alternatives.first(5).each do |route| %>
+        <li class="mt-1 font-monospace"><%= link_to route.title, route.path %></li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>

data/app/views/active_element/main_menu/_item.html.erb

@@ -0,0 +1,9 @@
+<% if item.separator? %>
+  <li>
+    <div class="menu-item-separator">
+      <div class="menu-item-separator-line"></div>
+    </div>
+  </li>
+<% else %>
+  <li><%= link_to item.name, item.url, class: 'menu-section-dropdown-item dropdown-item' %></li>
+<% end %>

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

@@ -0,0 +1,30 @@
+<div class="application-menu sticky-top navbar navbar-dark bg-dark navbar-expand-lg">
+  <%= render partial: 'active_element/theme/select' %>
+  <div class="container p-0">
+    <a class="navbar-brand" href="#"><%= ActiveElement.application_title %></a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </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| %>
+          <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,
+                          current_navbar_item: navbar_item,
+                          current_path: request.path,
+                          controller_path: controller_path,
+                          action_name: action_name)
+                      }"
+            %>
+          </li>
+        <% end %>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>

data/app/views/active_element/theme/_select.html.erb

@@ -0,0 +1 @@
+<div id="theme-select"></div>

data/app/views/active_element/theme/_templates.html.erb

@@ -0,0 +1,6 @@
+<div id="theme-templates" class="d-none">
+  <div id="theme-select-buttons">
+    <a id="theme-dark-button-template" href="#" class="dark-theme" data-theme-switch-to="light"><i class="fa-regular fa-fw fa-moon"></i></a>
+    <a id="theme-light-button-template" href="#" class="light-theme" data-theme-switch-to="dark"><i class="fa-regular fa-fw fa-sun"></i></a>
+  </div>
+</div>

data/app/views/kaminari/_first_page.html.erb

@@ -0,0 +1,3 @@
+<li class="page-item">
+  <%= link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote, class: 'page-link' %>
+</li>