Fix unified catalog: add map, tokens inside input, redirect from main
Some checks failed
Build Docker Image / build (push) Has been cancelled
Some checks failed
Build Docker Image / build (push) Has been cancelled
- Main page (/) now redirects to /catalog - Catalog page uses CatalogPage component with map on the right - Search bar tokens are now inside the input field (like Gmail) - Removed separate grid components, using cards directly - Added missing translations (refine, noResults)
This commit is contained in:
Ruslan Bakiev
@@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.selectHub') }}</Text>
|
||||
|
||||
<div v-if="isLoading" class="flex justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredItems.length === 0" class="text-center py-12">
|
||||
<Text tone="muted">{{ t('catalog.empty.noHubs') }}</Text>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<HubCard
|
||||
v-for="hub in filteredItems"
|
||||
:key="hub.uuid"
|
||||
:hub="hub"
|
||||
selectable
|
||||
@select="$emit('select', { uuid: hub.uuid, name: hub.name })"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PaginationLoadMore
|
||||
v-if="filteredItems.length > 0 && canLoadMore"
|
||||
:shown="filteredItems.length"
|
||||
:total="total"
|
||||
:can-load-more="canLoadMore"
|
||||
:loading="isLoadingMore"
|
||||
hide-counter
|
||||
@load-more="loadMore"
|
||||
class="mt-4"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
searchQuery: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select', hub: { uuid: string; name: string }): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { items, total, isLoading, isLoadingMore, canLoadMore, loadMore, init } = useCatalogHubs()
|
||||
|
||||
await init()
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!props.searchQuery.trim()) return items.value
|
||||
const q = props.searchQuery.toLowerCase()
|
||||
return items.value.filter((item: any) =>
|
||||
item.name?.toLowerCase().includes(q) ||
|
||||
item.country?.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
</script>
|
||||
@@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Text size="lg" weight="semibold" class="mb-4">
|
||||
{{ t('catalog.headers.hubsForProduct') }}
|
||||
<span v-if="!isLoading" class="text-base-content/50 font-normal">
|
||||
({{ filteredItems.length }})
|
||||
</span>
|
||||
</Text>
|
||||
|
||||
<div v-if="isLoading" class="flex justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredItems.length === 0" class="text-center py-12">
|
||||
<Text tone="muted">{{ t('catalog.empty.noHubs') }}</Text>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<HubCard
|
||||
v-for="hub in filteredItems"
|
||||
:key="hub.uuid"
|
||||
:hub="hub"
|
||||
selectable
|
||||
@select="$emit('select', { uuid: hub.uuid, name: hub.name })"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'
|
||||
|
||||
const props = defineProps<{
|
||||
productId: string
|
||||
searchQuery: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select', hub: { uuid: string; name: string }): void
|
||||
(e: 'product-loaded', name: string): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { execute } = useGraphQL()
|
||||
|
||||
const items = ref<any[]>([])
|
||||
const isLoading = ref(true)
|
||||
|
||||
// Fetch hubs for product by getting offers and extracting unique hubs
|
||||
const fetchData = async () => {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const data = await execute(
|
||||
GetOffersDocument,
|
||||
{ productUuid: props.productId },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
const offers = data?.getOffers || []
|
||||
|
||||
// Get product name from first offer
|
||||
if (offers.length > 0 && offers[0].productName) {
|
||||
emit('product-loaded', offers[0].productName)
|
||||
}
|
||||
|
||||
// Extract unique hubs from offers
|
||||
const hubsMap = new Map<string, any>()
|
||||
offers.forEach((offer: any) => {
|
||||
if (offer.locationUuid && !hubsMap.has(offer.locationUuid)) {
|
||||
hubsMap.set(offer.locationUuid, {
|
||||
uuid: offer.locationUuid,
|
||||
name: offer.locationName,
|
||||
country: offer.locationCountry,
|
||||
countryCode: offer.locationCountryCode,
|
||||
latitude: offer.locationLatitude,
|
||||
longitude: offer.locationLongitude
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
items.value = Array.from(hubsMap.values())
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
await fetchData()
|
||||
|
||||
watch(() => props.productId, fetchData)
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!props.searchQuery.trim()) return items.value
|
||||
const q = props.searchQuery.toLowerCase()
|
||||
return items.value.filter((item: any) =>
|
||||
item.name?.toLowerCase().includes(q) ||
|
||||
item.country?.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
</script>
|
||||
@@ -1,124 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Text size="lg" weight="semibold" class="mb-4">
|
||||
{{ t('catalog.headers.offers') }}
|
||||
<span v-if="!isLoading" class="text-base-content/50 font-normal">
|
||||
({{ filteredItems.length }})
|
||||
</span>
|
||||
</Text>
|
||||
|
||||
<div v-if="isLoading" class="flex justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredItems.length === 0" class="text-center py-12">
|
||||
<Text tone="muted">{{ t('catalog.empty.noOffers') }}</Text>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<OfferCard
|
||||
v-for="offer in filteredItems"
|
||||
:key="offer.uuid"
|
||||
:offer="offer"
|
||||
linkable
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
GetOffersDocument,
|
||||
GetSupplierOffersDocument
|
||||
} from '~/composables/graphql/public/exchange-generated'
|
||||
|
||||
const props = defineProps<{
|
||||
productId?: string | null
|
||||
supplierId?: string | null
|
||||
hubId?: string | null
|
||||
searchQuery: string
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { execute } = useGraphQL()
|
||||
|
||||
const items = ref<any[]>([])
|
||||
const isLoading = ref(true)
|
||||
|
||||
const fetchData = async () => {
|
||||
isLoading.value = true
|
||||
try {
|
||||
let offers: any[] = []
|
||||
|
||||
if (props.productId && props.hubId) {
|
||||
// Product + Hub = specific offers
|
||||
const data = await execute(
|
||||
GetOffersDocument,
|
||||
{
|
||||
productUuid: props.productId,
|
||||
locationUuid: props.hubId
|
||||
},
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
offers = data?.getOffers || []
|
||||
} else if (props.supplierId && props.productId) {
|
||||
// Supplier + Product = offers from supplier for product
|
||||
const data = await execute(
|
||||
GetSupplierOffersDocument,
|
||||
{ teamUuid: props.supplierId },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
offers = (data?.getOffers || []).filter(
|
||||
(o: any) => o.productUuid === props.productId
|
||||
)
|
||||
} else if (props.supplierId) {
|
||||
// Just supplier = all offers from supplier
|
||||
const data = await execute(
|
||||
GetSupplierOffersDocument,
|
||||
{ teamUuid: props.supplierId },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
offers = data?.getOffers || []
|
||||
} else if (props.hubId) {
|
||||
// Just hub = all offers in hub
|
||||
const data = await execute(
|
||||
GetOffersDocument,
|
||||
{ locationUuid: props.hubId },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
offers = data?.getOffers || []
|
||||
} else if (props.productId) {
|
||||
// Just product = all offers for product
|
||||
const data = await execute(
|
||||
GetOffersDocument,
|
||||
{ productUuid: props.productId },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
offers = data?.getOffers || []
|
||||
}
|
||||
|
||||
items.value = offers
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
await fetchData()
|
||||
|
||||
watch([() => props.productId, () => props.supplierId, () => props.hubId], fetchData)
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!props.searchQuery.trim()) return items.value
|
||||
const q = props.searchQuery.toLowerCase()
|
||||
return items.value.filter((item: any) =>
|
||||
item.productName?.toLowerCase().includes(q) ||
|
||||
item.teamName?.toLowerCase().includes(q) ||
|
||||
item.locationName?.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
</script>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.selectProduct') }}</Text>
|
||||
|
||||
<div v-if="isLoading" class="flex justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredItems.length === 0" class="text-center py-12">
|
||||
<Text tone="muted">{{ t('catalog.empty.noProducts') }}</Text>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<HubProductCard
|
||||
v-for="product in filteredItems"
|
||||
:key="product.uuid"
|
||||
:name="product.name"
|
||||
selectable
|
||||
@select="$emit('select', product)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
searchQuery: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select', product: { uuid: string; name: string }): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { items, isLoading, init } = useCatalogProducts()
|
||||
|
||||
await init()
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!props.searchQuery.trim()) return items.value
|
||||
const q = props.searchQuery.toLowerCase()
|
||||
return items.value.filter((item: any) =>
|
||||
item.name?.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
</script>
|
||||
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.productsFromSupplier') }}</Text>
|
||||
|
||||
<div v-if="isLoading" class="flex justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredItems.length === 0" class="text-center py-12">
|
||||
<Text tone="muted">{{ t('catalog.empty.noProducts') }}</Text>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<HubProductCard
|
||||
v-for="product in filteredItems"
|
||||
:key="product.uuid"
|
||||
:name="product.name"
|
||||
selectable
|
||||
@select="$emit('select', product)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
GetSupplierProfileDocument,
|
||||
GetSupplierOffersDocument
|
||||
} from '~/composables/graphql/public/exchange-generated'
|
||||
|
||||
const props = defineProps<{
|
||||
supplierId: string
|
||||
searchQuery: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select', product: { uuid: string; name: string }): void
|
||||
(e: 'supplier-loaded', name: string): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { execute } = useGraphQL()
|
||||
|
||||
const items = ref<any[]>([])
|
||||
const isLoading = ref(true)
|
||||
|
||||
const fetchData = async () => {
|
||||
isLoading.value = true
|
||||
try {
|
||||
// Get supplier info
|
||||
const supplierData = await execute(
|
||||
GetSupplierProfileDocument,
|
||||
{ uuid: props.supplierId },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
if (supplierData?.getSupplierProfile?.name) {
|
||||
emit('supplier-loaded', supplierData.getSupplierProfile.name)
|
||||
}
|
||||
|
||||
// Get supplier's offers and extract unique products
|
||||
const offersData = await execute(
|
||||
GetSupplierOffersDocument,
|
||||
{ teamUuid: props.supplierId },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
|
||||
const productsMap = new Map<string, { uuid: string; name: string }>()
|
||||
;(offersData?.getOffers || []).forEach((offer: any) => {
|
||||
if (offer.productUuid && offer.productName && !productsMap.has(offer.productUuid)) {
|
||||
productsMap.set(offer.productUuid, {
|
||||
uuid: offer.productUuid,
|
||||
name: offer.productName
|
||||
})
|
||||
}
|
||||
})
|
||||
items.value = Array.from(productsMap.values())
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
await fetchData()
|
||||
|
||||
watch(() => props.supplierId, fetchData)
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!props.searchQuery.trim()) return items.value
|
||||
const q = props.searchQuery.toLowerCase()
|
||||
return items.value.filter((item: any) =>
|
||||
item.name?.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
</script>
|
||||
@@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.productsInHub') }}</Text>
|
||||
|
||||
<div v-if="isLoading" class="flex justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredItems.length === 0" class="text-center py-12">
|
||||
<Text tone="muted">{{ t('catalog.empty.noProducts') }}</Text>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<HubProductCard
|
||||
v-for="product in filteredItems"
|
||||
:key="product.uuid"
|
||||
:name="product.name"
|
||||
selectable
|
||||
@select="$emit('select', product)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GetNodeDocument } from '~/composables/graphql/public/geo-generated'
|
||||
import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'
|
||||
|
||||
const props = defineProps<{
|
||||
hubId: string
|
||||
searchQuery: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select', product: { uuid: string; name: string }): void
|
||||
(e: 'hub-loaded', name: string): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { execute } = useGraphQL()
|
||||
|
||||
const items = ref<any[]>([])
|
||||
const isLoading = ref(true)
|
||||
|
||||
const fetchData = async () => {
|
||||
isLoading.value = true
|
||||
try {
|
||||
// Get hub info
|
||||
const hubData = await execute(
|
||||
GetNodeDocument,
|
||||
{ uuid: props.hubId },
|
||||
'public',
|
||||
'geo'
|
||||
)
|
||||
if (hubData?.node?.name) {
|
||||
emit('hub-loaded', hubData.node.name)
|
||||
}
|
||||
|
||||
// Get offers in this hub and extract unique products
|
||||
const offersData = await execute(
|
||||
GetOffersDocument,
|
||||
{ locationUuid: props.hubId },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
|
||||
const productsMap = new Map<string, { uuid: string; name: string }>()
|
||||
;(offersData?.getOffers || []).forEach((offer: any) => {
|
||||
if (offer.productUuid && offer.productName && !productsMap.has(offer.productUuid)) {
|
||||
productsMap.set(offer.productUuid, {
|
||||
uuid: offer.productUuid,
|
||||
name: offer.productName
|
||||
})
|
||||
}
|
||||
})
|
||||
items.value = Array.from(productsMap.values())
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
await fetchData()
|
||||
|
||||
watch(() => props.hubId, fetchData)
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!props.searchQuery.trim()) return items.value
|
||||
const q = props.searchQuery.toLowerCase()
|
||||
return items.value.filter((item: any) =>
|
||||
item.name?.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
</script>
|
||||
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Text size="lg" weight="semibold" class="mb-4">{{ t('catalog.headers.selectSupplier') }}</Text>
|
||||
|
||||
<div v-if="isLoading" class="flex justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredItems.length === 0" class="text-center py-12">
|
||||
<Text tone="muted">{{ t('catalog.empty.noSuppliers') }}</Text>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<SupplierCard
|
||||
v-for="supplier in filteredItems"
|
||||
:key="supplier.uuid || supplier.teamUuid"
|
||||
:supplier="supplier"
|
||||
selectable
|
||||
@select="$emit('select', { uuid: supplier.uuid || supplier.teamUuid, name: supplier.name })"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PaginationLoadMore
|
||||
v-if="filteredItems.length > 0 && canLoadMore"
|
||||
:shown="filteredItems.length"
|
||||
:total="total"
|
||||
:can-load-more="canLoadMore"
|
||||
:loading="isLoadingMore"
|
||||
hide-counter
|
||||
@load-more="loadMore"
|
||||
class="mt-4"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
searchQuery: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select', supplier: { uuid: string; name: string }): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { items, total, isLoading, isLoadingMore, canLoadMore, loadMore, init } = useCatalogSuppliers()
|
||||
|
||||
await init()
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!props.searchQuery.trim()) return items.value
|
||||
const q = props.searchQuery.toLowerCase()
|
||||
return items.value.filter((item: any) =>
|
||||
item.name?.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
</script>
|
||||
@@ -1,46 +1,53 @@
|
||||
<template>
|
||||
<div class="bg-base-100 rounded-box shadow-md">
|
||||
<!-- Search bar row -->
|
||||
<div class="flex items-center gap-2 p-3 flex-wrap">
|
||||
<!-- Active filter tokens -->
|
||||
<div
|
||||
v-for="token in activeTokens"
|
||||
:key="token.type"
|
||||
class="badge badge-lg gap-1 cursor-pointer hover:badge-primary transition-colors"
|
||||
@click="onEditToken(token.type)"
|
||||
>
|
||||
<Icon :name="token.icon" size="14" />
|
||||
<span class="max-w-32 truncate">{{ token.label }}</span>
|
||||
<button
|
||||
class="ml-1 hover:text-error"
|
||||
@click.stop="onRemoveToken(token.type)"
|
||||
>
|
||||
<Icon name="lucide:x" size="12" />
|
||||
</button>
|
||||
</div>
|
||||
<!-- Search bar with tokens inside -->
|
||||
<div
|
||||
class="flex items-center gap-2 px-3 py-2 border border-base-300 rounded-lg bg-base-100 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary cursor-text"
|
||||
@click="focusInput"
|
||||
>
|
||||
<Icon name="lucide:search" size="18" class="text-base-content/50 flex-shrink-0" />
|
||||
|
||||
<!-- Active selection mode indicator -->
|
||||
<div
|
||||
v-if="selectMode"
|
||||
class="badge badge-lg badge-outline badge-primary gap-1"
|
||||
>
|
||||
<Icon :name="selectModeIcon" size="14" />
|
||||
{{ selectModeLabel }}: ?
|
||||
<button
|
||||
class="ml-1 hover:text-error"
|
||||
@click="onCancelSelect"
|
||||
<!-- Tokens + input inline -->
|
||||
<div class="flex items-center gap-1.5 flex-wrap flex-1 min-w-0">
|
||||
<!-- Active filter tokens -->
|
||||
<div
|
||||
v-for="token in activeTokens"
|
||||
:key="token.type"
|
||||
class="badge badge-sm gap-1 cursor-pointer hover:badge-primary transition-colors flex-shrink-0"
|
||||
@click.stop="onEditToken(token.type)"
|
||||
>
|
||||
<Icon name="lucide:x" size="12" />
|
||||
</button>
|
||||
</div>
|
||||
<Icon :name="token.icon" size="12" />
|
||||
<span class="max-w-24 truncate">{{ token.label }}</span>
|
||||
<button
|
||||
class="hover:text-error"
|
||||
@click.stop="onRemoveToken(token.type)"
|
||||
>
|
||||
<Icon name="lucide:x" size="10" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search input -->
|
||||
<div class="flex-1 min-w-48">
|
||||
<!-- Active selection mode indicator -->
|
||||
<div
|
||||
v-if="selectMode"
|
||||
class="badge badge-sm badge-outline badge-primary gap-1 flex-shrink-0"
|
||||
>
|
||||
<Icon :name="selectModeIcon" size="12" />
|
||||
{{ selectModeLabel }}:
|
||||
<button
|
||||
class="hover:text-error"
|
||||
@click.stop="onCancelSelect"
|
||||
>
|
||||
<Icon name="lucide:x" size="10" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search input (no border, grows to fill) -->
|
||||
<input
|
||||
ref="inputRef"
|
||||
v-model="localSearchQuery"
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
class="input input-bordered w-full"
|
||||
class="flex-1 min-w-32 bg-transparent outline-none text-sm"
|
||||
@input="onSearchInput"
|
||||
/>
|
||||
</div>
|
||||
@@ -49,15 +56,15 @@
|
||||
<!-- Quick filter chips -->
|
||||
<div
|
||||
v-if="availableChips.length > 0"
|
||||
class="flex items-center gap-2 px-3 pb-3 flex-wrap"
|
||||
class="flex items-center gap-2 px-3 py-2 border-t border-base-200"
|
||||
>
|
||||
<button
|
||||
v-for="chip in availableChips"
|
||||
:key="chip.type"
|
||||
class="btn btn-sm btn-ghost gap-1"
|
||||
class="btn btn-xs btn-ghost gap-1"
|
||||
@click="onStartSelect(chip.type)"
|
||||
>
|
||||
<Icon name="lucide:plus" size="14" />
|
||||
<Icon name="lucide:plus" size="12" />
|
||||
{{ chip.label }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -84,17 +91,23 @@ const emit = defineEmits<{
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const inputRef = ref<HTMLInputElement>()
|
||||
const localSearchQuery = ref(props.searchQuery)
|
||||
|
||||
watch(() => props.searchQuery, (val) => {
|
||||
localSearchQuery.value = val
|
||||
})
|
||||
|
||||
const focusInput = () => {
|
||||
inputRef.value?.focus()
|
||||
}
|
||||
|
||||
const placeholder = computed(() => {
|
||||
if (props.selectMode === 'product') return t('catalog.search.searchProducts')
|
||||
if (props.selectMode === 'supplier') return t('catalog.search.searchSuppliers')
|
||||
if (props.selectMode === 'hub') return t('catalog.search.searchHubs')
|
||||
return t('catalog.search.placeholder')
|
||||
if (props.activeTokens.length === 0) return t('catalog.search.placeholder')
|
||||
return t('catalog.search.refine')
|
||||
})
|
||||
|
||||
const selectModeLabel = computed(() => {
|
||||
|
||||
@@ -1,7 +1,19 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full">
|
||||
<!-- Unified Search Bar -->
|
||||
<div class="sticky top-0 z-20 px-3 lg:px-6 py-3 bg-base-300">
|
||||
<CatalogPage
|
||||
:items="currentItems"
|
||||
:loading="isLoading"
|
||||
:total-count="currentItems.length"
|
||||
:grid-columns="3"
|
||||
:with-map="showMap"
|
||||
:use-server-clustering="useServerClustering"
|
||||
:cluster-node-type="clusterNodeType"
|
||||
map-id="unified-catalog-map"
|
||||
:point-color="mapPointColor"
|
||||
:hovered-id="hoveredId"
|
||||
@select="onMapSelect"
|
||||
@update:hovered-id="hoveredId = $event"
|
||||
>
|
||||
<template #searchBar>
|
||||
<UnifiedSearchBar
|
||||
:active-tokens="activeTokens"
|
||||
:available-chips="availableChips"
|
||||
@@ -13,88 +25,68 @@
|
||||
@remove-token="removeFilter"
|
||||
@update:search-query="searchQuery = $event"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Dynamic Content -->
|
||||
<div class="flex-1 px-3 lg:px-6 py-4">
|
||||
<!-- Hero (empty state) -->
|
||||
<template v-if="displayMode === 'hero'">
|
||||
<CatalogHero @start-select="startSelect" />
|
||||
</template>
|
||||
<template #header>
|
||||
<Text v-if="!isLoading" tone="muted">{{ headerText }}</Text>
|
||||
</template>
|
||||
|
||||
<!-- Products Grid -->
|
||||
<template v-else-if="displayMode === 'grid-products'">
|
||||
<CatalogGridProducts
|
||||
:search-query="searchQuery"
|
||||
@select="onSelectProduct"
|
||||
/>
|
||||
</template>
|
||||
<template #card="{ item }">
|
||||
<!-- Product card -->
|
||||
<ProductCard
|
||||
v-if="cardType === 'product'"
|
||||
:product="item"
|
||||
selectable
|
||||
:is-selected="item.uuid === hoveredId"
|
||||
@select="onSelectProduct({ uuid: item.uuid, name: item.name })"
|
||||
@hover="(h: boolean) => hoveredId = h ? item.uuid : undefined"
|
||||
/>
|
||||
|
||||
<!-- Suppliers Grid -->
|
||||
<template v-else-if="displayMode === 'grid-suppliers'">
|
||||
<CatalogGridSuppliers
|
||||
:search-query="searchQuery"
|
||||
@select="onSelectSupplier"
|
||||
/>
|
||||
</template>
|
||||
<!-- Supplier card -->
|
||||
<SupplierCard
|
||||
v-else-if="cardType === 'supplier'"
|
||||
:supplier="item"
|
||||
selectable
|
||||
:is-selected="item.uuid === hoveredId"
|
||||
@select="onSelectSupplier({ uuid: item.uuid || item.teamUuid, name: item.name })"
|
||||
/>
|
||||
|
||||
<!-- Hubs Grid -->
|
||||
<template v-else-if="displayMode === 'grid-hubs'">
|
||||
<CatalogGridHubs
|
||||
:search-query="searchQuery"
|
||||
@select="onSelectHub"
|
||||
/>
|
||||
</template>
|
||||
<!-- Hub card -->
|
||||
<HubCard
|
||||
v-else-if="cardType === 'hub'"
|
||||
:hub="item"
|
||||
selectable
|
||||
:is-selected="item.uuid === hoveredId"
|
||||
@select="onSelectHub({ uuid: item.uuid, name: item.name })"
|
||||
@hover="(h: boolean) => hoveredId = h ? item.uuid : undefined"
|
||||
/>
|
||||
|
||||
<!-- Hubs for selected product -->
|
||||
<template v-else-if="displayMode === 'grid-hubs-for-product'">
|
||||
<CatalogGridHubsForProduct
|
||||
:product-id="productId!"
|
||||
:search-query="searchQuery"
|
||||
@select="onSelectHub"
|
||||
@product-loaded="setLabel('product', productId!, $event)"
|
||||
/>
|
||||
</template>
|
||||
<!-- Offer card -->
|
||||
<OfferCard
|
||||
v-else-if="cardType === 'offer'"
|
||||
:offer="item"
|
||||
linkable
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Products from supplier -->
|
||||
<template v-else-if="displayMode === 'grid-products-from-supplier'">
|
||||
<CatalogGridProductsFromSupplier
|
||||
:supplier-id="supplierId!"
|
||||
:search-query="searchQuery"
|
||||
@select="onSelectProduct"
|
||||
@supplier-loaded="setLabel('supplier', supplierId!, $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Products in hub -->
|
||||
<template v-else-if="displayMode === 'grid-products-in-hub'">
|
||||
<CatalogGridProductsInHub
|
||||
:hub-id="hubId!"
|
||||
:search-query="searchQuery"
|
||||
@select="onSelectProduct"
|
||||
@hub-loaded="setLabel('hub', hubId!, $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Offers -->
|
||||
<template v-else-if="displayMode === 'grid-offers'">
|
||||
<CatalogGridOffers
|
||||
:product-id="productId"
|
||||
:supplier-id="supplierId"
|
||||
:hub-id="hubId"
|
||||
:search-query="searchQuery"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<template #empty>
|
||||
<!-- Hero for empty state -->
|
||||
<CatalogHero v-if="displayMode === 'hero'" @start-select="startSelect" />
|
||||
<Text v-else tone="muted">{{ t('catalog.empty.noResults') }}</Text>
|
||||
</template>
|
||||
</CatalogPage>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GetProductsDocument } from '~/composables/graphql/public/geo-generated'
|
||||
import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'topnav'
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const { execute } = useGraphQL()
|
||||
|
||||
const {
|
||||
selectMode,
|
||||
@@ -113,6 +105,248 @@ const {
|
||||
setLabel
|
||||
} = useCatalogSearch()
|
||||
|
||||
// Composables for data
|
||||
const { items: products, isLoading: productsLoading, init: initProducts } = useCatalogProducts()
|
||||
const { items: suppliers, isLoading: suppliersLoading, init: initSuppliers } = useCatalogSuppliers()
|
||||
const { items: hubs, isLoading: hubsLoading, init: initHubs } = useCatalogHubs()
|
||||
|
||||
// Local state for specific queries
|
||||
const hubsForProduct = ref<any[]>([])
|
||||
const productsFromSupplier = ref<any[]>([])
|
||||
const productsInHub = ref<any[]>([])
|
||||
const offers = ref<any[]>([])
|
||||
const specificLoading = ref(false)
|
||||
|
||||
const hoveredId = ref<string>()
|
||||
|
||||
// Determine what to show
|
||||
const cardType = computed(() => {
|
||||
switch (displayMode.value) {
|
||||
case 'grid-products':
|
||||
case 'grid-products-from-supplier':
|
||||
case 'grid-products-in-hub':
|
||||
return 'product'
|
||||
case 'grid-suppliers':
|
||||
return 'supplier'
|
||||
case 'grid-hubs':
|
||||
case 'grid-hubs-for-product':
|
||||
return 'hub'
|
||||
case 'grid-offers':
|
||||
return 'offer'
|
||||
default:
|
||||
return 'product'
|
||||
}
|
||||
})
|
||||
|
||||
const showMap = computed(() => displayMode.value !== 'hero')
|
||||
|
||||
const useServerClustering = computed(() => {
|
||||
return displayMode.value === 'grid-hubs' || displayMode.value === 'grid-offers'
|
||||
})
|
||||
|
||||
const clusterNodeType = computed(() => {
|
||||
if (displayMode.value === 'grid-offers') return 'offer'
|
||||
return 'logistics'
|
||||
})
|
||||
|
||||
const mapPointColor = computed(() => {
|
||||
if (cardType.value === 'supplier') return '#3b82f6'
|
||||
if (cardType.value === 'hub') return '#10b981'
|
||||
if (cardType.value === 'offer') return '#22c55e'
|
||||
return '#f59e0b'
|
||||
})
|
||||
|
||||
const headerText = computed(() => {
|
||||
switch (displayMode.value) {
|
||||
case 'grid-products': return t('catalog.headers.selectProduct')
|
||||
case 'grid-suppliers': return t('catalog.headers.selectSupplier')
|
||||
case 'grid-hubs': return t('catalog.headers.selectHub')
|
||||
case 'grid-hubs-for-product': return t('catalog.headers.hubsForProduct')
|
||||
case 'grid-products-from-supplier': return t('catalog.headers.productsFromSupplier')
|
||||
case 'grid-products-in-hub': return t('catalog.headers.productsInHub')
|
||||
case 'grid-offers': return t('catalog.headers.offers')
|
||||
default: return ''
|
||||
}
|
||||
})
|
||||
|
||||
const isLoading = computed(() => {
|
||||
if (specificLoading.value) return true
|
||||
switch (displayMode.value) {
|
||||
case 'grid-products': return productsLoading.value
|
||||
case 'grid-suppliers': return suppliersLoading.value
|
||||
case 'grid-hubs': return hubsLoading.value
|
||||
default: return false
|
||||
}
|
||||
})
|
||||
|
||||
// Filter items by search query
|
||||
const filterBySearch = (items: any[]) => {
|
||||
if (!searchQuery.value.trim()) return items
|
||||
const q = searchQuery.value.toLowerCase()
|
||||
return items.filter(item =>
|
||||
item.name?.toLowerCase().includes(q) ||
|
||||
item.productName?.toLowerCase().includes(q) ||
|
||||
item.teamName?.toLowerCase().includes(q) ||
|
||||
item.locationName?.toLowerCase().includes(q) ||
|
||||
item.country?.toLowerCase().includes(q)
|
||||
)
|
||||
}
|
||||
|
||||
const currentItems = computed(() => {
|
||||
let items: any[] = []
|
||||
|
||||
switch (displayMode.value) {
|
||||
case 'grid-products':
|
||||
items = products.value
|
||||
break
|
||||
case 'grid-suppliers':
|
||||
items = suppliers.value
|
||||
break
|
||||
case 'grid-hubs':
|
||||
items = hubs.value
|
||||
break
|
||||
case 'grid-hubs-for-product':
|
||||
items = hubsForProduct.value
|
||||
break
|
||||
case 'grid-products-from-supplier':
|
||||
items = productsFromSupplier.value
|
||||
break
|
||||
case 'grid-products-in-hub':
|
||||
items = productsInHub.value
|
||||
break
|
||||
case 'grid-offers':
|
||||
items = offers.value
|
||||
break
|
||||
case 'hero':
|
||||
default:
|
||||
items = []
|
||||
}
|
||||
|
||||
return filterBySearch(items)
|
||||
})
|
||||
|
||||
// Fetch data based on displayMode
|
||||
const fetchSpecificData = async () => {
|
||||
specificLoading.value = true
|
||||
try {
|
||||
if (displayMode.value === 'grid-hubs-for-product' && productId.value) {
|
||||
// Get hubs for product via offers
|
||||
const data = await execute(
|
||||
GetOffersDocument,
|
||||
{ productUuid: productId.value },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
const offersData = data?.getOffers || []
|
||||
|
||||
// Set product name from first offer
|
||||
if (offersData.length > 0 && offersData[0].productName) {
|
||||
setLabel('product', productId.value, offersData[0].productName)
|
||||
}
|
||||
|
||||
// Extract unique hubs
|
||||
const hubsMap = new Map<string, any>()
|
||||
offersData.forEach((offer: any) => {
|
||||
if (offer.locationUuid && !hubsMap.has(offer.locationUuid)) {
|
||||
hubsMap.set(offer.locationUuid, {
|
||||
uuid: offer.locationUuid,
|
||||
name: offer.locationName,
|
||||
country: offer.locationCountry,
|
||||
countryCode: offer.locationCountryCode,
|
||||
latitude: offer.locationLatitude,
|
||||
longitude: offer.locationLongitude
|
||||
})
|
||||
}
|
||||
})
|
||||
hubsForProduct.value = Array.from(hubsMap.values())
|
||||
}
|
||||
|
||||
if (displayMode.value === 'grid-products-from-supplier' && supplierId.value) {
|
||||
const data = await execute(
|
||||
GetOffersDocument,
|
||||
{ teamUuid: supplierId.value },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
const offersData = data?.getOffers || []
|
||||
|
||||
// Set supplier name
|
||||
if (offersData.length > 0 && offersData[0].teamName) {
|
||||
setLabel('supplier', supplierId.value, offersData[0].teamName)
|
||||
}
|
||||
|
||||
// Extract unique products
|
||||
const productsMap = new Map<string, any>()
|
||||
offersData.forEach((offer: any) => {
|
||||
if (offer.productUuid && !productsMap.has(offer.productUuid)) {
|
||||
productsMap.set(offer.productUuid, {
|
||||
uuid: offer.productUuid,
|
||||
name: offer.productName,
|
||||
categoryName: offer.categoryName
|
||||
})
|
||||
}
|
||||
})
|
||||
productsFromSupplier.value = Array.from(productsMap.values())
|
||||
}
|
||||
|
||||
if (displayMode.value === 'grid-products-in-hub' && hubId.value) {
|
||||
const data = await execute(
|
||||
GetOffersDocument,
|
||||
{ locationUuid: hubId.value },
|
||||
'public',
|
||||
'exchange'
|
||||
)
|
||||
const offersData = data?.getOffers || []
|
||||
|
||||
// Set hub name
|
||||
if (offersData.length > 0 && offersData[0].locationName) {
|
||||
setLabel('hub', hubId.value, offersData[0].locationName)
|
||||
}
|
||||
|
||||
// Extract unique products
|
||||
const productsMap = new Map<string, any>()
|
||||
offersData.forEach((offer: any) => {
|
||||
if (offer.productUuid && !productsMap.has(offer.productUuid)) {
|
||||
productsMap.set(offer.productUuid, {
|
||||
uuid: offer.productUuid,
|
||||
name: offer.productName,
|
||||
categoryName: offer.categoryName
|
||||
})
|
||||
}
|
||||
})
|
||||
productsInHub.value = Array.from(productsMap.values())
|
||||
}
|
||||
|
||||
if (displayMode.value === 'grid-offers') {
|
||||
const vars: any = {}
|
||||
if (productId.value) vars.productUuid = productId.value
|
||||
if (supplierId.value) vars.teamUuid = supplierId.value
|
||||
if (hubId.value) vars.locationUuid = hubId.value
|
||||
|
||||
const data = await execute(GetOffersDocument, vars, 'public', 'exchange')
|
||||
offers.value = data?.getOffers || []
|
||||
}
|
||||
} finally {
|
||||
specificLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize base data
|
||||
const initBaseData = async () => {
|
||||
if (displayMode.value === 'grid-products') await initProducts()
|
||||
if (displayMode.value === 'grid-suppliers') await initSuppliers()
|
||||
if (displayMode.value === 'grid-hubs') await initHubs()
|
||||
}
|
||||
|
||||
// Watch displayMode and fetch appropriate data
|
||||
watch(displayMode, async (mode) => {
|
||||
if (['grid-products', 'grid-suppliers', 'grid-hubs'].includes(mode)) {
|
||||
await initBaseData()
|
||||
} else if (['grid-hubs-for-product', 'grid-products-from-supplier', 'grid-products-in-hub', 'grid-offers'].includes(mode)) {
|
||||
await fetchSpecificData()
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// Selection handlers
|
||||
const onSelectProduct = (product: { uuid: string; name: string }) => {
|
||||
selectItem('product', product.uuid, product.name)
|
||||
@@ -126,6 +360,16 @@ const onSelectHub = (hub: { uuid: string; name: string }) => {
|
||||
selectItem('hub', hub.uuid, hub.name)
|
||||
}
|
||||
|
||||
const onMapSelect = (item: any) => {
|
||||
if (cardType.value === 'product') {
|
||||
onSelectProduct({ uuid: item.uuid, name: item.name })
|
||||
} else if (cardType.value === 'supplier') {
|
||||
onSelectSupplier({ uuid: item.uuid || item.teamUuid, name: item.name })
|
||||
} else if (cardType.value === 'hub') {
|
||||
onSelectHub({ uuid: item.uuid, name: item.name })
|
||||
}
|
||||
}
|
||||
|
||||
// SEO
|
||||
useHead(() => {
|
||||
let title = t('catalog.hero.title')
|
||||
|
||||
@@ -1,93 +1,13 @@
|
||||
<template>
|
||||
<Stack gap="12">
|
||||
<!-- How it works -->
|
||||
<Section variant="plain">
|
||||
<Stack gap="6" align="center">
|
||||
<Heading :level="2">{{ $t('howto.title') }}</Heading>
|
||||
<Grid :cols="1" :md="3" :gap="6">
|
||||
<Card padding="lg">
|
||||
<Stack gap="3" align="center">
|
||||
<IconCircle tone="primary">🔍</IconCircle>
|
||||
<Heading :level="3" weight="semibold">{{ $t('howto.step1.title') }}</Heading>
|
||||
<Text tone="muted" align="center">{{ $t('howto.step1.description') }}</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
<Card padding="lg">
|
||||
<Stack gap="3" align="center">
|
||||
<IconCircle tone="primary">🤝</IconCircle>
|
||||
<Heading :level="3" weight="semibold">{{ $t('howto.step2.title') }}</Heading>
|
||||
<Text tone="muted" align="center">{{ $t('howto.step2.description') }}</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
<Card padding="lg">
|
||||
<Stack gap="3" align="center">
|
||||
<IconCircle tone="primary">⚡</IconCircle>
|
||||
<Heading :level="3" weight="semibold">{{ $t('howto.step3.title') }}</Heading>
|
||||
<Text tone="muted" align="center">{{ $t('howto.step3.description') }}</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Section>
|
||||
|
||||
<!-- Who it's for -->
|
||||
<Section variant="plain">
|
||||
<Stack gap="8" align="center">
|
||||
<Heading :level="2">{{ $t('roles.title') }}</Heading>
|
||||
|
||||
<Grid :cols="1" :md="3" :gap="6">
|
||||
<Card padding="lg">
|
||||
<Stack gap="4" align="center">
|
||||
<IconCircle tone="primary">🏭</IconCircle>
|
||||
<Heading :level="3">{{ $t('roles.producers.title') }}</Heading>
|
||||
<Text tone="muted" align="center">{{ $t('roles.producers.description') }}</Text>
|
||||
<Stack tag="ul" gap="1">
|
||||
<li>✓ {{ $t('roles.producers.benefit1') }}</li>
|
||||
<li>✓ {{ $t('roles.producers.benefit2') }}</li>
|
||||
<li>✓ {{ $t('roles.producers.benefit3') }}</li>
|
||||
<li>✓ {{ $t('roles.producers.benefit4') }}</li>
|
||||
</Stack>
|
||||
<Button :full-width="true" variant="outline">{{ $t('roles.producers.cta') }}</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<Card padding="lg">
|
||||
<Stack gap="4" align="center">
|
||||
<IconCircle tone="primary">🏢</IconCircle>
|
||||
<Heading :level="3">{{ $t('roles.buyers.title') }}</Heading>
|
||||
<Text tone="muted" align="center">{{ $t('roles.buyers.description') }}</Text>
|
||||
<Stack tag="ul" gap="1">
|
||||
<li>✓ {{ $t('roles.buyers.benefit1') }}</li>
|
||||
<li>✓ {{ $t('roles.buyers.benefit2') }}</li>
|
||||
<li>✓ {{ $t('roles.buyers.benefit3') }}</li>
|
||||
<li>✓ {{ $t('roles.buyers.benefit4') }}</li>
|
||||
</Stack>
|
||||
<Button :full-width="true" variant="outline">{{ $t('roles.buyers.cta') }}</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<Card padding="lg">
|
||||
<Stack gap="4" align="center">
|
||||
<IconCircle tone="primary">⚙️</IconCircle>
|
||||
<Heading :level="3">{{ $t('roles.services.title') }}</Heading>
|
||||
<Text tone="muted" align="center">{{ $t('roles.services.description') }}</Text>
|
||||
<Stack tag="ul" gap="1">
|
||||
<li>✓ {{ $t('roles.services.benefit1') }}</li>
|
||||
<li>✓ {{ $t('roles.services.benefit2') }}</li>
|
||||
<li>✓ {{ $t('roles.services.benefit3') }}</li>
|
||||
<li>✓ {{ $t('roles.services.benefit4') }}</li>
|
||||
</Stack>
|
||||
<Button :full-width="true" variant="outline">{{ $t('roles.services.cta') }}</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Section>
|
||||
</Stack>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Redirect to unified catalog
|
||||
definePageMeta({
|
||||
layout: 'topnav'
|
||||
})
|
||||
|
||||
const localePath = useLocalePath()
|
||||
await navigateTo(localePath('/catalog'), { replace: true })
|
||||
</script>
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
},
|
||||
"search": {
|
||||
"placeholder": "Find an offer...",
|
||||
"refine": "Refine...",
|
||||
"searchProducts": "Search products...",
|
||||
"searchSuppliers": "Search suppliers...",
|
||||
"searchHubs": "Search hubs..."
|
||||
@@ -30,7 +31,8 @@
|
||||
"noProducts": "No products found",
|
||||
"noSuppliers": "No suppliers found",
|
||||
"noHubs": "No hubs found",
|
||||
"noOffers": "No offers found"
|
||||
"noOffers": "No offers found",
|
||||
"noResults": "No results found"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
},
|
||||
"search": {
|
||||
"placeholder": "Найти предложение...",
|
||||
"refine": "Уточнить...",
|
||||
"searchProducts": "Поиск товаров...",
|
||||
"searchSuppliers": "Поиск поставщиков...",
|
||||
"searchHubs": "Поиск хабов..."
|
||||
@@ -30,7 +31,8 @@
|
||||
"noProducts": "Товары не найдены",
|
||||
"noSuppliers": "Поставщики не найдены",
|
||||
"noHubs": "Хабы не найдены",
|
||||
"noOffers": "Предложения не найдены"
|
||||
"noOffers": "Предложения не найдены",
|
||||
"noResults": "Ничего не найдено"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user