Add Explore/Quote dual mode to catalog page
All checks were successful
Build Docker Image / build (push) Successful in 3m52s

- Add CatalogMode type (explore/quote) to useCatalogSearch
- Create ExplorePanel component with view toggle (offers/hubs/suppliers)
- Create QuoteForm and QuotePanel components for search form
- Refactor CatalogPage to fullscreen map with overlay panel
- Simplify catalog/index.vue to use new components
- Add translations for modes and quote form (ru/en)

The catalog now has two modes:
- Explore: Browse map with offers/hubs/suppliers toggle
- Quote: Search form with product/hub/qty filters to find offers
This commit is contained in:
Ruslan Bakiev
2026-01-22 19:13:45 +07:00
parent 749f15131b
commit 850ab3f252
10 changed files with 694 additions and 665 deletions

View File

@@ -2,6 +2,7 @@ import type { LocationQuery } from 'vue-router'
export type SelectMode = 'product' | 'supplier' | 'hub' | null
export type MapViewMode = 'offers' | 'hubs' | 'suppliers'
export type CatalogMode = 'explore' | 'quote'
export type DisplayMode =
| 'map-default'
| 'grid-products'
@@ -228,10 +229,25 @@ export function useCatalogSearch() {
mapViewCookie.value = mode
}
// Catalog mode: explore (map browsing) or quote (search for offers)
const catalogMode = computed<CatalogMode>(() => {
return route.query.mode === 'quote' ? 'quote' : 'explore'
})
const setCatalogMode = (newMode: CatalogMode) => {
updateQuery({ mode: newMode === 'explore' ? null : newMode })
}
// Can search for offers (product + hub or product + supplier required)
const canSearch = computed(() => {
return !!(productId.value && (hubId.value || supplierId.value))
})
return {
// State
selectMode,
displayMode,
catalogMode,
productId,
supplierId,
hubId,
@@ -245,6 +261,7 @@ export function useCatalogSearch() {
// Computed
activeTokens,
availableChips,
canSearch,
// Actions
startSelect,
@@ -255,6 +272,7 @@ export function useCatalogSearch() {
clearAll,
setLabel,
setMapViewMode,
setCatalogMode,
// Labels cache
filterLabels