headmin 0.5.1 → 0.5.4

data/app/assets/javascripts/headmin.js

@@ -10093,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, {
@@ -15236,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() {
@@ -15580,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 currentLength = this.textareaTarget.value.length;
+    const maximumLength = this.textareaTarget.getAttribute("maxlength");
+    this.countTarget.textContent = `${currentLength}/${maximumLength}`;
+  }
+};
+
 // app/assets/javascripts/headmin/index.js
 var Headmin = class {
   static start() {
@@ -15594,13 +15884,17 @@ var Headmin = class {
     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/forms/file.scss

@@ -17,26 +17,41 @@
   display: flex;
   flex-wrap: wrap;
   gap: map-get($spacers, 2);
+
+  a, a:link, a:hover {
+    color: inherit;
+    text-decoration: inherit;
+  }
 }
 
 .h-form-file-thumbnail {
   position: relative;
   pointer-events: initial !important;
   display: flex;
+
+  &:hover {
+    .h-form-file-thumbnail-actions {
+      display: block;
+    }
+  }
+}
+
+.h-form-file-thumbnail-actions {
+  display: none;
 }
 
 .h-form-file-thumbnail-remove {
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 5px;
+  right: 5px;
   background: $danger;
-  width: 20px;
-  height: 20px;
+  width: 25px;
+  height: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
-  border-radius: $border-radius;
+  border-radius: $border-radius-pill;
   z-index: 3;
   cursor: pointer;
 
@@ -44,3 +59,23 @@
     background: tint-color($danger, $btn-hover-bg-tint-amount)
   }
 }
+
+.h-form-file-thumbnail-edit {
+  position: absolute;
+  top: 5px;
+  right: 35px;
+  background-color: rgba(0, 0, 0, 0.7);
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $border-radius-pill;
+  z-index: 3;
+  cursor: pointer;
+  color: white !important;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 1);
+  }
+}

data/app/assets/stylesheets/headmin/forms/media.scss

@@ -0,0 +1,10 @@
+.h-form-media-validation {
+  opacity: 0;
+  width: 100px;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}

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

@@ -7,5 +7,6 @@
 
 @import "forms/autocomplete";
 @import "forms/file";
+@import "forms/media";
 @import "forms/repeater";
 @import "forms/search";

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

@@ -14,7 +14,6 @@
 .nav-brand {
   svg, img {
     max-width: 100%;
-    height: 30px;
   }
   svg {
     fill: $white;

data/app/assets/stylesheets/headmin/media/index.scss

@@ -0,0 +1,9 @@
+.media-modal {
+  .h-thumbnail {
+    cursor: pointer;
+  }
+
+  input[type="checkbox"]:checked + label .h-thumbnail {
+    background-color: #0d6efd;
+  }
+}

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

@@ -0,0 +1 @@
+@import "media/index";

data/app/assets/stylesheets/headmin/overrides/redactorx.scss

@@ -40,7 +40,7 @@
   padding: $input-padding-y $input-padding-x !important;
   position: relative;
 
-  p {
+  p, ul li, ol li, td {
     @include font-size($input-font-size);
     line-height: $input-line-height;
     color: $input-color;

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

@@ -35,6 +35,14 @@
   }
 }
 
+.h-table-cell-image {
+  padding: 0.4rem 1rem !important;
+
+  img {
+    border-radius: 3px;
+  }
+}
+
 .h-table-cell-color {
   width: 22px;
   height: 22px;

data/app/assets/stylesheets/headmin/vendor/{tom-select-bootstrap.css → tom-select-bootstrap.scss}

@@ -516,7 +516,6 @@
 .ts-wrapper.form-select {
   padding: 0;
   height: auto;
-  box-shadow: none;
 }
 .ts-wrapper.form-select .ts-control, .ts-wrapper.form-select.single.input-active .ts-control {
   border: none !important;

data/app/assets/stylesheets/headmin.css

@@ -10180,7 +10180,6 @@ fieldset:disabled .btn {
 .ts-wrapper.form-select {
   padding: 0;
   height: auto;
-  box-shadow: none;
 }
 .ts-wrapper.form-select .ts-control,
 .ts-wrapper.form-select.single.input-active .ts-control {
@@ -12944,7 +12943,10 @@ span.flatpickr-weekday {
   padding: 0.375rem 0.75rem !important;
   position: relative;
 }
-.rx-content p {
+.rx-content p,
+.rx-content ul li,
+.rx-content ol li,
+.rx-content td {
   font-size: 0.9rem;
   line-height: 1.5;
   color: #212529;
@@ -13019,29 +13021,69 @@ span.flatpickr-weekday {
   flex-wrap: wrap;
   gap: 0.5rem;
 }
+.h-form-file-thumbnails a,
+.h-form-file-thumbnails a:link,
+.h-form-file-thumbnails a:hover {
+  color: inherit;
+  text-decoration: inherit;
+}
 .h-form-file-thumbnail {
   position: relative;
   pointer-events: initial !important;
   display: flex;
 }
+.h-form-file-thumbnail:hover .h-form-file-thumbnail-actions {
+  display: block;
+}
+.h-form-file-thumbnail-actions {
+  display: none;
+}
 .h-form-file-thumbnail-remove {
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 5px;
+  right: 5px;
   background: #dc3545;
-  width: 20px;
-  height: 20px;
+  width: 25px;
+  height: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
-  border-radius: 0.25rem;
+  border-radius: 50rem;
   z-index: 3;
   cursor: pointer;
 }
 .h-form-file-thumbnail-remove:hover {
   background: #e15361;
 }
+.h-form-file-thumbnail-edit {
+  position: absolute;
+  top: 5px;
+  right: 35px;
+  background-color: rgba(0, 0, 0, 0.7);
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50rem;
+  z-index: 3;
+  cursor: pointer;
+  color: white !important;
+}
+.h-form-file-thumbnail-edit:hover {
+  background-color: black;
+}
+.h-form-media-validation {
+  opacity: 0;
+  width: 100px;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
 .repeater {
   position: relative;
 }
@@ -13138,7 +13180,6 @@ mark,
 .nav-brand svg,
 .nav-brand img {
   max-width: 100%;
-  height: 30px;
 }
 .nav-brand svg {
   fill: #ffffff;
@@ -13204,6 +13245,12 @@ body.empty {
   width: 300px;
   max-width: 100%;
 }
+.h-table-cell-image {
+  padding: 0.4rem 1rem !important;
+}
+.h-table-cell-image img {
+  border-radius: 3px;
+}
 .h-table-cell-color {
   width: 22px;
   height: 22px;
@@ -13390,6 +13437,12 @@ body.empty {
   z-index: 9;
   display: none;
 }
+.media-modal .h-thumbnail {
+  cursor: pointer;
+}
+.media-modal input[type=checkbox]:checked + label .h-thumbnail {
+  background-color: #0d6efd;
+}
 .h-popup {
   padding: 10px;
   background: #ffffff;

data/app/assets/stylesheets/headmin.scss

@@ -60,6 +60,7 @@
 @import "headmin/table";
 @import "headmin/utilities";
 @import "headmin/filter";
+@import "headmin/media";
 @import "headmin/popup";
 @import "headmin/thumbnail";
 @import "headmin/syntax";

data/app/controllers/headmin/media_controller.rb

@@ -0,0 +1,52 @@
+class Headmin::MediaController < HeadminController
+  layout false
+
+  def index
+    @blobs =
+      ActiveStorage::Blob
+        .left_outer_joins(:attachments)
+        .where.not(active_storage_attachments: {record_type: "ActiveStorage::VariantRecord"}) # Not a variant
+        .or(ActiveStorage::Blob.where(active_storage_attachments: {id: nil})) # Or an orphan
+        .order(created_at: :desc)
+        .group(:id)
+        .all
+  end
+
+  def create
+    blobs = []
+    media_params[:files].reject { |c| c.blank? }.each do |file|
+      blobs << ActiveStorage::Blob.create_and_upload!(io: file, filename: file.original_filename)
+    end
+
+    respond_to do |format|
+      format.turbo_stream {
+        @blobs = blobs
+      }
+      format.html { redirect_to root_path }
+    end
+  end
+
+  def show
+    @blob = ActiveStorage::Blob.find(params[:id])
+  end
+
+  def update
+    @blob = ActiveStorage::Blob.find(params[:id])
+    media_item_params[:filename] = media_item_params[:filename] + "." + @blob.filename.to_s.rpartition(".").last
+    if @blob.update(media_item_params)
+      flash.now[:notice] = t("admin.flash.updated", name: @blob.filename)
+    end
+  end
+
+  private
+
+  def media_params
+    params.permit(
+      files: []
+    )
+  end
+
+  def media_item_params
+    params.require(:blob).permit!
+  end
+end

data/app/controllers/headmin_controller.rb

@@ -0,0 +1,2 @@
+class HeadminController < ApplicationController
+end

data/app/helpers/headmin/form_helper.rb

@@ -16,8 +16,8 @@ module Headmin
     # https://example.com/products?amount=1&type[]=food&type[]=beverage
     #
     # <%= form.hidden_input :amount, value: 1 %>
-    # <%= form.hidden_input :'type[]', value: 'food' %>
-    # <%= form.hidden_input :'type[]', value: 'beverage' %>
+    # <%= form.hidden_input :"type[]", value: "food" %>
+    # <%= form.hidden_input :"type[]", value: "beverage" %>
     def query_parameter_fields(form)
       test = request.query_parameters.map do |name, value|
         if value.is_a?(Array)

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

@@ -4,7 +4,7 @@ module Headmin
 
     included do
       # Configuration
-      has_closure_tree
+      has_closure_tree order: "position", numeric_order: true
 
       # Associations
       belongs_to :fieldable, polymorphic: true, optional: true, touch: true
@@ -13,7 +13,7 @@ module Headmin
       accepts_nested_attributes_for :fields, allow_destroy: true
 
       # field_type: :files, :file
-      has_many_attached :files
+      has_many_attached :files, dependent: :detach
       accepts_nested_attributes_for :files_attachments, allow_destroy: true
     end
   end