@lancom/shared 0.0.90 → 0.0.91

package/assets/js/utils/filters.js

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import DateOnly from 'dateonly';
 
 import currencies from '../constants/currencies';
@@ -68,11 +68,11 @@ export const highlight = (string = '', query) => {
   return string.toString().replace(q, matchedTxt => (`<span class="highlight">${matchedTxt}</span>`));
 };
 
-export const date = d => moment(d).format('lll');
+export const date = d => dayjs(d).format('ddd, MMM D, YYYY h:mm A');
 
-export const shortDate = d => moment(d).format('DD/MM/YYYY');
+export const shortDate = d => dayjs(d).format('DD/MM/YYYY');
 
-export const sydneyTime = d => moment(d).utc().utcOffset(10).format('lll');
+export const sydneyTime = d => dayjs(d).utc().utcOffset(10).format('MMM D, YYYY h:mm A');
 
 export const priceInRange = (prices, amount) => (prices.find(({ min, max }) => min <= amount && (!max || max >= amount)) || { price: 0 }).price;
 

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

@@ -79,12 +79,16 @@
 
 <script>
 import { createNamespacedHelpers, mapGetters } from 'vuex';
+import FileUploader from '@lancom/shared/components/common/file_uploader';
 import modals from '@lancom/shared/mixins/modals';
 
 const { mapActions, mapMutations } = createNamespacedHelpers('product');
 
 export default {
   name: 'EditorLayersToolbar',
+  components: {
+    FileUploader
+  },
   mixins: [
     modals
   ],

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

@@ -14,7 +14,22 @@
         }"
         @mouseenter="setActiveProduct(index)"
         @mouseleave="setActiveProduct(null)">
-        <slot name="product" v-bind="{ product, full: activeProduct === index, toEditor }">
+        <slot
+          v-if="placeholder"
+          name="placeholder"
+          v-bind="{ product, full: activeProduct === index, toEditor }">
+          <product-list-product-placeholder
+            :product="product"
+            :to-editor="toEditor"
+            class="ProductList__item"
+            :class="{
+              'ProductList__item--active': activeProduct === index
+            }" />
+        </slot>
+        <slot
+          v-else
+          name="product"
+          v-bind="{ product, full: activeProduct === index, toEditor }">
           <product-list-product
             :product="product"
             :to-editor="toEditor"
@@ -36,11 +51,13 @@
 
 <script>
 import ProductListProduct from '../product_list_product/product-list-product';
+import ProductListProductPlaceholder from '../product_list_product_placeholder/product-list-product-placeholder';
 
 export default {
   name: 'LancomProductList',
   components: {
-    ProductListProduct
+    ProductListProduct,
+    ProductListProductPlaceholder
   },
   props: {
     products: {
@@ -50,6 +67,10 @@ export default {
     toEditor: {
       type: Boolean,
       default: true
+    },
+    placeholder: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

package/components/products/product_list_product_placeholder/product-list-product-placeholder.scss

@@ -0,0 +1,52 @@
+@import "@/assets/scss/variables";
+
+.ProductListProductPlaceholder {
+  &__wrapper {
+    padding: 30px;
+  }
+  &__link {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 30px;
+    text-indent: -99999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+  &__image {
+    width: 100%;
+    height: 250px;
+    animation-name: backgroundColorPalette;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+  }
+  &__info {
+    margin-top: 20px;
+    width: 100%;
+    height: 30px;
+    animation-name: backgroundColorPalette;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    &--medium {
+      width: 80%;
+    }
+    &--small {
+      width: 60%;
+    }
+  }
+}
+
+@keyframes backgroundColorPalette {
+  0% {
+    background: #efefef;
+  }
+  100% {
+    background: #d9d9d9;
+  }
+}

package/components/products/product_list_product_placeholder/product-list-product-placeholder.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="ProductListProductPlaceholder__wrapper">
+    <nuxt-link
+      :to="productLink"
+      class="ProductListProductPlaceholder__link">
+      <span class="ProductListProductPlaceholder__image"></span>
+      <span class="ProductListProductPlaceholder__info ProductListProductPlaceholder__info--large"></span>
+      <span class="ProductListProductPlaceholder__info ProductListProductPlaceholder__info--medium"></span>
+      <span class="ProductListProductPlaceholder__info ProductListProductPlaceholder__info--small"></span>
+      {{ product.name }}
+    </nuxt-link>
+  </div>
+</template>
+
+<script>
+import productPreview from '@lancom/shared/mixins/product-preview';
+
+export default {
+  name: 'ProductListProductPlaceholder',
+  mixins: [productPreview]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-list-product-placeholder';
+</style>

package/components/products/products_aside/products-aside.scss

@@ -11,4 +11,36 @@
       display: none;
     }
   }
+  &__placeholder {
+    display: flex;
+    flex-direction: column;
+    margin-right: 20px;
+  }
+  &__info {
+    margin-top: 20px;
+    width: 100%;
+    height: 20px;
+    animation-name: backgroundColorPalette;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    &--medium {
+      width: 85%;
+    }
+    &--small {
+      width: 70%;
+    }
+    &--small2 {
+      width: 55%;
+    }
+  }
+}
+
+@keyframes backgroundColorPalette {
+  0% {
+    background: #efefef;
+  }
+  100% {
+    background: #d9d9d9;
+  }
 }

package/components/products/products_aside/products-aside.vue

@@ -2,38 +2,35 @@
   <div
     :data-aos="aosFadeRight"
     class="ProductsAside__wrapper">
-    <!-- <div class="ProductsAside__item hidden-md-and-up">
-      <input
-        v-model="search"
-        name="search"
-        placeholder="Search"
-        type="text"
-        class="form-field no-label tiny-placeholder labelless"
-        @change="goToTextSearch" />
-    </div> -->
-    <!-- <div class="ProductsAside__item">
-      <products-types
-        :has-selected-icon="hasSelectedIcon"
-        :has-thumbs="hasThumbs" />
-    </div> -->
-    <div class="ProductsAside__item">
-      <products-brands
-        :has-selected-icon="hasSelectedIcon" />
+    <div
+      v-if="placeholder"
+      class="ProductsAside__placeholder">
+      <span class="ProductsAside__info ProductsAside__info--large"></span>
+      <span class="ProductsAside__info ProductsAside__info--medium"></span>
+      <span class="ProductsAside__info ProductsAside__info--small"></span>
+      <span class="ProductsAside__info ProductsAside__info--small2"></span>
     </div>
-    <div class="ProductsAside__item">
-      <products-colors />
-    </div>
-    <div class="ProductsAside__item">
-      <products-attributes
-        :has-selected-icon="hasSelectedIcon" />
-      <products-tags
-        :has-selected-icon="hasSelectedIcon" />
+    <div v-else>
+      <div class="ProductsAside__item">
+        <products-brands
+          :has-selected-icon="hasSelectedIcon" />
+      </div>
+      <div class="ProductsAside__item">
+        <products-colors />
+      </div>
+      <div class="ProductsAside__item">
+        <products-attributes
+          :has-selected-icon="hasSelectedIcon" />
+        <products-tags
+          :has-selected-icon="hasSelectedIcon" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import ProductsTypes from '@lancom/shared/components/products/products_types/products-types';
+// import ProductsTypes from '@lancom/shared/components/products/products_types/products-types';
+import { mapGetters } from 'vuex';
 import ProductsBrands from '@lancom/shared/components/products/products_brands/products-brands';
 import ProductsTags from '@lancom/shared/components/products/products_tags/products-tags';
 import ProductsAttributes from '@lancom/shared/components/products/products_attributes/products-attributes';
@@ -43,7 +40,7 @@ import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
 export default {
   name: 'ProductsAside',
   components: {
-    ProductsTypes,
+    // ProductsTypes,
     ProductsBrands,
     ProductsTags,
     ProductsAttributes,
@@ -64,6 +61,9 @@ export default {
       search: this.$route.query.text || ''
     };
   },
+  computed: {
+    ...mapGetters('products', ['placeholder'])
+  },
   methods: {
     goToTextSearch() {
       this.goToPageWithFilters({ text: this.search });

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

@@ -3,8 +3,11 @@
     <div v-if="products">
       <slot
         name="list"
-        v-bind="{ products, toEditor }">
-        <product-list :products="products" :to-editor="toEditor" />
+        v-bind="{ products, toEditor, placeholder }">
+        <product-list
+          :products="products"
+          :to-editor="toEditor"
+          :placeholder="placeholder" />
       </slot>
       <pagination
         v-model="currentPage"
@@ -38,7 +41,8 @@ export default {
       'products',
       'page',
       'count',
-      'perPage'
+      'perPage',
+      'placeholder'
     ]),
     currentPage: {
       get() {
@@ -47,6 +51,7 @@ export default {
       set(page) {
         const link = generateProductsLink(this.$route, { page });
         this.$router.push(link);
+        window.scrollTo(0, 0);
       }
     }
   }

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

@@ -69,7 +69,7 @@ export default {
   mounted() {
     setTimeout(() => {
       this.canLoadImages = true;
-    }, 5000);
+    }, 1000);
   },
   methods: {
     isSelectedColor(color) {

package/components/quotes/quote_request/quote-request.vue

@@ -297,11 +297,13 @@
 import api from '@lancom/shared/assets/js/api';
 import { mapGetters } from 'vuex';
 import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+import FileUploader from '@lancom/shared/components/common/file_uploader';
 
 export default {
   name: 'QuoteRequest',
   components: {
-    CheckedIcon
+    CheckedIcon,
+    FileUploader
   },
   data() {
     return {

package/mixins/product-preview.js

@@ -54,9 +54,6 @@ const productPreview = {
     productLink() {
       return generateProductLink(this.product, this.currentColor, this.toEditor);
     },
-    productСoverBig() {
-      return getProductLargeCover(this.product, 'front', this.currentColor);
-    },
     productСover() {
       return getProductMediumCover(this.product, 'front', this.currentColor);
     },
@@ -84,11 +81,11 @@ const productPreview = {
     if (process.client) {
       setTimeout(() => {
         this.loadHolder.canLoadImages = true;
-      }, 2500);
+      }, 0);
       setTimeout(() => {
         this.loadHolder.canLoadBackImages = true;
         this.loadHolder.canLoadColorImages = true;
-      }, 5000);
+      }, 3000);
     }
   }
 };

package/package.json

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

package/plugins/global-components.js

@@ -1,12 +1,10 @@
 import Vue from 'vue';
 import Btn from '@lancom/shared/components/common/btn';
 import Spinner from '@lancom/shared/components/common/spinner';
-import FileUploader from '@lancom/shared/components/common/file_uploader';
 import Checkbox from '@lancom/shared/components/common/checkbox';
 import Breakpoint from '@lancom/shared/components/common/breakpoint';
 
 Vue.component('btn', Btn);
 Vue.component('spinner', Spinner);
-Vue.component('file-uploader', FileUploader);
 Vue.component('Checkbox', Checkbox);
 Vue.component('breakpoint', Breakpoint);

package/plugins/vue-recaptcha.js

@@ -1,17 +1,22 @@
 import Vue from 'vue';
-import { VueReCaptcha } from 'vue-recaptcha-v3';
 
 export default () => {
-  Vue.use(VueReCaptcha, {
-    siteKey: process.env.RECAPTCHA_KEY,
-    loaderOptions: {
-      useRecaptchaNet: true
-    }
-  });
   Vue.mixin({
     methods: {
       async getRecaptcha(name) {
+        if (!this.$recaptcha) {
+          await this.loadReCaptcha();
+        }
         return process.env.IS_LOCAL === 'true' || await this.$recaptcha(name);
+      },
+      async loadReCaptcha() {
+        const { VueReCaptcha } = await import('vue-recaptcha-v3');
+        Vue.use(VueReCaptcha, {
+          siteKey: process.env.RECAPTCHA_KEY,
+          loaderOptions: {
+            useRecaptchaNet: true
+          }
+        });
       }
     }
   });

package/store/products.js

@@ -10,7 +10,8 @@ export const state = () => ({
   brands: [],
   tags: [],
   attributes: [],
-  loadError: null
+  loadError: null,
+  placeholder: false
 });
 
 export const getters = {
@@ -23,7 +24,8 @@ export const getters = {
   page: ({ page }) => page,
   count: ({ count }) => count,
   perPage: ({ perPage }) => perPage,
-  loadError: ({ loadError }) => loadError
+  loadError: ({ loadError }) => loadError,
+  placeholder: ({ placeholder }) => placeholder
 };
 
 export const actions = {
@@ -55,6 +57,9 @@ export const actions = {
 };
 
 export const mutations = {
+  setPlaceholder(state, placeholder) {
+    state.placeholder = placeholder;
+  },
   setProducts(state, products) {
     state.products = products;
   },