spree_admin 5.0.0.rc1

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

@@ -0,0 +1,168 @@
+import { Controller } from '@hotwired/stimulus'
+
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import ImageEditor from '@uppy/image-editor'
+import ActiveStorageUpload from 'spree/admin/helpers/uppy_active_storage'
+
+export default class extends Controller {
+  static targets = ['thumb', 'toolbar', 'remove', 'placeholder']
+
+  static values = {
+    fieldName: String,
+    thumbWidth: Number,
+    thumbHeight: Number,
+    autoSubmit: Boolean,
+    multiple: { type: Boolean, default: false },
+    crop: { type: Boolean, default: false },
+    allowedFileTypes: { type: Array, default: [] }
+  }
+
+  connect() {
+    this.uppy = new Uppy({
+      autoProceed: true,
+      allowMultipleUploads: false,
+      restrictions: {
+        allowedFileTypes: this.allowedFileTypesValue.length ? this.allowedFileTypesValue : undefined
+      },
+      debug: true
+    })
+
+    this.uppy.use(ActiveStorageUpload, {
+      directUploadUrl: document.querySelector("meta[name='direct-upload-url']").getAttribute('content')
+    })
+
+    let dashboardOptions = {}
+    if (this.cropValue == true) {
+      dashboardOptions = {
+        autoOpen: 'imageEditor'
+      }
+    } else {
+      dashboardOptions = {
+        closeAfterFinish: true
+      }
+    }
+
+    this.uppy.use(Dashboard, dashboardOptions)
+
+    if (this.cropValue == true) {
+      this.uppy.use(ImageEditor, {
+        cropperOptions: {
+          aspectRatio: this.thumbWidthValue / this.thumbHeightValue
+        }
+      })
+    }
+
+    this.uppy.on('file-editor:complete', (updatedFile) => {
+      console.log('File editing complete:', updatedFile)
+      // Remove the old file from Uppy's file list
+      this.uppy.removeFile(updatedFile.id)
+      // Add the updated file to Uppy
+      this.uppy.addFile({
+        name: updatedFile.name,
+        type: updatedFile.type,
+        data: updatedFile.data,
+        source: 'local',
+        isRemote: false
+      })
+
+      this.handleUI(updatedFile)
+
+      this.uppy.getPlugin('Dashboard').closeModal()
+    })
+
+    this.uppy.on('upload-success', (file, response) => {
+      this.handleUI(file, response)
+    })
+
+    this.uppy.on('dashboard:modal-closed', () => {
+      this.uppy.clear()
+    })
+  }
+
+  open(event) {
+    event.preventDefault()
+    this.uppy.getPlugin('Dashboard').openModal()
+  }
+
+  remove(event) {
+    event.preventDefault()
+
+    if (window.confirm('Are you sure?')) {
+      if (this.hasThumbTarget) {
+        // handle thumb preview
+        this.thumbTarget.style = 'display: none !important'
+        this.thumbTarget.dataset.imageSignedId = null
+        this.thumbTarget.src = ''
+      }
+
+      // hide toolbar if attached
+      if (this.hasToolbarTarget) {
+        this.toolbarTarget.style = 'display: none !important'
+      }
+
+      // mark for removal (on the backend)
+      if (this.hasRemoveTarget) {
+        this.removeTarget.value = '1'
+      }
+
+      if (this.hasPlaceholderTarget) {
+        this.placeholderTarget.style.display = null
+      }
+
+      if (this.autoSubmitValue == true) {
+        this.element.closest('form').requestSubmit()
+      }
+
+      this.uppy.clear()
+    }
+  }
+
+  handleUI(file, response = null) {
+    this.placeholderTarget.style = 'display: none !important'
+
+    const signedId = response?.signed_id || file.response?.signed_id
+
+    if (signedId?.length) {
+      if (this.hasThumbTarget) {
+        this.thumbTarget.src = URL.createObjectURL(file.data)
+        this.thumbTarget.style.display = null
+        this.thumbTarget.dataset.imageSignedId = signedId
+        this.thumbTarget.width = this.thumbWidthValue
+        this.thumbTarget.height = this.thumbHeightValue
+      }
+
+      // Remove existing hidden field for this file, if any
+      const existingField = this.element.querySelector(`input[name="${this.fieldNameValue}"]`)
+      if (existingField) {
+        existingField.remove()
+      }
+
+      const hiddenField = document.createElement('input')
+
+      hiddenField.setAttribute('type', 'hidden')
+      hiddenField.setAttribute('value', signedId)
+
+      if (this.multipleValue) {
+        hiddenField.setAttribute('name', `${this.fieldNameValue}[]`)
+      } else {
+        hiddenField.setAttribute('name', this.fieldNameValue)
+      }
+
+      this.element.appendChild(hiddenField)
+    }
+
+    // show toolbar if attached
+    if (this.hasToolbarTarget) {
+      this.toolbarTarget.style.display = null
+    }
+
+    if (this.hasRemoveTarget) {
+      this.removeTarget.value = null
+    }
+
+    if (this.autoSubmitValue == true) {
+      this.element.closest('form').requestSubmit()
+    }
+  }
+}

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

@@ -0,0 +1,98 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = [
+    'country',
+    'state',
+    'stateName',
+    'stateLabel',
+    'stateArrow',
+    'zipcode'
+  ]
+
+  static values = {
+    countries: Array,
+    states: Array,
+    currentStateId: String
+  }
+
+  constructor(...args) {
+    super(...args)
+    this.changeCountry()
+  }
+
+  get country() {
+    return this.countriesValue.find(
+      (country) => country.id == this.countryTarget.value
+    )
+  }
+
+  get state() {
+    return this.statesValue.find((state) => state[1] == this.stateTarget.value)
+  }
+
+  get states() {
+    return this.statesValue.filter(
+      (state) => state[0] == this.countryTarget.value
+    )
+  }
+
+  changeCountry(_event) {
+    var form = document.querySelector('.address-form')
+    this.stateTarget.required = this.country.states_required
+    this.stateTarget.value = ''
+    this.stateTarget.innerHTML = ''
+
+    var allStates = this.stateTarget.parentNode.parentNode
+    var stateName = this.stateNameTarget
+    var stateSelector = this.stateTarget
+
+    if (this.country.states_required) {
+      this.stateLabelTarget.parentNode.parentNode.classList.remove('hidden')
+      form.classList.toggle('cols-2', false)
+
+      allStates.classList.remove('hidden')
+      allStates.classList.add('flex')
+      if (this.states.length > 0) {
+        stateSelector.classList.remove('hidden')
+        stateName.classList.add('hidden')
+
+        this.states.map((state) => {
+          const option = document.createElement('option')
+          option.value = state[1]
+          option.dataset.abbr = state[2]
+          option.text = state[3]
+
+          if (option.value == this.currentStateIdValue) {
+            option.selected = true
+          }
+
+          this.stateTarget.add(option)
+        })
+      } else {
+        stateName.classList.remove('hidden')
+        stateSelector.classList.add('hidden')
+      }
+    } else {
+      form.classList.toggle('cols-2', true)
+      allStates.classList.add('hidden')
+      allStates.classList.remove('flex')
+    }
+
+    this.zipcodeTarget.required = this.country.zipcode_required
+    if (this.country.zipcode_required) {
+      form.classList.toggle('col-1', false)
+      this.zipcodeTarget.parentNode.classList.remove('hidden')
+    } else {
+      if (!this.country.states_required) {
+        form.classList.toggle('col-1', true)
+        form.classList.toggle('cols-2', false)
+      } else {
+        form.classList.toggle('col-1', false)
+        form.classList.toggle('cols-2', true)
+      }
+      this.zipcodeTarget.parentNode.classList.add('hidden')
+      this.zipcodeTarget.value = null
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+import { Controller } from '@hotwired/stimulus'
+import { post } from '@rails/request.js'
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import ActiveStorageUpload from 'spree/admin/helpers/uppy_active_storage'
+
+export default class extends Controller {
+  static values = {
+    assetClass: { type: String, default: 'Spree::Image' },
+    viewableId: String,
+    viewableType: String,
+    multiple: { type: Boolean, default: false },
+    type: { type: String, default: 'image' },
+    allowedFileTypes: { type: Array, default: [] }
+  }
+
+  connect() {
+    this.uppy = new Uppy({
+      autoProceed: true,
+      allowMultipleUploads: this.multipleValue,
+      debug: true,
+      restrictions: {
+        allowedFileTypes: this.allowedFileTypesValue.length ? this.allowedFileTypesValue : undefined
+      }
+    })
+
+    this.uppy.use(ActiveStorageUpload, {
+      directUploadUrl: document.querySelector("meta[name='direct-upload-url']").getAttribute('content')
+    })
+
+    this.uppy.use(Dashboard, {
+      closeAfterFinish: true
+    })
+
+    this.uppy.on('upload-success', (file, response) => {
+      this.handleSuccessResult(response)
+    })
+  }
+
+  open(event) {
+    event.preventDefault()
+    this.uppy.getPlugin('Dashboard').openModal()
+  }
+
+  handleSuccessResult(response) {
+    post('/admin/assets', {
+      body: JSON.stringify({
+        asset: {
+          type: this.assetClassValue,
+          viewable_type: this.viewableTypeValue,
+          viewable_id: this.viewableIdValue,
+          attachment: response.signed_id
+        }
+      }),
+      responseKind: 'turbo-stream'
+    })
+  }
+}

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

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+import TomSelect from 'tom-select/dist/esm/tom-select.complete.js';
+
+// this is a very simple autocomplete select controller that uses TomSelect
+// by default it does not support remote data fetching or adding new options
+// that scenarios are handled in the more robust select_controller.js
+export default class extends Controller {
+  connect() {
+    let selectedValue = this.element.value
+
+    let plugins = []
+
+    if (this.element.multiple) {
+      plugins = ['remove_button']
+    }
+
+    this.select = new TomSelect(this.element ,{
+      create: false,
+      maxOptions: this.element.children.length,
+      selectOnTab: true,
+      allowEmptyOption: false,
+      plugins: plugins
+    })
+    if (!this.element.multiple) {
+      this.select.on('type', () => {
+        this.select.clear()
+      })
+      this.select.on('change', (value) => {
+        if (value) selectedValue = value
+      })
+      this.select.on('blur', () => {
+        this.select.setValue(selectedValue)
+      })
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['currentValueLabel', 'rangeInput']
+  static values = { labelForMin: String, unit: String }
+
+  connect() {
+    this.rangeInputTarget.addEventListener('input', this.updateCurrentValueLabel.bind(this))
+    this.updateCurrentValueLabel()
+  }
+
+  updateCurrentValueLabel() {
+    if (this.rangeInputTarget.value === this.rangeInputTarget.min && this.labelForMinValue.length) {
+      this.currentValueLabelTarget.innerText = this.labelForMinValue
+    } else {
+      this.currentValueLabelTarget.innerText = this.rangeInputTarget.value + this.unitValue
+    }
+  }
+
+  disconnect() {
+    this.rangeInputTarget.removeEventListener('input', this.updateCurrentValueLabel.bind(this))
+  }
+}

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

@@ -0,0 +1,11 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['form', 'type']
+
+  addBlock(event) {
+    event.preventDefault()
+    this.typeTarget.value = event.params.type
+    this.formTarget.requestSubmit()
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['input']
+
+  change({ params: { tab } }) {
+    this.inputTarget.value = tab
+  }
+}

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

@@ -0,0 +1,78 @@
+import CheckboxSelectAll from 'stimulus-checkbox-select-all'
+
+export default class extends CheckboxSelectAll {
+  static targets = ['panel', 'form', 'counter']
+
+  connect() {
+    super.connect()
+    this.togglePanel()
+    this.toggleRowBackground()
+  }
+
+  toggle(e) {
+    super.toggle(e)
+    this.togglePanel()
+    this.toggleRowBackground()
+  }
+
+  refresh() {
+    super.refresh()
+    this.togglePanel()
+    this.toggleRowBackground()
+  }
+
+  cancel(e) {
+    e.preventDefault()
+    this.checkboxTargets.forEach((checkbox) => {
+      checkbox.checked = false
+    })
+    this.checkboxAllTargets.forEach((checkbox) => {
+      checkbox.checked = false
+    })
+    this.hidePanel()
+    this.removeRowBackground()
+  }
+
+  hidePanel() {
+    this.panelTarget.classList.add('animate__fadeOutDown')
+    this.panelTarget.classList.add('d-none')
+  }
+
+  togglePanel() {
+    if (this.checked.length > 0) {
+      this.panelTarget.classList.remove('animate__fadeOutDown')
+      this.panelTarget.classList.remove('d-none')
+      if (this.counterTarget) {
+        this.counterTarget.textContent = this.checked.length
+      }
+    } else {
+      this.hidePanel()
+    }
+  }
+
+  removeRowBackground() {
+    this.element.querySelectorAll('tr').forEach((row) => {
+      row.classList.remove('active')
+    })
+  }
+
+  toggleRowBackground() {
+    this.element.querySelectorAll('tr').forEach((row) => {
+      row.classList.remove('active')
+    })
+    this.element.querySelectorAll('.row.active').forEach((row) => {
+      row.classList.remove('active')
+    })
+    this.checked.forEach((checkbox) => {
+      if (checkbox.closest('tr')) checkbox.closest('tr').classList.add('active')
+      else if (checkbox.closest('.row')) checkbox.closest('.row').classList.add('active')
+    })
+  }
+
+  setBulkAction(e) {
+    this.formTarget.action = e.target.dataset.url
+    if (e.target.dataset.method) {
+      this.formTarget.method = e.target.dataset.method
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["container"]
+
+  replaceFields(event) {
+    const selectedCalculator = event.target.value
+
+    const calculatorName = selectedCalculator
+      .split('::')
+      .pop()
+      .replace(/([A-Z])/g, '_$1')
+      .toLowerCase()
+      .replace(/^_/, '')
+
+    const template = document.getElementById(`${calculatorName}_fields`)
+    
+    if (template) {
+      this.containerTarget.innerHTML = template.innerHTML
+    } else {
+      console.error(`Template not found for calculator: ${selectedCalculator}`)
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+import { Controller } from "@hotwired/stimulus"
+import { easepick } from '@easepick/core';
+import { RangePlugin } from '@easepick/range-plugin';
+import { PresetPlugin } from '@easepick/preset-plugin';
+
+export default class extends Controller {
+  static targets = [ "picker", "dateFrom", "dateTo", "label" ]
+
+  connect() {
+    this.picker = new easepick.create({
+      element: this.pickerTarget,
+      inline: true,
+      css: [
+        'https://cdn.jsdelivr.net/npm/@easepick/core@1.2.0/dist/index.css',
+        'https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.0/dist/index.css',
+        'https://cdn.jsdelivr.net/npm/@easepick/preset-plugin@1.2.0/dist/index.css',
+      ],
+      doc: document,
+      plugins: [RangePlugin, PresetPlugin],
+      RangePlugin: {
+        tooltip: true,
+        startDate: this.dateFromTarget.value,
+        endDate: this.dateToTarget.value,
+      },
+      PresetPlugin: {
+        customLabels: ['Today', 'Yesterday',
+        'Last 7 Days', 'Last 30 Days',
+        'This Month', 'Last Month'],
+        position: 'left'
+      },
+    })
+
+    this.picker.on('render', () => {
+      this.picker.ui.container.style.boxShadow = 'none';
+    });
+
+    this.picker.on('select', (event) => {
+      const data = event.detail;
+      this.dateFromTarget.value = data.start
+      this.dateToTarget.value = data.end
+
+      // https://stackoverflow.com/questions/68624668/how-can-i-submit-a-form-on-input-change-with-turbo-streams
+      this.pickerTarget.closest('form').requestSubmit()
+
+      this.labelTarget.innerHTML = this.pickerTarget.innerHTML
+    })
+  }
+
+  open() {
+    this.picker.show()
+  }
+}

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

@@ -0,0 +1,17 @@
+import Clipboard from 'stimulus-clipboard'
+
+export default class extends Clipboard {
+  copy(event) {
+    event.preventDefault()
+
+    const text = this.sourceTarget.value || this.sourceTarget.innerHTML
+
+    // https://stackoverflow.com/questions/73148190/copy-html-content-to-clipboard
+    navigator.clipboard.write([new ClipboardItem({
+      'text/plain': new Blob([text], {type: 'text/plain'}),
+      'text/html': new Blob([text], {type: 'text/html'})
+    })])
+
+    this.copied()
+  }
+}

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

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [
+    "primaryColor",
+    "textColor",
+    "borderColor",
+    "buttonTextColor",
+    "backgroundColor"
+  ]
+
+  selectPalette(event) {
+    this.primaryColorTarget.value = event.params.primaryColor
+    this.textColorTarget.value = event.params.textColor
+    this.borderColorTarget.value = event.params.borderColor
+    this.buttonTextColorTarget.value = event.params.buttonTextColor
+    this.backgroundColorTarget.value = event.params.backgroundColor
+
+    // we need only one event to trigger the change
+    this.primaryColorTarget.dispatchEvent(new InputEvent('change'))
+  }
+}

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

@@ -0,0 +1,52 @@
+import { Controller } from "@hotwired/stimulus"
+import Pickr from '@simonwep/pickr'
+
+export default class extends Controller {
+  static targets = ["picker", "input", "display", "value"]
+  static values = { clear: Boolean, defaultColor: String }
+
+  initialize() {
+    this.initPicker();
+  }
+
+  initPicker() {
+    this.picker = Pickr.create({
+      el: this.pickerTarget,
+      theme: 'classic',
+      default: this.inputTarget.value.length > 0 ? this.inputTarget.value : this.defaultColorValue,
+      useAsButton: true,
+
+      components: {
+        preview: true,
+        opacity: true,
+        hue: true,
+
+        interaction: {
+          hex: true,
+          rgba: true,
+          hsla: false,
+          hsva: false,
+          cmyk: false,
+          input: true,
+          clear: this.hasClearValue ? this.clearValue : false,
+          save: false,
+          comparison: false,
+        },
+      },
+    })
+
+    this.picker.on('change', (color, _instance) => {
+      this.pickerTarget.style.background = color.toRGBA().toString(0);
+      this.inputTarget.value = color.toHEXA().toString()
+      this.valueTarget.innerHTML = color.toHEXA().toString()
+      this.inputTarget.dispatchEvent(new InputEvent('change'))
+    })
+
+    this.picker.on('clear', () => {
+      this.pickerTarget.style.background = 'white';
+      this.inputTarget.value = '';
+      this.valueTarget.innerHTML = '';
+      this.inputTarget.dispatchEvent(new InputEvent('change'))
+    })
+  }
+}

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

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "button"];
+  static values = {
+    allowBlank: { type: Boolean, default: false },
+    disableWhenNotChanged: { type: Boolean, default: false },
+  }
+
+  connect() {
+    this.buttonTarget.setAttribute("disabled", true);
+
+    if (this.inputTargets.every((input) => input.value || input.checked || this.allowBlankValue) && !this.disableWhenNotChangedValue) {
+      this.buttonTarget.removeAttribute("disabled");
+    }
+
+    this.inputTargets.forEach((input) => {
+      input.addEventListener("input", (event) => this.handleChange(event));
+    });
+  }
+
+  handleChange(event) {
+    if (this.inputTargets.every((input) => event.target.value || event.target.checked || this.allowBlankValue)) {
+      this.buttonTarget.removeAttribute("disabled");
+    } else {
+      this.buttonTarget.setAttribute("disabled", true);
+    }
+  }
+}