@lancom/shared 0.0.383 → 0.0.385

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_products/products_kit_option_product/products-kit-option-product.vue

@@ -0,0 +1,127 @@
+<template>
+  <div
+    class="ProductsKitOptionProduct__wrapper"
+    :class="{
+      'ProductsKitOptionProduct__wrapper--active': isSelectedProduct
+    }">
+    <div class="ProductsKitOptionProduct__preview">
+      <product-preview-main
+        ref="preview"
+        :product="product"
+        :to-editor="false"
+        @color="onProductSelectColor($event)" />
+    </div>
+    <div class="ProductsKitOptionProduct__select">
+      <btn
+        :btn-block="true"
+        @onclick="selectProduct"
+        :btn-class="isSelectedProduct ? 'green' : 'gray'"
+        btn-label="SELECT" />
+      <div
+        v-if="isSelectedProduct"
+        class="mt-5">
+        <products-kit-option-color
+          :products-kit="productsKit"
+          :option="option"
+          @color="onChooseColor($event)" />
+        <products-kit-option-size
+          class="mt-5"
+          :products-kit="productsKit"
+          :option="option" />
+        <div
+          v-if="selectedSimpleProduct"
+          class="mt-5 lc_subtitle3">
+          Stock: {{ currentQuantityStockLabel }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import ProductPreviewMain from '@/components/product/product_preview_main/product-preview-main';
+import ProductsKitOptionColor from '@lancom/shared/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_color/products-kit-option-color';
+import ProductsKitOptionSize from '@lancom/shared/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_size/products-kit-option-size';
+
+export default {
+  name: 'ProductsKitOptionProduct',
+  components: {
+    ProductPreviewMain,
+    ProductsKitOptionColor,
+    ProductsKitOptionSize
+  },
+  props: {
+    productsKit: {
+      type: Object,
+      required: true
+    },
+    option: {
+      type: Object,
+      required: true
+    },
+    product: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters(['country', 'currency', 'stockCountry']),
+    ...mapGetters('productsKit', [
+      'selectedOptionsProducts',
+      'selectedOptionsSimpleProducts',
+      'selectedOptionsColors',
+      'selectedOptionsSizes'
+    ]),
+    isSelectedProduct() {
+      return this.selectedOptionsProducts[this.option._id]?._id === this.product._id;
+    },
+    selectedColor() {
+      return this.selectedOptionsColors[this.option._id];
+    },
+    selectedSize() {
+      return this.selectedOptionsSizes[this.option._id];
+    },
+    selectedSimpleProduct() {
+      const simpleProducts = this.selectedOptionsSimpleProducts[this.option._id] || [];
+      return simpleProducts.find(sp => {
+        const isSameSize = sp.size?._id === this.selectedSize?._id;
+        const isSameColor = sp.color?._id === this.selectedColor?._id;
+        return isSameSize && isSameColor;
+      });
+    },
+    currentQuantityStock() {
+      return (this.selectedSimpleProduct?.quantityStock || 0);
+    },
+    currentQuantityStockLabel() {
+      return this.currentQuantityStock > 100 ? '100+' : this.currentQuantityStock;
+    }
+  },
+  watch: {
+    selectedColor() {
+      const color = this.isSelectedProduct ? this.selectedColor : null;
+      this.$refs.preview.currentColor = color;
+    }
+  },
+  methods: {
+    ...mapActions('productsKit', ['selectOptionProduct', 'selectOptionColor']),
+    selectProduct() {
+      const params = {
+        country: this.country?._id,
+        currency: this.currency?._id,
+        stockCountry: this.stockCountry?._id,
+        option: this.option,
+        product: this.product
+      };
+      this.selectOptionProduct(params);
+    },
+    onProductSelectColor(color) {
+      this.selectOptionColor({ option: this.option, color });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-kit-option-product';
+</style>

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_size/products-kit-option-size.scss

@@ -0,0 +1 @@
+@import "@/assets/scss/variables";

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_size/products-kit-option-size.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="ProductsKitOptionSize__wrapper">
+    <multiselect
+      v-model="selectedSize"
+      value="_id"
+      label="shortName"
+      track-by="_id"
+      placeholder="Select size"
+      :options="availableSizes"
+      :allow-empty="false"
+      :searchable="false"
+      :option-height="60">
+      <template #option="{ option }">
+        <div class="ProductsKitOptionSize__option">
+          <span class="ProductsKitOptionSize__option-name">
+            {{ option.shortName }}
+          </span>
+        </div>
+      </template>
+      <template #singleLabel="{ option }">
+        <div class="ProductsKitOptionSize__option">
+          {{ option.shortName }}
+        </div>
+      </template>
+    </multiselect>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import Multiselect from 'vue-multiselect';
+
+export default {
+  name: 'ProductsKitOptionSize',
+  components: {
+    Multiselect
+  },
+  props: {
+    productsKit: {
+      type: Object,
+      required: true
+    },
+    option: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('productsKit', [
+      'selectedOptionsSimpleProducts',
+      'selectedOptionsColors',
+      'selectedOptionsSizes',
+    ]),
+    selectedColor() {
+      return this.selectedOptionsColors[this.option._id];
+    },
+    selectedSize: {
+      get () {
+        return this.selectedOptionsSizes[this.option._id];
+      },
+      set(size) {
+        this.selectOptionSize({ option: this.option, size });
+      }
+    },
+    availableSizes() {
+      const simpleProducts = this.selectedOptionsSimpleProducts[this.option._id] || [];
+      const uniqueSizesMap = new Map();
+      simpleProducts
+        .filter(sp => sp.quantityStock > 0)
+        .forEach(({ size, color }) => {
+          const isSameColor = color?._id === this.selectedColor?._id;
+          if (size && isSameColor && !uniqueSizesMap.has(size._id)) {
+            uniqueSizesMap.set(size._id, size);
+          }
+        });
+      return Array.from(uniqueSizesMap.values());
+    }
+  },
+  methods: {
+    ...mapActions('productsKit', ['selectOptionSize'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-kit-option-size';
+</style>

package/components/products_kit/products_kits_list/products-kits-list.scss

@@ -0,0 +1,68 @@
+@import "@/assets/scss/variables";
+
+.ProductKitsList {
+  &__wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+  }
+  &__item {
+    width: calc(50% - 30px);
+    @media (max-width: $bp-extra-small-max) {
+      width: 100%
+    }
+    margin: 15px;
+    height: 300px;
+    
+    &--large {
+      width: 100%;
+      height: 500px;  
+      @media (max-width: $bp-extra-small-max) {
+        height: 300px;
+      }
+    }
+  }
+}
+
+
+.VuePagination {
+  &__pagination {
+    display: flex;
+    justify-content: center;
+    &-item {
+      font-size: 16px;
+      line-height: 170%;
+      color: $black;
+      width: 50px;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid $grey_3;
+      border-radius: 4px;
+      margin: 0 3px;
+      a {
+        display: block;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        padding-top: 11px;
+        cursor: pointer;
+        &:hover {
+          background-color: $grey_3;
+        }
+      }
+      &.active {
+        background-color: $black;
+        color: white;
+      }
+      &.disabled {
+        pointer-events: none;
+        opacity: .5;
+      }
+    }
+  }
+  &__count {
+    display: none;
+  }
+}

package/components/products_kit/products_kits_list/products-kits-list.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="ProductKitsList__wrapper">
+      <div
+        v-for="(item) in productsKits"
+        :key="item._id"
+        class="ProductKitsList__item">
+        <transition appear>
+          <products-kits-list-item :item="item" class="elevation2" />
+        </transition>
+      </div>
+    </div>
+    <pagination
+      v-if="count > perPage"
+      :itemsCount="count"
+      :itemsPerPage="perPage" />
+  </div>
+</template>
+
+<script>
+import Pagination from '@lancom/shared/components/common/pagination';
+import ProductsKitsListItem from './products_kits_list_item/products-kits-list-item';
+
+export default {
+  name: 'ProductKitsList',
+  components: {
+    ProductsKitsListItem,
+    Pagination
+  },
+  props: {
+    productsKits: {
+      type: Array,
+      required: true
+    },
+    count: {
+      type: Number
+    },
+    perPage: {
+      type: Number
+    },
+    page: {
+      type: Number
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'products-kits-list';
+</style>

package/components/products_kit/products_kits_list/products_kits_list_item/products-kits-list-item.scss

@@ -0,0 +1,84 @@
+@import "@/assets/scss/variables";
+
+.ProductsKitsListItem {
+  &__wrapper {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    background-color: $black_medium_emphasis;
+    position: relative;
+    height: 100%;
+  }
+  &__info {
+    position: absolute;
+    top: 30px;
+    left: 30px;
+    right: 30px;
+  }
+  &__link {
+    color: white;
+    font-size: 30px;
+    font-weight: 800;
+    @media (max-width: $bp-extra-small-max) {
+      font-size: 25px;
+    }
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  &__text {
+    margin-top: 10px;
+    color: white;
+    line-height: 150%;;
+  }
+  &__date {
+    color: #e8e8e8;
+    margin-top: 7px;
+    font-size: 11px;
+  }
+  &__more {
+    position: absolute;
+    bottom: 30px;
+    left: 30px;
+    padding: 10px;
+    border-width: 1px;
+    border-style: solid; 
+    border-color: white;
+    color: white;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition: border-color 0.3s;
+    font-size: 13px;
+    font-weight: 800;
+    &>span {
+      position: relative;
+    }
+
+    &::before {
+      content: ' ';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      opacity: 0;
+      background-color: $green;
+      transition: opacity 0.3s;
+    }
+
+    &:hover {
+      border-color: $green;
+      &::before {
+        opacity: 1;
+      }
+    }
+  }
+  &__overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    cursor: pointer;
+  }
+}

package/components/products_kit/products_kits_list/products_kits_list_item/products-kits-list-item.vue

@@ -0,0 +1,52 @@
+<template>
+  <article
+    class="ProductsKitsListItem__wrapper"
+    :style="{ backgroundImage }">
+    <a
+      class="ProductsKitsListItem__overlay"
+      :href="linkToProductsKit"
+      :title="item.name"></a>
+    <div class="ProductsKitsListItem__info">
+      <h3>
+        <a
+          :href="linkToProductsKit"
+          class="ProductsKitsListItem__link"
+          :title="item.name"
+          :style="{ color: item.color }">
+          {{ item.name }}
+        </a>
+      </h3>
+    </div>
+  </article>
+</template>
+
+<script>
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'ProductsKitsListItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    linkToProductsKit() {
+      return `/products-kit/${this.item.alias}`;
+    },
+    backgroundImage() {
+      return this.item.image ? `url('${staticLink(this.item.image.medium)}')` : '';
+    }
+  },
+  methods: {
+    goToNews() {
+      this.$router.push(this.linkToNews);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-kits-list-item';
+</style>

package/components/quotes/quote_view/quote-view.vue

@@ -53,6 +53,7 @@
         v-for="(optionItem, index) of options"
         :key="`option-${index}`"
         :option="optionItem"
+        :quote="quote"
         class="QuoteView__option" />
     </div>
     <h6

package/components/quotes/quote_view/quote_option_view/quote-option-view.vue

@@ -33,6 +33,10 @@ export default {
     QuoteViewProduct
   },
   props: {
+    quote: {
+      type: Object,
+      require: true
+    },
     option: {
       type: Object,
       require: true

package/components/quotes/quote_view/quote_product_color_simple_products/quote-product-color-simple-products.vue

@@ -37,7 +37,8 @@
           <quote-product-color-simple-product
             v-for="simpleProduct in group.simpleProducts"
             :key="simpleProduct._id"
-            :simple-product="simpleProduct" />
+            :simple-product="simpleProduct"
+            @change="onChangeColorSimpleProduct($event)" />
         </div>
         <div class="QuoteProductColorSimpleProducts__totals">
           <div
@@ -89,7 +90,13 @@ export default {
   },
   mixins: [
     QuoteProductColorSimpleProducts
-  ]
+  ],
+  methods: {
+    onChangeColorSimpleProduct() {
+      console.log('onChangeColorSimpleProduct:change...');
+      this.$emit('change');
+    }
+  }
 };
 </script>
 

package/components/quotes/quote_view/quote_product_color_simple_products/quote_product_color_simple_product/quote-product-color-simple-product.scss

@@ -7,6 +7,7 @@
     align-items: center;
     flex-direction: column;
     margin-right: 4px;
+    margin-bottom: 5px;
   }
   &__label {
     font-weight: 600;
@@ -17,10 +18,16 @@
     margin-bottom: 6px;
     margin-top: 0px;
   }
+  &__field-wrapper {
+    position: relative;
+    &:hover .QuoteProductColorSimpleProduct__controls {
+      display: flex;
+    }
+  }
   &__field {
     width: 32px;
     height: 28px;
-    background: #efefef;
+    background: $gray;
     font-weight: 600;
     font-size: 14px;
     line-height: 19px;
@@ -28,5 +35,51 @@
     color: #A2A2A2;
     border-radius: 0;
     padding: 2px !important;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    &[type=number] {
+      -moz-appearance: textfield;
+    }
+    &.empty {
+      color: #272727;
+    }
+    &.error {
+      color: #ff5a5a;
+    }
+  }
+  &__price {
+    width: 32px;
+    height: 28px;
+    font-size: 9px;
+    text-align: center;
+    color: #A2A2A2;
+    padding-top: 5px;
+  }
+  &__controls {
+    display: flex;
+    flex-direction: column;
+    display: none;
+  }
+  &__control {
+    position: absolute;
+    bottom: -10px;
+    width: 16px;
+    height: 16px;
+    background: $white;
+    border: 1px solid $gray;
+    font-size: 12px;
+    z-index: 4;
+    cursor: pointer;
+    text-align: center;
+    &--encrease {
+      right: 0px;
+    }
+    &--decrease {
+      left: 0px;
+    }
   }
 }

package/components/quotes/quote_view/quote_product_color_simple_products/quote_product_color_simple_product/quote-product-color-simple-product.vue

@@ -1,23 +1,101 @@
 <template>
   <div class="QuoteProductColorSimpleProduct__wrapper">
-    <div class="lc_regular16 QuoteProductColorSimpleProduct__label">
+    <label
+      :for="`amount-${simpleProduct.guid}`"
+      class="lc_regular16 QuoteProductColorSimpleProduct__label">
       {{ simpleProduct.size.shortName }}
-    </div>
-    <div
-      class="centered QuoteProductColorSimpleProduct__field">
-      {{ simpleProduct.amount || '-' }}
+    </label>
+    <div class="QuoteProductColorSimpleProduct__field-wrapper">
+      <input
+        :id="`amount-${simpleProduct.guid}`"
+        ref="input"
+        v-model.number="model"
+        type="number"
+        min="0"
+        class="form-field centered QuoteProductColorSimpleProduct__field"
+        :class="{
+          empty: !model,
+          error: model > simpleProduct.quantityStock
+        }"
+        @wheel="onWheel"
+        @change="onChange()" />
+      <div class="QuoteProductColorSimpleProduct__controls">
+        <span
+          class="QuoteProductColorSimpleProduct__control QuoteProductColorSimpleProduct__control--decrease"
+          @click="decrease()">
+          -
+        </span>
+        <span
+          class="QuoteProductColorSimpleProduct__control QuoteProductColorSimpleProduct__control--encrease"
+          @click="encrease()">
+          +
+        </span>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import confirm from '@lancom/shared/mixins/confirm';
+import { inRange, price } from '@lancom/shared/assets/js/utils/filters';
+
 export default {
   name: 'QuoteProductColorSimpleProduct',
+  mixins: [confirm],
+  filters: {
+    price
+  },
   props: {
     simpleProduct: {
       type: Object,
       required: true
     }
+  },
+  computed: {
+    model: {
+      get() {
+        return this.simpleProduct.amount;
+      },
+      set(value) {
+        this.setSimpleProductAmount({
+          guid: this.simpleProduct.guid,
+          amount: this.formatAmount(value)
+        });
+      }
+    }
+  },
+  methods: {
+    setSimpleProductAmount({ amount }) {
+      this.simpleProduct.amount = amount;
+    },
+    onWheel(e) {
+      e.target.blur();
+    },
+    onChange() {
+      if (this.$refs.input) {
+        this.$refs.input.blur();
+      }
+      this.$emit('change');
+    },
+    formatAmount(value) {
+      return inRange(value, 0, this.simpleProduct.quantityStock || 999);
+    },
+    encrease() {
+      console.log('encrease...');
+      this.setSimpleProductAmount({
+        guid: this.simpleProduct.guid,
+        amount: this.formatAmount(this.model + 1)
+      });
+      this.$emit('change');
+    },
+    decrease() {
+      console.log('decrease...');
+      this.setSimpleProductAmount({
+        guid: this.simpleProduct.guid,
+        amount: this.formatAmount(this.model - 1)
+      });
+      this.$emit('change');
+    }
   }
 };
 </script>