UI improvements: filters, map layout, search bar
Some checks failed
Build Docker Image / build (push) Failing after 1m29s

- Add hubCountries query and country filter for hubs page
- Add getAvailableProducts query for offers (only products with active offers)
- Add sourceLatitude/sourceLongitude to orders GraphQL
- Fix ListMapLayout with position fixed for proper map height
- GlobalSearchBar: make fields wider, remove unit selector
- Remove status/isVerified filters from suppliers/offers (backend handles this)
This commit is contained in:
Ruslan Bakiev
2026-01-08 10:42:59 +07:00
parent 0c88cf383c
commit d6865d2129
15 changed files with 87 additions and 78 deletions

View File

@@ -7,7 +7,7 @@
>
<!-- Product field (clickable, navigates to /goods) -->
<div
class="flex flex-col px-4 py-2 min-w-32 pl-6 rounded-l-full hover:bg-base-200/50 border-r border-base-300 cursor-pointer"
class="flex flex-col px-4 py-2 min-w-48 pl-6 rounded-l-full hover:bg-base-200/50 border-r border-base-300 cursor-pointer"
@click="goToProductSelection"
>
<label class="text-xs font-semibold text-base-content/60 mb-0.5">
@@ -19,29 +19,23 @@
</div>
<!-- Quantity field (editable) -->
<div class="flex flex-col px-4 py-2 min-w-32 hover:bg-base-200/50 border-r border-base-300">
<div class="flex flex-col px-4 py-2 min-w-48 hover:bg-base-200/50 border-r border-base-300">
<label class="text-xs font-semibold text-base-content/60 mb-0.5">
{{ $t('search.quantity') }}
</label>
<div class="flex items-center gap-1">
<input
v-model="quantity"
type="number"
min="1"
:placeholder="$t('search.quantity_placeholder')"
class="w-16 bg-transparent outline-none text-sm"
@change="syncQuantityToStore"
/>
<select v-model="unit" class="bg-transparent outline-none text-sm text-base-content/70" @change="syncQuantityToStore">
<option value="t">{{ $t('units.t') }}</option>
<option value="kg">{{ $t('units.kg') }}</option>
</select>
</div>
<input
v-model="quantity"
type="number"
min="1"
:placeholder="$t('search.quantity_placeholder')"
class="w-full bg-transparent outline-none text-sm"
@change="syncQuantityToStore"
/>
</div>
<!-- Destination field (clickable, navigates to /select-location) -->
<div
class="flex flex-col px-4 py-2 min-w-32 hover:bg-base-200/50 cursor-pointer"
class="flex flex-col px-4 py-2 min-w-48 hover:bg-base-200/50 cursor-pointer"
@click="goToLocationSelection"
>
<label class="text-xs font-semibold text-base-content/60 mb-0.5">
@@ -67,7 +61,7 @@
<script setup lang="ts">
const emit = defineEmits<{
search: [params: { productUuid?: string; quantity?: number; unit?: string; locationUuid?: string }]
search: [params: { productUuid?: string; quantity?: number; locationUuid?: string }]
}>()
const router = useRouter()
@@ -84,13 +78,11 @@ const locationUuid = computed(() => searchStore.searchForm.locationUuid || '')
const quantity = ref<number | undefined>(
searchStore.searchForm.quantity ? Number(searchStore.searchForm.quantity) : undefined
)
const unit = ref(searchStore.searchForm.unit || 't')
const syncQuantityToStore = () => {
if (quantity.value) {
searchStore.setQuantity(String(quantity.value))
}
searchStore.setUnit(unit.value)
}
// Navigation to selection pages
@@ -135,7 +127,6 @@ const handleSearch = () => {
emit('search', {
productUuid: productUuid.value,
quantity: quantity.value,
unit: unit.value,
locationUuid: locationUuid.value
})
}
@@ -146,10 +137,4 @@ watch(() => searchStore.searchForm.quantity, (val) => {
quantity.value = Number(val)
}
}, { immediate: true })
watch(() => searchStore.searchForm.unit, (val) => {
if (val) {
unit.value = val
}
}, { immediate: true })
</script>