@lancom/shared 0.0.62 → 0.0.66

package/components/product/product_size_selector/product-size-selector.scss

@@ -0,0 +1,13 @@
+@import "@/assets/scss/variables";
+.ProductSizeSelector {
+  &__table {
+    width: 100%;
+    table-layout: fixed;
+    thead tr {
+      background-color: $grey_3;
+    }
+    thead > tr > th {
+      padding: 12px 0;
+    }
+  }
+}

package/components/product/product_size_selector/product-size-selector.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="ProductSizeSelector__wrapper">
+    <table class="ProductSizeSelector__table">
+      <thead>
+        <tr>
+          <th>&nbsp;</th>
+          <th
+            v-for="size in availableSizes"
+            :key="size.alias"
+            class="lc_medium16">
+            {{ size.shortName }}
+          </th>
+          <th>&nbsp;</th>
+        </tr>
+      </thead>
+      <tbody>
+        <product-size-selector-color
+          v-for="color in selectedColors"
+          :key="color.alias"
+          :color="color"
+          :size-options="availableSizes"
+          :active="editableColor.alias === color.alias"
+          :allow-removing="selectedColors.length > 1"
+          @select="setEditableColor(color)"
+          @remove="handleRemoving(color)">
+        </product-size-selector-color>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+import confirmModal from '@lancom/shared/mixins/confirm';
+import ProductSizeSelectorColor from './product_size_selector_color/product-size-selector-color';
+
+const { mapGetters, mapMutations } = createNamespacedHelpers('product');
+
+export default {
+  name: 'ProductSizeSelector',
+  components: {
+    ProductSizeSelectorColor
+  },
+  mixins: [
+    confirmModal
+  ],
+  computed: {
+    ...mapGetters([
+      'availableSizes',
+      'editableColor',
+      'selectedColors'
+    ])
+  },
+  methods: {
+    ...mapMutations([
+      'setEditableColor',
+      'removeTemplateColor'
+    ]),
+    async handleRemoving({ _id }) {
+      const message = 'This will delete all items in this row, Press OK to continue or Cancel';
+      const confirm = await this.showConfirmationModal(message);
+      if (confirm) {
+        this.removeTemplateColor(_id);
+        if (this.editableColor._id === _id) {
+          this.setEditableColor(this.selectedColors[0]);
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-size-selector.scss';
+</style>

package/components/product/product_size_selector/product_size_selector_color/product-size-selector-color.scss

@@ -0,0 +1,50 @@
+@import "@/assets/scss/variables";
+
+.ProductSizeSelectorColor {
+  &__wrapper {
+    border: 1px solid $grey_4;
+    &.active {
+      border-color: $grey_2;
+      td {
+        border-top: 1px solid $grey_2;
+      }
+    }
+  }
+  &__thumbnail {
+    width: 36px;
+    height: 36px;
+    will-change: width, height;
+    transition-property: width, height;
+    transition-duration: .2s;
+    transition-timing-function: ease-in-out;
+    &-container {
+      width: 100%;
+      height: 100%;
+      padding: 12px 2px;
+      display: flex;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+  &__cell {
+    vertical-align: top;
+  }
+  &__wrapper.active &__cell-field {
+    height: 54px;
+  }
+  &__action {
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    color: $grey_5;
+    font-size: 24px;
+    opacity: 0;
+    transition: opacity .2s ease-in-out;
+    &-icon {
+      cursor: pointer;
+    }
+  }
+  &__wrapper:hover &__action {
+    opacity: 1;
+  }
+}

package/components/product/product_size_selector/product_size_selector_color/product-size-selector-color.vue

@@ -0,0 +1,66 @@
+<template>
+  <tr
+    class="ProductSizeSelectorColor__wrapper"
+    :class="{ active }">
+    <td class="ProductSizeSelectorColor__cell">
+      <div
+        class="ProductSizeSelectorColor__thumbnail-container"
+        @click="$emit('select')">
+        <product-color-image
+          :color="color"
+          class="ProductSizeSelectorColor__thumbnail">
+        </product-color-image>
+      </div>
+    </td>
+    <td
+      v-for="size in sizeOptions"
+      :key="size.alias"
+      class="ProductSizeSelectorColor__cell">
+      <product-size-selector-color-cell
+        :active="active"
+        :color="color"
+        :size="size">
+      </product-size-selector-color-cell>
+    </td>
+    <td class="ProductSizeSelectorColor__action">
+      <i
+        v-if="allowRemoving"
+        class="icon-delete ProductSizeSelectorColor__action-icon"
+        @click="$emit('remove')"></i>
+    </td>
+  </tr>
+</template>
+
+<script>
+import ProductColorImage from '@lancom/shared/components/product/product_color_image/product-color-image';
+import ProductSizeSelectorColorCell from './product_size_selector_color_cell/product-size-selector-color-cell';
+
+export default {
+  name: 'ProductSizeSelectorColor',
+  components: {
+    ProductColorImage,
+    ProductSizeSelectorColorCell
+  },
+  props: {
+    color: {
+      type: Object,
+      required: true
+    },
+    sizeOptions: {
+      type: Array,
+      required: true
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    allowRemoving: {
+      type: Boolean
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-size-selector-color.scss';
+</style>

package/components/product/product_size_selector/product_size_selector_color/product_size_selector_color_cell/product-size-selector-color-cell.scss

@@ -0,0 +1,60 @@
+@import "@/assets/scss/variables";
+
+.ProductSizeSelectorColorCell {
+  &__wrapper {
+    width: 100%;
+    height: 100%;
+    padding: 12px;
+    display: flex;
+    justify-content: center;
+    &.side-controls {
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+      input[type=number] {
+        -moz-appearance: textfield;
+      }
+    }
+  }
+  &__field {
+    position: relative;
+    width: 100%;
+    input {
+      height: 36px;
+      padding: 6px !important;
+      text-align: center !important;
+      color: $black;
+      transition: height .2s ease-in-out;
+      &.invalidate {
+        opacity: .3;
+      }
+      &.empty {
+        color: $grey_2;
+      }
+    }
+  }
+  &__side-control {
+    position: absolute;
+    top: 3px;
+    bottom: 3px;
+    display: flex;
+    justify-content: center;    
+    justify-content: center;
+    width: 30px;
+    background: $grey_2;
+    border-radius: 3px;
+    cursor: pointer;
+    &--left {
+      left: 3px;
+    }
+    &--right {
+      padding-top: 2px;
+      right: 3px;
+    }
+    &.disabled {
+      display: none;
+    }
+  }
+}

package/components/product/product_size_selector/product_size_selector_color/product_size_selector_color_cell/product-size-selector-color-cell.vue

@@ -0,0 +1,125 @@
+<template>
+  <div
+    class="ProductSizeSelectorColorCell__wrapper"
+    :class="{
+      active,
+      'side-controls': sideControls
+    }">
+    <div class="ProductSizeSelectorColorCell__field">
+      <div
+        class="ProductSizeSelectorColorCell__side-control ProductSizeSelectorColorCell__side-control--left"
+        :class="{ disabled }"
+        @click="model -= step">
+        <span> - </span>
+      </div>
+      <input
+        v-model.number="model"
+        type="number"
+        min="0"
+        max="9999"
+        class="form-field"
+        :class="{ invalidate: disabled, empty: !model }"
+        :disabled="disabled"
+        @focus="onFocus()"
+        @blur="onBlur()" />
+      <div
+        class="ProductSizeSelectorColorCell__side-control ProductSizeSelectorColorCell__side-control--right"
+        :class="{ disabled }"
+        @click="model += step">
+        <span> + </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+import confirm from '@lancom/shared/mixins/confirm';
+import { inRange } from '@lancom/shared/assets/js/utils/filters';
+
+const { mapGetters, mapMutations } = createNamespacedHelpers('product');
+
+export default {
+  name: 'ProductSizeSelectorColorCell',
+  mixins: [
+    confirm
+  ],
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: Object,
+      required: true
+    },
+    size: {
+      type: Object,
+      required: true
+    },
+    sideControls: {
+      type: Boolean,
+      default: false
+    },
+    showMaxModal: {
+      type: Boolean,
+      default: true
+    },
+    outStock: {
+      type: Boolean,
+      default: false
+    },
+    step: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      defaultValue: 0
+    };
+  },
+  computed: {
+    ...mapGetters(['usedSimpleProducts', 'product']),
+    disabled() {
+      const sizeWithoutColor = this.color.sizes && !this.color.sizes.find(({ alias }) => alias === this.size.alias);
+      return sizeWithoutColor || this.outStock;
+    },
+    simpleProduct() {
+      return this.usedSimpleProducts
+        .find(({ color, size }) => color._id === this.color._id && size._id === this.size._id);
+    },
+    model: {
+      get() {
+        return (this.simpleProduct || {}).amount || this.defaultValue;
+      },
+      set(value) {
+        const outOfStockQuantity = this.simpleProduct?.quantityStock || this.product.quantityStock;
+        if (outOfStockQuantity && outOfStockQuantity < value && this.showMaxModal) {
+          const message = `Maximum value: ${outOfStockQuantity}`;
+          this.showConfirmationModal(message);
+        }
+        const amount = inRange(value, 0, outOfStockQuantity || 999);
+        this.setSimpleProductAmount({
+          colorId: this.color._id,
+          sizeId: this.size._id,
+          amount
+        });
+      }
+    }
+  },
+  methods: {
+    ...mapMutations(['setSimpleProductAmount']),
+    onFocus() {
+      this.defaultValue = '';
+    },
+    onBlur() {
+      this.defaultValue = 0;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-size-selector-color-cell.scss';
+</style>

package/components/product/product_sizes_info/product-sizes-info.scss

@@ -0,0 +1,55 @@
+@import "@/assets/scss/variables";
+
+.ProductSizeInfo {
+  &__table {
+    tr {
+      border: 1px solid $gray;
+      @media (max-width: $bp-extra-small-max) {
+        height: 30px;
+      }
+    }
+  }
+  &__main-info {
+    font-weight: bold;
+    font-size: 16px;
+    text-transform: uppercase;
+    th, td {
+      color: $black;
+      border: 1px solid $gray;
+      @media (max-width: $bp-extra-small-max) {
+        font-size: 9px !important;
+      }
+      &:first-child {
+        width: 150px;
+        text-align: left;
+        padding-left: 10px;
+        @media (max-width: $bp-extra-small-max) {
+          width: 80px;
+        }
+      }
+    }
+  }
+  &__sub-info {
+    display: flex;
+    justify-content: center;
+    @media (max-width: $bp-extra-small-max) {
+      flex-direction: column;
+    }
+    &-wrapper {
+      width: 100%;
+    }
+    &-item {
+      margin-right: 24px;
+      font-weight: 600;
+      font-size: 14px;
+      color: $gray_main;
+      @media (max-width: $bp-extra-small-max) {
+        margin: 7px 0;
+        font-size: 11px;
+      }
+      i {
+        color: $green;
+      }
+    }
+  }
+}

package/components/product/product_sizes_info/product-sizes-info.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="ProductSizesInfo__wrapper">
+    <table class="ProductSizeInfo__table lc_table striped">
+      <thead class="centered">
+        <tr class="ProductSizeInfo__main-info">
+          <th>
+            Sizes
+          </th>
+          <th
+            v-for="({ size }, index) in product.sizes"
+            :key="index">
+            {{ size.shortName }}
+          </th>
+        </tr>
+      </thead>
+      <tbody class="centered">
+        <tr
+          v-for="(tr, index) in sizesTable"
+          :key="index"
+          class="ProductSizeInfo__main-info">
+          <td
+            v-for="({ value, colspan }, tdIndex) in tr"
+            :key="`td-${tdIndex}`"
+            :colspan="colspan">
+            <div
+              v-if="tdIndex"
+              v-tooltip="{ content: value }">
+              {{ value }}
+            </div>
+            <div v-else>
+              {{ value }}
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td
+            :colspan="product.sizes.length + 1"
+            class="ProductSizeInfo__sub-info-wrapper">
+            <div class="ProductSizeInfo__sub-info">
+              <div class="ProductSizeInfo__sub-info-item">
+                <i class="icon-info-circled"></i> Sizes in cm, tolerance +/- 1.5cm
+              </div>
+              <div class="ProductSizeInfo__sub-info-item">
+                <i class="icon-info-circled"></i> Sizes are subject change
+              </div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { getSizesFields } from '@lancom/shared/assets/js/utils/sizes';
+
+export default {
+  name: 'ProductSizesInfo',
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    sizesFields() {
+      return getSizesFields(this.product.sizes);
+    },
+    sizesTable() {
+      const table = this.sizesFields.reduce((trList, field) => {
+        const tr = this.product.sizes.reduce((tdList, { info }, index) => {
+          const td = { field, value: info[field] };
+          let checked = false;
+          const colspan = this.product.sizes.reduce((colspan, s, i) => {
+            if (i > index && !checked) {
+              if (td.value === s.info[field]) {
+                colspan++;
+              } else {
+                checked = true;
+              }
+            }
+            return colspan;
+          }, 1);
+          if (colspan > 1) {
+            td.colspan = colspan;
+          }
+          const isEqualPrev = (index > 0 && td.value === this.product.sizes[index - 1].info[field]);
+          return isEqualPrev ? tdList : [...tdList, td];
+        }, [{ field, value: field }]);
+        return [...trList, tr];
+      }, []);
+      return table;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-sizes-info';
+</style>

package/components/product/simple_products_price_info/simple-products-price-info.scss

@@ -0,0 +1,19 @@
+@import "@/assets/scss/variables";
+
+::v-deep {
+  tr {
+    border: 1px solid $gray !important;
+    @media (max-width: $bp-extra-small-max) {
+      height: 30px !important;
+    }
+    &, th, td {
+      font-weight: bold !important;
+      font-size: 16px;
+      text-transform: uppercase;
+      @media (max-width: $bp-extra-small-max) {
+        font-size: 9px !important;
+        padding: 1px !important;
+      }
+    }
+  }
+}

package/components/product/simple_products_price_info/simple-products-price-info.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="SimpleProductsPriceInfo__wrapper">
+    <pricing-table :items="sizesPrices" :bordered="true" />
+  </div>
+</template>
+
+<script>
+import PricingTable from '@lancom/shared/components/common/pricing_table/pricing-table';
+
+export default {
+  name: 'ProductSizesInfo',
+  components: {
+    PricingTable
+  },
+  props: {
+    simpleProducts: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    sizesPrices() {
+      return [...(this.simpleProducts || []).reduce((sizes, product) => {
+        sizes.set(product.size._id, {
+          name: product.size.shortName,
+          pricing: product.pricing
+        });
+        return sizes;
+      }, new Map()).values()];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'simple-products-price-info';
+</style>

package/components/products/product_list/product-list.scss

@@ -0,0 +1,47 @@
+@import "@/assets/scss/variables";
+
+.ProductList {
+  &__wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    @media (max-width: $bp-small-max) {
+      justify-content: center;
+    }
+  }
+  &__item-wrapper {
+    width: 340px;
+    height: 450px;
+    margin: 0 0 25px 25px;
+    position: relative;
+    z-index: 1;
+    &--active {
+      z-index: 2;
+    }
+    @media (max-width: $bp-extra-small-max) { 
+      margin: 0 auto 25px auto;
+    }
+  }
+  &__item {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transition: box-shadow 200ms;
+    box-shadow: 0px 0px 0px rgba(75, 75, 75, 0.2);
+    border-radius: 5px;
+    overflow: hidden;
+    &--active {
+      box-shadow: 0px 0px 30px rgba(75, 75, 75, 0.2);
+      bottom: auto;
+    }
+  }
+  &__empty {
+    margin-top: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: bold;
+    text-align: center;
+    width: 100%;
+  }
+}