nikitakiselev/interview-demo-code
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: safe-top and search

Browse Source
This commit is contained in:
Nikita Kiselev
2025-08-08 12:27:47 +03:00
parent 4ae8d59328
commit a8bb5eb493
13 changed files with 82 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/ProductsHandler.php
View File

@@ -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);

4
spa/src/components/CategoriesInline.vue
View File

@@ -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>

7
spa/src/components/ProductImageSwiper.vue
View File

@@ -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>

47
spa/src/components/ProductsList.vue
View File

@@ -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();

5
spa/src/stores/ProductsStore.js
View File

@@ -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: {},
};
}
},
},
});

13
spa/src/style.css
View File

@@ -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;
}

2
spa/src/views/Cart.vue
View File

@@ -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>

2
spa/src/views/CategoriesList.vue
View File

@@ -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">

2
spa/src/views/Checkout.vue
View File

@@ -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>

2
spa/src/views/Home.vue
View File

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

2
spa/src/views/OrderCreated.vue
View File

@@ -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" />

7
spa/src/views/Product.vue
View File

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

2
spa/src/views/Products.vue
View File

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