optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement unified catalog search with token-based filtering
All checks were successful
Build Docker Image / build (push) Successful in 3m23s
Details

Browse Source 
- Add useCatalogSearch composable for managing unified search state
- Add UnifiedSearchBar component with token chips for filters
- Add CatalogHero component for empty/landing state
- Create grid components for each display mode:
  - CatalogGridProducts, CatalogGridSuppliers, CatalogGridHubs
  - CatalogGridHubsForProduct, CatalogGridProductsFromSupplier
  - CatalogGridProductsInHub, CatalogGridOffers
- Add unified catalog page at /catalog with query params
- Remove SubNavigation from catalog section (kept for other sections)
- Update all links to use new unified catalog paths
- Delete old nested catalog pages (offers/suppliers/hubs flows)
- Add i18n translations for catalog section
This commit is contained in:
Ruslan Bakiev
2026-01-22 10:57:30 +07:00
parent 01f0836173
commit 08d7e0ade9
39 changed files with 1278 additions and 2185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/components/Sidebar.vue
View File

@@ -38,8 +38,8 @@
</li>
<li>
<NuxtLink
:to="localePath('/catalog/offers')"
:class="{ active: isActive('/catalog/offers') }"
:to="localePath('/catalog?select=product')"
:class="{ active: isCatalogActive('product') }"
class="tooltip tooltip-right"
:data-tip="t('nav.offers')"
>
@@ -48,8 +48,8 @@
</li>
<li>
<NuxtLink
:to="localePath('/catalog/suppliers')"
:class="{ active: isActive('/catalog/suppliers') }"
:to="localePath('/catalog?select=supplier')"
:class="{ active: isCatalogActive('supplier') }"
class="tooltip tooltip-right"
:data-tip="t('nav.suppliers')"
>
@@ -58,8 +58,8 @@
</li>
<li>
<NuxtLink
:to="localePath('/catalog/hubs')"
:class="{ active: isActive('/catalog/hubs') }"
:to="localePath('/catalog?select=hub')"
:class="{ active: isCatalogActive('hub') }"
class="tooltip tooltip-right"
:data-tip="t('nav.hubs')"
>
@@ -169,19 +169,19 @@
</NuxtLink>
</li>
<li>
<NuxtLink :to="localePath('/catalog/offers')" :class="{ active: isActive('/catalog/offers') }">
<NuxtLink :to="localePath('/catalog?select=product')" :class="{ active: isCatalogActive('product') }">
<Icon name="lucide:tag" size="18" />
{{ t('nav.offers') }}
</NuxtLink>
</li>
<li>
<NuxtLink :to="localePath('/catalog/suppliers')" :class="{ active: isActive('/catalog/suppliers') }">
<NuxtLink :to="localePath('/catalog?select=supplier')" :class="{ active: isCatalogActive('supplier') }">
<Icon name="lucide:building-2" size="18" />
{{ t('nav.suppliers') }}
</NuxtLink>
</li>
<li>
<NuxtLink :to="localePath('/catalog/hubs')" :class="{ active: isActive('/catalog/hubs') }">
<NuxtLink :to="localePath('/catalog?select=hub')" :class="{ active: isCatalogActive('hub') }">
<Icon name="lucide:warehouse" size="18" />
{{ t('nav.hubs') }}
</NuxtLink>
@@ -379,6 +379,24 @@ const isActive = (path: string) => {
return current.startsWith(localePath(path) + '/')
}
// Check if catalog section is active based on query params
const isCatalogActive = (type: 'product' | 'supplier' | 'hub') => {
const catalogPath = localePath('/catalog')
if (!route.path.startsWith(catalogPath)) return false
const { select, product, supplier, hub } = route.query
// If we're in selection mode for this type
if (select === type) return true
// If this type has been selected (in the flow)
if (type === 'product' && (product || select === 'product')) return true
if (type === 'supplier' && supplier) return true
if (type === 'hub' && hub) return true
return false
}
const isExactActive = (path: string) => {
return route.path === localePath(path)
}