Enhance market module with new chat and events features
- Introduce chat module with components, services, and composables for real-time messaging. - Implement events module with API service, components, and ticket purchasing functionality. - Update app configuration to include new modules and their respective settings. - Refactor existing components to integrate with the new chat and events features. - Enhance market store and services to support new functionalities and improve order management. - Update routing to accommodate new views for chat and events, ensuring seamless navigation.
This commit is contained in:
parent
519a9003d4
commit
e40ac91417
46 changed files with 6305 additions and 3264 deletions
187
src/modules/market/views/MarketPage.vue
Normal file
187
src/modules/market/views/MarketPage.vue
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
<template>
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<!-- Loading State -->
|
||||
<div v-if="!isMarketReady && ((marketStore.isLoading ?? false) || marketPreloader.isPreloading)" class="flex justify-center items-center min-h-64">
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||||
<p class="text-gray-600">
|
||||
{{ marketPreloader.isPreloading ? 'Preloading market...' : 'Loading market...' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-else-if="(marketStore.error || marketPreloader.preloadError) && marketStore.products.length === 0" class="flex justify-center items-center min-h-64">
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-bold text-red-600 mb-4">Failed to load market</h2>
|
||||
<p class="text-gray-600 mb-4">{{ marketStore.error || marketPreloader.preloadError }}</p>
|
||||
<Button @click="retryLoadMarket" variant="outline">
|
||||
Try Again
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Market Content -->
|
||||
<div v-else>
|
||||
<!-- Market Header -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex items-center space-x-4">
|
||||
<Avatar v-if="marketStore.activeMarket?.opts?.logo">
|
||||
<AvatarImage :src="marketStore.activeMarket.opts.logo" />
|
||||
<AvatarFallback>M</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">
|
||||
{{ marketStore.activeMarket?.opts?.name || 'Market' }}
|
||||
</h1>
|
||||
<p v-if="marketStore.activeMarket?.opts?.description" class="text-gray-600">
|
||||
{{ marketStore.activeMarket.opts.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div class="flex-1 max-w-md ml-8">
|
||||
<Input
|
||||
v-model="marketStore.searchText"
|
||||
type="text"
|
||||
placeholder="Search products..."
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category Filters -->
|
||||
<div v-if="marketStore.allCategories.length > 0" class="mb-6">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Badge
|
||||
v-for="category in marketStore.allCategories"
|
||||
:key="category.category"
|
||||
:variant="category.selected ? 'default' : 'secondary'"
|
||||
class="cursor-pointer hover:bg-blue-100"
|
||||
@click="marketStore.toggleCategoryFilter(category.category)"
|
||||
>
|
||||
{{ category.category }}
|
||||
<span class="ml-1 text-xs">({{ category.count }})</span>
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No Products State -->
|
||||
<div v-if="isMarketReady && marketStore.filteredProducts.length === 0 && !(marketStore.isLoading ?? false)" class="text-center py-12">
|
||||
<h3 class="text-xl font-semibold text-gray-600 mb-2">No products found</h3>
|
||||
<p class="text-gray-500">Try adjusting your search or filters</p>
|
||||
</div>
|
||||
|
||||
<!-- Product Grid -->
|
||||
<div v-if="isMarketReady && marketStore.filteredProducts.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<ProductCard
|
||||
v-for="product in marketStore.filteredProducts"
|
||||
:key="product.id"
|
||||
:product="product"
|
||||
@add-to-cart="addToCart"
|
||||
@view-details="viewProduct"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Cart Summary -->
|
||||
<div v-if="marketStore.totalCartItems > 0" class="fixed bottom-4 right-4">
|
||||
<Button @click="viewCart" class="shadow-lg">
|
||||
<ShoppingCart class="w-5 h-5 mr-2" />
|
||||
Cart ({{ marketStore.totalCartItems }})
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useMarketStore } from '@/stores/market'
|
||||
import { useMarket } from '@/composables/useMarket'
|
||||
import { useMarketPreloader } from '@/composables/useMarketPreloader'
|
||||
import { config } from '@/lib/config'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
|
||||
import { ShoppingCart } from 'lucide-vue-next'
|
||||
import ProductCard from '../components/ProductCard.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const marketStore = useMarketStore()
|
||||
const market = useMarket()
|
||||
const marketPreloader = useMarketPreloader()
|
||||
|
||||
let unsubscribe: (() => void) | null = null
|
||||
|
||||
// Check if we need to load market data
|
||||
const needsToLoadMarket = computed(() => {
|
||||
return !marketPreloader.isPreloaded.value &&
|
||||
!marketPreloader.isPreloading.value &&
|
||||
marketStore.products.length === 0
|
||||
})
|
||||
|
||||
// Check if market data is ready (either preloaded or loaded)
|
||||
const isMarketReady = computed(() => {
|
||||
const isLoading = marketStore.isLoading ?? false
|
||||
const ready = marketPreloader.isPreloaded.value ||
|
||||
(marketStore.products.length > 0 && !isLoading)
|
||||
|
||||
return ready
|
||||
})
|
||||
|
||||
const loadMarket = async () => {
|
||||
try {
|
||||
const naddr = config.market.defaultNaddr
|
||||
if (!naddr) {
|
||||
throw new Error('No market naddr configured')
|
||||
}
|
||||
|
||||
await market.connectToMarket()
|
||||
await market.loadMarket(naddr)
|
||||
|
||||
// Subscribe to real-time updates
|
||||
unsubscribe = market.subscribeToMarketUpdates()
|
||||
|
||||
} catch (error) {
|
||||
marketStore.setError(error instanceof Error ? error.message : 'Failed to load market')
|
||||
}
|
||||
}
|
||||
|
||||
const retryLoadMarket = () => {
|
||||
marketStore.setError(null)
|
||||
marketPreloader.resetPreload()
|
||||
loadMarket()
|
||||
}
|
||||
|
||||
const addToCart = (product: any) => {
|
||||
marketStore.addToCart(product)
|
||||
}
|
||||
|
||||
const viewProduct = (_product: any) => {
|
||||
// TODO: Navigate to product detail page
|
||||
}
|
||||
|
||||
const viewCart = () => {
|
||||
router.push('/cart')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// Only load market if it hasn't been preloaded
|
||||
if (needsToLoadMarket.value) {
|
||||
loadMarket()
|
||||
} else if (marketPreloader.isPreloaded.value) {
|
||||
// Subscribe to real-time updates if market was preloaded
|
||||
unsubscribe = market.subscribeToMarketUpdates()
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe()
|
||||
}
|
||||
market.disconnectFromMarket()
|
||||
})
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue