headmin 0.4.1 → 0.5.1

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 {

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;

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

@@ -34,3 +34,10 @@
     max-width: 100%;
   }
 }
+
+.h-table-cell-color {
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  background-color: var(--cell-color);
+}

data/app/assets/stylesheets/headmin.css

@@ -13103,7 +13103,6 @@ input[type=search] {
 }
 html {
   height: 100%;
-  background: red;
 }
 .list-group-item.active .text-muted {
   color: #fff !important;
@@ -13117,6 +13116,11 @@ mark,
   background: rgba(0, 0, 0, 0.03);
   height: 100vh;
   overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+}
+.content {
+  flex-grow: 1;
 }
 .sidebar {
   font-size: 0.99rem;
@@ -13200,6 +13204,12 @@ body.empty {
   width: 300px;
   max-width: 100%;
 }
+.h-table-cell-color {
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  background-color: var(--cell-color);
+}
 .btn-link {
   text-decoration: none;
 }
@@ -13310,6 +13320,54 @@ body.empty {
 .h-filter-popup.closed {
   display: none;
 }
+.h-filter-row {
+  padding: 0.5rem 0 0.5rem 0;
+  position: relative;
+  flex-wrap: unset;
+  display: flex;
+  gap: 10px;
+}
+.h-filter-row:first-child {
+  padding-top: 0;
+}
+.h-filter-row:hover .h-filter-add-input,
+.h-filter-row:hover .h-filter-remove-input {
+  display: block;
+}
+.h-filter-row input,
+.h-filter-row 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;
+}
+.h-filter-conditional select {
+  width: 50px;
+}
+.h-filter-conditional::before {
+  content: "";
+  position: absolute;
+  top: calc(50% - 1px);
+  left: 0;
+  width: calc(50% - 35px);
+  height: 1px;
+  background: rgba(0, 0, 0, 0.2);
+}
+.h-filter-conditional::after {
+  content: "";
+  position: absolute;
+  top: calc(50% - 1px);
+  left: calc(50% + 35px);
+  width: calc(50% - 35px);
+  height: 1px;
+  background: rgba(0, 0, 0, 0.2);
+}
 .h-filter-remove {
   border-left: 1px solid #d1d5db;
   padding-left: 8px;
@@ -13318,11 +13376,24 @@ body.empty {
 .h-filter-remove 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;
+}
 .h-popup {
   padding: 10px;
   background: #ffffff;
   z-index: 1070;
-  width: 276px;
   font-family: var(--bs-font-sans-serif);
   font-style: normal;
   font-weight: 400;

data/app/controllers/concerns/headmin/filterable.rb

@@ -0,0 +1,27 @@
+module Headmin
+  module Filterable
+    # Will create a Headmin::Filters object with a default configuration for "id" and "search"
+    #
+    # Example:
+    #
+    # orders = Order
+    # orders = filter(orders, {
+    #  status: :text,
+    #  price: :number,
+    #  in_stock: :boolean
+    #  })
+    # @orders = orders.all
+
+    def filter(collection, filter_types = {})
+      type_hash = default_filter_types.merge(filter_types)
+      Headmin::Filters.new(params, type_hash).query(collection)
+    end
+
+    def default_filter_types
+      {
+        id: :number,
+        search: :search
+      }
+    end
+  end
+end

data/app/models/concerns/headmin/field.rb

@@ -11,8 +11,10 @@ module Headmin
       belongs_to :field, optional: true, touch: true
       has_many :fields, foreign_key: "parent_id"
       accepts_nested_attributes_for :fields, allow_destroy: true
-      has_one_attached :file
-      accepts_nested_attributes_for :file_attachment
+
+      # field_type: :files, :file
+      has_many_attached :files
+      accepts_nested_attributes_for :files_attachments, allow_destroy: true
     end
   end
 end