spina-blocks 0.3.0 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 76633f69018375e8d330eee4b062677dd4dc10bd380ec2e7b08f3900fd448540
-  data.tar.gz: dd386042f84a6554db3eb15200011e4a953f3559054a44f05caa0e052b10fa3b
+  metadata.gz: 4bb4bd87c20dc0578090ce0f7e9b26a0ff511f79c52c1e11319527fb9a132362
+  data.tar.gz: 768fbfeb07527abc7d752e7f8af4d51ebd0e86f0e7fc643f313e11d11874de3d
 SHA512:
-  metadata.gz: 19b5d1d156f66e85fb34aa6d2240d0f23cd0ffdb973601e2a4a1f3eca8c9058d39332c33bc986b52a69519b7eee22c3e39c6b713c6aadc9ccb5bdb93abaf5e3e
-  data.tar.gz: 7442845e4527e7dcfc8e429771b957638b89c053ae6b20767393756429000908af24337853d5899b9af5d06298efd492f53316a1db91712e85d9321f690647f2
+  metadata.gz: 6887a086f16feb25de70d36706ef1f5492c8b3f2831a3e1e7d583b1e62dcf79d547fa9e46edeca27805260a3e68835d9b1234a7144df0a1affd7ef5acf548fbc
+  data.tar.gz: 3741e38abf77005b798a73bdfbfc335f10c7a6109c88551ad6c649f287761714f15aa2e4467e5d65feed3e957c233210da0411e3691dc5204b3b479311dc52a2

data/README.md

@@ -119,6 +119,24 @@ theme.parts = [
 ]
 ```
 
+#### Filtering blocks by template
+
+By default, `BlockReference` and `BlockCollection` show all active blocks in their selects. To limit the list to blocks of a specific template, pass `block_template` in the part's `options`:
+
+```ruby
+theme.parts = [
+  { name: "hero_block", title: "Hero Block",
+    part_type: "Spina::Parts::BlockReference",
+    options: { block_template: "hero" } },
+
+  { name: "sidebar_blocks", title: "Sidebar Blocks",
+    part_type: "Spina::Parts::BlockCollection",
+    options: { block_template: "sidebar_widget" } }
+]
+```
+
+With this configuration, the "Hero Block" select will only show blocks created with the `hero` template, and "Sidebar Blocks" will only show `sidebar_widget` blocks. If `options` is omitted or does not contain `block_template`, all active blocks are shown (the default behavior).
+
 Then in your template:
 
 ```erb

data/app/assets/javascripts/spina/controllers/block_collection_controller.js

@@ -2,17 +2,26 @@ import { Controller } from "@hotwired/stimulus";
 import Sortable from "libraries/sortablejs";
 
 export default class extends Controller {
+  #abortController = null;
+  #modalWasOpen = false;
+  #modalObserver = null;
+
+  get #searchQuery() {
+    return this.hasSearchInputTarget ? this.searchInputTarget.value : "";
+  }
+
   static get targets() {
     return [
       "list",
       "hiddenFields",
       "dropdown",
-      "addButton",
+      "searchInput",
       "emptyMessage",
       "listItemTemplate",
       "groupHeaderTemplate",
       "dropdownOptionTemplate",
       "dropdownEmptyTemplate",
+      "newBlockTemplate",
     ];
   }
 
@@ -21,6 +30,8 @@ export default class extends Controller {
       blocks: Array, // [{id, name, templateName, templateTitle}]
       selectedIds: Array, // [id, id, ...]
       editUrl: String, // base edit_modal URL with __ID__ placeholder
+      newUrl: String, // URL for new block modal
+      blocksDataUrl: String, // JSON endpoint to refresh blocks list
     };
   }
 
@@ -36,10 +47,17 @@ export default class extends Controller {
       onEnd: this.reorderHiddenFields.bind(this),
     });
     this.render();
+    this.#observeModal();
   }
 
   disconnect() {
     if (this.sortable) this.sortable.destroy();
+    if (this.#modalObserver) {
+      this.#modalObserver.disconnect();
+      this.#modalObserver = null;
+    }
+    this.#abortController?.abort();
+    this.#abortController = null;
   }
 
   // --- Actions ---
@@ -50,6 +68,9 @@ export default class extends Controller {
     if (this.selectedIdsValue.indexOf(id) !== -1) return;
 
     this.selectedIdsValue = this.selectedIdsValue.concat([id]);
+    if (this.hasSearchInputTarget) {
+      this.searchInputTarget.value = "";
+    }
     this.render();
     this.closeDropdown();
   }
@@ -61,19 +82,23 @@ export default class extends Controller {
     this.render();
   }
 
-  toggleDropdown(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    const dropdown = this.dropdownTarget;
-    if (dropdown.style.display === "none" || dropdown.style.display === "") {
-      this.openDropdown();
-    } else {
-      this.closeDropdown();
-    }
+  onSearchInput() {
+    this.renderDropdown();
+    this.openDropdown();
+  }
+
+  onSearchFocus() {
+    this.renderDropdown();
+    this.openDropdown();
   }
 
   closeOnOutsideClick(event) {
-    if (!this.element.contains(event.target)) {
+    const clickedInsideSearch =
+      this.hasSearchInputTarget &&
+      this.searchInputTarget.contains(event.target);
+    const clickedInsideDropdown = this.dropdownTarget.contains(event.target);
+
+    if (!clickedInsideSearch && !clickedInsideDropdown) {
       this.closeDropdown();
     }
   }
@@ -118,43 +143,74 @@ export default class extends Controller {
   }
 
   renderDropdown() {
-    const availableBlocks = this.blocksValue.filter((b) => {
+    let availableBlocks = this.blocksValue.filter((b) => {
       return this.selectedIdsValue.indexOf(b.id) === -1;
     });
 
+    // Filter by search query
+    const query = this.#searchQuery.toLowerCase().trim();
+    if (query) {
+      availableBlocks = availableBlocks.filter((b) => {
+        return (
+          b.name.toLowerCase().includes(query) ||
+          (b.templateTitle && b.templateTitle.toLowerCase().includes(query)) ||
+          (b.templateName && b.templateName.toLowerCase().includes(query))
+        );
+      });
+    }
+
     this.dropdownTarget.innerHTML = "";
 
     if (availableBlocks.length === 0) {
       const empty = this.dropdownEmptyTemplateTarget.content.cloneNode(true);
       this.dropdownTarget.appendChild(empty);
-      return;
-    }
+    } else {
+      // Group by templateTitle
+      const groups = {};
+      availableBlocks.forEach((b) => {
+        const key = b.templateTitle || b.templateName || "Other";
+        if (!groups[key]) groups[key] = [];
+        groups[key].push(b);
+      });
 
-    // Group by templateTitle
-    const groups = {};
-    availableBlocks.forEach((b) => {
-      const key = b.templateTitle || b.templateName || "Other";
-      if (!groups[key]) groups[key] = [];
-      groups[key].push(b);
-    });
+      Object.keys(groups)
+        .sort()
+        .forEach((groupName) => {
+          const header = this.groupHeaderTemplateTarget.content.cloneNode(true);
+          header.querySelector("[data-role='group-name']").textContent =
+            groupName;
+          this.dropdownTarget.appendChild(header);
 
-    Object.keys(groups)
-      .sort()
-      .forEach((groupName) => {
-        const header = this.groupHeaderTemplateTarget.content.cloneNode(true);
-        header.querySelector("[data-role='group-name']").textContent =
-          groupName;
-        this.dropdownTarget.appendChild(header);
-
-        groups[groupName].forEach((block) => {
-          const option =
-            this.dropdownOptionTemplateTarget.content.cloneNode(true);
-          const button = option.querySelector("button");
-          button.dataset.blockId = block.id;
-          option.querySelector("[data-role='title']").textContent = block.name;
-          this.dropdownTarget.appendChild(option);
+          groups[groupName].forEach((block) => {
+            const option =
+              this.dropdownOptionTemplateTarget.content.cloneNode(true);
+            const button = option.querySelector("button");
+            button.dataset.blockId = block.id;
+            option.querySelector("[data-role='title']").textContent =
+              block.name;
+            this.dropdownTarget.appendChild(option);
+          });
         });
-      });
+    }
+
+    // "New block" link at the bottom of the dropdown
+    if (
+      this.hasNewBlockTemplateTarget &&
+      this.hasNewUrlValue &&
+      this.newUrlValue
+    ) {
+      const newBlock = this.newBlockTemplateTarget.content.cloneNode(true);
+      const link = newBlock.querySelector("[data-role='new-block-link']");
+      if (link) {
+        link.href = this.newUrlValue;
+      }
+      this.dropdownTarget.appendChild(newBlock);
+    }
+
+    // Reposition if dropdown is currently visible
+    if (this.dropdownTarget.style.display !== "none") {
+      this.#positionDropdown();
+    }
   }
 
   renderEmptyMessage() {
@@ -197,20 +253,101 @@ export default class extends Controller {
   }
 
   openDropdown() {
+    if (this.dropdownTarget.style.display === "block") {
+      // Already open, just reposition
+      this.#positionDropdown();
+      return;
+    }
+
     this.dropdownTarget.style.display = "block";
-    this._outsideClickHandler = this.closeOnOutsideClick.bind(this);
-    document.addEventListener("click", this._outsideClickHandler, true);
+    this.#positionDropdown();
+
+    this.#abortController = new AbortController();
+    const { signal } = this.#abortController;
+
+    document.addEventListener("click", (e) => this.closeOnOutsideClick(e), {
+      capture: true,
+      signal,
+    });
+
+    let scrollTimeout;
+    const debouncedPosition = () => {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => this.#positionDropdown(), 100);
+    };
+    window.addEventListener("scroll", debouncedPosition, {
+      capture: true,
+      signal,
+    });
+    window.addEventListener("resize", debouncedPosition, { signal });
   }
 
   closeDropdown() {
     this.dropdownTarget.style.display = "none";
-    if (this._outsideClickHandler) {
-      document.removeEventListener("click", this._outsideClickHandler, true);
-      this._outsideClickHandler = null;
+    if (this.hasSearchInputTarget) {
+      this.searchInputTarget.value = "";
     }
+    this.#abortController?.abort();
+    this.#abortController = null;
   }
 
   findBlock(id) {
     return this.blocksValue.find((b) => b.id === id);
   }
+
+  // --- Private ---
+
+  #positionDropdown() {
+    const dropdown = this.dropdownTarget;
+    const container = dropdown.parentElement;
+    const containerRect = container.getBoundingClientRect();
+    const dropdownHeight = dropdown.offsetHeight;
+    const viewportHeight = window.innerHeight;
+
+    const spaceBelow = viewportHeight - containerRect.bottom;
+    const spaceAbove = containerRect.top;
+
+    if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+      // Not enough space below and more space above, show above
+      dropdown.style.bottom = "100%";
+      dropdown.style.top = "auto";
+      dropdown.style.marginBottom = "4px";
+      dropdown.style.marginTop = "0";
+    } else {
+      // Default: show below
+      dropdown.style.bottom = "auto";
+      dropdown.style.top = "100%";
+      dropdown.style.marginTop = "4px";
+      dropdown.style.marginBottom = "0";
+    }
+  }
+
+  #observeModal() {
+    const modalFrame = document.querySelector("turbo-frame[id='modal']");
+    if (!modalFrame || !this.hasBlocksDataUrlValue || !this.blocksDataUrlValue)
+      return;
+
+    this.#modalWasOpen = false;
+    this.#modalObserver = new MutationObserver(() => {
+      const hasModal = modalFrame.querySelector(".modal");
+      if (hasModal) {
+        this.#modalWasOpen = true;
+      } else if (this.#modalWasOpen) {
+        this.#modalWasOpen = false;
+        this.refreshBlocks();
+      }
+    });
+    this.#modalObserver.observe(modalFrame, { childList: true });
+  }
+
+  refreshBlocks() {
+    fetch(this.blocksDataUrlValue, {
+      headers: { Accept: "application/json" },
+    })
+      .then((response) => response.json())
+      .then((blocks) => {
+        this.blocksValue = blocks;
+        this.render();
+      });
+  }
 }

data/app/controllers/spina/blocks/admin/blocks_controller.rb

@@ -29,18 +29,31 @@ module Spina
         def new
           @block_templates = current_theme.try(:block_templates) || []
           @block = Spina::Blocks::Block.new(block_template: params[:block_template])
+          @modal = params[:modal]
         end
 
         def create
           @block = Spina::Blocks::Block.new(block_params)
           if @block.save
-            redirect_to(spina.edit_blocks_admin_block_url(@block))
+            if params[:modal]
+              redirect_to(spina.edit_modal_blocks_admin_block_url(@block))
+            else
+              redirect_to(spina.edit_blocks_admin_block_url(@block))
+            end
           else
             @block_templates = current_theme.try(:block_templates) || []
-            render(turbo_stream: turbo_stream.update(
-              helpers.dom_id(@block, :new_block_form),
-              partial: "new_block_form",
-            ))
+            if params[:modal]
+              @modal = true
+              render(turbo_stream: turbo_stream.update(
+                helpers.dom_id(@block, :new_block_modal_form),
+                partial: "new_block_modal_form",
+              ))
+            else
+              render(turbo_stream: turbo_stream.update(
+                helpers.dom_id(@block, :new_block_form),
+                partial: "new_block_form",
+              ))
+            end
           end
         end
 
@@ -79,6 +92,19 @@ module Spina
           end
         end
 
+        def blocks_data
+          blocks = Spina::Blocks::Block.active.sorted
+          template_titles = build_template_titles
+          render(json: blocks.map do |b|
+            {
+              id: b.id,
+              name: b.name,
+              templateName: b.block_template.to_s,
+              templateTitle: template_titles[b.block_template.to_s] || b.block_template.to_s.titleize,
+            }
+          end)
+        end
+
         def sort
           params[:ids].each.with_index do |id, index|
             Spina::Blocks::Block.where(id: id).update_all(position: index + 1)
@@ -108,6 +134,14 @@ module Spina
           @tabs = ["block_content", "block_settings"]
         end
 
+        def build_template_titles
+          titles = {}
+          (current_theme.try(:block_templates) || []).each do |bt|
+            titles[bt[:name].to_s] = bt[:title].to_s
+          end
+          titles
+        end
+
         def block_params
           params.require(:block).permit!
         end

data/app/models/concerns/spina/parts/block_filterable.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Spina
+  module Parts
+    module BlockFilterable
+      extend ActiveSupport::Concern
+
+      def available_blocks
+        scope = ::Spina::Blocks::Block.active.sorted
+        opts = options.is_a?(Hash) ? options.with_indifferent_access : nil
+        if opts&.dig(:block_template).present?
+          scope = scope.where(block_template: opts[:block_template])
+        end
+        scope
+      end
+    end
+  end
+end

data/app/models/spina/parts/block_collection.rb

@@ -3,6 +3,8 @@
 module Spina
   module Parts
     class BlockCollection < Base
+      include BlockFilterable
+
       attr_json :block_ids, :integer, array: true, default: -> { [] }
 
       attr_accessor :options

data/app/models/spina/parts/block_reference.rb

@@ -3,6 +3,8 @@
 module Spina
   module Parts
     class BlockReference < Base
+      include BlockFilterable
+
       attr_json :block_id, :integer, default: nil
 
       attr_accessor :options

data/app/views/spina/admin/parts/block_collections/_form.html.erb

@@ -1,5 +1,5 @@
 <%
-  blocks = Spina::Blocks::Block.active.sorted
+  blocks = f.object.available_blocks
   selected_ids = f.object.block_ids || []
   field_name = "#{f.object_name}[block_ids][]"
 
@@ -27,6 +27,8 @@
      data-block-collection-blocks-value="<%= blocks_json.to_json %>"
      data-block-collection-selected-ids-value="<%= selected_ids.to_json %>"
      data-block-collection-edit-url-value="<%= spina.edit_modal_blocks_admin_block_path("__ID__") %>"
+     data-block-collection-new-url-value="<%= spina.new_blocks_admin_block_path(modal: 1) %>"
+     data-block-collection-blocks-data-url-value="<%= spina.blocks_data_blocks_admin_blocks_path(format: :json) %>"
      data-field-name="<%= field_name %>">
 
   <label class="block text-sm leading-5 font-medium text-gray-700"><%= f.object.title %></label>
@@ -34,11 +36,26 @@
     <div class="text-gray-400 text-sm mb-2"><%= f.object.hint %></div>
   <% end %>
 
+  <%# Search input + dropdown %>
+  <div class="relative mb-3">
+    <input type="text"
+           data-block-collection-target="searchInput"
+           data-action="input->block-collection#onSearchInput focus->block-collection#onSearchFocus"
+           placeholder="Search or add block..."
+           autocomplete="off"
+           class="block w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-spina focus:ring-spina" />
+
+    <div data-block-collection-target="dropdown"
+         style="display:none"
+         class="absolute z-10 w-full bg-white border border-gray-200 rounded-md shadow-lg py-1 max-h-60 overflow-y-auto">
+    </div>
+  </div>
+
   <%# Empty state message %>
   <div data-block-collection-target="emptyMessage"
        class="text-sm text-gray-400 italic py-3"
        style="<%= selected_ids.any? ? 'display:none' : '' %>">
-    No blocks selected. Click &ldquo;Add block&rdquo; to get started.
+    No blocks selected. Use the search field above to add blocks.
   </div>
 
   <%# Sortable list of selected blocks (rendered by Stimulus) %>
@@ -47,24 +64,6 @@
   <%# Hidden fields container (rendered by Stimulus) %>
   <div data-block-collection-target="hiddenFields"></div>
 
-  <%# Add block button + dropdown %>
-  <div class="relative inline-block">
-    <button type="button"
-            data-action="block-collection#toggleDropdown"
-            data-block-collection-target="addButton"
-            class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-spina">
-      <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
-      </svg>
-      Add block
-    </button>
-
-    <div data-block-collection-target="dropdown"
-         style="display:none"
-         class="absolute z-10 mt-1 w-64 bg-white border border-gray-200 rounded-md shadow-lg py-1 max-h-60 overflow-y-auto">
-    </div>
-  </div>
-
   <%# ===== Templates for Stimulus controller ===== %>
 
   <%# Selected block list item %>
@@ -110,6 +109,19 @@
 
   <%# Dropdown empty state %>
   <template data-block-collection-target="dropdownEmptyTemplate">
-    <div class="px-3 py-2 text-sm text-gray-400 italic">All blocks added</div>
+    <div class="px-3 py-2 text-sm text-gray-400 italic">No blocks found</div>
+  </template>
+
+  <%# Dropdown "New block" link %>
+  <template data-block-collection-target="newBlockTemplate">
+    <div class="border-t border-gray-200 mt-1 pt-1">
+      <a class="w-full text-left px-3 py-2 text-sm text-spina-primary hover:bg-gray-100 flex items-center font-medium"
+         href="" data-turbo-frame="modal" data-role="new-block-link">
+        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+        </svg>
+        <%= t('spina.blocks.new') %>
+      </a>
+    </div>
   </template>
 </div>

data/app/views/spina/admin/parts/block_references/_form.html.erb

@@ -4,7 +4,7 @@
     <div class="text-gray-400 text-sm"><%= f.object.hint %></div>
   <% end %>
   <div class="mt-1">
-    <% blocks = Spina::Blocks::Block.active.sorted %>
+    <% blocks = f.object.available_blocks %>
     <%= f.select :block_id,
           blocks.map { |b| [b.name, b.id] },
           {include_blank: t('spina.blocks.select_block')},

data/app/views/spina/blocks/admin/blocks/_new_block_modal_form.html.erb

@@ -0,0 +1,42 @@
+<%# Modal variant of the new block form. Used when creating a block from BlockCollection.
+    After successful creation, the modal transitions to the block edit form.
+    Expects: @block, @block_templates %>
+<%= turbo_frame_tag dom_id(@block, :new_block_modal_form) do %>
+  <%= form_with model: @block, url: spina.blocks_admin_blocks_path, data: { turbo_frame: "modal" } do |f| %>
+    <%= hidden_field_tag :modal, 1 %>
+
+    <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+      <div class="sm:flex sm:items-start">
+        <div class="w-full">
+          <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-headline">
+            <%= t('spina.blocks.new') %>
+          </h3>
+
+          <div class="mt-4">
+            <label for="block_block_template" class="block text-sm font-medium text-gray-700 mb-1">
+              <%= t('spina.blocks.block_type') %>
+            </label>
+            <%= f.select :block_template,
+                  @block_templates.map { |bt| [bt[:title], bt[:name]] },
+                  { include_blank: t('spina.blocks.select_block_type') },
+                  class: "block w-full rounded-md border-gray-300 shadow-xs focus:border-blue-500 focus:ring-blue-500 text-sm",
+                  required: true %>
+          </div>
+
+          <div class="mt-3">
+            <%= render Spina::Forms::TextFieldComponent.new(f, :name, size: 'lg', autofocus: true) %>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="px-4 pb-5 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+      <button type="submit" class="btn btn-primary w-full sm:w-auto sm:ml-3">
+        <%= t('spina.blocks.create') %>
+      </button>
+
+      <button type="button" class="btn btn-default w-full sm:w-auto mt-2 sm:mt-0" data-action="modal#close">
+        <%= t('spina.ui.cancel') %>
+      </button>
+    </div>
+  <% end %>
+<% end %>

data/app/views/spina/blocks/admin/blocks/new.html.erb

@@ -1,3 +1,7 @@
 <%= render(Spina::UserInterface::ModalComponent.new) do %>
-  <%= render 'new_block_form' %>
+  <% if @modal %>
+    <%= render 'new_block_modal_form' %>
+  <% else %>
+    <%= render 'new_block_form' %>
+  <% end %>
 <% end %>

data/config/routes.rb

@@ -11,6 +11,7 @@ Spina::Engine.routes.draw do
 
         collection do
           post :sort
+          get :blocks_data
         end
       end
 

data/lib/spina/blocks/version.rb

@@ -2,6 +2,6 @@
 
 module Spina
   module Blocks
-    VERSION = "0.3.0"
+    VERSION = "0.3.1"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: spina-blocks
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.3.1
 platform: ruby
 authors:
 - Konstantin Kanashchuk
@@ -94,6 +94,7 @@ files:
 - app/controllers/spina/blocks/admin/categories_controller.rb
 - app/controllers/spina/blocks/admin/page_blocks_controller.rb
 - app/helpers/spina/blocks/blocks_helper.rb
+- app/models/concerns/spina/parts/block_filterable.rb
 - app/models/spina/blocks/account_extension.rb
 - app/models/spina/blocks/application_record.rb
 - app/models/spina/blocks/block.rb
@@ -114,6 +115,7 @@ files:
 - app/views/spina/blocks/admin/blocks/_form_block_settings.html.erb
 - app/views/spina/blocks/admin/blocks/_modal_form.html.erb
 - app/views/spina/blocks/admin/blocks/_new_block_form.html.erb
+- app/views/spina/blocks/admin/blocks/_new_block_modal_form.html.erb
 - app/views/spina/blocks/admin/blocks/edit.html.erb
 - app/views/spina/blocks/admin/blocks/edit_content.html.erb
 - app/views/spina/blocks/admin/blocks/edit_modal.html.erb