@lancom/shared 0.0.62 → 0.0.66

package/components/products/products_autocomplete/products-autocomplete.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="ProductsAutocomplete__wrapper">
+    <div class="ProductsAutocomplete__input">
+      <input
+        v-model="text"
+        name="search"
+        placeholder="Search"
+        type="text"
+        class="form-field no-label tiny-placeholder labelless"
+        @input="searchWithDebounce"
+        @focus="showResults"
+        @blur="hideResults" />
+      <i class="icon-search"></i>
+    </div>
+    <div
+      v-if="text && visibleResult && (searching || hasProducts)"
+      class="ProductsAutocomplete__result">
+      <div>
+        <spinner v-if="searching" />
+      </div>
+      <div v-if="hasProducts">
+        <products-autocomplete-item
+          v-for="product of products"
+          :key="product._id"
+          :to-editor="false"
+          :product="product"
+          class="ProductsAutocomplete__result-item"
+          @click="$emit('select')" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import debounce from 'lodash.debounce';
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+import ProductsAutocompleteItem from './products_autocomplete-item/products-autocomplete-item';
+
+export default {
+  name: 'LancomProductsAutocomplete',
+  components: {
+    ProductsAutocompleteItem
+  },
+  data() {
+    return {
+      searching: false,
+      visibleResult: false,
+      text: '',
+      products: [],
+      searchWithDebounce: debounce(this.search, 500),
+      hideTimer: null
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    hasProducts() {
+      return this.products.length > 0;
+    }
+  },
+  methods: {
+    showResults() {
+      clearTimeout(this.hideTimer);
+      this.visibleResult = true;
+    },
+    hideResults() {
+      this.hideTimer = setTimeout(() => {
+        this.visibleResult = false;
+      }, 200);
+    },
+    async search() {
+      this.searching = true;
+      try {
+        this.products = this.text ? await api.searchProducts(this.shop._id, this.text) : [];
+      } catch (e) {
+        this.products = [];
+      } finally {
+        this.searching = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-autocomplete';
+</style>

package/components/products/products_autocomplete/products_autocomplete-item/products-autocomplete-item.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <nuxt-link
+      :to="productLink"
+      class="ProductListProduct__link">
+      {{ product.SKU }} - {{ product.name }}
+    </nuxt-link>
+  </div>
+</template>
+
+<script>
+import ProductPreview from '@lancom/shared/mixins/product-preview';
+
+export default {
+  name: 'LancomProductsAutocompleteProduct',
+  mixins: [ProductPreview]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-autocomplete-item';
+</style>

package/components/products/products_brands/products-brands.scss

@@ -0,0 +1,28 @@
+@import "@/assets/scss/variables";
+
+.ProductsBrands {
+  &__header {
+    font-size: 22px;
+    line-height: 20px;
+    font-weight: 600;
+    margin-top: 3px;
+    margin-bottom: 24px;
+    color: $black;
+  }
+  &__item {
+    margin: 19px 0;
+    font-size: 19px;
+    font-weight: 400;
+    i {
+      font-size: 20px;
+    }
+    a {
+      color: $grey_1;
+      text-decoration: none;
+      display: flex;
+    }
+    &--active a {
+      color: $green;
+    }
+  }
+}

package/components/products/products_brands/products-brands.vue

@@ -0,0 +1,58 @@
+<template>
+  <div
+    v-if="list.length"
+    class="ProductsBrands__wrapper">
+    <toggle-content label="Brands">
+      <div
+        v-for="brand in list"
+        :key="brand.alias"
+        class="ProductsBrands__item"
+        :class="{
+          'ProductsBrands__item--active': brand.alias === currentBrand
+        }">
+        <products-link :brand="brand.alias === currentBrand ? null : brand.alias">
+          <checked-icon
+            v-if="hasSelectedIcon"
+            :checked="brand.alias === currentBrand" />
+          {{ brand.name }}
+        </products-link>
+      </div>
+    </toggle-content>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+import ToggleContent from '@lancom/shared/components/common/toggle-content';
+import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
+
+export default {
+  name: 'ProductsBrands',
+  components: {
+    ProductsLink,
+    ToggleContent,
+    CheckedIcon
+  },
+  props: {
+    hasSelectedIcon: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters('products', ['brands', 'types']),
+    list() {
+      const type = this.types.find(type => type.alias === this.$route.params.type);
+      return type ? this.brands.filter(({ productTypes = [] }) => productTypes.some(t => type._id === t)) : this.brands;
+    },
+    currentBrand() {
+      return this.$route.params.brand;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-brands';
+</style>

package/components/products/products_catalog/products-catalog.scss

@@ -0,0 +1,43 @@
+@import "@/assets/scss/variables";
+
+.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/products_catalog/products-catalog.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="ProductsCatalog__wrapper">
+    <div v-if="products">
+      <slot
+        name="list"
+        v-bind="{ products, toEditor }">
+        <product-list :products="products" :to-editor="toEditor" />
+      </slot>
+      <pagination
+        v-model="currentPage"
+        :records="count"
+        :per-page="perPage"
+        :options="{ chunk: 3 }" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import Pagination from 'vue-pagination-2';
+import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
+import ProductList from '../product_list/product-list';
+
+export default {
+  name: 'LancomProductsCatalog',
+  components: {
+    ProductList,
+    Pagination
+  },
+  props: {
+    toEditor: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapGetters('products', [
+      'products',
+      'page',
+      'count',
+      'perPage'
+    ]),
+    currentPage: {
+      get() {
+        return this.page;
+      },
+      set(page) {
+        const link = generateProductsLink(this.$route, { page });
+        this.$router.push(link);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'products-catalog';
+</style>

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

@@ -0,0 +1,59 @@
+@import "@/assets/scss/variables";
+
+.ProductsColors {
+  &__header {
+    font-size: 22px;
+    line-height: 20px;
+    font-weight: 600;
+    margin-top: 3px;
+    margin-bottom: 24px;
+    color: $black;
+  }
+  &__selected-item {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    margin: 12px 0;
+    padding-top: 4px;
+    color: $grey_1;
+    i {
+      font-size: 22px;
+    }
+    a {
+      color: $grey_1;
+    }
+  }
+  &__selected-name {
+    flex-grow: 1;
+    margin-left: 14px;
+    text-transform: uppercase;
+  }
+  &__selected-cancel {
+    cursor: pointer;
+  }
+  &__color {
+    padding: 2px;
+    border: 2px solid $white;
+    width: 36px;
+    height: 36px;
+    border-radius: 13px;
+    flex-shrink: 0;
+    &-image {
+      width: 100%;
+      height: 100%;
+      border-radius: 11px;
+    }
+    &--selected {
+      border: 2px solid $grey_1;
+    }
+  }
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 20px;
+    margin-left: -5px;
+    &-color {
+      margin: 1px 4px;
+    }
+  }
+}

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

@@ -0,0 +1,73 @@
+<template>
+  <div class="ProductsColors__wrapper">
+    <toggle-content label="Colours">
+      <div class="ProductsColors__selected">
+        <div
+          v-for="color in selectedColors"
+          :key="color._id"
+          class="ProductsColors__selected-item">
+          <div class="ProductsColors__color ProductsColors__color--selected">
+            <product-color-image
+              :color="color"
+              class="ProductsColors__color-image" />
+          </div>
+          <div class="ProductsColors__selected-name">
+            {{ color.name }}
+          </div>
+          <products-link :color="color.alias">
+            <i class="icon-cancel ProductsColors__selected-cancel"></i>
+          </products-link>
+        </div>
+      </div>
+      <div class="ProductsColors__items">
+        <products-link
+          v-for="color in colors"
+          :key="color._id"
+          v-tooltip="color.name"
+          :color="color.alias">
+          <div
+            class="ProductsColors__items-color ProductsColors__color"
+            :class="{
+              'ProductsColors__color--selected': isSelectedColor(color)
+            }">
+            <product-color-image
+              :color="color"
+              class="ProductsColors__color-image" />
+          </div>
+        </products-link>
+      </div>
+    </toggle-content>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import ToggleContent from '@lancom/shared/components/common/toggle-content';
+import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
+import ProductColorImage from '@lancom/shared/components/product/product_color_image/product-color-image';
+
+export default {
+  name: 'ProductsColors',
+  components: {
+    ProductColorImage,
+    ProductsLink,
+    ToggleContent
+  },
+  computed: {
+    ...mapGetters('products', ['colors']),
+    selectedColors() {
+      const colors = (this.$route.query.colors || '').split(',');
+      return this.colors.filter(color => colors.includes(color.alias));
+    }
+  },
+  methods: {
+    isSelectedColor(color) {
+      return this.selectedColors.some(c => c._id === color._id);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-colors';
+</style>

package/components/products/products_filters/products-filters.scss

@@ -0,0 +1,50 @@
+@import "@/assets/scss/variables";
+
+.ProductsFilters {
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  &__filter {
+    margin-left: 10px;
+    margin-right: 10px;      
+    padding: 15px;
+    border: 1px solid $grey_3;
+    position: relative;
+    border-radius: 7px;
+    &--active {
+      background-color: $green;
+      color: white;
+    }
+  }
+  &__sort {
+    width: 216px;
+    .multiselect.labelless .multiselect__tags {
+      padding-top: 10px;
+      padding-bottom: 10px;
+      border: 1px solid $grey_3;
+    }
+    .multiselect__placeholder {
+      font-size: 16px;
+      position: relative;
+      top: 5px;
+    }
+  }
+  &__search {
+    flex-grow: 1;
+    margin-left: 30px;
+    position: relative;
+    input::placeholder {
+      font-size: 16px !important;
+      font-weight: 400;
+    }
+    i {
+      position: absolute;
+      top: 17px;
+      right: 15px;
+      font-size: 17px !important;
+      pointer-events: none;
+    }
+  }
+}

package/components/products/products_filters/products-filters.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="ProductsFilters__wrapper form__wrapper">
+    <div class="ProductsFilters__sort">
+      <multiselect
+        v-model="sortBy"
+        :options="sortByOptions"
+        placeholder="Sort By"
+        :option-height="35"
+        value="value"
+        label="label"
+        class="labelless">
+      </multiselect>
+    </div>
+    <div
+      class="ProductsFilters__filter hidden-md-and-up"
+      :class="{
+        'ProductsFilters__filter--active': hasFilters
+      }">
+      <i
+        class="icon-filter ProductsFilters__menu-toggle"
+        @click="$emit('open')"></i>
+    </div>
+    <div class="ProductsFilters__search hidden-sm-and-down">
+      <input
+        v-model="search"
+        name="search"
+        placeholder="Search"
+        type="text"
+        class="form-field no-label tiny-placeholder labelless"
+        @change="goToTextSearch" />
+      <i class="icon-search"></i>
+    </div>
+    <!-- <multiselect
+      v-model="sortBy"
+      :options="sortByOptions"
+      :option-height="35"
+      value="value"
+      label="label"
+      class="labelless" /> -->
+  </div>
+</template>
+
+<script>
+import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
+
+export default {
+  name: 'ProductsFilters',
+  data() {
+    const sortByOptions = [{
+      value: '',
+      label: 'Without Sort'
+    }, {
+      value: 'price-high-low',
+      label: ' high to low'
+    }, {
+      value: 'price-low-high',
+      label: 'low to high'
+    }];
+    return {
+      sortBy: sortByOptions.find(({ value }) => value === this.$route.query.sort),
+      search: this.$route.query.text || '',
+      sortByOptions
+    };
+  },
+  computed: {
+    hasFilters() {
+      const { type, brand, tags } = this.$route.params;
+      const { text, colors } = this.$route.query;
+      return type || brand || tags || text || colors;
+    }
+  },
+  watch: {
+    sortBy() {
+      this.goToPageWithFilters({ sort: this.sortBy.value });
+    }
+  },
+  methods: {
+    goToTextSearch() {
+      this.goToPageWithFilters({ text: this.search });
+    },
+    goToPageWithFilters(filters) {
+      const link = generateProductsLink(this.$route, filters);
+      this.$router.push(link);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'products-filters';
+</style>

package/components/products/products_link/products-link.vue

@@ -0,0 +1,56 @@
+<template>
+  <nuxt-link
+    :to="link"
+    class="ProductsLink">
+    <slot></slot>
+  </nuxt-link>
+</template>
+
+<script>
+import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
+export default {
+  name: 'ProductsLink',
+  props: {
+    type: {
+      type: String
+    },
+    brand: {
+      type: String
+    },
+    tags: {
+      type: String
+    },
+    color: {
+      type: String
+    },
+    attributes: {
+      type: Object
+    },
+    text: {
+      type: String
+    },
+    sort: {
+      type: String
+    }
+  },
+  computed: {
+    link() {
+      const params = {
+        type: this.type,
+        brand: this.brand,
+        tags: this.tags,
+        colors: this.color,
+        option: this.option,
+        text: this.text,
+        sort: this.sort,
+        ...(this.attributes || {})
+      };
+      return generateProductsLink(this.$route, params);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-link';
+</style>

package/components/products/products_tags/products-tags.scss

@@ -0,0 +1,34 @@
+@import "@/assets/scss/variables";
+
+.ProductsTags {
+  &__title {
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 25px;
+    text-transform: uppercase;
+    color: $black;
+  }
+  &__options {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 16px;
+  }
+  &__item {
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 150%;
+    padding: 8px 10px;
+    background: $gray;
+    border-radius: 2px;
+    margin-right: 6px;
+    margin-bottom: 6px;
+    a {
+      color: $black;
+      text-decoration: none;
+      display: flex;
+    }
+    &--active {
+      background-color: $green;
+    }
+  }
+}