Files
webapp/app/composables/useCatalogProducts.ts
Ruslan Bakiev 7c566aeafc
All checks were successful
Build Docker Image / build (push) Successful in 4m3s
Fix SelectionPanel styling + add product filtering by supplier/hub
- SelectionPanel header: dark glass style instead of white
- useCatalogProducts: filter by supplierId or hubId using dedicated queries
- catalog/index: connect filters from query params to composable
2026-01-24 11:13:22 +07:00

116 lines
2.7 KiB
TypeScript

import {
GetProductsDocument,
GetProductsBySupplierDocument,
GetProductsNearHubDocument
} from '~/composables/graphql/public/geo-generated'
// Shared state
const items = ref<any[]>([])
const isLoading = ref(false)
const isLoadingMore = ref(false)
const isInitialized = ref(false)
// Filter state
const filterSupplierUuid = ref<string | null>(null)
const filterHubUuid = ref<string | null>(null)
export function useCatalogProducts() {
const { execute } = useGraphQL()
// Products don't have server-side pagination yet, so we load all at once
const canLoadMore = computed(() => false)
const fetchProducts = async () => {
if (isLoading.value) return
isLoading.value = true
try {
let data
if (filterSupplierUuid.value) {
// Products from specific supplier
data = await execute(
GetProductsBySupplierDocument,
{ supplierUuid: filterSupplierUuid.value },
'public',
'geo'
)
items.value = data?.productsBySupplier || []
} else if (filterHubUuid.value) {
// Products near hub
data = await execute(
GetProductsNearHubDocument,
{ hubUuid: filterHubUuid.value },
'public',
'geo'
)
items.value = data?.productsNearHub || []
} else {
// All products
data = await execute(
GetProductsDocument,
{},
'public',
'geo'
)
items.value = data?.products || []
}
isInitialized.value = true
} finally {
isLoading.value = false
}
}
const loadMore = async () => {
// No-op: products don't support pagination yet
}
const init = async () => {
if (!isInitialized.value && items.value.length === 0) {
await fetchProducts()
}
}
// Filter setters
const setSupplierFilter = (uuid: string | null) => {
if (filterSupplierUuid.value !== uuid) {
filterSupplierUuid.value = uuid
filterHubUuid.value = null // clear other filter
isInitialized.value = false
fetchProducts()
}
}
const setHubFilter = (uuid: string | null) => {
if (filterHubUuid.value !== uuid) {
filterHubUuid.value = uuid
filterSupplierUuid.value = null // clear other filter
isInitialized.value = false
fetchProducts()
}
}
const clearFilters = () => {
if (filterSupplierUuid.value || filterHubUuid.value) {
filterSupplierUuid.value = null
filterHubUuid.value = null
isInitialized.value = false
fetchProducts()
}
}
return {
items,
isLoading,
isLoadingMore,
isInitialized,
canLoadMore,
fetchProducts,
loadMore,
init,
setSupplierFilter,
setHubFilter,
clearFilters
}
}