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>
|
||||
Reference in New Issue
Block a user