spree_backend 4.2.7 → 4.3.0.rc1

data/app/assets/javascripts/spree/backend/cms/section.es6

@@ -0,0 +1,43 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const sectionKindSelector = $('#cms_section_type').select2()
+  const layoutSwitcher = $('#cms_section_layout_style').select2()
+
+  sectionKindSelector.on('change', function() {
+    const selectedValue = $(sectionKindSelector).val()
+    const message = document.getElementById('alertToClickUpdate')
+    const activeSectionKind = document.getElementById('CmsSectionType')
+
+    if (!activeSectionKind) return
+
+    const panelType = activeSectionKind.dataset.panelSectionType
+
+    if (selectedValue === panelType) {
+      activeSectionKind.classList = ''
+      activeSectionKind.classList.add('d-block')
+
+      message.classList = ''
+      message.classList.add('d-none')
+    } else {
+      activeSectionKind.classList = ''
+      activeSectionKind.classList.add('d-none')
+
+      message.classList = ''
+      message.classList.add('d-block')
+    }
+  });
+
+  if (!layoutSwitcher) return
+
+  layoutSwitcher.on('change', function() {
+    const layoutDefault = document.querySelector('#Default')
+    const layoutReverse = document.querySelector('#Reversed')
+
+    if (this.value === 'Default') {
+      layoutDefault.classList = 'd-block'
+      layoutReverse.classList = 'd-none'
+    } else {
+      layoutDefault.classList = 'd-none'
+      layoutReverse.classList = 'd-block'
+    }
+  })
+})

data/app/assets/javascripts/spree/backend/global/_index.js

@@ -0,0 +1,11 @@
+//= require spree/backend/global/alerts
+//= require spree/backend/global/bootstrap
+//= require spree/backend/global/flatpickr
+//= require spree/backend/global/ransack
+//= require spree/backend/global/info_alert
+//= require spree/backend/global/radio_panel_toggle
+//= require spree/backend/global/responsive_menus
+//= require spree/backend/global/select2_autocomplete
+//= require spree/backend/global/select2_populate
+//= require spree/backend/global/sortable
+//= require spree/backend/global/side_scroll_indication

data/app/assets/javascripts/spree/backend/global/alerts.es6

@@ -0,0 +1,66 @@
+/* global Swal */
+
+document.addEventListener('DOMContentLoaded', function() {
+  const alertEl = document.querySelectorAll('[data-alert-type]')
+
+  if (!alertEl) return
+
+  alertEl.forEach(function (elem) {
+    const alertType = elem.dataset.alertType
+    const alertMessage = elem.innerHTML
+
+    show_flash(alertType, alertMessage)
+  })
+})
+
+// eslint-disable-next-line camelcase
+function show_flash(type, message) {
+  let sanitizedType = DOMPurify.sanitize(type)
+  const sanitizedMessage = DOMPurify.sanitize(message)
+
+  if (sanitizedType === 'notice') sanitizedType = 'info'
+
+  // Set up Swal toast alert defaults
+  const Toast = Swal.mixin({
+    toast: true,
+    position: 'bottom',
+    showConfirmButton: false,
+    showCloseButton: true,
+    timer: 4500,
+    timerProgressBar: false,
+    showClass: {
+      popup: 'animate__animated animate__fadeInUp animate__faster',
+      backdrop: '-',
+      icon: '-'
+    },
+    hideClass: {
+      popup: 'animate__animated animate__fadeOutDown animate__faster',
+      backdrop: '-',
+      icon: '-'
+    }
+  })
+
+  Toast.fire({
+    icon: sanitizedType,
+    title: sanitizedMessage
+  })
+
+  appendToFlashAlertsContainer(sanitizedMessage, sanitizedType)
+}
+
+function appendToFlashAlertsContainer (message, type) {
+  if (type === 'info') type = 'notice'
+
+  const parnetNode = document.querySelector('#FlashAlertsContainer')
+  const node = document.createElement('SPAN');
+  const textNode = document.createTextNode(message);
+
+  // Only the most recent alert should be left in the #FlashAlertsContainer.
+  parnetNode.innerHTML = ''
+
+  node.classList.add('d-none')
+  node.setAttribute('data-alert-type', type);
+  node.appendChild(textNode)
+
+  parnetNode.appendChild(node);
+}

data/app/assets/javascripts/spree/backend/global/api_functions.es6

@@ -0,0 +1,5 @@
+// eslint-disable-next-line no-unused-vars
+function spreeHandleApiRequestError (response) {
+  // eslint-disable-next-line no-undef
+  show_flash('error', `API Error: ${response}`)
+}

data/app/assets/javascripts/spree/backend/global/bootstrap.es6

@@ -0,0 +1,15 @@
+// Use this file for Boostrap customization applied across the Spree Backend
+
+document.addEventListener('DOMContentLoaded', function() {
+  $('.with-tip').each(function() {
+    $(this).tooltip({
+      container: $(this)
+    })
+  })
+
+  $('.with-tip').on('show.bs.tooltip', function(event) {
+    if (('ontouchstart' in window)) {
+      event.preventDefault()
+    }
+  })
+})

data/app/assets/javascripts/spree/backend/global/flatpickr.es6

@@ -0,0 +1,22 @@
+document.addEventListener('DOMContentLoaded', function() {
+  flatpickr.setDefaults({
+    altInput: true,
+    time_24hr: true,
+    altInputClass: 'flatpickr-alt-input',
+    locale: Spree.translations.flatpickr_locale
+  })
+
+  var dateFrom = flatpickr('.datePickerFrom', {
+    onChange: function(selectedDates) {
+      dateTo.set('minDate', selectedDates[0])
+    }
+  })
+
+  var dateTo = flatpickr('.datePickerTo', {
+    onChange: function(selectedDates) {
+      dateFrom.set('maxDate', selectedDates[0])
+    }
+  })
+
+  flatpickr('.datepicker', {})
+})

data/app/assets/javascripts/spree/backend/global/info_alert.es6

@@ -0,0 +1,38 @@
+/* global Swal */
+document.addEventListener('DOMContentLoaded', function() {
+  const infoToggle = document.querySelectorAll('[data-show-info]')
+
+  infoToggle.forEach(function(infoElem) {
+    infoElem.addEventListener('click', function() {
+      const alertType = infoElem.dataset.alertKind
+      const alertTitle = infoElem.dataset.alertTitle
+      const alertHtml = infoElem.dataset.alertHtml
+      const alertMessage = infoElem.dataset.alertMessage
+
+      showInfoAlert(alertType, alertTitle, alertMessage, alertHtml)
+    })
+  })
+})
+
+// eslint-disable-next-line no-unused-vars
+function showInfoAlert(type = null, title = null, message = null, html = null) {
+  const infoAlert = Swal.mixin({
+    showConfirmButton: false,
+    showCloseButton: true,
+    timer: null,
+    timerProgressBar: false,
+    showClass: {
+      popup: 'animate__animated animate__fadeInUp animate__faster'
+    },
+    hideClass: {
+      popup: 'animate__animated animate__fadeOutDown animate__faster'
+    }
+  })
+
+  infoAlert.fire({
+    icon: type,
+    title: title,
+    text: message,
+    html: html
+  })
+}

data/app/assets/javascripts/spree/backend/global/radio_panel_toggle.es6

@@ -0,0 +1,18 @@
+/**
+  radioControlsVisibilityOfElement:
+  Apply to individual radio button that makes another element visible when checked
+**/
+document.addEventListener('DOMContentLoaded', function() {
+  $.fn.radioControlsVisibilityOfElement = function(dependentElementSelector) {
+    if (!this.get(0)) { return }
+    var showValue = this.get(0).value
+    var radioGroup = $("input[name='" + this.get(0).name + "']")
+    radioGroup.each(function() {
+      $(this).click(function() {
+        // eslint-disable-next-line eqeqeq
+        $(dependentElementSelector).visible(this.checked && this.value == showValue)
+      })
+      if (this.checked) { this.click() }
+    })
+  }
+})

data/app/assets/javascripts/spree/backend/global/ransack.es6

@@ -0,0 +1,108 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const QuickSearchInput = document.getElementById('quick_search')
+
+  if (QuickSearchInput) {
+    const QuickSearchPlaceHolder = QuickSearchInput.placeholder
+    const TargetSearchFieldId = document.querySelector('input.js-quick-search-target').id
+    const AssociatedLabelName = document.querySelector(`label[for="${TargetSearchFieldId}"]`).innerHTML
+
+    QuickSearchInput.placeholder = `${QuickSearchPlaceHolder} ${AssociatedLabelName}`
+  }
+
+  $('.js-show-index-filters').click(function() {
+    $('.filter-well').slideToggle()
+    $(this).parents('.filter-wrap').toggleClass('collapsed')
+  })
+
+  // TODO: remove this js temp behaviour and fix this decent
+  // Temp quick search
+  // When there was a search term, copy it
+  $('.js-quick-search').val($('.js-quick-search-target').val())
+
+  // Catch the quick search form submit and submit the real form
+  $('#quick-search').submit(function() {
+    $('.js-quick-search-target').val($('.js-quick-search').val())
+    $('#table-filter form').submit()
+    return false
+  })
+
+  // Clickable ransack filters
+  $('.js-add-filter').click(function() {
+    var ransackField = $(this).data('ransack-field')
+    var ransackValue = $(this).data('ransack-value')
+
+    $('#' + ransackField).val(ransackValue)
+    $('#table-filter form').submit()
+  })
+
+  $(document).on('click', '.js-delete-filter', function() {
+    var ransackField = $(this).parents('.js-filter').data('ransack-field')
+
+    $('#' + ransackField).val('')
+    $('#table-filter form').submit()
+  })
+
+  function ransackField(value) {
+    switch (value) {
+      case 'Date Range':
+        return 'Start'
+      case '':
+        return 'Stop'
+      default:
+        return value.trim()
+    }
+  }
+
+  // To appear in the filtered options, the elements id attribute must start with 'q_',
+  // and it must have the class'.js-filterable'.
+  $('[id^="q_"].js-filterable').each(function() {
+    var $this = $(this)
+
+    if ($this.val() !== null && $this.val() !== '' && $this.val().length !== 0) {
+      var ransackValue, filter
+      var ransackFieldId = $this.attr('id')
+      var label = $('label[for="' + ransackFieldId + '"]')
+
+      if ($this.is('select')) {
+        ransackValue = $this.find('option:selected').toArray().map(function(option) {
+          return option.text;
+        }).join(', ')
+      } else {
+        ransackValue = $this.val()
+      }
+
+      label = ransackField(label.text()) + ': ' + ransackValue
+
+      var cleanLabel = DOMPurify.sanitize(label)
+
+      filter = '<span class="js-filter badge badge-secondary d-inline-flex align-items-center" data-ransack-field="' + ransackFieldId + '">' + cleanLabel + '<i class="icon icon-cancel ml-2 js-delete-filter"></i></span>'
+      $('.js-filters').append(filter).show()
+    }
+  })
+
+  // per page dropdown
+  // preserves all selected filters / queries supplied by user
+  // changes only per_page value
+  $('.js-per-page-select').change(function() {
+    var form = $(this).closest('.js-per-page-form')
+    var url = form.attr('action')
+    var value = $(this).val().toString()
+    if (url.match(/\?/)) {
+      url += '&per_page=' + value
+    } else {
+      url += '?per_page=' + value
+    }
+    window.location = url
+  })
+
+  // injects per_page settings to all available search forms
+  // so when user changes some filters / queries per_page is preserved
+  $(document).ready(function() {
+    var perPageDropdown = $('.js-per-page-select:first')
+    if (perPageDropdown.length) {
+      var perPageValue = perPageDropdown.val().toString()
+      var perPageInput = '<input type="hidden" name="per_page" value=' + perPageValue + ' />'
+      $('#table-filter form').append(perPageInput)
+    }
+  })
+})

data/app/assets/javascripts/spree/backend/global/responsive_menus.es6

@@ -0,0 +1,56 @@
+document.addEventListener('DOMContentLoaded', function() {
+  var body = $('body')
+  var modalBackdrop = $('#multi-backdrop')
+
+  // Fail safe on screen resize
+  var resizeTimer;
+  window.addEventListener('resize', function() {
+    document.body.classList.remove('modal-open', 'sidebar-open', 'contextualSideMenu-open');
+    document.body.classList.add('resize-animation-stopper');
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(function() {
+      document.body.classList.remove('resize-animation-stopper');
+    }, 400);
+  });
+
+  function closeAllMenus() {
+    body.removeClass()
+    body.addClass('admin')
+    modalBackdrop.removeClass('show')
+  }
+
+  modalBackdrop.click(closeAllMenus)
+
+  // Main Menu Functionality
+  var sidebarOpen = $('#sidebar-open')
+  var sidebarClose = $('#sidebar-close')
+  var activeItem = $('#main-sidebar').find('.selected')
+
+  activeItem.closest('.nav-sidebar').addClass('active-option')
+  activeItem.closest('.nav-pills').addClass('in show')
+
+  function openMenu() {
+    closeAllMenus()
+    body.addClass('sidebar-open modal-open')
+    modalBackdrop.addClass('show')
+  }
+  sidebarOpen.click(openMenu)
+  sidebarClose.click(closeAllMenus)
+
+  // Contextual Sidebar Menu
+  var contextualSidebarMenuToggle = $('#contextual-menu-toggle')
+  var contextualSidebarMenuClose = $('#contextual-menu-close')
+
+  function toggleContextualMenu() {
+    if (document.body.classList.contains('contextualSideMenu-open')) {
+      closeAllMenus()
+    } else {
+      closeAllMenus()
+      body.addClass('contextualSideMenu-open modal-open')
+      modalBackdrop.addClass('show')
+    }
+  }
+
+  contextualSidebarMenuToggle.click(toggleContextualMenu)
+  contextualSidebarMenuClose.click(toggleContextualMenu)
+})

data/app/assets/javascripts/spree/backend/global/select2_autocomplete.es6

@@ -0,0 +1,143 @@
+// SELECT2 AUTOCOMPLETE JS
+// This JavaScript file allows Spree developers to set up Select2 autocomplete search
+// using the API v2 by simply adding data attributes to a select element with the class: 'select2autocomplete'
+// as shown here: <select class="select2autocomplete"></select>.
+
+// REQUIRED ATTRIBUTES
+// You must provide a URL for the API V2, use the format shown below.
+// See the backend.js file for other API V2 URL's.
+//
+//  Example:
+//  data-autocomplete-url-value="products_api_v2"
+
+// OPTIONAL ATTRIBUTES
+// These optional attributes have sensible defaults, you many not need to use them in many cases,
+// but they do provide a powerful toolkit to refine your autocomplete search as required.
+//
+//  Examples:
+//  data-autocomplete-placeholder-value="Seach Pages"    <- Sets the placeholder | DEFAULT is: 'Search'
+//  data-autocomplete-clear-value="boolean"              <- Allow select2 to be cleared | DEFAULT is: false (no clear button)
+//  data-autocomplete-multiple-value="boolean"           <- Multiple or Single select | DEFAULT is: false (single)
+//  data-autocomplete-return-attr-value="pretty_name"    <- Return Attribute. | DEFAULT is: 'name'
+//  data-autocomplete-min-input-value="4"                <- Minimum input for search | DEFAULT is: 3
+//  data-autocomplete-search-query-value="title_i_cont"  <- Custom search query | DEFAULT is: 'name_i_cont'
+//  data-autocomplete-custom-return-id-value="permalink" <- Return a custom attribute rather than the ID | DEFAULT: returns id
+//
+// SECOND HARD CODED FILTER - (OPTIONAL)
+// Use a second hard coded search filter param and term if you require a little more curation
+// than just all results returning, an example of this in use can be seen in the menu_item search for Pages,
+// here we only want to retuen Pages that have linkable slugs, not homepages, and so we filter those using the
+// data attributes shown below.
+//
+//  Examples:
+//  data-autocomplete-additional-query-value="type_not_eq"                  <- Additional hard coded query | DEFAULT: null (not used)
+//  data-autocomplete-additional-term-value="Spree::Cms::Pages::Homepage"   <- Additional hard coded term | DEFAULT: null (not used)
+
+document.addEventListener('DOMContentLoaded', function() {
+  const select2Autocompletes = document.querySelectorAll('select.select2autocomplete')
+  select2Autocompletes.forEach(element => buildParamsFromDataAttrs(element))
+})
+
+function buildParamsFromDataAttrs (element) {
+  $(element).select2Autocomplete({
+    // Required Attributes
+    apiUrl: Spree.routes[element.dataset.autocompleteUrlValue],
+
+    // Optional Attributes
+    placeholder: element.dataset.autocompletePlaceholderValue,
+    allow_clear: element.dataset.autocompleteClearValue,
+    multiple: element.dataset.autocompleteMultipleValue,
+    return_attribute: element.dataset.autocompleteReturnAttrValue,
+    minimum_input: element.dataset.autocompleteMinInputValue,
+    search_query: element.dataset.autocompleteSearchQueryValue,
+    custom_return_id: element.dataset.autocompleteCustomReturnIdValue,
+
+    // Hard coded additional filter for those edge cases.
+    additional_query: element.dataset.autocompleteAdditionalQueryValue,
+    additional_term: element.dataset.autocompleteAdditionalTermValue
+  })
+}
+
+// Can also be called directly as javastript.
+$.fn.select2Autocomplete = function(params) {
+  // Required params
+  const apiUrl = params.apiUrl || null
+
+  // Optional Params
+  const select2placeHolder = params.placeholder || Spree.translations.search
+  const select2Multiple = params.multiple || false
+  const select2allowClear = params.allow_clear || false
+  const returnAttribute = params.return_attribute || 'name'
+  const minimumInput = params.minimum_input || 3
+  const searchQuery = params.search_query || 'name_i_cont'
+  const customReturnId = params.custom_return_id || null
+  const additionalQuery = params.additional_query || null
+  const additionalTerm = params.additional_term || null
+
+  function formatList(values) {
+    if (customReturnId) {
+      return values.map(function (obj) {
+        return {
+          id: obj.attributes[customReturnId],
+          text: obj.attributes[returnAttribute]
+        }
+      })
+    } else {
+      return values.map(function (obj) {
+        return {
+          id: obj.id,
+          text: obj.attributes[returnAttribute]
+        }
+      })
+    }
+  }
+
+  if (additionalQuery == null && additionalTerm == null) {
+    this.select2({
+      multiple: select2Multiple,
+      allowClear: select2allowClear,
+      placeholder: select2placeHolder,
+      minimumInputLength: minimumInput,
+      ajax: {
+        url: apiUrl,
+        headers: Spree.apiV2Authentication(),
+        data: function (params) {
+          return {
+            filter: {
+              [searchQuery]: params.term
+            }
+          }
+        },
+        processResults: function(json) {
+          return {
+            results: formatList(json.data)
+          }
+        }
+      }
+    })
+  } else {
+    this.select2({
+      multiple: select2Multiple,
+      allowClear: select2allowClear,
+      placeholder: select2placeHolder,
+      minimumInputLength: minimumInput,
+      ajax: {
+        url: apiUrl,
+        headers: Spree.apiV2Authentication(),
+        data: function (params) {
+          return {
+            filter: {
+              [searchQuery]: params.term,
+              [additionalQuery]: additionalTerm
+            }
+          }
+        },
+        processResults: function(json) {
+          return {
+            results: formatList(json.data)
+          }
+        }
+      }
+    })
+  }
+}

data/app/assets/javascripts/spree/backend/global/select2_populate.es6

@@ -0,0 +1,61 @@
+/**
+  populateSelectOptionsFromApi(params)
+
+  Allows you to easily fetch data from API (Platfrom v2)
+  and populate an empty <select> with <option> tags,
+  including a selected <option> tag.
+
+  ## EXAMPLE USE CASE called from ERB view file:
+
+  populateSelectOptionsFromApi({
+    targetElement: '#mySelectElement',
+    apiUrl: Spree.routes.taxons_api_v2,
+    returnAttribute: 'pretty_name',
+
+    <% if @menu_item.linked_resource_id %>
+      selectedOption: <%= @menu_item.linked_resource_id %>
+    <% end %>
+  })
+**/
+
+// eslint-disable-next-line no-unused-vars
+const populateSelectOptionsFromApi = function(params) {
+  createRequest(params, updateSelectSuccess, updateSelectError)
+}
+
+const handleErrors = function(response) {
+  if (!response.ok) throw new Error((response.status + ': ' + response.statusText))
+
+  return response.json()
+}
+
+const createRequest = function(params, succeed, fail) {
+  const targetElement = params.targetElement
+  const apiUrl = params.apiUrl
+  const returnAttribute = params.returnAttribute
+  const selectedOption = params.selectedOption
+  const selectEl = document.querySelector(targetElement)
+
+  fetch(apiUrl, { headers: Spree.apiV2Authentication() })
+    .then((response) => handleErrors(response))
+    .then((json) => succeed(json.data, returnAttribute, selectEl, selectedOption))
+    .catch((error) => fail(error, selectEl))
+}
+
+const updateSelectSuccess = function(parsedData, returnAttribute, selectEl, selectedOption) {
+  parsedData.forEach((object) => {
+    const optionEl = document.createElement('option')
+    optionEl.value = object.id
+    optionEl.innerHTML = object.attributes[returnAttribute]
+
+    if (parseInt(selectedOption, 10) === parseInt(object.id, 10)) optionEl.selected = true
+
+    selectEl.appendChild(optionEl)
+  })
+}
+
+const updateSelectError = function(error, selectEl) {
+  selectEl.disabled = true
+
+  console.log(error)
+}