spree_admin 5.1.8 → 5.2.0.rc2

data/app/javascript/spree/admin/controllers/active_storage_upload_controller.js

@@ -15,7 +15,12 @@ export default class extends Controller {
     autoSubmit: Boolean,
     multiple: { type: Boolean, default: false },
     crop: { type: Boolean, default: false },
-    allowedFileTypes: { type: Array, default: [] }
+    allowedFileTypes: { type: Array, default: [] },
+    closeAfterFinish: { type: Boolean, default: true },
+    inline: { type: Boolean, default: false },
+    height: Number,
+    hideCancelButton: { type: Boolean, default: false },
+    disableThumbnailGenerator: { type: Boolean, default: false }
   }
 
   connect() {
@@ -33,17 +38,29 @@ export default class extends Controller {
       crop: this.cropValue
     })
 
-    let dashboardOptions = {}
+    let dashboardOptions = {
+      closeAfterFinish: this.closeAfterFinishValue
+    }
     if (this.cropValue == true) {
       dashboardOptions = {
-        autoOpen: 'imageEditor'
+        autoOpen: 'imageEditor',
+        closeAfterFinish: false
       }
-    } else {
-      dashboardOptions = {
-        closeAfterFinish: true
+    }
+
+    if (this.inlineValue == true) {
+      dashboardOptions.inline = true
+      dashboardOptions.closeAfterFinish = false
+      dashboardOptions.target = this.element
+      if (this.heightValue) {
+        dashboardOptions.height = this.heightValue
       }
+      dashboardOptions.doneButtonHandler = null
     }
 
+    dashboardOptions.hideCancelButton = this.hideCancelButtonValue
+    dashboardOptions.disableThumbnailGenerator = this.disableThumbnailGeneratorValue
+
     this.uppy.use(Dashboard, dashboardOptions)
 
     if (this.cropValue == true) {
@@ -110,7 +127,13 @@ export default class extends Controller {
   }
 
   handleUI(file, response = null) {
-    this.placeholderTarget.style = 'display: none !important'
+    if (this.hasPlaceholderTarget) {
+      this.placeholderTarget.style = 'display: none !important'
+    }
+
+    if (this.hasToolbarTarget) {
+      this.toolbarTarget.style = 'display: none !important'
+    }
 
     const signedId = response?.signed_id || file.response?.signed_id
 
@@ -141,6 +164,17 @@ export default class extends Controller {
       }
 
       this.element.appendChild(hiddenField)
+
+      // Propagate a custom 'active-storage-upload:success' event when upload completes and field updated
+      const event = new CustomEvent('active-storage-upload:success', {
+        detail: { 
+          file: file,
+          signedId: signedId,
+          controller: this 
+        },
+        bubbles: true
+      })
+      this.element.dispatchEvent(event)
     }
 
     // show toolbar if attached

data/app/javascript/spree/admin/controllers/admin_controller.js

@@ -3,15 +3,6 @@ import { Controller } from '@hotwired/stimulus'
 export default class extends Controller {
   static targets = ['close', 'save']
 
-  close(event) {
-    // https://github.com/hotwired/stimulus/issues/743
-    if (event.type == "keydown" && !(event instanceof KeyboardEvent)) return
-
-    if (this.hasCloseTarget) {
-      window.Turbo.visit(this.closeTarget.href)
-    }
-  }
-
   save(event) {
     // https://github.com/hotwired/stimulus/issues/743
     if (event.type == "keydown" && !(event instanceof KeyboardEvent)) return

data/app/javascript/spree/admin/controllers/auto_scroll_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    // Watch for new elements being added to this element
+    const observer = new MutationObserver(this.handleMutations.bind(this))
+    observer.observe(this.element, { childList: true })
+    this.observer = observer
+  }
+
+  disconnect() {
+    this.observer?.disconnect()
+  }
+
+  handleMutations(mutations) {
+    for (const mutation of mutations) {
+      if (mutation.addedNodes.length > 0) {
+        // Find the first added node that is not a HTML comment node
+        // Rails injects a HTML comments when rendering partials
+        const newNode = Array.from(mutation.addedNodes).find(
+          node => node.nodeType !== Node.COMMENT_NODE && node.nodeType !== Node.TEXT_NODE
+        )
+        if (newNode) {
+          this.scrollToElement(newNode)
+        }
+      }
+    }
+  }
+
+  scrollToElement(element) {
+    element.scrollIntoView({ behavior: "smooth", block: "end" })
+  }
+}

data/app/javascript/spree/admin/controllers/codemirror_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from '@hotwired/stimulus'
+import { EditorView, basicSetup } from 'codemirror'
+import { json } from '@codemirror/lang-json'
+import { EditorState } from '@codemirror/state'
+
+export default class extends Controller {
+  static targets = ['editor', 'input']
+  static values = {
+    language: { type: String, default: 'json' }
+  }
+
+  connect() {
+    const initialValue = this.inputTarget.value || ''
+
+    const extensions = [
+      basicSetup,
+      EditorView.lineWrapping,
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          this.inputTarget.value = update.state.doc.toString()
+        }
+      })
+    ]
+
+    // Add language support based on value
+    if (this.languageValue === 'json') {
+      extensions.push(json())
+    }
+
+    this.editorView = new EditorView({
+      doc: initialValue,
+      extensions: extensions,
+      parent: this.editorTarget
+    })
+
+    // Hide the original textarea
+    this.inputTarget.style.display = 'none'
+  }
+
+  disconnect() {
+    if (this.editorView) {
+      this.editorView.destroy()
+    }
+  }
+}

data/app/javascript/spree/admin/controllers/dropdown_controller.js

@@ -0,0 +1,154 @@
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+  size,
+} from "@floating-ui/dom"
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu", "toggle"]
+  static values = {
+    placement: { type: String, default: "bottom-start" },
+    offset: { type: Number, default: 4 },
+  }
+
+  connect() {
+    this._cleanup = null
+    this.boundUpdate = this.update.bind(this)
+    this._isOpen = false
+    this._toggleElement = null
+  }
+
+  disconnect() {
+    this.stopAutoUpdate()
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    // Store the toggle element that triggered this action
+    this._toggleElement = event.currentTarget
+
+    if (this._isOpen) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    if (this._isOpen) return
+
+    this.menuTarget.classList.remove("hidden")
+    this._isOpen = true
+
+    // Start automatic positioning
+    this.startAutoUpdate()
+
+    // Add event listener to close on outside click
+    this._outsideClickHandler = this.handleOutsideClick.bind(this)
+    document.addEventListener("click", this._outsideClickHandler)
+
+    // Add event listener to close on escape key
+    this._escapeHandler = this.handleEscape.bind(this)
+    document.addEventListener("keydown", this._escapeHandler)
+  }
+
+  close() {
+    if (!this._isOpen) return
+
+    this.menuTarget.classList.add("hidden")
+    this._isOpen = false
+
+    // Stop automatic positioning
+    this.stopAutoUpdate()
+
+    // Remove event listeners
+    if (this._outsideClickHandler) {
+      document.removeEventListener("click", this._outsideClickHandler)
+      this._outsideClickHandler = null
+    }
+
+    if (this._escapeHandler) {
+      document.removeEventListener("keydown", this._escapeHandler)
+      this._escapeHandler = null
+    }
+  }
+
+  hide(event) {
+    // This method is called from the action: click@window->dropdown#hide
+    // Only close if clicking outside the dropdown element
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  handleOutsideClick(event) {
+    // Close dropdown if clicking outside
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  handleEscape(event) {
+    if (event.key === "Escape") {
+      this.close()
+    }
+  }
+
+  startAutoUpdate() {
+    if (!this._cleanup) {
+      const referenceElement = this.hasToggleTarget ? this.toggleTarget : (this._toggleElement || this.element)
+      this._cleanup = autoUpdate(
+        referenceElement,
+        this.menuTarget,
+        this.boundUpdate,
+      )
+    }
+  }
+
+  stopAutoUpdate() {
+    if (this._cleanup) {
+      this._cleanup()
+      this._cleanup = null
+    }
+  }
+
+  update() {
+    // Use the toggle target if available, or the stored toggle element, or fall back to the controller element
+    const referenceElement = this.hasToggleTarget ? this.toggleTarget : (this._toggleElement || this.element)
+
+    computePosition(referenceElement, this.menuTarget, {
+      placement: this.placementValue,
+      middleware: [
+        offset(this.offsetValue),
+        flip({
+          fallbackAxisSideDirection: "start",
+          padding: 8,
+        }),
+        shift({ padding: 8 }),
+        size({
+          apply({ availableWidth, availableHeight, elements }) {
+            // Ensure dropdown doesn't exceed viewport
+            Object.assign(elements.floating.style, {
+              maxWidth: `${availableWidth}px`,
+              maxHeight: `${availableHeight}px`,
+              overflow: "auto",
+            })
+          },
+          padding: 8,
+        }),
+      ],
+    }).then(({ x, y }) => {
+      Object.assign(this.menuTarget.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+        position: "absolute",
+      })
+    })
+  }
+}

data/app/javascript/spree/admin/controllers/highlight_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus'
+import hljs from '@highlightjs/cdn-assets/es/core.min.js'
+import json from '@highlightjs/cdn-assets/es/languages/json.min.js'
+
+export default class extends Controller {
+  static targets = ['code']
+
+  connect() {
+    // Register the JSON language
+    hljs.registerLanguage('json', json)
+
+    // Highlight all code blocks
+    this.codeTargets.forEach((block) => {
+      hljs.highlightElement(block)
+    })
+  }
+}

data/app/javascript/spree/admin/controllers/import_form_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["button"]
+
+  connect() {
+    this.element.addEventListener('active-storage-upload:success', this.enableButton.bind(this))
+    this.element.addEventListener('active-storage-upload:error', this.disableButton.bind(this))
+  }
+
+  disconnect() {
+    this.element.removeEventListener('active-storage-upload:success', this.enableButton.bind(this))
+    this.element.removeEventListener('active-storage-upload:error', this.disableButton.bind(this))
+  }
+
+  enableButton(event) {
+    if (this.hasButtonTarget) {
+      this.buttonTarget.disabled = false
+    }
+  }
+
+  disableButton(event) {
+    if (this.hasButtonTarget) {
+      this.buttonTarget.disabled = true
+    }
+  }
+}

data/app/javascript/spree/admin/controllers/sortable_auto_submit_controller.js

@@ -0,0 +1,10 @@
+import Sortable from "stimulus-sortable"
+
+export default class extends Sortable {
+  async onUpdate({ item, newIndex }) {
+    const form = item.closest('form')
+    if (form) {
+      form.requestSubmit()
+    }
+  }
+}

data/app/javascript/spree/admin/controllers/stock_transfer_controller.js

@@ -21,18 +21,19 @@ export default class extends NestedForm {
   }
 
   updateDestinationLocation({ target: { value } }) {
-    const variantAddButtonTooltip = this.newVariantAddButtonTarget.querySelector('.with-tip')
+    const tooltipController = this.newVariantAddButtonTarget.querySelector('[data-controller*="tooltip"]')
 
     if (value != '') {
       this.newVariantAddButtonTarget.removeAttribute('disabled')
 
-      this.variantAddButtonTooltipTitle = variantAddButtonTooltip.getAttribute('data-original-title')
-      variantAddButtonTooltip.setAttribute('data-original-title', '')
+      // Enable tooltip by showing it when appropriate
+      if (tooltipController) {
+        // The Stimulus tooltip controller will handle visibility automatically
+      }
     } else {
       this.newVariantAddButtonTarget.setAttribute('disabled', '')
 
-      if (this.variantAddButtonTooltipTitle)
-        variantAddButtonTooltip.setAttribute('data-original-title', this.variantAddButtonTooltipTitle)
+      // The Stimulus tooltip controller will handle disabled state automatically
     }
 
     this.destinationInputTargets.forEach((input) => {

data/app/javascript/spree/admin/controllers/tabs_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ["tab", "panel"]
+  static values = {
+    activeTabClass: { type: String, default: "active" }
+  }
+
+  select(event) {
+    const index = this.tabTargets.indexOf(event.currentTarget);
+    this.showTab(index);
+  }
+
+  showTab(index) {
+    this.tabTargets.forEach((tab, i) => {
+      const active = i === index;
+      tab.classList.toggle(this.activeTabClassValue, active);
+      this.panelTargets[i].hidden = !active;
+    });
+  }
+}

data/app/javascript/spree/admin/controllers/tooltip_controller.js

@@ -0,0 +1,136 @@
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+} from "@floating-ui/dom"
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["tooltip"]
+  static values = {
+    placement: { type: String, default: "top" },
+    offset: { type: Number, default: 10 },
+    crossAxis: { type: Number, default: 0 },
+    alignmentAxis: { type: Number, default: null },
+  }
+
+  connect() {
+    this._cleanup = null
+    this.boundUpdate = this.update.bind(this)
+    this._originalWidth = null
+    this._isShown = false
+    this.startAutoUpdate()
+    this.addEventListeners()
+    this.prepareTooltip()
+  }
+
+  disconnect() {
+    this.removeEventListeners()
+    this.stopAutoUpdate()
+    this.resetTooltip()
+  }
+
+  addEventListeners() {
+    this.element.addEventListener("mouseenter", this.show)
+    this.element.addEventListener("mouseleave", this.hide)
+  }
+
+  removeEventListeners() {
+    this.element.removeEventListener("mouseenter", this.show)
+    this.element.removeEventListener("mouseleave", this.hide)
+  }
+
+  prepareTooltip() {
+    // Ensure tooltip is rendered offscreen but measurable
+    if (this.tooltipTarget) {
+      // Save original display
+      this._originalDisplay = this.tooltipTarget.style.display
+      // Temporarily show tooltip offscreen to measure size
+      this.tooltipTarget.style.visibility = "hidden"
+      this.tooltipTarget.style.display = "block"
+      this.tooltipTarget.style.left = "-9999px"
+      this.tooltipTarget.style.top = "-9999px"
+      // Force reflow and measure
+      this._originalWidth = this.tooltipTarget.offsetWidth + 10
+      // Height is now dynamic, so we do not set or store it
+      this.tooltipTarget.style.width = `${this._originalWidth}px`
+      this.tooltipTarget.style.height = "" // Remove any fixed height
+      // Hide again
+      this.tooltipTarget.style.display = "none"
+      this.tooltipTarget.style.visibility = ""
+      this.tooltipTarget.style.left = ""
+      this.tooltipTarget.style.top = ""
+    }
+  }
+
+  resetTooltip() {
+    if (this.tooltipTarget) {
+      this.tooltipTarget.style.width = ""
+      this.tooltipTarget.style.height = ""
+      this.tooltipTarget.style.display = this._originalDisplay || ""
+    }
+  }
+
+  show = () => {
+    if (!this._isShown) {
+      this.tooltipTarget.style.display = "block"
+      this.tooltipTarget.style.visibility = "visible"
+      // Set explicit width, but let height be dynamic
+      if (this._originalWidth) {
+        this.tooltipTarget.style.width = `${this._originalWidth}px`
+        this.tooltipTarget.style.height = ""
+      }
+      this.update() // Ensure immediate update when shown
+      this._isShown = true
+    }
+  }
+
+  hide = () => {
+    if (this._isShown) {
+      this.tooltipTarget.style.display = "none"
+      this.tooltipTarget.style.visibility = ""
+      // Keep width set to prevent flicker if quickly re-hovered
+      this._isShown = false
+    }
+  }
+
+  startAutoUpdate() {
+    if (!this._cleanup) {
+      this._cleanup = autoUpdate(
+        this.element,
+        this.tooltipTarget,
+        this.boundUpdate,
+      )
+    }
+  }
+
+  stopAutoUpdate() {
+    if (this._cleanup) {
+      this._cleanup()
+      this._cleanup = null
+    }
+  }
+
+  update() {
+    // Update position even if not visible, to ensure correct positioning when shown
+    computePosition(this.element, this.tooltipTarget, {
+      placement: this.placementValue,
+      middleware: [
+        offset({
+          mainAxis: this.offsetValue,
+          crossAxis: this.crossAxisValue,
+          alignmentAxis: this.alignmentAxisValue,
+        }),
+        flip(),
+        shift({ padding: 5 }),
+      ],
+    }).then(({ x, y }) => {
+      Object.assign(this.tooltipTarget.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+    })
+  }
+}

data/app/javascript/spree/admin/controllers/turbo_submit_button_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  // we need to preserve the width of the button so it won't change after we replace the text with the spinner
+  connect() {
+    // Handle hidden elements or dynamically added elements by checking if dimensions are available
+    if (this.element.offsetWidth > 0 && this.element.offsetHeight > 0) {
+      this.originalWidth = this.element.offsetWidth
+      this.originalHeight = this.element.offsetHeight
+    }
+    this.element.style.width = `${this.originalWidth+10}px`
+    this.element.style.height = `${this.originalHeight}px`
+  }
+}

data/app/javascript/spree/admin/helpers/bootstrap.js

@@ -4,11 +4,11 @@ import { lockScroll, unlockScroll } from 'spree/core/helpers/scroll_lock'
 
 
 const initTooltips = () => {
-  $('.with-tip, .trix-button, .uppy-Dashboard-close, time').each(function() {
+  $('.with-tip, .trix-button, .uppy-Dashboard-close').each(function() {
     $(this).tooltip()
   })
 
-  $('.with-tip, .trix-button, .uppy-Dashboard-close, time').on('show.bs.tooltip', function(event) {
+  $('.with-tip, .trix-button, .uppy-Dashboard-close').on('show.bs.tooltip', function(event) {
     if (('ontouchstart' in window)) {
       event.preventDefault()
     }
@@ -16,12 +16,14 @@ const initTooltips = () => {
 }
 
 const removeTooltips = () => {
-  $('.with-tip, .trix-button, .uppy-Dashboard-close, time').each(function() {
+  $('.with-tip, .trix-button, .uppy-Dashboard-close').each(function() {
     $(this).tooltip('dispose')
   })
 }
 
 const resetDialogModal = () => {
+  console.warn('resetDialogModal is deprecated and will be removed in Spree 6')
+
   const modalElement = document.getElementById('dialog_modal')
   const modalTitle = modalElement ? modalElement.querySelector('.modal-title') : null
   const modalBody = modalElement ? modalElement.querySelector('.modal-body') : null