796204b3cd
All checks were successful
Build Docker Image / build (push) Successful in 4m8s
- CatalogPage: added gridColumns prop (1/2/3 columns) - Card: added hover:shadow-lg on interactive cards - Products, hubs, suppliers pages now use 3-column grid - Offers remain full-width (gridColumns=1 default)
125 lines
3.0 KiB
Vue
125 lines
3.0 KiB
Vue
<template>
|
|
<CatalogPage
|
|
:items="displayItems"
|
|
:map-items="itemsWithCoords"
|
|
:loading="isLoading"
|
|
:grid-columns="3"
|
|
with-map
|
|
map-id="suppliers-map"
|
|
point-color="#3b82f6"
|
|
:total-count="total"
|
|
:hovered-id="hoveredId"
|
|
@select="onSelectSupplier"
|
|
@update:hovered-id="hoveredId = $event"
|
|
>
|
|
<template #searchBar="{ displayedCount, totalCount }">
|
|
<CatalogSearchBar
|
|
v-model:search-query="searchQuery"
|
|
:active-filters="[]"
|
|
:displayed-count="displayedCount"
|
|
:total-count="totalCount"
|
|
@search="onSearch"
|
|
/>
|
|
</template>
|
|
|
|
<template #header>
|
|
<Text v-if="!isLoading" tone="muted">Выберите поставщика</Text>
|
|
</template>
|
|
|
|
<template #card="{ item }">
|
|
<SupplierCard :supplier="item" />
|
|
</template>
|
|
|
|
<template #pagination>
|
|
<PaginationLoadMore
|
|
v-if="displayItems.length > 0"
|
|
:shown="displayItems.length"
|
|
:total="total"
|
|
:can-load-more="canLoadMore"
|
|
:loading="isLoadingMore"
|
|
hide-counter
|
|
@load-more="loadMore"
|
|
class="mt-4"
|
|
/>
|
|
</template>
|
|
|
|
<template #empty>
|
|
<Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
|
|
</template>
|
|
</CatalogPage>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
|
|
|
|
definePageMeta({
|
|
layout: 'topnav'
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
|
|
const {
|
|
items,
|
|
total,
|
|
isLoading,
|
|
isLoadingMore,
|
|
canLoadMore,
|
|
loadMore,
|
|
init
|
|
} = useCatalogSuppliers()
|
|
|
|
// Hover state
|
|
const hoveredId = ref<string>()
|
|
|
|
// Search bar
|
|
const searchQuery = ref('')
|
|
|
|
// Search with map checkbox
|
|
const searchWithMap = ref(false)
|
|
const currentBounds = ref<MapBounds | null>(null)
|
|
|
|
// Filter items with valid coordinates for map
|
|
const itemsWithCoords = computed(() =>
|
|
items.value.filter(item =>
|
|
item.latitude != null &&
|
|
item.longitude != null &&
|
|
!isNaN(Number(item.latitude)) &&
|
|
!isNaN(Number(item.longitude))
|
|
).map(item => ({
|
|
uuid: item.uuid || item.teamUuid,
|
|
name: item.name || '',
|
|
latitude: Number(item.latitude),
|
|
longitude: Number(item.longitude)
|
|
}))
|
|
)
|
|
|
|
// Filtered items when searchWithMap is enabled
|
|
const displayItems = computed(() => {
|
|
if (!searchWithMap.value || !currentBounds.value) return items.value
|
|
return items.value.filter(item => {
|
|
if (item.latitude == null || item.longitude == null) return false
|
|
const { west, east, north, south } = currentBounds.value!
|
|
const lng = Number(item.longitude)
|
|
const lat = Number(item.latitude)
|
|
return lng >= west && lng <= east && lat >= south && lat <= north
|
|
})
|
|
})
|
|
|
|
// Search handler (for future use)
|
|
const onSearch = () => {
|
|
// TODO: Implement search
|
|
}
|
|
|
|
// Handle supplier selection from map
|
|
const onSelectSupplier = (supplier: any) => {
|
|
navigateTo(localePath(`/catalog/suppliers/${supplier.uuid || supplier.teamUuid}`))
|
|
}
|
|
|
|
await init()
|
|
|
|
useHead(() => ({
|
|
title: t('catalogSuppliersSection.header.title')
|
|
}))
|
|
</script>
|