@lancom/shared 0.0.350 → 0.0.351

package/components/common/pagination.vue

@@ -0,0 +1,77 @@
+<template>
+	<div>
+		<nav>
+			<ul class="pagination">
+				<li
+					v-for="page in totalPages"
+					:key="page"
+					:class="{ active: page === currentPage }">
+					<a :href="`${baseUrl}${page > 1 ? `${dividerPage}page=${page}` : ''}`">
+						{{ page }}
+					</a>
+				</li>
+			</ul>
+		</nav>
+	</div>
+</template>
+
+<script>
+export default {
+  data() {
+		const baseUrl = this.$route.fullPath
+			.replace(/page=[0-9]+/, '')
+			.replace(/\?$/, '')
+			.replace(/\&$/, '');
+    return {
+      baseUrl,
+      dividerPage: baseUrl.includes('?') ? '&' : '?',
+      currentPage: parseInt(this.$route.query.page) || 1
+    };
+  },
+	props: {
+		itemsCount: {
+			type: Number,
+			required: true
+		},
+		itemsPerPage: {
+			type: Number,
+			default: 50
+		}
+	},
+  computed: {
+    totalPages() {
+      return Math.min(20, Math.ceil(this.itemsCount / this.itemsPerPage));
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+	@import "@/assets/scss/variables";
+	.pagination {
+		list-style: none;
+		display: flex;
+		gap: 6px;
+		padding: 0;
+		justify-content: center;
+	}
+
+	.pagination li {
+		cursor: pointer;
+	}
+
+	.pagination li.active {
+		background-color: $medium_gray;
+		color: white;
+		font-weight: bold;
+	}
+
+	.pagination li a {
+		text-decoration: none;
+		color: inherit;
+		display: block;
+		border: 1px solid #ddd;
+		padding: 8px 12px;
+		border-radius: 3px;
+	}
+</style>

package/components/news/news_list/news-list.vue

@@ -16,16 +16,14 @@
       </div>
     </div>
     <pagination
-      v-if="perPage > 0"
-      v-model="currentPage"
-      :records="count"
-      :per-page="perPage"
-      :options="{ chunk: 3 }" />
+      v-if="count > perPage"
+      :itemsCount="count"
+      :itemsPerPage="perPage" />
   </div>
 </template>
 
 <script>
-import Pagination from 'vue-pagination-2';
+import Pagination from '@lancom/shared/components/common/pagination';
 import NewsListItem from '../news_list_item/news-list-item';
 
 export default {
@@ -48,23 +46,6 @@ export default {
     page: {
       type: Number
     }
-  },
-  computed: {
-    currentPage: {
-      get() {
-        return this.page;
-      },
-      set(page) {
-        const params = [];
-        if (page > 1) {
-          params.push(`page=${page}`);
-        }
-        const link = `${this.$route.path}${params.length ? `?${params.join('&')}` : ''}`;
-        window.location = link;
-        // this.$router.push(link);
-        // window.scrollTo(0, 0);
-      }
-    }
   }
 };
 </script>

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

@@ -10,17 +10,16 @@
           :placeholder="placeholder" />
       </slot>
       <pagination
-        v-model="currentPage"
-        :records="count"
-        :per-page="perPage"
-        :options="{ chunk: 3 }" />
+        v-if="count > perPage"
+        :itemsCount="count"
+        :itemsPerPage="perPage" />
     </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import Pagination from 'vue-pagination-2';
+import Pagination from '@lancom/shared/components/common/pagination';
 import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
 import ProductList from '../product_list/product-list';
 

package/layouts/products.vue

@@ -99,7 +99,8 @@
       ...mapGetters(['notificationBar', 'shop', 'country', 'currency']),
       ...mapGetters('products', ['category', 'categories', 'brands', 'types', 'tags', 'loadError', 'count', 'products', 'minPrice', 'maxPrice']),
       pageItemCanonical() {
-        return this.breadcrumbs[this.breadcrumbs.length - 1]?.to;
+        const page = +this.$route.query.page;
+        return `${this.breadcrumbs[this.breadcrumbs.length - 1]?.to}${page > 1 ? `?page=${page}` : ''}`;
       },
       currentBrand() {
         return this.findByRouteParam(this.brands, 'brand');
@@ -314,7 +315,8 @@
           ...this.$route.query,
           country: this.country?._id,
           currency: this.currency?._id,
-          placeholder
+          placeholder,
+          limit: 80
         };
         try {
           await this.fetchProducts({ params, shop: this.shop._id });

package/package.json

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