UI improvements: filters, map layout, search bar
Some checks failed
Build Docker Image / build (push) Failing after 1m29s

- Add hubCountries query and country filter for hubs page
- Add getAvailableProducts query for offers (only products with active offers)
- Add sourceLatitude/sourceLongitude to orders GraphQL
- Fix ListMapLayout with position fixed for proper map height
- GlobalSearchBar: make fields wider, remove unit selector
- Remove status/isVerified filters from suppliers/offers (backend handles this)
This commit is contained in:
Ruslan Bakiev
2026-01-08 10:42:59 +07:00
parent 0c88cf383c
commit d6865d2129
15 changed files with 87 additions and 78 deletions

View File

@@ -1,4 +1,4 @@
import { GetNodesDocument } from '~/composables/graphql/public/geo-generated'
import { GetNodesDocument, GetHubCountriesDocument } from '~/composables/graphql/public/geo-generated'
const PAGE_SIZE = 24
@@ -6,6 +6,8 @@ const PAGE_SIZE = 24
const items = ref<any[]>([])
const total = ref(0)
const selectedFilter = ref('all')
const selectedCountry = ref('all')
const countries = ref<string[]>([])
const isLoading = ref(false)
const isLoadingMore = ref(false)
const isInitialized = ref(false)
@@ -22,6 +24,11 @@ export function useCatalogHubs() {
{ id: 'air', label: t('catalogHubsSection.filters.air') }
])
const countryFilters = computed(() => [
{ id: 'all', label: t('catalogHubsSection.filters.all_countries') },
...countries.value.map(c => ({ id: c, label: c }))
])
const itemsWithCoords = computed(() =>
items.value.filter(h => h.latitude && h.longitude)
)
@@ -44,9 +51,10 @@ export function useCatalogHubs() {
if (replace) isLoading.value = true
try {
const transportType = selectedFilter.value === 'all' ? null : selectedFilter.value
const country = selectedCountry.value === 'all' ? null : selectedCountry.value
const data = await execute(
GetNodesDocument,
{ limit: PAGE_SIZE, offset, transportType },
{ limit: PAGE_SIZE, offset, transportType, country },
'public',
'geo'
)
@@ -59,6 +67,15 @@ export function useCatalogHubs() {
}
}
const loadCountries = async () => {
try {
const data = await execute(GetHubCountriesDocument, {}, 'public', 'geo')
countries.value = data?.hubCountries || []
} catch (e) {
console.error('Failed to load hub countries', e)
}
}
const loadMore = async () => {
if (isLoadingMore.value) return
isLoadingMore.value = true
@@ -70,7 +87,7 @@ export function useCatalogHubs() {
}
// При смене фильтра - перезагрузка
watch(selectedFilter, () => {
watch([selectedFilter, selectedCountry], () => {
if (isInitialized.value) {
fetchPage(0, true)
}
@@ -79,7 +96,10 @@ export function useCatalogHubs() {
// Initialize data if not already loaded
const init = async () => {
if (!isInitialized.value && items.value.length === 0) {
await fetchPage(0, true)
await Promise.all([
fetchPage(0, true),
loadCountries()
])
}
}
@@ -87,7 +107,9 @@ export function useCatalogHubs() {
items,
total,
selectedFilter,
selectedCountry,
filters,
countryFilters,
isLoading,
isLoadingMore,
itemsWithCoords,

View File

@@ -35,7 +35,6 @@ export function useCatalogOffers() {
{
limit: PAGE_SIZE,
offset,
status: 'active',
productUuid: selectedProductUuid.value
},
'public',

View File

@@ -1,4 +1,4 @@
import { GetProductsDocument } from '~/composables/graphql/public/exchange-generated'
import { GetAvailableProductsDocument } from '~/composables/graphql/public/exchange-generated'
// Shared state
const items = ref<any[]>([])
@@ -13,12 +13,12 @@ export function useCatalogProducts() {
isLoading.value = true
try {
const data = await execute(
GetProductsDocument,
GetAvailableProductsDocument,
{},
'public',
'exchange'
)
items.value = data?.getProducts || []
items.value = data?.getAvailableProducts || []
isInitialized.value = true
} finally {
isLoading.value = false

View File

@@ -5,20 +5,13 @@ const PAGE_SIZE = 24
// Shared state across list and map views
const items = ref<any[]>([])
const total = ref(0)
const selectedFilter = ref('all')
const isLoading = ref(false)
const isLoadingMore = ref(false)
const isInitialized = ref(false)
export function useCatalogSuppliers() {
const { t } = useI18n()
const { execute } = useGraphQL()
const filters = computed(() => [
{ id: 'all', label: t('catalogSuppliersSection.filters.all') },
{ id: 'verified', label: t('catalogSuppliersSection.filters.verified') }
])
const itemsWithCoords = computed(() =>
items.value.filter(s => s.latitude && s.longitude)
)
@@ -28,10 +21,9 @@ export function useCatalogSuppliers() {
const fetchPage = async (offset: number, replace = false) => {
if (replace) isLoading.value = true
try {
const isVerified = selectedFilter.value === 'verified' ? true : null
const data = await execute(
GetSupplierProfilesDocument,
{ limit: PAGE_SIZE, offset, isVerified },
{ limit: PAGE_SIZE, offset },
'public',
'exchange'
)
@@ -54,13 +46,6 @@ export function useCatalogSuppliers() {
}
}
// При смене фильтра - перезагрузка
watch(selectedFilter, () => {
if (isInitialized.value) {
fetchPage(0, true)
}
})
// Initialize data if not already loaded
const init = async () => {
if (!isInitialized.value && items.value.length === 0) {
@@ -71,8 +56,6 @@ export function useCatalogSuppliers() {
return {
items,
total,
selectedFilter,
filters,
isLoading,
isLoadingMore,
itemsWithCoords,