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(() => {
|
||||
|
||||
Reference in New Issue
Block a user