150 lines
4.2 KiB
Vue
150 lines
4.2 KiB
Vue
<template>
|
|
<div class="flex flex-col h-full">
|
|
<!-- Header -->
|
|
<div class="flex-shrink-0 p-4 border-b border-white/10">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="font-semibold text-base text-white">{{ $t('catalog.headers.offers') }}</h3>
|
|
<span class="badge badge-neutral">{{ totalOffers }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content (scrollable) -->
|
|
<div class="flex-1 overflow-y-auto p-4">
|
|
<div v-if="loading" class="flex items-center justify-center py-8">
|
|
<span class="loading loading-spinner loading-md text-white" />
|
|
</div>
|
|
|
|
<div v-else-if="offersWithPrice.length === 0" class="text-center py-8 text-white/60">
|
|
<Icon name="lucide:search-x" size="32" class="mb-2" />
|
|
<p>{{ $t('catalog.empty.noOffers') }}</p>
|
|
</div>
|
|
|
|
<div v-else class="flex flex-col gap-3">
|
|
<div
|
|
v-for="group in offerGroups"
|
|
:key="group.id"
|
|
class="flex flex-col gap-0"
|
|
>
|
|
<div
|
|
v-if="group.offers.length > 1"
|
|
class="rounded-2xl overflow-hidden border border-base-200/60 divide-y divide-base-200/60"
|
|
>
|
|
<div
|
|
v-for="offer in group.offers"
|
|
:key="offer.uuid"
|
|
class="cursor-pointer"
|
|
@click="emit('select-offer', offer)"
|
|
>
|
|
<OfferResultCard
|
|
grouped
|
|
:supplier-name="offer.supplierName"
|
|
:location-name="offer.locationName || offer.locationCountry"
|
|
:product-name="offer.productName"
|
|
:price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
|
|
:quantity="offer.quantity"
|
|
:currency="offer.currency"
|
|
:unit="offer.unit"
|
|
:stages="getOfferStages(offer)"
|
|
:total-time-seconds="offer.routes?.[0]?.totalTimeSeconds ?? null"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
v-for="offer in group.offers"
|
|
:key="offer.uuid"
|
|
class="cursor-pointer"
|
|
@click="emit('select-offer', offer)"
|
|
>
|
|
<OfferResultCard
|
|
:supplier-name="offer.supplierName"
|
|
:location-name="offer.locationName || offer.locationCountry"
|
|
:product-name="offer.productName"
|
|
:price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
|
|
:quantity="offer.quantity"
|
|
:currency="offer.currency"
|
|
:unit="offer.unit"
|
|
:stages="getOfferStages(offer)"
|
|
:total-time-seconds="offer.routes?.[0]?.totalTimeSeconds ?? null"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Offer {
|
|
uuid: string
|
|
productName?: string | null
|
|
productUuid?: string | null
|
|
supplierName?: string | null
|
|
supplierUuid?: string | null
|
|
quantity?: number | string | null
|
|
unit?: string | null
|
|
pricePerUnit?: number | string | null
|
|
currency?: string | null
|
|
locationName?: string | null
|
|
locationCountry?: string | null
|
|
locationCountryCode?: string | null
|
|
routes?: Array<{
|
|
totalTimeSeconds?: number | null
|
|
stages?: Array<{
|
|
transportType?: string | null
|
|
distanceKm?: number | null
|
|
travelTimeSeconds?: number | null
|
|
fromName?: string | null
|
|
} | null> | null
|
|
} | null> | null
|
|
}
|
|
|
|
interface OfferGroup {
|
|
id: string
|
|
offers: Offer[]
|
|
}
|
|
|
|
const emit = defineEmits<{
|
|
'select-offer': [offer: Offer]
|
|
}>()
|
|
|
|
const props = defineProps<{
|
|
loading: boolean
|
|
offers: Offer[]
|
|
calculations?: OfferGroup[]
|
|
}>()
|
|
|
|
const offersWithPrice = computed(() =>
|
|
(props.offers || []).filter(o => o?.pricePerUnit != null)
|
|
)
|
|
|
|
const totalOffers = computed(() => {
|
|
if (props.calculations?.length) {
|
|
return props.calculations.reduce((sum, calc) => sum + (calc.offers?.length || 0), 0)
|
|
}
|
|
return props.offers.length
|
|
})
|
|
|
|
const offerGroups = computed<OfferGroup[]>(() => {
|
|
if (props.calculations?.length) return props.calculations
|
|
return offersWithPrice.value.map(offer => ({
|
|
id: offer.uuid,
|
|
offers: [offer]
|
|
}))
|
|
})
|
|
|
|
const getOfferStages = (offer: Offer) => {
|
|
const route = offer.routes?.[0]
|
|
if (!route?.stages) return []
|
|
return route.stages
|
|
.filter((stage): stage is NonNullable<typeof stage> => stage !== null)
|
|
.map((stage) => ({
|
|
transportType: stage.transportType,
|
|
distanceKm: stage.distanceKm,
|
|
travelTimeSeconds: stage.travelTimeSeconds,
|
|
fromName: stage.fromName
|
|
}))
|
|
}
|
|
</script>
|