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

Fix unified catalog: add map, tokens inside input, redirect from main
Some checks failed
Build Docker Image / build (push) Has been cancelled
Details

Browse Source 
- 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
2026-01-22 11:06:58 +07:00
parent 08d7e0ade9
commit d837b9b90b
12 changed files with 377 additions and 768 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
app/components/search/UnifiedSearchBar.vue
View File

@@ -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(() => {