81 lines
1.9 KiB
Vue
81 lines
1.9 KiB
Vue
<template>
|
|
<Stack gap="6">
|
|
<Section variant="plain" paddingY="md">
|
|
<PageHeader :title="t('catalogSuppliersSection.header.title')" />
|
|
</Section>
|
|
|
|
<Section v-if="isLoading" variant="plain" paddingY="md">
|
|
<Card padding="lg">
|
|
<Stack align="center" justify="center" gap="3">
|
|
<Spinner />
|
|
<Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
|
|
</Stack>
|
|
</Card>
|
|
</Section>
|
|
|
|
<Section v-else variant="plain" paddingY="md">
|
|
<Stack gap="4">
|
|
<NuxtLink :to="localePath('/catalog/suppliers/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
|
|
<ClientOnly>
|
|
<MapboxGlobe
|
|
map-id="suppliers-map"
|
|
:locations="itemsWithCoords"
|
|
:height="192"
|
|
/>
|
|
</ClientOnly>
|
|
</NuxtLink>
|
|
|
|
<CatalogFilters :filters="filters" v-model="selectedFilter" />
|
|
|
|
<Grid :cols="1" :md="2" :lg="3" :gap="4">
|
|
<SupplierCard
|
|
v-for="supplier in items"
|
|
:key="supplier.uuid || supplier.teamUuid"
|
|
:supplier="supplier"
|
|
/>
|
|
</Grid>
|
|
|
|
<PaginationLoadMore
|
|
:shown="items.length"
|
|
:total="total"
|
|
:can-load-more="canLoadMore"
|
|
:loading="isLoadingMore"
|
|
@load-more="loadMore"
|
|
/>
|
|
|
|
<Stack v-if="total === 0" align="center" gap="2">
|
|
<Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Section>
|
|
</Stack>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'topnav'
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
|
|
const {
|
|
items,
|
|
total,
|
|
selectedFilter,
|
|
filters,
|
|
isLoading,
|
|
isLoadingMore,
|
|
itemsWithCoords,
|
|
canLoadMore,
|
|
loadMore,
|
|
init
|
|
} = useCatalogSuppliers()
|
|
|
|
await init()
|
|
|
|
useHead(() => ({
|
|
title: t('catalogSuppliersSection.header.title')
|
|
}))
|
|
</script>
|