From c7054579f13196230f2fde2fe78468bcc717ac8e Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 23 Jan 2026 09:56:17 +0700
Subject: [PATCH] Fix catalog: selection panels instead of modals, remove
 duplicate QuoteForm

- Add SelectionPanel.vue for product/hub/supplier selection lists
- Remove QuoteForm from QuotePanel (header already has controls)
- Show SelectionPanel when selectMode is active
- Connect search button in header to page via shared state
---
 app/components/catalog/QuotePanel.vue     |  43 +----
 app/components/catalog/SelectionPanel.vue | 143 +++++++++++++++
 app/layouts/topnav.vue                    |   8 +-
 app/pages/catalog/index.vue               | 201 ++++++----------------
 4 files changed, 207 insertions(+), 188 deletions(-)
 create mode 100644 app/components/catalog/SelectionPanel.vue

diff --git a/app/components/catalog/QuotePanel.vue b/app/components/catalog/QuotePanel.vue
index 516dd7c..e762b00 100644
--- a/app/components/catalog/QuotePanel.vue
+++ b/app/components/catalog/QuotePanel.vue
@@ -1,27 +1,13 @@
 <template>
   <div class="flex flex-col gap-4 h-full">
-    <!-- Quote form -->
-    <QuoteForm
-      :product-id="productId"
-      :product-label="productLabel"
-      :hub-id="hubId"
-      :hub-label="hubLabel"
-      :supplier-id="supplierId"
-      :supplier-label="supplierLabel"
-      :quantity="quantity"
-      :can-search="canSearch"
-      @edit-filter="emit('edit-filter', $event)"
-      @remove-filter="emit('remove-filter', $event)"
-      @update-quantity="emit('update-quantity', $event)"
-      @search="emit('search')"
-      @clear-all="emit('clear-all')"
-    />
-
-    <!-- Divider -->
-    <div v-if="showResults" class="divider my-0" />
+    <!-- Header -->
+    <div class="flex items-center justify-between flex-shrink-0">
+      <h3 class="font-semibold text-lg">{{ $t('catalog.headers.offers') }}</h3>
+      <span class="badge badge-neutral">{{ offers.length }}</span>
+    </div>
 
     <!-- Results section -->
-    <div v-if="showResults" class="flex-1 overflow-y-auto">
+    <div class="flex-1 overflow-y-auto -mx-1 px-1">
       <div v-if="loading" class="flex items-center justify-center py-8">
         <span class="loading loading-spinner loading-md" />
       </div>
@@ -32,9 +18,6 @@
       </div>
 
       <div v-else class="flex flex-col gap-3">
-        <Text tone="muted" class="text-sm">
-          {{ $t('catalog.headers.offers') }}: {{ offers.length }}
-        </Text>
         <div
           v-for="offer in offers"
           :key="offer.uuid"
@@ -57,25 +40,11 @@ interface Offer {
 }
 
 defineProps<{
-  productId?: string
-  productLabel?: string
-  hubId?: string
-  hubLabel?: string
-  supplierId?: string
-  supplierLabel?: string
-  quantity?: string
-  canSearch: boolean
-  showResults: boolean
   loading: boolean
   offers: Offer[]
 }>()
 
 const emit = defineEmits<{
-  'edit-filter': [type: string]
-  'remove-filter': [type: string]
-  'update-quantity': [value: string]
-  'search': []
-  'clear-all': []
   'select-offer': [offer: Offer]
 }>()
 </script>
diff --git a/app/components/catalog/SelectionPanel.vue b/app/components/catalog/SelectionPanel.vue
new file mode 100644
index 0000000..c5b4741
--- /dev/null
+++ b/app/components/catalog/SelectionPanel.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="flex flex-col h-full gap-3">
+    <!-- Header -->
+    <div class="flex items-center justify-between flex-shrink-0">
+      <h3 class="font-semibold text-lg">{{ title }}</h3>
+      <button class="btn btn-ghost btn-sm btn-circle" @click="emit('close')">
+        <Icon name="lucide:x" size="18" />
+      </button>
+    </div>
+
+    <!-- Search input -->
+    <div class="flex-shrink-0">
+      <input
+        v-model="searchQuery"
+        type="text"
+        :placeholder="searchPlaceholder"
+        class="input input-bordered input-sm w-full"
+      />
+    </div>
+
+    <!-- List -->
+    <div class="flex-1 overflow-y-auto -mx-1 px-1">
+      <div v-if="loading" class="flex items-center justify-center py-8">
+        <span class="loading loading-spinner loading-md" />
+      </div>
+
+      <div v-else-if="filteredItems.length === 0" class="text-center py-8 text-base-content/60">
+        <Icon name="lucide:search-x" size="32" class="mb-2" />
+        <p>{{ $t('catalog.empty.noResults') }}</p>
+      </div>
+
+      <div v-else class="flex flex-col gap-2">
+        <!-- Products -->
+        <template v-if="selectMode === 'product'">
+          <ProductCard
+            v-for="item in filteredItems"
+            :key="item.uuid"
+            :product="item"
+            selectable
+            compact
+            :is-selected="selectedId === item.uuid"
+            @select="onSelect(item)"
+          />
+        </template>
+
+        <!-- Hubs -->
+        <template v-else-if="selectMode === 'hub'">
+          <HubCard
+            v-for="item in filteredItems"
+            :key="item.uuid"
+            :hub="item"
+            selectable
+            :is-selected="selectedId === item.uuid"
+            @select="onSelect(item)"
+          />
+        </template>
+
+        <!-- Suppliers -->
+        <template v-else-if="selectMode === 'supplier'">
+          <SupplierCard
+            v-for="item in filteredItems"
+            :key="item.uuid"
+            :supplier="item"
+            selectable
+            :is-selected="selectedId === item.uuid"
+            @select="onSelect(item)"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SelectMode } from '~/composables/useCatalogSearch'
+
+interface Item {
+  uuid?: string | null
+  name?: string | null
+  [key: string]: any
+}
+
+const props = defineProps<{
+  selectMode: SelectMode
+  products?: Item[]
+  hubs?: Item[]
+  suppliers?: Item[]
+  selectedId?: string
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'select': [type: string, item: Item]
+  'close': []
+}>()
+
+const { t } = useI18n()
+
+const searchQuery = ref('')
+
+const title = computed(() => {
+  switch (props.selectMode) {
+    case 'product': return t('catalog.headers.selectProduct')
+    case 'hub': return t('catalog.headers.selectHub')
+    case 'supplier': return t('catalog.headers.selectSupplier')
+    default: return ''
+  }
+})
+
+const searchPlaceholder = computed(() => {
+  switch (props.selectMode) {
+    case 'product': return t('catalog.search.searchProducts')
+    case 'hub': return t('catalog.search.searchHubs')
+    case 'supplier': return t('catalog.search.searchSuppliers')
+    default: return t('catalog.search.placeholder')
+  }
+})
+
+const items = computed(() => {
+  switch (props.selectMode) {
+    case 'product': return props.products || []
+    case 'hub': return props.hubs || []
+    case 'supplier': return props.suppliers || []
+    default: return []
+  }
+})
+
+const filteredItems = computed(() => {
+  if (!searchQuery.value.trim()) return items.value
+
+  const query = searchQuery.value.toLowerCase()
+  return items.value.filter(item =>
+    item.name?.toLowerCase().includes(query) ||
+    item.country?.toLowerCase().includes(query)
+  )
+})
+
+const onSelect = (item: Item) => {
+  if (props.selectMode && item.uuid) {
+    emit('select', props.selectMode, item)
+  }
+}
+</script>
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index c614587..00eba51 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -244,14 +244,16 @@ const toggleTheme = () => {
   theme.value = theme.value === 'night' ? 'cupcake' : 'night'
 }
 
-// Search handler for Quote mode - emits event that page can handle
+// Search handler for Quote mode - triggers search via shared state
 const localePath = useLocalePath()
 const router = useRouter()
+const searchTrigger = useState<number>('catalog-search-trigger', () => 0)
 const onSearch = () => {
-  // Navigate to catalog page which will handle the search
+  // Navigate to catalog page if not there
   if (!route.path.includes('/catalog')) {
     router.push({ path: localePath('/catalog'), query: { ...route.query, mode: 'quote' } })
   }
-  // The page component will react to canSearch becoming true and perform the search
+  // Trigger search by incrementing the counter (page watches this)
+  searchTrigger.value++
 }
 </script>
diff --git a/app/pages/catalog/index.vue b/app/pages/catalog/index.vue
index 88dd270..8dc66c0 100644
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -9,92 +9,29 @@
     :show-panel="showPanel"
     @select="onMapSelect"
   >
-    <!-- Panel slot - shows Quote form or selection list -->
+    <!-- Panel slot - shows selection list OR quote results -->
     <template #panel>
+      <!-- Selection mode: show list for picking product/hub/supplier -->
+      <SelectionPanel
+        v-if="selectMode"
+        :select-mode="selectMode"
+        :products="products"
+        :hubs="hubs"
+        :suppliers="suppliers"
+        :loading="selectionLoading"
+        @select="onSelectItem"
+        @close="cancelSelect"
+      />
+
+      <!-- Quote results: show offers after search -->
       <QuotePanel
-        :product-id="productId"
-        :product-label="getFilterLabel('product', productId)"
-        :hub-id="hubId"
-        :hub-label="getFilterLabel('hub', hubId)"
-        :supplier-id="supplierId"
-        :supplier-label="getFilterLabel('supplier', supplierId)"
-        :quantity="quantity"
-        :can-search="canSearch"
-        :show-results="showQuoteResults"
+        v-else-if="showQuoteResults"
         :loading="offersLoading"
         :offers="offers"
-        @edit-filter="onEditFilter"
-        @remove-filter="onRemoveFilter"
-        @update-quantity="onUpdateQuantity"
-        @search="onSearch"
-        @clear-all="onClearAll"
         @select-offer="onSelectOffer"
       />
     </template>
   </CatalogPage>
-
-  <!-- Product selection modal -->
-  <dialog ref="productModalRef" class="modal modal-bottom sm:modal-middle">
-    <div class="modal-box max-w-2xl max-h-[80vh]">
-      <h3 class="font-bold text-lg mb-4">{{ t('catalog.quote.selectProduct') }}</h3>
-      <div class="overflow-y-auto max-h-[60vh]">
-        <div v-if="productsLoading" class="flex justify-center py-8">
-          <span class="loading loading-spinner loading-md" />
-        </div>
-        <div v-else class="flex flex-col gap-2">
-          <button
-            v-for="product in products"
-            :key="product.uuid"
-            class="btn btn-ghost justify-start"
-            @click="selectProduct(product)"
-          >
-            <Icon name="lucide:package" size="16" />
-            {{ product.name }}
-          </button>
-        </div>
-      </div>
-      <div class="modal-action">
-        <form method="dialog">
-          <button class="btn">{{ t('common.cancel') }}</button>
-        </form>
-      </div>
-    </div>
-    <form method="dialog" class="modal-backdrop">
-      <button>close</button>
-    </form>
-  </dialog>
-
-  <!-- Hub selection modal -->
-  <dialog ref="hubModalRef" class="modal modal-bottom sm:modal-middle">
-    <div class="modal-box max-w-2xl max-h-[80vh]">
-      <h3 class="font-bold text-lg mb-4">{{ t('catalog.quote.selectHub') }}</h3>
-      <div class="overflow-y-auto max-h-[60vh]">
-        <div v-if="hubsLoading" class="flex justify-center py-8">
-          <span class="loading loading-spinner loading-md" />
-        </div>
-        <div v-else class="flex flex-col gap-2">
-          <button
-            v-for="hub in hubs"
-            :key="hub.uuid"
-            class="btn btn-ghost justify-start"
-            @click="selectHub(hub)"
-          >
-            <Icon name="lucide:map-pin" size="16" />
-            {{ hub.name }}
-            <span v-if="hub.country" class="text-base-content/60 text-sm ml-auto">{{ hub.country }}</span>
-          </button>
-        </div>
-      </div>
-      <div class="modal-action">
-        <form method="dialog">
-          <button class="btn">{{ t('common.cancel') }}</button>
-        </form>
-      </div>
-    </div>
-    <form method="dialog" class="modal-backdrop">
-      <button>close</button>
-    </form>
-  </dialog>
 </template>
 
 <script setup lang="ts">
@@ -111,44 +48,58 @@ const localePath = useLocalePath()
 
 const {
   catalogMode,
+  selectMode,
   productId,
   supplierId,
   hubId,
-  quantity,
   canSearch,
   mapViewMode,
   entityColors,
   selectItem,
-  removeFilter,
-  clearAll,
-  setLabel,
-  filterLabels
+  cancelSelect,
+  setLabel
 } = useCatalogSearch()
 
-// Composables for data
+// Composables for data (initialize immediately when selectMode changes)
 const { items: products, isLoading: productsLoading, init: initProducts } = useCatalogProducts()
 const { items: hubs, isLoading: hubsLoading, init: initHubs } = useCatalogHubs()
+const { items: suppliers, isLoading: suppliersLoading, init: initSuppliers } = useCatalogSuppliers()
 
-// Modal refs
-const productModalRef = ref<HTMLDialogElement | null>(null)
-const hubModalRef = ref<HTMLDialogElement | null>(null)
+// Selection loading state
+const selectionLoading = computed(() => {
+  if (selectMode.value === 'product') return productsLoading.value
+  if (selectMode.value === 'hub') return hubsLoading.value
+  if (selectMode.value === 'supplier') return suppliersLoading.value
+  return false
+})
+
+// Initialize data when selectMode changes
+watch(selectMode, async (mode) => {
+  if (mode === 'product') await initProducts()
+  if (mode === 'hub') await initHubs()
+  if (mode === 'supplier') await initSuppliers()
+}, { immediate: true })
 
 // Offers data for quote results
 const offers = ref<any[]>([])
 const offersLoading = ref(false)
 const showQuoteResults = ref(false)
 
+// Watch for search trigger from topnav
+const searchTrigger = useState<number>('catalog-search-trigger', () => 0)
+watch(searchTrigger, () => {
+  if (canSearch.value) {
+    onSearch()
+  }
+})
+
 // Loading state
-const isLoading = computed(() => offersLoading.value)
+const isLoading = computed(() => offersLoading.value || selectionLoading.value)
 
-// Show panel when in Quote mode
-const showPanel = computed(() => catalogMode.value === 'quote')
-
-// Get filter label from cache
-const getFilterLabel = (type: string, id: string | undefined): string | undefined => {
-  if (!id) return undefined
-  return filterLabels.value[type]?.[id]
-}
+// Show panel when selecting OR when showing quote results
+const showPanel = computed(() => {
+  return selectMode.value !== null || showQuoteResults.value
+})
 
 // Cluster node type based on map view mode
 const clusterNodeType = computed(() => {
@@ -170,58 +121,19 @@ const mapPointColor = computed(() => {
 const onMapSelect = (item: any) => {
   // Navigate to offer detail page if in quote mode with results
   if (catalogMode.value === 'quote' && item.uuid) {
-    // Could navigate to offer detail
     console.log('Selected from map:', item)
   }
 }
 
-// Edit filter - open modal
-const onEditFilter = async (type: string) => {
-  if (type === 'product') {
-    await initProducts()
-    productModalRef.value?.showModal()
-  } else if (type === 'hub') {
-    await initHubs()
-    hubModalRef.value?.showModal()
+// Handle selection from SelectionPanel
+const onSelectItem = (type: string, item: any) => {
+  if (item.uuid && item.name) {
+    selectItem(type, item.uuid, item.name)
+    showQuoteResults.value = false
+    offers.value = []
   }
 }
 
-// Remove filter
-const onRemoveFilter = (type: string) => {
-  removeFilter(type)
-  showQuoteResults.value = false
-  offers.value = []
-}
-
-// Update quantity
-const onUpdateQuantity = (value: string) => {
-  // Store in URL
-  const route = useRoute()
-  const newQuery = { ...route.query }
-  if (value) {
-    newQuery.qty = value
-  } else {
-    delete newQuery.qty
-  }
-  router.push({ query: newQuery })
-}
-
-// Select product from modal
-const selectProduct = (product: any) => {
-  selectItem('product', product.uuid, product.name)
-  productModalRef.value?.close()
-  showQuoteResults.value = false
-  offers.value = []
-}
-
-// Select hub from modal
-const selectHub = (hub: any) => {
-  selectItem('hub', hub.uuid, hub.name)
-  hubModalRef.value?.close()
-  showQuoteResults.value = false
-  offers.value = []
-}
-
 // Search for offers
 const onSearch = async () => {
   if (!canSearch.value) return
@@ -256,13 +168,6 @@ const onSearch = async () => {
   }
 }
 
-// Clear all filters
-const onClearAll = () => {
-  clearAll()
-  showQuoteResults.value = false
-  offers.value = []
-}
-
 // Select offer - navigate to detail page
 const onSelectOffer = (offer: any) => {
   if (offer.uuid && offer.productUuid) {