headmin 0.4.0 → 0.5.0

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

@@ -1,3 +1,4 @@
+/* global HTMLInputElement */
 import { Controller } from '@hotwired/stimulus'
 import { createPopper } from '@popperjs/core'
 
@@ -18,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)')
@@ -32,21 +36,26 @@ export default class extends Controller {
     const popup = this.popupById(button.dataset.popupId)
     const passThru = button.dataset.popupPassThru
 
+    // Open the popup
+    createPopper(button, popup)
+    this.openPopup(popup)
+
     if (passThru) {
       // Pass click event to an element inside the popup
       const passThruElement = popup.querySelector(passThru)
       passThruElement.click()
-    } else {
-      // Open the popup
-      createPopper(button, popup)
-      this.openPopup(popup)
+
+      // Focus and select value if it's an input element
+      if (passThruElement instanceof HTMLInputElement) {
+        passThruElement.focus()
+        passThruElement.select()
+      }
     }
   }
 
   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

@@ -4979,28 +4979,42 @@ var autocomplete_controller_default = class extends Controller {
     this.inputTarget.addEventListener("keydown", (event) => {
       this.handleKeydown(event);
     });
+    this.inputTarget.addEventListener("keyup", (event) => {
+      this.handleKeyup(event);
+    });
     document.addEventListener("click", (event) => {
       this.handleOutsideClick(event);
     });
   }
   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);
+    }
+  }
+  handleKeyup(event) {
+    const keyCode = parseInt(event.keyCode, 10);
+    if (this.isArrowKey(keyCode) || this.isEnterKey(keyCode)) {
+      return false;
+    }
+    this.handleTextKey();
   }
-  selectActiveItem() {
-    this.activeItem().click();
+  selectActiveItem(event) {
+    const activeItem = this.activeItem();
+    if (activeItem) {
+      this.deselectAll();
+      this.setValue(activeItem.getAttribute("value"));
+      event.preventDefault();
+    }
   }
   isEnterKey(keyCode) {
     return keyCode === 13;
   }
   handleArrowKey(keyCode) {
+    this.show();
     switch (keyCode) {
       case 38:
         this.handleArrowUp();
@@ -5019,8 +5033,10 @@ var autocomplete_controller_default = class extends Controller {
   }
   selectNextItem() {
     const next = this.nextItem();
-    this.deselectAll();
-    next.classList.add("active");
+    if (next) {
+      this.deselectAll();
+      next.classList.add("active");
+    }
   }
   nextItem() {
     const current = this.activeItem();
@@ -5036,8 +5052,10 @@ var autocomplete_controller_default = class extends Controller {
   }
   selectPreviousItem() {
     const previous = this.previousItem();
-    this.deselectAll();
-    previous.classList.add("active");
+    if (previous) {
+      this.deselectAll();
+      previous.classList.add("active");
+    }
   }
   previousItem() {
     const current = this.activeItem();
@@ -5087,8 +5105,16 @@ var autocomplete_controller_default = class extends Controller {
       this.renderCollection(html);
     }).then(() => {
       this.highlight();
+    }).then(() => {
+      this.activateFirstItem();
+    }).then(() => {
+      this.show();
     });
   }
+  activateFirstItem() {
+    this.deselectAll();
+    this.firstItem().classList.add("active");
+  }
   show() {
     if (this.isDropdownEmpty()) {
       this.dropdownTarget.classList.remove("d-none");
@@ -5108,7 +5134,7 @@ var autocomplete_controller_default = class extends Controller {
   }
   fetchCollection() {
     if (this.isRemote()) {
-      return fetch(this.urlValue).then((response) => {
+      return fetch(this.remoteURL()).then((response) => {
         return response.text();
       }).catch((error2) => {
         console.error("The URL you provided for the autocomplete collection didn't return a successful result", error2);
@@ -5117,6 +5143,20 @@ var autocomplete_controller_default = class extends Controller {
       return Promise.resolve(this.dropdownTarget.innerHTML);
     }
   }
+  remoteURL() {
+    const base = "https://example.com";
+    const url = new URL(this.urlValue, base);
+    const params = new URLSearchParams(url.search);
+    params.set("search", this.value());
+    params.set("page", "1");
+    params.set("per_page", "6");
+    url.search = params.toString();
+    let urlString = url.toString();
+    if (urlString.includes(base)) {
+      urlString = urlString.replace(base, "");
+    }
+    return urlString;
+  }
   renderCollection(html) {
     this.dropdownTarget.innerHTML = html;
   }
@@ -5128,13 +5168,19 @@ var autocomplete_controller_default = class extends Controller {
     this.dropdownItemTargets.forEach((dropdownItem) => {
       let text = dropdownItem.innerHTML;
       text = text.replace(/<mark.*?>(.*?)<\/mark>/ig, "$1");
-      const regex2 = new RegExp(`(${query})`, "gi");
-      text = text.replace(regex2, "<mark>$1</mark>");
+      if (query && query.length > 0) {
+        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();
   }
   value() {
@@ -7411,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];
@@ -7422,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) {
@@ -7658,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";
@@ -7687,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;
@@ -7696,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
@@ -9929,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 {
@@ -15035,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)');
@@ -15046,12 +15177,15 @@ var popup_controller_default = class extends Controller {
     const button = event.target.closest('[data-popup-target="button"]');
     const popup = this.popupById(button.dataset.popupId);
     const passThru = button.dataset.popupPassThru;
+    createPopper3(button, popup);
+    this.openPopup(popup);
     if (passThru) {
       const passThruElement = popup.querySelector(passThru);
       passThruElement.click();
-    } else {
-      createPopper3(button, popup);
-      this.openPopup(popup);
+      if (passThruElement instanceof HTMLInputElement) {
+        passThruElement.focus();
+        passThruElement.select();
+      }
     }
   }
   close(event) {
@@ -15256,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);
     });
@@ -15272,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) {
@@ -15336,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
@@ -15461,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

@@ -2,6 +2,14 @@ html {
   height: 100%;
 }
 
+.list-group-item {
+  &.active {
+    .text-muted {
+      color: $list-group-active-color !important;
+    }
+  }
+}
+
 mark {
   padding: 0;
   box-shadow: 0 $mark-padding 0 $mark-bg, 0 (-$mark-padding) 0 $mark-bg;

data/app/assets/stylesheets/headmin/layout/body.scss

@@ -2,5 +2,10 @@
   background: $card-cap-bg;
   height: 100vh;
   overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
 }
 
+.content {
+  flex-grow: 1
+}

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

@@ -2,7 +2,6 @@
   padding: 10px;
   background: $white;
   z-index: $zindex-popover;
-  width: $popover-max-width;
   @include reset-text();
   @include font-size($popover-font-size);
   word-wrap: break-word;