headmin 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b427a7de1334a6a27a66b145247d4d09379f25c446e01ff87bb17e46fb6098c6
-  data.tar.gz: bda5b5c568a4872ce1be8e2da62a10d801370967c5beffed0ff27eb12576d407
+  metadata.gz: b4995d965477ea5691025ac2ca92fb211c13acc44f1068f402e013c1ec47cb08
+  data.tar.gz: dc1f5842c477771e2b9b9890e8b99e03af6c96daf6451ce8a09628c0dded3f3a
 SHA512:
-  metadata.gz: 8b0363d0ee6aec32484806ef1e655d681127ae1318f0e391585f81d97b7cce1f28af1368c9038570a28aa0333abfafbc59dbcc65de49862f8248ff2a574edd83
-  data.tar.gz: 4aaaff3a6a1550829bd10e4af436fc6a5bc0515ff6098b1b6761e577365b5816c0bbea2d65e3c2bee1633944a10890079cdb34a263998524e1adaf45e5887df0
+  metadata.gz: 64e5f636b7551f1348e640a2dc86e2de7169aee2b6decbda14fa9da3ceea4cbff594686fc27ed4c3a59de554491498c2f6fe60feda94f318bafdef5f8066e75e
+  data.tar.gz: 05bd1380da40f154c741f1a42be39a466a1f4c4f4860b1e9e1176024e24e61d9d68940b3d62932cb9f0413561e7425842f3d2f523a76e66d4b73cc2eef701369

data/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Headmin Changelog
 
-## HEAD
+## 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
+- BREAK: Image field is now deprecated. Use the file field instead
+- BREAK: Field uses "has_many_attached :files" instead of "has_one_attache :file" now. Rename "file" to "files" in `active_storage_attachments`
+- BREAK: You need to set a File object in the fields_hash, instead of creating an intermediate Blob instance
+
+## 0.4
 - FEATURE: Introduction of a `ViewModel` class to clean up the component views. This allows for a cleaner abstraction and better testing.
 - FEATURE: New `wysiwyg` component which currently defaults to Redactor X. Redactor X will be swapped with a free open source version in the 1.0 release.
 - FEATURE: `headmin/forms/redactorx` now accepts `hybrid: true` to hide the controls
@@ -15,7 +29,7 @@
 - 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 %>

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    headmin (0.3.4)
+    headmin (0.4.2)
       closure_tree (~> 7.4)
       inline_svg (~> 1.7)
       redcarpet (~> 3.5)
@@ -10,67 +10,67 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.0.1)
-      actionpack (= 7.0.1)
-      activesupport (= 7.0.1)
+    actioncable (7.0.2.4)
+      actionpack (= 7.0.2.4)
+      activesupport (= 7.0.2.4)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.1)
-      actionpack (= 7.0.1)
-      activejob (= 7.0.1)
-      activerecord (= 7.0.1)
-      activestorage (= 7.0.1)
-      activesupport (= 7.0.1)
+    actionmailbox (7.0.2.4)
+      actionpack (= 7.0.2.4)
+      activejob (= 7.0.2.4)
+      activerecord (= 7.0.2.4)
+      activestorage (= 7.0.2.4)
+      activesupport (= 7.0.2.4)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    actionmailer (7.0.1)
-      actionpack (= 7.0.1)
-      actionview (= 7.0.1)
-      activejob (= 7.0.1)
-      activesupport (= 7.0.1)
+    actionmailer (7.0.2.4)
+      actionpack (= 7.0.2.4)
+      actionview (= 7.0.2.4)
+      activejob (= 7.0.2.4)
+      activesupport (= 7.0.2.4)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.0)
-    actionpack (7.0.1)
-      actionview (= 7.0.1)
-      activesupport (= 7.0.1)
+    actionpack (7.0.2.4)
+      actionview (= 7.0.2.4)
+      activesupport (= 7.0.2.4)
       rack (~> 2.0, >= 2.2.0)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.1)
-      actionpack (= 7.0.1)
-      activerecord (= 7.0.1)
-      activestorage (= 7.0.1)
-      activesupport (= 7.0.1)
+    actiontext (7.0.2.4)
+      actionpack (= 7.0.2.4)
+      activerecord (= 7.0.2.4)
+      activestorage (= 7.0.2.4)
+      activesupport (= 7.0.2.4)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.0.1)
-      activesupport (= 7.0.1)
+    actionview (7.0.2.4)
+      activesupport (= 7.0.2.4)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
-    activejob (7.0.1)
-      activesupport (= 7.0.1)
+    activejob (7.0.2.4)
+      activesupport (= 7.0.2.4)
       globalid (>= 0.3.6)
-    activemodel (7.0.1)
-      activesupport (= 7.0.1)
-    activerecord (7.0.1)
-      activemodel (= 7.0.1)
-      activesupport (= 7.0.1)
-    activestorage (7.0.1)
-      actionpack (= 7.0.1)
-      activejob (= 7.0.1)
-      activerecord (= 7.0.1)
-      activesupport (= 7.0.1)
+    activemodel (7.0.2.4)
+      activesupport (= 7.0.2.4)
+    activerecord (7.0.2.4)
+      activemodel (= 7.0.2.4)
+      activesupport (= 7.0.2.4)
+    activestorage (7.0.2.4)
+      actionpack (= 7.0.2.4)
+      activejob (= 7.0.2.4)
+      activerecord (= 7.0.2.4)
+      activesupport (= 7.0.2.4)
       marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (7.0.1)
+    activesupport (7.0.2.4)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -91,25 +91,24 @@ GEM
     closure_tree (7.4.0)
       activerecord (>= 4.2.10)
       with_advisory_lock (>= 4.0.0)
-    concurrent-ruby (1.1.9)
+    concurrent-ruby (1.1.10)
     crass (1.0.6)
-    debug (1.4.0)
+    debug (1.5.0)
       irb (>= 1.3.6)
       reline (>= 0.2.7)
     digest (3.1.0)
     erubi (1.10.0)
     globalid (1.0.0)
       activesupport (>= 5.0)
-    i18n (1.9.1)
+    i18n (1.10.0)
       concurrent-ruby (~> 1.0)
     inline_svg (1.8.0)
       activesupport (>= 3.0)
       nokogiri (>= 1.6)
     io-console (0.5.11)
-    io-wait (0.2.1)
     irb (1.4.1)
       reline (>= 0.3.0)
-    loofah (2.13.0)
+    loofah (2.16.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
@@ -118,7 +117,7 @@ GEM
     matrix (0.4.2)
     method_source (1.0.0)
     mini_mime (1.1.2)
-    minitest (5.14.4)
+    minitest (5.15.0)
     minitest-spec-rails (6.1.0)
       minitest (>= 5.0)
       railties (>= 4.1)
@@ -130,78 +129,77 @@ GEM
       digest
       net-protocol
       timeout
-    net-protocol (0.1.2)
-      io-wait
+    net-protocol (0.1.3)
       timeout
     net-smtp (0.3.1)
       digest
       net-protocol
       timeout
     nio4r (2.5.8)
-    nokogiri (1.13.1-arm64-darwin)
+    nokogiri (1.13.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.13.1-x86_64-darwin)
+    nokogiri (1.13.4-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.13.1-x86_64-linux)
+    nokogiri (1.13.4-x86_64-linux)
       racc (~> 1.4)
-    parallel (1.21.0)
-    parser (3.1.0.0)
+    parallel (1.22.1)
+    parser (3.1.2.0)
       ast (~> 2.4.1)
-    public_suffix (4.0.6)
+    public_suffix (4.0.7)
     racc (1.6.0)
     rack (2.2.3)
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
-    rails (7.0.1)
-      actioncable (= 7.0.1)
-      actionmailbox (= 7.0.1)
-      actionmailer (= 7.0.1)
-      actionpack (= 7.0.1)
-      actiontext (= 7.0.1)
-      actionview (= 7.0.1)
-      activejob (= 7.0.1)
-      activemodel (= 7.0.1)
-      activerecord (= 7.0.1)
-      activestorage (= 7.0.1)
-      activesupport (= 7.0.1)
+    rails (7.0.2.4)
+      actioncable (= 7.0.2.4)
+      actionmailbox (= 7.0.2.4)
+      actionmailer (= 7.0.2.4)
+      actionpack (= 7.0.2.4)
+      actiontext (= 7.0.2.4)
+      actionview (= 7.0.2.4)
+      activejob (= 7.0.2.4)
+      activemodel (= 7.0.2.4)
+      activerecord (= 7.0.2.4)
+      activestorage (= 7.0.2.4)
+      activesupport (= 7.0.2.4)
       bundler (>= 1.15.0)
-      railties (= 7.0.1)
+      railties (= 7.0.2.4)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.4.2)
       loofah (~> 2.3)
-    railties (7.0.1)
-      actionpack (= 7.0.1)
-      activesupport (= 7.0.1)
+    railties (7.0.2.4)
+      actionpack (= 7.0.2.4)
+      activesupport (= 7.0.2.4)
       method_source
       rake (>= 12.2)
       thor (~> 1.0)
       zeitwerk (~> 2.5)
     rainbow (3.1.1)
-    rake (13.0.3)
+    rake (13.0.6)
     redcarpet (3.5.1)
-    regexp_parser (2.2.0)
+    regexp_parser (2.3.1)
     reline (0.3.1)
       io-console (~> 0.5)
     rexml (3.2.5)
     rouge (3.28.0)
-    rubocop (1.25.0)
+    rubocop (1.28.2)
       parallel (~> 1.10)
       parser (>= 3.1.0.0)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 1.8, < 3.0)
       rexml
-      rubocop-ast (>= 1.15.1, < 2.0)
+      rubocop-ast (>= 1.17.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 1.4.0, < 3.0)
-    rubocop-ast (1.15.1)
-      parser (>= 3.0.1.1)
-    rubocop-performance (1.13.2)
+    rubocop-ast (1.17.0)
+      parser (>= 3.1.1.0)
+    rubocop-performance (1.13.3)
       rubocop (>= 1.7.0, < 2.0)
       rubocop-ast (>= 0.4.0)
     ruby-progressbar (1.11.0)
-    sprockets (4.0.2)
+    sprockets (4.0.3)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
     sprockets-rails (3.4.2)
@@ -209,9 +207,9 @@ GEM
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
     sqlite3 (1.4.2)
-    standard (1.7.0)
-      rubocop (= 1.25.0)
-      rubocop-performance (= 1.13.2)
+    standard (1.11.0)
+      rubocop (= 1.28.2)
+      rubocop-performance (= 1.13.3)
     strscan (3.0.1)
     thor (1.2.1)
     timeout (0.2.0)

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

@@ -1,4 +1,4 @@
-/* global fetch */
+/* global fetch, Event */
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
@@ -18,11 +18,16 @@ export default class extends Controller {
       this.show()
     })
 
-    // Typing
+    // Navigation
     this.inputTarget.addEventListener('keydown', (event) => {
       this.handleKeydown(event)
     })
 
+    // Typing
+    this.inputTarget.addEventListener('keyup', (event) => {
+      this.handleKeyup(event)
+    })
+
     // Clicked outside dropdown
     document.addEventListener('click', (event) => {
       this.handleOutsideClick(event)
@@ -30,20 +35,33 @@ export default class extends Controller {
   }
 
   handleKeydown (event) {
-    this.show()
-
     const keyCode = parseInt(event.keyCode, 10)
     if (this.isArrowKey(keyCode)) {
       this.handleArrowKey(keyCode)
-    } else if (this.isEnterKey(keyCode)) {
-      this.selectActiveItem()
-    } else {
-      this.handleTextKey()
+    }
+
+    if (this.isEnterKey(keyCode)) {
+      this.selectActiveItem(event)
     }
   }
 
-  selectActiveItem () {
-    this.activeItem().click()
+  handleKeyup (event) {
+    // Ignore arrow keys or enters
+    const keyCode = parseInt(event.keyCode, 10)
+    if (this.isArrowKey(keyCode) || this.isEnterKey(keyCode)) {
+      return false
+    }
+
+    this.handleTextKey()
+  }
+
+  selectActiveItem (event) {
+    const activeItem = this.activeItem()
+    if (activeItem) {
+      this.deselectAll()
+      this.setValue(activeItem.getAttribute('value'))
+      event.preventDefault()
+    }
   }
 
   isEnterKey (keyCode) {
@@ -51,6 +69,7 @@ export default class extends Controller {
   }
 
   handleArrowKey (keyCode) {
+    this.show()
     switch (keyCode) {
       case 38:
         this.handleArrowUp()
@@ -72,8 +91,10 @@ export default class extends Controller {
 
   selectNextItem () {
     const next = this.nextItem()
-    this.deselectAll()
-    next.classList.add('active')
+    if (next) {
+      this.deselectAll()
+      next.classList.add('active')
+    }
   }
 
   nextItem () {
@@ -94,8 +115,10 @@ export default class extends Controller {
 
   selectPreviousItem () {
     const previous = this.previousItem()
-    this.deselectAll()
-    previous.classList.add('active')
+    if (previous) {
+      this.deselectAll()
+      previous.classList.add('active')
+    }
   }
 
   previousItem () {
@@ -160,13 +183,22 @@ export default class extends Controller {
       // 2. render html
       this.renderCollection(html)
     }).then(() => {
-      // 3. sort by relevance
-      // ...
-      // 4. Highlight
+      // 3. Highlight
       this.highlight()
+    }).then(() => {
+      // 4. Preselect first result
+      this.activateFirstItem()
+    }).then(() => {
+      // 5. Show results
+      this.show()
     })
   }
 
+  activateFirstItem () {
+    this.deselectAll()
+    this.firstItem().classList.add('active')
+  }
+
   show () {
     if (this.isDropdownEmpty()) {
       this.dropdownTarget.classList.remove('d-none')
@@ -190,7 +222,7 @@ export default class extends Controller {
 
   fetchCollection () {
     if (this.isRemote()) {
-      return fetch(this.urlValue).then((response) => {
+      return fetch(this.remoteURL()).then((response) => {
         return response.text()
       }).catch((error) => {
         console.error('The URL you provided for the autocomplete collection didn\'t return a successful result', error)
@@ -200,6 +232,29 @@ export default class extends Controller {
     }
   }
 
+  remoteURL () {
+    // Set dummy base in case a relative path is provided as remote URL
+    const base = 'https://example.com'
+    const url = new URL(this.urlValue, base)
+
+    // Update pagination params
+    const params = new URLSearchParams(url.search)
+    params.set('search', this.value())
+    params.set('page', '1')
+    params.set('per_page', '6')
+    url.search = params.toString()
+
+    // Convert to string
+    let urlString = url.toString()
+
+    // Convert back to relative url if needed
+    if (urlString.includes(base)) {
+      urlString = urlString.replace(base, '')
+    }
+
+    return urlString
+  }
+
   renderCollection (html) {
     this.dropdownTarget.innerHTML = html
   }
@@ -217,15 +272,23 @@ export default class extends Controller {
       text = text.replace(/<mark.*?>(.*?)<\/mark>/ig, '$1')
 
       // Highlight query
-      const regex2 = new RegExp(`(${query})`, 'gi')
-      text = text.replace(regex2, '<mark>$1</mark>')
+      if (query && query.length > 0) {
+        // Ignore all strings inside < >
+        const regex2 = new RegExp(`(?<!<[^>]*?)(&nbsp;)?(${query})`, 'gi')
+        text = text.replace(regex2, '<mark>$2</mark>')
+      }
 
       dropdownItem.innerHTML = text
     })
   }
 
   select (event) {
-    this.inputTarget.value = event.target.getAttribute('value')
+    this.setValue(event.currentTarget.getAttribute('value'))
+  }
+
+  setValue (value) {
+    this.inputTarget.value = value
+    this.inputTarget.dispatchEvent(new Event('change'))
     this.hide()
   }
 

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')
+  }
+}