spree_admin 5.1.7 → 5.2.0.rc1

data/app/javascript/spree/admin/application.js

@@ -34,29 +34,32 @@ if (typeof Stimulus === 'undefined') {
 }
 import AutoSubmit from '@stimulus-components/auto-submit'
 import CheckboxSelectAll from 'stimulus-checkbox-select-all'
+import Dialog from "@stimulus-components/dialog"
+import Dropdown from '@stimulus-components/dropdown'
 import TextareaAutogrow from 'stimulus-textarea-autogrow'
 import Notification from 'stimulus-notification'
 import PasswordVisibility from 'stimulus-password-visibility'
 import RailsNestedForm from '@stimulus-components/rails-nested-form'
 import Reveal from 'stimulus-reveal-controller'
 import Sortable from 'stimulus-sortable'
-import { Tabs } from 'tailwindcss-stimulus-components'
-
 import ActiveStorageUpload from 'spree/admin/controllers/active_storage_upload_controller'
 import AdminController from 'spree/admin/controllers/admin_controller'
 import AssetUploaderController from 'spree/admin/controllers/asset_uploader_controller'
 import AutocompleteSelectController from 'spree/admin/controllers/autocomplete_select_controller'
+import AutoScrollController from 'spree/admin/controllers/auto_scroll_controller'
 import BetterSliderController from 'spree/admin/controllers/better_slider_controller'
 import BlockFormController from 'spree/admin/controllers/block_form_controller'
-import BootstrapTabs from 'spree/admin/controllers/bootstrap_tabs_controller'
 import BulkOperationController from 'spree/admin/controllers/bulk_operation_controller'
 import CalculatorFieldsController from 'spree/admin/controllers/calculator_fields_controller'
 import CalendarRangeController from 'spree/admin/controllers/calendar_range_controller'
 import Clipboard from 'spree/admin/controllers/clipboard_controller'
+import CodeMirrorController from 'spree/admin/controllers/codemirror_controller'
 import ColorPaletteController from 'spree/admin/controllers/color_palette_controller'
 import ColorPickerController from 'spree/admin/controllers/color_picker_controller'
 import FiltersController from 'spree/admin/controllers/filters_controller'
 import FontPickerController from 'spree/admin/controllers/font_picker_controller'
+import HighlightController from 'spree/admin/controllers/highlight_controller'
+import ImportFormController from 'spree/admin/controllers/import_form_controller'
 import MediaFormController from 'spree/admin/controllers/media_form_controller'
 import MultiInputController from 'spree/admin/controllers/multi_input_controller'
 import MultiTomSelectController from 'spree/admin/controllers/multi_tom_select_controller'
@@ -75,9 +78,13 @@ import SelectController from 'spree/admin/controllers/select_controller'
 import SeoFormController from 'spree/admin/controllers/seo_form_controller'
 import SlugFormController from 'spree/admin/controllers/slug_form_controller'
 import StickyController from 'spree/admin/controllers/sticky_controller'
+import SortableAutoSubmit from 'spree/admin/controllers/sortable_auto_submit_controller'
 import SortableTree from 'spree/admin/controllers/sortable_tree_controller'
 import StockTransferController from 'spree/admin/controllers/stock_transfer_controller'
 import StoreFormController from 'spree/admin/controllers/store_form_controller'
+import TabsController from 'spree/admin/controllers/tabs_controller'
+import TooltipController from 'spree/admin/controllers/tooltip_controller'
+import TurboSubmitButtonController from 'spree/admin/controllers/turbo_submit_button_controller'
 import UnitSystemController from 'spree/admin/controllers/unit_system_controller'
 import VariantsFormController from 'spree/admin/controllers/variants_form_controller'
 import AddressAutocompleteController from 'spree/core/controllers/address_autocomplete_controller'
@@ -90,22 +97,30 @@ application.register('address-autocomplete', AddressAutocompleteController)
 application.register('address-form', AddressFormController)
 application.register('admin', AdminController)
 application.register('asset-uploader', AssetUploaderController)
+application.register('auto-scroll', AutoScrollController)
 application.register('auto-submit', AutoSubmit)
 application.register('autocomplete-select', AutocompleteSelectController)
 application.register('better-slider', BetterSliderController)
 application.register('block-form', BlockFormController)
-application.register('bootstrap-tabs', BootstrapTabs) // We should merge with tabs controller/remove this
+application.register('bulk-dialog', Dialog)
 application.register('bulk-operation', BulkOperationController)
 application.register('calculator-fields', CalculatorFieldsController)
 application.register('calendar-range', CalendarRangeController)
 application.register('checkbox-select-all', CheckboxSelectAll)
 application.register('clipboard', Clipboard)
+application.register('codemirror', CodeMirrorController)
 application.register('color-palette', ColorPaletteController)
 application.register('color-picker', ColorPickerController)
+application.register('dialog', Dialog)
+application.register('drawer', Dialog)
 application.register('disable-submit-button', DisableSubmitButtonController)
+application.register('dropdown', Dropdown)
 application.register('enable-button', EnableButtonController)
+application.register('export-dialog', Dialog)
 application.register('filters', FiltersController)
 application.register('font-picker', FontPickerController)
+application.register('highlight', HighlightController)
+application.register('import-form', ImportFormController)
 application.register('media-form', MediaFormController)
 application.register('multi-input', MultiInputController)
 application.register('multi-tom-select', MultiTomSelectController)
@@ -129,10 +144,13 @@ application.register('seo-form', SeoFormController)
 application.register('slug-form', SlugFormController)
 application.register('sticky', StickyController)
 application.register('sortable', Sortable)
+application.register('sortable-auto-submit', SortableAutoSubmit)
 application.register('sortable-tree', SortableTree)
 application.register('stock-transfer', StockTransferController)
 application.register('store-form', StoreFormController)
-application.register('tabs', Tabs)
+application.register('tabs', TabsController)
+application.register('tooltip', TooltipController)
+application.register('turbo-submit-button', TurboSubmitButtonController)
 application.register('textarea-autogrow', TextareaAutogrow)
 application.register('unit-system', UnitSystemController)
 application.register('variants-form', VariantsFormController)

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/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