spree_backend 4.2.0.rc2 → 4.2.1

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

@@ -33,73 +33,74 @@ $(function () {
 
   if (taxonId.length > 0) {
     taxonId.select2({
-      dropdownCssClass: 'taxon_select_box',
       placeholder: Spree.translations.find_a_taxon,
+      minimumInputLength: 3,
+      multiple: false,
       ajax: {
         url: Spree.routes.taxons_api,
         datatype: 'json',
-        data: function (term, page) {
+        data: function (params, page) {
           return {
             per_page: 50,
             page: page,
             without_children: true,
-            token: Spree.api_key,
             q: {
-              name_cont: term
-            }
+              name_cont: params.term
+            },
+            token: Spree.api_key
           }
         },
-        results: function (data, page) {
+        processResults: function (data, page) {
           var more = page < data.pages
+          var results = formatTaxonList(data.taxons)
+
           return {
-            results: data['taxons'],
-            more: more
+            results: results,
+            pagination: {
+              more: more
+            }
           }
         }
       },
-      formatResult: formatTaxon,
-      formatSelection: formatTaxon
-    })
-  }
-
-  taxonId.on('change', function (e) {
-    var el = $('#taxon_products')
-    $.ajax({
-      url: Spree.routes.taxon_products_api,
-      data: {
-        id: e.val,
-        token: Spree.api_key
-      }
-    }).done(function (data) {
-      var i, j, len, len1, product, ref, ref1, results, variant
-      el.empty()
-      if (data.products.length === 0) {
-        return $('#taxon_products').html('<div class="alert alert-info">' + Spree.translations.no_results + '</div>')
-      } else {
-        ref = data.products
-        results = []
-        for (i = 0, len = ref.length; i < len; i++) {
-          product = ref[i]
-          if (product.master.images[0] !== void 0 && product.master.images[0].small_url !== void 0) {
-            product.image = product.master.images[0].small_url
-          } else {
-            ref1 = product.variants
-            for (j = 0, len1 = ref1.length; j < len1; j++) {
-              variant = ref1[j]
-              if (variant.images[0] !== void 0 && variant.images[0].small_url !== void 0) {
-                product.image = variant.images[0].small_url
-                break
+      templateResult: formatTaxon,
+      templateSelection: formatTaxon
+    }).on('select2:select', function (e) {
+      var el = $('#taxon_products')
+      $.ajax({
+        url: Spree.routes.taxon_products_api,
+        data: { id: e.params.data.id, token: Spree.api_key }
+      }).done(function (data) {
+        var i, j, len, len1, product, ref, ref1, results, variant
+        el.empty()
+        if (data.products.length === 0) {
+          return $('#taxon_products').html('<div class="alert alert-info">' + Spree.translations.no_results + '</div>')
+        } else {
+          ref = data.products
+          results = []
+          for (i = 0, len = ref.length; i < len; i++) {
+            product = ref[i]
+            if (product.master.images[0] !== void 0 && product.master.images[0].small_url !== void 0) {
+              product.image = product.master.images[0].small_url
+            } else {
+              ref1 = product.variants
+              for (j = 0, len1 = ref1.length; j < len1; j++) {
+                variant = ref1[j]
+                if (variant.images[0] !== void 0 && variant.images[0].small_url !== void 0) {
+                  product.image = variant.images[0].small_url
+                  break
+                }
               }
             }
+            results.push(el.append(productTemplate({
+              product: product
+            })))
           }
-          results.push(el.append(productTemplate({
-            product: product
-          })))
+          return results
         }
-        return results
-      }
+      })
     })
-  })
+  }
+
   taxonProducts.on('click', '.js-delete-product', function (e) {
     var currentTaxonId = $('#taxon_id').val()
     var product = $(this).parents('.product')
@@ -126,6 +127,18 @@ $(function () {
   $('.variant_autocomplete').variantAutocomplete()
 
   function formatTaxon (taxon) {
-    return Select2.util.escapeMarkup(taxon.pretty_name)
+    if (taxon.loading) {
+      return taxon.text;
+    }
+    return taxon.pretty_name
+  }
+
+  function formatTaxonList(values) {
+    return values.map(function (obj) {
+      return {
+        id: obj.id,
+        pretty_name: obj.pretty_name
+      }
+    })
   }
 })

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

@@ -1,40 +1,38 @@
 $.fn.userAutocomplete = function () {
   'use strict'
 
-  function formatUser (user) {
-    return Select2.util.escapeMarkup(user.email)
+  function formatUserList(values) {
+    return values.map(function (obj) {
+      return {
+        id: obj.id,
+        text: obj.email
+      }
+    })
   }
 
   this.select2({
-    minimumInputLength: 1,
     multiple: true,
-    initSelection: function (element, callback) {
-      $.get(Spree.routes.users_api, {
-        ids: element.val().split(','),
-        token: Spree.api_key
-      }, function (data) {
-        callback(data.users)
-      })
-    },
+    minimumInputLength: 1,
     ajax: {
       url: Spree.routes.users_api,
-      datatype: 'json',
-      data: function (term) {
+      dataType: 'json',
+      data: function (params) {
         return {
           q: {
-            email_start: term
+            email_start: params.term
           },
           token: Spree.api_key
         }
       },
-      results: function (data) {
+      processResults: function(data) {
         return {
-          results: data.users
+          results: formatUserList(data.users)
         }
       }
     },
-    formatResult: formatUser,
-    formatSelection: formatUser
+    templateSelection: function (data) {
+      return data.text
+    }
   })
 }
 

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

@@ -9,53 +9,54 @@ $(function () {
   }
 })
 
-function formatVariantResult (variant) {
+function formatVariantResult(variant) {
+  if (variant.loading) {
+    return variant.text
+  }
+
   if (variant['images'][0] !== undefined && variant['images'][0].mini_url !== undefined) {
     variant.image = variant.images[0].mini_url
   }
-  return variantTemplate({
+  return $(variantTemplate({
     variant: variant
-  })
+  }))
 }
 
 $.fn.variantAutocomplete = function () {
+
+  // deal with initSelection
   return this.select2({
     placeholder: Spree.translations.variant_placeholder,
     minimumInputLength: 3,
-    initSelection: function (element, callback) {
-      return $.get(Spree.routes.variants_api + '/' + element.val(), {
-        token: Spree.api_key
-      }).done(function (data) {
-        return callback(data)
-      })
-    },
+    quietMillis: 200,
     ajax: {
       url: Spree.url(Spree.routes.variants_api),
-      quietMillis: 200,
-      datatype: 'json',
-      data: function (term) {
-        return {
+      dataType: 'json',
+      data: function (params) {
+        var query = {
           q: {
-            search_by_product_name_or_sku: term
+            search_by_product_name_or_sku: params.term
           },
           token: Spree.api_key
         }
+
+        return query;
       },
-      results: function (data) {
+      processResults: function(data) {
         window.variants = data['variants']
         return {
-          results: data['variants']
+          results: data.variants
         }
       }
     },
-    formatResult: formatVariantResult,
-    formatSelection: function (variant) {
-      // eslint-disable-next-line no-extra-boolean-cast
+    templateResult: formatVariantResult,
+    templateSelection: function(variant) {
       if (!!variant.options_text) {
-        return Select2.util.escapeMarkup(variant.name + '(' + variant.options_text + ')')
+        return variant.name + '(' + variant.options_text + ')'
       } else {
-        return Select2.util.escapeMarkup(variant.name)
+        return variant.name
       }
     }
   })
+
 }

data/app/assets/stylesheets/spree/backend/components/_badges.scss

@@ -42,5 +42,5 @@
 .badge-inactive,
 .badge-notice,
 .badge-partial {
-  @include badge-variant($warning);
+  @include badge-variant($light);
 }

data/app/assets/stylesheets/spree/backend/components/_tables.scss

@@ -21,7 +21,7 @@ table.table {
   }
 
   .badge {
-    font-size: 0.85em;
+    text-transform: uppercase;
   }
 
   thead {
@@ -126,7 +126,7 @@ div.table-responsive table.table-bordered {
 
 .sortable-drag-v {
   border: 1px solid $info;
-  border-radius: 5px;
+  border-radius: $border-radius;
   width:100%;
   text-align: right;
   opacity: 0;

data/app/assets/stylesheets/spree/backend/global/_mixins.scss

@@ -0,0 +1,19 @@
+// Mixin to prefix several properties at once
+
+// EXAMPLE
+// @include prefix((
+//   appearance: none,
+//   touch-callout: none,
+//   user-select: none
+// ), webkit moz ms khtml);
+
+@mixin prefix($declarations, $prefixes: ()) {
+  @each $property, $value in $declarations {
+    @each $prefix in $prefixes {
+      #{'-' + $prefix + '-' + $property}: $value;
+    }
+
+    // Output standard non-prefixed declaration
+    #{$property}: $value;
+  }
+}

data/app/assets/stylesheets/spree/backend/global/_variables.scss

@@ -11,7 +11,7 @@
 /*------------------------------------------
   Components
   -----------------------------------------*/
-  $border-radius: 2px;
+  $border-radius: 5px;
 
 /*------------------------------------------
   Fonts

data/app/assets/stylesheets/spree/backend/plugins/_flatpickr.scss

@@ -1,95 +1,113 @@
-// Adaptive icon from calendar to close.
-@mixin swith-appended-icon {
-  &:placeholder-shown:not(:focus) + * {
-      @content;
+.flatpickr-calendar {
+  // Custom Flatpickr styling for Spree + BS4.
+  .flatpickr-current-month {
+    span.cur-month:hover {
+      background: transparent;
+    }
+      .numInputWrapper {
+      margin-left: 3px;
+      border-radius: $border-radius;
+      overflow: hidden;
+    }
+
+    .flatpickr-monthDropdown-months {
+      @include prefix((
+        appearance: none
+      ), webkit moz ms khtml);
+
+      padding: 0.2em;
+      border-radius: $border-radius;
+    }
   }
-}
 
-input.flatpickr-input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: white !important;
-}
+  .numInputWrapper span.arrowUp {
+    border-color: transparent;
+    border-radius: 0;
+  }
 
-.flatpickr-current-month .numInputWrapper {
-  margin-left: 3px;
-  border-radius: $border-radius;
-  overflow: hidden;
-}
-.flatpickr-current-month span.cur-month:hover {
-  background: transparent;
-}
-.numInputWrapper span.arrowUp {
-  border-color: transparent;
-  border-radius: 0;
-}
-.numInputWrapper span.arrowDown {
-  border-color: transparent;
-  border-radius: 0;
-}
+  .numInputWrapper span.arrowDown {
+    border-color: transparent;
+    border-radius: 0;
+  }
 
-.input-group {
-  input.flatpickr-input{
-    @include swith-appended-icon  {
-      opacity: 0;
-    }
+  .flatpickr-day {
+    margin: 2px 0;
+    border-radius: $border-radius ;
   }
-}
 
-.append_under {
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 0;
-  height: 100%;
-}
+  .flatpickr-months .flatpickr-prev-month:hover svg,
+  .flatpickr-months .flatpickr-next-month:hover svg {
+    fill: $primary;
+  }
 
-.flatpickr-day {
-  margin: 2px 0;
-  border-radius: $border-radius ;
-}
+  .flatpickr-time {
+    border-radius: 0 0 5px 5px;
+    &:after {
+      display: none;
+    }
+    .numInputWrapper {
+      span {
+        border-color: transparent;
+        border-radius: 0;
+      }
+    }
+  }
 
-// Fix Flatpickr bug where things jusy highlight for no reason.
-input.flatpickr-input[readonly] {
-  -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
+  // Required to stop an opened cal showing above the nav bar.
+  &.open {
+    z-index: $zindex-dropdown;
+  }
 }
 
-.flatpickr-months .flatpickr-prev-month:hover svg,
-.flatpickr-months .flatpickr-next-month:hover svg {
-  fill: $primary;
+// Mixin for calendar toggle icon show/hide.
+@mixin swith-appended-icon {
+  &:placeholder-shown:not(:focus) + * {
+      @content;
+  }
 }
 
-// Force rounded corner for the toggle cal and close icons.
-.input-group >
-.input-group-append:not(:last-child) >
-.force-round {
-  z-index: 5;
-  border-top-right-radius: $border-radius !important;
-  border-bottom-right-radius: $border-radius !important;
-}
+.input-group.datePickerFrom,
+.input-group.datePickerTo,
+.input-group.datepicker {
+  input.flatpickr-alt-input[readonly] {
+    // Flatpickr alternate input is read-only,
+    // style it as an active input field.
+    background-color: white !important;
 
-div.flatpickr-calendar.open {
-  z-index: $zindex-dropdown;
-}
+    // Fix a bug where occasionally the whole screen will highlight
+    // if you clicked the Flatpcikr input box while moving the cursor.
+    @include prefix((
+      appearance: none,
+      touch-callout: none,
+      user-select: none
+    ), webkit moz ms khtml);
 
-.flatpickr-time {
-  border-radius: 0 0 5px 5px;
-  &:after {
-    display: none;
+    @include swith-appended-icon  {
+      opacity: 0;
+    }
   }
-  .numInputWrapper {
-      span {
-        border-color: transparent;
-        border-radius: 0;
 
-      }
+  // Required for calendar toggle icon show/hide.
+  .append_under {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 0;
+    height: 100%;
+  }
+
+  // Styling for calendar toggle icon toggle
+  .input-group-append:not(:last-child) >
+  .force-round {
+    z-index: 5;
+    border-top-right-radius: $border-radius !important;
+    border-bottom-right-radius: $border-radius !important;
+  }
 
+  // Styling for calendar toggle icon toggle
+  .form-control:not(:first-child),
+  .input-group >.flatpickr-alt-input:not(:first-child) {
+    border-top-left-radius: $border-radius !important;
+    border-bottom-left-radius: $border-radius !important;
   }
 }