@lancom/shared 0.0.346 → 0.0.348

package/assets/js/api/admin.js

@@ -552,6 +552,9 @@ export default {
   moveToWarehouseLocations(move) {
     return _post(`admin/warehouse-locations/move/bulk`, move);
   },
+  fetchPromodataProducts(params) {
+    return _get('admin/promodata-products', params);
+  },
   fetchWarehouseCanonicalProductsLocations(warehouse) {
     return _get(`admin/warehouses/${warehouse}/locations`);
   },

package/components/editor/editor.vue

@@ -63,7 +63,7 @@
           name="sm"
           mode="down">
           <client-only>
-            <editor-product-details />
+            <editor-product-details @add-design="addDesign()" />
           </client-only>
         </breakpoint>
         <breakpoint
@@ -79,7 +79,7 @@
       name="sm"
       mode="down">
       <client-only>
-        <mobile-editor-product-details />
+        <mobile-editor-product-details ref="mobileDetails" />
       </client-only>
     </breakpoint>
   </div>
@@ -189,6 +189,9 @@ export default {
       'setSelectedTab'
     ]),
     ...mapMutations('layers', ['resetLayers']),
+    addDesign() {
+      this.$refs.mobileDetails.show('details');
+    },
     editorCurrentTabComponent(currentTab) {
       switch(currentTab) {
         case 'product': 

package/components/editor/editor_product_details/editor-product-details.scss

@@ -100,6 +100,16 @@
     @media (max-width: $bp-extra-small-max) {
       display: block;
     }
+    &-placeholder {
+      top: -100px;
+      position: relative;
+      background: $green;
+      display: inline-block;
+      padding: 10px;
+      font-size: 13px;
+      font-weight: bold;
+      cursor: pointer;
+    }
     img {
       width: 100%;
       max-width: 330px;

package/components/editor/editor_product_details/editor-product-details.vue

@@ -114,6 +114,11 @@
         :fill-background="true"
         :origin-background="true"
         size="large" />
+      <div
+        class="EditorProductDetails__product-image-placeholder"
+        @click="$emit('add-design')">
+        ADD DESIGN
+      </div>
       <div
         class="EditorProductDetails__product-sides-toggle"
         @click="toggleSide">

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

@@ -74,6 +74,7 @@
             </transition>
           </div>
           <div
+            v-if="!isZoomIn"
             class="EditorWorkspace__sides-toggle"
             :class="{
               'EditorWorkspace__sides-toggle--fixed': isZoomIn

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

@@ -111,7 +111,7 @@ import { fabric } from 'fabric';
 import { mapGetters, mapMutations, mapActions } from 'vuex';
 import throttle from 'lodash.throttle';
 import debounce from 'lodash.debounce';
-import { getLargeColorImage } from '@lancom/shared/assets/js/utils/colors';
+import { getLargeColorImage, getMediumColorImage } from '@lancom/shared/assets/js/utils/colors';
 import { COLORS_IMAGES_TYPES } from '@lancom/shared/assets/js/constants/colors';
 import FabricHelper from '@lancom/shared/assets/js/utils/fabric-helper';
 import { findParentByPredicate } from '@lancom/shared/assets/js/utils/dom';
@@ -145,7 +145,7 @@ export default {
       visibleWireframe: false,
       fabricHelper: null,
       redrawWithThrottle: throttle(this.redraw, 100, { trailing: false }),
-      saveLayersAsImageWithDebounce: debounce(this.saveLayersAsImage, 100),
+      saveLayersAsImageWithDebounce: debounce(this.saveLayersAsImage, 400),
       onResize: debounce(this.handleWorkspaceSize, 1000),
       backgroundImage: null,
       backgroundImageUrl: null,
@@ -381,9 +381,12 @@ export default {
       return this.selectedLayer && this.selectedLayer.createdAt === layer.createdAt;
     },
     updateBackgroundImage() {
+      // console.log(this.calcWorkspaceSize(true));
+      const isMedium = this.calcWorkspaceSize(true) <= 400;
       const type = this.side === 'front' ? COLORS_IMAGES_TYPES.FRONT : COLORS_IMAGES_TYPES.BACK;
-      const wireframeImageUrl = this.visibleWireframe && this.wireframeImage?.large;
-      const imageUrl = wireframeImageUrl || getLargeColorImage(this.product, type, this.editableColor, false, ['wireframe']);
+      const wireframeImageUrl = this.visibleWireframe && (isMedium ? this.wireframeImage?.medium : this.wireframeImage?.large);
+      const getter = isMedium ? getMediumColorImage : getLargeColorImage;
+      const imageUrl = wireframeImageUrl || getter(this.product, type, this.editableColor, false, ['wireframe']);
       if (this.backgroundImage && this.backgroundImageUrl === imageUrl) {
         return this.fabricHelper.setBackgroundImage(this.backgroundImage);
       }

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

@@ -51,10 +51,7 @@
         </span>
       </div>
     </div>
-    <transition-group
-      appear
-      name="appear-from-bottom"
-      tag="div">
+    <div>
       <div
         v-if="isOpen"
         key="backdrop"
@@ -85,7 +82,7 @@
             :hasPricing="false" />
         </div>
       </div>
-    </transition-group>
+    </div>
   </div>
 </template>
 

package/components/product/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options.scss

@@ -23,8 +23,8 @@
       bottom: -4px;
       left: -4px;
       border-radius: 13px;
-      border: 2px solid $grey_1;
-      transform: scale(0);
+      border: 2px solid $grey_4;
+      transform: scale(1);
       transition: transform .22s ease-in-out;
     }
     &-inner {
@@ -39,6 +39,7 @@
     &.selected {
       &:before {
         transform: scale(1);
+        border: 2px solid $grey_1;
       }
     }
     &-selected-icon {

package/components/product/product_color_image/product-color-image.vue

@@ -3,6 +3,20 @@
     class="ProductColorImage"
     :class="{ zoomedIn }"
     :style="style">
+    <div
+      v-if="hasAdditionalColors"
+      :style="{
+        'top': additionalColorHeight,
+        width: '100%',
+        height: '100%',
+        position: 'relative'
+      }">
+      <div
+        v-for="(additionalColorsThumb, index) of additionalColorsThumbs"
+        :key="index"
+        :style="additionalColorsThumb">
+      </div>
+    </div>
   </div>
 </template>
 
@@ -32,6 +46,23 @@ export default {
     },
     style() {
       return getColorBackgroundStyle(this.color);
+    },
+    hasAdditionalColors() {
+      return this.additionalColors.length > 0;
+    },
+    additionalColors() {
+      return (this.color.additionalColors || []);
+    },
+    additionalColorHeight() {
+      return `${100 / (this.additionalColors.length + 1)}%`;
+    },
+    additionalColorsThumbs() {
+      return (this.color.additionalColors || [])
+        .map(c => ({
+          ...getColorBackgroundStyle(c.color || c),
+          height: this.additionalColorHeight,
+          width: '100%'
+        }))
     }
   }
 };

package/components/products/products_colors/products-colors.scss

@@ -38,11 +38,13 @@
     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;

package/package.json

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

package/store/product.js

@@ -68,7 +68,10 @@ export const getters = {
   usedSimpleProductsQuantity: ({ template }) => (template.simpleProducts || []).filter(p => p.amount > 0).reduce((sum, { amount }) => sum + amount, 0),
   usedBigSizeSimpleProductsQuantity: (state, { usedSimpleProducts }) => filterBigSize(usedSimpleProducts).reduce((sum, { amount }) => sum + amount, 0),
   defaultSimpleProduct: ({ productDetails, editableColor }) => {
-    return editableColor && productDetails.simpleProducts.find(({ color, size }) => color._id === editableColor._id && size.alias === 'small');
+    return editableColor && (
+      productDetails.simpleProducts.find(({ color, size }) => color._id === editableColor._id && size.alias === 'small')
+      || productDetails.simpleProducts.find(({ color }) => color._id === editableColor._id)
+    );
   },
   availableColors: ({ availableColors }) => availableColors,
   availableSizes: ({ availableSizes }) => availableSizes,
@@ -92,7 +95,7 @@ export const getters = {
   layersUpdatesCount: ({ layersUpdatesCount }) => layersUpdatesCount,
   printArea: ({ editablePrintArea, editorSize: { width, height }, product }) => {
     return getPrintAreaByName({
-      printArea: editablePrintArea?._id,
+      printArea: editablePrintArea?.parentPrintArea || editablePrintArea?._id,
       printSize: editablePrintArea?.printSize,
       printAreaOffsets: editablePrintArea?.printAreaOffsets,
       editorWidth: width,