feat: ui improvements, show only active products, limit max page for infinity scroll

module/oc_telegram_shop/upload/oc_telegram_shop/src/Services/ProductsService.php

@@ -51,10 +51,12 @@ class ProductsService
         $forMainPage = $params['forMainPage'];
         $featuredProducts = $params['featuredProducts'];
         $mainpageProducts = $params['mainpageProducts'];
+        $status = $params['status'] ?? 1;
         $languageId = 1;
         $categoryName = '';
         $imageWidth = 300;
         $imageHeight = 300;
+        $maxPages = $params['maxPages'] ?? 10;
 
         if ($categoryId) {
             $categoryName = $this->queryBuilder->newQuery()
@@ -82,6 +84,8 @@ class ProductsService
                         ->where('product_description.language_id', '=', $languageId);
                 }
             )
+            ->where('products.status', '=', $status)
+            ->whereRaw('products.date_available < NOW()')
             ->when($categoryId !== 0, function (Builder $query) use ($categoryId) {
                 $query->join(
                     db_table('product_to_category') . ' AS product_to_category',
@@ -102,7 +106,7 @@ class ProductsService
             });
 
         $total = $productsQuery->count();
-        $lastPage = PaginationHelper::calculateLastPage($total, $perPage);
+        $lastPage = min(PaginationHelper::calculateLastPage($total, $perPage), $maxPages);
         $hasMore = $page + 1 <= $lastPage;
 
         $products = $productsQuery

spa/src/components/CategoriesInline.vue

@@ -7,8 +7,12 @@
     Каталог
   </RouterLink>
 
-  <RouterLink v-for="category in categoriesStore.topCategories" class="btn btn-md" :to="{name: 'product.categories.show', params: {category_id: category.id}}">
-    {{ category.name }}
+  <RouterLink
+      v-for="category in categoriesStore.topCategories"
+      class="btn btn-md max-w-[12rem]"
+      :to="{name: 'product.categories.show', params: {category_id: category.id}}"
+  >
+    <span class="overflow-hidden text-ellipsis whitespace-nowrap">{{ category.name }}</span>
   </RouterLink>
 </div>
 </template>

spa/src/components/CategoriesList/CategoryItem.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
 
-    <h3 class="ml-5 text-lg">{{ category.name }}</h3>
+    <h3 class="ml-5 text-lg line-clamp-2">{{ category.name }}</h3>
   </a>
 </template>
 
@@ -24,4 +24,4 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["onSelect"]);
-</script>
+</script>

spa/src/views/CategoriesList.vue

@@ -3,11 +3,11 @@
     <h2 class="text-3xl mb-5">Категории</h2>
 
     <button v-if="parentId" class="py-2 px-4 flex items-center mb-3 cursor-pointer" @click="goBack">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 min-w-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
       </svg>
 
-      <span class="ml-2">Назад к "{{ parentCategory.name }}"</span>
+      <span class="ml-2 line-clamp-2">Назад к "{{ parentCategory.name }}"</span>
     </button>
 
     <button

spa/src/views/Products.vue

@@ -1,9 +1,11 @@
 <template>
   <div ref="goodsRef" class="safe-top">
+    <SearchInput/>
     <ProductsList/>
   </div>
 </template>
 
 <script setup>
 import ProductsList from "@/components/ProductsList.vue";
+import SearchInput from "@/components/SearchInput.vue";
 </script>