397 lines
12 KiB
Vue
397 lines
12 KiB
Vue
<!--
|
|
Ported from legacy henza_pwa/src/views/search/searchPage.vue, restyled into
|
|
the redesigned design language (see components/home/* and HomeView).
|
|
|
|
All filtering still happens client-side against the one flat product list
|
|
(no server-side query params exist for any of this — consistent with
|
|
NewestView's own "single fetch" adaptation from an earlier batch). The
|
|
filter logic, the Filters sheet, the category chips and the collection
|
|
tiles are all carried over unchanged; only the chrome and the cards change.
|
|
|
|
The collection tiles keep their original destination (/collection/:id with
|
|
the title in ?page=), and are shown above the results exactly as the legacy
|
|
ProductList did on this route.
|
|
-->
|
|
<template>
|
|
<div class="search">
|
|
<PageBar :title="showFilter ? 'فیلترها' : 'جستجو'" :back="showFilter" @click.capture="onBarClick">
|
|
<template #below>
|
|
<div class="search__barExtra">
|
|
<SearchInput @search="search" place-holder="جستجوی دسته بندی، محصولات و ..." />
|
|
|
|
<div v-if="!showFilter" class="search__chips no-scrollbar">
|
|
<button
|
|
type="button"
|
|
class="search__chip search__chip--filter"
|
|
:class="{ 'is-on': filterKeys.length > 0 }"
|
|
@click="showFilters"
|
|
>
|
|
<Icon icon="vuesax-linear:filter" size="15" />
|
|
{{ filterKeys.length > 0 ? `${filterKeys.length} فیلتر` : 'فیلتر' }}
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="search__chip"
|
|
:class="{ 'is-on': !filters.query.cats }"
|
|
@click="setCats(undefined)"
|
|
>
|
|
همه
|
|
</button>
|
|
<button
|
|
v-for="item in availableCategories"
|
|
:key="item.id"
|
|
type="button"
|
|
class="search__chip"
|
|
:class="{ 'is-on': filters.query.cats && filters.query.cats[0] === item.id }"
|
|
@click="setCats(item.id)"
|
|
>
|
|
{{ item.title }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</PageBar>
|
|
|
|
<Spinner :spinning="loadingPage" tip="درحال دریافت اطلاعات">
|
|
<Filters
|
|
v-model:filterKeys="filterKeys"
|
|
v-show="showFilter"
|
|
v-model="filters.query"
|
|
:products="allProducts"
|
|
@change="hideFilters"
|
|
/>
|
|
|
|
<PullRefresh v-show="!showFilter" v-model="refreshing" @refresh="onRefresh">
|
|
<template #pulling><Loading size="18" /></template>
|
|
<template #loosing><Loading size="18" /></template>
|
|
<template #loading><Loading size="18" /></template>
|
|
<template #success><span /></template>
|
|
<container class="search__body">
|
|
<div v-if="availableCollections.length" class="search__collections">
|
|
<button
|
|
v-for="item in availableCollections"
|
|
:key="item.id"
|
|
type="button"
|
|
class="search__collection"
|
|
@click="$router.push({ path: `/collection/${item.id}`, query: { page: item.title } })"
|
|
>
|
|
<Icon icon="vuesax-linear:money-recive" size="19" />
|
|
<span>{{ item.title }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<SectionHead
|
|
v-if="filteredProducts.length"
|
|
title="نتایج"
|
|
:subtitle="`${filteredProducts.length} محصول`"
|
|
/>
|
|
|
|
<div v-if="filteredProducts.length" class="search__grid">
|
|
<ProductCard v-for="item in visibleProducts" :key="item.id" :value="item" />
|
|
</div>
|
|
|
|
<!-- The catalogue is fetched in one request (no server-side paging
|
|
exists), but rendering all of it at once mounts hundreds of cards
|
|
and images on a phone. Render a window and grow it as the user
|
|
reaches the end — the same incremental behaviour the previous
|
|
ScrollFetchSearch-based list had. -->
|
|
<div v-if="hasMore" ref="sentinel" class="search__more">
|
|
<Spinner :spinning="true" :indicator="true" :fixed="false" tip="" cls="my-[10px]" />
|
|
</div>
|
|
|
|
<section v-else-if="!loadingPage" class="search__empty">
|
|
<Icon icon="vuesax-linear:search-normal-1" size="26" />
|
|
<p>محصولی با این مشخصات پیدا نشد.</p>
|
|
</section>
|
|
</container>
|
|
</PullRefresh>
|
|
</Spinner>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
|
import { onBeforeRouteLeave } from 'vue-router'
|
|
import { PullRefresh } from 'vant'
|
|
import Icon from '../../components/icon/Icon.vue'
|
|
import PageBar from '../../components/ui/PageBar.vue'
|
|
import Spinner from '../../components/Spinner.vue'
|
|
import SearchInput from '../../components/search/SearchInput.vue'
|
|
import Filters from '../../components/search/Filters.vue'
|
|
import SectionHead from '../../components/home/SectionHead.vue'
|
|
import ProductCard from '../../components/product/ProductCard.vue'
|
|
import { useFiltersStore } from '../../stores/filtersStore'
|
|
import { useNavStore } from '../../stores/navStore'
|
|
import { api, type ProductSummary } from '../../api/client'
|
|
|
|
const filters = useFiltersStore()
|
|
const nav = useNavStore()
|
|
|
|
const loadingPage = ref(false)
|
|
const refreshing = ref(false)
|
|
const allProducts = ref<ProductSummary[]>([])
|
|
const showFilter = ref(false)
|
|
const filterKeys = ref<string[]>([])
|
|
|
|
const availableCategories = computed(() => {
|
|
const seen = new Map<string, { id: string; title: string }>()
|
|
for (const p of allProducts.value) {
|
|
if (p.category) seen.set(p.category.id, p.category)
|
|
}
|
|
return [...seen.values()]
|
|
})
|
|
|
|
const availableCollections = computed(() => {
|
|
const seen = new Map<string, { id: string; title: string }>()
|
|
for (const p of allProducts.value) {
|
|
for (const c of p.collections) seen.set(c.collection.id, { id: c.collection.id, title: c.collection.title })
|
|
}
|
|
return [...seen.values()]
|
|
})
|
|
|
|
const filteredProducts = computed(() => {
|
|
let list = allProducts.value
|
|
const q = filters.query
|
|
if (q.text) list = list.filter((p) => p.title.includes(q.text!))
|
|
if (q.cats && q.cats.length > 0) list = list.filter((p) => p.category && q.cats!.includes(p.category.id))
|
|
if (q.brands.length > 0) list = list.filter((p) => p.brand && q.brands.includes(p.brand.id))
|
|
if (q.limit_gram.length === 2) {
|
|
list = list.filter((p) =>
|
|
p.variants.some(
|
|
(v) => parseFloat(v.rashWeightGrams) >= q.limit_gram[0] && parseFloat(v.rashWeightGrams) <= q.limit_gram[1],
|
|
),
|
|
)
|
|
}
|
|
return list
|
|
})
|
|
|
|
// ── Incremental rendering ────────────────────────────────────────────────
|
|
// The whole catalogue arrives in one request (no server-side paging exists),
|
|
// so the filtering above is instant — but mounting every matching card at once
|
|
// means hundreds of cards and images on a phone. Render a window instead and
|
|
// grow it when the sentinel at the end scrolls into view.
|
|
const PAGE_SIZE = 20
|
|
const visibleCount = ref(PAGE_SIZE)
|
|
const visibleProducts = computed(() => filteredProducts.value.slice(0, visibleCount.value))
|
|
const hasMore = computed(() => visibleCount.value < filteredProducts.value.length)
|
|
|
|
const sentinel = ref<HTMLElement | null>(null)
|
|
let observer: IntersectionObserver | undefined
|
|
|
|
function mountObserver() {
|
|
observer?.disconnect()
|
|
if (!sentinel.value) return
|
|
observer = new IntersectionObserver(
|
|
(entries) => {
|
|
if (entries.some((e) => e.isIntersecting) && hasMore.value) {
|
|
visibleCount.value += PAGE_SIZE
|
|
}
|
|
},
|
|
{ rootMargin: '400px' },
|
|
)
|
|
observer.observe(sentinel.value)
|
|
}
|
|
|
|
// Any change to the filters restarts the window from the top.
|
|
watch(filteredProducts, () => {
|
|
visibleCount.value = PAGE_SIZE
|
|
})
|
|
|
|
// The sentinel is v-if'd, so re-attach whenever it appears or is replaced.
|
|
watch(sentinel, mountObserver)
|
|
|
|
onBeforeUnmount(() => observer?.disconnect())
|
|
|
|
async function loadProducts() {
|
|
loadingPage.value = true
|
|
try {
|
|
allProducts.value = await api.listProducts()
|
|
} finally {
|
|
loadingPage.value = false
|
|
}
|
|
}
|
|
|
|
async function onRefresh() {
|
|
await loadProducts()
|
|
refreshing.value = false
|
|
}
|
|
|
|
function search(value: string | undefined) {
|
|
filters.query.text = value
|
|
}
|
|
function setCats(id: string | undefined) {
|
|
filters.query.cats = id ? [id] : undefined
|
|
}
|
|
function showFilters() {
|
|
showFilter.value = true
|
|
nav.setNavVisibility(false)
|
|
}
|
|
function hideFilters(event?: { resetFilters: boolean }) {
|
|
showFilter.value = false
|
|
nav.setNavVisibility(true)
|
|
if (event?.resetFilters) {
|
|
filters.reset()
|
|
filterKeys.value = []
|
|
}
|
|
}
|
|
|
|
// While the filter sheet is open the bar's back button closes the sheet
|
|
// rather than leaving the route, matching the legacy "بازگشت" affordance.
|
|
function onBarClick(e: MouseEvent) {
|
|
if (!showFilter.value) return
|
|
const btn = (e.target as HTMLElement)?.closest('button')
|
|
if (btn) {
|
|
e.stopPropagation()
|
|
hideFilters()
|
|
}
|
|
}
|
|
|
|
// The filter sheet deliberately hides the bottom tab bar while it is open, so
|
|
// its own fixed action bar ("اعمال فیلتر" / "حذف فیلترها") stays clickable —
|
|
// the tab bar sits at the same bottom edge with a higher z-index. But leaving
|
|
// the page with the sheet still open (browser/swipe back, or tapping a
|
|
// collection tile) never ran hideFilters, so that hide leaked: showNav stayed
|
|
// false, and on any destination outside the five tab routes the user was left
|
|
// with no tab bar at all until a full page refresh reset the store.
|
|
//
|
|
// Restoring it here rather than in onBeforeUnmount is deliberate: this guard
|
|
// runs BEFORE router.afterEach, which then writes the correct visibility for
|
|
// the destination and gets the last word. onBeforeUnmount runs after it, and
|
|
// would wrongly re-show the bar on full-page routes like /product/:id.
|
|
onBeforeRouteLeave(() => {
|
|
if (showFilter.value) nav.setNavVisibility(true)
|
|
})
|
|
|
|
onMounted(loadProducts)
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.search {
|
|
background: @canvas;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.search__barExtra {
|
|
max-width: 768px;
|
|
margin: 0 auto;
|
|
padding: 0 16px 0;
|
|
}
|
|
|
|
.search__chips {
|
|
display: flex;
|
|
gap: 4px;
|
|
overflow-x: auto;
|
|
margin: 8px 0px 8px -16px;
|
|
// `padding` alone on an RTL flex scroller can get its edge padding
|
|
// collapsed by the browser once content overflows — explicit spacer
|
|
// elements hold the same 16px gap reliably at both scroll extremes.
|
|
scroll-snap-type: x proximity;
|
|
}
|
|
|
|
.search__chips::before,
|
|
.search__chips::after {
|
|
content: '';
|
|
flex: 0 0 16px;
|
|
}
|
|
|
|
.search__chip {
|
|
scroll-snap-align: start;
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 7px 14px;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
color: @inkSoft;
|
|
background: @canvas;
|
|
border: 1px solid @hairline;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.search__chip.is-on {
|
|
color: #fff;
|
|
background: @ink;
|
|
border-color: @ink;
|
|
}
|
|
|
|
.search__chip--filter.is-on {
|
|
background: @wine;
|
|
border-color: @wine;
|
|
}
|
|
|
|
.search__chip:active {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
.search__body {
|
|
padding-top: 160px;
|
|
padding-bottom: 90px;
|
|
}
|
|
|
|
.search__body > *:first-child {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.search__collections {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 9px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.search__collection {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 13px 10px;
|
|
border-radius: 14px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 12.5px;
|
|
font-weight: 700;
|
|
color: @inkSoft;
|
|
background: @hairlineSoft;
|
|
border: 1px solid @hairline;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.search__collection:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.search__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 11px;
|
|
}
|
|
|
|
.search__more {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 18px 0 4px;
|
|
}
|
|
|
|
.search__empty {
|
|
margin-top: 8px;
|
|
padding: 34px 20px;
|
|
border: 1px dashed @hairline;
|
|
border-radius: 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: @inkFaint;
|
|
}
|
|
.search__empty p {
|
|
margin: 0;
|
|
font-size: 12.5px;
|
|
}
|
|
</style>
|