All checks were successful
Build Docker Image / build (push) Successful in 3m45s
- Add fitBounds to CatalogMap for auto-centering on all points - Add productUuid filter to useCatalogOffers composable - Create useCatalogProducts composable for products list - Update offers/index.vue: show products first, then offers by product - Update offers/map.vue: same two-level navigation - Add translations for new UI elements Navigation flow: /catalog/offers → product selection → offers for that product 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
109 lines
2.7 KiB
TypeScript
109 lines
2.7 KiB
TypeScript
import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'
|
|
|
|
const PAGE_SIZE = 24
|
|
|
|
// Shared state across list and map views
|
|
const items = ref<any[]>([])
|
|
const total = ref(0)
|
|
const selectedFilter = ref('all')
|
|
const productUuid = ref<string | null>(null)
|
|
const isLoading = ref(false)
|
|
const isLoadingMore = ref(false)
|
|
const isInitialized = ref(false)
|
|
|
|
export function useCatalogOffers() {
|
|
const { t } = useI18n()
|
|
const { execute } = useGraphQL()
|
|
|
|
const filters = computed(() => [
|
|
{ id: 'all', label: t('catalogOffersSection.filters.all') },
|
|
{ id: 'active', label: t('catalogOffersSection.filters.active') }
|
|
])
|
|
|
|
const itemsWithCoords = computed(() =>
|
|
items.value
|
|
.filter(offer => offer.locationLatitude && offer.locationLongitude)
|
|
.map(offer => ({
|
|
uuid: offer.uuid,
|
|
name: offer.productName || offer.title,
|
|
latitude: offer.locationLatitude,
|
|
longitude: offer.locationLongitude,
|
|
country: offer.locationCountry
|
|
}))
|
|
)
|
|
|
|
const canLoadMore = computed(() => items.value.length < total.value)
|
|
|
|
const fetchPage = async (offset: number, replace = false) => {
|
|
if (replace) isLoading.value = true
|
|
try {
|
|
const status = selectedFilter.value === 'active' ? 'active' : null
|
|
const data = await execute(
|
|
GetOffersDocument,
|
|
{
|
|
limit: PAGE_SIZE,
|
|
offset,
|
|
status,
|
|
productUuid: productUuid.value
|
|
},
|
|
'public',
|
|
'exchange'
|
|
)
|
|
const next = data?.getOffers || []
|
|
items.value = replace ? next : items.value.concat(next)
|
|
total.value = data?.getOffersCount ?? total.value
|
|
isInitialized.value = true
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
const setProductUuid = (uuid: string | null) => {
|
|
if (productUuid.value !== uuid) {
|
|
productUuid.value = uuid
|
|
isInitialized.value = false
|
|
items.value = []
|
|
}
|
|
}
|
|
|
|
const loadMore = async () => {
|
|
if (isLoadingMore.value) return
|
|
isLoadingMore.value = true
|
|
try {
|
|
await fetchPage(items.value.length)
|
|
} finally {
|
|
isLoadingMore.value = false
|
|
}
|
|
}
|
|
|
|
// При смене фильтра - перезагрузка
|
|
watch(selectedFilter, () => {
|
|
if (isInitialized.value) {
|
|
fetchPage(0, true)
|
|
}
|
|
})
|
|
|
|
// Initialize data if not already loaded
|
|
const init = async () => {
|
|
if (!isInitialized.value && items.value.length === 0) {
|
|
await fetchPage(0, true)
|
|
}
|
|
}
|
|
|
|
return {
|
|
items,
|
|
total,
|
|
selectedFilter,
|
|
productUuid,
|
|
filters,
|
|
isLoading,
|
|
isLoadingMore,
|
|
itemsWithCoords,
|
|
canLoadMore,
|
|
fetchPage,
|
|
loadMore,
|
|
init,
|
|
setProductUuid
|
|
}
|
|
}
|