headmin 0.6.0 → 0.6.2

data/app/assets/javascripts/headmin/controllers/media_modal_controller.js

@@ -1,110 +1,147 @@
 /* global CustomEvent */
-import { Controller } from '@hotwired/stimulus'
+import {Controller} from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static get targets () {
-    return ['idCheckbox', 'item', 'form', 'selectButton', 'placeholder', 'count']
-  }
-
-  connect () {
-    this.validate()
-    this.updateCount()
-  }
-
-  // Actions
-  select () {
-    this.dispatchSelectionEvent()
-  }
-
-  submitForm () {
-    this.hidePlaceholder()
-    this.triggerFormSubmission()
-  }
-
-  inputChange () {
-    this.handleInputChange()
-    this.updateCount()
-  }
-
-  // Methods
-  hidePlaceholder () {
-    this.placeholderTarget.classList.add('d-none')
-  }
-
-  handleInputChange () {
-    this.validate()
-  }
-
-  dispatchSelectionEvent () {
-    document.dispatchEvent(
-      new CustomEvent(
-        'mediaSelectionSubmitted',
-        {
-          detail: {
-            name: this.element.dataset.name,
-            items: this.renderItemsForEvent(this.selectedItems())
-          }
+    static get targets() {
+        return ['idCheckbox', 'item', 'form', 'selectButton', 'placeholder', 'count']
+    }
+
+    static get values () {
+        return { ids: Array }
+    }
+
+    connect() {
+        this.validate()
+        this.updateCount()
+    }
+
+    // Actions
+    select() {
+        this.dispatchSelectionEvent()
+    }
+
+    submitForm() {
+        this.hidePlaceholder()
+        this.triggerFormSubmission()
+    }
+
+    inputChange(event) {
+        this.handleIdsUpdate(event.target)
+        this.updateCount()
+    }
+
+    // Methods
+    hidePlaceholder() {
+        this.placeholderTarget.classList.add('d-none')
+    }
+
+    handleIdsUpdate(element) {
+        if (element.checked) {
+            let arr = this.idsValue
+            arr.push(element.value)
+            this.idsValue = arr
+        } else {
+            this.idsValue = this.idsValue.filter((value) => {
+                return element.value !== value
+            })
         }
-      )
-    )
-  }
-
-  triggerFormSubmission () {
-    this.formTarget.requestSubmit()
-  }
-
-  renderItemsForEvent (items) {
-    return items.map((item) => this.renderItemForEvent(item))
-  }
-
-  renderItemForEvent (item) {
-    return {
-      blobId: item.querySelector('input[type="checkbox"]').value,
-      thumbnail: item.querySelector('.h-thumbnail')
-    }
-  }
-
-  selectedItems () {
-    return this.itemTargets.filter((item) => {
-      const checkbox = item.querySelector('input[type="checkbox"]')
-      return checkbox.checked
-    })
-  }
-
-  selectedItemsCount () {
-    return this.selectedItems().length
-  }
-
-  minSelectedItems () {
-    return parseInt(this.element.dataset.min, 10) || 0
-  }
-
-  maxSelectedItems () {
-    return parseInt(this.element.dataset.max, 10) || Infinity
-  }
-
-  validate () {
-    if (this.isValid()) {
-      this.enableSelectButton()
-    } else {
-      this.disableSelectButton()
-    }
-  }
-
-  enableSelectButton () {
-    this.selectButtonTarget.removeAttribute('disabled')
-  }
-
-  disableSelectButton () {
-    this.selectButtonTarget.setAttribute('disabled', '')
-  }
-
-  isValid () {
-    const count = this.selectedItemsCount()
-    return count >= this.minSelectedItems() && count <= this.maxSelectedItems()
-  }
-
-  updateCount () {
-    this.countTarget.innerHTML = this.idCheckboxTargets.filter(checkbox => checkbox.checked).length
-  }
+    }
+
+    itemTargetConnected(element) {
+        this.updateItem(element.querySelector("input"))
+    }
+
+    updateItem(element) {
+        const arr = this.idsValue
+
+        if (arr.includes(element.value)) {
+            element.checked = true
+        } else {
+            element.checked = false
+        }
+    }
+
+    idsValueChanged() {
+        for (const item of this.itemTargets) {
+            this.updateItem(item.querySelector("input"))
+        }
+        this.validate()
+    }
+
+    dispatchSelectionEvent() {
+        document.dispatchEvent(
+            new CustomEvent(
+                'mediaSelectionSubmitted',
+                {
+                    detail: {
+                        name: this.element.dataset.name,
+                        items: this.renderItemsForEvent()
+                    }
+                }
+            )
+        )
+    }
+
+    triggerFormSubmission() {
+        this.formTarget.requestSubmit()
+    }
+
+    renderItemsForEvent() {
+        return this.idsValue.map((item) => this.renderItemForEvent(item)).filter((i) => { return i !== undefined })
+    }
+
+    renderItemForEvent(item) {
+        const id = parseInt(item)
+        const blob_id = `#blob_${id}`
+        const element = this.element.querySelector(blob_id)
+
+        return {
+            blobId: id,
+            thumbnail: element ? element.querySelector('.h-thumbnail') : ""
+        }
+    }
+
+    selectedItems() {
+        return this.itemTargets.filter((item) => {
+            const checkbox = item.querySelector('input[type="checkbox"]')
+            return checkbox.checked
+        })
+    }
+
+    selectedItemsCount() {
+        return this.idsValue.length
+    }
+
+    minSelectedItems() {
+        return parseInt(this.element.dataset.min, 10) || 0
+    }
+
+    maxSelectedItems() {
+        return parseInt(this.element.dataset.max, 10) || Infinity
+    }
+
+    validate() {
+        if (this.isValid()) {
+            this.enableSelectButton()
+        } else {
+            this.disableSelectButton()
+        }
+    }
+
+    enableSelectButton() {
+        this.selectButtonTarget.removeAttribute('disabled')
+    }
+
+    disableSelectButton() {
+        this.selectButtonTarget.setAttribute('disabled', '')
+    }
+
+    isValid() {
+        const count = this.selectedItemsCount()
+        return count >= this.minSelectedItems() && count <= this.maxSelectedItems()
+    }
+
+    updateCount() {
+        this.countTarget.innerHTML = this.selectedItemsCount()
+    }
 }

data/app/assets/javascripts/headmin/index.js

@@ -10,6 +10,7 @@ import FilterRowController from './controllers/filter_row_controller'
 import FiltersController from './controllers/filters_controller'
 import FlatpickrController from './controllers/flatpickr_controller'
 import HelloController from './controllers/hello_controller'
+import InfiniteScrollerController from './controllers/infinite_scroller_controller'
 import MediaController from './controllers/media_controller'
 import MediaModalController from './controllers/media_modal_controller'
 import NotificationController from './controllers/notification_controller'
@@ -35,6 +36,7 @@ export class Headmin {
     Stimulus.register('filters', FiltersController)
     Stimulus.register('flatpickr', FlatpickrController)
     Stimulus.register('hello', HelloController)
+    Stimulus.register('infinite-scroller', InfiniteScrollerController)
     Stimulus.register('media', MediaController)
     Stimulus.register('media-modal', MediaModalController)
     Stimulus.register('notification', NotificationController)

data/app/assets/javascripts/headmin.js

@@ -7718,7 +7718,6 @@ var filter_controller_default = class extends Controller {
   }
   connect() {
     this.element.controller = this;
-    this.updateHiddenValue();
   }
   toggle(event) {
     const expanded = this.buttonTarget.getAttribute("aria-expanded") === "true";
@@ -7776,7 +7775,14 @@ var filter_controller_default = class extends Controller {
     for (const row of this.rowTargets) {
       const conditional = row.previousElementSibling ? row.previousElementSibling.querySelector('[data-filter-target="conditional"]').value : null;
       const operator = row.querySelector('[data-filter-target="operator"]').value;
-      const value = row.querySelector('[data-filter-target="value"]').value;
+      let values = Array.from(row.querySelectorAll('[data-filter-target="value"]'));
+      values = values.filter((element) => {
+        return element.style.display;
+      });
+      values = values.map((element) => {
+        return element.value;
+      });
+      const value = values.join(",");
       string += `${conditional || ""}${operator}:${value}`;
     }
     return string;
@@ -7799,16 +7805,25 @@ var filter_row_controller_default = class extends Controller {
   handleOperatorChange() {
     if (this.operatorTarget.value === "is_null" || this.operatorTarget.value === "is_not_null") {
       this.toggleNullInput();
+    } else if (this.operatorTarget.value === "between" || this.operatorTarget.value === "not_between") {
+      this.toggleSecondaryInput();
     } else {
       this.toggleOriginalInput();
     }
   }
   toggleNullInput() {
     this.hideOriginal();
+    this.hideSecondary();
     this.showNull();
   }
   toggleOriginalInput() {
     this.showOriginal();
+    this.hideSecondary();
+    this.hideNull();
+  }
+  toggleSecondaryInput() {
+    this.showSecondary();
+    this.hideOriginal();
     this.hideNull();
   }
   hideOriginal() {
@@ -7819,6 +7834,22 @@ var filter_row_controller_default = class extends Controller {
     this.originalTarget.style.display = "block";
     this.originalTarget.setAttribute("data-filter-target", "value");
   }
+  hideSecondary() {
+    for (const [index2, value] of this.originalTargets.entries()) {
+      if (index2 != 0) {
+        value.style.display = "none";
+        value.setAttribute("data-filter-target", "value_original");
+      }
+    }
+  }
+  showSecondary() {
+    for (const [index2, value] of this.originalTargets.entries()) {
+      if (index2 != 0) {
+        value.style.display = "block";
+        value.setAttribute("data-filter-target", "value");
+      }
+    }
+  }
   hideNull() {
     this.nullTarget.style.display = "none";
     this.nullTarget.setAttribute("data-filter-target", "value_null");
@@ -10093,6 +10124,29 @@ var hello_controller_default = class extends Controller {
   }
 };
 
+// app/assets/javascripts/headmin/controllers/infinite_scroller_controller.js
+var infinite_scroller_controller_default = class extends Controller {
+  connect() {
+    this.clickWhenInViewport();
+    document.querySelector(".modal-body").addEventListener("scroll", () => {
+      this.clickWhenInViewport();
+    });
+  }
+  clickWhenInViewport() {
+    if (!this.isLoading() && this.isInViewport()) {
+      this.element.setAttribute("clicked", 1);
+      this.element.click();
+    }
+  }
+  isLoading() {
+    return this.element.hasAttribute("clicked");
+  }
+  isInViewport() {
+    const rect = this.element.getBoundingClientRect();
+    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+  }
+};
+
 // app/assets/javascripts/headmin/controllers/media_controller.js
 var media_controller_default = class extends Controller {
   static get targets() {
@@ -10140,8 +10194,8 @@ var media_controller_default = class extends Controller {
     this.postProcess();
   }
   selectItems(items) {
-    this.removeAllItems();
-    this.addItems(items);
+    this.removeAllDeselectedItems(items);
+    this.addNewItems(items);
     this.postProcess();
   }
   postProcess() {
@@ -10184,8 +10238,16 @@ var media_controller_default = class extends Controller {
       }
     });
   }
-  addItems(items) {
-    items.forEach((item) => this.addItem(item));
+  addNewItems(items) {
+    const itemTargetIds = this.itemTargets.map((i) => {
+      return parseInt(i.querySelectorAll("input")[1].value);
+    });
+    items.forEach((item) => {
+      if (itemTargetIds.includes(item.blobId)) {
+        return;
+      }
+      this.addItem(item);
+    });
   }
   addItem(item) {
     const currentItem = this.itemByBlobId(item.blobId);
@@ -10230,11 +10292,18 @@ var media_controller_default = class extends Controller {
     const randomNumber = Math.floor(1e8 + Math.random() * 9e8);
     return template.innerHTML.replace(regex, randomNumber);
   }
-  removeAllItems() {
-    this.removeItems(this.itemTargets);
+  removeAllDeselectedItems(items) {
+    this.removeDeselectedItems(items, this.itemTargets);
   }
-  removeItems(items) {
+  removeDeselectedItems(elements, items) {
+    const returnedBlobIds = elements.map((e) => {
+      return e.blobId;
+    });
     items.forEach((item) => {
+      const blobId = parseInt(item.querySelectorAll("input")[1].value);
+      if (returnedBlobIds.includes(blobId)) {
+        return;
+      }
       this.removeItem(item);
     });
   }
@@ -10267,6 +10336,9 @@ var media_modal_controller_default = class extends Controller {
   static get targets() {
     return ["idCheckbox", "item", "form", "selectButton", "placeholder", "count"];
   }
+  static get values() {
+    return { ids: Array };
+  }
   connect() {
     this.validate();
     this.updateCount();
@@ -10278,34 +10350,64 @@ var media_modal_controller_default = class extends Controller {
     this.hidePlaceholder();
     this.triggerFormSubmission();
   }
-  inputChange() {
-    this.handleInputChange();
+  inputChange(event) {
+    this.handleIdsUpdate(event.target);
     this.updateCount();
   }
   hidePlaceholder() {
     this.placeholderTarget.classList.add("d-none");
   }
-  handleInputChange() {
+  handleIdsUpdate(element) {
+    if (element.checked) {
+      let arr = this.idsValue;
+      arr.push(element.value);
+      this.idsValue = arr;
+    } else {
+      this.idsValue = this.idsValue.filter((value) => {
+        return element.value !== value;
+      });
+    }
+  }
+  itemTargetConnected(element) {
+    this.updateItem(element.querySelector("input"));
+  }
+  updateItem(element) {
+    const arr = this.idsValue;
+    if (arr.includes(element.value)) {
+      element.checked = true;
+    } else {
+      element.checked = false;
+    }
+  }
+  idsValueChanged() {
+    for (const item of this.itemTargets) {
+      this.updateItem(item.querySelector("input"));
+    }
     this.validate();
   }
   dispatchSelectionEvent() {
     document.dispatchEvent(new CustomEvent("mediaSelectionSubmitted", {
       detail: {
         name: this.element.dataset.name,
-        items: this.renderItemsForEvent(this.selectedItems())
+        items: this.renderItemsForEvent()
       }
     }));
   }
   triggerFormSubmission() {
     this.formTarget.requestSubmit();
   }
-  renderItemsForEvent(items) {
-    return items.map((item) => this.renderItemForEvent(item));
+  renderItemsForEvent() {
+    return this.idsValue.map((item) => this.renderItemForEvent(item)).filter((i) => {
+      return i !== void 0;
+    });
   }
   renderItemForEvent(item) {
+    const id = parseInt(item);
+    const blob_id = `#blob_${id}`;
+    const element = this.element.querySelector(blob_id);
     return {
-      blobId: item.querySelector('input[type="checkbox"]').value,
-      thumbnail: item.querySelector(".h-thumbnail")
+      blobId: id,
+      thumbnail: element ? element.querySelector(".h-thumbnail") : ""
     };
   }
   selectedItems() {
@@ -10315,7 +10417,7 @@ var media_modal_controller_default = class extends Controller {
     });
   }
   selectedItemsCount() {
-    return this.selectedItems().length;
+    return this.idsValue.length;
   }
   minSelectedItems() {
     return parseInt(this.element.dataset.min, 10) || 0;
@@ -10341,7 +10443,7 @@ var media_modal_controller_default = class extends Controller {
     return count >= this.minSelectedItems() && count <= this.maxSelectedItems();
   }
   updateCount() {
-    this.countTarget.innerHTML = this.idCheckboxTargets.filter((checkbox) => checkbox.checked).length;
+    this.countTarget.innerHTML = this.selectedItemsCount();
   }
 };
 
@@ -15901,6 +16003,7 @@ var Headmin = class {
     Stimulus.register("filters", filters_controller_default);
     Stimulus.register("flatpickr", flatpickr_controller_default);
     Stimulus.register("hello", hello_controller_default);
+    Stimulus.register("infinite-scroller", infinite_scroller_controller_default);
     Stimulus.register("media", media_controller_default);
     Stimulus.register("media-modal", media_modal_controller_default);
     Stimulus.register("notification", notification_controller_default);

data/app/assets/stylesheets/headmin.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 @import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css";
 
-/* sass-plugin-0:/opt/homebrew/var/www/headmin/src/scss/headmin.scss */
+/* sass-plugin-0:/usr/local/var/www/headmin/src/scss/headmin.scss */
 :root {
   --bs-blue: #0d6efd;
   --bs-indigo: #6610f2;

data/app/controllers/headmin/media_controller.rb

@@ -1,4 +1,5 @@
 class Headmin::MediaController < HeadminController
+  include Headmin::Pagination
   layout false
 
   def index
@@ -9,7 +10,13 @@ class Headmin::MediaController < HeadminController
         .order(created_at: :desc)
         .group(:id)
         .all
+    @blobs = paginate(@blobs)
     @mimetypes = media_params[:mimetype]
+
+    respond_to do |format|
+      format.html
+      format.turbo_stream
+    end
   end
 
   def create
@@ -38,6 +45,10 @@ class Headmin::MediaController < HeadminController
     end
   end
 
+  def thumbnail
+    @blob = ActiveStorage::Blob.find(params[:id])
+  end
+
   private
 
   def media_params

data/app/helpers/headmin/form_helper.rb

@@ -1,16 +1,5 @@
 module Headmin
   module FormHelper
-    # TODO: cleanup after input field refactoring
-    def form_field_validation_id(form, name)
-      [form.object_name, name.to_s, "validation"].join("_").parameterize.underscore
-    end
-
-    # TODO: cleanup after input field refactoring
-    def form_field_validation_class(form, name)
-      return nil if request.get?
-      form.object.errors.has_key?(name) ? "is-invalid" : "is-valid"
-    end
-
     # Outputs currently present query parameters as hidden fields for a given form
     #
     # https://example.com/products?amount=1&type[]=food&type[]=beverage

data/app/models/concerns/headmin/attachment.rb

@@ -0,0 +1,34 @@
+module Headmin
+  module Attachment
+    extend ActiveSupport::Concern
+    included do
+      scope :not_a_variant, -> { where.not(record_type: "ActiveStorage::VariantRecord") }
+
+      def record_hierarchy
+        hierarchy = []
+
+        current = record
+
+        current, partial_hierarchy = process_fieldable(current)
+        hierarchy << partial_hierarchy if partial_hierarchy.present?
+
+        current, partial_hierarchy = process_blockable(current)
+        hierarchy << partial_hierarchy if partial_hierarchy.present?
+
+        hierarchy << current if current.present?
+
+        hierarchy.flatten
+      end
+
+      private
+
+      def process_blockable(field)
+        field.respond_to?(:blockable) ? [field.blockable, field] : [field, nil]
+      end
+
+      def process_fieldable(field)
+        field.respond_to?(:fieldable) ? [field.root.fieldable, field.self_and_ancestors] : [field, nil]
+      end
+    end
+  end
+end

data/app/models/headmin/filter/association.rb

@@ -69,18 +69,6 @@ module Headmin
       def has_many?
         macro == :has_many
       end
-
-      private
-
-      def is_i?(value)
-        # Regex: this selects signed digits (\d) only, it is then checked to the value, e.g.:
-        # is_i?("3") = true
-        # is_i?("-3") = true
-        # is_i?("3a") = false
-        # is_i?("3.2") = false
-
-        /\A[-+]?\d+\z/.match(value)
-      end
     end
   end
 end