@lancom/shared 0.0.456 → 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.456",
+  "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;
   },