Simplify catalog UI - remove chips, add drawer for list
All checks were successful
Build Docker Image / build (push) Successful in 3m59s

- Remove product/hub chips from QuoteForm.vue (duplicate of toggle)
- Add drawer state to useCatalogSearch.ts (isDrawerOpen, selectDrawerItem, applyDrawerFilter)
- Convert SelectionPanel to drawer with header, scrollable content, and footer
- Add "Список" button to CatalogPage.vue to open drawer
- Add "Применить фильтр" button in drawer footer
- Add slide animations for drawer (left on desktop, up on mobile)
- Update translations: catalog.list, catalog.applyFilter
This commit is contained in:
Ruslan Bakiev
2026-01-26 14:36:42 +07:00
parent 65b07271d9
commit 0efc4eddfd
6 changed files with 233 additions and 168 deletions

View File

@@ -260,6 +260,47 @@ export function useCatalogSearch() {
mapViewCookie.value = mode
}
// Drawer state for list view
const isDrawerOpen = ref(false)
const drawerSelectedItem = ref<{ uuid: string; name: string } | null>(null)
const openDrawer = () => {
isDrawerOpen.value = true
drawerSelectedItem.value = null
// Set selectMode based on mapViewMode so SelectionPanel shows the right list
const newSelectMode: SelectMode = mapViewMode.value === 'hubs' ? 'hub'
: mapViewMode.value === 'suppliers' ? 'supplier'
: 'product'
startSelect(newSelectMode)
}
const closeDrawer = () => {
isDrawerOpen.value = false
drawerSelectedItem.value = null
cancelSelect() // Also exit selection mode
}
const selectDrawerItem = (uuid: string, name: string) => {
drawerSelectedItem.value = { uuid, name }
}
const applyDrawerFilter = () => {
if (!drawerSelectedItem.value) {
closeDrawer()
return
}
// Determine filter type based on mapViewMode
const type = mapViewMode.value === 'hubs' ? 'hub'
: mapViewMode.value === 'suppliers' ? 'supplier'
: 'product' // offers -> select product from offer
const { uuid, name } = drawerSelectedItem.value
selectItem(type, uuid, name)
closeDrawer()
}
// Catalog mode: explore (map browsing) or quote (search for offers)
const catalogMode = computed<CatalogMode>(() => {
return route.query.mode === 'quote' ? 'quote' : 'explore'
@@ -292,6 +333,10 @@ export function useCatalogSearch() {
searchQuery,
mapViewMode,
// Drawer state
isDrawerOpen,
drawerSelectedItem,
// Colors
entityColors,
@@ -317,6 +362,12 @@ export function useCatalogSearch() {
setMapViewMode,
setCatalogMode,
// Drawer actions
openDrawer,
closeDrawer,
selectDrawerItem,
applyDrawerFilter,
// Labels cache
filterLabels
}