spree_backend 4.1.10 → 4.2.0.rc2

data/app/assets/images/backend-void.svg

@@ -0,0 +1,7 @@
+<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"  style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(5.37908e-15,-16.6134,-16.6134,-5.37908e-15,470.536,472.199)">
+        <path d="M14.061,12.927L24.78,23.646C25.073,23.939 25.073,24.414 24.78,24.707C24.487,25 24.013,25 23.72,24.707L13,13.987L2.28,24.707C1.987,25 1.513,25 1.22,24.707C0.927,24.414 0.927,23.939 1.22,23.646L11.939,12.927L1.22,2.207C0.927,1.914 0.927,1.439 1.22,1.146C1.366,1 1.558,0.927 1.75,0.927C1.942,0.927 2.134,1 2.28,1.146L13,11.866L23.72,1.146C23.866,1 24.058,0.927 24.25,0.927C24.442,0.927 24.634,1 24.78,1.146C25.073,1.439 25.073,1.914 24.78,2.207L14.061,12.927Z" style="fill-rule:nonzero;stroke:currentColor;stroke-width:2.05px;"/>
+    </g>
+</svg>
+
+<!-- CANCEL CLOSE VOID-->

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

@@ -1,13 +1,15 @@
 //= require modernizr
+//= require purify
+//= require sortable
+//= require flatpickr
 //= require jquery3
 //= require popper
 //= require bootstrap-sprockets
 //= require handlebars
+//= require cleave
 //= require js.cookie
 //= require jquery.jstree/jquery.jstree
 //= require jquery_ujs
-//= require jquery-ui/widgets/datepicker
-//= require jquery-ui/widgets/sortable
 //= require jquery-ui/widgets/autocomplete
 //= require select2
 //= require underscore-min.js
@@ -24,6 +26,7 @@
 //= require spree/backend/handlebar_extensions
 //= require spree/backend/line_items
 //= require spree/backend/line_items_on_order_edit
+//= require spree/backend/multi_currency
 //= require spree/backend/option_type_autocomplete
 //= require spree/backend/option_value_picker
 //= require spree/backend/orders/edit

data/app/assets/javascripts/spree/backend/admin.js

@@ -4,74 +4,83 @@ under the spree namespace that do stuff we find helpful.
 Hopefully, this will evolve into a propper class.
 **/
 
-/* global Cookies, AUTH_TOKEN, order_number */
+/* global AUTH_TOKEN, order_number, Sortable, flatpickr, DOMPurify */
+
+//= require spree/backend/flatpickr_locals
 
 jQuery(function ($) {
   // Add some tips
-  $('.with-tip').tooltip()
+  $('.with-tip').each(function() {
+    $(this).tooltip({
+      container: $(this)
+    })
+  })
+
+  $('.with-tip').on('show.bs.tooltip', function(event) {
+    if (('ontouchstart' in window)) {
+      event.preventDefault()
+    }
+  })
 
   $('.js-show-index-filters').click(function () {
     $('.filter-well').slideToggle()
     $(this).parents('.filter-wrap').toggleClass('collapsed')
-    $('span.icon', $(this)).toggleClass('icon-chevron-down')
   })
 
-  $('#main-sidebar').find('[data-toggle="collapse"]').on('click', function () {
-    if ($(this).find('.icon-chevron-left').length === 1) {
-      $(this).find('.icon-chevron-left').removeClass('icon-chevron-left').addClass('icon-chevron-down')
-    } else {
-      $(this).find('.icon-chevron-down').removeClass('icon-chevron-down').addClass('icon-chevron-left')
-    }
-  })
-
-  // Sidebar nav toggle functionality
-  var sidebar_toggle = $('#sidebar-toggle')
+  // Responsive Menus
+  var body  = $('body')
+  var modalBackdrop  = $('#multi-backdrop')
+
+  // Fail safe on 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')
+  }
 
-  sidebar_toggle.on('click', function() {
-    var wrapper = $('#wrapper')
-    var main    = $('#main-part')
-    var sidebar = $('#main-sidebar')
-    var version = $('.spree-version')
-    var collapsed = sidebar.find('[aria-expanded="true"]')
-    var collapsedIcons = sidebar.find('.icon-chevron-down')
+  modalBackdrop.click(closeAllMenus)
 
-    wrapper.toggleClass('sidebar-minimized')
+  // Main Menu Functionality
+  var sidebarOpen    = $('#sidebar-open')
+  var sidebarClose   = $('#sidebar-close')
+  var activeItem     = $('#main-sidebar').find('.selected')
 
-    collapsed
-      .attr('aria-expanded', 'false')
-      .next()
-      .removeClass('show')
+  activeItem.closest('.nav-sidebar').addClass('active-option')
+  activeItem.closest('.nav-pills').addClass('in show')
 
-    collapsedIcons
-      .removeClass('icon-chevron-down')
-      .addClass('icon-chevron-left')
+  function openMenu() {
+    closeAllMenus()
+    body.addClass('sidebar-open modal-open')
+    modalBackdrop.addClass('show')
+  }
+  sidebarOpen.click(openMenu)
+  sidebarClose.click(closeAllMenus)
 
-    // these should match `spree/backend/app/helpers/spree/admin/navigation_helper.rb#main_part_classes`
-    main
-      .toggleClass('col-12 sidebar-collapsed')
-      .toggleClass('col-9 offset-3 col-md-10 offset-md-2')
+  // Contextual Sidebar Menu
+  var contextualSidebarMenuToggle = $('#contextual-menu-toggle')
+  var contextualSidebarMenuClose = $('#contextual-menu-close')
 
-    if (wrapper.hasClass('sidebar-minimized')) {
-      Cookies.set('sidebar-minimized', 'true', { path: '/admin' })
-      version.removeClass('d-md-block')
+  function toggleContextualMenu() {
+    if (document.body.classList.contains('contextualSideMenu-open')) {
+      closeAllMenus()
     } else {
-      Cookies.set('sidebar-minimized', 'false', { path: '/admin' })
-      version.addClass('d-md-block')
-    }
-  })
-
-  $('.sidebar-menu-item').mouseover(function () {
-    if ($('#wrapper').hasClass('sidebar-minimized')) {
-      $(this).addClass('menu-active')
-      $(this).find('ul.nav').addClass('submenu-active')
+      closeAllMenus()
+      body.addClass('contextualSideMenu-open modal-open')
+      modalBackdrop.addClass('show')
     }
-  })
-  $('.sidebar-menu-item').mouseout(function () {
-    if ($('#wrapper').hasClass('sidebar-minimized')) {
-      $(this).removeClass('menu-active')
-      $(this).find('ul.nav').removeClass('submenu-active')
-    }
-  })
+  }
+  contextualSidebarMenuToggle.click(toggleContextualMenu)
+  contextualSidebarMenuClose.click(toggleContextualMenu)
 
   // TODO: remove this js temp behaviour and fix this decent
   // Temp quick search
@@ -84,28 +93,6 @@ jQuery(function ($) {
     return false
   })
 
-  // Main menu active item submenu show
-  var active_item = $('#main-sidebar').find('.selected')
-  active_item.closest('.nav-pills').addClass('in show')
-  active_item.closest('.nav-sidebar')
-    .find('.icon-chevron-left')
-    .removeClass('icon-chevron-left')
-    .addClass('icon-chevron-down')
-
-  // Replace ▼ and ▲ in sort_link with nicer icons
-  $('.sort_link').each(function () {
-    // Remove the &nbsp in the text
-    var sortLinkText = $(this).text().replace('\xA0', '')
-
-    if (sortLinkText.indexOf('▼') >= 0) {
-      $(this).text(sortLinkText.replace('▼', ''))
-      $(this).append('<span class="icon icon-chevron-down"></span>')
-    } else if (sortLinkText.indexOf('▲') >= 0) {
-      $(this).text(sortLinkText.replace('▲', ''))
-      $(this).append('<span class="icon icon-chevron-up"></span>')
-    }
-  })
-
   // Clickable ransack filters
   $('.js-add-filter').click(function () {
     var ransackField = $(this).data('ransack-field')
@@ -136,20 +123,23 @@ jQuery(function ($) {
   $('.js-filterable').each(function () {
     var $this = $(this)
 
-    if ($this.val()) {
+    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').text()
+        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" data-ransack-field="' + ransackFieldId + '">' + label + '<span class="icon icon-delete js-delete-filter"></span></span>'
+      filter = '<span class="js-filter badge badge-secondary" data-ransack-field="' + ransackFieldId + '">' + cleanLabel + '<i class="icon icon-cancel ml-2 js-delete-filter"></i></span>'
       $(".js-filters").append(filter).show()
     }
   })
@@ -179,20 +169,46 @@ jQuery(function ($) {
       $('#table-filter form').append(perPageInput)
     }
   })
+})
+
+function handleAlert (element) {
+  element.classList.add('animate__animated', 'animate__bounceInUp')
+  element.addEventListener('animationend', function () {
+    element.classList.remove('animate__bounceInUp')
+    element.classList.add('animate__fadeOutDownBig', 'animate__delay-3s')
+  })
+}
 
-  // Make flash messages disappear
-  setTimeout(function () { $('.alert-auto-disappear').slideUp() }, 5000)
+// Triggers alert if required on document ready.
+$(document).ready(function () {
+  var element = document.querySelector('.flash-alert')
+
+  if (element) {
+    handleAlert(element)
+  }
 })
 
 $.fn.visible = function (cond) { this[ cond ? 'show' : 'hide' ]() }
+// Triggers alerts when requested by javascript.
 // eslint-disable-next-line camelcase
 function show_flash (type, message) {
+  var cleanMessage = DOMPurify.sanitize(message)
+  var existingAlert = document.querySelector('.flash-alert')
+
+  if (existingAlert) {
+    existingAlert.remove()
+  }
+
   var flashDiv = $('.alert-' + type)
   if (flashDiv.length === 0) {
-    flashDiv = $('<div class="alert alert-' + type + '" />')
-    $('#content').prepend(flashDiv)
+    flashDiv = $('<div class="d-flex justify-content-center position-fixed flash-alert">' +
+                 '<div class="alert alert-' + type + ' mx-2">' + cleanMessage + '</div></div>')
+
+    $('body').append(flashDiv)
+
+    var ajaxFlashNotfication = document.querySelector('.flash-alert')
+    handleAlert(ajaxFlashNotfication)
   }
-  flashDiv.html(message).show().delay(10000).slideUp()
 }
 
 // Apply to individual radio button that makes another element visible when checked
@@ -208,31 +224,34 @@ $.fn.radioControlsVisibilityOfElement = function (dependentElementSelector) {
     if (this.checked) { this.click() }
   })
 }
-// eslint-disable-next-line camelcase
-function handle_date_picker_fields () {
-  $('.datepicker').datepicker({
+
+document.addEventListener('DOMContentLoaded', function() {
+  var dateFrom = flatpickr('.datePickerFrom', {
+    time_24hr: true,
     dateFormat: Spree.translations.date_picker,
-    dayNames: Spree.translations.abbr_day_names,
-    dayNamesMin: Spree.translations.abbr_day_names,
-    firstDay: Spree.translations.first_day,
-    monthNames: Spree.translations.month_names,
-    prevText: Spree.translations.previous,
-    nextText: Spree.translations.next,
-    showOn: 'focus',
-    showAnim: ''
+    monthSelectorType: 'static',
+    onChange: function(selectedDates) {
+      dateTo.set('minDate', selectedDates[0])
+    }
   })
 
-  // Correctly display range dates
-  $('.date-range-filter .datepicker-from').datepicker('option', 'onSelect', function (selectedDate) {
-    $('.date-range-filter .datepicker-to').datepicker('option', 'minDate', selectedDate)
+  var dateTo = flatpickr('.datePickerTo', {
+    monthSelectorType: 'static',
+    time_24hr: true,
+    dateFormat: Spree.translations.date_picker,
+    onChange: function(selectedDates) {
+      dateFrom.set('maxDate', selectedDates[0])
+    }
   })
-  $('.date-range-filter .datepicker-to').datepicker('option', 'onSelect', function (selectedDate) {
-    $('.date-range-filter .datepicker-from').datepicker('option', 'maxDate', selectedDate)
+
+  flatpickr('.datepicker', {
+    monthSelectorType: 'static',
+    time_24hr: true,
+    dateFormat: Spree.translations.date_picker
   })
-}
+})
 
-$(document).ready(function(){
-  handle_date_picker_fields()
+$(document).ready(function() {
   $('.observe_field').on('change', function() {
     target = $(this).data('update')
     $(target).hide()
@@ -277,7 +296,10 @@ $(document).ready(function(){
           _method: 'delete',
           authenticity_token: AUTH_TOKEN
         },
-        dataType: 'script'
+        dataType: 'script',
+        complete: function() {
+          el.blur()
+        }
       }).done(function () {
         var $flash_element = $('.alert-success')
         if ($flash_element.length) {
@@ -288,6 +310,8 @@ $(document).ready(function(){
       }).fail(function (response) {
         show_flash('error', response.responseText)
       })
+    } else {
+      el.blur()
     }
     return false
   })
@@ -317,7 +341,7 @@ $(document).ready(function(){
     return false
   })
 
-  $('body').on('click', '.select_properties_from_prototype', function(){
+  $('body').on('click', '.select_properties_from_prototype', function() {
     $('#busy_indicator').show()
     var clicked_link = $(this)
     $.ajax({
@@ -331,60 +355,47 @@ $(document).ready(function(){
     return false
   })
 
-  // Fix sortable helper
-  var fixHelper = function (e, ui) {
-    ui.children().each(function () {
-      $(this).width($(this).width())
-    })
-    return ui
+  // Sortable List Up-Down
+  var parentEl = document.getElementsByClassName("sortable")[0];
+  if (parentEl) {
+    var element = parentEl.querySelector('tbody')
   }
 
-  $('table.sortable').ready(function () {
-    var tdCount = $(this).find('tbody tr:first-child td').length
-    $('table.sortable tbody').sortable(
-      {
-        handle: '.handle',
-        helper: fixHelper,
-        placeholder: 'ui-sortable-placeholder',
-        update: function(event, ui) {
-          var tbody = this
-          $('#progress').show()
-          var positions = { authenticity_token: AUTH_TOKEN }
-          $.each($('tr', tbody), function(position, obj) {
-            reg = /spree_(\w+_?)+_(\d+)/
-            parts = reg.exec($(obj).prop('id'))
-            if (parts) {
-              positions['positions[' + parts[2] + ']'] = position + 1
-            }
-          })
-          $.ajax({
-            type: 'POST',
-            dataType: 'script',
-            url: $(ui.item).closest('table.sortable').data('sortable-link'),
-            data: positions
-          }).done(function () {
-            $('#progress').hide()
-          })
-        },
-        start: function (event, ui) {
-          // Set correct height for placehoder (from dragged tr)
-          ui.placeholder.height(ui.item.height())
-          // Fix placeholder content to make it correct width
-          ui.placeholder.html("<td colspan='" + (tdCount - 1) + "'></td><td class='actions'></td>")
-        },
-        stop: function (event, ui) {
-          // Fix odd/even classes after reorder
-          $('table.sortable tr:even').removeClass('odd even').addClass('even')
-          $('table.sortable tr:odd').removeClass('odd even').addClass('odd')
-        }
-
-      })
-  })
+  if (element) {
+    Sortable.create(element, {
+      handle: '.move-handle',
+      animation: 550,
+      ghostClass: 'bg-light',
+      dragClass: "sortable-drag-v",
+      easing: 'cubic-bezier(1, 0, 0, 1)',
+      swapThreshold: 0.9,
+      forceFallback: true,
+      onEnd: function (evt) {
+        var itemEl = evt.item
+        var positions = { authenticity_token: AUTH_TOKEN }
+        $.each($('tr', element), function(position, obj) {
+          reg = /spree_(\w+_?)+_(\d+)/
+          parts = reg.exec($(obj).prop('id'))
+          if (parts) {
+            positions['positions[' + parts[2] + ']'] = position + 1
+          }
+        })
+        $.ajax({
+          type: 'POST',
+          dataType: 'json',
+          url: $(itemEl).closest('table.sortable').data('sortable-link'),
+          data: positions
+        })
+      }
+    })
+  }
 
+  // Close notifications
   $('a.dismiss').click(function () {
     $(this).parent().fadeOut()
   })
 
+  // Utility
   window.Spree.advanceOrder = function() {
     $.ajax({
       type: 'PUT',