optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): redesign GlobalSearchBar, split layouts, and remove hero section
All checks were successful
Build Docker Image / build (push) Successful in 5m25s
Details

Browse Source 
- Make GlobalSearchBar functional with searchStore integration
- Add destination search using hubs/nodes GraphQL query
- Navigate to /request page instead of /catalog/offers
- Remove hero section from index.vue (search is now in header)
- Add padding (px-3 lg:px-6) to topnav layout
- Implement split layout for catalog pages (offers, hubs, suppliers)
  - Left side: filters + scrollable card list (40%)
  - Right side: map (60%, hidden on mobile)
This commit is contained in:
Ruslan Bakiev
2026-01-08 08:13:22 +07:00
parent 1e179ab04c
commit 1a2693bcd6
6 changed files with 194 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
app/components/search/GlobalSearchBar.vue
View File

@@ -68,10 +68,10 @@
@input="searchDestinations" @input="searchDestinations"
/> />
<ul <ul
v-if="showDestinationDropdown && destinations.length > 0" v-if="showDestinationDropdown && filteredDestinations.length > 0"
class="dropdown-content menu bg-base-100 rounded-box z-50 w-64 max-h-60 overflow-auto p-2 shadow-lg border border-base-300 mt-2" class="dropdown-content menu bg-base-100 rounded-box z-50 w-64 max-h-60 overflow-auto p-2 shadow-lg border border-base-300 mt-2"
> >
<li v-for="dest in destinations" :key="dest.uuid"> <li v-for="dest in filteredDestinations" :key="dest.uuid">
<a @click="selectDestination(dest)"> <a @click="selectDestination(dest)">
{{ dest.name }} {{ dest.name }}
<span class="text-xs text-base-content/50">{{ dest.country }}</span> <span class="text-xs text-base-content/50">{{ dest.country }}</span>
@@ -101,6 +101,8 @@ const emit = defineEmits<{
const router = useRouter() const router = useRouter()
const localePath = useLocalePath() const localePath = useLocalePath()
const searchStore = useSearchStore()
const { execute } = useGraphQL()
// Product search // Product search
const productQuery = ref('') const productQuery = ref('')
@@ -125,53 +127,74 @@ const selectProduct = (product: typeof selectedProduct.value) => {
selectedProduct.value = product selectedProduct.value = product
productQuery.value = product?.name || '' productQuery.value = product?.name || ''
showProductDropdown.value = false showProductDropdown.value = false
// Sync to searchStore
searchStore.setProduct(product?.name || '')
searchStore.setProductUuid(product?.uuid || '')
} }
// Quantity // Quantity
const quantity = ref<number | undefined>() const quantity = ref<number | undefined>()
const unit = ref('t') const unit = ref('t')
// Destination search // Destination search (using hubs/nodes)
const destinationQuery = ref('') const destinationQuery = ref('')
const selectedDestination = ref<{ uuid: string; name: string; country?: string } | null>(null) const selectedDestination = ref<{ uuid: string; name: string; country?: string } | null>(null)
const showDestinationDropdown = ref(false) const showDestinationDropdown = ref(false)
const destinations = ref<Array<{ uuid: string; name: string; country?: string }>>([]) const allDestinations = ref<Array<{ uuid: string; name: string; country?: string }>>([])
const searchDestinations = async () => { const filteredDestinations = computed(() => {
if (!destinationQuery.value) return allDestinations.value.slice(0, 10)
const q = destinationQuery.value.toLowerCase()
return allDestinations.value.filter(d =>
d.name?.toLowerCase().includes(q) ||
d.country?.toLowerCase().includes(q)
).slice(0, 10)
})
const searchDestinations = () => {
showDestinationDropdown.value = true showDestinationDropdown.value = true
// TODO: implement destination search via GraphQL
} }
const selectDestination = (dest: typeof selectedDestination.value) => { const selectDestination = (dest: typeof selectedDestination.value) => {
selectedDestination.value = dest selectedDestination.value = dest
destinationQuery.value = dest?.name || '' destinationQuery.value = dest?.name || ''
showDestinationDropdown.value = false showDestinationDropdown.value = false
// Sync to searchStore
searchStore.setLocation(dest?.name || '')
searchStore.setLocationUuid(dest?.uuid || '')
} }
// Can search // Can search - need at least product selected
const canSearch = computed(() => { const canSearch = computed(() => {
return !!selectedProduct.value return !!selectedProduct.value
}) })
// Search handler // Search handler - navigate to /request like the old search form
const handleSearch = () => { const handleSearch = () => {
if (!canSearch.value) return if (!canSearch.value) return
const params: Record<string, string> = {} // Sync quantity to store
if (selectedProduct.value?.uuid) {
params.product = selectedProduct.value.uuid
}
if (quantity.value) { if (quantity.value) {
params.quantity = String(quantity.value) searchStore.setQuantity(String(quantity.value))
params.unit = unit.value searchStore.setUnit(unit.value)
}
if (selectedDestination.value?.uuid) {
params.destination = selectedDestination.value.uuid
} }
const query: Record<string, string | undefined> = {
productUuid: selectedProduct.value?.uuid,
product: selectedProduct.value?.name,
quantity: quantity.value ? String(quantity.value) : undefined,
locationUuid: selectedDestination.value?.uuid,
location: selectedDestination.value?.name
}
// Remove undefined values
Object.keys(query).forEach(key => {
if (query[key] === undefined) delete query[key]
})
router.push({ router.push({
path: localePath('/catalog/offers'), path: localePath('/request'),
query: params query: query as Record<string, string>
}) })
emit('search', { emit('search', {
@@ -185,15 +208,29 @@ const handleSearch = () => {
// Load products on mount // Load products on mount
onMounted(async () => { onMounted(async () => {
try { try {
const { query } = useGraphQL()
const { GetProductsDocument } = await import('~/composables/graphql/public/exchange-generated') const { GetProductsDocument } = await import('~/composables/graphql/public/exchange-generated')
const result = await query(GetProductsDocument, {}, 'exchange', 'public') const result = await execute(GetProductsDocument, {}, 'public', 'exchange')
allProducts.value = result.getProducts || [] allProducts.value = result?.getProducts || []
} catch (error) { } catch (error) {
console.error('Failed to load products:', error) console.error('Failed to load products:', error)
} }
}) })
// Load destinations (hubs/nodes) on mount
onMounted(async () => {
try {
const { GetNodesDocument } = await import('~/composables/graphql/public/geo-generated')
const result = await execute(GetNodesDocument, { limit: 100, offset: 0 }, 'public', 'geo')
allDestinations.value = (result?.nodes || []).filter((n: any) => n?.uuid && n?.name).map((n: any) => ({
uuid: n.uuid,
name: n.name,
country: n.country
}))
} catch (error) {
console.error('Failed to load destinations:', error)
}
})
// Close dropdowns on click outside // Close dropdowns on click outside
onMounted(() => { onMounted(() => {
const handler = (e: MouseEvent) => { const handler = (e: MouseEvent) => {

2
app/layouts/topnav.vue
View File

@@ -23,7 +23,7 @@
<GlobalSearchBar v-if="showSearch" class="border-b border-base-300" /> <GlobalSearchBar v-if="showSearch" class="border-b border-base-300" />
<!-- Page content --> <!-- Page content -->
<main class="flex-1 flex flex-col min-h-0"> <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6">
<slot /> <slot />
</main> </main>
</div> </div>

50
app/pages/catalog/hubs/index.vue
View File

@@ -1,41 +1,36 @@
<template> <template>
<Stack gap="6"> <div class="flex flex-col h-[calc(100vh-200px)]">
<Section variant="plain" paddingY="md"> <!-- Header -->
<div class="py-4">
<PageHeader :title="t('catalogHubsSection.header.title')" /> <PageHeader :title="t('catalogHubsSection.header.title')" />
</Section> </div>
<Section v-if="isLoading" variant="plain" paddingY="md"> <!-- Loading state -->
<div v-if="isLoading" class="flex-1 flex items-center justify-center">
<Card padding="lg"> <Card padding="lg">
<Stack align="center" justify="center" gap="3"> <Stack align="center" justify="center" gap="3">
<Spinner /> <Spinner />
<Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text> <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
</Stack> </Stack>
</Card> </Card>
</Section> </div>
<Section v-else variant="plain" paddingY="md">
<Stack gap="6">
<NuxtLink :to="localePath('/catalog/hubs/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
<ClientOnly>
<MapboxGlobe
map-id="hubs-map"
:locations="itemsWithCoords"
:height="192"
/>
</ClientOnly>
</NuxtLink>
<!-- Split Layout -->
<div v-else class="flex-1 flex gap-4 min-h-0">
<!-- Left side: Filters + Cards (scrollable) -->
<div class="w-full lg:w-2/5 overflow-y-auto pr-2">
<Stack gap="4">
<CatalogFilters :filters="filters" v-model="selectedFilter" /> <CatalogFilters :filters="filters" v-model="selectedFilter" />
<div v-for="country in itemsByCountry" :key="country.name" class="space-y-3"> <div v-for="country in itemsByCountry" :key="country.name" class="space-y-3">
<Text weight="semibold">{{ country.name }}</Text> <Text weight="semibold">{{ country.name }}</Text>
<Grid :cols="1" :md="2" :lg="3" :gap="4"> <Stack gap="3">
<HubCard <HubCard
v-for="hub in country.hubs" v-for="hub in country.hubs"
:key="hub.uuid" :key="hub.uuid"
:hub="hub" :hub="hub"
/> />
</Grid> </Stack>
</div> </div>
<PaginationLoadMore <PaginationLoadMore
@@ -50,8 +45,20 @@
<Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text> <Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
</Stack> </Stack>
</Stack> </Stack>
</Section> </div>
</Stack>
<!-- Right side: Map (sticky, hidden on mobile) -->
<div class="hidden lg:block lg:w-3/5 rounded-lg overflow-hidden">
<ClientOnly>
<MapboxGlobe
map-id="hubs-map"
:locations="itemsWithCoords"
class="h-full w-full"
/>
</ClientOnly>
</div>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -60,7 +67,6 @@ definePageMeta({
}) })
const { t } = useI18n() const { t } = useI18n()
const localePath = useLocalePath()
const { const {
items, items,

58
app/pages/catalog/offers/index.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<Stack gap="6"> <div class="flex flex-col h-[calc(100vh-200px)]">
<Section variant="plain" paddingY="md"> <!-- Header -->
<div class="py-4">
<PageHeader :title="pageTitle"> <PageHeader :title="pageTitle">
<template v-if="selectedProduct" #actions> <template v-if="selectedProduct" #actions>
<NuxtLink :to="localePath('/catalog/offers')" class="btn btn-ghost btn-sm"> <NuxtLink :to="localePath('/catalog/offers')" class="btn btn-ghost btn-sm">
@@ -9,20 +10,20 @@
</NuxtLink> </NuxtLink>
</template> </template>
</PageHeader> </PageHeader>
</Section> </div>
<!-- Loading state --> <!-- Loading state -->
<Section v-if="isLoading || productsLoading" variant="plain" paddingY="md"> <div v-if="isLoading || productsLoading" class="flex-1 flex items-center justify-center">
<Card padding="lg"> <Card padding="lg">
<Stack align="center" justify="center" gap="3"> <Stack align="center" justify="center" gap="3">
<Spinner /> <Spinner />
<Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text> <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
</Stack> </Stack>
</Card> </Card>
</Section> </div>
<!-- Products catalog (when no product selected) --> <!-- Products catalog (when no product selected) -->
<Section v-else-if="!selectedProductUuid" variant="plain" paddingY="md"> <div v-else-if="!selectedProductUuid" class="flex-1 overflow-y-auto py-4">
<Stack gap="4"> <Stack gap="4">
<Grid :cols="1" :md="2" :lg="3" :gap="4"> <Grid :cols="1" :md="2" :lg="3" :gap="4">
<Card <Card
@@ -43,30 +44,22 @@
<Text tone="muted">{{ t('catalogOffersSection.empty.no_products') }}</Text> <Text tone="muted">{{ t('catalogOffersSection.empty.no_products') }}</Text>
</Stack> </Stack>
</Stack> </Stack>
</Section> </div>
<!-- Offers for selected product --> <!-- Offers for selected product - Split Layout -->
<Section v-else variant="plain" paddingY="md"> <div v-else class="flex-1 flex gap-4 min-h-0">
<!-- Left side: Filters + Cards (scrollable) -->
<div class="w-full lg:w-2/5 overflow-y-auto pr-2">
<Stack gap="4"> <Stack gap="4">
<NuxtLink :to="offersMapLink" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
<ClientOnly>
<MapboxGlobe
map-id="offers-map"
:locations="itemsWithCoords"
:height="192"
/>
</ClientOnly>
</NuxtLink>
<CatalogFilters :filters="filters" v-model="selectedFilter" /> <CatalogFilters :filters="filters" v-model="selectedFilter" />
<Grid :cols="1" :md="2" :lg="3" :gap="4"> <Stack gap="3">
<OfferCard <OfferCard
v-for="offer in items" v-for="offer in items"
:key="offer.uuid" :key="offer.uuid"
:offer="offer" :offer="offer"
/> />
</Grid> </Stack>
<PaginationLoadMore <PaginationLoadMore
:shown="items.length" :shown="items.length"
@@ -80,8 +73,20 @@
<Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text> <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
</Stack> </Stack>
</Stack> </Stack>
</Section> </div>
</Stack>
<!-- Right side: Map (sticky, hidden on mobile) -->
<div class="hidden lg:block lg:w-3/5 rounded-lg overflow-hidden">
<ClientOnly>
<MapboxGlobe
map-id="offers-map"
:locations="itemsWithCoords"
class="h-full w-full"
/>
</ClientOnly>
</div>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -132,13 +137,6 @@ const pageTitle = computed(() => {
return t('catalogOffersSection.header.select_product') return t('catalogOffersSection.header.select_product')
}) })
const offersMapLink = computed(() => {
if (selectedProductUuid.value) {
return localePath(`/catalog/offers/map?product=${selectedProductUuid.value}`)
}
return localePath('/catalog/offers/map')
})
const selectProduct = (product: any) => { const selectProduct = (product: any) => {
router.push({ router.push({
path: route.path, path: route.path,

48
app/pages/catalog/suppliers/index.vue
View File

@@ -1,39 +1,34 @@
<template> <template>
<Stack gap="6"> <div class="flex flex-col h-[calc(100vh-200px)]">
<Section variant="plain" paddingY="md"> <!-- Header -->
<div class="py-4">
<PageHeader :title="t('catalogSuppliersSection.header.title')" /> <PageHeader :title="t('catalogSuppliersSection.header.title')" />
</Section> </div>
<Section v-if="isLoading" variant="plain" paddingY="md"> <!-- Loading state -->
<div v-if="isLoading" class="flex-1 flex items-center justify-center">
<Card padding="lg"> <Card padding="lg">
<Stack align="center" justify="center" gap="3"> <Stack align="center" justify="center" gap="3">
<Spinner /> <Spinner />
<Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text> <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
</Stack> </Stack>
</Card> </Card>
</Section> </div>
<Section v-else variant="plain" paddingY="md"> <!-- Split Layout -->
<div v-else class="flex-1 flex gap-4 min-h-0">
<!-- Left side: Filters + Cards (scrollable) -->
<div class="w-full lg:w-2/5 overflow-y-auto pr-2">
<Stack gap="4"> <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" /> <CatalogFilters :filters="filters" v-model="selectedFilter" />
<Grid :cols="1" :md="2" :lg="3" :gap="4"> <Stack gap="3">
<SupplierCard <SupplierCard
v-for="supplier in items" v-for="supplier in items"
:key="supplier.uuid || supplier.teamUuid" :key="supplier.uuid || supplier.teamUuid"
:supplier="supplier" :supplier="supplier"
/> />
</Grid> </Stack>
<PaginationLoadMore <PaginationLoadMore
:shown="items.length" :shown="items.length"
@@ -47,8 +42,20 @@
<Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text> <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
</Stack> </Stack>
</Stack> </Stack>
</Section> </div>
</Stack>
<!-- Right side: Map (sticky, hidden on mobile) -->
<div class="hidden lg:block lg:w-3/5 rounded-lg overflow-hidden">
<ClientOnly>
<MapboxGlobe
map-id="suppliers-map"
:locations="itemsWithCoords"
class="h-full w-full"
/>
</ClientOnly>
</div>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -57,7 +64,6 @@ definePageMeta({
}) })
const { t } = useI18n() const { t } = useI18n()
const localePath = useLocalePath()
const { const {
items, items,

107
app/pages/index.vue
View File

@@ -1,68 +1,5 @@
<template> <template>
<Stack gap="12"> <Stack gap="12">
<Section variant="hero">
<Stack gap="6">
<Heading :level="1" tone="inverse">{{ $t('search.title') }}</Heading>
<Text tone="inverse">{{ $t('search.description') }}</Text>
<Card padding="lg">
<Stack gap="6">
<!-- Search form -->
<Grid :cols="1" :md="4" :gap="4">
<Stack gap="2">
<Text tag="p" size="base" weight="semibold">{{ $t('search.product_label') }}</Text>
<FieldButton
:value="searchStore.searchForm.product"
:placeholder="$t('search.product_placeholder')"
@click="navigateTo(localePath('/goods'))"
/>
</Stack>
<Stack gap="2">
<Text tag="p" size="base" weight="semibold">{{ $t('search.quantity_label') }}</Text>
<Input
type="number"
v-model="searchStore.searchForm.quantity"
:placeholder="$t('search.quantity_placeholder')"
/>
</Stack>
<Stack gap="2">
<Text tag="p" size="base" weight="semibold">{{ $t('search.location_label') }}</Text>
<FieldButton
:value="searchStore.searchForm.location"
:placeholder="$t('search.location_placeholder')"
@click="navigateTo(localePath({ path: '/select-location', query: { mode: 'search' } }))"
/>
</Stack>
<Stack gap="2" align="stretch">
<Text tag="p" size="base" weight="semibold" tone="muted"> </Text>
<Button type="button" @click="handleSearch">
{{ searchError ? $t('search.error') : $t('search.search_button') }}
</Button>
</Stack>
</Grid>
</Stack>
</Card>
<Stack v-if="popularExamples.length" gap="2" align="center">
<Text tone="inverse" size="sm">{{ $t('search.popular_requests') }}</Text>
<Stack direction="row" gap="2" justify="center" align="center" class="flex-wrap text-center">
<button
v-for="example in popularExamples"
:key="`${example.product}-${example.location}`"
type="button"
class="badge badge-dash badge-primary text-sm"
@click="fillExample(example)"
>
{{ example.product }} {{ example.quantity }}{{ $t('search.units.tons_short') }} → {{ example.location }}
</button>
</Stack>
</Stack>
</Stack>
</Section>
<Section variant="plain"> <Section variant="plain">
<Stack gap="8" align="center"> <Stack gap="8" align="center">
<Heading :level="2">{{ $t('roles.title') }}</Heading> <Heading :level="2">{{ $t('roles.title') }}</Heading>
@@ -152,48 +89,4 @@
definePageMeta({ definePageMeta({
layout: 'topnav' layout: 'topnav'
}) })
const { t } = useI18n()
const searchStore = useSearchStore()
const searchError = ref('')
const localePath = useLocalePath()
const popularExamples = computed(() => ([
{ product: t('search.examples.metal_sheet.product'), quantity: 120, location: t('search.examples.metal_sheet.location') },
{ product: t('search.examples.green_coffee.product'), quantity: 200, location: t('search.examples.green_coffee.location') },
{ product: t('search.examples.wheat.product'), quantity: 500, location: t('search.examples.wheat.location') },
{ product: t('search.examples.cocoa.product'), quantity: 150, location: t('search.examples.cocoa.location') },
]))
const handleSearch = () => {
const location = (searchStore.searchForm.location || '').trim()
const productText = (searchStore.searchForm.product || '').trim()
const hasProduct = !!(searchStore.searchForm.productUuid || productText)
if (!location) {
searchError.value = t('search.validation.fill_product_location')
setTimeout(() => (searchError.value = ''), 2000)
return
}
if (!hasProduct) {
navigateTo(localePath('/goods'))
return
}
const query = {
productUuid: searchStore.searchForm.productUuid || undefined,
product: productText || undefined,
quantity: searchStore.searchForm.quantity || undefined,
locationUuid: searchStore.searchForm.locationUuid || undefined,
location: searchStore.searchForm.location || undefined
}
navigateTo(localePath({ path: '/request', query }))
}
const fillExample = (example) => {
searchStore.searchForm.product = example.product
searchStore.searchForm.quantity = example.quantity
searchStore.searchForm.location = example.location
}
</script> </script>