@lancom/shared 0.0.454 → 0.0.457

package/assets/js/api/admin.js

@@ -714,6 +714,18 @@ export default {
   removeProductColor(id) {
     return _delete(`admin/colors/${id}`);
   },
+  async fetchColorGroups() {
+    return sortByName(await _get('admin/color-groups'));
+  },
+  fetchColorGroupById(id) {
+    return _get(`admin/color-groups/${id}`);
+  },
+  saveColorGroup(colorGroup) {
+    return colorGroup._id ? _put(`admin/color-groups/${colorGroup._id}`, colorGroup) : _post('admin/color-groups', colorGroup);
+  },
+  removeColorGroup(id) {
+    return _delete(`admin/color-groups/${id}`);
+  },
   async fetchProductSizes() {
     return sortSizes(await _get('admin/sizes'));
   },

package/assets/js/utils/breakpoints.js

@@ -3,7 +3,8 @@ import debounce from 'lodash.debounce';
 
 class Breakpoints {
   screens = {
-    mini: 448,
+    mini: 449,
+    xs: 450,
     sm: 768,
     md: 1024,
     lg: 1280,
@@ -48,7 +49,7 @@ class Breakpoints {
 
 
   isMini(val) {
-    return val < this.screens.mini;
+    return val <= this.screens.mini;
   }
 
   isXs(val) {

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -451,7 +451,7 @@ export default {
       this.removeTemplateLayer(this.selectedLayer);
     },
     onOutsideClick() {
-      if (this.addedFromCanvas && this.selectedLayer?.type === 'text' &&  !this.selectedLayer.copy) {
+      if (this.addedFromCanvas && this.selectedLayer?.type === 'text' && !this.selectedLayer.copy) {
         this.removeTemplateLayer(this.selectedLayer);
       }
       this.addedFromCanvas = false;

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.scss

@@ -8,6 +8,13 @@
     background: white;
     left: 0;
     right: 0;
+    // min-height: 64px;
+    box-shadow: none !important;
+    border-radius: 0;
+    border: none;
+    .EditorPricing__clearance-messages {
+      display: none;
+    }
   }
   &__menu {
     position: fixed;
@@ -117,4 +124,4 @@
     overflow-y: auto;
     overflow-x: hidden;
   }
-}
+}

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.vue

@@ -79,7 +79,7 @@
             style="margin-top: 40px;" />
           <editor-layers
             v-show="currentTab === 'layers'"
-            :hasPricing="false" />
+            :has-pricing="false" />
         </div>
       </div>
     </div>
@@ -101,6 +101,12 @@ const { mapMutations, mapGetters } = createNamespacedHelpers('product');
 export default {
   name: 'MobileEditorProductDetails',
   mixins: [addToCartMixin],
+  props: {
+    isEditMode: {
+      type: Boolean,
+      default: true
+    }
+  },
   components: {
     EditorWorkspace,
     EditorLayers,
@@ -156,14 +162,14 @@ export default {
 
       const prevTab = this.currentTab;
 
-      if (this.isOpen) {
+      if (this.isOpen && this.isEditMode) {
         this.hide(true);
       }
 
       this.$nextTick(() => {
         this.isOpen = true;
 
-        if(tab === 'layers') {
+        if (!this.isEditMode && tab === 'layers') {
           this.setEditModeSelectedLayer(false);
         }
 

package/components/product/product_pricing_tiers/product-pricing-tiers.scss

@@ -1,3 +1,5 @@
+@import "@/assets/scss/variables";
+
 .ProductPricingTiers {
   &__title {
     color: #0A0A0A;
@@ -21,6 +23,9 @@
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
     cursor: pointer;
     transition: all 0.3s ease;
+    @media (max-width: $bp-extra-small-max) {
+      width: 132px;
+    }
     &:hover {
       transform: translateY(-3px);
       box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.30), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
@@ -35,11 +40,20 @@
       font-weight: 600;
       line-height: 28px;
       text-align: center;
+      @media (max-width: $bp-extra-small-max) {
+        padding: 8px 0;
+        font-size: 12px;
+        line-height: 20px;
+      }
       span {
         color: #194BB3;
         font-size: 18px;
         font-weight: 700;
         line-height: 28px;
+        @media (max-width: $bp-extra-small-max) {
+          font-size: 14px;
+          line-height: 20px;
+        }
       }
     }
     &-price {
@@ -50,11 +64,21 @@
       margin-top: 6px;
       padding: 4px;
       text-align: center;
+      @media (max-width: $bp-extra-small-max) {
+        font-size: 10px;
+        line-height: 16px;
+        margin-top: 4px;
+        padding: 2px;
+      }
       span {
         color: #194BB3;
         font-size: 12px;
         font-weight: 700;
         line-height: 20px;
+        @media (max-width: $bp-extra-small-max) {
+          font-size: 10px;
+          line-height: 16px;
+        }
       }
     }
   }

package/components/products/products_aside/products-aside.vue

@@ -37,8 +37,11 @@
           :has-selected-icon="hasSelectedIcon"
           :selected-icon-circle="selectedIconCircle" />
       </div>
-      <div class="ProductsAside__item">
+      <!-- <div class="ProductsAside__item">
         <products-colors />
+      </div> -->
+      <div class="ProductsAside__item">
+        <products-color-groups />
       </div>
       <div class="ProductsAside__item">
         <products-attributes
@@ -57,7 +60,8 @@ import { mapGetters } from 'vuex';
 import ProductsBrands from '@lancom/shared/components/products/products_brands/products-brands';
 import ProductsTags from '@lancom/shared/components/products/products_tags/products-tags';
 import ProductsAttributes from '@lancom/shared/components/products/products_attributes/products-attributes';
-import ProductsColors from '@lancom/shared/components/products/products_colors/products-colors';
+// import ProductsColors from '@lancom/shared/components/products/products_colors/products-colors';
+import ProductsColorGroups from '@lancom/shared/components/products/products_color_groups/products-color-groups';
 import ProductsProductionTime from '@lancom/shared/components/products/products_production_time/products-production-time';
 import ProductsMinimumQty from '@lancom/shared/components/products/products_minimum_qty/products-minimum-qty';
 import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
@@ -69,7 +73,8 @@ export default {
     ProductsBrands,
     ProductsTags,
     ProductsAttributes,
-    ProductsColors,
+    // ProductsColors,
+    ProductsColorGroups,
     ProductsProductionTime,
     ProductsMinimumQty
   },

package/components/products/products_color_groups/products-color-groups.scss

@@ -0,0 +1,69 @@
+@import "@/assets/scss/variables";
+
+.ProductsColorGroups {
+  &__header {
+    font-size: 22px;
+    line-height: 20px;
+    font-weight: 600;
+    margin-top: 3px;
+    margin-bottom: 24px;
+    color: $black;
+  }
+  &__selected-item {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    font-weight: bold;
+    margin: 12px 0;
+    padding-top: 4px;
+    color: $grey_1;
+    i {
+      font-size: 22px;
+    }
+    a {
+      color: $grey_1;
+    }
+  }
+  &__selected-name {
+    flex-grow: 1;
+    margin-left: 14px;
+    text-transform: uppercase;
+  }
+  &__selected-cancel {
+    cursor: pointer;
+  }
+  &__color-group {
+    padding: 2px;
+    border: 2px solid $white;
+    width: 36px;
+    height: 36px;
+    border-radius: 13px;
+    overflow: hidden;
+    flex-shrink: 0;
+    &-image {
+      width: 100%;
+      height: 100%;
+      border-radius: 11px;
+      overflow: hidden;
+    }
+    &--selected {
+      border: 2px solid $grey_1;
+    }
+  }
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 20px;
+    margin-left: -5px;
+    &-color-group {
+      margin: 1px 4px;
+    }
+  }
+  &__toggle-list {
+    margin-top: 5px;
+    margin-right: 10px;
+    font-size: 11px;
+    cursor: pointer;
+    text-align: right;
+  }
+}

package/components/products/products_color_groups/products-color-groups.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="ProductsColorGroups__wrapper">
+    <toggle-content label="Colour Groups">
+      <div class="ProductsColorGroups__selected">
+        <div
+          v-for="colorGroup in selectedColorGroups"
+          :key="colorGroup._id"
+          class="ProductsColorGroups__selected-item">
+          <div class="ProductsColorGroups__color-group ProductsColorGroups__color-group--selected">
+            <product-color-image
+              :color="colorGroup"
+              class="ProductsColorGroups__color-group-image" />
+          </div>
+          <div class="ProductsColorGroups__selected-name">
+            {{ colorGroup.name }}
+          </div>
+          <products-link :color-group="colorGroup.alias">
+            <i class="icon-cancel ProductsColorGroups__selected-cancel"></i>
+          </products-link>
+        </div>
+      </div>
+      <div class="ProductsColorGroups__items">
+        <products-link
+          v-for="colorGroup in visibleColorGroups"
+          :key="colorGroup._id"
+          v-tooltip="colorGroup.name"
+          :color-group="colorGroup.alias">
+          <div
+            class="ProductsColorGroups__items-color-group ProductsColorGroups__color-group"
+            :class="{
+              'ProductsColorGroups__color-group--selected': isSelectedColorGroup(colorGroup)
+            }">
+            <product-color-image
+              v-if="canLoadImages"
+              :color="colorGroup"
+              class="ProductsColorGroups__color-group-image" />
+          </div>
+        </products-link>
+      </div>
+      <div
+        v-if="shortListColorGroupsLimit < colorGroupsCount"
+        @click="toggleDisplayAllColorGroups()"
+        class="ProductsColorGroups__toggle-list">
+        {{ displayAllColorGroups ? 'Hide all colour groups' : 'Show all colour groups' }}
+      </div>
+    </toggle-content>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import ToggleContent from '@lancom/shared/components/common/toggle-content';
+import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
+import ProductColorImage from '@lancom/shared/components/product/product_color_image/product-color-image';
+
+export default {
+  name: 'ProductsColorGroups',
+  components: {
+    ProductColorImage,
+    ProductsLink,
+    ToggleContent
+  },
+  data() {
+    return {
+      canLoadImages: false,
+      displayAllColorGroups: false,
+      shortListColorGroupsLimit: 15
+    };
+  },
+  computed: {
+    ...mapGetters('products', ['colorGroups']),
+    colorGroupsCount() {
+      return this.colorGroups.length;
+    },
+    selectedColorGroups() {
+      const colorGroups = (this.$route.query.colorGroups || '').split(',');
+      return this.colorGroups.filter(colorGroup => colorGroups.includes(colorGroup.alias));
+    },
+    visibleColorGroups() {
+      return this.displayAllColorGroups ? this.colorGroups : this.colorGroups.slice(0, this.shortListColorGroupsLimit);
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.canLoadImages = true;
+    }, 1000);
+  },
+  methods: {
+    isSelectedColorGroup(colorGroup) {
+      return this.selectedColorGroups.some(cg => cg._id === colorGroup._id);
+    },
+    toggleDisplayAllColorGroups() {
+      this.displayAllColorGroups = !this.displayAllColorGroups;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-color-groups';
+</style>

package/components/products/products_link/products-link.vue

@@ -27,6 +27,9 @@ export default {
     color: {
       type: String
     },
+    colorGroup: {
+      type: String
+    },
     productionTime: {
       type: String
     },
@@ -51,6 +54,7 @@ export default {
         brand: this.brand,
         tags: this.tags,
         colors: this.color,
+        colorGroups: this.colorGroup,
         productionTime: this.productionTime,
         minimumQty: this.minimumQty,
         option: this.option,

package/components/the_aside/the-aside.scss

@@ -34,6 +34,13 @@
     z-index: 200;
     transition: opacity .16s cubic-bezier(0.23, 1, 0.32, 1);
   }
+  &__close {
+    position: absolute;
+    right: 10px;
+    top: 40px;
+    font-weight: bold;
+    font-size: 20px;
+  }
 }
 
 .TheAside__container,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.454",
+  "version": "0.0.457",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

package/store/products.js

@@ -9,6 +9,7 @@ export const state = () => ({
   maxPrice: 0,
   types: [],
   colors: [],
+  colorGroups: [],
   brands: [],
   category: null,
   categories: [],
@@ -23,6 +24,7 @@ export const getters = {
   products: ({ products }) => products,
   types: ({ types }) => types || [],
   colors: ({ colors }) => colors || [],
+  colorGroups: ({ colorGroups }) => colorGroups || [],
   brands: ({ brands }) => brands || [],
   categories: ({ categories }) => categories || [],
   category: ({ category }) => category,
@@ -51,7 +53,7 @@ export const actions = {
     try {
       commit('setLoadError', null);
       const {
-        products, count, page, perPage, productTypes, colors, brands, tags, attributes,
+        products, count, page, perPage, productTypes, colors, colorGroups, brands, tags, attributes,
         categories, minPrice, maxPrice, category
       } = await api.fetchProducts(shop, params);
       commit('setProducts', products);
@@ -60,6 +62,7 @@ export const actions = {
       commit('setPerPage', perPage);
       commit('setTypes', productTypes);
       commit('setColors', colors);
+      commit('setColorGroups', colorGroups);
       commit('setBrands', brands);
       commit('setCategories', categories);
       commit('setCategory', category);
@@ -118,6 +121,9 @@ export const mutations = {
   setColors(state, colors) {
     state.colors = colors;
   },
+  setColorGroups(state, colorGroups) {
+    state.colorGroups = colorGroups;
+  },
   setMinPrice(state, minPrice) {
     state.minPrice = minPrice;
   },