headmin 0.4.2 → 0.5.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2df34e0f6abc35cd855cab3059a40f7716b336df77abdbd4ea9609fc3cf6e5e
-  data.tar.gz: 2c2c5953560f608e6d479bcb7de506ce8da701be8d56b5fbf72cfcaf3a9478ad
+  metadata.gz: f50bfc69af544486c0d0bc963a61dc0eb489b4522fb17454c4371238e12afbc5
+  data.tar.gz: 75b003602ff5c8b67db4c23eb84010d6417d008b36a979acfe6f5c06f46bda5c
 SHA512:
-  metadata.gz: 17a7d48956fb48e286cd0fd2ac043741256c2e573ffb024cc4ae7fffb2e39c54d4db380efb4308f6816649f43e3fde68fabda7d104211cbcdf8f387d6c7d384b
-  data.tar.gz: 33afd17085196473000927125f9186e5b5703575373cdee9be982e6ca32db31ce09aef1fdf3ebf65b2efb9e31b16595fb6b5076ea65e7872f2ecaf49f260ea12
+  metadata.gz: 227586c0581a6e7aaab79975b7ff5f7484a46af5e9e5f05e336234aa748e63eba6d1afddbf19d5f1a4cd4bbb77e9901a5ef24dae10681a3e89ecd9765572c60a
+  data.tar.gz: 016e43a680a555f38905eea53dc44c76f1286606ae99401979ca71a76e7b3c4a8eb0f61286f843a12d5bcb74708d61e2fa363c86de02463fbe845efd1ac0f34b

data/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Headmin Changelog
 
+## 0.5
+- FEATURE: Filters now have support for operators and conditionals 
+- BREAK: `headmin/filters` now return a form object that is required for each individual form
+- DEPRECATED: `Headmin::Searchable` is replaced with `Headmin::Filterable`. 
+  - A `filter(params, types)` method is available and accepts an optional types argument.
+  - The `search()` method is now deprecated and no longer required
+
 ## 0.4.2
 - FEATURE: New field type "files" to allow simple gallery creation
 - FIX: Fields hash with duplicate keys no longer mix up
@@ -22,13 +29,13 @@
 - BREAK: `headmin/forms/actions` and all of its child components have been removed
 - BREAK: `$font-weight-medium` has been removed from headmin overrides variables. We don't want to introduce new variable names that look like they are part of Bootstrap.
 - BREAK: `headmin/forms/date_range` has a different way of setting attribute specific values. We now have a `:start` and `:end` attribute that accept all possible input options for their respective inputs. Both have a required `:attribute` parameter now.
-
+- BREAK: filter concern (controllers) has been renamed to filterable
 ```erb
 # Old
-<%= render "headmin/forms/date_range", form: form, start_attribute: :start_date, end_attribute: :end_date %>
+<%= render 'headmin/forms/date_range', form: form, start_attribute: :start_date, end_attribute: :end_date %>
 
 # New
-<%= render "headmin/forms/date_range", form: form, start: {attribute: :start_date}, end: {attribute: :end_date} %>
+<%= render 'headmin/forms/date_range', form: form, start: {attribute: :start_date}, end: {attribute: :end_date} %>
 ```
 
 ## 0.3

data/Gemfile

@@ -6,9 +6,23 @@ gemspec
 gem "capybara", ">= 3.26"
 gem "minitest", "~> 5.0"
 gem "minitest-spec-rails", "~> 6.1"
+gem "puma", "~> 5.2"
 gem "rails", "~> 7.0"
 gem "rake", "~> 13.0"
 gem "sprockets-rails", "~> 3.4"
 gem "sqlite3", "~> 1.4"
 gem "standard", "~> 1.7"
 gem "debug"
+
+# Dummy app
+gem "devise", "~> 4.8"
+gem "enumerize", "~> 2.3"
+gem "sassc-rails", "~> 2.1"
+gem "image_processing", "~> 1.2"
+gem "inline_svg", "~> 1.7"
+gem "kaminari", "~> 1.2"
+gem "route_translator", "~> 12.0"
+gem "acts_as_list", "~> 1.0"
+gem "breadcrumbs_on_rails", "~> 4.1"
+gem "importmap-rails", "~> 1.0"
+gem "hotwire-rails", "~> 0.1"

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    headmin (0.4.1)
+    headmin (0.5.1)
       closure_tree (~> 7.4)
       inline_svg (~> 1.7)
       redcarpet (~> 3.5)
@@ -75,9 +75,14 @@ GEM
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
+    acts_as_list (1.0.4)
+      activerecord (>= 4.2)
     addressable (2.8.0)
       public_suffix (>= 2.0.2, < 5.0)
     ast (2.4.2)
+    bcrypt (3.1.18)
+    breadcrumbs_on_rails (4.1.0)
+      railties (>= 5.0)
     builder (3.2.4)
     capybara (3.36.0)
       addressable
@@ -96,18 +101,49 @@ GEM
     debug (1.5.0)
       irb (>= 1.3.6)
       reline (>= 0.2.7)
+    devise (4.8.1)
+      bcrypt (~> 3.0)
+      orm_adapter (~> 0.1)
+      railties (>= 4.1.0)
+      responders
+      warden (~> 1.2.3)
     digest (3.1.0)
+    enumerize (2.5.0)
+      activesupport (>= 3.2)
     erubi (1.10.0)
+    ffi (1.15.5)
     globalid (1.0.0)
       activesupport (>= 5.0)
+    hotwire-rails (0.1.3)
+      rails (>= 6.0.0)
+      stimulus-rails
+      turbo-rails
     i18n (1.10.0)
       concurrent-ruby (~> 1.0)
+    image_processing (1.12.2)
+      mini_magick (>= 4.9.5, < 5)
+      ruby-vips (>= 2.0.17, < 3)
+    importmap-rails (1.0.3)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
     inline_svg (1.8.0)
       activesupport (>= 3.0)
       nokogiri (>= 1.6)
     io-console (0.5.11)
     irb (1.4.1)
       reline (>= 0.3.0)
+    kaminari (1.2.2)
+      activesupport (>= 4.1.0)
+      kaminari-actionview (= 1.2.2)
+      kaminari-activerecord (= 1.2.2)
+      kaminari-core (= 1.2.2)
+    kaminari-actionview (1.2.2)
+      actionview
+      kaminari-core (= 1.2.2)
+    kaminari-activerecord (1.2.2)
+      activerecord
+      kaminari-core (= 1.2.2)
+    kaminari-core (1.2.2)
     loofah (2.16.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
@@ -116,6 +152,7 @@ GEM
     marcel (1.0.2)
     matrix (0.4.2)
     method_source (1.0.0)
+    mini_magick (4.11.0)
     mini_mime (1.1.2)
     minitest (5.15.0)
     minitest-spec-rails (6.1.0)
@@ -142,10 +179,13 @@ GEM
       racc (~> 1.4)
     nokogiri (1.13.4-x86_64-linux)
       racc (~> 1.4)
+    orm_adapter (0.5.0)
     parallel (1.22.1)
     parser (3.1.2.0)
       ast (~> 2.4.1)
     public_suffix (4.0.7)
+    puma (5.6.4)
+      nio4r (~> 2.0)
     racc (1.6.0)
     rack (2.2.3)
     rack-test (1.1.0)
@@ -182,8 +222,15 @@ GEM
     regexp_parser (2.3.1)
     reline (0.3.1)
       io-console (~> 0.5)
+    responders (3.0.1)
+      actionpack (>= 5.0)
+      railties (>= 5.0)
     rexml (3.2.5)
     rouge (3.28.0)
+    route_translator (12.1.0)
+      actionpack (>= 5.2, < 7.1)
+      activesupport (>= 5.2, < 7.1)
+      addressable (~> 2.7)
     rubocop (1.28.2)
       parallel (~> 1.10)
       parser (>= 3.1.0.0)
@@ -199,6 +246,16 @@ GEM
       rubocop (>= 1.7.0, < 2.0)
       rubocop-ast (>= 0.4.0)
     ruby-progressbar (1.11.0)
+    ruby-vips (2.1.4)
+      ffi (~> 1.12)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    sassc-rails (2.1.2)
+      railties (>= 4.0.0)
+      sassc (>= 2.0)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
     sprockets (4.0.3)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
@@ -210,12 +267,20 @@ GEM
     standard (1.11.0)
       rubocop (= 1.28.2)
       rubocop-performance (= 1.13.3)
+    stimulus-rails (1.0.4)
+      railties (>= 6.0.0)
     strscan (3.0.1)
     thor (1.2.1)
+    tilt (2.0.10)
     timeout (0.2.0)
+    turbo-rails (1.0.1)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.1.0)
+    warden (1.2.9)
+      rack (>= 2.0.9)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -231,13 +296,25 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
+  acts_as_list (~> 1.0)
+  breadcrumbs_on_rails (~> 4.1)
   capybara (>= 3.26)
   debug
+  devise (~> 4.8)
+  enumerize (~> 2.3)
   headmin!
+  hotwire-rails (~> 0.1)
+  image_processing (~> 1.2)
+  importmap-rails (~> 1.0)
+  inline_svg (~> 1.7)
+  kaminari (~> 1.2)
   minitest (~> 5.0)
   minitest-spec-rails (~> 6.1)
+  puma (~> 5.2)
   rails (~> 7.0)
   rake (~> 13.0)
+  route_translator (~> 12.0)
+  sassc-rails (~> 2.1)
   sprockets-rails (~> 3.4)
   sqlite3 (~> 1.4)
   standard (~> 1.7)

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

@@ -1,10 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static get targets () {
-    return ['dateInput', 'startDateInput', 'endDateInput']
-  }
-
   update (event) {
     const flatpickr = event.target._flatpickr
     const startDate = flatpickr.selectedDates[0]
@@ -15,11 +11,21 @@ export default class extends Controller {
   }
 
   setStartDateInputValue (value) {
-    this.startDateInputTarget.value = value
+    const startDateInput = this.startDateInput()
+    startDateInput.value = value
   }
 
   setEndDateInputValue (value) {
-    this.endDateInputTarget.value = value
+    const endDateInput = this.endDateInput()
+    endDateInput.value = value
+  }
+
+  startDateInput () {
+    return this.element.nextElementSibling
+  }
+
+  endDateInput () {
+    return this.startDateInput().nextElementSibling
   }
 
   formatDate (date) {

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

@@ -2,7 +2,13 @@ import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
   static get targets () {
-    return ['button', 'popup']
+    return ['button', 'popup', 'conditional', 'operator', 'value', 'hidden', 'wrapper', 'template', 'row']
+  }
+
+  static get values () {
+    return {
+      name: String
+    }
   }
 
   // Attaches controller logic to the element itself
@@ -10,16 +16,7 @@ export default class extends Controller {
   connect () {
     this.element.controller = this
 
-    // Clicked outside popup
-    document.addEventListener('click', (event) => {
-      this.handleOutsideClick(event)
-    })
-  }
-
-  handleOutsideClick (event) {
-    if (!this.isClickedInside(event)) {
-      this.close()
-    }
+    this.updateHiddenValue()
   }
 
   toggle (event) {
@@ -41,6 +38,38 @@ export default class extends Controller {
     this.popupTarget.classList.add('closed')
   }
 
+  add (event) {
+    event.preventDefault()
+    const html = this.getTemplateHTML()
+    this.wrapperTarget.insertAdjacentHTML('beforeend', html)
+  }
+
+  remove (event) {
+    event.preventDefault()
+    const inputGroup = event.currentTarget.closest('[data-filter-target="row"]')
+    // Check if there is a previous element (the conditional select). If no element (first inputGroup), take the next element.
+    const conditional = inputGroup.previousElementSibling != null ? inputGroup.previousElementSibling : inputGroup.nextElementSibling
+
+    inputGroup.remove()
+    // If there is only one inputGroup, the conditional is null, so do not attempt to remove it
+    if (conditional != null) conditional.remove()
+
+    // After we remove the UI, run update to also remove filter from the hidden input
+    this.updateHiddenValue()
+
+    // Check if there are still inputs left, else remove filter
+    if (this.valueTargets.length === 0) {
+      this.removeFilter()
+    }
+  }
+
+  removeFilter () {
+    const form = this.buttonTarget.closest('form')
+    this.buttonTarget.remove()
+    this.popupTarget.remove()
+    form.submit()
+  }
+
   isClickedInside (event) {
     if (!event) {
       return false
@@ -50,4 +79,25 @@ export default class extends Controller {
     const inAddButton = event.target.dataset.action === 'click->filters#add'
     return (inPopup || inButton || inAddButton)
   }
+
+  updateHiddenValue () {
+    this.hiddenTarget.value = this.buildInstructionString()
+  }
+
+  buildInstructionString () {
+    let string = ''
+    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
+      string += `${conditional || ''}${operator}:${value}`
+    }
+
+    return string
+  }
+
+  getTemplateHTML () {
+    const template = this.templateTarget
+    return template.innerHTML
+  }
 }

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

@@ -0,0 +1,50 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static get targets () {
+    return ['original', 'operator', 'null']
+  }
+
+  connect () {
+    this.operatorTarget.addEventListener('change', () => this.handleOperatorChange())
+    this.handleOperatorChange()
+  }
+
+  handleOperatorChange () {
+    if (this.operatorTarget.value === 'is_null' || this.operatorTarget.value === 'is_not_null') {
+      this.toggleNullInput()
+    } else {
+      this.toggleOriginalInput()
+    }
+  }
+
+  toggleNullInput () {
+    this.hideOriginal()
+    this.showNull()
+  }
+
+  toggleOriginalInput () {
+    this.showOriginal()
+    this.hideNull()
+  }
+
+  hideOriginal () {
+    this.originalTarget.style.display = 'none'
+    this.originalTarget.setAttribute('data-filter-target', 'value_original')
+  }
+
+  showOriginal () {
+    this.originalTarget.style.display = 'block'
+    this.originalTarget.setAttribute('data-filter-target', 'value')
+  }
+
+  hideNull () {
+    this.nullTarget.style.display = 'none'
+    this.nullTarget.setAttribute('data-filter-target', 'value_null')
+  }
+
+  showNull () {
+    this.nullTarget.style.display = 'block'
+    this.nullTarget.setAttribute('data-filter-target', 'value')
+  }
+}

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

@@ -4,17 +4,13 @@ import { Dutch } from 'flatpickr/dist/esm/l10n/nl.js'
 import I18n from '../config/i18n'
 
 export default class extends Controller {
-  static get targets () {
-    return ['input']
-  }
-
   connect () {
     const options = { ...this.defaultOptions(), ...this.options() }
-    flatpickr(this.inputTarget, options)
+    flatpickr(this.element, options)
   }
 
   options () {
-    return JSON.parse(this.inputTarget.getAttribute('data-flatpickr'))
+    return JSON.parse(this.element.getAttribute('data-flatpickr'))
   }
 
   defaultOptions () {

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

@@ -0,0 +1,237 @@
+import { Controller } from '@hotwired/stimulus'
+import Sortable from 'sortablejs'
+
+export default class extends Controller {
+  static get targets () {
+    return ['item', 'template', 'thumbnails', 'modalButton', 'placeholder', 'validationInput', 'count', 'editButton']
+  }
+
+  connect () {
+    document.addEventListener('mediaSelectionSubmitted', (event) => {
+      if (event.detail.name === this.element.dataset.name) {
+        this.selectItems(event.detail.items)
+      }
+    })
+
+    // Init sorting
+    if(this.hasSorting()) {
+      this.initSortable()
+    }
+
+    this.validate()
+  }
+
+  // Actions
+  destroy (event) {
+    const item = event.currentTarget.closest('[data-media-target=\'item\']')
+    this.destroyItem(item)
+  }
+
+  syncIds () {
+    const ids = this.activeIds()
+
+    this.modalButtonTargets.forEach((button) => {
+      const url = new URL(button.getAttribute('href'))
+
+      // Remove all ids[]
+      url.searchParams.delete('ids[]')
+
+      // Add new ids
+      ids.forEach((id) => {
+        url.searchParams.append('ids[]', id)
+      })
+
+      button.setAttribute('href', url.toString())
+    })
+  }
+
+  // Methods
+  initSortable() {
+    Sortable.create(this.thumbnailsTarget, {
+      handle: '.media-drag-sort-handle',
+      onEnd: (event) => {
+        this.resetPositions()
+      }
+    })
+  }
+
+  hasSorting() {
+    return this.element.dataset.sort === "true"
+  }
+
+  destroyItem (item) {
+    this.removeItem(item)
+    this.postProcess()
+  }
+
+  selectItems (items) {
+    // Destroy all deselected items
+    this.removeAllItems()
+
+    // Add all selected items
+    this.addItems(items)
+
+    this.postProcess()
+  }
+
+  postProcess () {
+    // Reset positions
+    this.resetPositions()
+
+    // Sync Ids
+    this.syncIds()
+
+    // Toggle placeholder
+    this.togglePlaceholder()
+
+    // Validate
+    this.validate()
+  }
+
+  validate () {
+    this.clearValidation()
+    if (this.element.dataset.required === "0") return
+    this.validateMinimum()
+    this.validateMaximum()
+  }
+
+  clearValidation () {
+    this.validationInputTarget.setCustomValidity('')
+  }
+
+  validateMinimum () {
+    const count = this.activeItems().length
+    if (count < this.minActiveItems()) {
+      this.validationInputTarget.setCustomValidity(this.validationInputTarget.dataset.minMessage)
+    }
+  }
+
+  validateMaximum () {
+    const count = this.activeItems().length
+    if (count > this.maxActiveItems()) {
+      this.validationInputTarget.setCustomValidity(this.validationInputTarget.dataset.maxMessage)
+    }
+  }
+
+  minActiveItems () {
+    return parseInt(this.element.dataset.min, 10) || 0
+  }
+
+  maxActiveItems () {
+    return parseInt(this.element.dataset.max, 10) || Infinity
+  }
+
+  resetPositions () {
+    this.activeItems().forEach((item, index) => {
+      const positionInput = item.querySelector('input[name*=\'position\']')
+      if (positionInput) {
+        positionInput.value = index
+      }
+    })
+  }
+
+  addItems (items) {
+    items.forEach((item) => this.addItem(item))
+  }
+
+  addItem (item) {
+    const currentItem = this.itemByBlobId(item.blobId)
+    if (currentItem) {
+      // (re-)enable if already exists
+      this.enableItem(currentItem)
+    } else {
+      // Create if item doesn't exist yet
+      this.createItem(item)
+    }
+  }
+
+  togglePlaceholder () {
+    if (this.activeItems().length > 0) {
+      this.hidePlaceholder()
+    } else {
+      this.showPlaceholder()
+    }
+  }
+
+  showPlaceholder () {
+    this.placeholderTarget.classList.remove('d-none')
+  }
+
+  hidePlaceholder () {
+    this.placeholderTarget.classList.add('d-none')
+  }
+
+  enableItem (item) {
+    item.querySelector(`input[name*='_destroy']`).value = false
+    item.classList.remove('d-none')
+  }
+
+  createItem (item) {
+    // Copy template
+    const template = this.templateTarget
+    const html = this.randomizeIds(template)
+    this.thumbnailsTarget.insertAdjacentHTML('beforeend', html)
+
+    // Set new values
+    const newItem = this.itemTargets.pop()
+    newItem.querySelector(`input[name*="[blob_id]"]`).value = item.blobId
+    newItem.querySelector(`input[name*="[_destroy]"]`).value = false
+
+    // Update edit button url
+    const editButton = newItem.querySelector(`[data-media-target="editButton"]`)
+    editButton.setAttribute('href', editButton.getAttribute('href').replace('$1', item.blobId))
+
+    // Copy thumbnail
+    const oldThumbnail = newItem.querySelector('.h-thumbnail')
+    const newThumbnail = item.thumbnail.cloneNode(true)
+    oldThumbnail.parentNode.replaceChild(newThumbnail, oldThumbnail)
+  }
+
+  randomizeIds (template) {
+    const regex = new RegExp(template.dataset.templateIdRegex, 'g')
+    const randomNumber = Math.floor(100000000 + Math.random() * 900000000)
+    return template.innerHTML.replace(regex, randomNumber)
+  }
+
+  removeAllItems () {
+    this.removeItems(this.itemTargets)
+  }
+
+  removeItems (items) {
+    items.forEach((item) => {
+      this.removeItem(item)
+    })
+  }
+
+  removeItem (item) {
+    item.querySelector(`input[name*='_destroy']`).value = 1
+    item.classList.add('d-none')
+
+    // Reset positions
+    this.resetPositions()
+
+    // Sync ids
+    this.syncIds()
+
+    // Toggle placeholder
+    this.togglePlaceholder()
+  }
+
+  itemByBlobId (blobId) {
+    return this.itemTargets.find((item) => {
+      return item.querySelector(`input[name*='blob_id']`).value === blobId
+    })
+  }
+
+  activeItems () {
+    return this.itemTargets.filter((item) => {
+      return item.querySelector(`input[name$='[_destroy]']`).value === 'false'
+    })
+  }
+
+  activeIds () {
+    return this.activeItems().map((item) => {
+      return item.querySelector(`input[name$='[blob_id]']`).value
+    })
+  }
+}