nti_receipt_builder 0.1.0

data/app/assets/javascripts/nti_receipt_builder/receipt_properties_controller.js

@@ -0,0 +1,297 @@
+import { Controller } from "@hotwired/stimulus"
+
+function escapeHtml(value) {
+  return String(value ?? "").replace(/[&<>"']/g, (char) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  }[char]))
+}
+
+const FONT_SIZE_MIN = 6
+const FONT_SIZE_MAX = 72
+const LINE_HEIGHT_MIN = 0.8
+const LINE_HEIGHT_MAX = 3.0
+const ROW_SPACING_MIN = 0
+const ROW_SPACING_MAX = 10
+const Z_INDEX_MIN = 0
+const Z_INDEX_MAX = 1000
+const MIN_ELEMENT_DIMENSION_MM = 1.0
+const TEXT_MAX_LENGTH = 500
+const FALLBACK_MAX_LENGTH = 200
+const PREFIX_MAX_LENGTH = 50
+const SUFFIX_MAX_LENGTH = 50
+
+// Connects to data-controller="nrb-properties"
+export default class extends Controller {
+  static targets = ["content"]
+  static values = { scalarVariables: Object }
+
+  connect() {
+    this.boundKeydown = this.handleKeydown.bind(this)
+    document.addEventListener("keydown", this.boundKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.boundKeydown)
+  }
+
+  render(element) {
+    this.currentElement = element
+
+    if (!element) {
+      this.contentTarget.innerHTML =
+        '<p class="text-secondary nrb-receipt-hint">Select an element on the canvas to edit its properties.</p>'
+      return
+    }
+
+    this.contentTarget.innerHTML = this.templateFor(element)
+  }
+
+  fieldChanged(event) {
+    if (!this.currentElement) return
+
+    const field = event.params.field
+    const valueType = event.params.valueType || "string"
+    const value = this.readFieldValue(event.target, valueType)
+    const patch = this.buildPatch(field, value)
+
+    this.dispatch("changed", {
+      prefix: "receipt-properties",
+      bubbles: true,
+      detail: { id: this.currentElement.id, patch }
+    })
+  }
+
+  deleteElement() {
+    if (!this.currentElement) return
+
+    this.dispatch("delete-requested", {
+      prefix: "receipt-properties",
+      bubbles: true,
+      detail: { id: this.currentElement.id }
+    })
+  }
+
+  handleKeydown(event) {
+    if (event.key !== "Delete" && event.key !== "Backspace") return
+    if (!this.currentElement) return
+
+    const active = document.activeElement
+    const isTextEntry = active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.isContentEditable)
+    if (isTextEntry) return
+
+    event.preventDefault()
+    this.deleteElement()
+  }
+
+  readFieldValue(target, valueType) {
+    if (valueType === "boolean") return target.checked
+
+    if (valueType === "integer") {
+      const num = parseInt(target.value, 10)
+      return Number.isNaN(num) ? 0 : num
+    }
+
+    if (valueType === "number") {
+      const num = parseFloat(target.value)
+      return Number.isNaN(num) ? 0 : num
+    }
+
+    return target.value
+  }
+
+  buildPatch(field, value) {
+    const path = field.split(".")
+    if (path.length === 1) return { [path[0]]: value }
+
+    const [group, key] = path
+    return { [group]: { [key]: value } }
+  }
+
+  // Template building
+
+  templateFor(element) {
+    return [this.commonFieldsTemplate(element), this.typeFieldsTemplate(element), this.deleteButtonTemplate()].join("")
+  }
+
+  commonFieldsTemplate(element) {
+    return `
+      <div class="row g-2">
+        <div class="col-6">${this.numberField("X (mm)", "x_mm", element.x_mm, { min: 0, step: 0.1 })}</div>
+        <div class="col-6">${this.numberField("Y (mm)", "y_mm", element.y_mm, { min: 0, step: 0.1 })}</div>
+      </div>
+      <div class="row g-2">
+        <div class="col-6">${this.numberField("Width (mm)", "width_mm", element.width_mm, { min: MIN_ELEMENT_DIMENSION_MM, step: 0.1 })}</div>
+        <div class="col-6">${this.numberField("Height (mm)", "height_mm", element.height_mm, { min: MIN_ELEMENT_DIMENSION_MM, step: 0.1 })}</div>
+      </div>
+      <div class="row g-2">
+        <div class="col-6">${this.numberField("Layer (z-index)", "z_index", element.z_index || 0, { min: Z_INDEX_MIN, max: Z_INDEX_MAX, step: 1, valueType: "integer" })}</div>
+        <div class="col-6 d-flex align-items-end">${this.checkboxField("Visible", "visible", element.visible !== false)}</div>
+      </div>
+    `
+  }
+
+  typeFieldsTemplate(element) {
+    if (element.type === "variable") return this.variableFieldsTemplate(element)
+    if (element.type === "text") return this.textFieldsTemplate(element)
+    return this.orderLinesFieldsTemplate(element)
+  }
+
+  variableFieldsTemplate(element) {
+    return `
+      <hr class="my-3">
+      ${this.selectField("Variable", "variable_key", element.variable_key, this.scalarVariableOptions())}
+      ${this.textField("Prefix", "prefix", element.prefix, { maxlength: PREFIX_MAX_LENGTH })}
+      ${this.textField("Suffix", "suffix", element.suffix, { maxlength: SUFFIX_MAX_LENGTH })}
+      ${this.textField("Fallback (if empty)", "fallback", element.fallback, { maxlength: FALLBACK_MAX_LENGTH })}
+      <hr class="my-3">
+      ${this.styleFieldsTemplate(element.styles || {})}
+    `
+  }
+
+  textFieldsTemplate(element) {
+    return `
+      <hr class="my-3">
+      ${this.textareaField("Text", "text", element.text, { maxlength: TEXT_MAX_LENGTH })}
+      <hr class="my-3">
+      ${this.styleFieldsTemplate(element.styles || {})}
+    `
+  }
+
+  styleFieldsTemplate(styles) {
+    return `
+      <div class="row g-2">
+        <div class="col-6">${this.numberField("Font Size (pt)", "styles.font_size_pt", styles.font_size_pt || 10, { min: FONT_SIZE_MIN, max: FONT_SIZE_MAX, step: 1 })}</div>
+        <div class="col-6">${this.selectField("Weight", "styles.font_weight", styles.font_weight || "normal", [["Normal", "normal"], ["Bold", "bold"]])}</div>
+      </div>
+      <div class="row g-2">
+        <div class="col-6">${this.selectField("Align", "styles.text_align", styles.text_align || "left", [["Left", "left"], ["Center", "center"], ["Right", "right"]])}</div>
+        <div class="col-6">${this.numberField("Line Height", "styles.line_height", styles.line_height || 1.2, { min: LINE_HEIGHT_MIN, max: LINE_HEIGHT_MAX, step: 0.1 })}</div>
+      </div>
+    `
+  }
+
+  orderLinesFieldsTemplate(element) {
+    const config = element.config || {}
+    const columns = config.columns || []
+
+    const columnRows = columns
+      .map(
+        (column) => `
+      <tr>
+        <td>${escapeHtml(column.label)}</td>
+        <td>${escapeHtml(column.key)}</td>
+        <td>${escapeHtml(String(column.width_mm))}mm</td>
+        <td>${escapeHtml(column.align)}</td>
+      </tr>
+    `
+      )
+      .join("")
+
+    return `
+      <hr class="my-3">
+      <div class="row g-2">
+        <div class="col-6 d-flex align-items-end">${this.checkboxField("Show header row", "config.show_header", config.show_header !== false)}</div>
+        <div class="col-6">${this.numberField("Font Size (pt)", "config.font_size_pt", config.font_size_pt || 8, { min: FONT_SIZE_MIN, max: FONT_SIZE_MAX, step: 1 })}</div>
+      </div>
+      ${this.numberField("Row Spacing (mm)", "config.row_spacing_mm", config.row_spacing_mm != null ? config.row_spacing_mm : 1.0, { min: ROW_SPACING_MIN, max: ROW_SPACING_MAX, step: 0.1 })}
+      <label class="form-label mt-2">Columns</label>
+      <table class="table table-sm nrb-receipt-columns-table">
+        <thead><tr><th>Label</th><th>Key</th><th>Width</th><th>Align</th></tr></thead>
+        <tbody>${columnRows}</tbody>
+      </table>
+      <p class="text-secondary nrb-receipt-hint">Column layout isn&rsquo;t editable yet &mdash; shown for reference.</p>
+    `
+  }
+
+  deleteButtonTemplate() {
+    return `
+      <hr class="my-3">
+      <button type="button" class="btn btn-outline-danger w-100" data-action="click->nrb-properties#deleteElement">
+        <span class="material-symbols-outlined pe-1">delete</span>Delete Element
+      </button>
+    `
+  }
+
+  // Field builders
+
+  numberField(label, field, value, { min, max, step, valueType = "number" } = {}) {
+    const minAttr = min != null ? `min="${min}"` : ""
+    const maxAttr = max != null ? `max="${max}"` : ""
+    const stepAttr = step != null ? `step="${step}"` : ""
+
+    return `
+      <div class="form-group mb-3">
+        <label class="form-label">${escapeHtml(label)}</label>
+        <input type="number" class="form-control" value="${escapeHtml(value)}" ${minAttr} ${maxAttr} ${stepAttr}
+            data-nrb-properties-field-param="${field}"
+            data-nrb-properties-value-type-param="${valueType}"
+            data-action="input->nrb-properties#fieldChanged">
+      </div>
+    `
+  }
+
+  textField(label, field, value, { maxlength } = {}) {
+    return `
+      <div class="form-group mb-3">
+        <label class="form-label">${escapeHtml(label)}</label>
+        <input type="text" class="form-control" value="${escapeHtml(value)}" maxlength="${maxlength}"
+            data-nrb-properties-field-param="${field}"
+            data-nrb-properties-value-type-param="string"
+            data-action="input->nrb-properties#fieldChanged">
+      </div>
+    `
+  }
+
+  textareaField(label, field, value, { maxlength } = {}) {
+    return `
+      <div class="form-group mb-3">
+        <label class="form-label">${escapeHtml(label)}</label>
+        <textarea class="form-control" rows="3" maxlength="${maxlength}"
+            data-nrb-properties-field-param="${field}"
+            data-nrb-properties-value-type-param="string"
+            data-action="input->nrb-properties#fieldChanged">${escapeHtml(value)}</textarea>
+      </div>
+    `
+  }
+
+  checkboxField(label, field, checked) {
+    return `
+      <div class="form-check form-switch mb-3">
+        <input type="checkbox" class="form-check-input" ${checked ? "checked" : ""}
+            data-nrb-properties-field-param="${field}"
+            data-nrb-properties-value-type-param="boolean"
+            data-action="change->nrb-properties#fieldChanged">
+        <label class="form-check-label">${escapeHtml(label)}</label>
+      </div>
+    `
+  }
+
+  selectField(label, field, selected, options) {
+    const optionTags = options
+      .map(
+        ([optLabel, optValue]) =>
+          `<option value="${escapeHtml(optValue)}" ${optValue === selected ? "selected" : ""}>${escapeHtml(optLabel)}</option>`
+      )
+      .join("")
+
+    return `
+      <div class="form-group mb-3">
+        <label class="form-label">${escapeHtml(label)}</label>
+        <select class="form-select"
+            data-nrb-properties-field-param="${field}"
+            data-nrb-properties-value-type-param="string"
+            data-action="change->nrb-properties#fieldChanged">
+          ${optionTags}
+        </select>
+      </div>
+    `
+  }
+
+  scalarVariableOptions() {
+    return Object.entries(this.scalarVariablesValue).map(([key, label]) => [label, key])
+  }
+}

data/app/assets/stylesheets/nti_receipt_builder.css

@@ -0,0 +1,238 @@
+/* nti_receipt_builder — builder and print surfaces.
+   Assumes Tabler 1.x is present in the host layout for card/button/form chrome;
+   everything receipt-specific is defined here.
+
+   Geometry is deliberately absent from the shared element classes: position and size
+   always arrive inline from the builder JS or the print presenters, so builder-only
+   affordances stay scoped under `.nrb-receipt-paper-elements` and never leak into the
+   preview/print render partials that reuse the same bare class names. */
+
+/* Theming: set --nrb-accent (and --nrb-accent-rgb for the translucent fills) to tint the
+   builder's selection and palette affordances. Both fall back to Tabler's primary. */
+
+/* ---- Page header shared by the editor and preview pages ---- */
+.nrb-receipt-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-bottom: 1.25rem;
+}
+.nrb-receipt-topbar-name {
+  font-size: 1.3rem; font-weight: 800;
+  letter-spacing: -0.01em; color: var(--tblr-dark);
+  margin-right: 0.75rem;
+}
+
+/* ---- 3-column editor layout: settings+elements / canvas / properties ---- */
+.nrb-receipt-builder {
+  display: grid;
+  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) minmax(0, 19rem);
+  gap: 1.25rem;
+  align-items: start;
+}
+.nrb-receipt-builder-side { display: flex; flex-direction: column; gap: 1.25rem; }
+@media (max-width: 1200px) {
+  .nrb-receipt-builder { grid-template-columns: 1fr; }
+  .nrb-receipt-builder-side { flex-direction: row; flex-wrap: wrap; }
+  .nrb-receipt-builder-side > .nrb-receipt-panel { flex: 1 1 16rem; }
+}
+
+/* ---- Shared glass-panel chrome for the editor's 4 panels ---- */
+.nrb-receipt-panel {
+  position: relative;
+  border-radius: var(--tblr-card-border-radius, 1.25rem);
+  padding: 1.25rem;
+  background: #fff;
+  border: 1px solid rgba(31, 41, 55, 0.06);
+  box-shadow: 0 1.25rem 2.5rem -1.5rem rgba(31, 41, 55, 0.25);
+}
+.nrb-receipt-panel .card-title { margin-bottom: 0.85rem; }
+.nrb-receipt-panel--canvas { display: flex; flex-direction: column; gap: 1rem; }
+.nrb-receipt-hint { font-size: 0.82rem; margin: 0.5rem 0 0; }
+
+/* ---- Elements palette (draggable variable/block buttons) ---- */
+.nrb-receipt-palette-group + .nrb-receipt-palette-group { margin-top: 1.25rem; }
+.nrb-receipt-palette-label {
+  display: block;
+  font-size: 0.7rem; font-weight: 700;
+  letter-spacing: 0.05em; text-transform: uppercase;
+  color: var(--tblr-secondary);
+  margin-bottom: 0.6rem;
+}
+.nrb-receipt-palette { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.nrb-receipt-palette-btn {
+  display: inline-flex; align-items: center; gap: 0.4rem;
+  font-size: 0.8rem; font-weight: 600;
+  color: var(--tblr-dark);
+  background: rgba(var(--nrb-accent-rgb, var(--tblr-primary-rgb)), 0.07);
+  border: 1px solid rgba(var(--nrb-accent-rgb, var(--tblr-primary-rgb)), 0.15);
+  border-radius: 0.8rem;
+  padding: 0.4rem 0.7rem;
+  cursor: grab;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+.nrb-receipt-palette-btn .material-symbols-outlined {
+  font-size: 18px;
+  color: var(--nrb-accent, var(--tblr-primary));
+}
+.nrb-receipt-palette-btn:hover {
+  transform: translateY(-1px);
+  background: rgba(var(--nrb-accent-rgb, var(--tblr-primary-rgb)), 0.14);
+  box-shadow: 0 0.5rem 1rem -0.6rem rgba(var(--nrb-accent-rgb, var(--tblr-primary-rgb)), 0.6);
+}
+.nrb-receipt-palette-btn:active { cursor: grabbing; }
+
+/* ---- Canvas toolbar (title + zoom control) ---- */
+.nrb-receipt-toolbar {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 1rem; flex-wrap: wrap;
+}
+.nrb-receipt-zoom { display: flex; align-items: center; gap: 0.5rem; color: var(--tblr-secondary); }
+.nrb-receipt-zoom input[type="range"] { width: 8rem; }
+.nrb-receipt-zoom-label {
+  font-size: 0.8rem; font-weight: 700;
+  color: var(--tblr-dark);
+  min-width: 2.5rem; text-align: right;
+}
+
+/* ---- Scrollable canvas viewport + the builder-only paper surface.
+        `.nrb-receipt-paper-render` (preview/print) is a separate class —
+        the builder's `.nrb-receipt-paper` never appears in rendered output. ---- */
+.nrb-receipt-viewport {
+  flex: 1 1 auto;
+  min-height: 28rem;
+  max-height: 70vh;
+  overflow: auto;
+  padding: 2rem;
+  background: rgba(31, 41, 55, 0.03);
+  border: 1px solid rgba(31, 41, 55, 0.06);
+  border-radius: 1rem;
+}
+.nrb-receipt-paper {
+  position: relative;
+  margin: 0 auto;
+  background: #fff;
+  border: 1px solid rgba(31, 41, 55, 0.1);
+  box-shadow: 0 1.25rem 2.5rem -1.5rem rgba(31, 41, 55, 0.3);
+}
+/* margin guides: a visual-only inset overlay, never intercepts pointer events */
+.nrb-receipt-paper-margins {
+  position: absolute;
+  border: 1px dashed rgba(var(--tblr-primary-rgb), 0.35);
+  pointer-events: none;
+}
+.nrb-receipt-paper-elements { position: absolute; inset: 0; }
+
+/* ---- Canvas element — base rule is shared with the render/print partials,
+        so it must stay geometry-agnostic (position/left/top/width/height
+        are always supplied inline, either by receipt_canvas_controller.js
+        or by NtiReceiptBuilder::Presenters::Element#css_style / paper_style). ---- */
+.nrb-receipt-element {
+  position: absolute;
+  box-sizing: border-box;
+  overflow: hidden;
+  word-break: break-word;
+}
+.nrb-receipt-element-body { width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
+
+/* Builder-only interactive affordances — scoped so they never leak into
+   the preview/print pages, which reuse the bare `.nrb-receipt-element`. */
+.nrb-receipt-paper-elements .nrb-receipt-element {
+  cursor: move;
+  touch-action: none;
+  user-select: none;
+  transition: outline-color 0.15s ease;
+}
+.nrb-receipt-paper-elements .nrb-receipt-element:hover {
+  outline: 1px dashed rgba(var(--tblr-primary-rgb), 0.4);
+  outline-offset: 1px;
+}
+.nrb-receipt-paper-elements .nrb-receipt-element--selected {
+  outline: 2px solid var(--nrb-accent, var(--tblr-primary));
+  outline-offset: 1px;
+}
+.nrb-receipt-paper-elements .nrb-receipt-element--hidden {
+  opacity: 0.4;
+  outline: 1px dashed rgba(31, 41, 55, 0.35);
+  outline-offset: 1px;
+}
+.nrb-receipt-paper-elements .nrb-receipt-element-dragging,
+.nrb-receipt-paper-elements .nrb-receipt-element-resizing {
+  box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(31, 41, 55, 0.45);
+  cursor: grabbing;
+}
+.nrb-receipt-resize-handle {
+  position: absolute;
+  right: -5px; bottom: -5px;
+  width: 0.7rem; height: 0.7rem;
+  border-radius: 999px;
+  background: var(--nrb-accent, var(--tblr-primary));
+  border: 2px solid #fff;
+  box-shadow: 0 0.15rem 0.4rem rgba(31, 41, 55, 0.35);
+  cursor: nwse-resize;
+  touch-action: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.nrb-receipt-paper-elements .nrb-receipt-element:hover .nrb-receipt-resize-handle,
+.nrb-receipt-paper-elements .nrb-receipt-element--selected .nrb-receipt-resize-handle {
+  opacity: 1;
+}
+
+/* ---- Order-lines block — shared between the builder placeholder and the
+        real render partial; `-empty` only ever appears in rendered output. ---- */
+.nrb-receipt-order-lines { display: block; width: 100%; }
+/* `table-layout: fixed` + percentage <col> widths is what makes a row span the
+   element edge-to-edge; row height comes from the inline line-height so rows
+   sit directly under one another instead of in tall centred boxes. */
+.nrb-receipt-order-lines-table {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+/* Cells wrap rather than truncate: a receipt that hides half a product name is worse than one
+   that runs to a second line. `overflow-wrap: break-word` only splits a word that cannot fit its
+   column on its own — an unbroken SKU in a narrow column — so ordinary text still breaks at
+   spaces. Matches `.nrb-receipt-element`, which has wrapped all along. */
+.nrb-receipt-order-lines-table th,
+.nrb-receipt-order-lines-table td {
+  padding: 0;
+  white-space: normal;
+  overflow-wrap: break-word;
+  vertical-align: top;
+}
+.nrb-receipt-order-lines-header th {
+  font-weight: 700;
+  border-bottom: 1px solid rgba(31, 41, 55, 0.18);
+}
+.nrb-receipt-order-lines-empty td { text-align: center; }
+
+/* ---- Properties panel read-only column summary table ---- */
+.nrb-receipt-columns-table { font-size: 0.8rem; }
+.nrb-receipt-columns-table th {
+  color: var(--tblr-secondary);
+  font-weight: 700; text-transform: uppercase;
+  font-size: 0.68rem; letter-spacing: 0.04em;
+}
+
+/* ---- Preview / print. `.nrb-receipt-paper-render`'s on-screen elevation
+        (margin/border/box-shadow) is reset to nothing by print.html.erb's
+        inline <style>, since the printed page must be the bare receipt. ---- */
+.nrb-receipt-preview-frame {
+  padding: 2rem;
+  background: rgba(31, 41, 55, 0.03);
+  border-radius: 1.25rem;
+  overflow-x: auto;
+}
+.nrb-receipt-paper-render {
+  position: relative;
+  margin: 0 auto;
+  background: #fff;
+  border: 1px solid rgba(31, 41, 55, 0.08);
+  box-shadow: 0 1.25rem 2.5rem -1.5rem rgba(31, 41, 55, 0.3);
+}
+.nrb-receipt-overflow-banner { margin-bottom: 1.25rem; }
+.nrb-receipt-preview-modal .nrb-receipt-preview-frame { max-height: 65vh; overflow-y: auto; }
+