headmin 0.6.1 → 0.6.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f0d94377c6d3cf0d97bdffa08c34d9c95ef9b72036c8e7b1d0d1b89996ed52d
-  data.tar.gz: 9b263a38b16dacace7769f9eb2cab3b90dc478cc229fead7ae157c4fd48e7f65
+  metadata.gz: 819c038f09a0d2dab83f4931d67256dd6130244afcff409af0580d8abf72d02c
+  data.tar.gz: 28fa2501518683ed07ce67315a42b62b1f2d8749208196a84ef20642125b815b
 SHA512:
-  metadata.gz: 3ee1ebb9dbc530154fd310c910dbab36e13272a0c3433b494588e6f552c5e8af6c6ee4f39b41f2737a7b2321805c02d9a5c22b7dfeea9c62455584ecc0cbc907
-  data.tar.gz: e88897ec516a9b4f83188f8eb12e1b49d46da547d03b459942da6f77266faee9031f0f3f06c5300529183e6f6cd9aa2112e92ce1b30ba7902edcd919b0f9ceaf
+  metadata.gz: a117642e4cd9cc87484aa37ca85c0ba95a0e0747111b51ce87c529c92510a4b7dfa715aa432d8993b37b412aab30fa51f4a0b4876e2058d2fd83086ef1145a54
+  data.tar.gz: 06247200375b3fa43820d017fd7a174e29e5acea8a8c4fda239c95a8388e6df33918e1995fa4488e77c8c915ea8f9fc715d50f390e11edffc60794ca6eeeb2e3

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    headmin (0.6.0)
+    headmin (0.6.3)
       closure_tree (~> 7.4)
       inline_svg (~> 1.7)
       redcarpet (~> 3.5)
@@ -218,7 +218,7 @@ GEM
       zeitwerk (~> 2.5)
     rainbow (3.1.1)
     rake (13.0.6)
-    redcarpet (3.5.1)
+    redcarpet (3.6.0)
     regexp_parser (2.6.2)
     reline (0.3.2)
       io-console (~> 0.5)
@@ -288,8 +288,9 @@ GEM
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
-    with_advisory_lock (4.6.0)
-      activerecord (>= 4.2)
+    with_advisory_lock (5.1.0)
+      activerecord (>= 6.1)
+      zeitwerk (>= 2.6)
     xpath (3.2.0)
       nokogiri (~> 1.8)
     zeitwerk (2.6.6)

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

@@ -15,8 +15,6 @@ export default class extends Controller {
   // This allows calling controller methods from the element in other controllers
   connect () {
     this.element.controller = this
-
-    this.updateHiddenValue()
   }
 
   toggle (event) {
@@ -89,7 +87,21 @@ export 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"]'))
+
+      // Only the visible elements are of interest
+      values = values.filter((element) => {
+        return element.style.display
+      })
+
+      // Grab the value of each visible element
+      values = values.map((element) => {
+        return element.value
+      })
+
+      // Concatenate array to a string
+      const value = values.join(',')
+
       string += `${conditional || ''}${operator}:${value}`
     }
 

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

@@ -13,6 +13,8 @@ export 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()
     }
@@ -20,11 +22,19 @@ export default class extends Controller {
 
   toggleNullInput () {
     this.hideOriginal()
+    this.hideSecondary()
     this.showNull()
   }
 
   toggleOriginalInput () {
     this.showOriginal()
+    this.hideSecondary()
+    this.hideNull()
+  }
+
+  toggleSecondaryInput () {
+    this.showSecondary()
+    this.hideOriginal()
     this.hideNull()
   }
 
@@ -38,6 +48,24 @@ export default class extends Controller {
     this.originalTarget.setAttribute('data-filter-target', 'value')
   }
 
+  hideSecondary () {
+    for (const [index, value] of this.originalTargets.entries()) {
+      if (index !== 0) {
+        value.style.display = 'none'
+        value.setAttribute('data-filter-target', 'value_original')
+      }
+    }
+  }
+
+  showSecondary () {
+    for (const [index, value] of this.originalTargets.entries()) {
+      if (index !== 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')

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

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+
+export 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)
+  }
+}

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

@@ -66,10 +66,10 @@ export default class extends Controller {
 
   selectItems (items) {
     // Destroy all deselected items
-    this.removeAllItems()
+    this.removeAllDeselectedItems(items)
 
-    // Add all selected items
-    this.addItems(items)
+    // Add all new selected items
+    this.addNewItems(items)
 
     this.postProcess()
   }
@@ -129,8 +129,16 @@ export 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)) {
+        // Do not add this item (as it is already present)
+        return
+      }
+
+      this.addItem(item)
+    })
   }
 
   addItem (item) {
@@ -192,12 +200,20 @@ export default class extends Controller {
     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)) {
+        // Do not delete this one
+        return
+      }
+
       this.removeItem(item)
     })
   }

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

@@ -6,6 +6,10 @@ export default class extends Controller {
     return ['idCheckbox', 'item', 'form', 'selectButton', 'placeholder', 'count']
   }
 
+  static get values () {
+    return { ids: Array }
+  }
+
   connect () {
     this.validate()
     this.updateCount()
@@ -21,8 +25,8 @@ export default class extends Controller {
     this.triggerFormSubmission()
   }
 
-  inputChange () {
-    this.handleInputChange()
+  inputChange (event) {
+    this.handleIdsUpdate(event.target)
     this.updateCount()
   }
 
@@ -31,7 +35,36 @@ export default class extends Controller {
     this.placeholderTarget.classList.add('d-none')
   }
 
-  handleInputChange () {
+  handleIdsUpdate (element) {
+    if (element.checked) {
+      const 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()
   }
 
@@ -42,7 +75,7 @@ export default class extends Controller {
         {
           detail: {
             name: this.element.dataset.name,
-            items: this.renderItemsForEvent(this.selectedItems())
+            items: this.renderItemsForEvent()
           }
         }
       )
@@ -53,14 +86,18 @@ export default class extends Controller {
     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 !== undefined })
   }
 
   renderItemForEvent (item) {
+    const id = parseInt(item)
+    const blobId = `#blob_${id}`
+    const element = this.element.querySelector(blobId)
+
     return {
-      blobId: item.querySelector('input[type="checkbox"]').value,
-      thumbnail: item.querySelector('.h-thumbnail')
+      blobId: id,
+      thumbnail: element ? element.querySelector('.h-thumbnail') : ''
     }
   }
 
@@ -72,7 +109,7 @@ export default class extends Controller {
   }
 
   selectedItemsCount () {
-    return this.selectedItems().length
+    return this.idsValue.length
   }
 
   minSelectedItems () {
@@ -105,6 +142,6 @@ export default class extends Controller {
   }
 
   updateCount () {
-    this.countTarget.innerHTML = this.idCheckboxTargets.filter(checkbox => checkbox.checked).length
+    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) {
+      const 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 blobId = `#blob_${id}`;
+    const element = this.element.querySelector(blobId);
     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/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/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

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

@@ -0,0 +1,50 @@
+module Headmin
+  module Filter
+    class AssociationCount < Headmin::Filter::Base
+      OPERATORS = %w[eq not_eq gt gteq lt lteq]
+
+      def cast_value(value)
+        is_i?(value) ? value.to_i : 0
+      end
+
+      def query(collection)
+        return collection unless @instructions.any?
+
+        # Store the collections' class for later use
+        @parent_class = collection.is_a?(Class) ? collection : collection.klass
+
+        # Join table and group on primary key if necessary
+        collection = collection.left_joins(reflection.name).group(primary_key)
+
+        # Build query and execute
+        query = nil
+        @instructions.each do |instruction|
+          query = build_query(query, collection, instruction)
+        end
+        collection.having(query)
+      end
+
+      private
+
+      def build_query(query, collection, instruction)
+        query_operator = convert_to_query_operator(instruction[:operator])
+        query_value = convert_to_query_value(instruction[:value], instruction[:operator])
+
+        query_operator, query_value = process_null_operators(query_operator, query_value)
+        new_query = reflection.klass.arel_table[reflection.foreign_key.to_sym].count.send(query_operator, query_value)
+        query ? query.send(instruction[:conditional], new_query) : new_query
+      end
+
+      def reflection
+        reflection = @parent_class.reflect_on_association(attribute.to_s.split("_")[0].to_sym)
+        raise UnknownAssociation if reflection.nil?
+
+        reflection
+      end
+
+      def primary_key
+        "#{@parent_class.table_name}.#{@parent_class.primary_key}"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,78 @@
+module Headmin
+  module Filter
+    class AssociationCountView < FilterView
+      def base_options
+        keys = %i[name label form]
+        options = to_h.slice(*keys)
+        default_base_options.merge(options)
+      end
+
+      def input_options
+        keys = %i[form]
+        options = to_h.slice(*keys)
+        default_input_options.merge(options)
+      end
+
+      def collection
+        @collection || association_model.all.map { |record| [record.to_s, record.id] }
+      end
+
+      def association_model
+        reflection.klass
+      end
+
+      private
+
+      def id
+        "#{name}_value"
+      end
+
+      def name
+        @name || attribute
+      end
+
+      def attribute
+        "#{@association}_count"
+      end
+
+      def label
+        @label || I18n.t("attributes.#{attribute}", default: "#{I18n.t("attributes.count")} #{association_model.model_name.human(count: collection? ? 2 : 1)}")
+      end
+
+      def reflection
+        form.object.class.reflect_on_association(@association)
+      end
+
+      def collection?
+        reflection.collection?
+      end
+
+      def default_base_options
+        {
+          label: label,
+          name: attribute,
+          display_values: collection,
+          filter: Headmin::Filter::AssociationCount.new(name, @params),
+          allowed_operators: Headmin::Filter::AssociationCount::OPERATORS
+        }
+      end
+
+      def default_input_options
+        {
+          label: false,
+          wrapper: false,
+          name: nil,
+          id: id,
+          data: {
+            action: "change->filter#updateHiddenValue",
+            filter_target: "value",
+            filter_row_target: "original"
+          },
+          collection: collection,
+          selected: selected,
+          class: "form-control"
+        }
+      end
+    end
+  end
+end

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

@@ -100,6 +100,16 @@ module Headmin
         query ? query.send(instruction[:conditional], new_query) : new_query
       end
 
+      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
+
       private
 
       def parse(string)

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

@@ -56,8 +56,15 @@ module Headmin
       def display_value(value)
         # This uses the default date format of headmin.
         # Can be overwritten by setting default date format of the application.
-        if value.class.to_s == "Range"
+
+        current_operator = instructions.find { |instruction| instruction[:value] == value }[:operator]
+
+        # To make the operators eq and not_eq work, we pass a range.
+        # However, display value should return this as a date and not a range.
+        if value.class.to_s == "Range" && (current_operator == "eq" || current_operator == "not_eq")
           I18n.l(value.last.to_date)
+        elsif values.class.to_s
+          "#{I18n.l(value.first.to_date)} - #{I18n.l(value.last.to_date)}"
         else
           I18n.l(value.to_date)
         end

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

@@ -28,7 +28,7 @@ module Headmin
           label: label,
           name: attribute,
           filter: Headmin::Filter::Date.new(name, @params),
-          allowed_operators: Headmin::Filter::Date::OPERATORS - %w[in not_in between not_between]
+          allowed_operators: Headmin::Filter::Date::OPERATORS - %w[in not_in]
         }
       end
 

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

@@ -10,18 +10,6 @@ module Headmin
       def to_s
         string
       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

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

@@ -24,7 +24,9 @@ module Headmin
           is_null: "○ #{I18n.t("headmin.filters.operators.is_null")}",
           is_not_null: "● #{I18n.t("headmin.filters.operators.is_not_null")}",
           in: "∋ #{I18n.t("headmin.filters.operators.in")}",
-          not_in: "∌ #{I18n.t("headmin.filters.operators.not_in")}"
+          not_in: "∌ #{I18n.t("headmin.filters.operators.not_in")}",
+          between: "↔ #{I18n.t("headmin.filters.operators.between")}",
+          not_between: "⥈ #{I18n.t("headmin.filters.operators.not_between")}"
         }
       end
     end

data/app/views/headmin/_filters.html.erb

@@ -23,7 +23,7 @@
 
   <!-- Default parameters (e.g. sorting, pagination) -->
   <% default_params.except("page").each do |name, value| %>
-    <%= form.hidden_field name.to_sym, value: value %>
+    <%= hidden_field_tag(name, value) %>
   <% end %>
 
   <div class="d-flex flex-column flex-md-row align-content-start align-items-md-start">

data/app/views/headmin/filters/_association_count.html.erb

@@ -0,0 +1,28 @@
+<%
+  # headmin/filters/association_count
+  #
+  # ==== Required parameters
+  # * +association+ - Name of the association that has to be counted
+  # * +form+ - Form object
+  #
+  # ==== Optional parameters
+  # * +label+ - Display label
+  # * +name+ - Name of the filter parameter
+  #
+  # ==== Examples
+  #   Basic version (one-to-many)
+  #   <%= render "headmin/filters", url: admin_orders_path do |form| %#>
+  #     <%= render "headmin/filters/association_count", form: form, association: :beverages %#>
+  #   <% end  %#>
+  #
+  #   Basic version (one-to-one)
+  #   <%= render "headmin/filters", url: admin_orders_path do |form| %#>
+  #     <%= render "headmin/filters/association_count", form: form, association: :beverage %#>
+  #   <% end  %#>
+
+  number = Headmin::Filter::AssociationCountView.new(local_assigns.merge(params: params))
+%>
+
+<%= render "headmin/filters/base", number.base_options do |value| %>
+  <%= render "headmin/forms/number", number.input_options.merge({value: value}) %>
+<% end %>

data/app/views/headmin/filters/_date.html.erb

@@ -20,4 +20,5 @@
 
 <%= render "headmin/filters/base", date.base_options do |value| %>
   <%= render "headmin/forms/date", date.input_options.merge({value: value}) %>
+  <%= render "headmin/forms/date_range", date.input_options.merge({start: {value: value.class.to_s == "Range" ? value.first : value}, end: {value: value.class.to_s == "Range" ? value.last : value}}) %>
 <% end %>

data/app/views/headmin/media/_modal.html.erb

@@ -1,4 +1,4 @@
-<div class="media-modal modal fade" tabindex="-1" data-controller="remote-modal media-modal" data-name="<%= name %>" data-min="<%= min %>" data-max="<%= max %>">
+<div class="media-modal modal fade" tabindex="-1" data-controller="remote-modal media-modal" data-media-modal-ids-value="<%= params[:ids] ? params[:ids] : [] %>" data-name="<%= name %>" data-min="<%= min %>" data-max="<%= max %>">
   <div class="modal-dialog modal-lg modal-dialog-scrollable">
     <div class="modal-content">
       <div class="modal-header">
@@ -10,15 +10,20 @@
       <div class="modal-body">
         <%= turbo_frame_tag "thumbnails", class: "d-flex flex-wrap gap-2" do %>
           <% @blobs.each do |blob| %>
-            <%= render "headmin/media/item", blob: blob %>
+            <%= turbo_frame_tag blob, src: headmin_media_item_thumbnail_path(blob), loading: "lazy" do %>
+              <%= render "thumbnail" %>
+            <% end %>
           <% end %>
           <div data-media-modal-target="placeholder" class="<%= "d-none" if !@blobs.empty? %>">
             <p><%= t(".placeholder") %></p>
           </div>
         <% end %>
+        <div class="mt-3">
+          <%= render "headmin/pagination/infinite", items: @blobs %>
+        </div>
       </div>
       <div class="modal-footer">
-        <%= form_with url: headmin_media_path, multipart: true, data: {"media-modal-target": "form"}, class: "me-auto" do |form| %>
+        <%= form_with url: headmin_new_media_path, multipart: true, data: {"media-modal-target": "form"}, class: "me-auto" do |form| %>
           <%= form.label :files, class: "btn h-btn-outline-light" do %>
             <%= bootstrap_icon("upload") %>
             <%= t(".upload") %>

data/app/views/headmin/media/_thumbnail.html.erb

@@ -0,0 +1,20 @@
+<% blob = local_assigns.has_key?(:blob) ? local_assigns[:blob] : nil %>
+<% if blob.present? %>
+  <div data-media-modal-target="item" title="<%= "#{blob.filename} (#{l(blob.created_at, format: :long)})" %>">
+    <!-- Input -->
+    <input
+      id="media-item-<%= blob.id %>"
+      type="checkbox"
+      value="<%= blob.id %>"
+      data-action="change->media-modal#inputChange"
+      data-media-modal-target="idCheckbox"
+      hidden>
+
+    <!-- Label -->
+    <label for="media-item-<%= blob.id %>">
+      <%= render "headmin/thumbnail", file: blob %>
+    </label>
+  </div>
+<% else %>
+  <%= render "headmin/thumbnail", file: nil %>
+<% end %>

data/app/views/headmin/media/create.turbo_stream.erb

@@ -1,5 +1,7 @@
 <%= turbo_stream.prepend "thumbnails" do %>
   <% @blobs.each do |blob| %>
-    <%= render "headmin/media/item", blob: blob %>
+    <%= turbo_frame_tag blob, src: headmin_media_item_thumbnail_path(blob), loading: "lazy" do %>
+      <%= render "thumbnail" %>
+    <% end %>
   <% end %>
 <% end %>

data/app/views/headmin/media/index.turbo_stream.erb

@@ -0,0 +1,11 @@
+<%= turbo_stream.append "thumbnails" do %>
+  <% @blobs.each do |blob| %>
+    <%= turbo_frame_tag blob, src: headmin_media_item_thumbnail_path(blob), loading: "lazy" do %>
+      <%= render 'thumbnail' %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= turbo_stream.replace "infinite" do %>
+    <%= render "headmin/pagination/infinite", items: @blobs %>
+<% end %>

data/app/views/headmin/media/thumbnail.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag @blob do %>
+ <%= render "thumbnail", blob: @blob %>
+<% end %>

data/app/views/headmin/pagination/_infinite.html.erb

@@ -0,0 +1,7 @@
+<% auto_load = local_assigns.has_key?(:auto_load) ? local_assigns[:auto_load] : true %>
+
+<% unless items.page(params[:page]).last_page? %>
+  <div id="infinite">
+    <%= link_to t(".load_more"), path_to_next_page(items), class: "btn btn-primary", data: {turbo_stream: true, controller: auto_load ? "infinite-scroller" : ""} %>
+  </div>
+<% end %>

data/config/locales/headmin/filters/en.yml

@@ -33,6 +33,8 @@ en:
         is_null: is null
         in: includes
         not_in: does not include
+        between: between
+        not_between: not between
       values:
         "false": "False"
         "no": "No"

data/config/locales/headmin/filters/nl.yml

@@ -33,6 +33,8 @@ nl:
         is_null: is niet ingevuld
         in: bevat
         not_in: bevat niet
+        between: tussen
+        not_between: niet tussen
       values:
         "false": Onwaar
         "no": Nee

data/config/locales/headmin/pagination/en.yml

@@ -1,6 +1,8 @@
 en:
   headmin:
     pagination:
+      infinite:
+        load_more: Load more
       per_page:
         title: items per page
       items:

data/config/locales/headmin/pagination/nl.yml

@@ -1,6 +1,8 @@
 nl:
   headmin:
     pagination:
+      infinite:
+        load_more: Meer laden
       per_page:
         title: items per pagina
       items:

data/config/routes.rb

@@ -3,8 +3,9 @@
 Rails.application.routes.draw do
   namespace(:headmin) do
     get "media", to: "media#index", as: :media
-    post "media", to: "media#create"
+    post "media", to: "media#create", as: :new_media
     get "media/:id", to: "media#show", as: :media_item
     patch "media/:id", to: "media#update"
+    get "media/thumbnail/:id", to: "media#thumbnail", as: :media_item_thumbnail
   end
 end

data/lib/headmin/version.rb

@@ -1,3 +1,3 @@
 module Headmin
-  VERSION = "0.6.1"
+  VERSION = "0.6.3"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "headmin",
-  "version": "0.6.0",
+  "version": "0.6.3",
   "description": "Admin component library",
   "module": "app/assets/javascripts/headmin.js",
   "main": "app/assets/javascripts/headmin.js",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: headmin
 version: !ruby/object:Gem::Version
-  version: 0.6.1
+  version: 0.6.3
 platform: ruby
 authors:
 - Jef Vlamings
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2023-01-23 00:00:00.000000000 Z
+date: 2024-09-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: closure_tree
@@ -105,6 +105,7 @@ files:
 - app/assets/javascripts/headmin/controllers/filters_controller.js
 - app/assets/javascripts/headmin/controllers/flatpickr_controller.js
 - app/assets/javascripts/headmin/controllers/hello_controller.js
+- app/assets/javascripts/headmin/controllers/infinite_scroller_controller.js
 - app/assets/javascripts/headmin/controllers/media_controller.js
 - app/assets/javascripts/headmin/controllers/media_modal_controller.js
 - app/assets/javascripts/headmin/controllers/notification_controller.js
@@ -261,6 +262,8 @@ files:
 - app/models/headmin/.DS_Store
 - app/models/headmin/blocks_view.rb
 - app/models/headmin/filter/association.rb
+- app/models/headmin/filter/association_count.rb
+- app/models/headmin/filter/association_count_view.rb
 - app/models/headmin/filter/association_view.rb
 - app/models/headmin/filter/base.rb
 - app/models/headmin/filter/base_view.rb
@@ -338,6 +341,7 @@ files:
 - app/views/headmin/dropdown/_list.html.erb
 - app/views/headmin/dropdown/_locale.html.erb
 - app/views/headmin/filters/_association.html.erb
+- app/views/headmin/filters/_association_count.html.erb
 - app/views/headmin/filters/_base.html.erb
 - app/views/headmin/filters/_boolean.html.erb
 - app/views/headmin/filters/_date.html.erb
@@ -408,17 +412,20 @@ files:
 - app/views/headmin/layout/_sidebar.html.erb
 - app/views/headmin/layout/sidebar/_bottom.html.erb
 - app/views/headmin/layout/sidebar/_nav.html.erb
-- app/views/headmin/media/_item.html.erb
 - app/views/headmin/media/_media_item_modal.html.erb
 - app/views/headmin/media/_modal.html.erb
+- app/views/headmin/media/_thumbnail.html.erb
 - app/views/headmin/media/create.turbo_stream.erb
 - app/views/headmin/media/index.html.erb
+- app/views/headmin/media/index.turbo_stream.erb
 - app/views/headmin/media/show.html.erb
+- app/views/headmin/media/thumbnail.html.erb
 - app/views/headmin/media/update.turbo_stream.erb
 - app/views/headmin/nav/_dropdown.html.erb
 - app/views/headmin/nav/_item.html.erb
 - app/views/headmin/nav/item/_devise.html.erb
 - app/views/headmin/nav/item/_locale.html.erb
+- app/views/headmin/pagination/_infinite.html.erb
 - app/views/headmin/pagination/_per_page.html.erb
 - app/views/headmin/pagination/kaminari/_first_page.html.erb
 - app/views/headmin/pagination/kaminari/_gap.html.erb
@@ -566,7 +573,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.3
+rubygems_version: 3.5.6
 signing_key:
 specification_version: 4
 summary: Admin component library

data/app/views/headmin/media/_item.html.erb

@@ -1,16 +0,0 @@
-<div data-media-modal-target="item" title="<%= "#{blob.filename} (#{l(blob.created_at, format: :long)})" %>">
-  <!-- Input -->
-  <input
-    id="media-item-<%= blob.id %>"
-    type="checkbox"
-    value="<%= blob.id %>"
-    <%= "checked" if params[:ids]&.include?(blob.id.to_s) %>
-    data-action="change->media-modal#inputChange"
-    data-media-modal-target="idCheckbox"
-    hidden>
-
-  <!-- Label -->
-  <label for="media-item-<%= blob.id %>">
-    <%= render "headmin/thumbnail", file: blob %>
-  </label>
-</div>