feat: safe-top and search

module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/ProductsHandler.php

@@ -50,6 +50,7 @@ class ProductsHandler
         $page = $request->get('page', 1);
         $perPage = 6;
         $categoryId = (int) $request->get('categoryId', 0);
+        $search = trim($request->get('search', ''));
 
         $categoryName = '';
 
@@ -100,7 +101,10 @@ class ProductsHandler
                 function (Builder $query) use ($featuredProducts) {
                     $query->whereIn('products.product_id', $featuredProducts);
                 }
-            );
+            )
+            ->when($search, function (Builder $query) use ($search) {
+                $query->where('product_description.name', 'LIKE', '%' . $search . '%');
+            });
 
         $total = $productsQuery->count();
         $lastPage = PaginationHelper::calculateLastPage($total, $perPage);

spa/src/components/CategoriesInline.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="flex items-center justify-center p-5 gap-2 flex-wrap">
-  <RouterLink class="btn btn-sm" to="/categories">
+  <RouterLink class="btn btn-md" to="/categories">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
       <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
     </svg>
     Каталог
   </RouterLink>
 
-  <RouterLink v-for="category in categoriesStore.topCategories" class="btn btn-sm" :to="{name: 'product.categories.show', params: {category_id: category.id}}">
+  <RouterLink v-for="category in categoriesStore.topCategories" class="btn btn-md" :to="{name: 'product.categories.show', params: {category_id: category.id}}">
     {{ category.name }}
   </RouterLink>
 </div>

spa/src/components/ProductImageSwiper.vue

@@ -34,16 +34,13 @@ onMounted(async () => {
 
   swiperEl.value?.addEventListener('swiperprogress', (num) => {
     if (haptic === false) return;
-    window.Telegram.WebApp.HapticFeedback.impactOccurred('light');
+    //window.Telegram.WebApp.HapticFeedback.impactOccurred('light');
     haptic = false;
     setTimeout(() => haptic = true, 50);
   });
 
-  swiperEl.value?.addEventListener('swiperreachbeginning', (event) => {
-    window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
-  });
   swiperEl.value?.addEventListener('swiperreachend', (event) => {
-    window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
+    //window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
   });
 });
 </script>

spa/src/components/ProductsList.vue

@@ -1,5 +1,31 @@
 <template>
   <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-6 lg:max-w-7xl lg:px-8">
+    <div
+        class="search-wrapper p-2 w-full"
+    >
+      <label class="input w-full">
+        <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <g
+              stroke-linejoin="round"
+              stroke-linecap="round"
+              stroke-width="2.5"
+              fill="none"
+              stroke="currentColor"
+          >
+            <circle cx="11" cy="11" r="8"></circle>
+            <path d="m21 21-4.3-4.3"></path>
+          </g>
+        </svg>
+        <input
+            v-model="productsStore.search"
+            @input="debouncedSearch"
+            type="search"
+            class="grow input-lg"
+            placeholder="Поиск по магазину"
+        />
+      </label>
+    </div>
+
     <h2 class="text-lg font-bold mb-5 text-center">{{ productsStore.products.meta.currentCategoryName }}</h2>
 
     <div v-if="productsStore.products.data.length > 0">
@@ -49,16 +75,22 @@
 import NoProducts from "@/components/NoProducts.vue";
 import ProductImageSwiper from "@/components/ProductImageSwiper.vue";
 import {useProductsStore} from "@/stores/ProductsStore.js";
-import {useInfiniteScroll} from '@vueuse/core';
+import {useDebounceFn, useInfiniteScroll} from '@vueuse/core';
 import {useRoute} from "vue-router";
 import {useSettingsStore} from "@/stores/SettingsStore.js";
-import {nextTick, onMounted, ref, watch} from "vue";
+import {nextTick, onMounted, onUnmounted, ref, watch} from "vue";
 
 const route = useRoute();
 const categoryId = route.params.category_id ?? null;
 const productsStore = useProductsStore();
 const settings = useSettingsStore();
 const bottom = ref(null);
+const debounceMs = 500;
+
+const debouncedSearch = useDebounceFn(() => {
+  productsStore.reset();
+  loadMore();
+}, debounceMs);
 
 function haptic() {
   window.Telegram.WebApp.HapticFeedback.selectionChanged();
@@ -104,7 +136,18 @@ watch(() => route.params.id, async newId => {
   }
 });
 
+function handleClickOutside(e) {
+  if (!e.target.closest('input, textarea')) {
+    document.activeElement?.blur()
+  }
+}
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
 onMounted(async () => {
+  document.addEventListener('click', handleClickOutside);
   const saved = productsStore.savedCategoryId === categoryId;
   if (saved && productsStore.products.data.length > 0) {
     await nextTick();

spa/src/stores/ProductsStore.js

@@ -7,6 +7,7 @@ export const useProductsStore = defineStore('products', {
             data: [],
             meta: {},
         },
+        search: '',
         page: 1,
         isLoading: false,
         loadFinished: false,
@@ -22,6 +23,7 @@ export const useProductsStore = defineStore('products', {
                 return await ftch('products', {
                     categoryId: categoryId,
                     page: page,
+                    search: this.search,
                 });
             } catch (error) {
                 console.error(error);
@@ -31,6 +33,7 @@ export const useProductsStore = defineStore('products', {
         },
 
         reset() {
+            this.isLoading = false;
             this.page = 1;
             this.hasMore = true;
             this.loadFinished = false;
@@ -38,6 +41,6 @@ export const useProductsStore = defineStore('products', {
                 data: [],
                 meta: {},
             };
-        }
+        },
     },
 });

spa/src/style.css

@@ -23,15 +23,24 @@ html {
 
 #app {
     position: relative;
-    padding-top: var(--tg-content-safe-area-inset-top);
+    /*padding-top: var(--tg-content-safe-area-inset-top);*/
     padding-bottom: var(--tg-content-safe-area-inset-bottom);
     padding-left: var(--tg-content-safe-area-inset-left);
     padding-right: var(--tg-content-safe-area-inset-right);
 }
 
 .app-container {
-    padding-top: var(--tg-safe-area-inset-top);
+    /*padding-top: var(--tg-safe-area-inset-top);*/
     padding-bottom: var(--tg-safe-area-inset-bottom);
     padding-left: var(--tg-safe-area-inset-left);
     padding-right: var(--tg-safe-area-inset-right);
 }
+
+.safe-top {
+    margin-top: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
+}
+
+.swiper-pagination-bullets > .swiper-pagination-bullet {
+    background-color: red;
+    color: red;
+}

spa/src/views/Cart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30">
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30 safe-top">
     <h2 class="text-2xl">
       Корзина
       <span v-if="cart.isLoading" class="loading loading-spinner loading-md"></span>

spa/src/views/CategoriesList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8 mb-5">
+  <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8 mb-5 safe-top">
     <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">

spa/src/views/Checkout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30">
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30 safe-top">
     <h2 class="text-2xl">
       Оформление заказа
     </h2>

spa/src/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="goodsRef">
+  <div ref="goodsRef" class="safe-top">
     <CategoriesInline/>
     <ProductsList/>
   </div>

spa/src/views/OrderCreated.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30 flex flex-col items-center h-full justify-center">
+  <div class="safe-top max-w-3xl mx-auto p-4 space-y-6 pb-30 flex flex-col items-center h-full justify-center">
     <div class="flex flex-col justify-center items-center">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-20 text-success">
         <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />

spa/src/views/Product.vue

@@ -108,6 +108,13 @@
         />
       </div>
     </div>
+
+    <FullScreenImageViewer
+        v-if="isFullScreen"
+        :images="product.images"
+        :activeIndex="initialFullScreenIndex"
+        @close="closeFullScreen"
+    />
   </div>
 </template>
 

spa/src/views/Products.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="goodsRef">
+  <div ref="goodsRef" class="safe-top">
     <ProductsList/>
   </div>
 </template>