@lancom/shared 0.0.170 → 0.0.172

package/components/product/gallery/gallery.vue

@@ -5,7 +5,7 @@
       <vue-slick-carousel
         ref="bigCarousel"
         :key="updateCarouselTime"
-        :arrows="true"
+        :arrows="false"
         :dots="true"
         :swipe="false"
         :speed="800"
@@ -173,11 +173,11 @@ export default {
     }
   },
   mounted() {
-    const index = this.filteredImages.findIndex(i => i.color === this.editableColor?._id);
-    if (index > -1) {
-      this.goToSlide(index, true);
-    }
-    console.log('filteredImages: ', this.filteredImages);
+    // const index = this.filteredImages.findIndex(i => i.color === this.editableColor?._id);
+    // if (index > -1) {
+    //   this.goToSlide(index, true);
+    // }
+    // console.log('filteredImages: ', this.filteredImages);
   },
   methods: {
     ...mapActions('product', ['selectColor']),

package/package.json

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

package/store/product.js

@@ -11,6 +11,7 @@ import { sortByName } from '../assets/js/utils/filters';
 
 export const state = () => ({
   calculatingPrice: false,
+  images: [],
   priceIncludeGST: false,
   product: null,
   preSetPrint: null,
@@ -119,15 +120,7 @@ export const getters = {
       ...printTypesMinQuantity
     );
   },
-  images: ({ product }) => {
-    const imagesGroups = new Map();
-    (product.images || [])
-      .filter(i => isValidImageTypes(i, ['front', 'back', 'model']))
-      .forEach(i => {
-        imagesGroups.set(i.color, [...(imagesGroups.get(i.color) || []), i]);
-      });
-    return [...imagesGroups.values()].reduce((images, group) => [...images, ...group], []);
-  },
+  images: ({ images }) => images,
   editableSide: ({ editableSide }) => editableSide,
   priceIncludeGST: ({ priceIncludeGST }) => priceIncludeGST,
   hasUnprintedPrice: ({ product }) => product.minUnprintedPrice || product.maxUnprintedPrice
@@ -164,6 +157,19 @@ export const actions = {
       state.availableColors.find(c => c._id === catalogFrontColorId) ||
       state.availableColors[0];
     commit('setEditableColor', editableColor);
+
+    let images = editableColor ? [
+      ...(state.product.images || []).filter(image => image.color === editableColor._id),
+      ...(state.product.images || []).filter(image => image.color !== editableColor._id)
+    ] : state.product.images;
+    const imagesGroups = new Map();
+    images
+      .filter(i => isValidImageTypes(i, ['front', 'back', 'model']))
+      .forEach(i => {
+        imagesGroups.set(i.color, [...(imagesGroups.get(i.color) || []), i]);
+      });
+    images = [...imagesGroups.values()].reduce((images, group) => [...images, ...group], []);
+    commit('setImages', images);
   },
   async fetchPrintTypes({ commit }, { shop }) {
     const response = await api.fetchPrintTypes(shop);
@@ -224,7 +230,7 @@ export const actions = {
       commit('addTemplateColor', color);
     }
     const lastSelectedColorId = colorSelected ? color : getters.templateColors[0];
-    if (lastSelectedColorId) {
+    if (lastSelectedColorId && getters.editableColor?._id !== lastSelectedColorId) {
       commit('setEditableColor', getters.availableColors.find(({ _id }) => lastSelectedColorId === _id));
     }
   }
@@ -242,12 +248,8 @@ export const mutations = {
   },
   setProductDetails(state, simpleProducts) {
     const { preSetPrint } = state;
-    console.log('');
-    console.log('setProductDetails: ');
-    console.log('simpleProducts1: ', simpleProducts);
     simpleProducts = simpleProducts.filter(sp => !preSetPrint || (preSetPrint.colors || []).includes(sp.color._id) )
     state.productDetails = { simpleProducts };
-    console.log('simpleProducts2: ', simpleProducts);
     const availableSizes = [];
     const sizesPerColor = simpleProducts.reduce((map, { color, size }) => {
       if (!map[color.alias]) {
@@ -410,6 +412,9 @@ export const mutations = {
   setEditableSide(state, side) {
     state.editableSide = side;
   },
+  setImages(state, images) {
+    state.images = images;
+  },
   setCalculatingPrice(state, calculatingPrice) {
     state.calculatingPrice = calculatingPrice;
   }