Added pinia for stateful marketplace search
Refactored to marketplace component
This commit is contained in:
Cal Corum
parent
9a294eba54
commit
d64ba33b61
216
components/Marketplace.vue
Normal file
216
components/Marketplace.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Filters -->
|
||||
<details :open="showFilters" @toggle="toggleFilters">
|
||||
<summary role="button" class="contrast" style="margin-bottom: 1rem;">
|
||||
{{ showFilters ? 'Hide Filters' : 'Show Filters' }}
|
||||
</summary>
|
||||
|
||||
<!-- Filters Panel -->
|
||||
<div class="container" style="background: var(--pico-card-background-color); padding: 1rem; border-radius: var(--pico-border-radius);">
|
||||
|
||||
<label for="filter-min-cost">Min Cost:</label>
|
||||
<input v-model.number="marketplace.filters.minCost" id="filter-min-cost" type="number" placeholder="Min cost" />
|
||||
|
||||
<label for="filter-max-cost">Max Cost:</label>
|
||||
<input v-model.number="marketplace.filters.maxCost" id="filter-max-cost" type="number" placeholder="Max cost" />
|
||||
|
||||
<label for="filter-rarity">Rarity:</label>
|
||||
<select v-model="marketplace.filters.rarities" id="filter-rarity" multiple size="6">
|
||||
<option value="Replacement">Replacement</option>
|
||||
<option value="Reserve">Reserve</option>
|
||||
<option value="Starter">Starter</option>
|
||||
<option value="All-Star">All-Star</option>
|
||||
<option value="MVP">MVP</option>
|
||||
<option value="Hall of Fame">Hall of Fame</option>
|
||||
</select>
|
||||
|
||||
<button @click="applyFilters" class="contrast" style="margin-top: 1rem;">
|
||||
Apply Filters
|
||||
</button>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="pending" class="container" style="text-align: center; padding: 2rem;">
|
||||
<p>Loading players...</p>
|
||||
</div>
|
||||
|
||||
<!-- No Results -->
|
||||
<div v-else-if="!playerList || playerList.length === 0" class="container" style="text-align: center; padding: 2rem;">
|
||||
<p>No players found. Try adjusting your filters!</p>
|
||||
</div>
|
||||
|
||||
<!-- Player Cards -->
|
||||
<section v-else class="grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; text-align: center;">
|
||||
<article v-for="player in playerList" :key="player.player_id" class="card player-card">
|
||||
<NuxtLink :to="`/players/${player.player_id}`" style="text-decoration: none; color: inherit;">
|
||||
<img :src="player?.player_headshot" alt="Player Headshot" class="headshot" />
|
||||
<h2 class="name">{{ player?.player_name }}</h2>
|
||||
<p class="franchise">{{ player?.franchise_name }}</p>
|
||||
|
||||
<img :src="player?.player_card_image" alt="Player Card" class="card-image" />
|
||||
<img v-if="player?.player_card_image2" :src="player?.player_card_image2" alt="Player Card 2" class="card-image" />
|
||||
|
||||
<div class="rarity" :style="{ backgroundColor: '#' + player.rarity_color }">
|
||||
{{ player.rarity_name }}
|
||||
</div>
|
||||
|
||||
<p class="cardset">{{ player?.cardset_name }}</p>
|
||||
<p class="cost">Cost: {{ player?.player_cost }}₼</p>
|
||||
</NuxtLink>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useMarketplaceStore } from '~/stores/marketplace'
|
||||
import type { MarketplacePlayer } from '~/types/MarketplacePlayer'
|
||||
|
||||
const marketplace = useMarketplaceStore()
|
||||
const client = useSupabaseClient()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const showFilters = ref(false)
|
||||
// Track the current filters from the URL query
|
||||
const currentQuery = ref(route.query)
|
||||
|
||||
const toggleFilters = () => {
|
||||
showFilters.value = !showFilters.value
|
||||
}
|
||||
|
||||
const applyFilters = async () => {
|
||||
console.log('Applying filters:', marketplace.filters)
|
||||
|
||||
router.replace({
|
||||
query: {
|
||||
minCost: marketplace.filters.minCost || undefined,
|
||||
maxCost: marketplace.filters.maxCost || undefined,
|
||||
rarities: marketplace.filters.rarities.length > 0 ? marketplace.filters.rarities : undefined
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const fetchPlayers = async () => {
|
||||
let query = client.from('marketplace')
|
||||
.select('*')
|
||||
.limit(20)
|
||||
|
||||
// Apply filter conditions based on the store values
|
||||
if (marketplace.filters.minCost > 0) {
|
||||
query = query.gte('player_cost', marketplace.filters.minCost)
|
||||
}
|
||||
if (marketplace.filters.maxCost > 0) {
|
||||
query = query.lte('player_cost', marketplace.filters.maxCost)
|
||||
}
|
||||
if (marketplace.filters.rarities.length > 0) {
|
||||
query = query.in('rarity_name', marketplace.filters.rarities)
|
||||
}
|
||||
|
||||
const { data, error } = await query
|
||||
|
||||
if (error) {
|
||||
console.error('Supabase error: ', error)
|
||||
}
|
||||
|
||||
return data
|
||||
}
|
||||
|
||||
// For useAsyncData, access filters via the store
|
||||
const { data: playerList, pending, error, refresh } = await useAsyncData<MarketplacePlayer[] | null>(
|
||||
'player-list', // Use a static key
|
||||
fetchPlayers, // Fetch players with current filters
|
||||
{
|
||||
// Only refetch when filters change
|
||||
lazy: true,
|
||||
server: false
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
const { minCost, maxCost, rarities } = route.query
|
||||
|
||||
marketplace.setFilters({
|
||||
minCost: minCost ? Number(minCost) : 0,
|
||||
maxCost: maxCost ? Number(maxCost) : 0,
|
||||
// rarities: rarities
|
||||
// ? Array.isArray(rarities) ? rarities : [rarities]
|
||||
// : []
|
||||
})
|
||||
})
|
||||
|
||||
// Watch for changes to the query params and refetch
|
||||
watch(() => route.query, async (newQuery) => {
|
||||
// Update filters based on query params
|
||||
if (JSON.stringify(newQuery) !== JSON.stringify(currentQuery.value)){
|
||||
currentQuery.value = newQuery // Update the tracked query
|
||||
|
||||
marketplace.setFilters({
|
||||
minCost: newQuery.minCost ? Number(newQuery.minCost) : 0,
|
||||
maxCost: newQuery.maxCost ? Number(newQuery.maxCost) : 0,
|
||||
rarities: newQuery.rarities ? (Array.isArray(newQuery.rarities) ? newQuery.rarities : [newQuery.rarities]) : []
|
||||
})
|
||||
|
||||
// Trigger refetch
|
||||
await refresh()
|
||||
}
|
||||
}, { immediate: true }) // Set immediate to true to run on initial load
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.player-card {
|
||||
max-width: 400px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.headshot {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 8px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.franchise {
|
||||
color: #666;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.rarity {
|
||||
color: white;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.cardset {
|
||||
font-size: 0.9rem;
|
||||
color: #555;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.cost {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
@ -44,6 +44,9 @@ function toggleMenu() {
|
||||
|
||||
<!-- Menu -->
|
||||
<ul class="menu" :class="{ open: menuOpen }">
|
||||
<li>
|
||||
<NuxtLink to="/marketplace">Marketplace</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/players/random">Random Cards</NuxtLink>
|
||||
</li>
|
||||
@ -51,7 +54,7 @@ function toggleMenu() {
|
||||
<NuxtLink to="/players/69">Card 69</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Shop</a>
|
||||
<a href="https://ko-fi.com/manticorum">Shop</a>
|
||||
</li>
|
||||
|
||||
<li v-if="user?.id" class="user-info">
|
||||
|
||||
@ -10,7 +10,7 @@ export default defineNuxtConfig({
|
||||
},
|
||||
},
|
||||
|
||||
modules: ['@nuxtjs/supabase'],
|
||||
modules: ['@nuxtjs/supabase', '@pinia/nuxt'],
|
||||
|
||||
css: ['@picocss/pico'],
|
||||
|
||||
|
||||
47
package-lock.json
generated
47
package-lock.json
generated
@ -9,7 +9,9 @@
|
||||
"dependencies": {
|
||||
"@nuxtjs/supabase": "^1.5.0",
|
||||
"@picocss/pico": "^2.1.1",
|
||||
"@pinia/nuxt": "^0.11.0",
|
||||
"nuxt": "^3.17.1",
|
||||
"pinia": "^3.0.2",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
@ -3017,6 +3019,21 @@
|
||||
"integrity": "sha512-kIDugA7Ps4U+2BHxiNHmvgPIQDWPDU4IeU6TNRdvXQM1uZX+FibqDQT2xUOnnO2yq/LUHcwnGlu1hvf4KfXnMg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@pinia/nuxt": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.11.0.tgz",
|
||||
"integrity": "sha512-QGFlUAkeVAhPCTXacrtNP4ti24sGEleVzmxcTALY9IkS6U5OUox7vmNL1pkqBeW39oSNq/UC5m40ofDEPHB1fg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@nuxt/kit": "^3.9.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"pinia": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@pkgjs/parseargs": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
|
||||
@ -8998,6 +9015,36 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/pinia": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.2.tgz",
|
||||
"integrity": "sha512-sH2JK3wNY809JOeiiURUR0wehJ9/gd9qFN2Y828jCbxEzKEmEt0pzCXwqiSTfuRsK9vQsOflSdnbdBOGrhtn+g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^7.7.2"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": ">=4.4.4",
|
||||
"vue": "^2.7.0 || ^3.5.11"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/pinia/node_modules/@vue/devtools-api": {
|
||||
"version": "7.7.6",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.6.tgz",
|
||||
"integrity": "sha512-b2Xx0KvXZObePpXPYHvBRRJLDQn5nhKjXh7vUhMEtWxz1AYNFOVIsh5+HLP8xDGL7sy+Q7hXeUxPHB/KgbtsPw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/devtools-kit": "^7.7.6"
|
||||
}
|
||||
},
|
||||
"node_modules/pkg-types": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.1.0.tgz",
|
||||
|
||||
@ -13,7 +13,9 @@
|
||||
"dependencies": {
|
||||
"@nuxtjs/supabase": "^1.5.0",
|
||||
"@picocss/pico": "^2.1.1",
|
||||
"@pinia/nuxt": "^0.11.0",
|
||||
"nuxt": "^3.17.1",
|
||||
"pinia": "^3.0.2",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
|
||||
@ -1,181 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<section>
|
||||
<h1>Marketplace</h1>
|
||||
|
||||
<!-- Filters -->
|
||||
<div>
|
||||
<h3>Filters</h3>
|
||||
<label for="filter-cost">Min Cost:</label>
|
||||
<input v-model="filters.minCost" id="filter-cost" type="number" placeholder="Min cost" />
|
||||
|
||||
<label for="filter-cost">Max Cost:</label>
|
||||
<input v-model="filters.maxCost" id="filter-cost" type="number" placeholder="Max cost" />
|
||||
|
||||
<label for="filter-rarity">Rarity:</label>
|
||||
<select v-model="filters.rarities" id="filter-rarity" multiple size="6">
|
||||
<option value="Replacement">Replacement</option>
|
||||
<option value="Reserve">Reserve</option>
|
||||
<option value="Starter">Starter</option>
|
||||
<option value="All-Star">All-Star</option>
|
||||
<option value="MVP">MVP</option>
|
||||
<option value="Hall of Fame">Hall of Fame</option>
|
||||
</select>
|
||||
|
||||
<button @click="applyFilters">Apply Filters</button>
|
||||
</div>
|
||||
|
||||
<!-- Player List -->
|
||||
<div v-if="pending" class="container" style="text-align: center; padding: 2rem;">
|
||||
<p>Loading players...</p>
|
||||
</div>
|
||||
|
||||
<!-- Show No Results if list is empty -->
|
||||
<div v-else-if="!playerList || playerList.length === 0" class="container" style="text-align: center; padding: 2rem;">
|
||||
<p>No players found. Try adjusting your filters!</p>
|
||||
</div>
|
||||
|
||||
<section v-else class="grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; text-align: center;">
|
||||
<article v-for="player in playerList" :key="player.player_id" class="card">
|
||||
<NuxtLink :to="`/players/${player.player_id}`" style="text-decoration: none; color: inherit;">
|
||||
<img :src="player?.player_headshot" alt="Player Headshot" class="headshot" />
|
||||
<h2 class="name">{{ player?.player_name }}</h2>
|
||||
|
||||
<p class="franchise">{{ player?.franchise_name }}</p>
|
||||
|
||||
<img :src="player?.player_card_image" alt="Player Card Image" class="card-image" />
|
||||
|
||||
<img v-if="player?.player_card_image2" :src="player?.player_card_image2" alt="Player Card Image2" class="card-image" />
|
||||
|
||||
<div class="rarity" :style="{ backgroundColor: '#' + player.rarity_color }">
|
||||
{{ player.rarity_name }}
|
||||
</div>
|
||||
|
||||
<p class="cardset">{{ player?.cardset_name }}</p>
|
||||
|
||||
<p class="cost">Cost: {{ player?.player_cost }}₼</p>
|
||||
</NuxtLink>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<Marketplace />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { MarketplacePlayer } from '~/types/MarketplacePlayer'
|
||||
const user = useSupabaseUser()
|
||||
const client = useSupabaseClient()
|
||||
|
||||
const filters = ref({
|
||||
minCost: 0,
|
||||
maxCost: 0,
|
||||
rarities: []
|
||||
})
|
||||
|
||||
const { data: playerList, pending, error } = await useAsyncData<MarketplacePlayer[] | null>(
|
||||
'random_player',
|
||||
async () => {
|
||||
let query = client.from('marketplace')
|
||||
.select('*')
|
||||
.limit(20)
|
||||
|
||||
if (filters.value.minCost > 0) {
|
||||
query = query.gte('player_cost', filters.value.minCost)
|
||||
}
|
||||
|
||||
if (filters.value.maxCost > 0) {
|
||||
query = query.lte('player_cost', filters.value.maxCost)
|
||||
}
|
||||
|
||||
if (filters.value.rarities.length > 0) {
|
||||
query = query.in('rarity_name', filters.value.rarities)
|
||||
}
|
||||
|
||||
const { data, error } = await query
|
||||
|
||||
if (error) {
|
||||
console.error('Supabase error: ', error)
|
||||
// throw new Error(error.message)
|
||||
}
|
||||
|
||||
console.log('players from supabase: ', data)
|
||||
return data
|
||||
},
|
||||
{
|
||||
lazy: true,
|
||||
server: false
|
||||
}
|
||||
)
|
||||
|
||||
const applyFilters = async () => {
|
||||
console.log('Applying filters:', filters.value)
|
||||
await refreshNuxtData('random_player')
|
||||
}
|
||||
|
||||
// const filteredPlayers = computed(() => {
|
||||
// return playerList.value.filter(player => {
|
||||
// const matchesCost = filters.value.cost ? player.cost >= filters.value.cost : true
|
||||
// const matchesRarity = filters.value.rarities.length
|
||||
// ? filters.value.rarities.includes(player.rarity_name)
|
||||
// : true
|
||||
|
||||
// return matchesCost && matchesRarity
|
||||
// })
|
||||
// })
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.player-card {
|
||||
max-width: 400px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.headshot {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 8px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.franchise {
|
||||
color: #666;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.rarity {
|
||||
color: white;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.cardset {
|
||||
font-size: 0.9rem;
|
||||
color: #555;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.cost {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -12,8 +12,6 @@
|
||||
async () => {
|
||||
const { data } = await client.from('random_player')
|
||||
.select('*,rarity!inner(*),mlb_player!inner(*)')
|
||||
.eq('franchise', 'Baltimore Orioles')
|
||||
.eq('mlb_player.offense_col', 1)
|
||||
.limit(3)
|
||||
|
||||
console.log('players from supabase: ', data)
|
||||
|
||||
14
stores/marketplace.ts
Normal file
14
stores/marketplace.ts
Normal file
@ -0,0 +1,14 @@
|
||||
export const useMarketplaceStore = defineStore('marketplace', {
|
||||
state: () => ({
|
||||
filters: {
|
||||
minCost: 0,
|
||||
maxCost: 0,
|
||||
rarities: [] as string[],
|
||||
},
|
||||
}),
|
||||
actions: {
|
||||
setFilters(newFilters: Partial<typeof this.filters>) {
|
||||
this.filters = { ...this.filters, ...newFilters }
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user