@lancom/shared 0.0.426 → 0.0.428

package/components/common/client_settings_tax/client-settings-tax.scss

@@ -0,0 +1,11 @@
+.ClientSettingsTax__wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.ClientSettingsTax__toggle {
+  display: flex;
+  align-items: center;
+}
+
+

package/components/common/client_settings_tax/client-settings-tax.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="ClientSettingsTax__wrapper">
+    <div class="ClientSettingsTax__toggle">
+      <toggle-switch
+        v-model="inclGST"
+        left-label="Ex VAT"
+        right-label="Inc VAT" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex';
+import ToggleSwitch from '@lancom/shared/components/common/toggle-switch';
+
+export default {
+  name: 'ClientSettingsTax',
+  components: {
+    ToggleSwitch
+  },
+  props: {
+    color: {
+      type: String
+    }
+  },
+  computed: {
+    ...mapGetters(['taxName']),
+    ...mapGetters('product', ['priceIncludeGST']),
+    inclGST: {
+      get() {
+        return this.priceIncludeGST;
+      },
+      set(value) {
+        this.setPriceIncludeGST(value);
+      }
+    }
+  },
+  methods: {
+    ...mapMutations('product', ['setPriceIncludeGST'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'client-settings-tax';
+</style>
+
+

package/components/common/toggle-switch.vue

@@ -0,0 +1,123 @@
+<template>
+  <div
+    class="toggle"
+    :class="[{ 'is-on': value, disabled }, sizeClass]"
+    role="switch"
+    :aria-checked="String(value)"
+    @click="toggle">
+    <span
+      class="label left"
+      :class="{ active: !value }">
+      {{ leftLabel }}
+    </span>
+    <div class="track">
+      <div class="thumb"></div>
+    </div>
+    <span
+      class="label right"
+      :class="{ active: value }">
+      {{ rightLabel }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ToggleSwitch',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    leftLabel: {
+      type: String,
+      default: 'Off'
+    },
+    rightLabel: {
+      type: String,
+      default: 'On'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'md' // sm | md | lg
+    },
+    color: {
+      type: String,
+      default: '#1976d2'
+    }
+  },
+  computed: {
+    sizeClass() {
+      return `size-${this.size}`;
+    }
+  },
+  methods: {
+    toggle() {
+      if (this.disabled) {
+        return;
+      }
+      this.$emit('input', !this.value);
+      this.$emit('change', !this.value);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+  gap: 10px;
+  position: relative;
+  padding-bottom: 6px;
+}
+
+.label {
+  font-weight: 600;
+  opacity: 0.6;
+  transition: opacity 0.15s, color 0.15s;
+}
+.label.active {
+  opacity: 1;
+}
+
+.track {
+  position: relative;
+  border-radius: 999px;
+  background: #e9eef6;
+  transition: background 0.2s ease;
+}
+.thumb {
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  transform: translate(0, -50%);
+  border-radius: 50%;
+  background: #fff;
+  transition: left 0.25s ease;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+.is-on .thumb {
+  left: calc(100% - 2px - var(--thumb-size));
+}
+.is-on .track {
+  background: var(--color, #1976d2);
+}
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.size-sm .track { width: 36px; height: 18px; }
+.size-sm .thumb { width: 14px; height: 14px; --thumb-size: 14px; }
+.size-md .track { width: 44px; height: 22px; }
+.size-md .thumb { width: 18px; height: 18px; --thumb-size: 18px; }
+.size-lg .track { width: 54px; height: 28px; }
+.size-lg .thumb { width: 24px; height: 24px; --thumb-size: 24px; }
+</style>

package/components/customer/customer.vue

@@ -70,10 +70,10 @@ export default {
     ...mapActions('auth', ['update_user']),
     createdCustomer({ customer: user, token }) {
       this.update_user({ user, token });
-      this.$router.push('/');
+      this.$router.push('/customer/orders');
     },
     signin() {
-      this.$router.push('/');
+      this.$router.push('/customer/orders');
     }
   }
 };

package/components/editor/editor_layers/editor-layers.vue

@@ -66,10 +66,14 @@
                 :key="`${layer.createdAt}-${index}`"
                 :layer="layer"
                 :active="selectedLayer && selectedLayer.createdAt === layer.createdAt"
+                :visible-move-up="layer !== group.layers[0]"
+                :visible-move-down="layer !== group.layers[group.layers.length - 1]"
                 @select="setSelectedLayer(layer)"
                 @edit="editLayer(layer)"
                 @duplicate="duplicateLayer(layer)"
-                @remove="removeLayer(layer)">
+                @remove="removeLayer(layer)"
+                @up="moveUp(layer)"
+                @down="moveDown(layer)">
               </editor-layers-layer>
             </div>
           </div>
@@ -166,6 +170,8 @@ export default {
       'setSelectedLayerField',
       'addTemplateLayer',
       'removeTemplateLayer',
+      'moveUpTemplateLayer',
+      'moveDownTemplateLayer',
       'updateTemplateLayer',
       'setEditableSide',
       'setSelectedPrintArea',
@@ -217,6 +223,12 @@ export default {
       this.removeTemplateLayer(layer);
       this.setSelectedLayer(null);
     },
+    moveUp(layer) {
+      this.moveUpTemplateLayer(layer);
+    },
+    moveDown(layer) {
+      this.moveDownTemplateLayer(layer);
+    },
     closeEditableLayer(invalid) {
       if (invalid) {
         this.removeTemplateLayer(this.selectedLayer);

package/components/editor/editor_layers/editor_layers_layer/editor-layers-layer.scss

@@ -100,13 +100,31 @@
   &__edit {
     width: 100%;
   }
-  &__remove {
+  &__controls{
     position: absolute;
     top: 16px;
     right: 12px;
     font-size: 18px;
     color: #777;
     cursor: pointer;
+    display: flex;
+    span {
+      position: relative;
+    }
+  }
+  &__up {
+    // position: absolute;
+    // top: 4px;
+    // right: 0;
+    display: inline-block;
+    transform: rotate(90deg);
+  }
+  &__down {
+    // position: absolute;
+    // top: 4px;
+    // right: 0;
+    display: inline-block;
+    transform: rotateZ(-90deg);
   }
   &__actions {
     display: flex;
@@ -137,4 +155,4 @@
       }
     }
   }
-}
+}

package/components/editor/editor_layers/editor_layers_layer/editor-layers-layer.vue

@@ -3,9 +3,21 @@
     class="EditorLayersLayer__wrapper"
     :class="{ active }"
     @click="$emit('select')">
-    <i
-      class="icon-delete EditorLayersLayer__remove"
-      @click="$emit('remove')"></i>
+    <div class="EditorLayersLayer__controls">
+      <span v-if="visibleMoveUp">
+        <i
+          class="icon-arrow-left EditorLayersLayer__up"
+          @click="$emit('up')"></i>
+      </span>
+      <span v-if="visibleMoveDown">
+        <i
+          class="icon-arrow-left EditorLayersLayer__down"
+          @click="$emit('down')"></i>
+      </span>
+      <i
+        class="icon-delete"
+        @click="$emit('remove')"></i>
+    </div>
     <div class="EditorLayersLayer__thumb">
       <i
         v-if="layerIcon"
@@ -81,12 +93,18 @@ import { number } from '@lancom/shared/assets/js/utils/filters';
 
 export default {
   name: 'EditorLayersLayer',
-  mixins: [printLayerMixin],
   filters: { number },
+  mixins: [printLayerMixin],
   props: {
     active: {
       type: Boolean,
       default: false
+    },
+    visibleMoveUp: {
+      type: Boolean
+    },
+    visibleMoveDown: {
+      type: Boolean
     }
   },
   computed: {

package/components/pages/customer/sign_in/sign-in.vue

@@ -23,8 +23,8 @@ export default {
     };
   },
   methods: {
-    onSignin(faq) {
-      this.$router.push('/');
+    onSignin() {
+      this.$router.push('/customer/orders');
     }
   }
 };

package/components/product/gallery/gallery.vue

@@ -5,8 +5,8 @@
       class="Gallery__big">
       <div class="Gallery__big-image">
         <img
-          :src="staticLink(currentImage.large)"
-          :alt="product.name"
+          :src="staticLink(currentImage.extralarge || currentImage.large)"
+          :alt="imageAlt(currentImage)"
           class="Gallery__big-image-src"
           @mouseenter="startZoom"
           @mousemove="updateZoomWithThrottle"
@@ -47,14 +47,14 @@
         preview: !showBigImage
       }">
       <img
-        :src="staticLink(currentImage.large)"
+        :src="staticLink(currentImage.extralarge || currentImage.large)"
         :style="zoomImageStyles"
         class="Gallery__zoom-image-src" />
     </div>
     <div class="Gallery__small">
       <div
         v-for="(image, index) in visibleImages"
-        :key="image.large"
+        :key="image.extralarge || image.large"
         class="Gallery__small-image"
         :class="{
           'Gallery__small-image--active': (visibleImagesFrom + index) === activeIndex
@@ -64,7 +64,7 @@
         @mouseleave="stopZoom">
         <img
           :src="staticLink(image.small)"
-          :alt="product.name"
+          :alt="imageAlt(image)"
           width="65"
           height="65"
           class="Gallery__small-image-src" />
@@ -217,6 +217,12 @@ export default {
   methods: {
     ...mapActions('product', ['selectColor']),
     staticLink,
+    imageAlt(image) {
+      const { name, SKU } = this.product;
+      const type = image.types?.find(t => t === 'front' || t === 'back');
+      const productName = [image.colorName, type, name].filter(i => !!i).join(' ');
+      return [productName, SKU].join(' | ');
+    },
     startPreview(index) {
       if (!this.isZoomin) {
         this.startZoom();

package/mixins/product-view.js

@@ -124,7 +124,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
       return (thumbProductImages.length > 0 ? thumbProductImages : this.images).slice(0, 6);
     },
     mainProductImageSrc() {
-      return this.mainProductImage && staticLink(this.mainProductImage.large);
+      return this.mainProductImage && staticLink(this.mainProductImage.extralarge || this.mainProductImage.large);
     },
     mainProductImageStyles() {
       return this.mainProductImageSrc ? { 'background-image': `url(${this.mainProductImageSrc});` } : {};
@@ -326,7 +326,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
           "gtin13": sp.gtin,
           "image": [
             image,
-            ...galleryImages.map(i => i.large).filter(i => !!i && i !== image)
+            ...galleryImages.map(i => i.extralarge || i.large).filter(i => !!i && i !== image)
           ],
           "name": name,
           "description": description,

package/package.json

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

package/store/product.js

@@ -459,6 +459,22 @@ export const mutations = {
       state.isPrintPricing = false;
     }
   },
+  moveUpTemplateLayer(state, layer) {
+    const index = state.template.layers.findIndex(({ createdAt }) => createdAt === layer.createdAt);
+    if (index > 0) {
+      const layers = state.template.layers;
+      const [layerToMove] = layers.splice(index, 1);
+      layers.splice(index - 1, 0, layerToMove);
+    }
+  },
+  moveDownTemplateLayer(state, layer) {
+    const index = state.template.layers.findIndex(({ createdAt }) => createdAt === layer.createdAt);
+    if (index < state.template.layers.length - 1) {
+      const layers = state.template.layers;
+      const [layerToMove] = layers.splice(index, 1);
+      layers.splice(index + 1, 0, layerToMove);
+    }
+  },
   updateTemplateLayer(state, layer) {
     const index = state.template.layers.findIndex(({ createdAt, _id }) => createdAt === layer.createdAt || (_id && _id === layer._id));
     Vue.set(state.template.layers, index, layer);