flexi_admin 0.0.5 → 0.0.6

data/lib/flexi_admin/javascript/controllers/bulk_action_controller.js

@@ -7,16 +7,27 @@ export default class extends Controller {
     scope: String,
   };
 
+  static targets = ["counter", "defaultText", "selectionText"];
+
   connect() {
-    this.selectedIds = [];
+    this._loadFromStorage();
 
-    document.addEventListener("bulk-action-modal-opened", (event) => {
-      this._modalOpened(event);
-    });
+    // Bind the handler so we can properly remove it in disconnect
+    this._boundModalOpened = this._modalOpened.bind(this);
+    document.addEventListener("bulk-action-modal-opened", this._boundModalOpened);
+
+    // Track shiftKey from click events (change events don't carry modifier keys)
+    this._boundTrackShift = (e) => { this._shiftDown = e.shiftKey; };
+    this.element.addEventListener("click", this._boundTrackShift, true);
+
+    // Restore checkbox states based on stored selections
+    this._restoreCheckboxStates();
+    this._updateSelectionUI();
   }
 
   disconnect() {
-    document.removeEventListener("bulk-action-modal-opened", this._modalOpened);
+    document.removeEventListener("bulk-action-modal-opened", this._boundModalOpened);
+    this.element.removeEventListener("click", this._boundTrackShift, true);
   }
 
   async requestModal(event) {
@@ -30,21 +41,41 @@ export default class extends Controller {
     const modal = this._withModal();
     const form = modal.querySelector("form");
     form.requestSubmit();
+    this._unselectAll();
   }
 
   toggle(event) {
-    const id = event.target.value;
+    const checkbox = event.target;
+    const checkboxes = this._allCheckboxes();
 
-    if (event.target.checked) {
-      // Add ID to the array if the checkbox is checked
-      this.selectedIds.push(id);
+    if (this._shiftDown && this._lastClickedCheckbox) {
+      const currentIndex = checkboxes.indexOf(checkbox);
+      const lastIndex = checkboxes.indexOf(this._lastClickedCheckbox);
+
+      if (currentIndex !== -1 && lastIndex !== -1) {
+        const start = Math.min(currentIndex, lastIndex);
+        const end = Math.max(currentIndex, lastIndex);
+
+        for (let i = start; i <= end; i++) {
+          checkboxes[i].checked = true;
+          if (!this.selectedIds.includes(checkboxes[i].value)) {
+            this.selectedIds.push(checkboxes[i].value);
+          }
+        }
+      }
     } else {
-      // Remove ID from the array if the checkbox is unchecked
-      this.selectedIds = this.selectedIds.filter(
-        (selectedId) => selectedId !== id
-      );
+      const id = checkbox.value;
+      if (checkbox.checked) {
+        this.selectedIds.push(id);
+      } else {
+        this.selectedIds = this.selectedIds.filter(
+          (selectedId) => selectedId !== id
+        );
+      }
     }
 
+    this._lastClickedCheckbox = checkbox;
+
     if (this.selectedIds.length > 0) {
       this._enableActions();
     } else {
@@ -52,7 +83,8 @@ export default class extends Controller {
     }
 
     this._persist();
-    // console.log(`${this.scopeValue} select one`, this.selectedIds.length);
+    this._saveToStorage();
+    this._updateSelectionUI();
   }
 
   toggleAll(event) {
@@ -63,6 +95,26 @@ export default class extends Controller {
     }
   }
 
+  navigateWithSelectedIds(event) {
+    event.preventDefault();
+
+    if (this.selectedIds.length === 0) {
+      return;
+    }
+
+    const target = event.target || event.currentTarget;
+    const baseUrl = target.dataset.baseUrl;
+    const paramName = target.dataset.paramName || 'selected_ids[]';
+    const params = new URLSearchParams();
+
+    this.selectedIds.forEach(id => {
+      params.append(paramName, id);
+    });
+
+    const url = `${baseUrl}?${params.toString()}`;
+    window.Turbo.visit(url);
+  }
+
   _modalOpened(event) {
     if (event.detail.scope !== this.scopeValue) {
       return;
@@ -70,20 +122,50 @@ export default class extends Controller {
 
     const modal = this._withModal();
 
-    this._populateCountElements(modal);
-    this._populateIds(modal);
+    // If selectedIds are provided in the event (from row action), use them
+    // Otherwise, use the controller's selectedIds (from bulk checkbox selection)
+    const idsToUse = event.detail.selectedIds && event.detail.selectedIds.length > 0
+      ? event.detail.selectedIds
+      : this.selectedIds;
+
+    this._populateCountElements(modal, idsToUse.length);
+    this._populateIds(modal, idsToUse);
     this._addProcessor(modal, event.detail.modalId);
+    this._addScope(modal, event.detail.scope);
   }
 
-  _populateCountElements(modal) {
+  _populateCountElements(modal, count = null) {
+    const countToUse = count !== null ? count : this.selectedIds.length;
     const countElements = modal.querySelectorAll("span.count");
     countElements.forEach((countElement) => {
-      countElement.textContent = this.selectedIds.length;
+      countElement.textContent = countToUse;
     });
   }
 
+  _addScope(modal, scope) {
+    const form = modal.querySelector("form");
+
+    const existingInput = form.querySelector('input[name="fa_scope"]');
+    if (existingInput) {
+      existingInput.remove();
+    }
+
+    const hiddenInput = document.createElement("input");
+    hiddenInput.type = "hidden";
+    hiddenInput.name = "fa_scope";
+    hiddenInput.value = scope;
+    form.appendChild(hiddenInput);
+  }
+
   _addProcessor(modal, processor) {
     const form = modal.querySelector("form");
+
+    // Remove any existing processor input to prevent duplicates when called multiple times
+    const existingProcessorInput = form.querySelector('input[name="processor"]');
+    if (existingProcessorInput) {
+      existingProcessorInput.remove();
+    }
+
     const hiddenInput = document.createElement("input");
     hiddenInput.type = "hidden";
     hiddenInput.name = "processor";
@@ -91,12 +173,20 @@ export default class extends Controller {
     form.appendChild(hiddenInput);
   }
 
-  _populateIds(modal) {
+  _populateIds(modal, ids = null) {
+    const idsToUse = ids !== null ? ids : this.selectedIds;
     const form = modal.querySelector("form");
+
+    // Remove any existing ids input to prevent duplicates when called multiple times
+    const existingIdsInput = form.querySelector('input[name="ids"]');
+    if (existingIdsInput) {
+      existingIdsInput.remove();
+    }
+
     const hiddenInput = document.createElement("input");
     hiddenInput.type = "hidden";
     hiddenInput.name = "ids";
-    hiddenInput.value = JSON.stringify(this.selectedIds);
+    hiddenInput.value = JSON.stringify(idsToUse);
     form.appendChild(hiddenInput);
   }
 
@@ -105,39 +195,39 @@ export default class extends Controller {
   }
 
   _selectAll() {
-    // find all checkboxes with the name of the actionScope
-    const checkboxes = document.querySelectorAll(
-      `.bulk-action-checkbox > input[name="${this.scopeValue}"]`
-    );
+    const checkboxes = this._allCheckboxes();
 
-    this.selectedIds = Array.from(checkboxes).map((checkbox) => checkbox.value);
+    this.selectedIds = checkboxes.map((checkbox) => checkbox.value);
 
-    Array.from(checkboxes).forEach((checkbox) => {
+    checkboxes.forEach((checkbox) => {
       checkbox.checked = true;
     });
 
     this._persist();
+    this._saveToStorage();
+    this._updateSelectionUI();
     this._enableActions();
-    // console.log(`${this.scopeValue} select all`, this.selectedIds.length);
   }
 
   _unselectAll() {
     this.selectedIds = [];
-    const checkboxes = document.querySelectorAll(
-      `.bulk-action-checkbox > input[name="${this.scopeValue}"]`
-    );
-    Array.from(checkboxes).forEach((checkbox) => {
+    this._lastClickedCheckbox = null;
+    const checkboxes = this._allCheckboxes();
+    checkboxes.forEach((checkbox) => {
       checkbox.checked = false;
     });
 
+    const selectAllCheckbox = document.querySelector('#checkbox-all');
+    if (selectAllCheckbox) selectAllCheckbox.checked = false;
+
     this._persist();
+    this._saveToStorage();
+    this._updateSelectionUI();
     this._disableActions();
-    // console.log(`${this.scopeValue} unselect all`, this.selectedIds.length);
   }
 
   _persist() {
     this.element.dataset.ids = JSON.stringify(this.selectedIds);
-    // console.log("persist", this.element.dataset.ids);
   }
 
   _enableActions() {
@@ -155,4 +245,73 @@ export default class extends Controller {
         item.classList.add("disabled");
       });
   }
+
+  clearSelection(event) {
+    event.preventDefault();
+    this._unselectAll();
+  }
+
+  _storageKey() {
+    return `bulk_action_selection_${this.scopeValue}`;
+  }
+
+  _loadFromStorage() {
+    const stored = sessionStorage.getItem(this._storageKey());
+    if (stored) {
+      try {
+        this.selectedIds = JSON.parse(stored);
+      } catch (e) {
+        this.selectedIds = [];
+      }
+    } else {
+      this.selectedIds = [];
+    }
+  }
+
+  _saveToStorage() {
+    sessionStorage.setItem(this._storageKey(), JSON.stringify(this.selectedIds));
+  }
+
+  _restoreCheckboxStates() {
+    if (this.selectedIds.length === 0) {
+      return;
+    }
+
+    const checkboxes = this._allCheckboxes();
+    checkboxes.forEach((checkbox) => {
+      if (this.selectedIds.includes(checkbox.value)) {
+        checkbox.checked = true;
+      }
+    });
+
+    if (this.selectedIds.length > 0) {
+      this._enableActions();
+    }
+  }
+
+  _allCheckboxes() {
+    return Array.from(document.querySelectorAll(
+      `.bulk-action-checkbox > input[name="${this.scopeValue}"]:not(#checkbox-all)`
+    ));
+  }
+
+  _updateSelectionUI() {
+    const count = this.selectedIds.length;
+
+    // Update counter value
+    if (this.hasCounterTarget) {
+      this.counterTarget.textContent = count;
+    }
+
+    // Toggle between default text and selection text
+    if (this.hasDefaultTextTarget && this.hasSelectionTextTarget) {
+      if (count > 0) {
+        this.defaultTextTarget.style.display = 'none';
+        this.selectionTextTarget.style.display = 'inline';
+      } else {
+        this.defaultTextTarget.style.display = 'inline';
+        this.selectionTextTarget.style.display = 'none';
+      }
+    }
+  }
 }

data/lib/flexi_admin/javascript/controllers/copy_to_clipboard_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  copy() {
+    const input = this.element.querySelector("input, textarea")
+    if (!input) return
+
+    navigator.clipboard.writeText(input.value).then(() => {
+      const icon = this.element.querySelector(".copy-field-btn i")
+      if (!icon) return
+
+      icon.classList.replace("bi-clipboard", "bi-check")
+      setTimeout(() => icon.classList.replace("bi-check", "bi-clipboard"), 1500)
+    })
+  }
+}

data/lib/flexi_admin/javascript/controllers/datalist_controller.js

@@ -40,7 +40,7 @@ export default class extends Controller {
 
     this.timeout = setTimeout(() => {
       this._search(this.inputTarget.value);
-    }, 200);
+    }, 300);
   }
 
   clear() {

data/lib/flexi_admin/javascript/controllers/delete_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from "@hotwired/stimulus";
+import { CSRFToken } from "../utils";
+
+// Connects to data-controller="delete"
+export default class extends Controller {
+  static values = {
+    resourcePath: String,
+    confirmMessage: String,
+    disabled: Boolean,
+  };
+
+  delete(event) {
+    event.preventDefault();
+
+    if (this.disabledValue) {
+      return;
+    }
+
+    const confirmMessage = this.confirmMessageValue || "Are you sure you want to delete this item?";
+
+    if (!confirm(confirmMessage)) {
+      return;
+    }
+
+    fetch(this.resourcePathValue, {
+      method: "DELETE",
+      headers: {
+        Accept: "text/vnd.turbo-stream.html",
+        "X-CSRF-Token": CSRFToken(),
+      },
+    })
+      .then((response) => response.text())
+      .then((html) => {
+        Turbo.renderStreamMessage(html);
+      })
+      .catch((error) => {
+        console.error("Error deleting resource:", error);
+      });
+  }
+}

data/lib/flexi_admin/javascript/controllers/expandable_field_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    this.resize();
+  }
+
+  resize() {
+    this.element.style.height = "auto";
+    const minHeight =
+      parseFloat(getComputedStyle(this.element).lineHeight) || 36;
+    this.element.style.height =
+      Math.max(this.element.scrollHeight, minHeight) + "px";
+  }
+}

data/lib/flexi_admin/javascript/controllers/filter_auto_submit_controller.js

@@ -0,0 +1,93 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="filter-auto-submit"
+export default class extends Controller {
+  initialize() {
+    this.initialValues = new Map();
+    this.storageKey = 'filterAutoSubmit_openDropdowns';
+  }
+
+  connect() {
+    this.getInputFields().forEach((field) => {
+      this.initialValues.set(field, field.value);
+    });
+
+    this.reopenDropdowns();
+    this.autofocusSearchField();
+  }
+
+  autofocusSearchField() {
+    const field = this.element.querySelector('input[type="text"], input[type="search"]');
+    if (field) field.focus();
+  }
+
+  reopenDropdowns() {
+    const openDropdownIds = this.getOpenDropdownIds();
+    if (openDropdownIds.length > 0) {
+      setTimeout(() => {
+        openDropdownIds.forEach((dropdownId) => {
+          const button = this.element.querySelector(`#${dropdownId}`);
+          if (button) {
+            const dropdown = new bootstrap.Dropdown(button);
+            dropdown.show();
+          }
+        });
+        sessionStorage.removeItem(this.storageKey);
+      }, 100);
+    }
+  }
+
+  getOpenDropdownIds() {
+    try {
+      const stored = sessionStorage.getItem(this.storageKey);
+      return stored ? JSON.parse(stored) : [];
+    } catch (e) {
+      return [];
+    }
+  }
+
+  storeOpenDropdownIds(ids) {
+    try {
+      sessionStorage.setItem(this.storageKey, JSON.stringify(ids));
+    } catch (e) {
+    }
+  }
+
+  handleDropdownChange(event) {
+    event.stopPropagation();
+
+    const openDropdownIds = [];
+    this.element.querySelectorAll('.dropdown-menu.show').forEach((menu) => {
+      const button = menu.previousElementSibling;
+      if (button && button.id) {
+        openDropdownIds.push(button.id);
+      }
+    });
+
+    this.storeOpenDropdownIds(openDropdownIds);
+
+    this.element.requestSubmit();
+  }
+
+  submitOnBlur(event) {
+    let field = null;
+
+    if (event.target.matches('input, textarea')) {
+      field = event.target;
+    } else {
+      field = event.target.querySelector('input, textarea');
+    }
+
+    if (!field) return;
+
+    if (this.initialValues.get(field) !== field.value) {
+      this.element.requestSubmit();
+    }
+  }
+
+  getInputFields() {
+    return Array.from(
+      this.element.querySelectorAll('input[type="text"], input[type="search"], textarea')
+    );
+  }
+}

data/lib/flexi_admin/javascript/controllers/index.js

@@ -16,6 +16,12 @@ application.register("button-select", ButtonSelectController);
 import DatalistController from "./datalist_controller";
 application.register("datalist", DatalistController);
 
+import DeleteController from "./delete_controller";
+application.register("delete", DeleteController);
+
+import FilterAutoSubmitController from "./filter_auto_submit_controller";
+application.register("filter-auto-submit", FilterAutoSubmitController);
+
 import FormController from "./form_controller";
 application.register("form", FormController);
 
@@ -42,3 +48,15 @@ application.register("sorting", SortingController);
 
 import FloatingTocController from "./floating_toc_controller";
 application.register("floating-toc", FloatingTocController);
+
+import AddRowController from "./add_row_controller";
+application.register("add-row", AddRowController);
+
+import CopyToClipboardController from "./copy_to_clipboard_controller";
+application.register("copy-to-clipboard", CopyToClipboardController);
+
+import ExpandableFieldController from "./expandable_field_controller";
+application.register("expandable-field", ExpandableFieldController);
+
+import TabsController from "./tabs_controller";
+application.register("tabs", TabsController);

data/lib/flexi_admin/javascript/controllers/pagination_controller.js

@@ -10,4 +10,12 @@ export default class extends Controller {
 
     fetchTurboContent(event, path);
   }
+
+  changePerPage(event) {
+    const newPerPage = event.target.value;
+    const pathTemplate = event.target.dataset.perPagePath;
+    const path = pathTemplate.replace("__PER_PAGE__", newPerPage);
+
+    fetchTurboContent(event, path);
+  }
 }

data/lib/flexi_admin/javascript/controllers/tabs_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Keeps the open tab of a TabsComponent in the URL hash (#<key>), so a reload or a
+// shared link reopens the same tab instead of falling back to the first one.
+//
+// Connects to data-controller="tabs". Each tab button carries
+// data-tabs-key-param="<key>" and data-action="shown.bs.tab->tabs#remember".
+export default class extends Controller {
+  connect() {
+    const key = decodeURIComponent(window.location.hash.replace("#", ""));
+    if (!key) return;
+
+    const button = Array.from(this.element.querySelectorAll("[data-tabs-key-param]")).find(
+      (candidate) => candidate.dataset.tabsKeyParam === key
+    );
+    // Clicking goes through Bootstrap's own data-api, so the controller needs no
+    // reference to the `bootstrap` global.
+    if (button && !button.classList.contains("active")) button.click();
+  }
+
+  remember({ params: { key } }) {
+    history.replaceState(history.state, "", `#${key}`);
+  }
+}

data/lib/flexi_admin/models/concerns/application_resource.rb

@@ -4,6 +4,12 @@ module FlexiAdmin::Models::Concerns::ApplicationResource
   extend ActiveSupport::Concern
   include FlexiAdmin::Models::Concerns::Parentable
 
+  class_methods do
+    def fa_allowed_scopes
+      []
+    end
+  end
+
   def identifier
     "#{self.class.name.underscore}_#{id}"
   end

data/lib/flexi_admin/models/concerns/parentable.rb

@@ -6,6 +6,9 @@ module FlexiAdmin::Models::Concerns::Parentable
   included do
     scope :with_parent, lambda { |parent_instance|
       return all if parent_instance.blank?
+      if !parent_instance.class.ancestors.include?(ActiveRecord::Base)
+        raise ArgumentError, "Parent instance must be a valid model instance, was #{parent_instance.class.name}"
+      end
 
       plural_name = parent_instance.class.model_name.plural
 

data/lib/flexi_admin/models/context_params.rb

@@ -14,7 +14,10 @@ module FlexiAdmin::Models
       view: 'fa_view',
       ac_action: 'ac_action', # autocomplete action
       ac_fields: { 'ac_fields': [] }, # autocomplete result fields
-      ac_path: 'ac_path' # autocomplete path for opening resource in new window
+      ac_path: 'ac_path', # autocomplete path for opening resource in new window
+      reload_frame: 'fa_reload_frame', # turbo-frame ID to reload after bulk actions
+      reload: 'fa_reload', # :page forces full page reload after bulk actions
+      custom_scope: 'fa_custom_scope', # named model scope for autocomplete filtering
     }
 
     def self.permitted_params_keys
@@ -31,12 +34,19 @@ module FlexiAdmin::Models
       end
     end
 
-    attr_reader :params
+    attr_reader :params, :request_params
 
     def initialize(params)
-      @params = params.to_h.with_indifferent_access.each_with_object({}) do |(key, value), acc|
-        acc[self.class.params_map.invert[key.to_s]] = value
+      params_hash = params.to_h.with_indifferent_access
+
+      @params = params_hash.each_with_object({}) do |(key, value), acc|
+        if self.class.params_map.invert[key.to_s]
+          acc[self.class.params_map.invert[key.to_s]] = value
+        end
       end.with_indifferent_access
+
+      excluded_keys = FlexiAdmin::Controllers::ResourcesController::DEFAULT_CONTROLLER_PARAMS_KEYS
+      @request_params = params_hash.except(*self.class.params_map.values, *excluded_keys).with_indifferent_access
     end
 
     def [](key)
@@ -54,7 +64,9 @@ module FlexiAdmin::Models
 
       new_params = new_params.transform_keys { |key| self.class.params_map[key.to_sym] || key.to_sym }
 
-      self.class.new(new_params)
+      combined_params = new_params.merge(@request_params)
+
+      self.class.new(combined_params)
     end
 
     def with_parent(parent_instance)
@@ -71,12 +83,17 @@ module FlexiAdmin::Models
     def except(*keys)
       new_params = @params.dup.except(*keys)
       new_params = new_params.transform_keys { |key| self.class.params_map.invert[key.to_s] }
-      self.class.new(new_params)
+
+      combined_params = new_params.merge(@request_params)
+
+      self.class.new(combined_params)
     end
 
     def to_params
-      self.class.params_map.map { |k, v| [v, params[k]] }
+      context_params = self.class.params_map.map { |k, v| [v, params[k]] }
           .reject { |_k, v| v.blank? }.to_h
+
+      context_params.merge(@request_params)
     end
 
     def to_path(path)
@@ -88,7 +105,7 @@ module FlexiAdmin::Models
     end
 
     def per_page
-      params[:per_page] || 13
+      params[:per_page]
     end
 
     def page
@@ -113,7 +130,7 @@ module FlexiAdmin::Models
     end
 
     def pagination
-      { page:, per_page: }
+      { page: page, per_page: per_page }
     end
 
     def sort
@@ -123,5 +140,13 @@ module FlexiAdmin::Models
     def order
       params[:order]
     end
+
+    def reload_frame
+      params[:reload_frame]
+    end
+
+    def reload
+      params[:reload]&.to_sym
+    end
   end
-end
+end