0c88cf383c
All checks were successful
Build Docker Image / build (push) Successful in 4m21s
- Remove filter from suppliers page (not needed) - Offers: show all active offers directly, add product type filter as select - Hubs: change filter from pills to select dropdown - Create CatalogFilterSelect component for dropdown filters - Update useCatalogOffers to always filter active, use product filter
83 lines
1.8 KiB
Vue
83 lines
1.8 KiB
Vue
<template>
|
|
<CatalogPage
|
|
:items="items"
|
|
:loading="isLoading"
|
|
map-id="hubs-map"
|
|
point-color="#10b981"
|
|
:selected-id="selectedHubId"
|
|
@select="onSelectHub"
|
|
>
|
|
<template #filters>
|
|
<CatalogFilterSelect :filters="filters" v-model="selectedFilter" />
|
|
</template>
|
|
|
|
<template #card="{ item }">
|
|
<template v-for="country in getCountryForHub(item)" :key="country.name">
|
|
<Text v-if="isFirstInCountry(item)" weight="semibold" class="mb-2">{{ country.name }}</Text>
|
|
</template>
|
|
<HubCard :hub="item" />
|
|
</template>
|
|
|
|
<template #pagination>
|
|
<PaginationLoadMore
|
|
:shown="items.length"
|
|
:total="total"
|
|
:can-load-more="canLoadMore"
|
|
:loading="isLoadingMore"
|
|
@load-more="loadMore"
|
|
/>
|
|
</template>
|
|
|
|
<template #empty>
|
|
<Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
|
|
</template>
|
|
</CatalogPage>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'topnav'
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
|
|
const {
|
|
items,
|
|
total,
|
|
selectedFilter,
|
|
filters,
|
|
isLoading,
|
|
isLoadingMore,
|
|
itemsByCountry,
|
|
canLoadMore,
|
|
loadMore,
|
|
init
|
|
} = useCatalogHubs()
|
|
|
|
// Selected hub for map highlighting
|
|
const selectedHubId = ref<string>()
|
|
|
|
const onSelectHub = (hub: any) => {
|
|
selectedHubId.value = hub.uuid
|
|
}
|
|
|
|
// Helper to get country for hub
|
|
const getCountryForHub = (hub: any) => {
|
|
return itemsByCountry.value.filter(c => c.hubs.some(h => h.uuid === hub.uuid))
|
|
}
|
|
|
|
// Check if this hub is first in its country group
|
|
const isFirstInCountry = (hub: any) => {
|
|
for (const country of itemsByCountry.value) {
|
|
if (country.hubs[0]?.uuid === hub.uuid) return true
|
|
}
|
|
return false
|
|
}
|
|
|
|
await init()
|
|
|
|
useHead(() => ({
|
|
title: t('catalogHubsSection.header.title')
|
|
}))
|
|
</script>
|