headmin 0.4.2 → 0.5.2

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 {
@@ -10011,6 +10093,260 @@ var hello_controller_default = class extends Controller {
   }
 };
 
+// app/assets/javascripts/headmin/controllers/media_controller.js
+var media_controller_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);
+      }
+    });
+    if (this.hasSorting()) {
+      this.initSortable();
+    }
+    this.validate();
+  }
+  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"));
+      url.searchParams.delete("ids[]");
+      ids.forEach((id) => {
+        url.searchParams.append("ids[]", id);
+      });
+      button.setAttribute("href", url.toString());
+    });
+  }
+  initSortable() {
+    sortable_esm_default.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) {
+    this.removeAllItems();
+    this.addItems(items);
+    this.postProcess();
+  }
+  postProcess() {
+    this.resetPositions();
+    this.syncIds();
+    this.togglePlaceholder();
+    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, index2) => {
+      const positionInput = item.querySelector("input[name*='position']");
+      if (positionInput) {
+        positionInput.value = index2;
+      }
+    });
+  }
+  addItems(items) {
+    items.forEach((item) => this.addItem(item));
+  }
+  addItem(item) {
+    const currentItem = this.itemByBlobId(item.blobId);
+    if (currentItem) {
+      this.enableItem(currentItem);
+    } else {
+      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) {
+    const template = this.templateTarget;
+    const html = this.randomizeIds(template);
+    this.thumbnailsTarget.insertAdjacentHTML("beforeend", html);
+    const newItem = this.itemTargets.pop();
+    newItem.querySelector(`input[name*="[blob_id]"]`).value = item.blobId;
+    newItem.querySelector(`input[name*="[_destroy]"]`).value = false;
+    const editButton = newItem.querySelector(`[data-media-target="editButton"]`);
+    editButton.setAttribute("href", editButton.getAttribute("href").replace("$1", item.blobId));
+    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(1e8 + Math.random() * 9e8);
+    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");
+    this.resetPositions();
+    this.syncIds();
+    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;
+    });
+  }
+};
+
+// app/assets/javascripts/headmin/controllers/media_modal_controller.js
+var media_modal_controller_default = class extends Controller {
+  static get targets() {
+    return ["idCheckbox", "item", "form", "selectButton", "placeholder", "count"];
+  }
+  connect() {
+    this.validate();
+    this.updateCount();
+  }
+  select() {
+    this.dispatchSelectionEvent();
+  }
+  submitForm() {
+    this.hidePlaceholder();
+    this.triggerFormSubmission();
+  }
+  inputChange() {
+    this.handleInputChange();
+    this.updateCount();
+  }
+  hidePlaceholder() {
+    this.placeholderTarget.classList.add("d-none");
+  }
+  handleInputChange() {
+    this.validate();
+  }
+  dispatchSelectionEvent() {
+    document.dispatchEvent(new CustomEvent("mediaSelectionSubmitted", {
+      detail: {
+        name: this.element.dataset.name,
+        items: this.renderItemsForEvent(this.selectedItems())
+      }
+    }));
+  }
+  triggerFormSubmission() {
+    this.formTarget.requestSubmit();
+  }
+  renderItemsForEvent(items) {
+    return items.map((item) => this.renderItemForEvent(item));
+  }
+  renderItemForEvent(item) {
+    return {
+      blobId: item.querySelector('input[type="checkbox"]').value,
+      thumbnail: item.querySelector(".h-thumbnail")
+    };
+  }
+  selectedItems() {
+    return this.itemTargets.filter((item) => {
+      const checkbox = item.querySelector('input[type="checkbox"]');
+      return checkbox.checked;
+    });
+  }
+  selectedItemsCount() {
+    return this.selectedItems().length;
+  }
+  minSelectedItems() {
+    return parseInt(this.element.dataset.min, 10) || 0;
+  }
+  maxSelectedItems() {
+    return parseInt(this.element.dataset.max, 10) || Infinity;
+  }
+  validate() {
+    if (this.isValid()) {
+      this.enableSelectButton();
+    } else {
+      this.disableSelectButton();
+    }
+  }
+  enableSelectButton() {
+    this.selectButtonTarget.removeAttribute("disabled");
+  }
+  disableSelectButton() {
+    this.selectButtonTarget.setAttribute("disabled", "");
+  }
+  isValid() {
+    const count = this.selectedItemsCount();
+    return count >= this.minSelectedItems() && count <= this.maxSelectedItems();
+  }
+  updateCount() {
+    this.countTarget.innerHTML = this.idCheckboxTargets.filter((checkbox) => checkbox.checked).length;
+  }
+};
+
 // node_modules/@popperjs/core/lib/index.js
 var lib_exports = {};
 __export(lib_exports, {
@@ -15081,6 +15417,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)');
@@ -15151,6 +15490,14 @@ var redactorx_controller_default = class extends Controller {
   }
 };
 
+// app/assets/javascripts/headmin/controllers/remote_modal_controller.js
+var remote_modal_controller_default = class extends Controller {
+  connect() {
+    this.modal = new Modal(this.element);
+    this.modal.show();
+  }
+};
+
 // app/assets/javascripts/headmin/controllers/repeater_controller.js
 var repeater_controller_default = class extends Controller {
   static get values() {
@@ -15305,11 +15652,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 +15668,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 +15737,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
@@ -15500,6 +15842,34 @@ var table_controller_default = class extends Controller {
   }
 };
 
+// app/assets/javascripts/headmin/controllers/textarea_controller.js
+var textarea_controller_default = class extends Controller {
+  static get targets() {
+    return ["textarea", "count"];
+  }
+  connect() {
+    this.update();
+  }
+  update() {
+    this.resize();
+    this.updateCount();
+  }
+  resize() {
+    this.textareaTarget.style.height = "auto";
+    this.textareaTarget.setAttribute("style", "height:" + this.textareaTarget.scrollHeight + "px;overflow-y:hidden;");
+  }
+  updateCount() {
+    if (this.textareaTarget.getAttribute("maxlength")) {
+      this.updateCountLength();
+    }
+  }
+  updateCountLength() {
+    const current_length = this.textareaTarget.value.length;
+    const maximum_length = this.textareaTarget.getAttribute("maxlength");
+    this.countTarget.textContent = `${current_length}/${maximum_length}`;
+  }
+};
+
 // app/assets/javascripts/headmin/index.js
 var Headmin = class {
   static start() {
@@ -15510,16 +15880,21 @@ 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);
+    Stimulus.register("media", media_controller_default);
+    Stimulus.register("media-modal", media_modal_controller_default);
     Stimulus.register("notification", notification_controller_default);
     Stimulus.register("popup", popup_controller_default);
     Stimulus.register("redactorx", redactorx_controller_default);
+    Stimulus.register("remote-modal", remote_modal_controller_default);
     Stimulus.register("repeater", repeater_controller_default);
     Stimulus.register("select", select_controller_default);
     Stimulus.register("table", table_controller_default);
     Stimulus.register("table-actions", table_actions_controller_default);
+    Stimulus.register("textarea", textarea_controller_default);
   }
 };
 export {

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;
 }