lcp 0.1.0

data/app/assets/javascripts/lcp_ruby/controllers/file_upload_controller.js

@@ -0,0 +1,135 @@
+// Stimulus controller: lcp-file-upload
+// Replaces: file_upload.js
+//
+// Usage (applied by FormHelper#render_file_upload_input):
+//   <div data-controller="lcp-file-upload" data-lcp-file-upload-max-size-value="5 MB">
+//     <input type="file" data-lcp-file-upload-target="input"
+//            data-action="change->lcp-file-upload#preview">
+//     <div data-lcp-file-upload-target="dropZone"
+//          data-action="click->lcp-file-upload#openPicker
+//                       dragenter->lcp-file-upload#dragEnter
+//                       dragover->lcp-file-upload#dragOver
+//                       dragleave->lcp-file-upload#dragLeave
+//                       drop->lcp-file-upload#drop">
+//     </div>
+//     <div data-lcp-file-upload-target="preview"></div>
+//   </div>
+;(function () {
+  window.StimulusApp.register("lcp-file-upload", class extends Stimulus.Controller {
+    static get targets() { return ["input", "dropZone", "preview"]; }
+    static get values() { return { maxSize: String }; }
+
+    connect() {
+      this._maxSizeBytes = this.hasMaxSizeValue ? this._parseSize(this.maxSizeValue) : null;
+    }
+
+    openPicker() {
+      if (this.hasInputTarget) this.inputTarget.click();
+    }
+
+    dragEnter(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (this.hasDropZoneTarget) this.dropZoneTarget.classList.add("dragover");
+    }
+
+    dragOver(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (this.hasDropZoneTarget) this.dropZoneTarget.classList.add("dragover");
+    }
+
+    dragLeave(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (this.hasDropZoneTarget) this.dropZoneTarget.classList.remove("dragover");
+    }
+
+    drop(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (this.hasDropZoneTarget) this.dropZoneTarget.classList.remove("dragover");
+
+      var files = e.dataTransfer.files;
+      if (files.length > 0 && this.hasInputTarget) {
+        this.inputTarget.files = files;
+        this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    }
+
+    preview() {
+      if (!this.hasPreviewTarget || !this.hasInputTarget) return;
+
+      this.previewTarget.innerHTML = "";
+      var files = this.inputTarget.files;
+
+      for (var i = 0; i < files.length; i++) {
+        var file = files[i];
+        if (this._maxSizeBytes && file.size > this._maxSizeBytes) {
+          this.previewTarget.appendChild(this._errorItem(file));
+        } else {
+          this.previewTarget.appendChild(this._previewItem(file));
+        }
+      }
+    }
+
+    // --- private ---
+
+    _parseSize(sizeStr) {
+      var match = sizeStr.match(/^(\d+(?:\.\d+)?)\s*(B|KB|MB|GB)$/i);
+      if (!match) return null;
+      var value = parseFloat(match[1]);
+      switch (match[2].toUpperCase()) {
+        case "B":  return value;
+        case "KB": return value * 1024;
+        case "MB": return value * 1024 * 1024;
+        case "GB": return value * 1024 * 1024 * 1024;
+        default:   return null;
+      }
+    }
+
+    _formatSize(bytes) {
+      if (bytes < 1024) return bytes + " B";
+      if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+      if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+      return (bytes / (1024 * 1024 * 1024)).toFixed(1) + " GB";
+    }
+
+    _escapeHtml(str) {
+      var div = document.createElement("div");
+      div.textContent = str;
+      return div.innerHTML;
+    }
+
+    _errorItem(file) {
+      var div = document.createElement("div");
+      div.className = "lcp-file-preview-item lcp-file-preview-error";
+      var tooLarge = window.LcpI18n.t("file_upload.too_large", "too large");
+      var span = document.createElement("span");
+      span.className = "lcp-preview-name";
+      span.textContent = file.name + " (" + this._formatSize(file.size) + ") — " + tooLarge;
+      div.appendChild(span);
+      return div;
+    }
+
+    _previewItem(file) {
+      var item = document.createElement("div");
+      item.className = "lcp-file-preview-item";
+
+      if (file.type.startsWith("image/")) {
+        var img = document.createElement("img");
+        img.alt = file.name;
+        var reader = new FileReader();
+        reader.onload = function (e) { img.src = e.target.result; };
+        reader.readAsDataURL(file);
+        item.appendChild(img);
+      }
+
+      var nameSpan = document.createElement("span");
+      nameSpan.className = "lcp-preview-name";
+      nameSpan.textContent = file.name + " (" + this._formatSize(file.size) + ")";
+      item.appendChild(nameSpan);
+      return item;
+    }
+  });
+})();

data/app/assets/javascripts/lcp_ruby/controllers/filter_auto_submit_controller.js

@@ -0,0 +1,46 @@
+// Stimulus controller: lcp-filter-auto-submit
+//
+// Wired by _filter_form.html.erb when Pages::FilterForm#auto_submit_effective?
+// is true (mutex with lcp-filter-dirty). Spec: docs/design/page_filters_as_virtual_forms.md § 4.
+;(function () {
+  var DEBOUNCE_MS = 400;
+
+  window.StimulusApp.register("lcp-filter-auto-submit", class extends Stimulus.Controller {
+    connect() {
+      this._abort = new AbortController();
+      this._timer = null;
+      var signal = this._abort.signal;
+      this.element.addEventListener("change", this._onChange.bind(this), { signal: signal });
+      this.element.addEventListener("input",  this._onInput.bind(this),  { signal: signal });
+    }
+
+    disconnect() {
+      if (this._abort) { this._abort.abort(); this._abort = null; }
+      if (this._timer) { clearTimeout(this._timer); this._timer = null; }
+    }
+
+    _onChange() {
+      // <select> emits both `input` and `change`; cancel the pending debounce so we submit once.
+      if (this._timer) { clearTimeout(this._timer); this._timer = null; }
+      this.element.requestSubmit();
+    }
+
+    _onInput(event) {
+      var target = event.target;
+      if (!target) return;
+      var tag = target.tagName;
+      var type = (target.type || "").toLowerCase();
+      var isTextish = (tag === "TEXTAREA") ||
+        (tag === "INPUT" && (type === "text" || type === "search" || type === "email" ||
+                              type === "tel" || type === "url" || type === "number" ||
+                              type === "password"));
+      if (!isTextish) return;
+
+      if (this._timer) clearTimeout(this._timer);
+      this._timer = setTimeout(function () {
+        this._timer = null;
+        this.element.requestSubmit();
+      }.bind(this), DEBOUNCE_MS);
+    }
+  });
+})();

data/app/assets/javascripts/lcp_ruby/controllers/filter_dirty_controller.js

@@ -0,0 +1,94 @@
+// Stimulus controller: lcp-filter-dirty
+//
+// Attached to filter-form <form>. Tracks dirty state vs. initial values
+// and surfaces an "N unapplied" counter on the Apply button so the user
+// knows changes haven't been submitted yet. Clears on form submit.
+//
+// Targets:
+//   * submit  — the Apply button (gets .is-dirty when any field differs)
+//   * counter — span inside the Apply button (gets "N unapplied" text)
+//
+// Spec: docs/design/page_filters_as_virtual_forms.md acceptance #20.
+;(function () {
+  function snapshotValue(el) {
+    if (!el) return "";
+    if (el.type === "checkbox" || el.type === "radio") return el.checked ? "1" : "0";
+    if (el.multiple && el.options) {
+      return Array.from(el.selectedOptions).map(function (o) { return o.value; }).sort().join(",");
+    }
+    return el.value || "";
+  }
+
+  function collectFields(form) {
+    return Array.from(form.querySelectorAll("input, select, textarea")).filter(function (el) {
+      // Skip hidden Rails internals (authenticity_token, utf8, _method)
+      var name = el.name || "";
+      if (!name) return false;
+      if (name === "authenticity_token" || name === "utf8" || name === "_method") return false;
+      if (el.type === "hidden" && name.indexOf("page_filter") !== 0) return false;
+      if (el.type === "submit" || el.type === "button") return false;
+      return true;
+    });
+  }
+
+  window.StimulusApp.register("lcp-filter-dirty", class extends Stimulus.Controller {
+    static get targets() { return [ "submit", "counter" ]; }
+
+    connect() {
+      this._abort = new AbortController();
+      this._initialSnapshot = this._snapshot();
+      var refresh = this._refresh.bind(this);
+      var reset   = this._reset.bind(this);
+      var signal  = this._abort.signal;
+      this.element.addEventListener("change", refresh, { signal: signal });
+      this.element.addEventListener("input",  refresh, { signal: signal });
+      this.element.addEventListener("submit", reset,   { signal: signal });
+      this._refresh();
+    }
+
+    disconnect() {
+      if (this._abort) { this._abort.abort(); this._abort = null; }
+    }
+
+    _snapshot() {
+      var snap = {};
+      collectFields(this.element).forEach(function (el) {
+        snap[el.name] = snapshotValue(el);
+      });
+      return snap;
+    }
+
+    _refresh() {
+      var current = this._snapshot();
+      var dirty = 0;
+      var keys = Object.keys(Object.assign({}, this._initialSnapshot, current));
+      keys.forEach(function (k) {
+        if ((this._initialSnapshot[k] || "") !== (current[k] || "")) dirty += 1;
+      }.bind(this));
+
+      if (this.hasSubmitTarget) {
+        this.submitTarget.classList.toggle("is-dirty", dirty > 0);
+      }
+      if (this.hasCounterTarget) {
+        if (dirty > 0) {
+          var template = this.counterTarget.dataset.lcpFilterDirtyTemplate ||
+                          this.element.dataset.lcpFilterDirtyTemplate ||
+                          "%{count} unapplied";
+          this.counterTarget.textContent = template.replace("%{count}", dirty);
+          this.counterTarget.hidden = false;
+        } else {
+          this.counterTarget.textContent = "";
+          this.counterTarget.hidden = true;
+        }
+      }
+    }
+
+    _reset() {
+      // After a successful submit the new URL becomes the new baseline.
+      // The page will reload, but if Turbo intercepts, refresh the
+      // snapshot from the current values so the counter clears.
+      this._initialSnapshot = this._snapshot();
+      this._refresh();
+    }
+  });
+})();

data/app/assets/javascripts/lcp_ruby/controllers/form_actions_controller.js

@@ -0,0 +1,68 @@
+// Stimulus controller: lcp-form-actions
+//
+// Classic (Turbo) form submit lifecycle: mount the shared submitting-state helper
+// on turbo:submit-start and clear it on turbo:submit-end. Also wires dropdown
+// overflow items via submitFromDropdown (click->lcp-form-actions#submitFromDropdown).
+;(function () {
+  window.StimulusApp.register("lcp-form-actions", class extends Stimulus.Controller {
+    connect() {
+      var self = this;
+      this._handle = null;
+      this._onSubmitStart = function (event) {
+        var submitter = event && event.detail && event.detail.formSubmission
+          ? event.detail.formSubmission.submitter
+          : null;
+        self._handle = window.LcpRuby.formSubmitState.begin(self.element, submitter);
+      };
+      this._onSubmitEnd = function () {
+        if (self._handle) {
+          window.LcpRuby.formSubmitState.end(self._handle);
+          self._handle = null;
+        }
+      };
+      this.element.addEventListener("turbo:submit-start", this._onSubmitStart);
+      this.element.addEventListener("turbo:submit-end", this._onSubmitEnd);
+    }
+
+    disconnect() {
+      this.element.removeEventListener("turbo:submit-start", this._onSubmitStart);
+      this.element.removeEventListener("turbo:submit-end", this._onSubmitEnd);
+      if (this._handle) {
+        window.LcpRuby.formSubmitState.end(this._handle);
+        this._handle = null;
+      }
+    }
+
+    submitFromDropdown(event) {
+      var btn = event.currentTarget;
+      var actionValue = btn.getAttribute("data-form-action-value");
+      var submittingLabel = btn.getAttribute("data-submitting-label");
+      var form = this.element;
+
+      // Handle confirmation
+      var confirmMsg = btn.getAttribute("data-confirm");
+      if (confirmMsg && !window.confirm(confirmMsg)) {
+        return;
+      }
+
+      // Copy the chosen item's submitting label onto the dropdown toggle so the
+      // visual-target resolution's detached-submitter anchor step sees the right
+      // in-progress label. The toggle carries data-progress-anchor="true" and is
+      // the only mountable visual target after the temp button detaches.
+      var toggle = form.querySelector(".lcp-dropdown-toggle[data-progress-anchor]");
+      if (toggle && submittingLabel) {
+        toggle.setAttribute("data-submitting-label", submittingLabel);
+      }
+
+      // Create a temporary hidden submit button with the action value
+      var tempBtn = document.createElement("button");
+      tempBtn.type = "submit";
+      tempBtn.name = "_form_action";
+      tempBtn.value = actionValue;
+      tempBtn.style.display = "none";
+      form.appendChild(tempBtn);
+      tempBtn.click();
+      tempBtn.remove();
+    }
+  });
+})();

data/app/assets/javascripts/lcp_ruby/controllers/form_handling_controller.js

@@ -0,0 +1,67 @@
+// Stimulus controller: lcp-form-handling
+// Replaces: form_handling.js
+//
+// Handles turbo-confirm interception and multi-select min/max validation.
+// Attach to the form element.
+;(function () {
+  window.StimulusApp.register("lcp-form-handling", class extends Stimulus.Controller {
+    connect() {
+      this._initMultiSelectValidation();
+    }
+
+    confirmSubmit(e) {
+      var confirmMsg = (e.submitter && e.submitter.dataset.turboConfirm) ||
+                       this.element.dataset.turboConfirm;
+      if (confirmMsg && !confirm(confirmMsg)) {
+        e.preventDefault();
+      }
+    }
+
+    // --- private ---
+
+    _initMultiSelectValidation() {
+      var form = this.element;
+      var multiSelects = form.querySelectorAll("select[multiple][data-min], select[multiple][data-max]");
+      if (!multiSelects.length) return;
+
+      multiSelects.forEach(function (sel) {
+        sel.addEventListener("change", function () { validateMultiSelect(sel); });
+        validateMultiSelect(sel);
+      });
+
+      function validateMultiSelect(sel) {
+        var count = sel.selectedOptions.length;
+        var min = sel.getAttribute("data-min");
+        var max = sel.getAttribute("data-max");
+        var msgs = [];
+
+        if (min && count < parseInt(min, 10)) {
+          var minN = parseInt(min, 10);
+          var minPath = "form.errors.select_at_least." + (minN === 1 ? "one" : "other");
+          var minFallback = minN === 1 ? "Select at least 1 option" : "Select at least %{count} options";
+          msgs.push(window.LcpI18n.format(window.LcpI18n.t(minPath, minFallback), { count: minN }));
+        }
+        if (max && count > parseInt(max, 10)) {
+          var maxN = parseInt(max, 10);
+          var maxPath = "form.errors.select_at_most." + (maxN === 1 ? "one" : "other");
+          var maxFallback = maxN === 1 ? "Select at most 1 option" : "Select at most %{count} options";
+          msgs.push(window.LcpI18n.format(window.LcpI18n.t(maxPath, maxFallback), { count: maxN }));
+        }
+
+        var msgEl = sel.parentElement.querySelector(".lcp-multi-select-error");
+        if (msgs.length > 0) {
+          if (!msgEl) {
+            msgEl = document.createElement("span");
+            msgEl.className = "lcp-multi-select-error lcp-field-error";
+            sel.parentElement.appendChild(msgEl);
+          }
+          msgEl.textContent = msgs.join(". ");
+          sel.setCustomValidity(msgs.join(". "));
+        } else {
+          if (msgEl) msgEl.remove();
+          sel.setCustomValidity("");
+        }
+      }
+    }
+  });
+})();

data/app/assets/javascripts/lcp_ruby/controllers/import_dialog_controller.js

@@ -0,0 +1,142 @@
+(function() {
+  if (typeof window.StimulusApp === "undefined") return;
+
+  window.StimulusApp.register("lcp-import-dialog", class extends window.Stimulus.Controller {
+    static get values() { return { fieldsUrl: String }; }
+    static get targets() { return ["matchAttribute", "sheetSelect"]; }
+
+    connect() {
+      if (this.hasFieldsUrlValue && this.fieldsUrlValue) {
+        this._loadMatchAttributeOptions();
+      }
+      if (this.hasSheetSelectTarget) {
+        this._populateSheetSelect();
+      }
+    }
+
+    switchSheet() {
+      if (!this.hasSheetSelectTarget) return;
+
+      var sheetName = this.sheetSelectTarget.value;
+      var sheetsInput = this.element.querySelector('input[name="record[sheets]"]');
+      if (!sheetsInput) return;
+
+      var sheets;
+      try { sheets = JSON.parse(sheetsInput.value || "[]"); }
+      catch(e) { return; }
+
+      var sheet = sheets.find(function(s) { return s.name === sheetName; });
+      if (!sheet) return;
+
+      // Check max_rows limit
+      var maxRowsInput = this.element.querySelector('input[name="record[max_rows]"]');
+      var maxRows = maxRowsInput ? parseInt(maxRowsInput.value, 10) : 0;
+      if (maxRows && sheet.row_count > maxRows) {
+        this.sheetSelectTarget.classList.add("is-invalid");
+        var feedback = this.sheetSelectTarget.parentNode.querySelector(".invalid-feedback");
+        if (!feedback) {
+          feedback = document.createElement("div");
+          feedback.className = "invalid-feedback";
+          this.sheetSelectTarget.parentNode.appendChild(feedback);
+        }
+        feedback.textContent = window.LcpI18n.format(
+          window.LcpI18n.t("import.sheet_too_many_rows", "This sheet has %{count} rows (max: %{max})"),
+          { count: sheet.row_count, max: maxRows }
+        );
+        feedback.style.display = "block";
+        return;
+      }
+      this.sheetSelectTarget.classList.remove("is-invalid");
+      var existingFeedback = this.sheetSelectTarget.parentNode.querySelector(".invalid-feedback");
+      if (existingFeedback) existingFeedback.style.display = "none";
+
+      // Update row_count hidden field and any visible display
+      var rowCountInput = this.element.querySelector('input[name="record[row_count]"]');
+      if (rowCountInput) rowCountInput.value = sheet.row_count;
+
+      // Update source_headers hidden field
+      var headersInput = this.element.querySelector('input[name="record[source_headers]"]');
+      if (headersInput) headersInput.value = JSON.stringify(sheet.headers);
+
+      // Trigger import-mapper re-render via Stimulus value change on the DOM attribute
+      var mapperEl = this.element.querySelector('[data-controller~="lcp-import-mapper"]');
+      if (mapperEl) {
+        mapperEl.setAttribute("data-lcp-import-mapper-source-headers-value", JSON.stringify(sheet.headers));
+      }
+    }
+
+    _populateSheetSelect() {
+      var sheetsInput = this.element.querySelector('input[name="record[sheets]"]');
+      if (!sheetsInput) return;
+
+      var sheets;
+      try { sheets = JSON.parse(sheetsInput.value || "[]"); }
+      catch(e) { return; }
+
+      if (sheets.length <= 1) return;
+
+      var select = this.sheetSelectTarget;
+      var currentValue = select.value;
+
+      // Clear existing options (keep blank if present)
+      while (select.options.length > 0) {
+        select.remove(0);
+      }
+
+      sheets.forEach(function(s) {
+        var opt = document.createElement("option");
+        opt.value = s.name;
+        opt.textContent = s.name + " (" + s.row_count + " rows)";
+        if (s.name === currentValue) opt.selected = true;
+        select.appendChild(opt);
+      });
+
+      // Select first sheet if no current value
+      if (!currentValue && select.options.length > 0) {
+        select.options[0].selected = true;
+      }
+    }
+
+    _loadMatchAttributeOptions() {
+      var self = this;
+      var headers = { "Accept": "application/json", "X-Requested-With": "XMLHttpRequest" };
+      var csrfToken = LcpRuby.csrfToken();
+      if (csrfToken) headers["X-CSRF-Token"] = csrfToken;
+
+      fetch(this.fieldsUrlValue, { headers: headers })
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+          var fields = (data.fields || []).concat(data.custom_fields || []);
+          self._populateMatchSelect(fields);
+        })
+        .catch(function(err) {
+          console.warn("[LcpRuby] Failed to load import fields for match_attribute:", err);
+        });
+    }
+
+    _populateMatchSelect(fields) {
+      if (!this.hasMatchAttributeTarget) return;
+      var select = this.matchAttributeTarget;
+      var currentValue = select.value;
+
+      // Keep the blank option
+      while (select.options.length > 1) {
+        select.remove(1);
+      }
+      if (select.options.length === 0) {
+        var blank = document.createElement("option");
+        blank.value = "";
+        blank.textContent = "";
+        select.appendChild(blank);
+      }
+
+      fields.forEach(function(f) {
+        var opt = document.createElement("option");
+        opt.value = f.name;
+        opt.textContent = f.label || f.name;
+        if (f.name === currentValue) opt.selected = true;
+        select.appendChild(opt);
+      });
+    }
+  });
+})();