headmin 0.4.2 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2df34e0f6abc35cd855cab3059a40f7716b336df77abdbd4ea9609fc3cf6e5e
-  data.tar.gz: 2c2c5953560f608e6d479bcb7de506ce8da701be8d56b5fbf72cfcaf3a9478ad
+  metadata.gz: b4995d965477ea5691025ac2ca92fb211c13acc44f1068f402e013c1ec47cb08
+  data.tar.gz: dc1f5842c477771e2b9b9890e8b99e03af6c96daf6451ce8a09628c0dded3f3a
 SHA512:
-  metadata.gz: 17a7d48956fb48e286cd0fd2ac043741256c2e573ffb024cc4ae7fffb2e39c54d4db380efb4308f6816649f43e3fde68fabda7d104211cbcdf8f387d6c7d384b
-  data.tar.gz: 33afd17085196473000927125f9186e5b5703575373cdee9be982e6ca32db31ce09aef1fdf3ebf65b2efb9e31b16595fb6b5076ea65e7872f2ecaf49f260ea12
+  metadata.gz: 64e5f636b7551f1348e640a2dc86e2de7169aee2b6decbda14fa9da3ceea4cbff594686fc27ed4c3a59de554491498c2f6fe60feda94f318bafdef5f8066e75e
+  data.tar.gz: 05bd1380da40f154c741f1a42be39a466a1f4c4f4860b1e9e1176024e24e61d9d68940b3d62932cb9f0413561e7425842f3d2f523a76e66d4b73cc2eef701369

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,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.4.1)
+    headmin (0.4.2)
       closure_tree (~> 7.4)
       inline_svg (~> 1.7)
       redcarpet (~> 3.5)

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/popup_controller.js

@@ -19,6 +19,9 @@ export default class extends Controller {
   }
 
   handleOutsideClick (event) {
+    const itemRemoved = !document.body.contains(event.target) // Ignore items that were removed from DOM (else this triggers a close)
+    if (itemRemoved) return
+
     const inPopup = event.target.closest('[data-popup-target="popup"]') !== null
     const inButton = event.target.closest('[data-popup-target="button"]') !== null
     const openPopup = document.querySelector('[data-popup-target="popup"]:not(.closed)')
@@ -53,7 +56,6 @@ export default class extends Controller {
   close (event) {
     const button = event.target.closest('[data-popup-target="button"]')
     const popup = this.popupById(button.dataset.popupId)
-
     this.closePopup(popup)
   }
 

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

@@ -2,12 +2,12 @@ import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
   static get targets () {
-    return ['wrapper', 'form', 'select', 'method', 'button', 'idInputTemplate', 'id', 'counter']
+    return ['wrapper', 'form', 'select', 'method', 'button', 'idInput', 'counter']
   }
 
   connect () {
     this.wrapperTarget.addEventListener('idSelectionChanged', (event) => {
-      this.updateIdFields(event.detail.ids)
+      this.updateIdInput(event.detail.ids)
       this.updateCounter(event.detail.count)
       this.toggleCounter(event.detail.count)
     })
@@ -21,17 +21,24 @@ export default class extends Controller {
     this.enableButton()
   }
 
-  updateIdFields (ids) {
-    this.removeIds()
-    if (ids instanceof Array) {
-      ids.forEach((id) => {
-        this.addId(id)
-      })
+  updateIdInput (ids) {
+    if (ids == null) {
+      this.disableIdInput()
+      this.idInputTarget.value = ''
     } else {
-      this.addId('')
+      this.enableIdInput()
+      this.idInputTarget.value = `in:${ids.join(',')}`
     }
   }
 
+  disableIdInput () {
+    this.idInputTarget.removeAttribute('name')
+  }
+
+  enableIdInput () {
+    this.idInputTarget.setAttribute('name', 'id')
+  }
+
   updateCounter (count) {
     let htmlString = ''
     switch (count) {
@@ -94,16 +101,4 @@ export default class extends Controller {
   enableButton () {
     this.buttonTarget.removeAttribute('disabled')
   }
-
-  addId (id) {
-    const template = this.idInputTemplateTarget
-    const input = template.innerHTML.replace(/ID/g, id)
-    this.formTarget.insertAdjacentHTML('afterbegin', input)
-  }
-
-  removeIds () {
-    this.idTargets.forEach((input) => {
-      this.formTarget.removeChild(input)
-    })
-  }
 }

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

@@ -6,6 +6,7 @@ import DateRangeController from './controllers/date_range_controller'
 import DropzoneController from './controllers/dropzone_controller'
 import FilePreviewController from './controllers/file_preview_controller'
 import FilterController from './controllers/filter_controller'
+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'
@@ -26,6 +27,7 @@ export class Headmin {
     Stimulus.register('dropzone', DropzoneController)
     Stimulus.register('file-preview', FilePreviewController)
     Stimulus.register('filter', FilterController)
+    Stimulus.register('filter-row', FilterRowController)
     Stimulus.register('filters', FiltersController)
     Stimulus.register('flatpickr', FlatpickrController)
     Stimulus.register('hello', HelloController)

data/app/assets/javascripts/headmin.js

@@ -7457,9 +7457,6 @@ var blocks_controller_default = class extends Controller {
 
 // app/assets/javascripts/headmin/controllers/date_range_controller.js
 var date_range_controller_default = class extends Controller {
-  static get targets() {
-    return ["dateInput", "startDateInput", "endDateInput"];
-  }
   update(event) {
     const flatpickr2 = event.target._flatpickr;
     const startDate = flatpickr2.selectedDates[0];
@@ -7468,10 +7465,18 @@ var date_range_controller_default = class extends Controller {
     this.setEndDateInputValue(this.formatDate(endDate));
   }
   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) {
     if (date instanceof Date) {
@@ -7704,18 +7709,16 @@ var file_preview_controller_default = class extends Controller {
 // app/assets/javascripts/headmin/controllers/filter_controller.js
 var filter_controller_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
+    };
   }
   connect() {
     this.element.controller = this;
-    document.addEventListener("click", (event) => {
-      this.handleOutsideClick(event);
-    });
-  }
-  handleOutsideClick(event) {
-    if (!this.isClickedInside(event)) {
-      this.close();
-    }
+    this.updateHiddenValue();
   }
   toggle(event) {
     const expanded = this.buttonTarget.getAttribute("aria-expanded") === "true";
@@ -7733,6 +7736,29 @@ var filter_controller_default = class extends Controller {
     this.buttonTarget.setAttribute("aria-expanded", "false");
     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"]');
+    const conditional = inputGroup.previousElementSibling != null ? inputGroup.previousElementSibling : inputGroup.nextElementSibling;
+    inputGroup.remove();
+    if (conditional != null)
+      conditional.remove();
+    this.updateHiddenValue();
+    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;
@@ -7742,6 +7768,65 @@ var filter_controller_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;
+  }
+};
+
+// app/assets/javascripts/headmin/controllers/filter_row_controller.js
+var filter_row_controller_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");
+  }
 };
 
 // app/assets/javascripts/headmin/controllers/filters_controller.js
@@ -9975,15 +10060,12 @@ var i18n_default = class {
 
 // app/assets/javascripts/headmin/controllers/flatpickr_controller.js
 var flatpickr_controller_default = class extends Controller {
-  static get targets() {
-    return ["input"];
-  }
   connect() {
     const options = { ...this.defaultOptions(), ...this.options() };
-    esm_default(this.inputTarget, options);
+    esm_default(this.element, options);
   }
   options() {
-    return JSON.parse(this.inputTarget.getAttribute("data-flatpickr"));
+    return JSON.parse(this.element.getAttribute("data-flatpickr"));
   }
   defaultOptions() {
     return {
@@ -15081,6 +15163,9 @@ var popup_controller_default = class extends Controller {
     });
   }
   handleOutsideClick(event) {
+    const itemRemoved = !document.body.contains(event.target);
+    if (itemRemoved)
+      return;
     const inPopup = event.target.closest('[data-popup-target="popup"]') !== null;
     const inButton = event.target.closest('[data-popup-target="button"]') !== null;
     const openPopup = document.querySelector('[data-popup-target="popup"]:not(.closed)');
@@ -15305,11 +15390,11 @@ var select_controller_default = class extends Controller {
 // app/assets/javascripts/headmin/controllers/table_actions_controller.js
 var table_actions_controller_default = class extends Controller {
   static get targets() {
-    return ["wrapper", "form", "select", "method", "button", "idInputTemplate", "id", "counter"];
+    return ["wrapper", "form", "select", "method", "button", "idInput", "counter"];
   }
   connect() {
     this.wrapperTarget.addEventListener("idSelectionChanged", (event) => {
-      this.updateIdFields(event.detail.ids);
+      this.updateIdInput(event.detail.ids);
       this.updateCounter(event.detail.count);
       this.toggleCounter(event.detail.count);
     });
@@ -15321,16 +15406,21 @@ var table_actions_controller_default = class extends Controller {
     this.updateFormDataAttributes();
     this.enableButton();
   }
-  updateIdFields(ids) {
-    this.removeIds();
-    if (ids instanceof Array) {
-      ids.forEach((id) => {
-        this.addId(id);
-      });
+  updateIdInput(ids) {
+    if (ids == null) {
+      this.disableIdInput();
+      this.idInputTarget.value = "";
     } else {
-      this.addId("");
+      this.enableIdInput();
+      this.idInputTarget.value = `in:${ids.join(",")}`;
     }
   }
+  disableIdInput() {
+    this.idInputTarget.removeAttribute("name");
+  }
+  enableIdInput() {
+    this.idInputTarget.setAttribute("name", "id");
+  }
   updateCounter(count) {
     let htmlString = "";
     switch (count) {
@@ -15385,16 +15475,6 @@ var table_actions_controller_default = class extends Controller {
   enableButton() {
     this.buttonTarget.removeAttribute("disabled");
   }
-  addId(id) {
-    const template = this.idInputTemplateTarget;
-    const input = template.innerHTML.replace(/ID/g, id);
-    this.formTarget.insertAdjacentHTML("afterbegin", input);
-  }
-  removeIds() {
-    this.idTargets.forEach((input) => {
-      this.formTarget.removeChild(input);
-    });
-  }
 };
 
 // app/assets/javascripts/headmin/controllers/table_controller.js
@@ -15510,6 +15590,7 @@ var Headmin = class {
     Stimulus.register("dropzone", dropzone_controller_default);
     Stimulus.register("file-preview", file_preview_controller_default);
     Stimulus.register("filter", filter_controller_default);
+    Stimulus.register("filter-row", filter_row_controller_default);
     Stimulus.register("filters", filters_controller_default);
     Stimulus.register("flatpickr", flatpickr_controller_default);
     Stimulus.register("hello", hello_controller_default);

data/app/assets/stylesheets/headmin/filter.scss

@@ -23,11 +23,85 @@
   }
 }
 
+.h-filter-row {
+  padding: 0.5rem 0 0.5rem 0;
+  position: relative;
+  flex-wrap: unset;
+  display: flex;
+  gap: 10px;
+
+  &:first-child {
+    padding-top: 0
+  }
+
+  &:hover {
+    .h-filter-add-input, .h-filter-remove-input {
+      display: block;
+    }
+  }
+
+  input, select:not(.h-filter-operator) {
+    min-width: 200px;
+  }
+}
+
+.h-filter-operator {
+  width: 62px;
+}
+
+.h-filter-conditional {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  select {
+    width: 50px;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: calc(50% - 1px);
+    left: 0;
+    width: calc(50% - 35px);
+    height: 1px;
+    background: $popover-border-color;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: calc(50% - 1px);
+    left: calc(50% + 35px);
+    width: calc(50% - 35px);
+    height: 1px;
+    background: $popover-border-color;
+  }
+}
+
 .h-filter-remove {
   border-left: 1px solid $gray-300;
   padding-left: 8px;
   margin-left: 2px;
+
   i::before {
     font-size: 0.8em;
   }
+}
+
+.h-filter-add-input {
+  position: absolute !important;
+  top: calc(100% - 12px);
+  left: calc(50% - 17px);
+  z-index: 9;
+  display: none;
+}
+
+.h-filter-remove-input {
+  position: absolute !important;
+  top: calc(50% - 15px);
+  left: calc(100% - 4px);
+  z-index: 9;
+  display: none;
 }

data/app/assets/stylesheets/headmin/general.scss

@@ -1,6 +1,5 @@
 html {
   height: 100%;
-  background: red;
 }
 
 .list-group-item {