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

Add hover pin to info panel cards
All checks were successful
Build Docker Image / build (push) Successful in 4m34s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-06 16:52:48 +07:00
parent 8c1827fab6
commit b971391fd7
2 changed files with 69 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
app/components/catalog/InfoPanel.vue
View File

@@ -111,14 +111,25 @@
{{ $t('catalog.empty.noProducts') }} {{ $t('catalog.empty.noProducts') }}
</div> </div>
<div v-else-if="!loadingProducts" class="flex flex-col gap-2"> <div v-else-if="!loadingProducts" class="flex flex-col gap-2">
<ProductCard <div
v-for="(product, index) in relatedProducts" v-for="(product, index) in relatedProducts"
:key="product.uuid ?? index" :key="product.uuid ?? index"
:product="product" class="relative group"
compact >
selectable <button
@select="onProductSelect(product)" v-if="product.uuid"
/> class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity bg-black/40 hover:bg-black/60 text-white rounded-full w-6 h-6 flex items-center justify-center"
@click.stop="emit('pin', 'product', product)"
>
<Icon name="lucide:pin" size="12" />
</button>
<ProductCard
:product="product"
compact
selectable
@select="onProductSelect(product)"
/>
</div>
</div> </div>
</section> </section>
@@ -169,13 +180,24 @@
{{ $t('catalog.info.noSuppliers') }} {{ $t('catalog.info.noSuppliers') }}
</div> </div>
<div v-else-if="!loadingSuppliers" class="flex flex-col gap-2"> <div v-else-if="!loadingSuppliers" class="flex flex-col gap-2">
<SupplierCard <div
v-for="(supplier, index) in relatedSuppliers" v-for="(supplier, index) in relatedSuppliers"
:key="supplier.uuid ?? index" :key="supplier.uuid ?? index"
:supplier="supplier" class="relative group"
selectable >
@select="onSupplierSelect(supplier)" <button
/> v-if="supplier.uuid"
class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity bg-black/40 hover:bg-black/60 text-white rounded-full w-6 h-6 flex items-center justify-center"
@click.stop="emit('pin', 'supplier', supplier)"
>
<Icon name="lucide:pin" size="12" />
</button>
<SupplierCard
:supplier="supplier"
selectable
@select="onSupplierSelect(supplier)"
/>
</div>
</div> </div>
</section> </section>
@@ -202,14 +224,25 @@
<div class="text-sm text-white/80">{{ $t('catalog.info.railHubs') }}</div> <div class="text-sm text-white/80">{{ $t('catalog.info.railHubs') }}</div>
</div> </div>
</Card> </Card>
<HubCard <div
v-for="(hub, index) in railHubs" v-for="(hub, index) in railHubs"
:key="hub.uuid ?? index" :key="hub.uuid ?? index"
:hub="hub" class="relative group"
:origin="originCoords" >
selectable <button
@select="onHubSelect(hub)" v-if="hub.uuid"
/> class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity bg-black/40 hover:bg-black/60 text-white rounded-full w-6 h-6 flex items-center justify-center"
@click.stop="emit('pin', 'hub', hub)"
>
<Icon name="lucide:pin" size="12" />
</button>
<HubCard
:hub="hub"
:origin="originCoords"
selectable
@select="onHubSelect(hub)"
/>
</div>
</div> </div>
</template> </template>
@@ -223,14 +256,25 @@
<div class="text-sm text-white/80">{{ $t('catalog.info.seaHubs') }}</div> <div class="text-sm text-white/80">{{ $t('catalog.info.seaHubs') }}</div>
</div> </div>
</Card> </Card>
<HubCard <div
v-for="(hub, index) in seaHubs" v-for="(hub, index) in seaHubs"
:key="hub.uuid ?? index" :key="hub.uuid ?? index"
:hub="hub" class="relative group"
:origin="originCoords" >
selectable <button
@select="onHubSelect(hub)" v-if="hub.uuid"
/> class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity bg-black/40 hover:bg-black/60 text-white rounded-full w-6 h-6 flex items-center justify-center"
@click.stop="emit('pin', 'hub', hub)"
>
<Icon name="lucide:pin" size="12" />
</button>
<HubCard
:hub="hub"
:origin="originCoords"
selectable
@select="onHubSelect(hub)"
/>
</div>
</div> </div>
</template> </template>
</div> </div>
@@ -277,6 +321,7 @@ const props = defineProps<{
const emit = defineEmits<{ const emit = defineEmits<{
'close': [] 'close': []
'add-to-filter': [] 'add-to-filter': []
'pin': [type: 'product' | 'supplier' | 'hub', item: { uuid?: string | null; name?: string | null }]
'open-info': [type: InfoEntityType, uuid: string] 'open-info': [type: InfoEntityType, uuid: string]
'select-product': [uuid: string | null] 'select-product': [uuid: string | null]
'select-offer': [offer: { uuid: string; productUuid?: string | null }] 'select-offer': [offer: { uuid: string; productUuid?: string | null }]

1
app/pages/catalog/index.vue
View File

@@ -56,6 +56,7 @@
:loading-offers="isLoadingOffers" :loading-offers="isLoadingOffers"
@close="onInfoClose" @close="onInfoClose"
@add-to-filter="onInfoAddToFilter" @add-to-filter="onInfoAddToFilter"
@pin="onPinItem"
@open-info="onInfoOpenRelated" @open-info="onInfoOpenRelated"
@select-product="onInfoSelectProduct" @select-product="onInfoSelectProduct"
@select-offer="onSelectOffer" @select-offer="onSelectOffer"