@lancom/shared 0.0.345 → 0.0.347

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);
       }
@@ -443,6 +446,6 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import 'editor-workspace-side.scss';
 </style>

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

@@ -18,7 +18,7 @@
     height: 78px;
     z-index: 999999;
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     background-color: $white_high_emphasis;
     box-shadow: 5px 0px 30px rgba(124, 124, 124, 0.1);
 
@@ -34,6 +34,9 @@
         flex-direction: column;
         font-size: 14px;
       }
+      &-label {
+        margin-top: 6px;
+      }
 
       &.active {
         color: $black;

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

@@ -10,7 +10,7 @@
         :has-pricing="false"
         @choose-products="chooseProducts()" />
       <div
-        v-if="!!currentTab"
+        :class="{ active: !currentTab }"
         class="MobileEditorProductDetails__menu-action"
         @click="hide()">
         <i class="icon-blank MobileEditorProductDetails__menu-action-icon"></i>
@@ -19,7 +19,7 @@
         </span>
       </div>
       <div
-        v-if="currentTab !== 'details'"
+        :class="{ active: currentTab === 'details' }"
         class="MobileEditorProductDetails__menu-action"
         @click="show('details')">
         <i class="icon-product MobileEditorProductDetails__menu-action-icon"></i>
@@ -28,7 +28,7 @@
         </span>
       </div>
       <div
-        v-if="currentTab !== 'layers'"
+        :class="{ active: currentTab === 'layers' }"
         class="MobileEditorProductDetails__menu-action"
         @click="showLayers">
         <i class="icon-edit MobileEditorProductDetails__menu-action-icon"></i>
@@ -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/package.json

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